Angular Login and Signup Page | Local-Storage | angular tutorial | angular tutorial for beginners

Summary

In 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

00:00

🌐 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'.

05:01

📝 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.

10:04

🔐 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.

Keywords

💡Angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. In the video, Angular is used to create a login and sign-up page. The script mentions using Angular to handle form binding, events, and data storage, which are core functionalities in web application development.

💡HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. The video script refers to downloading a template from Google, which likely involves HTML for structuring the login and sign-up page's content.

💡CSS

CSS (Cascading Style Sheets) is used for describing the presentation of a document written in HTML. In the context of the video, CSS is mentioned in relation to styling the login and sign-up page, ensuring it has a visually appealing layout.

💡Local Storage

Local Storage is a way to store data on the client's browser. It is used in the video to save user data after sign-up and to verify user credentials during login. The script explains how to store and retrieve data from local storage, which is a common practice for maintaining user state in web applications.

💡Form Binding

Form binding in Angular refers to the process of linking form controls to data models. The script describes how to bind the sign-up and login forms to objects using the 'ngModel' directive, which is essential for capturing user input in web forms.

💡Event Handling

Event handling is a programming concept where certain actions are performed in response to user actions like clicks or key presses. The video script discusses creating event handlers for the sign-up and login buttons, which are crucial for processing form submissions in web applications.

💡JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. The script mentions using JSON.stringify to convert data into a string format for storage and JSON.parse to convert it back into an object, which is necessary when dealing with local storage.

💡TypeScript

TypeScript is a superset of JavaScript that adds optional static typing to the language. It is used in Angular for writing application logic. The video script implies the use of TypeScript when discussing the creation of objects and arrays to handle user data.

💡API

An API (Application Programming Interface) is a set of routines, protocols, and tools for building software applications. The script suggests that while the current implementation uses local storage, a real-world application would likely integrate with an API for user authentication and data management.

💡ngModel

ngModel is a directive in Angular used for two-way data binding between a domain model and the view. The video script explains how to use ngModel to bind form fields to data models, which is a fundamental technique in Angular for creating interactive forms.

💡Freefrontend.com

Freefrontend.com is a resource mentioned in the script as a source for free HTML and CSS templates. The video uses a template from this site to demonstrate how to create a login and sign-up page, highlighting the utility of such resources for web developers.

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

email

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

email

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