User Login and Register Form Full Video (Code Attatched) - Angular 16 | PrimeNG | Json Server

hi all welcome back so in this series I am going to create an angular Diamond G app with authentication okay so mainly I'm covering a login page with the reactive form and its validation register form with the reactive form and its validation and also I am going to cover the can activate cards and also some custom validator as well so I will show a demo on this so first you can see I am using a routing functionality here I have a login URL and there will be email password sign in is disabled by default so there will be validation also by default you can see email is required password is required and also if I add an invalid email it will show email should be invalid so if user is not registered we can click and the URL will be changed to register and it will ask for full name email password and confirm password here you can see here also validation is there so other than the required validation I have added a custom validator for the password and confirm password to be same so if I add one two three four here and if I'm not adding the same password I have added a custom validator and message which is password should match okay so once I type this data test email password one two three four and the register button will be enabled once it is registered I have implemented a toaster using prime NG and you can login gmail.com and I'm adding the password the sign in is registered it is redirecting so the oauth can activate guard is also enabled so user won't be able to navigate to the home page without login so added a sign node so it is redirecting to the login again for an angular application first you have to install node.js in your machine for that you can go to the node.js website and download the latest LPS version so the LTS version here is 18.18.0 so click on it then it will get downloaded then you can go to the download folder and double click on it so then click on next until it has been finished now the node.js installation is finished now you can check the node.js version using the terminal so open per terminal and give the command node minus V so it will show the non James version and along with node.js you will be able to see node package managed as well for that you can give the command in PM minus V so the next step is install angular CLA globally using the npm node package manager okay so for that you have to keep the command npm install minus G4 globally installing angular CLA and you have to give the package name that is angular CLA so it will install the latest version of angular cling blob V in your machine now angular CLA is also installed for checking the version of angular CLA installed you can access this one using the command NG so NG version so NG is for angular CLA and you can check the version of angular CLA using the command NG version so the next step is to create an angular project using angular CLA for that wherever you want to create a project go to that folder so I'm going to create a new project inside the angular folder so from there you can open a terminal then you can type NG new then the project name so my project name is angular slash Prime NG slash app and also I am going to use the routing so because of that I am giving a flag call routine foreign so it will ask for some questions you can answer that then it will install some packages so I'm going to use CSS here so the installation is done the next thing is like you can go to the project we have created now so it will be CD then angular Prime and G yphen app so once we go to this angular Prime NG app you can open if you want to open this code in any Visual Studio code you can give the command code Dot then it will open the visual studio code with our project which we have created now we will run this application in the browser and see whether how it looks okay so for that you can press Ctrl backtick on the Windows machine and you can add the command NG sub for opening this application in the browser under the port 4200 so if you want to automatically open in the browser you can give the command hyphen hyphen open so it is compiled successfully and it is opening on localhost 4200 and you can see some content there right so whatever the content displayed in the browser which is coming from the app dot component.html so you can clear all the content and simply give tip hello world once you press save button the browser will refresh automatically and it will update the content so we don't need to hard reload it okay so project installation is done so the next step is we have to install Prime NG Prime icons and Prime Flex for that you can again open the terminal and click on a new terminal and you can give the command npm install if you want to install multiple packages you can separate it by space Prime NG then Prime icons is for adding the icons and Prime Flex is for adding the CSS class so we don't have to write the CSS manually by default Prime Flex will provide a lot of useful CSS we can use that instead of manually writing it go to the angular.json file and under the style section you have to provide the node modules of the themes and the prime NG minified CSS and the prime Flex see this needs to be done and then what you have to do in order to add the icons you go to the style.css file and you can give the import statement of the Prime icons once all this step is done make sure you you exit the application which is already running so I'm just exiting the application and then Reserve so NG serve hyphen hyphen open now it is open the next is we are going to create the required components so in order to create a login components inside the app folder I am going to use the angular CLI so if you want to create a new component you can use NG G4 generate C4 component and I am going to create a login component inside the components folder so I'm giving components slash login so it will create a folder inside the app and again it will create a login folder inside the components you can see here next I am going to create a register component so NG G4 generate C4 component and I am going to create a components folder it's already created so it will create a new folder called register inside the components so you can see now two components okay the next component is home component the same procedure NG G4 generate C4 component then inside the components folder that's a hole so it will create another home folder with all the component and CSS file so our next step is we have to create Services file right so for that I'm going to generate service files using angular CLA that is NG G4 generate S4 services and you can mention the folder so I'm going to create inside the services folder I am going to create a service file so that is auth dot service.ts so just mention auth then it will create a file named auth.service.ts okay the service folder is created so component service folder and old service.ts file and the spec file is generated similar way we are also since we are using the login form and the register form and the home page we have to use the guards okay so I'm going to create using angular CLA so NG G4 generate G4 cards and I'm going to create a folder cards and inside again I'm creating oauth cards okay so just giving a name or then automatically it will create the files for that so it is asking which guard you have to activate so for normally login we are using the can activate card so I am adding can activate sorry enter here so it will create TS file inside the guards folder okay next is I am going to create interfaces so we are using the typescript so in order to use a login and the component form sometimes we have to declare the structure of the object or you know structure of the variable or object so for that I am going to create an interface so for that NG G4 generate I4 interface and in the faces folder I am creating and inside that oath so so if you create in the freezer slash auth you can hear c o the TS file will get generated with export interface auth okay so our component Guard Services and interfaces is created our next step is while user enters slash login in the browser you have to navigate to the login component when you slash a user render slash register you have to go to register in the similar way the home component as well okay so for that once all the folder structure has been created you can go to routing module.ts file so here you can see a Roots array in that we will mention an object okay so I will tell if the user enter the path login then I have to navigate to the login component which we have now created okay login component so this is one object similar way you have to mention if the path is register then you have to load register component okay then if the path is home then you have to re load the home component and if user and also we are telling if the user types for example if it loads on local localhost 4200 if user is no Typing Log in register or home after the slash to which URL we have to navigate so path if the path is empty then by default we are telling we are redirecting to the home URL and we are matching the path as a full the similar way sorry it should be nice in the similar way you can also mention if the path is you know star star that means something else other than login register or home you should have to load the you know the no data found or no page found component so I'm not creating that it for now I'm just going with this parts and the components so this is done so we are telling everything uh if your user enters this path you have to load this component right then where we load this component is the next question for that you can go to app.component.html maybe you have a header in your application now I'm not creating any header so I'm telling whatever the login component register component home component based on the URL user enters I have to load all this component inside this div okay so for that you can give Rooter Outlet if you are giving router Outlet here if user enters login in the browser the login component will get replaced here okay if the user enter home the home component will get replaced here okay this is how the router outlets and the components getting loaded automatically here now let's start we can check all the components and the routing is working fine or not okay so by default when you create a home component you can see there is a tag just simply saying homeworks the similar way login works and register work okay so I already running my application here and go to the browser and you can see if I type home the home works right so why it is automatically redirected to home initially it was like 4200 and we are also mentioning in the routing file we are mentioning rooting file if the path is empty redirect to home right so if nothing is entered here automatically it navigates the home URL okay then we will tell if user enters a login URL then login works that means login component is getting loaded there so if user enters register then register components loads here in this session I am going to create a login form okay so before that we have to write some Global CSS so in uh you can go to the style.css file and I'm telling for HTML and for body the height will be 100 percentage and also if it has any additional margin I am making it as a zero okay okay so that is done coming to the login page okay coming to the login page I have to create a form first okay so I'm creating a form that first you have to add the card component so go to Prime Energy website so we are using prime NG for everything so it will be more easy we don't have to create everything manually so you can search for the card component and import this one and add in the module we only have one module so you can add it in the app dot module add that in the Imports array then you will get a sample structure okay so here you can see a p card with a header title so I'm just copying that one and adding it in the adding inside the form and let's see whether it is showing so the P card is showing like that and we don't need this much width for the P card so for that I'm just adding a style here you can add a style class also that we will refactor later now I am just adding the width and I'm telling it's a 360px okay and also we have to make this card into um vertically and horizontally Center okay so for that in the app Dot component.html you can go here and you can tell it's a Justified content sender from the prime Flex you will get or you know some build-in CSS you don't have to write our own CSS you will get a built-in CSS so I am writing Alain items Center means it will send up vertically and you have to give the high top in the whole window width this login form is Ally sender now then go to the login form component.html you can add the header as login then I am going to create a div class equal to field adding a label 4 equal to email I'm mentioning it's an email the next thing we have to add an input element for right for the input element you have to import the input component from the primary so go to the prime NG and search for input element so input text component you have to import input text module so go to the app dot module.ts file add the input text module in the import section since input text module is a form element you have to either use NG model or form control name that is either user forms module or the reactive forms module here now I am going to implement the reactive forms module so whenever you are using any form element you have to import corresponding reactive forms module or the forms module from the angular forms okay so I am using reactive forms module adding it here okay then go to the HTML file you will have a sample you know input box which having a form control name so here I am adding an input with the text so my input text B input text and form control name I'm telling it as an email okay and I am giving a class which is from the prime flux W full it should take the full width now also I am giving the name as the email and also I am giving the placeholder as type your email okay so once that is done since we are defining the form control name we have to add this variable in the TS file okay go to TS file so we are going to create a form using the form Builder angular form Builder so I am giving a name as login home I am adding a Constructor here which will inject the form Builder so FB and I am adding form Builder here okay here I am going to create a login using the form Builder so this dot FB which is referred as a form Builder here and FB dot group and you can add the field name so my field name is email which is initially is an empty value so it is an array which has the initial value okay and I have to tell the validation also as a second array if it is only one you don't have to mention an array so here I'm going to add a validation validators dot required and also the validators dot email okay and my second field is password and the value is empty initially and it only have a one validator that is validators dot required if you want to add you can add validators dot pattern so you can mention the password should be like this it should accept only these characters okay so I created the login form and I have to add this login form in the login form component right so for that you can mention a form group and I am giving the name login form here so whichever the form group you have created that needs to be added here okay and the form control name email is also added the next the similar way you have to add a password so I field then password then it should be password then here it's a text instead of text it should be a password right we are not you're not supposed to see the uh characters here again changing to password type your password so the two form is done okay okay the next thing is you have to add a button here so for adding the button you have to add the button component so go to primeng website search for the button component add the module so for that go to the app dot module.ts file add the module from here add it in the Imports array and here you can add the button so for adding the button you can see there will be a sample with a p button so I'm just adding a p button and I'm telling the label as sign in I am giving the style class s w full so for input element we can mention with the class and for the P button we have to mention the style class okay it's based on the component you are using and also style glass is added uh the label is also added so the button is ready the next thing is you have to add if it is not a member you have to show a link to the register form okay so I'm just giving a div and adding a class and telling margin top is two so it's a class from the prime flex and I am adding it is not a member then question mark I'm telling an anger tag and in order to root to the in order to add the root you have to give instead of hrf you have to give the router link here so it will go to the routing we have created a rooting.ts file right so it will go to that URL so I'm giving register so fuser Enders register it should load to the register component so if I'm adding a router link as register here okay so the form design of the login is okay now you can see email password then not a member register so if I click on the register it is going to the register form so register works okay I am going back and now we have to do the validation now email if I type something you know you have to add the validation validation dot required is there the validation is also there but you have to add a validation message here okay so for that going here and we have to add a validation message under this input right so I'm giving a small element and I'm saying NG if so from the login form you have to take the control of the email so either what you can do is you can see login form Dot controls of email dot is select dot invalid okay then you have to show some text something like that you can mention here you can add and again you have to add you know these many things and and then it is dirty or if you use attach the form so login form Dot touched then you have to mention a div and I'm telling again you know if it is NG if so the email have two things one is required error and one if one if it is not an email not a proper email okay so two things are there so you have to add the two conditions so it is getting more length here right so if you want you can remove from here and in the component dot uh TS file what you can do is you can create a function get email and it is just a function sorry and it returns this so it will turn this Dot Login form dot controls of email so to make you know HTML more easier to read more readable the similar way I'm just adding the password as well it's not really required but just for more readable purpose no this one you can replace with email see so here email dot dirty here also here email dot dotting okay and also I am adding some more conditions so I'm adding two div and I'm telling if it is required email is required if it is not the email error then you have to show email should be valid and also I'm adding a class which is block P error okay the similar way you have to add for the paragraph as well I'm just adding so I hope you understood so under the input you can add a small password dirty touch then you have to show password errors required then password is required so and here you can see email should be valid so if I'm adding act then nope the error is going so it is not added email is required so here also if I remove password is required and also I am adding one more condition if the button is if the form is invalid the button should be disabled so you can give for the button you can give a condition disabled equal to our form name as login sorry login form dot invalid so that's it now our form is done video I am going to create a register form so when user clicks on the register or you user Types on the register in the URL the register form should load okay so we already created a component file for that so going to the TS file the similar way we have created the login component with the login form with the Constructor and the you know the references to the email and password the similar way we are going to create for the register form as well so for that we have to add a Constructor and I'm importing the phone Builder so form Builder has imported then we are going to create the variable so register form register form equal to this dot FB Dot group of elements so my first element is full name and I'm adding the initial value as empty and also I'm adding the validation of requires by importing validators don't required and also I am adding a pattern here so I am telling that the full name should have a character and a space between so validator stored pattern of I can add a regular expression here so if you Google the regular expression of the full name you will be you will be able to get that so I'm just pasting that regular expression here the similar way before in the before tutorial we have added the email and password I'm just adding that one then one more field I am adding is confirm password and I'm adding it as validators dot required okay so our form is ready so the next thing is we have to add the controls for these fields so that validation will be more easier and it will be look more clean away okay so for that I'm just adding those like full name I'm just returning this Dot registration form controls full name then email password and confirm password the similar way we have done in the login component okay so once the component part is done go to the HTML and if you want you can copy from this login.html so it will be more easy you don't have to type from the scratch so I'm adding a phone form group instead of the login form it will be the register form so the name should be same whatever the form we have given here the name should be the same okay and the header should be register and first field is the full name so I'm just copying this div also creating a new div under the field first one is full name and you should be make sure the name should be the correct one in the form control name okay so that is added I'm adding for the name and please type your name okay so this is also I'm changing to full name and once if any error occurs so the full name have a validators DOT required and validators Dot pattern okay so if the full name is invalid or the full name is dirty and the full name is touched then we have to show the error so first error is required error full name arrows.required then we have to show name as required and if the full name dot errors dot pattern so we have added here a pattern validation so you can add here pattern then you can tell in the a valid name okay so the full name is done so as we done similar before in the login form the email we don't have to change anything okay so email is fine and the password is fine and we have to add another one is confirm password I'm copying this one again and you can see here confirm password is similar way of the password so only validation is required so you can give confirm password confirm password Here confirm space password then here sorry here the type is password and the form control name is confirm password name is confirmed password and the placeholder is also I can mention as confirm password here you can mention it's the invalid dot T touched and if it has a required you can tell confirm the password confirm the password and in the button you can change the label to register okay and instead of the login form you can mention register form dot invalid and here I'm just changing a text like already a member then the router link should be to the login page and the text should be the login so that's all so we have done uh the HTML part and the TS file part go to the page you can see it's simple so register with the full name email password and confirm password by default the button is disabled and if it is an already a member it should go to the login page if it is a login you can go to the register page as well and you can check the validation if I'm not typing any validation it is showing name is required and if I am adding some special characters it is showing the pattern validation what that does enter a valid name similar way this similar way we have implemented the email and password it will check email should be valid or it will check email is required in the password and the confirm password so our register form is complete now in this session we are going to create a custom validated angular for password and confirm password so if it has any mismatch we should throw a error or it should not throw an error okay this is we are going to implement in this video so get into the code in the previous video we already created a register form and now we are going to create a custom validator with the password and confirm password since it depends on multiple fields we have to tell a validators and you have to create a validator so I'm just giving a name for the validator as the password match validator now we are going to create a function called password match validator so I'm not going to create that function directly in the component instead I am going to create a folder which is shared and giving a name password match dot directive.ts file in that I am going to create a function and giving the same name which we have added in the component.ts file and we are mentioning it is a validator function and it accepts the control of the form and the from the control you have to declare them interface okay so it has an abstract control in the face abstract control from the angular forms and this function either returns an error or it returns null if there is nowhere so it returns validation errors or it returns null okay and foreign first so you can access the password using the control dot get off password so this field should exactly match with the name of this one okay so we are taking from that values from that form then confirm password equal to control Dot get off the same name I'm just copying from here Okay then if user doesn't Types on the password or doesn't touch at all then we should we should not show this validation so confirm password then it should return null okay then return if the password dot value equal to equal to confirm pass confirm password dot value if both are equal we should not throw any error so we can return another else you can get you can throw an error and the error name is like a required email pattern right so we can for the mean length mass max length so that's the key okay so you can create a key here I'm telling a password password mismatch so you can give any name okay and I'm giving true so whenever this error Comes This variable this key should be true okay so the error is done we have to import by pressing Ctrl dot it will ask for the quick fix so Auto Import we can do Auto Import so once we added the password match validator going to the HTML we have to show the error message when the confirm password and the password doesn't matches since this error is not belongs to any of the particular field I am going to show I'm not going to create under this element instead separately I am going to create another small tag with a class and I am telling if the register form dot errors having this password mismatch error and the confirm password and the password is valid otherwise if I type Mt also this error will you know if I didn't type anything at all the error will be shown so we have to avoid that so I'm just telling confirm password and password is valid but whatever they have type there is a mismatch then we have to show a password should match so going to the application here you can see I'm just typing one two three four here and here one two three then it's showing password should not so if I removing a 4 from here you can see the error is not longer there so this is how we implement the password mismatch and if I type so the register button is enabled but if I type a new password the register button again got disabled I will install the Json server for mocking the API and will complete the register and login form so let's get started for installing the Json server you can go to the Json server website and you will have get the command for installing it so you can see npm install minusd Json server for globally installing so copy that command and add it to New terminal in my machine it is already installed after that you can create a new file called db.json and I am creating a user since it is a login and register form and making it as an empty array so after that you can give the command Json server watch db.json so open a new terminal and give the command watch db.json so the back end fake API is available under localhost 3000 and you will get all the users in this URL so if you copy this one and paste it in the browser you will be able to see the data now there is no data so first we will complete the register form and it will insert the data into those users from the code so first we will start with the service file we already created a service file under the services folder which is auth.service.cs so in order to use a service we have to import the HTTP client module so go to app dot module.ts file and import HTTP client module so I'm importing HTTP client module and adding it in the Imports array then go to auto service file prefer that one using http then I'm importing HTTP client here I am adding a function called register user and it will accept user details and we have to explain the structure of the user details using the interface so for that we already created an interface file in the auto TS file instead of oath I am giving it as a user and I am telling the structure it has an ID and the ID is a string and full name is also a string then email is a string and also password a string so once we declare the interface you can use that variable here I am importing by pressing Ctrl dot in Windows machine so it will accept user details and you have to pass to the backend APA which we have created using the Json server so for that I'm returning this dot HTTP dot post and I have to add a URL so our backend API is running on localhost 3000 so I created a base URL in the post I am adding this variable this dot base URL then slash users okay and we have to pass the post data suppose data is user details so the register user service is done then we have to use this register user in the register component so going to the register dot component file in the component section go to register and first in the HTML you have to do two things one you have to make the button as a submit so type equal to submit and you have to declare a NG submit here you have to add NG submit and a function I'm telling the submit submit details I have to add this function in the TS file go to the TS file and create a function so submit details and we will get the form data by accessing the register form so if you want to see that console DOT log of this dot register form dot value it will get all the data which we have filled in the form so in order to see that I'm just adding an inspect element and in the console you can see it okay starting the info here so some test and the test at gmail.com adding the password one two three four one two three four and if I click on the register you will get all the values for passing to the back end we don't need any confirm password so we can remove that first so what I'm going to do is I'm declaring a variable cost data and I'm copying this by destructuring then I am deleting post data dot confirm password so I don't want to pass that data to the backend confirm password data is not need to pass to the back end right so I'm deleting it then I have to call the function which we have returned in the auth service for that we have to inject that service in the component so here in the Constructor I am going to inject private and I'm referring a variable adding the old service then again control dot the Windows machine so it will get important here then you can refer that service so the service will be this dot or service dot register user and we have to pass the post data so this dot post data so not this dot it's a const so pause data and you have to subscribe then you will get a response you can console whether it is success or not or maybe I'm just adding a subscribe and also error if it is an error we have to handle error scenario also so I'm just adding console dot logo response and also we have to add if it is an error scenario console DOT log of error okay so here host data it is showing error because post data should have an interface user so I'm just adding the post data as user and again control dot for auto importing it okay so that is imported so now we have added register user and in the service we are passing the data and it it will call the Json Peak API and it will insert the data into the Json VR created recently Okay so in the component.ts file we are doing this just consoling right so other than consoling I'm going to if it is a success I am going to show a toaster and I am redirecting our page to the login as well so for that I have to import the prime NG toe service so going to the prime NG website foreign so importing the toast so go to appdote module.ts file and import the toast this toast also have some animation so we have to add the browser animation module also so browser animation module and in order to use the toast if it is only going to use in a one component you can directly go and add it in the provider okay in the providers of the register component now I am going to add the toaster in the login and the register page so it is a common one so I'm going to add the message service so today I'm going to add a message service here if you need a detailed video of the toast you can go and watch another video which I will link in the description so message service I am adding that service will should be added in the providers and the module should be added in the Imports array so for the toaster we need these three things okay so these three things is added you can see here in the toast module and the Speedos we need to mention it somewhere since it is a common for a login and the register I am going to add it in the HTML section okay somewhere under the router Outlet once that is added you can see you can keep a toaster if you toggle the code you will be able to see the toast then in the typescript you have to import the message surface this message service we have imported in the app dot as a common app dot component module.ts file okay so instead of this providers we have added in the app dot module.ts providers and next one is like we have to inject this message service in our own component okay so for that go to this file and here I'm going to add going to inject the message service so control dot it will ask for the import option so it is getting Auto imported and owns access you can show possibility success just copy pasting this one here it is showing message service ad success success and the message content is register successful successfully and also I'm going to redirect to the login page in order to redirect to the login page you have to use a router service so I'm just trying to format this so comma private router there is another package called router which can be bought from the angular router so that is imported and from here if you want to show or redirect to the login page this dot rotor dot navigate then you can mention the URL so I have to navigate to the login page if it is an error you can show the same message service with the cbrt as error so I'm telling Kevin something went wrong so our register form is completed now we can check how it works so going to the angular application and I am typing test user test one at gmail.com I'm adding password one two three four one two three four and if I click on the register it will show register successfully and it is redirected to the login page so it is Success so in the console also you can see once I submitter I got an ID with the password full name and the email ID which we have created before we will connect to the backend for the login form as well so in the code authored service.50s file you have to create a service which will accept email and from the back end we will check that that email ID we have to filter the records which is having this email ID okay so I'm adding get user by email and I'm getting the email here which is string and it return this dot HTTP dot it's a get here and the base URL this dot base URL slash users in order to get a user by email ID you can give like this in the Json server okay so I am passive question mark email then equal to Dollar email so I will get the record which is having the email which we are passing from the login page okay in order to show what it is returning we can mention observable which is from the rxjs and we can tell our user details is returning back okay so here also you can mention the user this is the interface which we have created before okay so once this is done go to the login form so as we done same in the register form go to the HTML form first and make the button as the submit so type equal to submit then you can give NG subnet login user I'm giving a function name as a login user copying this one and going to the TS file creating a function as I mentioned earlier the login details will we will get from the login form by accessing this Dot Login form dot value so I'm taking email and password from this Dot Login form dot value okay foreign okay so we have to import the old service before that so private injecting or service here so that we can call the API both service and by pressing Ctrl dot it is getting Auto imported okay then this Dot or service dot get user by email then we will pass email as spring then subscribe you will get a response and the response is an R8 right so we will check whether if response dot length equal to equal to 1 and and or maybe you can say if the response dot length greater than 0 and end what is happening here is okay we are giving the response as a user so in the service it is not user it should be the user array I forgot about that because since we are using the Json server we are getting an array of data here instead of an object okay so saving and if the response totaling greater than 0 and response I am assuming it has only one object one email so now it is a dummy Json so there is a chance user can enter the same email and password multiple times okay but actually uh if you have a backend a proper backend from the back end it will check and return either an error if there has multiple users with the same email ID and password or it will rest it during the registration itself okay so here we are using the Json server which is a fake one which we cannot restrict lots of things so we are going ahead assuming that we only have a one okay so and I'm assuming the response dot 0 dot password so whatever the data we are getting from the API we will check the password from the data and the b in that one password that is same if it is same you can redirect to the which page home page so the similar way which I have to add it in the register form you have to import the router so adding rotor so the rotor is added it is auto imported and you can tell this Dot DOTA dot navigate to the home page slash home and also if you want you can add everything in a session so once user login with the user login details we can add a you know is logged in as a true something like that or we can add the email ID in the local storage so for that you can add or sorry I'm not using local storage for now I'm using session storage so you can either use a Docker storage or session storage session storage will be expired if the tab will be closed okay local storage will be expired only once we clear the local storage okay so session storage Dot set item and I'm telling email of the user is in okay we will save that and once the login is accessed we will pass to home page if you want to show a toaster here you can use it okay you can show the toaster login successfully something like that here I am not showing a toaster instead I will show an error so if if the password is wrong okay so there is no such users having the same password I can show a toaster right so for that I have to import the message service so I have to inject the message service here so private message so I'll just um just formatting this one before private message service message service from the prime NG API okay that is added and whatever we have added for the login page so I'm just copying it to avoid the about the typing coming to the TS file else message service so it is MSG service and error so you can mention email or password is wrong or if it is an error if the AP is returning an error you can add this add error something went wrong okay so let's see how it works so go into the time in G and now if you want to see the existing user ID so in the db.json you can see the test email ID and the password is one two three four so if I am giving so first we will type wrong something wrong so add dot com one two three four sign in so email or password is wrong it is showing something like that so here I will change test one dot email then sign in you can see it is redirecting to the home page I am going to implement a logout button and the functionality inside the home component so I'm not adding any Styles right now I'm simply adding a logout button so having sign off and on click I'm calling a function a log out and in the TS file I am going to implement a function which is log out on login time you can see I am adding a session storage so I'm going to clear the session storage here so since I'm only having one variable in the session storage I am clearing everything okay and I am going to redirect after the logout we have to redirect from the home page to the login page for redirection purpose we have to import we have to inject the router first so private router then I have to import the router from angular router Okay so then you can access this dot rotor this dot rotor dot navigate and in an array you can mention to which URL you have to redirect so after login so after logo it is redirecting to the login so you can see in the inspect element if I type if you want to see the session storage go to the application and you can see here section storage so I am typing the mail test1 gmail.com which I have registered previously and I am adding the password on sign in that session storage have an email and on sign out the session will be cleared and no data it is redirecting to the login page the next thing is we have to implement a can activate guard why we need a guard okay so now you can see I have logout from this application I am not supposed to access the home page without login if you try the URL directly you can see the home page is able to access for me so we have to avoid this so in order to do that for the roots we can Implement a guards okay so for that we already created a guard here so initial video I created a card using angular CLA and it has this function so if the session storage has the image we will return true else we will navigate to the login page if you are trying to access home page without login okay so for that we have to first check section storage get email is there then we will return true yes in order to navigate to login page we have a router so we have to inject router first so router equal to first you have to import the inject from angular core and we have to import the router from angular router then as I mentioned before in the home.component.ts for logout you have to add DOTA dot navigate then the URL needs to be added so login if your user is trying to access any page other than the login or register we have to redirect to the login page if there is no session available since the auth card only accept a Boolean or the URL tree you have to return navigate save and you have to add this oauth card in all the components other than login and register so going to app dot rooting module.ts file we only have one component right home component so now we are adding here can activate then oath card this oath card can activate function need to be imported so if you press the control dot it will ask for the Auto Import okay so now our card is done let's see how it works so I have reserved the application again behind the scene I'm trying to access the home page now it is logged out trying to access the home page it is getting redirecting to the login page you can see it is redirecting to the login page and after test one I'm adding the password after logging in now you will be able to see the home page after sign out if you try to access the login again it is redirecting to the login page

Channel: Learn from Scratch

Views: 25,741

Keywords: Node JS Installation, Angular CLI Installation, Angular project creation using ng new with Routing, Set up routing for different pages, angular primeng example, Create Reactive form with Validation, Create a custom validator for password and confirm password check, CanActivateFn implementations and applying Guards, angular primeng tutorial, angular example for beginners, user login, user register, canactivate guard, angular login, json server, angular project with basics

Id: P1r2QjuJWcI

Length: 57min 40sec (3460 seconds)

Published: Wed Oct 04 2023