Angular 14 Login and Signup Page | Bootstrap UI | Complete Authentication & Authorization Part 1 |

hello everyone welcome back to my channel so as you guys know that um i have released a video like a couple of days before that we will be creating a complete authentication and authorization in angularplus.net core okay so if you haven't seen that video so you can go ahead on my youtube channel and you can just have a look here that i have shown the complete demo like what all things we are going to create during this project all right and if you like if you love the things then i think you guys can continue with this one because this is the part one of that video all right so i have a small presentation created as well that what all things we are going to create uh in this in this small journey where we will be like covering all this above topic all right so let's just focus on what all things we're going to create in this part one okay so if you see guys see we have like around total uh 12 points i know there is some small mistake here so yes we totally there are 12 points which i have created which will be covering like part by part okay so basically we have the first point that we will be creating a new project like on both on angular as well as the dot net core so once we do it so we will change the status as well to done and we will release the video like part by part so this is what we are going to get to creating a new project in angular started code then creating login page and sign up page ui site then we will be doing angular form validations then we'll create api for login and sign up integrating the api you can pause the video and you can read all these points like what all we are going to create and if you have anything extra to add up you can let me know in the comment section okay so without any pasting time let's jump into the first step which is creating the new project in angular and dot net core all right so for that let me just jump into my folder and let me create a new folder inside this or we can just click here okay and we can just press cmd okay so our command prompt will get open let me zoom it up so here you just need to hit a command to create an angular project so how do we do that so let's just um okay let's make it directory as angular angular auth okay and then we can just say cd and let's go inside this folder okay so i have created a folder angular auth as well as our your angular frontal so first create the angular project for that we have a command ng u okay and let's give a good mean angular auth ui okay so this is the front end so that's why the name is ui so let's hit this and you guys know that what all things it will ask you for the routing and the css so i'll go with scss and let's hit enter and it will take some time to create the project okay so in the meantime i'll just screw in this folder okay and i will copy the path okay now so i am hoping that you guys have visual studio installed in the system if not then please go ahead and do it because we will be writing the back-end code in visual studio 2020 2022 or 2018 anyone will work okay let me open up the instance visual studio okay click on create a new project so let's choose our template so i will be going with asp.net core web api so you guys can choose this one as well click on next and let's give it a name okay i'll give a name as angular auth api okay so that was ui and this is api and let's choose the location path location so this is into the that same folder angular auth okay and this is the solution name let's click on next and uh so this is important because we are also like enabling the swagger api to test our endpoints so this has to be checked okay so you can keep things like that and again we will be working on dotnet version six okay so all this being selected click on create okay so again it will take some like few minutes to create the scaffolded project for you guys okay so it is creating the project as you can see and in the meantime you can also go ahead and check the angular thing it's still installing so it may take some more time to get installed so let's just wait for it so the dotnet project is is ready so here we can have we have some like scaffolded things given by the dotnet team we have this weather controller program.cs file and and this water forecast model as well okay so we will keep all this as it is and we'll jump to the angular side because that's how we create a new application in in.net core and this was pretty easy steps to follow so i hope you guys will make it if not again i'm there to help you can just mention it in the comment section i'll be definitely having look on each and every comments okay so let's just wait for this guy to get installed and then we'll start our things first like as you have as i have told you guys we'll be starting first with the with creating the login page and sign up page in the ui okay so but the first point is done that creating the angular project in dot net course so this is done so i'll change the status return okay because anyhow it will not take much time and let's see how much time does it takes and this is about to finish this is again yeah so i can see the application is installed successfully okay so now let's go into that directory so for that into the ui directory so let's press cd okay so you'll have to press cd space and then press on tab and or click your or you can just type in the folder name so we'll go in inside the angular arch ui hit enter okay and now i want to open this in visual studio code so for that just press code space dot and hit enter okay so it will open up you know the project in visual studio code okay all right so let me zoom a bit so that it is more visible for you guys okay i think this is much better all right so let me first uh start things off by running the project okay so let me run the project and for running the project it's quite simple it's just we need to hit this command ng server and i will say oh oh means it will open up in the windows in your in your chrome browser okay so as you can see my application is compiled successfully and it is running on the port double zero so yeah this is what we have the angular auth app ui is running so yeah that's good news here so let's try to create some folder structure now like what we are going to follow while by creating this application okay so for the for that first thing in the src folder in the app so let's create a folder called as component where we will be putting all our components okay let's have a component and we'll also create a folder called as helper okay and then we'll have a models folder so whatever models we will be creating in the applications we will put inside this and also we'll have a services folder so let me create that as well so let's go here and sorry inside the app we need to create so we have our services folder as well okay so this is what our folder structure will look like so whatever the component will be creating it will be there in this some whatever helper class which will be requiring like for validations or some common logic will put inside this and the models will be done inside here whatever models like mod user model login model everything will be will be there inside this folder and in the services will create the api service which will helping us to do that those api calls and and whatnot all right so this is how the folder structure is going to be in our application all right and here now we can see that let me again like recall things so we have created the angular application as well as we have also created the dot net core application as well okay i know like i'll talk about the folder structure here as well but not at the moment once we'll start the api building then i'll talk more about it okay but as we know that these two the first two steps are done like for creating the app in ui and the core and that's why i have marked the status here as done okay so now let's jump to the point number two which is create login and sign a page okay so for that what we are going to do is we need to create two components for that okay login and sign up component so as i have told you that so we have whatever component will be creating it will be inside this folder okay so let's go inside this folder first so i'll open up a new command terminal with that plus sign and right click on this folder and you'll get an option for open in integrated terminal okay so you can go by this also or if you want to go by this then you can say cd space then you need to press tab you will go into src then again cd space so you have a app and then again cd space something like this you can do so you can go to this path or you can just directly say cd space and the path and the location of this particular folder so it all depends but for me i find this easy like right click on the folder and open in integrated terminal okay so once you are in this folder we have to create two components what is the command to create components that is ng c ng generate c for component and we need to give the component name as login okay so once we hit this command it will scaffold us like it will give all the template for our login page okay so let's just wait for it to get created all right so we can see our login component is created and it has also updated updated our app module okay so next component i need is the signup signup component okay so sign up component is also created okay now let me try to uh like configure the routing for these two these two components so i'll go in the app.routing.module and inside that i will configure these two routes so for that i need to have a path so that's how we do a routing in angular okay for doing the routing will go inside this approaching dot modifier and in the path let's see let's write login okay so whenever the path is login please load the component so we'll just say here component and inside that we need to give the component name so our component name is login component which we have just created can you see if you click on this so it gets auto imported on the top correct and same thing we have to do for the signup component as well so again let's press comma here and let's say your path as a sign up okay if the path is signup so we have to load the component name called as signup component again you can just click on here this will get auto imported all right so let me just change the spelling here that's how it looks like so we have a path we have a path name and we'll give those those name as well i think there was an issue with this yes so this is signup all right so that's how we have these two path now so whenever the path is login and sign it this will load up the component simultaneously okay let's let's let me show you now on the ui how does this look so if i refresh it so i still have this page but if i try to press login and hit enter can you see it's still not showing anything like i'm going on this path but still i'm seeing the same page same goes for the sign up as well you know what is the reason behind this because we have did only 50 percent we have just configured the routing in the app module but we need to make use of router outlet okay so if you see this project so we don't have any router outlet here so let me remove all of this okay and let me put up your router outlet okay and let's click on save okay so let's see if this is compiled here it's compiled successfully now if you go on the browser you can see once we have this path sign up so it says sign up works and if i have your login then it says login box which is which means that we have did everything correct okay all right now what next we need to do is like if you still see there is okay i'll talk about that later but yeah first let's go ahead and design like both of these pages okay so for doing the design i will be using a bootstrap as well inside of a project so for for using like if you want to use bootstrap in your project so there are multiple ways to do it so i will go ahead and follow this this the traditional way of doing it just copy the link of those things so let me just go on this website getbootstrap.com and there you can see we have docs present for it like you can just go ahead and see the installation guide how do we install this stuff and all that okay so what you need to do is we can just copy the cdn file or or we can just go ahead and copy the link like these two links from it okay so it all depends like how you want to do there are like several ways to do it you can also go ahead and do it by npm okay so npm is what most of the people do so you can just go ahead and npm website and try to try to install these things okay but i will be copying this cdn files and this uh the index.html file so just copy those two things and go inside your index.html file okay and you can paste it as i'm doing okay you can remove this see there is no need of this two things so i will just remove this okay and again i'll remove this as well from this line get rid of it okay so i just have two things now i have a link and i have a script for having the bootstrap i will paste these two things in the description box you can go ahead and copy it from there and paste inside this file index.html as i have did all right so once this part is done now you can easily use bootstrap in your project and also if you want to use fonts in your in your project then for that i'll recommend you guys to go on this website font awesome dot 4.7.3 schools and from there just copy this link okay because we will be using font awesome for installing like having all those packets like icons inside your application so again copy that link and paste it here again in the index.html file the way i did okay and let's save all these changes okay now let's go on the browser just to check just to validate i would say that if bootstrap is installed successfully or not okay so now on the login page i'll go here and i'll try to change like i'll try to add a button here instead of loginbox i'll try to add a button uh it's a bootstrap button so i'll use a class btn.ptn primary let's say okay let's save and check if this works okay so you can see yes so we have this primary button from bootstrap click me which means our bootstrap is configured successfully in your application okay so once that is done so now we'll focus more on creating uh our application like a login page and sign up page okay so for that what we'll be doing is let's go ahead and write some html for it okay so i will be creating um some div some classes or and some lots of css will be done in here so i'll start with a delve with an outer because i will be having some gradient colors in the background so this is my outer layer let me create a container okay again this is class coming from like bootstrap okay and inside that i will have a div dot row okay and now let's go ahead and um create those pages and and stuff like that so let's we have a table okay leave here i'll use offset okay offset for a medium screen is to then i'll use a cool lg cool lg5 cool md7 and again i use the offset for a large screen i'm trying to make it um responsive as well so that's why i'm using all this bootstrap classes okay so that's how we have added all these things so this should be offset okay offset four of set okay md3 okay so that's how we have our div now and inside this table we will have our panel for the log so i'll say dave dot a panel which i will be creating this class and this will have a border which i will be giving okay and i'll say pg white okay and our panel will have a heading so again we'll have a manual class with a panel heading okay and inside that will i will have my h3 tag let's give it some padding top of three okay and i'll give the font weight won't wait as bold okay and we'll have our title here as login okay let's save these things and let's go in the browser to check how things looks now okay so can you see now uh or things so i have a small card like things as a login written there as a heading okay all right so now after this again we'll be creating uh so this is our panel heading again so now we'll have our panel body so for that again let me use this class as panel body okay and i'll give some padding to this as p3 so padding around will be of three again this all are because of bootstrap if you don't have bootstrap then please configure the bootstrap and then use all this classes name whatever i am using it uh like while creating this application okay now so we we are creating a login form so let's have a form here now okay i don't need this action so i can remove this smaller things yes looks good now inside the form i will have all those details the like we are using mostly two things in the login form the username and the password okay so for that uh what i will be doing is so we can make use of you can go ahead and use any template from the bootstrap or if you want to use mines and you can you can stick to whatever i am writing and you can copy the same and like have it in your project okay so i will be having a tape with the form group because i'm pretty much uh like um having good grip on this bootstrap now so you can go ahead and follow me to like implement the same thing like how it will be looking for me okay and inside that i have a tape with a class called as input field okay because i will be modifying this fields a bit so that's why i am using this this classes all right so inside that field uh i will be having my span tag where it will have a icon and inside that i will have an input okay so inside this table okay i will have a span tag okay and the span will have a icon so let's say file okay and i will give a padding of two so again don't get confused from where i'm using so this is coming from font awesome so again if you want to see this so if you go on this website called as a phone awesome maybe this one point awesome.com like i'm using the version for you can search for your like user if i just put here your user so you can say this is the icon i'm trying to use far user and let me click it in here so this is what i'm using okay the classes of font awesome okay so i'll have this a span tag okay and let me have it like this one because after that i will have my input there okay i'll have my input input type text okay and i will have a placeholder uh which is put up your username okay and that's how we can like that's how it will be done like type text and stuff like that our div is closed and if i save this thing and let me just save it and let me check on the ui how things looks always try to check like how things looks on your ui side okay so that's how our form is now looking so we have icon and then we have a form so i'll copy the same form again and put down here as my password so this will be my password okay so we have a username and password and again this field will also be getting changed because the icon for password is different so we can just go ahead and phone to some and check so there is something called as lock far lock which will give a icon like a lock so let me just show you what i am trying to mean this is what i was trying to say okay so this is what our form currently looks like so we have two things been implemented our form with all those details okay but to submit a form we will be requiring a button right so to have a button we will we can create any like copy any button from bootstrap or you can create any of your custom buttons okay so let me create my button okay and button with the type we need to give it a type as well so let's give a type as submit so there is a reason i put here semester i will explain that in the last so let's give it a class as btn and btn primary so we are giving a primary color to my button and let's create a custom class called as median block i'll again explain about this later and it has a margin top of four and i want to give the width as hundred percent to that button okay and the content of the button is login that's how it is all right let me um save it and check on the browser again how things looks so that's how our login button looks like okay all right so now again if i uh if i want to create a forget password so that also i can do okay so for that i can um create some some random what we say or divs where i can put those details so what i'll do is just put it below here with a forget password so i'll again have a tail okay with the form in line with the inline so class all right it's a form inline where i'll give fr and it will have an empty of four again margin top okay and inside that i will have a tag okay and let's give it an id because again i need to style it so that let's give it an idea as forget okay and i guess that's it because uh in future we can maybe we can open up a model when people clicks on it or something like that okay and this will be your forget password with a question mark and i can give it is a class so that it should look a little bold so let's give it a class here as fond weight bold so this is the beauty of using bootstrap okay so just putting up the class and css gets applied automatically all right and that's how things gonna look like okay now let's save it and again check let's see what things else is missing okay so i have a forget password i have a login okay i should have also a sign up button okay so like if you want to sign up so that you can do that as well so that we can route to the signup page okay okay so for that again uh what i'll do so below this button i will have a dave okay which says a class as text center okay again we'll give a padding top as 4 and this will be a lighter texture text muted okay and this is that don't have account okay it will ask like you know what i would try to mean okay and it will have an a tag again and again i will be applying the same css so let's have an ids forget i'm just thinking of because both are our a tag so i will be putting some uh links there so some common css for both of them okay and this will just have your router link because i want to route it to the signup page for whoever whenever the user clicks on it okay so it will go to the sign up page okay and it will have that content as a sign up sign up okay and the div is closed already that's it let's format them a bit and let's save this record and let's see how it looks okay now if you go here so now we have like we are closely approaching it so now we have don't have account we have sign up if we click on sign up we go on the signup page can you see on the sign up component all right now now let's let's try to design this by by our css so let's go ahead and write some css now i think writing css will it will not be backed up because i'm trying not to complicate it with some unnecessary code okay so we'll just check to basic and just try to use some some some small common styling okay all right first of all we have something called as outer it is for that outer gradient color i have told you so for that let's have this outer and what i'll do is i'll give it a height of height to it so height will be 100 vh and the background okay so background i will be giving a gradient color so it's a linear gradient okay so it says to top i'm going to give it so we have i have some color code some favorite color code i have it with me always ready okay so this is what i'm going to use from the top i think it has only 50 gradient and come to the bottom it should take this color so it is hash 6 e6 e okay e6 e f6 that's it and this should be our 90 and i'll say background as no repeat okay so this is my outer if i save it and let me just show you what changes does it makes to your application can you see now we have a beautiful looking background okay so this is what the importance of outdoor does all right now we have another class as which i have added as panel heading so let's put this panel heading here and let's say text align as center okay and margin bottom i'll give it as margin bottom so let's keep it as a 10 pixel button okay so this is also good so if you remember i have an id as for gate okay so that's what i'm studying the a tags what i have in the html so let's try to style them as well so i want to give a minimum width of 100 pixel we'll change it accordingly if things are not good we'll change it as per our need um left and text decoration i don't want to see that underline so i'll remove the text decoration as none okay and cursor pointer so that it should keep that pointer whenever i'm hovering on that on that button or on that link okay now let's put up a a over so whenever i'm hovering on a tag okay so again sometime it doesn't takes that so i'll just set text equation as null here as well okay just to be double sure all right and then i have a form on a line okay inside that we have a label okay so that label i want to give some styling so i'll say padding left as 10 pixel okay let me add those values and margin i want to give a margin i actually want to remove the margins the margin should be zero and again cursor pointer all right so this label part is also done and inside that uh see i'm trying to customize that button a bit so for that bootstrap button i will be adding some custom css as you guys can see oh sorry this is a mistake yep so for that button i will be adding a margin top okay the margin top will be 20 pixel and i'll give a border radius of again a 15 pixel all right now let's try to design that panel thing so we have a panel heading let's try to design the panel so the panel i'll give a minimum height first as a 380 pixel okay and the box shadow this is very important to give you a good look and feel so it should be 20 20 pixel with 80 which is the bottom one okay and i will give a rgb color as i'm going to one eight common two on it okay and we'll give a border radius again the border radius has to be 12 pixel and a margin top again margin top of 100 pixel okay and now let's try to style the input field what i have wrote the input field as i told you that i will be changing it a bit so let's change that so again let's have a border radius first as five pixels some small radius there and padding allowed as five pixel okay let's make use of display flex i love flex a lot trust me align item centers and it it makes your job very easy flex cursor pointer and let's give it a border okay let's give it a border as one pixel solid and we'll give a color to it as hash 4 3 4 3 ff okay and whenever there is an input field error okay so whenever there is an input field error oh sorry okay so input field field so there is something called as error whenever there is an error which i'm adding so again border i can just copy these things okay so where is that yeah this is the one i can so i want to change the order whenever the validation fails so that's why i am changing this to this color so this should be red if the validation fails and the color should also change to red color okay and now we have two things there right the input text password which is the input text password so that i will be putting now there is hide and show things so again the input field which is having a type equals to text okay so whenever we have an input type as text okay and there is also one more input let me copy this and paste it below we have one more input type password okay and to that i want to apply some styling which is my border should be none because i don't want to show them and we can keep the outline and water shadow as well okay so i'll say outline outline as none and shadow shadow is ah with the box sharing this here it is of shadow as none and width let's take our width as 100 okay all right and now we have some slash icons okay so we are using that eye icon for hiding and showing so let's let's try to add them as well uh for for the password hide and show so that's why i'm adding this css as well inside that we're using a button there so let's add a border to that as none again this is very important so i'll copy the top and paste it inside this as well okay and we will having an image as well so for that we will have to style a bit so let's add our image so if we will be using like any images which let's create sort of those things so it will take this thing like this common thing so we can use it anywhere wherever we have this image tag okay so we can have this styling as 40 pixel that's what i want to give and the object fit it should be cover and again get the border radius border radius as 50 so that it should look like an icon like circle icon and we can give position relative okay all right so this was all about your some some styling related to it now for the further we will have a look if if you require some some extra okay let's now see how the form looks like okay so can you see now we are having a very good looking form where we have this username password for get password sign up so this looks like more decent and the magic being it is it is all about this uh whatever we have added here the css so this css makes this uh form look like this okay but if you see we are missing those uh this this eye icon because for hiding and showing the password as i have shown in the demo so that part also we need to like create right like icon so for that what we can do is we can again create a span tag okay so in the last we can add the expand tag whenever the password is required okay so maybe before or after it all depends like where you want to put that icon so for that let's um put up the slash icon there so let's go into html okay so where is that password fill here so this is the one we have the password field here so what we can do is so it all depends like whenever the password is shown so there you can put the span tag so for example we can put um maybe inside this or outside of this so we can have this a span tag and inside that we can put that icon like you can put a class class as far i'm not sure if the name is thick but yeah we can check it on the website okay so let's go on the website and check if i'm doing correct or not so you'll get i'm not sure e e i okay i need a slash one first so let's copy this one yeah this is the one i wanted so for eyes and i can paste it here sorry copy and then paste it and do only two times let's remove this one and let's save and check on the browser how it looks like okay so here the icon i'm not sure why it is not visible okay because it should be fast space okay now it should work okay now we have this icon as well okay but but again there is one cat small catch here that so whenever this span tag uh whenever people like someone clicks there on that span tag so we need to uh hide and show based on that condition okay so what we can do we can have a click event here okay so we can have a click event which say hide and show pass okay so we can create that method here so let's try to create that method click hide show so we need to create this method let's go in the component okay so inside that there will be one small logic will be written okay like for example just a toggling like if you want to toggle some uh password hide and show so how you can do that right so we need to have uh first check what is the type what is the type of that uh a form if the form is of type text for example let me just show explain you again so if i put here so this is a simple type text this is what i want i want it to be us a dot if i click this the i should open and then we can see this thing correct so for that uh i need to have a type so here type this has to be coming from your component okay so this has to be coming from your component and let's put it here as a type okay so this type we need to create on the component side so if you go on the component here we need to press type of type string and first it should always be of type password okay now if i save this you will see the magic so this type is password and now this type is taking i did a binding here okay so this is a property binding done so now can you see if i type anything i see a star but if i click this if i click this then i should get opened and the password should be visible okay so let me um write up those logic now so first and check is text so let's create a property is text of type boolean and let's give it the initial value as false okay and we'll have an eye icon as well i icon of type string and let's give it a value so the icon which we have copied right that that class so it is far i slash okay so this icon also has to be replaced so if you remember so here we have added this class so now this class will again coming from your component okay this eye icon correct so if this is done till here now you need to just toggle okay so we have a hide and show button here so this will help you to toggle so what i'll do is i'll say this dot each text if this is text and this is how we toggle them i'm just toggling this dot each text so this will make it hide and show like true and false and based on that we can toggle that button i icon okay so we can have this logic this dot this text if this is true if this is true then what it will do it will say this dot i icon can it will change this value it will change this value to open i which is for i okay if this is true or if this is false then this will again change the same value to a slash i slash okay okay and again we need to put up one more logic okay if this dot is text if this is text then what i can do we can say this dot type it should also be a text correct and again this dot type if it is false then i need to change the type to password okay let's save these things and let's see in the browser how things change okay now if i type some password it is okay but if i click here can you see i'm able to see the password now if i click again it will get hidden so that's how we do hide and show okay in in this angular all right so if that part is done so now what else we need to do okay so now uh for example i'm planning in future to to add up um a social login as well like uh how we can log in through google or github there are several options to do that as well okay so i will be doing that in future so that's why i need to create a form okay so i will be creating that form now right not a form but yeah those icons so that in future we can work on work on them as well okay so let me create that retail for it so i will have a margin to them and let me add this classes margin y and i want to give a padding horizontal padding is p y and i will say then one more border t this is the one which i am adding for for for it to add some customization so that should take some spaces moderately so this i will be using in the css all right now let's have a deal with the class called as text center okay and this will have a pys3 padding and inside that i have something already ready which i will be copying it from my clipboard but i'll explain you what what it does mean actually okay so what i have this i have three links here okay so first one is your facebook so we have anchor tag with those href target is blank so we give a class as like a padding or horizontal padding is two and this is the image which i have it again from some link so i'll i'll be sharing this thing in the description as well so you can go ahead and copy it from there and put it inside your code okay so this will does nothing this will just give some good look and feel to your application where in future we will be implementing these three logins okay so let me save this and let me show you how it looks now can you see so now we have these three icons as well which we'll be using in future to do the social login all right now i need one um one set of a border here which says that other login or something like that okay so let's go on the on the css let's see what changes we can make there okay so there can be a changes done there so there is something called as um what what is that name content so we can put some content in in those fields okay so for that let's go inside your css through in the last and as i have added that border border top tee so here it will give a border top i'm going to give it as one pixels solid and it should be grey so this one works i guess yes correct and i'll give a position as relative okay and now you'll see a magic here so there is something called as content here so we will be using that after this is a symbol class which i am trying to use so what i'll do here is i'll put here upper content okay and inside the content we can give your or connect with okay so that parent is like relative so let's try to give it after as absolute the position absolute for this thing okay and we can just say let's try to slice the top as 13 pixel and left as 33 percent again bring it into the center and background color as white so for that we have this code and padding let's give top as 0 and center as um maybe eight pixel and let's check how it looks now okay okay let's see can you see this beautiful looking thing so this is what i was talking about so i gave a border to it the position i took it as a relative and inside that i put this content okay which i want to show so that's how it uh takes those things so can you see our login page is ready okay now i need to do the same thing to the signup page to the sign up page i will do the same thing so i need to have this outer background the same card all unlike only things this will increasing here is your forms like field values that's it rest everything will be same okay so let's go ahead and try to copy try to copy the whole code from here okay let's copy this and let's go inside your signup component and let's paste it here okay and i know there will be a lots of things or lots of errors there so we can fix them again i think we need to have the same logic here as well so let me copy those thing and paste in this component as well for now and that method hide and show let's copy again this one and paste it here so we'll try to like create some common thing so that we should not write code two times so we'll i'll try to make this thing common so yeah so we'll do this thing in the last of the video like whenever the whenever we end this video so we'll talk about some improvement in the code some good refactoring we'll see how we can do some improvement in our code so i'll do that in the last okay so as you can see we have the same content in this sign up as well okay so here i'll try to change the name to sign up okay and what else it will change so it will also increase few forms but the rest of the things will be same so we know i guess we don't need this forget password anymore so i'll remove this okay and this one i will just ask here um like already have account then try to log in already have account then login okay and we'll again change this outlink to login component so that should talk to the login component and [Music] i guess we know don't need the signup thing now so let me comment this code but yeah it up it is up to you if you want to keep it like that you can keep it or you can remove it based on your requirement and this login button will change it to now sign up because user will click on sign up to do the sign up thing okay sign up okay so i can see my login and signup form is almost ready almost so if i click on sign up so i'll go to this component okay but can you see uh it is showing so bad and this is because um the css css is not applied okay so what we can do we can copy the same whole css from here and we can paste it in the sign in this thing as well okay and now if you try to see now we have again a good looking signup thing sign up page okay but we'll try to uh add up some extra fields because for sign up we are capturing some more details correct so let's try to add those extra form i think it will not be that tough because you just need to add few fields so what first of all let's discuss what all things we are going to add in that form so we will adding first name last name username email okay so username i think this will be the last so let me copy let me copy um these two fields okay field number one and field number two so let me copy these two fields and paste it above or maybe let me copy the only first one because second one is a type password so it will be not um it will not be a good use so let me copy this and let me paste them above one two three okay so the first one is my first name second is my last name and third i'll take as email and the fifth one it will be the username and the last one will be my password so if i save them and let's check how it looks so yeah we have first name last name email username and password okay so that's how our form looks now so if i go on the signup page and i click on login and then click on sign up so that's how we have created the login and sign up page in angular okay so now um let's talk something about like i don't like it like what we have copied it right now like if you see uh both of the css are almost identical and we are trying to put it two times which is not good correct so what i can do is i can create a new css a custom css and which will be reused in in both of these things like whenever we have something we want to copy it across so we can do that so let's go in the asset folder and let's create a new folder called a css okay and inside that let's create a new file called as common css common dot css okay now what i'll do is um i'll just copy this css from the login control all copy and i'll paste inside this common css okay and i'll try to add this so let's so once we have this folder so now let's put the style.css okay and we'll try to import this inside that okay so what let me do what i'm trying to do so i'm trying to create a global css now so inside this so rather than writing in style.css i'm directly trying to import okay import that css so for importing we need to oh sorry and bring a mistake we need to have add the rate and then import okay we can put a url inside the url we can tell the path it is in assets slash css slash common css okay and now i can remove these css what i have written in the login and same what i have pasted in the sign up so let's remove both of them and let's click on save all save all the changes and now if you see we still have the same css applied okay on the login as well as the sign up page okay let me just validate this one see if this yeah this works again perfectly fine so we'll try to write like create some common logic for hide and show password as well but we'll do that in the later part of the video all right so i think it's already been um around one hour right where we have created the login and sign up page so i will not going to extend this session further so what we will be doing is so this is the part one where we will be like we have created the login and sign up page by using this uh bootstrap and a font awesome to make use of these icons okay so this is the part one and the part two let me just uh discuss what we are going to do so we will be creating not creating we will be adding the validations okay uh we will be adding the validation then we will also be using some toast messages for displaying those errors and we'll see how to install those external packages as well inside your angular application okay so till that time i would like you guys to like subscribe to my channel and also just go ahead and share this video with others as well because uh so that they can also learn this beautiful technique technology style which is angular and dot net core okay all right again if any other questions please mention me in the comment section or you can directly connect with me i'll share my uh linkedin linkedin profile or my linkedin or my telegram channel in the description box you can go ahead and connect with me and we can have a good discussion on this text tag all right so till that time bye bye and keep learning guys

Channel: Let's Program

Views: 102,111

Keywords: angular login, angular signup, angular 14 login, angular14 signup, angular html css, login page, signup page, signup using angular, .net core, .net 6, webapi project, angular project, angualr auth project, angular new project, angular 14 auth, html design, angular 14 projectwith UI, bootstrap, login page suing bootstrap

Id: R7s5I9H1H9s

Length: 59min 26sec (3566 seconds)

Published: Tue Sep 13 2022