Angular Login and Signup using JSON-Server | Angular Routing | Angular Reactive Form|

hello everyone welcome to my channel so in this video we are going to create a login and sign up page using json server as you guys have known that i have created this angular crud video by using json server all right so this actually does like we can add employee we can go here and edit the employee we can delete the employee and we can also do the get employee so that we can map that record inside a table all right so in this video what we will do we will try to create a login and sign up page and we will try to implement login and sign up using json server all right okay so for that if if you guys don't know how you can create this thing then i think i already have a video for this angular video on youtube just search for angular video you will see my video where i have taught how we can create this project all right because i will be continuing this login page and sign up page inside this project only so if you don't know how to create this project then please i will recommend you guys to go ahead and watch this video first and then you can continue with this video all right so without any further ado let's get started all right guys so as you know that we have our code ready like for the employee dashboard which you can see here on the browser okay so we have here one employee component apply dashboard okay and a shared folder which have our api calls okay the api for a post employee get employee delete employee and edit employee all right so as you can see our four api is here all right so what we have to do now we have to create a login component and a sign up component okay how do we create a login component the command is very simple you just have to go in your terminal you can open up terminal from here click on your new terminal okay we will open it up uh terminal for you guys and you just have to get a command ng g for generate c for component and the component name so my first company would be the login component okay let's wait for some time it will get created yeah so log in comment has been created here and if you can see and the second component which i have to create is the signup component the command is same the ng g c for component and this is a component name component name would be sine of component now both the component has been created now what we will try to do we will try to make use of routing because if you see right so whatever we just had a single compute the employee dashboard so we were using this selector okay so this selector we were using inside our component all right but now we'll try to configure routing in our application okay what is routing so routing is basically helps us to navigate from one component to another component all right so in this way uh like by using routing we can create a router outlet here where all your routing will be get loaded okay so we will have a router outlet okay inside our app component.html okay now i have to configure our routing so where i can configure it inside our app routing.module just go here and inside this routes you just have to add path and which component to load okay so i'll have a path as a login path okay and what component i want to load for this part i want to load login component okay in the same way i'll do for sign up as well this pairing is incorrect so that's why it is showing that okay so now next part will be for signup okay so let's sign up and which component i want to load i want to load the signup component okay all right and i have one more component which is my employee dashboard so i'll have a path for that as well if my login is success then it should route to that dashboard page so i'll have a dashboard path and which component to load i have to load the employee dashboard component okay i will also have to configure if my path is blank okay for example if you see here right when i go on my localhost if the path is blank if nothing is there then which component to load so let me just configure that as well i'll just say that path if my path is blank then it should redirect okay should redirect to my login login path and it should match so i'll have a path match full okay so now what it will do is if our path is blank then it will go ahead and load this login component let me just save it and let's go on the browser and check you can see login works if i just change the path to sign up okay hit enter now you can see sign up works and if i just try to navigate to dashboard you can see dashboard is working all right so in this way we have created a component and also configured the routing of all the component all right now what we will do we will try to create a beautiful login page okay login and sign up page so let me just go inside my vs code and let me just go here in my login component.html file all right so we will try to create from scratch how we can like how to have a good looking like a login page basically so let me just remove this unnecessary thing let me have a div okay i'll have a container so i am using bootstrap here okay if you don't know how to configure bootstrap then i have you can go ahead and watch my first video where i have explained how we can configure bootstrap in our application so first i'll use container of bootstrap so i'll say container they've got container then it will helps to create a glass as well okay so i'll have a container inside that i'll have a row okay and i'll have a the glass has cool md6 okay and inside that i will have a card okay so i'll have to and inside this card i will have two things the first one will be my the login and my signup page okay so for that i'll just go ahead and just say a div and this will be my tech center because i want that login to be inside the center like let me just show you what actually i mean by this text center okay when i say text center and so whatever will be there inside this dip that will be in look in the center of my card okay so i'll have two things in the center the first one is the heading that login and the second one would be i'll just say something like okay let's lock please enter a credential to continue okay so like that address like this please enter username and password or i can say email and password to continue okay i'll have something like this okay so now what i need to have i need to have a form all right which will hold up which will take the username and password so i'll just go here down and i have a form okay let me remove this is not required and inside this form i will have my two forms and the form i'll use from bootstrap okay so let me just go on the bootstrap website and let me have that template bootstrap okay and yeah from here you just go here and click on get started and you can just search for forms so we can make use of bootstrap form there are so many so i prefer this one okay i'll just copy this code snippet and let's go here and just paste inside our this okay now what i don't need okay i don't have this check box anymore like this checks to remember me so i'll remove this unnecessary port which is not required okay now i think things are good here now let me just shorten this yeah much better so if you see now i'll have our email and password ready and with the submit so i'll have this name as login let me save things and let's go on the browser and check how it looks okay so this looks kind of good i think we need some styling okay so let me just go inside our css and try to style these things okay you go here inside okay there i'll i'll just manipulate the third class i'm using the current class okay so i have already created this class here okay if you see on the top so i'll try to change the css of that card okay all right so if you see i have created a css for this card where i have i can remove this for now the margin top so yeah i'll have this borderline and width and i'm just given width and padding some padding to it and this line of code helps us to helps me to center my dim okay so this is for that and i used a gradient color okay so you guys just can copy this and let me just go on the browser and check how it looks okay so things are looking very good i think this has to be in i think this should be in white glue then it looks more good so let me just try to change the styling for that okay now things looks good i don't know why it is not looking for h1 let me remove it let me save it okay now things looks good so this is how we have designed our login page okay in the same way we will try to do our signup page as well all right so as our login card is ready so let's just jump to the signup page now okay so let me just cancel this stuff and let me just go inside my signup component okay for the sign up also we will try to replicate almost the same thing just like what we did in our html all right because we will have the same kind of stuff there as well okay so let me just copy that stuff from that from the code you have this thing copy the paste here in the sign up component as well okay so here it will be like sign up and for this let me say that register yourself okay save it and what for things we need so we'll need a full name mobile number email and password all right so let me just copy this date and let me paste it on the top here two times okay so we will have a full link then we'll have mobile number we will have our email address and then we have password of the user okay so we will try to capture these four these four things and okay always start change this type okay because this type is password then it will look in star for you so change it to text and change this thing also to text okay or maybe we can change it to number all right and this is email type and this is password okay so and for this button we'll have sign up okay let me save things and let me the call copy the css as well because the css are almost the same let me copy everything and go inside the css and paste it let's save it and let's check on the browser how it looks okay let me have your sign in let me route to sign up now you can see okay so now we have this cool looking card as well sign up sign up card if you see here then i think we we have one problem not a problem but you can see right if i want to go to login page then i am using this i'm going here i'm clicking login and then we are routing okay so to remove that problem what we'll have to do we'll have some button over here or some uh anchor tag here which will help shoot out from login page to sign up and sign up is to login all right let me just try to have that here below this form okay i'll have a anchor tag and i'll remove the satchel this is not needed okay and this will say that okay uh whenever you are clicked then go to this signup page then i'll say okay if the user is new so ask for new user and i will say click to sign in okay all right and okay so how it will go to the signup page so for that we have this router link so this is the feature of angular which provides helps to routing from one component to another component okay so whenever i click here it should go to my signup page okay and i have the same thing on the login on the signup page as well that whenever i want to go from signup page to login page then i'll click here so i'll just say already logged in already have a account then he will say click here to login okay so in the same way we'll have some some text over here which will ask about if you have account then please go and log in and i'll just say already registered click to login okay and for here i will have router link as login okay let me save it and let's go on the browser and check if it works all right if you see we have the new user uh it is asking if you're a new user then click to sign up and below you're noticing already registered then click here to login i think let's try to create this uh change the color to white because it is barely visible so let me just change the styling a bit i just say style and color as white and some margin top as well 10 pixel maybe let me copy the same styling and based on the log income login html as well okay let me save it save all and let's check how it looks this looks nice whenever if it says if you're a new user then click to sign up and already have an account then click here to register yourself okay okay let me just go here i think there was some problem with the styling okay let me have a margin let me just inspect the css and extract how we can just manipulate these things okay i'll give this as smoking bottom as to save check now there is a gap all right guys so the login and signup page is ready so now what we have to do we have to configure the json server okay so for that we'll have to create a new like let me just go on the local host 3000 all right and just let me just show you what things i have okay if you go here that we have this post right which is already running like i have this three employee list which shows there in the post so i'll have to create one more which will say that sign up user list okay so it will hold all the signup value so for that i'll have to go here okay if you don't know how to uh check for this like how to run this local 400 then for that we have a command like how to run our json server let me just show you if you guys don't know then just run json server all right okay so it is throwing somewhere with this cns again so let me just have json server to watch db dot json and this is coming from here if so this is the reason i'm telling you that please go ahead and watch my first video on angular tutorial then you will know the clear idea about what is the staple.json is and we are trying to run this dp.json hit enter and now this is already done it says that json server is already running like it is there already on my browser if you see here it is already running that's why it is not running again all right so now if once it is running just go here in the david.json and try to create your own array so i'll have signup users okay let me save it and let me just go on the browser and refresh this page okay now you can see it has been the comments has been changed to sign up users okay and we will try to store all our signup user here okay we'll post the users inside this array which is empty right now okay so now let's go here and we have to create a form control for all these things full name mobile email and password so let's go inside our ds file of signup component and for for using uh what we say reactive pro because we will try to use react reactive programming like react mode all right guys so for the signup form we will be using reactive okay so we have reactive module reactive form module okay which we have already imported inside of our app you can see that we have this reactive form module so we'll make use of the reactive forms all right so for that we have to import three things okay so first thing is import our so let's first have this import from we'll have to input i have to import it from angular slash form you can see we have down here and we have to input two things first so what are those we have to input form group and form builder okay and there must be a property which will hold this for form group so i'll create a property a public property as sign up signup form this will be of type form group okay and now i will have to inject this form builder inside of a constructor so i'll have private form builder make use of that formula here okay now inside our ng only lifecycle hook so what i will do i will initialize the form i'll just say this dot signup form is equals to and our form builder will helps to group okay so let's say form builder dot group okay and inside that group i will have all the form control which i need to have so i will need to have full name okay so this has to be an array yes then i need to have email okay the third thing i will have here is okay so this is okay and the fourth thing was mobile number so let's just say mobile okay so we have this control study the form control is ready so now what i need to do is so if at all we are using the active form so in the html over here i need to have this form group okay so i'll just say form group is equals to what is the name of my form so this this should match all right i have already explained these things so this should match your this value so i'll just copy that and paste here okay so form group is this our signup form all right and whatever form control we have created we have to like write it here as well in the html so that it will helps to bind that so we'll have form control control name okay the form control name was what we have written we have we had a name as full name okay let me just copy this and paste here for mobile so the form control name we have created as mobile okay this again and here in the input this will have name as email and the last one is our password form control name and password again things to remember here that whatever the name which i have written here for the form control name this name should match these things which we have created okay in the ds file all right and now for the button click we will call the ng submit okay so we have ng submit like whenever our form is getting submitted which method to trigger so i'll say sign up okay so like if i save it then it will throw an error saying that sign up is not created on your ds file so we'll just i'll just copy this and try to create this method inside our ps file okay so whenever i hit on sign up so it should send a post call okay inside my server inside my json server so for sending http calls we have to inject this http client okay so i'll inject the http client okay and please note that if you are using http client then inside your module you should import this http client module then only it will work all right so let me again go to my component so i have injected this http and now i'll have to make a post call to store the value i'll say this dot http dot post okay so where i want to post i want to post so i will first have the data type as any right now and where i have to post this is my source okay so i'll just go on the browser and check for your local okay so this was my local host okay slash what was the obvious what was the name which we have created we have to post where you have to post here okay so i copy the name here as it is and paste it here okay what value i want to post so because it is expecting some value when we post some value it expects a value we if we are doing http post call so we have to store the values which is coming from the form so i'll say this dot form dot value okay and this value will be our object okay this will this holds a value i'll just console log and i will show you what exactly it is that okay so for doing a http call i need to subscribe then only it will call so subscribe if the subscribe is success successful then subscribe say okay reset my form okay so for that i'll just have to say this dot my form name is sign up form and sign up form dot reset okay so my form will get reset and if my signup is if my signus is successful then what i'll do i'll say that okay sign up successful now just go on the login page and do your login so for that for sending it to the login page i will have to import one more thing called as router okay and this router will helps us to navigate from one page to another page okay on condition i'll just import this router see i have i'm pressing the tab button and if you see on the top it is getting auto imported so everything if you see here whatever thing which are in green i have imported on the top all right and i have used now i have this router right now i will make use of this to route so i'll say this dot router dot navigate if my sign up is successful then please navigate the user to login page so that he can log in okay and if at all there is some error then it should pin the error okay it just say alert and it will have string something went wrong okay let me save things and let's go on the browser and check the compile successful i'm just thinking that if nothing has missed okay everything is intact all right so let me just go on the browser and just check if at all it is working or not so i am on the sign up page right now let me i have a full name shashi this is my full name okay email address password if i click on sign up you can sign up successful if i press ok now it has routed me back to the login page now so that i can log in if i just show you here if i refresh if i just go here and refresh this you can say one user has been added here in the list in the sign up user list all right now let me just go here and let me just try to create for the login so for creating for login it is quite tricky so first we will go step by step first i'll need to have the form controls and everything so what i'll do i'll import same i'll have the imports and from where i want to input i'm going to import it from angular slash forms this one okay what what i want to input two things form group and form builder all right and now again i should have a property or login form it will be public login home and yeah this will type on group okay and i have to inject from builder so i'll inject that inside my constructor by saying okay so i'll have form builder all my controllers and controls and everything so i have two things i have email and second thing i have password okay now i'll have one more thing okay so on the login page so once the user clicks on this button or clicks here on the login button here it is so it will login that it will go ahead and check if the user exists or not and it will do the login accordingly okay but before that i'd need to have this form group on the top so that it takes all the inputs value whichever i am sending from ui okay so for that i will have a form group and this value should match this one which we have created the login form we copy the name exact and paste here okay for all the inputs i must have a form control name so i'll create a form control name and the first one is our email and the second which we have created was password okay and let me change the name to password let me save things and now to submit my form i need to have the ng submit and whenever the submit is button is called so at that time i need to trigger a method called as login so let me save things save all and it says that login is not created so we'll go ahead and create another ps5 right so for login also i'll have to do the http call so i'll just inject two things i'll inject http http client to do the http calls and second thing the router like if our login is success then it should route me to my dashboard page okay and for doing the login it is quite tricky as i've already told you because we need to do some conditional things here so i'll say this dot http dot get okay i'll just have that link you can go here let me copy this so i'll just get all the users which are present in this location okay and i'll subscribe to it if my response is success okay then this response will hold the value which is present online on this particular location so it will have a list of users okay and to check that if the user exists or not we will using uh the array method which is called as find okay so i'll just say response dot find all right and it will help me to and this basically helps to return so this returns something response so what we'll say i'll have a comment here on the on the front we'll say const user is equals to i'll say s dot find okay and let me have the element as a and yeah and what i will do it will return what it will return if my email and password matches if my email is matching this form login form value which is okay let me just go here login form value dot email and also it should match my password so for that i'll just copy this and paste it here and just replace this with password okay so what it is doing it is returning the user which matches this email and password inside this response list which we have okay which is present here on this particular board all right so now it is returning that and now what we will check if user exists which means if if we have values inside if user has some value if user is there then it should alert that okay my login is success i'll say login success all right and it should also reset my form so for that i'll just say this dot login form dot reset all right and if the login is success then i want to route to dashboard page so i want to go to my dashboard page so for that i have router dot navigate and this will help me to navigate to my dashboard page so i'll just say dashboard okay and if user is doesn't exist then in the else condition i'll just say alert user not formed okay user not found okay sweet and simple and for this response error suppose success reason and but if at all there is some error in the api calls for that i'll have this alert and something went wrong okay nothing bent from this exclamation looks good sometimes okay so yes in this way so this was the logic for logging by using json server if you see my code here that if it is getting all the users from this particular location and it is checking that the email and password is matching or not if at all it is matching then it is returning to this user and if the user exists which means login success if don't then it says that user not found and it will not login all right so let me just test this now let me just go here on my so if you can see right let me just go back to the login okay let's try to do one more thing okay so rather than going here and routing to the login page why not create a button if if the user logs in then there should be a button also right which helps to log out so let me just go here on my ps file okay of employee component employee dashboard component so i'll go inside this html first and i'll create one button okay and the button name would be logout so button dot i'm using classes of bootstrap so this will be a red button so i'll use danger all right and also i need to have some margin margin too maybe yes and the button name would be log out okay and okay if user clicks here so it will round so for that i will make use of router link from here router link and if it is clicked then it should go to my login page let me save it let's go on the browser and check okay now we have this cool looking button as well which calls log out if i click here on this logout it will route me back to the first page let me check if at all there is error or something okay all right if code is not saved i guess okay the spelling was incorrect so that's why so it should be router link okay let me save it again and let's go on the browser and check i click here on the logo so now we are on the login page all right so now we'll try to check this end-to-end condition if i click on new user let me create a one more user here as okay let's say [Music] okay tripon okay mobile number email addresses to your vpo and gmail.com and password same one two three four five six let me click on sign up you can see sign up successful if i go here as i told you that you have to remember that so let me have the email again reborn at the rate gmail.com and password is one two three four five six click on login i can see the login is success and i am routed to this page which is my dashboard all right i think i have three users so let me just test for all three if i refresh this page i can see i have for sashay for james dino and portrait one so let me just test it for james as well all right let me just go here click on this log out again the james password is one two three four five six click on login you can see the login is success and i am again routed to this dashboard page all right so in this way we have learned today like we have covered actually because what i am planning is let me have some form validations as well so i am planning that in my next video so yeah so in this video we have just learned about how we can create a login and sign up page and we can use json server to log in and sign up all right if i click on login page if you can see now in the next video what we'll do we'll try to have the validations here if you see i haven't used any validations in my in my any of the component if whatever form i have created there is no validations all right it is just an empty so what we will do in the next video we will try to add validation for the sign up page and for the login page as well all right and once this is done then i will really want you guys to go ahead and practice the same validations what i will teach in my next video and you can do it for here like if you see for this ad employee we don't have validation so i really want you guys to go ahead and practice once i will be posting that video very soon all right so in this way we have completed the login and sign up page if you have any doubt and if you have any queries like like performing this project then please go ahead and use the comment section you can mention all your queries there i will definitely gonna answer each and every question and if you really want to connect with me then i'll have that telegram link in the description so i have a group on telegram with the name as angular discussion so where we have discussion around all these things stouts and everything all right so yeah take that time bye bye and keep learning

Channel: Let's Program

Views: 4,620

Rating: 4.927928 out of 5

Keywords: Angular Login, angular signup, angular login using json server, angular json server, angular routing, angular reactive form, angular forms, angular tutorials, angular login and sign up, angular tutorials for begineer, lets program, angular crud, crud using json server, angular json server tutorials, angular forms for beginner, html login template, html css

Id: eMJ5spB3P1c

Length: 39min 13sec (2353 seconds)

Published: Thu Sep 09 2021