Angular - Login Page - Template Driven Forms - Hiding Navigation Bar - Routing - Paths Auth Guards

hey what's up guys caught Forge hero welcome in the next video today we will learn how to create the template driven signing page like this one we will also learn about the validation of the form so right now we have the empty form if we click the sign in button we can see that we are getting the error message that the form is empty if we provide the wrong data and we click sign in we'll get the information that we have invited user or password if you use the correct one and will also implement it will be navigated to our application with the navigation bar displayed which was not present on the sign-in page inside we can navigate between different sub pages so we have two here home and statistics and also we can log out clicking this logout button over here and we are being navigated to the sign-in page again we will also learn about protecting our roads so if we try to access to our home sub page in our application without authenticating we can see that we are being navigated back to the sign in page to achieve this we will use angular guards feature so let's start coding we will start with generating new project we will use angular CLI and this is the comment the name of the application will be log in page demo we want to set styles to s CSS and we will set the prefix to C F and we also want to can write the routing because it would be necessary to create a login application okay so I will hit enter and I will come back to you when the project will be ready here we are the project has been generated and it is up and running and before we start we will add the bootstrap and the jQuery to our project we will install it as the node module so let's open the second terminal over here and we want to say npm install bootstrap and after a few seconds it should be installed ok it's here and we also need jQuery so we say npm install jQuery and we have to wait again so it is good you can also run this NPM outlet fix but we'll skip it for now and we want to open angular dot JSON file first thing we want to add is bootstrap styles so we go to this architect section inside we have the build section and you have to find these Styles array under the assets so we have to give the path to the node module so it will be node underscore modules slash bootstrap slash dist / CSS slash bootstrap dot min dot C has s we have the styles we also want to add bootstrap JS files so we'll copy this line of code we will paste it over here in the scripts array we will paste it and we want to change one thing and this is this CSS we want to replace with J's and also we want to change the extension of this file last thing is jQuery script so we will add it before the bootstrap J's file and we'll remove this bootstrap and put a jQuery over here this will stay we want to get rid of the CSS and we want to change the bootstrap to check where we mean J s you may wonder what are those paths so we have installed the bootstrap and the jQuery are the node module and we are giving the path to these files so basically if you open the node modules and you will look for bootstrap it's over here we can see that in the bootstrap and slash tests we have the CSS and J's directories and over here are living the files and we are using these paths over here to attach it to our project let's hide it part is almost ready now we have to save the file and we start our application this is because changes made in the angular Jason will not be detected and later on we can open our application in the web browser ok our application is running so we can make small tests we'll go to up and here we'll open our main component we will remove everything from here and we'll leave only the root there - outlet and also we'll give some text over here let's say h1 with the text hello if we save it yes and the bootstrap is working because the font is different instead of this text hello we want to have a navigation bar so we will go to this get bootstrap comm page and over here in the examples sub page we have this nav bar sections and if we open it up we can see that we have different nav bars to use and if we hit control U on this page we can see the sources so we can take one of them let's find the nav bar expand MD this one let's copy it and space it over here remember about that you keep this root or outlet over here because this is the place where our components will be displayed let's adjust this a navigation bar a little bit so we don't need the search bar so we'll get rid of this and we also don't need to drop down many so we get rid of this over here can also change the title over here so we'll call it login up and for now I think it's good we will make some more adjustments later oh let's get rid of T's also we can save the file and check out if it works so here is our navigation bar and if we click the burger mini nothing happens so let's share the console and over here we have an error that says cannot convert object to primitive value this is because version of the jQuery which we have installed is not compatible with the version of the bootstrap which we are using so all we have to do is to downgrade jQuery from the version 3.5 point 0 to the version 3 point 4 point 1 and to do it we can say npm install jQuery at 3 point 4 point 1 we hit enter and after 2 second each should work so I have restarted the application and we can see that right now our navigation bar is working correctly and also we are not getting any errors only some warnings from the dev tools so it's all good so now let's generate login page component and let's try to display it so we want to generate new component using CLI so we say ng can write component and it's called login we hit enter and after a few seconds it should appear it's over here and now we want to display it so we have to go to the uploading module dot yes and over here in the routes array we have to create a new object and this object will have two properties first one will be path and we want to set it to the empty string and the second one will be component and we want to set it to the login component which we have created and now if we save it login works appears so it works and now we want to make it pretty so we will go to the get bootstrap comm page and over here in the example sub page we have this sign-in form so let's open it let's hit control U and over here we'll take the sign-in page I will take it and we'll go to our login page and paste it over here we don't need image so we can remove it and let's save it and it's here let's make few adjustments so first of all we want to drop our form into the leaf element with the class card which comes from the bootstrap and inside this deep element we want to use cardboard class which also comes from the bootstrap so we will move this form inside and let's maybe also add another one and let's call it login wrapper and let's put everything in there so let's save it now it looks better and using this login wrapper class we'll add some spacing some margins let's open the login component scss and we will specify role for this for this class so we say login wrapper and we want to set margin for the 20 rams and auto oh I forgot this one and the second rule will be with and we'll set this with to the fixed size so it will be 20 Ram and if we save it we have some spacing okay before adding some spacing between the inputs let's first remove this de sporter and also we don't need it remember my options because we will not implement remember be options today okay so now we need some spacing between the input and between the input and button so we can do it by simply adding the rule for the input element and setting the margin bottom property to two Rams and if we say that it looks good so we are done with the CSS for now let's go back to the login component HTML let's add some spacing between the sections and over here we will use the email address of course and the password but we have to add also the name attribute so it will be named and we'll call it email and we'll do exactly the same for the password so we are adding the attribute password oh and we have to use quotes I forgot and also here okay we need these names because we want to use the ng model directive so we want to say ng model at the end over here and also over here so we will be able to pass values from this field to our class we also have to create a variable for our entire form and to do we will use hash sign in form and we want to assign to it ng form so now we are able to handle the ng submit event and we can assign to this event our method which will create and it will be called on submit and we can pass our form to it house the parameter okay if we save it right now it will fail and this is because we are not declaring on submit method in our login component TS so it's - it we want to call it on submit and we will receive sign in form which is the type of ng form and we are not seeing this because we have to add the import in our app module in the imports array over here at the bottom we want to add forms module and we have to import it over here also so we have to say import forms module from angular slash forms now we can save it we can go back to our login component now ng form should be visible and it is so now let's console.log the values from the sign-in form let's save it and now we can finally save our templates so we hit ctrl s and it's good let's try it we say John Doe at mail calm and some password let's say test one two three let's open the console let's clear it and let's hit sign in and we can we can say that email and the password is being passed to our method so it's good by the way this approach of creating forms in the angular is called template driven forms we also have the reactive approach but will not cover it in this video now we want to create authentication service or we CD into source up inside we want to create a directory called service and we want to navigate in there and we want to say ng generate service we want to call it authentication and it should be placed in the directory of the same name we hit enter and it should be generated let's check it out and it's inside right we also want to create a second directory and this time it will be called model and inside will create a new class which will be called sign-in data dot TS and inside we want to create a class that will represent our sign-in data so email and password we will have two properties inside it will be private email which will be the type of string and also private password with the same type we also need two constructor with the email and the password and in the body of our constructor will assign email to our email and also we will do the same for the password since our properties are private we also need gutters so we will get email and we want to return this email and we want to do the same for the password so we say get password it will return string and you want to return this password our model data is good we can save it and go back to our login component on TS first of all we want to inject our authentication service in the constructor so do it like this we can move to there on submit method and over here first of all we want to create a new variable which will be the type of Const it will be called sign-in data and we also assign to it new object so we say new sign-in data this is the class which we have created and the first parameter on line argument with P sign-in form value email and the second argument will be sign informed value password seems we have login data now we want to pass it to the authentication service so we have to use this keyword and now our service is not visible because we forgot to add private and now we can call authentication service and inside authentication service we will have methods that will be called out and Hecate and we want to pass their sign-in data so now we can navigate to our service and implement authenticated method so under the constructor we want to say I'll indicate and it will accept sign-in data which we will be the type sign in data and our authenticate method will return boolean in this video we will not call an external services so we will mock the user in this class so we'll say here private read only mock the user and we want to create a new object and we'll have the email first and it will be John Doe at mail calm and the password will be test123 I have used wrong notation okay now it's good we will also create if authenticated property which we will use later to control visibility of our navigation bar so we say is authenticated and by default our user is not authenticated so we want to set it to false let's go back to the authenticate method and over here first of all we want to use the if statement in the if statement we will call method which will be called check credentials and over there we want to pass our sign-in data okay and if the credentials are correct we want to set this is authenticated to true and we want to return true otherwise we want to set this is authenticated to false and we want to return false now we can implement our check credential method so we go under the authenticate method and over here we'll say it's private and it will accept sign-in data which is the type of sign-in data and it will return boolean in the real example this check credential method should probably call some web service that is responsible for authenticating our users and maybe even it should return some token which we can use to and keep the session up but we will simply check our user with mocked user let's first create some helper methods because we want to check email and the password so we'll say private check email and it will receive email that will be the type of string and it will return a boolean all-stock and the second method will be private checked password and it will do the same so we will have the password as the parameter which will be the type of string and we want to return boolean in the check email method we want to return in the first place and we want to check if the past email is equal to the mocked user get email and in the case of the check password we want to return if the password is equal to this mocked user cat password and now in the check credentials method we can simply say return this check email and we want to pass sign-in data get email and we want to check the second condition using the end operator and you want to say this check password and we want to pass sign-in date and get password so now we want to generate two components to test out our signing page let's open new terminal window and over here in the first place we want to navigate to the source up and over here we want to say Angie can write component and the first one will be called home and let's wait a few seconds okay it's here and the second one will be statistics and it's also here okay adjust our navigation by right now so we go to the up component dot HTML and over here instead of href attribute we want to use rotor link and we want to set it to home and it's already home so it's good and you wanted a second link and we will also want to use the route on link and we want to set it to the statistics and we want to change the text from the link to the statistics okay and also let's copy this one from here and paste it over here so when we click the log in app logo we will be moved to the home to make it work we have to add just our routing module and here in the routes array we have to create two more objects and first one will be off set to home and it will display component called home component and the second one will have off set to statistics and the component which will be displayed will be statistics component like this and we need this over here now if we save it and also if we save the up component HTML we can test out our navigation bar so it's open it and over here if we click home you are being navigated to the home and if we click statistics will be navigated to the statistics but now user and doesn't have to login and he has full access to it and also the nav bar is visible so now we want to prevent it so let's go back to the sign-in page and to disable nav bar on the sign-in page we have to navigate to the app component dot TS file over here we have to create a constructor in the first place so we say constructor and we want to inject our authentication service so we say authentication which is the type of authentication service by the way it should be public or we say public and now we can take this authentication service copy it and go to the app component dot HTML file and over here on the nav HTML element we can use the ng if so we say ng-if and we want to set it to the authentication service is authenticated property if we save it user right now he is not authenticated and we cannot see the navigation bar but if we login so we will use John Doe at mail calm and we will provide the password test one two three and we will sign in we can see that navigation bar appears but it will be also nice to navigate to the home page instead of staying on this login page to do it we can go to the authentication service over here and in the first place we want to inject realtor which is a type of router and now if the credentials are okay in this if statement under the this is authenticated set to true we want to say this realtor and you want to say navigate and we want to pass our home path before we will test it out let's change the content of the home component I will paste simple Jumbotron from the bootstrap and also let's do the same for the autistics component so let's go over here and instead of home will say statistics so we want to save this one and also this one here so now if we log in we should be navigated to the home page so we say John Doe at gmail.com password test123 sign in and over here is our home page and we can also navigate to the statistics cool it would be nice to also have a logout option so let's go back to the authentication service and over here at the end of the class we want to say logout this is the name of the method and all this method we'll do is to say this is authenticated we want to set it to false and we want to use the router so we say this water navigate and we want to navigate to the home page and I mean sign-in page so we are passing empty string let's save it and let's go to the app component ts file and over here we'll say logout and our logout method in the app component class will call the logout from the authentication service so we'll do this that way now we can go to the app component HTML file and over here under this unordered list element with the navbar enough Emer auto classes will create another unordered list and it will be navbar not class and also this time it will be margin left set to outer because we want to float the logout button to the right and inside we'll have li element so it's the list item and it will be enough item and also will add the pointer class and inside we will have uncor with the knife link class and we don't need the href element but we need that click event and we want to set it to our logout method which we have created in our component class and over here we say logout we can save it and go to the s CSS file and over here we want to set the rule for the pointer class and we want to set the course or to the pointer let's save it test it out so we say John Doe at Malcomb password will be test 1 2 3 we want to sign in and now we can see it as we are on the home page we have the logout over here and if we make it bigger we can see that logout is floating to the right and we can click the logout button and we are being navigated again to the sign-in page cool now we'll add authentication guard to prevent navigating to our internal roads and what I mean by that is now we are able to navigate for example to the home page like this and you can see that we are on the home page and we are not seeing the navigation bar because we are not authenticated of course but we can also go to the statistics statistics and we are here on the statistics and we want to prevent it and we want to navigate there only the users that are out indicated we want to open new console over here in the first place we want to navigate the source up over here we want to create new directory that will be called guards and we want to navigate thirst when you want to say see regards now to generate the card we want to use the angular CLI so we say ng generate card and you want to call it out cart we hit enter and now angular CLI will ask us which interface our authentication guard should implement and we can see that they can activate interface is selected by default we can uncheck it we can check it again using spacebar and to can write the out card we hit enter and after a few seconds it's here in our guards directory implementation of our our card will be really simple in the first place we want to inject here our authentication service using the constructor so we say constructor and inside we want to say private authentication service which is the type of authentication service okay and now we go to that can activate method which comes from the interface can activate inside we want to check if our user is authenticated so we use the if statement and we can use our authentication service and our authentication service has is authenticated property which stores bulling that says if the user is authenticated or not and if our user is authenticated we want to return true and if it's not we want to return the false there is one thing to do and this is when the user is not authenticated and he wants to navigate to the home or statistics page we want to navigate him back to the sign-in page and to do it we have to inject the router so we say private root R which is the type of router and in the case when the user is not authenticated we want to say this router navigate and as the argument we are passing array with empty string and this empty string is our sign-in page it looks good so we can save the file and navigate to our routing module over here so we go to the up routing over here we want to protect the home path which displays home component and statistics path which display statistics component and to do it we can use our half guard which we have created so we say can activate and we are setting it to the and we are passing our our guard which we have created and we want to do exactly the same for the statistics oops so we say it can activate we are passing the array and our half guard oops this one so now let's save it and let's try to navigate the home page like before so we say slash home and you can see that we are being navigated to the siding page and this is because we are not authenticated if we do the same for the statistics we can see that we are also being navigated back to the sign-in page and this is because our paths are being protected by this authentication guard so now let's try to login to check if everything works so it was John Doe at male comm password was test 1 2 3 we sign in and we can see that the navigation bar appears we are on the home page we can navigate the statistics and also we can logout so everything works as expected we can improve one more thing in our application before we finish and it is this sign-in page because you can see right now if we click sign-in we don't have any error message that the form is empty or anything else so let's go to the login component HTML file over here we want to add two messages over here and we'll use alerts from the bootstrap so in the form under the button we want to say div and our div will have the alert class and also the alert danger class those classes are coming from the bootstrap itself and we also require roll attribute which is set to the alert and we will also add ng-if over here and we'll set this ng-if to ease form vice property which will create in our login component TS file and over here in the body of this message we want to say please fill all fields we also want to copy this message and paste it over here first message will be displayed when user will try to click the sign-in button when the form is empty and the second div element will display error message when the login or password will be invalid so we want to change this ng-if to the different property and we'll say our credentials invalid it's not by it's invalid and we want to say in the body of the message invalid user or password so we can save it we got some errors and this is because our properties are not existing right now so let's create them we go to the login component dot d s file and here at the beginning of our class we want to say is form valid and we want to set it to the false by default and also the second one was our credentials invalid and we want to also set it to false now if we save it should be good yes we don't have any errors right now now we can improve our on submit methods so in the first place let's get rid of this console log over here and instead we want to use the if statement in the if statement we want to use negation and we want to check if our sign-in form is valid before we proceed we'll change this name of the property from the is form Valley to invite so it will be more accurate and we'll copy it and paste it also over here and we'll save it okay and we'll save this one also we will enter this if statement if the form will be invite and form will be invalid when one of the inputs will be empty and it is being checked thanks to that required attribute on the input element so if the form is invite so one of the inputs is empty we want to set this is form involved to true and this our credentials invite to false and we want to return to prevent any other actions so now we can save it if the form is valid so we have all the inputs filled we want to check the credentials so let's create a new method which will be responsible for technique return shells and also handling the error if the credentials are invited so we say private check credentials and it will accept sign in form as the parameter and it will be the type of energy form now we can move creation of sign in data object from the unsubmitted method to the check credentials and also we want to use each statement after this and we want to paste there our sign in data now we want to negate the output of the authentic eight method so use a negation and if authentication will fail so we will get the falls from the authenticate method will negate it and we will get true and then we want to display the credentials invite error message so we say this is form invite set to false to remove previous message and these are credentials in Val to true and now all we have to do is to call these check credentials method in our on submit method and pass our sign-in form we can save it right now and test it out so let's provide some wrong values let's say test and if you click Sign In we can see that we get depth please fill all fields let's say we'll use the test here also we click the sign in and we can see that we have the invalid user or password and now let's try to use use the correct one so we say John Doe at medCom and we say test one two three we hit sign in and we are good to go so everything works let's also add just the spacing between the button and the message so we'll go to the s CSS file of the login and over here for the button element we add margin-bottom like before set to two Rams and now if we save it we click the sign in we can see that we have the spacing between the button and the message great okay guys so these all I have prepared for today thank you for watching I hope you enjoyed this one if you liked the video remember about liking it and subscribing to my channel and see you next time

Channel: CodeForgeYT

Views: 18,186

Rating: 4.9610391 out of 5

Keywords: angular, login, page, form, sign, in, routing, route, path, protect, protecting, auth, guard, authentication, authenticate, service, prevent, router, navigate, validation, input, ngForm, nav, bar, navigation, redirecting, redirection, ngSubmit, event, for, beginners, easy, tutorial, guide, explained, submit, control, menu, navbar, start, component, schematic, events, link, guards, routerlink, animations, security, secure, design, template, bootstrap, jquery, installing, adding, to, project, right align, logout, dropdown, mobile, responsive, hiding, hide

Id: 7al2_2t2AME

Length: 46min 18sec (2778 seconds)

Published: Tue Apr 21 2020