#157 Creating Signup & Login Page |Angular Authentication & Authorization |A Complete Angular Course

in this lecture we will create the login and signup form and also read the form data from login and signup form and use it now in order to save some time I have already created the login form so here in the header you can see that we have three menus home so this is our homepage we don't have much here we have this dashboard link there we are going to display all the tasks currently it is not displaying any task because we are not logged into this application and we are not logged into this application because we have not written the logic for logging in the user and third we have this login link so if I go there you will see that here we have a login form so in this login form user can enter his email address and password and when he clicks on this login button the user should be logged into this application so we going to implement that functionality in the future lectures of this section in this section what we want to do is we want want to use this same form for both login and for sign up okay so when the user clicks on this register here button here it should say sign up here then we want to have this email address and password field there as well we want to have a button but there it should say sign up and here it should say if you already have an account login here so let's first Implement that functionality so let's go to vs this code and here I have created a new project called angular o in this project if I go to this Source folder there we have this app folder and if I expand this app folder there we have these components this login component home component header footer and dashboard component we have one task model so this task model is same which we created in our previous section then we have this Services folder and in there we have this Au Interceptor service login Interceptor service and login service so again inside this service folder this file which you see we created it in our last section itself when we were learning about HTTP request and response now here one new file which I have added is this route module. TS file and inside this file I am defining some routes so basically I have defined three routes one route for the homepage one for login and one for dashboard all right then here I have created two new components this home component and this login component we had this dashboard footer and header component in our previous section also so it is same what we had in our previous section now in that project I have added two more components home and login so let's go to this login component let's go to the HTML file of this login component let let me close this home component. CSS and home component. HTML so there you will notice that we are creating a form in that form we have an input for email address and we have an input for password then we also have a button of type submit and currently it says login and here also we have a button and it says register here now here I will set this button to type button because when this button is clicked we don't want to submit the form at that time we simply want to toggle from login to signup and if it is sign up we want to toggle from sign up to login okay let's see how we can achieve that so let's save this file let's open login component.ts there inside this login component class I am going to create a property and I'll call it is login mode it is going to be of type booly and initially let's set it to true so initially it will be in login mode then here I will create a function on switch mode and inside this what we will do is if this is login mode is true we will set it to false and if this is login mode is false we will set it to true so we will simply toggle its value from True to false or false to true for that we can simply say this do is login mode equals now here we want to set its value to the opposite of its current value so if the current value of is login mode is true we want to set it to false and if the current value of is login mode is false we want to set it to true so for that we will use the not operator on this is login mode so it'll say this do is login mode and on that we are using the not operator so we are setting this is login mode to true if its current value is false and we are setting this is login mode to false if its current value is true all right let's save this file let's go to login component. HTML and there when this button this second button is clicked at that time we want to call on switch mode function so here I'm going to bind click event and when this button is clicked we are going to call this method on switch mode okay let me move these attributes in a separate line to make it more readable all right now if I scroll up first of all here this S2 element says login here but here what we want is instead of saying login here we want to show this S2 element dynamically that means if the user is in login mode in that case it should say login here but if the user is not in login mode that means he is in signup mode so at that time it should say sign up here so here I'm going to use string interpolation syntax like this and there we will check is login mode so for that I'll simply copy this property name and let me use it here and if is login mode is true that means the user is in login mode so in that case here we will say login otherwise we will say sign up okay let's save the changes let's go to our application and let's quickly test it so when I click on this register here currently we are in the login mode so it says login here but when I click on this register here button it says sign up here so it is working as expected then we also want to change the value of this button so if the mode is log in that case it should say login but if the mode is not login at that time it should say sign up let's go back and let's write the same logic here so again here I will use string interpolation syntax and there we will say if is login mode is true in that case the value here should be login else it should be signed up again let's see if the changes let's go to appli ation so initially we are in the login mode so it says login here and the button says login when I click on this register here at that time now we are in the sign up mode so it says sign up here and button also says sign up and finally we also want to change this message so if we are in login mode we want to display this message otherwise we want to display another message so let's go back and here I will use string interpolation syntax and let me wrap this string within single codes like this so if we are in login mode at that time we want to show this message do not have an account yet otherwise we want to say already have an account okay and here again I will use string interpolation syntax and I'll also wrap within single codes this string so if we are in the login mode at that time we want to say register here otherwise if we are not in login mode we are in sign up mode we want to say login here let's save this let's go back to our application and here we have an error okay that's because here we need to use a question question mark okay so first question mark and then colon so if this value is true in that case this string will be returned otherwise if this value is false this string will be returned so let's save the changes now let's go back to our application that error should be gone so initially we are in the login mode so it says login here button says login and here it says register here when I click on this register here button now you will see that here the heading is sign up here but says sign up and in the message it says already have an account login here so this functionality is complete now what we want is whenever a user enters some value in these fields for example let's say the user enters his email address and also the password we want to read these values so when the user tries to sign up at that time we are going to make a post request and with the post request we are going to send this email address and pass password and also when the user tries to login at that time also we want to read these values and when the user clicks on this login button we are going to make a post request and with the post request we are going to send this data so first we need to read these data for that in this lecture we are going to make use of template driven approach but feel free to use reactive form approach if you are comfortable with that okay now if I go to vs code in the template driven approach the first thing which we need to do is in the app module first we need to import forms module we are already doing that here so we are already importing forms module from angular / forms as you can see so that is the first step let me close this file in the Second Step what we need to do is on each of these input elements we need to provide a name so here I'm going to provide name as email and for the second input I'm going to provide the name as password then we also need to use NG model directive on each of these inputs so let's do that I also want to make these two input Fields as required so first of all let me move these attributes in a separate line to make it more readable and now to make these fields required I'm going to use the required attribute on both of these fields and also what I want is I want password to be minimum eight characters so I'm also going to specify another validator on this password field which is min length and I'm going to set it to8 next what we want is we want to make this button disabled if the form is not valid so if any control of this form contains an invalid value this submit button should not be enabled so for that what I'm going to do is on this form I'm going to add a template reference variable I'll simply call it as Au form and in order to create a template refence variable first we use the pound sign and we provide a name for the variable so I'm going to call it as o form and to this we are going to assign NG form so now this or form variable it is going to store an instance of NG form okay and now we going to use this Au form template reference variable on this button so again in order to make it more readable I will move some of the attributes in a separate line here I'm going to find disabled attribute and to this we will simply say if Au form do invalid okay so if the Au form is invalid in that case we are going to disable the button so let's save the changes now what we want is let me close this terminal here so now what we want is when this form will be submitted that means when this submit button is clicked the form will be submitted right when this submit button is clicked the form will be submitted and when the form will be submitted we can listen to NG submit event and when this NG submit event happens we can execute some logic so here to this NG submit I'm am going to assign a method I'll call it on form submitted you can call this method anything and to this on form submitted I'm also going to pass this template reference variable this Au form template reference variable now let's go ahead and let's create this method in the login component class and here this method is going to receive an argument let's simply call it as form which is going to be of type NG form right and in order to use this NG form we also need to import it from angular SL forms so we are doing that here all right now all we want to do is from this form we want to read its value and for now we are simply going to log it in the console so here let's say form do value and we are also going to reset the form once the form is submitted so we can simply call reset method on this form with this let's save the changes let's go to application okay let me open developer console here let's go to console let's clear everything and currently if I don't enter anything in these forms in that case this form will be not valid so when I click on this login button it should not log anything here but if we enter a valid value for example John gmail.com so it is a valid email and here we also need to provide some password currently if I enter only four characters in the password and when I click on this login it is not going to login because we have specified that the password should have minimum eight characters and if we specify those many characters now both these field contains valid values right so now when I click on this login button it should log all right here it has logged an object which only con contains password it does not contain any email field so let's go back to vs code and we have added a name called email here and here actually it should be NG model okay so because of this we had the error so it should be NG model also on this email field I will add one more validator which is email so in this field we only want users to enter a valid email let's let's save the changes let's go back to our application let's enter an email so for example John gmail.com and a password of minimum eight characters and when we click on this login button you can see an object which contains the email and password has been logged here so in this way we are reading the value which the user has entered in this login form if you go to sign up there also if we enter a valid email again John at gmail.com and some password which should be minimum of eight characters and when I click on the sign up button at that time also it should log that email and password so in this way we are reading the email and password from the signup form and the login form and once the submit button is clicked it is also resetting the form as you can see here all right so now in the next lecture we are going to write the logic of signing a pay user on our server on our Firebase server this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 3,758

Keywords: authentication, authorization, angular, angular tutorial, json web token, complete angular course

Id: B1tocje0dK4

Length: 17min 54sec (1074 seconds)

Published: Tue Feb 13 2024