Angular Login & Register Using Reactive Forms | Angular 12 | NSCODE

subscribe now and press the bell icon never miss an update [Music] [Music] [Music] [Music] [Music] so in this video we are going to learn how to create login and registration form by using angular so here i have a default angular app and let's check how this default angular app can be run so we will write ng as square sub dash dashboard that is that is for open and dash dashboard 1234 so after this i'll press enter so it will take some time for the compilation now once the compilation is done we will see our app in the browser now let's go and check the srp and folder structure so here in app.component.html this is our default html this is what we see when our default component that is app.component.html get rendered first when the compilation is done so as you can see we are seeing generating browser application bundle and space setup so now the compilation has been started and once the compilation is returned we will see our angular app in the browser at 4 1 2 3 4 so we'll wait for some time here as the compilation is in progress so basically here what we are going to do we are going to create a user a login form and user registration form and we will also see that when the user is valid if the user is valid we will redirect him to the dashboard that is home page but if user is invalid we will throw him an error that should saying that the user is invalid in the similar way for registration we will add the name we will use the name and email of the user and we will pass some id to add into our database so now for doing all of this we will also create a fake api using the json server and vm package in app.component.skss there is nothing in app.com.html there are some default html and here we are going to write our routes in the app.drawing.com and we have one more thing that is app.component.ps now let's go to browser and let's check as you can see we have our application open at localhost colon one two three four four so this is the default structure of the angular app this is the default view now we need to create some components for our angular app so we will create first the login component by using command ng g c n g and g g is for generate then c is for component and inside the components folder we will create our login component so this login component inside this component here we will write login and press enter so the login components will be created this login component will contain the html file the scss file and the ts file along with component.speak.ts files so till like the components is like uh completing we will go to the environment.tf here we will define the base url that will be required for our apis as an apis the environment dot product is for production environment and environment.ts is for our local environment so we can like uh assign those values later on in angular.js so we have our login component created now we will create a register component so i'll just replace login with register and then press enter and inside components we have components and the login component has been created inside all components form now even in our app.module.ts you can see login component is imported and in declaration it is already declared now we will need one more component that is a dashboard component so this dashboard component will be basically our home component so when the user login is valid we will redirect him to this dashboard component now let's go ahead and check this component.html before that we will go to routingmodule.ts and we will define some routes so inside route source [Music] array we will write so these are the components that we are going to get it here so on blank path we will call component login component so as you can see it can be auto imported we will again write a path and the path will be register and in register path resist or register route we will call the component which is register component so as you can see here we have register component imported automatically now in the path of home we will call dashboard component so yeah as you can see the component is dashboard component now once the component has been imported we create one more part and let it by default is blank and it redirects to uh let's create one more uh login path and on bank path it will be redirected to slash login and redirect to login which means when there is no path it will always redirect to login pass and the login component will be loaded and here path match could be full that means it should match this path which is on our routes default routes now let's save the changes and go to our uh as you can see we have a register for register like the register component uh let's go to our app.component.html and write router dash outlet in our app.component.html so this is how like we can define the route in angular now let's see in the browser as you can see the default is our slash login part and the login component is loaded first it is saying login works if i go to the register path we can see on register route register works which means the register component is loaded if i go to the home component we will see dashboard works as the home component or the dashboard completely loaded let's move ahead and go to the login path only then inside this we will create our form and before that we will give a default styles which will be available globally inside style.scss so we'll make a wrapper having display flex justify content as render and align items as center now save the changes also we will write height as 100 vh so and one more thing we will also define our button so whatever button we will write in our whole application will be having same uh color and the styling so let's give paddy 15 10 and then background color as something sky blue then margin at the right it will be 5 pixel then color will be white and suppose we have one weight and support 600 yeah now save the changes and we'll do one more thing we'll add the border as none we don't want any border here and also when the button is in disabled state we want that to be the background color to be gray and the color is white already and the opacity as 0.8 so whenever the button is disabled this styling will be added to our button that will be color white now let's go to login component and login.com [Music] we will write uh dot block no first of all like uh we will write dot wrapper and inside our wrapper we will be having log block so this wrapper and block will be common for our both login registration form so i'll create a form tag inside form tag we will have an input type text and this input will get one thing that is name of the user and another input will be the email as input so we'll change the placeholder to something else now let's create some give and class button now let the button be login first then another button be sign up so when i click on this sign up button we should be redirect to the register form as you can see we will be having the default thing yeah we have the colors that we have been applied to the sign up and login button that is the common button in our styles.spss now we will define something to our button that is width it should be 100 pixel common to both and let's write one more thing that is block this block will be common everywhere so it could be 320 pixel as we are also targeting our mobile view and let the background be linear gradient 270 degree blue comma white blue comma white for giving some kind of reset color or we can add blue comma red yeah so this is how it will get the preset color let's hide b suppose 350 pixel now android display flex we will add and one more thing it's uh let's check it right now as you can see we have the preset color with this width 320 pixel now let's go to login.com and inside login.com and support the form and then our input so i'll give some classes to our input so the class is inp we'll again copy paste this and let's switch placeholder to enter email and the class will be inp common google now let's go to our uh what we can say login.com.sdss and here just add these classes that is input and we will add some more details to it so blocks having display uh we can say justify content center because we have already added display flex and align item center on refresh as you can see it is aligned to the center now inside form we will write display flex and just if i can click center so this will just center the key [Music] the input items are arranged in the column way and the align item center will center the inputs now we have buttons leave so dot button dot inside this also google display flex so as you can see the changes in our login box so display flex will write and in the form the width should be eighty percent and in input make the width be hundred percent for now and let's padding the 15 or the 10 pixel first we'll check for the 10 pixel uh yeah i pixel the depending pixel and let one more thing where as let's see first here so let's add margin and margin by continuing let's check one more thing and [Music] so now it will be like one at the extreme right and one one button will be at xd player so let's add one more key that is with 100 percent [Music] now see if changes you can see when is that extreme extreme left [Music] so as you can see login is there we will add up some classes to this login also and there's a h2 tag also so inside our blogging.com.scs let's write h2 having color as white [Music] yeah will 600 so now on save the changes you will see a different login as we have defined now we want this input to be properly aligned so we'll undo the inspect and check how we can align this to our buttons so yeah it's taking more width and the earlier so this is how this much how we want our input to be extended as per the perspective so now let's go to the block and click yeah so this is the block of this having login so what we will do we will change the padding first or yeah it's not working let's try one another thing let's change the width to 80 percent or 85 percent and the person will be more so yeah 85 percent is perfect so let's go and change the weight to eighty-five percent of people [Music] on refresh as you can see the input elements and the buttons are aligned in the same way we can see for mobile view up there so yeah the mobile view as you can see we have proper login form in the mobile view also without taking any device now this is our login page let's go to [Music] some more details and let's go to download [Music] module.ts here in the form we will be using reactive forms for login and register form so we'll call reactive forms module [Music] the module that is for the iq forms in the form module so this module will be imported imported automatically in our project when we write as you can see here the active forms for design functions [Music] now let's check one more thing and go to logging.com.ts and uh yeah here we will create a constructor private fb colon form builder now the form builder will be added automatically or imported automatically from angular slash forms now we will write login form group blogging and login submit as a new function the login submit is the new content inside login submit we will write data of type name [Music] this login submit will require one data of type any and one more thing that we are going to do is so let's check um or we can say let's do one thing uh this dot login no not name directly i'll just add one more thing [Music] so we will add the form group first this is how like we do the validators and call the valuables but we don't require this for now because inside this all we need to write inside form builder so log this dot login equals to this dot fb dot group then the curly braces we will write name and then comma validators dot required which means this field is required comma email and this email will be composition of two parameters that is valid details for compose or required directly first of all we will check for required only and yeah let's go to login.com [Music] input type text for internet so the form control name will be name and let's go to the input type text placeholder is email and let's go to the button ng click so pass the function that we have created that is login submit function and this function will be accepting one parameter that is login dot value so this login dot value is the form group that we have written and we will make our button disabled when this form that is the login form is invalid so disabled equals to e login dot what we can say and where it yeah directly so as you can see the button is disabled which means the form is invalid initially now if i write or try to add something in our browser or let's go to the component.ts and here we will console.log this data first so whatever the input i'll write in that uh boxes we can see inside our console on press of submit button or sorry login button so let's try it one more thing let's first open the console by going to the inspect let's open the console and let's try to add some values here [Music] [Music] so now let's make the email uh validated properly so value details in square brackets validators so this will invalidate whether the email input is correct or valid or not if it is valid then good and it's been valid the button will not like to the disabled button login will not be enabled unless and until this form inputs are valid [Music] so now let's go ahead and check some more things so let's go to see and this will navigate to our register column register [Music] now once our register written writing is done we unsave the changes and compile it and we can see [Music] go to sign up to the sign up button on refresh we can see the browser that i click on the sign up it says register work which means the sign up or the register component is loaded properly so now let's go to style.scss and see here what we will do we will add a cursor pointer so whenever the user makes like go to the login or can submit signup button we should see your hand cursor over there inside our login page now let's add one more button that is disabled and for this disabled button whenever the cursor is there on the disabled button it should say not allowed which means the button cannot be clicked as you can see it is blocked kind of sign that we are able to see and i cannot right click on this login button and the signup button is okay so let's try to add some more data sean and john gmail.com so on click of login we should do something so first of all we are getting this object which having name as tops and we have email as john and current gmail.com now let's go ahead and click on the register component and this register component the html will be same as our login component so yeah let's try to add that first let's go to the login.com.html and simply copy paste this whole login block in our register block we will change just some of the properties of this register for the register component so let's paste it here and let's change it to login to sign up or register register all things and tabs and let's do one more thing as you can see there is the login button we will replace it with sign up button let's check replace this sign up button to login button and change the control register submit instead of login submit and go to login instead of go to sign up so let's go to register.com and here we will define the same things which we have already defined in our login component form so the form group will be register so let's write register equals to all color first of all we will write the constructor first private every form builder yeah so now let's private router because we will be doing router to navigate from uh this register form to login so let's type register [Music] we will write this dot register equals to this dot fb dot group and inside this group we will type name as colon and square required same for email it should be blank comma validators dot require dot compose like we already composed in our login form or not now let's move ahead and write a function that is um register submit [Music] and on this register we will get the data um passed by the form input element well that will need to write one more function that is go to login so this dot router dot navigate and we will add the url inside the square bracket as login so now as you can see inside register submit we should have data of type amy and let's console.log data see the changes let's go to register.com value to check whether the form is valid or not let's click on sign up as we can see some css details is missing in a register form so we'll go to login.com.html [Music] whatever we have written inside register.component.scs now see its changes as you can see we have simply copied this logging component as here the inside register component with spss we should be getting the proper value or the proper design that we need as you can see we got the proper design when i click on login it goes to login when i click on sign up it goes to register convoluted [Music] now let's try to add some dummy values in our register form so let it be like what we can say let it be so here we have two buttons sign up and log so unless this form is validated properly we can't use sign up button so as you can see on the valid email it's getting enabled now click of signup we should have data in our console as email as ns4.com now let's go to register and yeah let's go to this visual studio code and here we will be like doing something so let's try to close this first so here we will write a json server that will be the fake api that we are going to use and this is like useful for our operations to do by using login and signup form so basically i'll try to add it here but what i found that we should create one another folder for that so i'll write inside the key folder let's write server the folder name let's open that in the visual studio folder so here write port dot and the code dot as you can see we have one another like the project kind of thing [Music] yeah inside the server we will write we will open the terminal first and inside this terminal we will write npm in it so this will basically like so initialize a package notification file inside of this folder structure on npm and will ask some basic question simply press enter enter enter yes now as you can see we have a one file that is package.json now whenever the dependencies get added it will be inside this package we will need json server for just to create a pick api so we will write npm i i for install and json server so this will take some little more time to install our browser sorry in our application so once the json server get installed in our application to create the field api we will be able to see the node modules inside it so as you can see the modules folders have been created automatically and once this json server is added to our folder we will see inside our package transaction as dependence is equal to my other dependency is having json server as the value and yeah one more thing once this is done we will take it here only in our factory. whether it is installed correctly or not so it will take some time let's wait for some more time because this installation is almost completed yeah so inside package. you can see that dependencies we have json server latest version so now let's create a file that is db.js so this is kind of our data file so here we will write a json and inside the user array we should be having an array with some values of key value pair of name as supposedly and email as that will be drawn at [Music] email.com okay and let's add one id that is one i'll simply copy paste testing this object multiple times so for now we are just doing it for three times and let's try to change the id first let idv2 id with t and then let's try to change the name also so it will be once and it will be bb.json press enter so this is like this has created a localhost 3000 slash user as our link so when i press enter and this will be a great file so as you can see we have a json uh we have a json format inside our array as the data on hit of this url that is localhost slash user so this is our base url that will be using in our angular application now let's go to uh what we can say our ps4 or angular app inside environment we will test this environment url that is our base url so in environment.ts we will create a variable that is base url as that variable [Music] or sorry as that we can say the url that we have used or that we have created by using fake api server so this will be available all over our project now let's go to app.module.ps and here we will be using [Music] we'll be needing extra client module so for that we will write http client module android angular slash command slash http and here inside the library system import we will import http client module will simply copy paste this http client module and paste it on imports inside the import so as you can see we have added this module so now let's do one thing we will create a service so it is npg s is for service and the name of that service is common because this service will act as a comment to all of the components so here as you can see the common service has been created inside the service we will need one more some more things so let's import first the environment because we will need the ur base url and yeah as you can see it already took its path to the environment base url equals to any so this will be environment dot base url this will give you the base url value in the base url variable so we'll add inside constructor as private http and it should be http client so as you can see the pdb client has already been added in our exports now let's go ahead and we will write one function that is get user and this function will return the value so this return equals to this or what we can say this dot http dot get and what we will get we will get this url which is our this dot base url so now let's go ahead and move to our login dot component dot html watch here ps file so login dot components so with the lifecycle as everybody of us know that after constructor and get called so we will simply first use the dependency of in our uh login.com.ps user dot subscribe and subscribe data any [Music] [Music] so let's go to the login component so first of all we will write login and here as you can see we have three items that is the idea items having name has on name space that we do have in our fake api json server now let's move ahead and here what we will do we will like so on submit of login submit we will check whether the data that user has passed is already there if it is there you will like uh first of all we will like create a variable that is user subtitles with an array so this should be this dot user equals to data so whatever data that is coming by calling get user api so it will all be stored in this dot users so now in the login submit function we will write some basic logic so let's try to check which what we can say [Music] is there this dot users for each here we are using for each loop around or throughout the user array and let's replace elements with item so it is item now and let's do one more thing that is if the is like item of type naming if this item dot name is triple equals to data dot name and item dot email is equal equals to data dot email [Music] now see like if the user and the data is same as the list we have then we will try it console.log user is valid and if it is not we can see [Music] in else block we will say that console.log the user is invalid now save the changes and let's check and try so i'll write so on which we have already added and something accesses [Music] because the user is not present in our dvd [Music] gmail.com and press or click on login so as you can see here we have user is valid which means the user that we have added is valid now let's move ahead and try to replace this with some common code or simple code so when the user is valid we will do local storage dot state item is logged in comma pro so the basic need of this local storage is to set the key token that is present in angular so let's look well storage dot site item is logged in as two and this dot router got navigate it should navigate when the login is successful or the user is valid it should navigate to the home now that is for dashboard route the dashboard should get loaded let's try to change login with a valid user so it should be drawn and john click on login as you can see we have been redirected to our dashboard now inside our applications and local sites you should be able to see is logged in equals to pro that is what we have added here and let uh we can check if there isn't else so local storage not clear this will like clear out the local storage when the user is invalid so when the user is invalid this is logged in from the application will be removed so let's try to write in valid user and press on login icon [Music] local storage has been removed and let's try to add with the valid user and so on and on click we can we should be going to dashboard box which means the login uh which means the home route so let's go to the home route so as you can see we are able to go to the home group without even login so this is not going to be required we should be having uh we should be able to make the user only enter the dashboard when he is a valid user so for that we will use odds card so we will write ngg and ge for generate under card that should be auth guard and press enter and here we will select can activate so this will create a all card dot ps file here and let's go to author dot ps and here this is the basic character syntax of click voting that has been already written so we will just write some basic force to check if the user is logged in or the user is logged in which means if the user is valid we will have these logged in in our local storage if the local storage is not null then or if the user storage is not closed uh like that item is not true then we will redirect the user to the login else we will allow the user to go to the home url that is the dashboard component switch local storage dot get data in doctrine triple equals to 2 or we can add one more colon or braces here and let's add not and inside this condition we will write router so before router we need to create a constructor here inside this class so constructor router and [Music] we will navigate the user when he enters uh wrong values or wrong credentials to login and if he like you if the user enters a proper value or the specific value then we should like make it to the dashboard component so let's try to go to after talking.module.ts and dashboard component we will type and activate and it should be having inside an array as all bulk so now save the changes [Music] now inside the app local storage we can see nothing let's go to the console and try to go to home so here without logging we are not able to go to home as we were able to do it earlier in order to do go to the home that is the dashboard component which should be logged it should be like having the login it will write down and drawn at the gmail.com [Music] and build this login one [Music] let's try to [Music] add some poster in angular have so this is the package station we will enter this in our application [Music] so this will install poster in our application that is the login form so when the login form is valid so the credential of the user is valid we should be able to see the user has valid uh message when the user is invalid we should be able to see the user is invalid so now let's go ahead and let's try to wait until this in-game package get installed so now let's go ahead and inside this i've got routing.ps uh let's go to [Music] what we can say let me go to common service and here we will create one service that is for add user so this api will api function will add the user to our so let's return something that is this dot http dot post and this should be posted to our basic world discord basic world common data that we want to pass go over basic world [Music] so let's try and check first of all let's try with the register component and here we will also write private dot common so yes [Music] yes so inside this register comment we will write some code that is if data or let uh and then [Music] let's email it to data.email [Music] let's create one variable as for id that is id i guess and let it make the value as 4 so id of type any having initial value as 4 let's scroll down again and let's repeat ideas 4 or we can directly add uh this dot id plus plus now what we will do is we will write this dot common serve dot end user inside user we will pass this data to pass for object dot subscribe data of typing and let's console.log [Music] data here we have console.log data so whenever we add a user from the register form it should be added to our data that is json data by which we have created using this abc and abc.gmail.com and we will write press the sign up so as you can see this is completed as name ubc email as abc.com with id close to 4 so if i refresh this get call so as you can see we have at id4 name as email as this and [Music] let's go to login and try to login by using our new credentials abc and abc email.com and click on login as you can see we are still redirecting to the dashboard component [Music] which means our login details are correct let's go to dashboard.com.html and here we will simply write some basic stuffs so wrapper [Music] trapper and this will create a new wrapper inside this wrapper will create a uli it is unordered list and let it be ng for for making information or continuously working uh continuously like i'm working the uh allies based on this data what we got so let's use the list of type it should be an array inside the type would be nothing yes and let's try it out set private common service common service and you will write inside the india that is by default function this dot com one service [Music] data now let's go to dashboard.com.html and uh first of all let's go to that folder from one i will simply [Music] so this will show us the id also of our objects so when i save it to changes and refresh you can see we have one two three four as ids and data as not so on having emails on there gmail.com and so on let's try to do one some more things over here here let's create log logout button and this logout button should be doing clearing the local storage so local storage.tr will clear this data in our local storage when i clicked on logo so let's private router router dot navigate so when i click on it we need to be redirected page so we are creating router for that purpose so inside constructor we have called router and this dot router not navigate and it should be login [Music] now save the changes and go to the login component and here i will create a button and this button will be log out let's slide write the changes and let's go to the browser we will be seeing our button is present here when i click on this logout we will be redirecting the login as you can see and the local storage will also be that clear with press of this login now let's go to dashboard.com will write class to this button i'm sorry i just misspelled or what yeah so let's class and some space [Music] and also instead of writing for this wrapper we will create change this wrapper name class to h4 for now so go to component css of dashboard for dash wrapper inside i mean that we have you will then lie and also we have one more thing that is our logout panel [Music] pixel and let l i be of border one pixel solid green and let one more thing [Music] is on save the changes we should be able to see more thing let's write display flex and text direction as column here so flex direction is called so when i click or add login to our application by using abc and then abc at the gmail.com html let's save html and see the changes here as you can see we have list with the logout button below that we place on the logout and register let's try register xyz and xyz as the id is common for both of them you should be getting errors as you can see we have this internal error so let's [Music] here the console click on the login [Music] this is how like a basic login and signup signup form can be created we will add one more thing to our application so let's go to app.component.ts or you

Channel: NSCODE

Views: 4,102

Rating: 5 out of 5

Keywords: angular, angular reactive forms, reactive forms, angular tutorial, angularjs, angular tutorial for beginners, login form, register form, Angular login, Angular register, nscode, angular login, angular login application, login application using angular, angular login and registration, angular authentication, angular login app, angular 10 login form, angular 10 login simple login page, angular login & registration, authguard, canactivate, angular 11, Angular 12

Id: SpM2EPAR7_8

Length: 70min 44sec (4244 seconds)

Published: Fri Aug 06 2021