07 Blazor PlannerApp V2 | Implement the Auth Layout & Design the Login Form | AK Academy

[Music] hello everyone and welcome back to planner app to continue with the section of authentication we have already in the previous session implemented the infrastructure of login how we have created the authorization message handler or yeah we have set the http client with its authority authorization message handler and we have set the json web tokens authentication set provider to to teach our player application that actually okay if there is an access token in the local storage then this user is logged in which is great now what you have to do yeah the same simulation we have done in the previous session when we went into the local storage and created that uh basically that record in the local storage right now we will implement the ui so the user can log into the credentials and when the token when we fit the token pack all what you do is basically store that token in there in the local storage and then let's call the get authentication state async to refresh the state of the application so what we are going to do for this session is as you can see this is the application we have right now but if the user is not logged in i should see he should be redirected directly to the login page but he is not going to see this pages without you're going to see a different layout which is an empty one doesn't have this menu button or this nav menu at all it will just be a card here in the middle contain the login box and uh the same for the register page you will keep this one so basically what you have to do is to create a different layout this is the first step then we will implement the form and then we will implement the http client the yeah the post request to be able to fit the data from um if we go back to the api documentation again yeah to make okay make sure although they are under version two because to send this request for here so let's go ahead and get started with this but before let me go to get kraken and then let's basically stage all those changes that we have over here and push them implement authentication infrastructure just like this let's click push okay i'll click force push because i already made a little change but okay yeah right now we are fine okay that's good so this is the main layout that i was talking about basically let me just comment this one so we are not going to use this something similar but as i've said it's not going to contain that left menu nav menu with that drawer that opens and closed and at the same time we are going to have the matte bar will not contain the menu icon so let's get started by going to sure to click on add razor component and then from here choose let's call it oauth layout keep the name the old name okay here it is so basically to create a layout the out is a normal component but what what is featured about it is that it had the property called body which is the body of that layout so here it should inherits and hurts like this from layout component base so right now it's a layout and could be used as a layout let me go for this one copy all of this until this one we're not going to show any dialogues or snack bar which is that those shows at the top corner we are going to use it so we will have the theme provider we will use it for the dark and live mode later on so this one without this icon and we will keep this one i will make it for now just the planner app but you will put the logo later on i will do the same over here and we'll remove the smart drawer from this one just like that cool and yeah we will keep those buttons before we are going to add like switch from dark to light mode and maybe switch languages we'll see what you're going to implement so that's good now the last thing we have to do is i don't want this layout to take the full page i will just need a card in the middle with a with a little shadow so to do this we are going to use the powerful grid within moderator so if you go for grand over here where is it here it is you can see that they have a very powerful grid so it could be used just like this mod grid mod item so this is the full grid and this is the item then you can give it like on the small screen it's like this on the extra small screens like this and so on so you can take a look at this so to learn all the stuff and regarding that card you will use a powerful another component called paper which is this one you can see this paper and then within this paper you can put just assembly whatever you want or we can use the card okay the difference between the card and the paper is just the card has a title and an action part and a content while the mud paper is just like a box with a shadow so this is it i think we can use a card over here but yeah let's first start with the design so i will add my grip like this but because i i need the content to be in the center the columns to be in the center so i will justify and i'll type justify dot center just like this now we will add the item for the on the small screen we don't need any spaces on the left side so i will just use on the small screen take the 12 column 12 columns but on the medium screen take half the space and on the large screen take third of the space just like this one and here the body actually is going to go over here so that's it this is a pretty simple now let's see if we try to add but yeah before doing this i will add just a margin from the top so margin top or we can use m t which is aggregation for m top and use the three those are a set of classes that actually already available for you by mod blazer you can take a look at them existing here if you scroll down there is the features and here you can find spacing so the reason why to use this instead of using styles so here we are just use the name of the class which already has a specific value so you are always consistent across the project not sometimes to add a pixel and reduce a pixel in your styles so if you try to use those classes as much as you can they are very similar to the bootstrap classes so now for the home page just as a test actually to make sure that our this one is working so the home page is by default there is no layout as you can see but the default layout is mainly out and that's basically defined in blazer here in the app.tracer if you go you can see default layout equals main layout but if for example i said for the index page only i want to use a different layout which is oauth layout so just use this at layout the syntax over here and it's going to work so let's see how it's looking like yeah blazer increases your productivity too much but you have always to make sure while while we're doing what we are doing actually right now always keep in mind that to focus on the laser concepts to focus on the web concepts and not to focus on mod laser stuff because we are using your mod blazer just to speed up the development and have a cool eye but in many cases sometimes you'll you'll have to build your own components your own ui i will go in this direction and there's going to be another series that like very soon called build the full custom ui custom components in blazer you will build all those components but you have to concentrate on learning a blazer and generally the web development in general the client side stuff for now and not mud blazers so don't take this grid like as a something okay it's good it speeds up the development as i've said but maybe you there is other ui components like and design and there's going to be many in the future because the blazer is growing and growing so keep the focusing on the concept of web more than those little stuff over here so try not to be 100 tied for this so as you can see this one is working very fine like you see it's right now in the middle and the big screen if we go to the medium screen so it's taking right now half and if we go on small screen it's going to take this one which is exactly what you are looking for that's great so let's right now implement the login page so i'll create a folder here called oath or authentication let's call it authentication and within it i will add log in the tracer or just login okay this is the page of login and over here we should add layout auth layout and then here we should add the router of this page which is slash authentication slash login now let me go back to the index page and remove this one get it back to the old one save okay that's great now the login component will go over here but i will keep all the pages empty and i will create a folder over here and i'll call this folder components components and here i will create a set of all the components available here so we can use it in other places and not to put it directly in the page so the page will just be a container for other components so and over here i will create also another folder called authentication and then here in the imports i will reference namespace called components only components i think more okay good so here there's going to be a component called login form login form so this is just the form so you can embed this component in any other page while this one is just the page or let's say this is the end point on the client side for for this component and i will create a class file which is the code behind file not to write the c sharp code within the razer right now blazers support their partial classes so there is no need to mess the codes together make a big components always try to keep it as small as possible so to create that give it the same name login form the tracer dot cs so it's going to be attached here in the behind and if you click f7 you can be redirected and over here make partial login form and it should be inherit from component base just like that so in this folder i will have components authentication blends items and so on so in do not have a namespace for each one because you know in chart which folder is a namespace what i'm going to do i will remove this one so i can access all those stuff by just for liner update components then i can have access for it so this folder just for organizing the components usually in big projects you will have a lot of components so it doesn't make sense to have a namespace for each one and over here if i go for this one you have always if you remove the namespace from here you have also to set the name space for this razor because at the end the razer file is a class it's just a normal c sharp class like it's being translated behind the scenes into a class that actually just like the normal class you see so namespace its namespace is blenderab dot components and that's it it's pretty simple that's good great so now when we the login form is basically it's going to have a model of login request let me go to shared responses okay we don't have right now this response so i'm going to go ahead and create it so i'll click on add to this class and then i will say sorry login request so i will know the login request if i go over here i can see that this is the login request it has an email and password so i will create that now what about validation basically in validation we are going to use for this the data annotations but i will also use the fluent validation in uh in the register component so in this case for you you can you choose the one that suitable for you fluent validation gives you more control gives you localization but for some concepts when you are your components are not that complicated they don't need that very advanced validation and you don't need localization this one is much simpler and easy to use and here it is required and string length is six at least which is good okay this one is also required so for this i will use data annotations but for the other one i'm going to use fluent validation and youtube the one that suits for you so let's save this request and right now that's great now i will switch to the code behind file and over here we will inject public http client http client this is how we inject in the c-sharp code here you know that we inject using inject keyword but if you are in c sharp you can use this one not the constructor one and we don't need any parameters what we need is actually private local request okay we have to mention the shared project over here or it's and project reference shared okay maybe i remove this sponge steak good so model this is the model of the four whatever it's going to be a new one and okay now this is just enough for to design the form let's go ahead and start the design so to design this form i will put it within a card so what is the card this is and i will pick we can go ahead with this card for example so as you can see or another one we can go to form here forms forums forums yeah and choose form you can see some cool design like look at this one this one looks good maybe we can you can do this one yeah so motherblazer has had their own form actually called mud form they have their own implementation i'm not going to use it as i've said not to be tied for my blazer we are giving you the edit form the traditional one existing out there but we are going to use their fields so let's take this design as it is so it's basically edit form okay let's start first with edit for which it deforms in blazer and forms always has to take a model or you should pass something context but we'll use the model which is the model that this form will submit and it is in this case model which is this one over here and here on valid submit like after that the user submitted this form and it's valid there is no issues what's going to happen actually what's going to happen is to call this function private async task login user racing through new not implemented exception just for now so login user async on valid submit okay that's great this is the form now we will have the validation which is we should type the validation which is data annotations validator so once you add this one actually then your form before it's getting submitted it's going to validate the content or this model that you have here against the model that's actually the type of this model so again those annotations that's available for you over here which is great so after that now let's design it and actually let's go ahead and see what they have over here so they have the smart card mod content and they are just adding this one and then okay i will type them so we can follow one by one so mud card and then it has a mod content card content okay sorry and over here it has a mod card actions and in the mud content it has a mod text field so that's good so it is straightforward mod text field label equals help email text for example test at plannerapp.com and sorry for the helper text we should type required for the placeholder we will type test planner app.com and add bind value which is this will bind the value of this field in to the top property within this model and this one i'm going to say model dot email so whenever we write anything in this in the value of this input it's going this value will be bound for this email and whenever we set a default value for this email it's going to be shown in there so this is a two-way data binding and i think this is everything that we need now let's go ahead and create another one okay just like that but this one is going to be a password input type equals input type dot password this is the only thing that you have to change password helper text required that's right there is no need for a placeholder for the password let's find this one two dot password just like this that's great i think this is our form it's going to be very simple and easy now within the actions let's put the button actually they have over here which is this button so i will take it to the end and i will paste it here that's great so this is it now i will call this one login that's great and we need actually another pattern filled the color dot secondary and this one will be create account so this bottom will redirect you to the create account page but this one will not submit the form okay that's great and let's add a mod card header and within this header i will go to mod card called card over here and it will set this text and copy it so whenever you want to type any text like you use mod text like this and then you type typo type dot then here you have all the options yeah mod blizzard is very very organized so okay welcome to planner app with 2.0 which is great so we have a nice component right now it's not functioning but let's see how it looks like if we go to the login page over here and i just as you can see all i have to do just to say login for and i'm done look at this this is very gentle actually and we already have a slash authentication login for this one so everything should be ready for us just to implement the functionality of that tick so let's see there we go here we go here we go let's go to slash authentication slash login click enter oh look at this actually is just great you see that but because here we have a placeholder this one we don't have this animation and actually i'm going to do it i'm going to do it i will uh i will remove the placeholder here we didn't see that text actually that says welcome to planner app interesting if we click on inspect element why we cannot see it is it here somewhere yes it's here but it's empty that's cool if i go back okay mod card header then we should add it within a header card content okay that's too much okay then within the market there was say card header content then we put this one like this actually if you want to switch the line this is just a handy click alt and top bottom or top so you can move the line between or switch the lines which is just a quick hint so yeah i think yeah right now we are done but here we should just also switch those buttons like this so the we need the login to be on this side and the create point on this side let me see okay again here we go yeah this is much better right now we have a need for yeah again just forget to remove the placeholder of the email because it's an email everyone knows what email means and yeah for those buttons i still don't don't see them like looks that good so actually what i have to do over here is let me check what they have yeah i need this design i need exactly this design so all i have to do is okay cool let's remove this margin left o2 class from here and here let's put this one at the top and this one will be filled while this one i'm not going to use filled i'm going to use outline okay that's good so all the focus is on the login button i think right now we are ready to go but one one more thing we need to change which is in the body or in the oauth layout like i thought that it looks so big so this is why i'm gonna make it take three and this one going to take four and on the small screen let's keep it for 12 which is that's fine so right now we are done from the design now the next step is to click the login pattern and then fetch the talk to the api feed to the data put it in the local storage and do the magic of the login which is okay this is much better than what we had at the beginning as you can see okay just we add this little space over here and we are done so and to do that what i'm gonna do just type a class m1 like margin one or yeah i can add margin right one origin left one sorry okay so this is the space now we are done from the design everything is great let's go ahead and submit this to [Music] create the oauth layout and the login form and let's push okay that's great that's great we are moving very well on our clean steps so i hope you got the benefits out of this and right now you know what is the old layout what is mud blazer and text filled you know those some components existing mod blazer and data annotations validator and what is it for you're going to see the the rest of this stuff in the next video thank you so much for watching and see you you

Channel: AK Academy

Views: 2,399

Keywords: Software Development, Visual Studio, Xamarin.Forms, C#, .NET Core, .NET, Microsoft, Programming, AK Academy, Ahmad Mozaffar, Blazor, Blazor WebAssembly, Web Development, Visual Studio Code, ASP.NET Core, Desktop, Window, Windows 10, Mac OSX, Linux

Id: NczsigNQUGY

Length: 27min 38sec (1658 seconds)

Published: Mon May 31 2021