Angular Login and Signup Page | Local-Storage | angular tutorial | angular tutorial for beginners
Summary
TLDRIn this Learning Partner video, the focus is on creating login and sign-up pages using Angular. The tutorial demonstrates how to utilize HTML and CSS templates from freefrontend.com, integrating them with Angular's forms module for data binding. It covers storing user data in local storage upon sign-up and checking credentials during login. The video also addresses common issues like data replication and provides solutions. The presenter guides viewers through the process, emphasizing the importance of initializing objects to avoid reference issues. The tutorial concludes with a demonstration of the login functionality, highlighting the importance of matching user credentials for successful authentication.
Takeaways
- 💻 The video demonstrates how to create a login and signup page using Angular, focusing on local storage for storing user data.
- 🔎 The template used for the login/signup page was downloaded from Google and uses HTML and CSS from freefrontend.com.
- 📋 Instead of integrating with an API, the data will be stored in the browser's local storage, specifically in an array containing user credentials.
- 📝 Two objects are created for storing the user data, one for the signup form with fields for username, email, and password, and another for the login form with username and password.
- 🔗 The video uses Angular's NG Model for two-way data binding, connecting the form fields to the objects created.
- ⚠️ The FormsModule must be imported in the app module for the NG Model to work without causing errors during compilation.
- 📦 When a user signs up, their data is pushed to an array and stored in local storage after being converted to a JSON string using `json.stringify`.
- 🔄 A common issue of repeated entries in local storage is fixed by clearing the object references after each submission.
- 🔑 During login, the user’s credentials are compared with the data in local storage. If a match is found, the user logs in successfully; otherwise, an error message is shown.
- 🔍 The video concludes by noting that this logic can be adapted for API integration instead of relying on local storage, while keeping the same core principles.
Q & A
What is the main focus of the video script?
-The main focus of the video script is to demonstrate how to create login and sign-up pages using Angular, including storing user data in local storage.
Where can one find the HTML and CSS code for the login page as mentioned in the script?
-The HTML and CSS code for the login page can be found on freefrontend.com, as mentioned in the script.
What is the purpose of the 'signupUsers' array in the script?
-The 'signupUsers' array is used to store the user data provided during the sign-up process before saving it to local storage.
How is the sign-up form data bound to the 'signupUsers' array in Angular?
-The sign-up form data is bound to the 'signupUsers' array using the 'ngModel' directive in Angular, which is linked to the form fields like username, email, and password.
What is the role of the 'FormsModule' in the Angular application discussed in the script?
-The 'FormsModule' is necessary for using the 'ngModel' directive in Angular. It must be imported into the app module to enable the use of 'ngModel'.
How does the script handle the storage of user data into local storage?
-The script stores user data into local storage by pushing the sign-up object into the 'signupUsers' array and then using 'localStorage.setItem' to save the array as a stringified JSON.
What is the issue faced when storing data in local storage as described in the script?
-The issue faced is that the same data gets replicated in local storage. This is resolved by initializing the sign-up object before pushing it into the array.
How does the script handle the login process?
-The login process involves reading the 'signupUsers' array from local storage, and then checking if the provided username and password match any record in the array.
What is the method used to read data from local storage in the script?
-The method used to read data from local storage is 'localStorage.getItem', which retrieves the data associated with the specified key.
How does the script differentiate between correct and incorrect login credentials?
-The script checks if a user with the provided username and password exists in the 'signupUsers' array. If a match is found, it confirms a successful login; otherwise, it shows an error for wrong credentials.
What is the suggestion for integrating with an API instead of using local storage?
-The suggestion is to use the same logic for handling sign-up and login processes but instead of storing and reading from local storage, one should make API calls with the provided user input.
Outlines
🌐 Introduction to Angular Login and Sign Up Page
The video begins with an introduction to creating a login and sign-up page using Angular. The presenter explains that they have downloaded a template from Google and will demonstrate how to implement it. The template is sourced from freefrontend.com and consists of HTML and CSS. The presenter's focus is on creating a user interface without integrating it with any API, instead opting to store user data in local storage. The process involves creating arrays to store user data, defining variables for sign-up and login objects, and binding these objects to forms using Angular's two-way data binding with the 'ngModel' directive. The presenter also emphasizes the need to import the FormsModule in the app module to use 'ngModel'.
📝 Storing User Data in Local Storage
In this segment, the presenter discusses the process of storing user data in local storage upon sign-up. They explain how to push the sign-up object into an array and then save that array to local storage using the 'localStorage.setItem' method. The data must be converted to a string format using 'JSON.stringify' before storage. The presenter also addresses an issue with data replication and provides a solution by initializing the sign-up object before pushing it to the array. They then demonstrate how to read data from local storage and populate the sign-up array upon page load. Additionally, the presenter outlines the process for the login functionality, which involves reading from local storage and verifying user credentials against the stored data.
🔐 Implementing Login Functionality and Handling Credentials
The final paragraph focuses on the implementation of the login functionality. The presenter describes how to check user credentials against the data stored in the local storage array. They use a Lambda expression with the 'find' method to search for a user record that matches the provided username and password. If a match is found, an alert is shown indicating a successful login. If no match is found, an error message is displayed. The presenter also discusses potential issues with form binding and how to ensure that the correct data is being passed for validation. They conclude by suggesting that while local storage is used for demonstration, in a real-world application, an API would be used for handling user data.
Mindmap
Keywords
💡Angular
💡HTML
💡CSS
💡Local Storage
💡Form Binding
💡Event Handling
💡JSON
💡TypeScript
💡API
💡ngModel
💡Freefrontend.com
Highlights
Introduction to creating login and sign-up pages using Angular.
Using a template from freefrontend.com as a starting point for the design.
Explanation of copying and pasting CSS and HTML to achieve the desired output.
Storing user data in local storage for demonstration purposes.
Creating an array to store sign-up users and defining the data structure.
Binding form fields to the sign-up object using Angular's NG model.
Ensuring the FormsModule is included in the app module for NG model to work.
Creating event handlers for the sign-up and login buttons.
Storing sign-up data into an array and then into local storage.
Using JSON.stringify to convert data into a string format for local storage.
Addressing the issue of data replication by initializing the sign-up object.
Reading data from local storage and assigning it to the sign-up users array.
Writing a query to check user credentials against stored data for login.
Using JSON.parse to convert string data back into an object for login verification.
Handling login success and failure with alert messages based on user credentials.
Debugging and checking the login process with both correct and incorrect credentials.
Advice on using APIs for sign-up and login in a real-world application.
Conclusion and a call to action for viewers to subscribe and like the video.
Transcripts
welcome back to Learning Partner so in
this video we are going to see login and
sign up page again with angular only so
this is the normal template I have
downloaded from Google only so let's see
how we I have come to this page simply I
have searched login page HTML CSS then
we have a site that freefrontend.com so
if we go to that we have found this
example okay the code is already ready I
just have we just have to copy paste it
okay it's just a CSS and HTML and if you
copy paste it in your component you will
get the same output okay so let's get
started uh so far we are not integrating
it with this any API so simply we are
going to store the data into the local
storage means whenever user is logged in
user is signing up we will store the
user's array like how many users do the
sign up into the local storage and while
login we will just simply check for the
user credential into that local storage
array okay so let's get started first we
need to create an array to store the
signup user so sign up users will be my
variable name
that will be again any of errors
instead of any you can create class or
construct class or interface also based
on the choice just to save the time I'm
using enter uh just make it in as any
let's create a object
which will which we will bind to the
form that is sign up
object
colony
equal to curly bracket so let's see how
many fields we need let's go back to the
browser
okay so in sign up we need username
email and the password so let's create
an object of for these three properties
username
email and password
okay so these three things we need then
in let's create an object for the login
also so login object colon any equal to
curly bracket then we have username and
password so I login we just need the two
Fields so we are creating second object
for that
let's get rid of the email
okay so we have our array ready then
signup object is also ready and login
object is also ready now next thing is
we have to bind this to our form using
NG model so sign up object so here you
can see we have got two form one is the
sign up form and second is the login
form so here we can use the NG model
that is banana bracket
and we have to buy in our model dot
particular field name
username
let me just copy paste the basic things
username and password
it's better to copy paste so that we can
we won't make any spelling mistake okay
so our first task is completed next
let's bind the login form also with the
login object
it has only two Fields username and the
password
okay so I'm not covering the basic
things like uh to use the NG model you
need forms model present in your app
module let's see how is that let's go to
the forms module
app module
in the tab module this should be forms
model should be present okay if this is
not present in your app module then NG
model won't be recognized then you will
have a compilation error okay so first
thing you need to add the forms module
in the app module in the import section
okay let's go back to our component so
our NG model we have binded next thing
is like on sign up and on login button
we need to write the events so let's
write those event
foreign
up and then on login
let's create these events
same as second one login also
okay now on first things we will do is
like on sign up on sign up what we need
to do we need to store the uh
information what what user will be
provided into the local storage as in
the array form okay so for that
first we need to store the data into the
array so for that this dot signup users
array
dot push so we are going to push the
current object into our array this DOT
sign up array
on sign up object okay next thing once
we push the current object to the array
we have to store this array into the
local storage so local storage
dot set item that is the method we use
to store the item it has two parameter
first is the key and second is the value
sign up users
this will be our key then while storing
the data into the local storage we have
to convert the data into the string
format so we have to go for the
json.singify
and we have to pass our array that is
this dot signup users
okay so let's let's just see till this
now let's save all and check it
okay
let's open the console
in console we have one error let's check
it
okay it's nothing else
so let me clear the logo storage first
okay
providing username
we are not going to see the validation
because it now we are more mainly
focusing on the login and the signup
process
okay let's do a click on the sign up
okay so you can see once we clicked on
the sign up you can see in the local
storage we have got the array okay let's
add one more record
foreign
okay let's do the sign up
okay so here you can see in the local
storage area we have got two records but
let me check like why it is getting uh
the old record got repeated okay so for
that while storing the data we need to
detach the array with our local object
so for that
let's create let's
okay so the issue what we face like same
data was getting replicated so for that
we just need to initialize our object
okay so let's just copy this sign up
object and let's initialize this once we
push it this dot sidewalk object let's
remove this any let's save it and try to
check now
foreign
was like we didn't clear it or
initialize this so it was keeping the
reference okay so this is the first user
let's add the second one
okay so you can see in the local storage
we have got separate elements first we
use record is there and second myory
record is there okay now next thing is
for the sign up login so on the login
what we are going to do we are going to
read the data from that local storage
and see if that whatever the user ID
email and the password is present or not
if it is there instead of email we can
make it as make it use of the username
also so we will check like if the
provided username and password is there
or not if it is there then we will allow
the user to log in so we will just
simply show the alert message like user
is successfully logged in and if the
wrong password is there we will show the
error in the alert box
okay so let's on the login button we
have what we are going to do on the page
let's say
while sign up we have stored the data
into the local storage right and so and
same data we are storing in the array
also that is signup user so we have to
check with this sign up array only but
if we refresh the page again we need to
read it back so on the log ng1 unit we
have to read the local storage data and
push it uh assign it to the
sign of users array so constant so first
we have to read the local storage data
and put it in the constant local data
is equal to local storage dot gate item
so while storing the data we had the
method set item while reading the data
we have the gate item okay
then what this is this was our key
okay then we have to add the if null
check if local data is not equal to none
means if this particular key is present
in the local storage then only we are
going to execute the remaining
statements
then these dot signup users
is equal to Json dot parse because while
storing the data into the local storage
we have to converted that to the string
so we have to again convert that into
the array object so we have to pass it
local data
okay okay
so on the login what we need to do we
just need to run a query on signup users
okay
so in login page we have to write
constant is user exist const is user
exist
is equal to this dot signup users dot
find
okay so find is a method where we can
assume like only one record can be found
with the matching conditions so here we
have to write the Lambda expression
we have to compare with m dot that will
be username
equal to equal to
this Dot Login object dot username which
we will bind to the form
use and and the second thing password
also we need to compare m dot password
is equal to login object.password
okay so this is how our whole condition
will look like from this array we are
trying to find a particular user where
username is this and password is also
this if we got the any particular
records we will get the record if not
the in is user exist will be undefined
so let's add a condition for that so if
is user not equal to undefined means we
have got the user then we can show the
alert box
like user found user logged in
successfully
user logged in successfully
in else we can show the error like round
credentials
wrong credentials
means if we don't find any matching user
in this array so we can say like it is a
wrong credential
okay
so let's let's just add a debugger and
check it we will check both the
scenarios when once we pass the correct
username and password and one where we
provide the wrong details okay so let's
check the local storage
so let's try the first one that is
username is piyush as you can see in the
bottom
okay why we are getting the same data
let's check the form I think same name
might be binded
username is this and password is this
okay because NG model is same
username username field is there so we
just need to change it
it was a password that's why once we
change once we are changing the first
same was replicating to the other text
box
let's click on the login
[Music]
username is piyush
and password is one two three five okay
you can see in the bottom
so let's click on the login
okay let's do the F10
one more time okay now if you hover on
the is user exist
you can see the data what the current
particular object we have got
if you see the login object
okay we have got the positioning
password we have got the password we
have entered okay so in this sign up
users
sign up users we have that record where
username is this and password is this
okay so we have said the is user exist
is not undefined means we have got the
particular record so we will show the
alert okay let's try with the wrong
password now
let's try with the wrong password
okay now let's see
okay now if you check is user is
undefined because the password we have
provided is wrong
see this is not the password we have in
the array for that particular record so
we have got undefined okay so it will go
to the S block so this is the way you
have to perform the sign up and the
login instead of local storage you have
to use the API but the basic logic will
be the same now instead of the local
storage code and the Reading part you
just have to hit your API with provided
input okay
so that's it with this current video
next time again we will see the more
exploring topic related to angular thank
you please do subscribe and like my
videos
関連動画をさらに表示
Flutter Tutorial For Beginners #9 - Adding Google Authentication with Firebase
How to automate Login page using Selenium WebDriver with Java? | Selenium WebDriver Tutorial
AppInventor-Tutorial #3-Login Screen- Part#2
NestJs REST API with MongoDB #4 - Authentication, Login/Sign Up, assign JWT and more
next.js in urdu - 9 - Navbar Tutorial (Step-by-Step)
Creating Admin App in Flutter with Firebase Auth and Firestore (Your App Idea 1)
5.0 / 5 (0 votes)