Part 8: Submit Login and Register form using json-server | User Registration & Login Form

so in this video 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 minus G Json server for globally installing so copy that command and add it in your terminal in my machine it is already installed after that you can create a new file called db. Json and I'm creating a users 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 backend fake API is available under Local Host 3000 and you will get all the users in this URL so if you copy Cy 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 o. service. CS so in order to use a service we have to import the HTTP client module so go to app. module. TS file and import HTTP Cent module so I'm importing HTTP client module and adding it in the Imports array then go to all. service file prefer that one using HTTP then I'm importing HTTP client here I'm 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 for that we already created an interface file in the .ts file instead of O I'm giving it as a user and I'm 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'm importing by pressing control do in Windows machine so it will accept user details and you have to pass to the backend APA which we have created using the Jon server so for that I'm returning this do HTTP dopost and I have to add a URL so our backend API is running on Local Host 3,000 so I created a base URL and the post I'm adding this variable this. base URL then slash users okay and we have to pass the post data so post 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. component file in the component section go to register and first in 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 do log of this Dot register form do 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 just adding the info here so some test and the test at gmail.com adding the password 1 2 3 4 1 2 3 4 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 C post data and I'm copying this by destructuring then I'm deleting poost data do confirm password so I'm I don't want to pass that data to the back end 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 return in the old service for that we have to inject that service in the component so here in the Constructor I'm going to inject private and I'm referring a variable adding the old service then again control dot in the Windows machine so it will get imported here then you can refer that service so the service will be this. out service. register user and we have to pass the post data so this do Post data so not this dot it's a const supp post 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 do log of error okay so here post 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 do for auto importing it okay so that is imported so now we have added register user and in the service we are passing that data and it it will call the Json fake API and it will insert that data into the Json V 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'm 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 tow service so going to the prime website I'm adding the toast so importing the toast so go to app. module. 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'm going to add the toter in the login and the register page so it is a common one so I'm going to add the uh message service so sorry I'm going to add a message service here if you need a detailed video of the TOs you can go and watch another video which I will link in the description so message service I'm 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 for these three things is added you can see here in the toast module and this P toast we need to mention it somewhere since it is a common for login and the register I'm going to add it in the HTML section okay somewhere under the router Outlet once that is added you can see you can give a toaster if you toggle the code you will be able to see the uh toast then in the typescript you have to import the message service this message service we have imported in the app do as a common app do component module. tsp okay so instead of this providers we have added in the app. 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 on success you can show aity success just copy pasting this one here it is showing message service add 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 another package called router which can be imported from the angular router so that is imported and from here if you want to show or redirect to the login page this. rter do 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 error 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 [e-mail] adding password 1 2 3 4 1 2 3 4 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 mitter I got an ID with the password full name and the email ID which we have created before we will connect to the back for the login form as well so in the code off. service.ts file you have to create a service which will accept email and from the back end we will check that that email ID uh we have to filter the records which is having this email ID okay so I'm adding get user by email and the I'm getting the email here which is string and it return this do HTTP do it's a get here and the base URL this. 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 passing 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 submit 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 early the login details will we will get from the login form by accessing this. login form. so I'm taking email and password from this do login form do value okay okay once that is done we will call this do okay so we have to import the O service before that so private injecting o service here so that we can call the API o service and by pressing control do it is getting Auto imported okay then this dot or service do get user by email then we will pass email as string then subscribe we will get a response and the response is an array right so we will check whether if response do length equal to equal to 1 and and or maybe you can say if the response length greater than zero and and 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. link greater than zero and response I'm 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 back end a proper back end from the back end it will check and return either an error if there is multiple users with the same email ID and password or it will restrict 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 response. Z do password so whatever the data we are getting from the API we will check the password from the data and the we entered one password that is same if it is same you can redirect to the which page homepage so the similar way which I have to added in the register form you have to import the router so adding router so the router is added it is auto imported and we can tell this dot router dot navigate to the homepage slome 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 local storage or session storage session storage will be expired if the uh tab will be closed okay local storage will be expired only once we clear the local storage okay so session storage dot uh set item and I'm telling email of the user is okay we will save that and once the login is Success we will pass to homepage 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'm 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 just um just formatting this one before okay private message service message service from the prim API okay that is added and whatever we have added for the login page so I'm just copying it to avoid the Avo 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 going to the prime nng 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 1 2 3 4 so if I'm giving so first we will type wrong something wrong so at Doom 1 2 3 4 sign in so email or password is wrong it is showing something like that so here I will change test one. email then sign in you can see it is redirecting to the homepage

Channel: Learn from Scratch

Views: 1,560

Keywords: angular, primeng, angular app, angular primeng app, angular app for beginners, login for angular, register for angular, json server, login and registration form using reactive form angular, authguard, httpclientmodule, Angular Primeng app with backend, angular app with login and register using primeng with json server, part 8, learn from scratch, @haseenakhader, angular primeng app step by step, google, top video, best video, user login & register form in angular and primeng

Id: KoJocWH15io

Length: 18min 21sec (1101 seconds)

Published: Tue Oct 03 2023