Angular 17 standalone - sample project using .NET Core API with complete access handling scenarios

Hello friends welcome to my channel hereis in this video let me share one realtime mini project access management system it's developed by using angular 17 Standalone template andet core vapa and that covers below topics the first one is user registration with OTP validation and the second one is login and JWT token handling and the third one is dynamic menu creation by ro based access and the fourth one is password handling that includes reset password and forget password done through the OTP validation and the fifth one is implementing role based authentication and the final one is admin screen that includes the user handling and assigning role based permission so in this user handling point of view uh admin can change the user role and also activating and deactivating the user okay so next we can see what are the items we have used for the technology perspective so the first one is APA uh we are using net core web apaa for this AP creation also I have done the separate video I have included video link in this description and also the source code and the database script all the links are I have included in this video description okay and then angular point of view as I mentioned we are using angular sound in Standalone template and then for showing the alert and notification I'm using ngx toaster State Management point of view we can use the angular signals finally for the designing point of view we used angular material eway okay so before going to the implementation let me provide one demo so that will give some clearcut idea what we are going to implement in this video okay uh this is my application currently we logged in using an admin user so let me log out first so since I'm a new user I don't have any credentials so using this register option let me register so the username ENT user password point of I'm just providing test so let me submit now we got the failure messages registration failed due to this duplicate username okay that mean the username already exist so we can provide ENT user one see so the first level of registration is done validate the OTP and complete the registration okay so basically we will get the OTP in our mail so in case if I'm entering something wrong value it won't accept invalid OTP so once I'm enter the valid OTP see registration completed successfully so now we can log in here so if I'm providing invalid credentials it's saying unauthorized okay so now I am the new user I able to log in see here the two menus are loaded one is the reports and another one is the customer so if I'm going to the customer I can see some grid okay so next I'm trying to change this password by using this reset password option so the first input is our username ENT user one and then old password Test new password I'm providing test one okay so in case if I'm providing some old password as wrong one it's saying fail to validate the old password okay so now it is saying password changed successfully please log in using the new credentials so next we can do this forget password option from the login screen itself we have this forget password link once I'm clicked we have to enter the username into user one so once I'm click this submit for this scenario I will get the OTP text in my registered email again we have to provide the username and the new password so let me provide a test to and also this OTP text so if I'm providing invalid OTP text it won't agree invalid OTP okay once we provided the correct one it's saying password changed please log on using the new credentials now the password is test two see again we have loog okay so this uh reports and customers are loaded dynamically I will show you so before that let me show you the admin screen so let me log in using the admin credential for the admin point of view we can see the two new menus one is the user and another one is the user role so if I'm going to the user section we can see all the user information okay what's their email phone number and current Rule and the status also so we have created this CN user one okay so now what I'm going to do let me try to uh change their status So currently it's in the active mode so if I'm just removed and saved then the user got uh deactivated okay it's in the inactive mode so now if I'm trying to log in using the same credential in user one and test two see failed to log in it won't allow okay you see so I'm trying to activate once again so hopefully the user can login now and the next thing is rooll so the current role is uh user okay by clicking this button uh admin can change the role also so let me add us the staff okay it's done so next we can see how to assign the menu permission B on the rule so this is the screen uh in this initial drop down we have loaded all the roles so this data also coming from the database only so if I choose the admin so in this bottom we can see all the available menus okay so again this menu also coming from the database in the dynamic manner if you want to include any of the new menu we can include in the table itself okay see for this admin role they have the complete access if you're taking this customer they have the full access like they can view add edit and delete so if I'm choosing this staff so in this staff also uh they have the full access okay for this uses have just a minimal access they have just a view access only okay so currently our newly created user having this sta rule only so let me log in one second again using our uh new credential test two so if I'm going to the uh customer screen I have this add option by clicking this add we can create the new customer and the same way I can do this edit and also this uh delete it's just asking for the confirmation at the same time for this stuff I'm just removing this ad and this delete access okay so again we can log in once again test two so see the add option is removed and we have this edit edit is working fine at the same time if I'm clicking this delete also it's saying unauthorized uh user don't have an access for doing this delete operation so this is the way we have implemented this role based authentication not only for just menu we have done for the individual functionalities also okay okay we have completed the demo the next we can focus on the implementation first let me create one brand new angular application so let me provide the name is authentication app we can use the CSS and D SSR not needed now once it is completed we can install the required packages so the first one is material uway so as I mentioned the designing point of view we are going to use the material components only so this is the command we have to install it okay the application is created let me open in the vs code okay we have opened the application and the next thing is uh we can install this material uway already I have copied the command so we open this new terminal we can execute this command so whatever commands I am using in this video I will include everything in our video description okay okay it's saying the available version is 1.3.2 it's the latest one also we can install that okay it is asking to choose the theme we can choose the default one Indigo pink and then this typography Styles yes enable animations okay so let me execute this ngx toaster also so the installation gets done let me run this application so after that we can include the recorded files okay application in this running mode local ghost 420 okay this is the default template only so next let me create some components gen generate and component so the first one is home and the second one is uh register and the third one is login and the fourth one is confirm OTP and then app menu so initially we can have this uh components only after that based on the requirement we can include the additional components okay so the same way uh we can create the services so let me provide the name is user okay the service also got generated okay the service also generated so we can see so in this app folder we can see the components and also the services okay so next we can do some initial setup first let me start for this uh material UI we can create one common model okay so let me provide the name is material model NG model from this angular core and in this export section so here we can include all the required models okay and the next thing is in our H config so the router is included provider providing animation also included and then we can include this provide HTTP client and then the toaster point of view provide a toaster okay and additionally we can include one property we need an close button okay so if you need more details regarding this toaster or material way I have done the separate video so that link also you can see in this description so the next thing is we need an environment so let me install the enrollments also en generate environments okay okay now it's fine uh it's generated the environment files also we can see in this folder here we can provide the AP Bas so our AP also in this running mode so let me take the base URL I'm added it here so the same thing we can include in this Development Area also so if needed you can change the values for the different environments so next we can move on the routing side so here we can register our components so the first one is home component so this is the default one once we register we can directly login into the homepage and then register next to login then confirm OTP okay we have done and in our app component site except this router Outlet we can remove everything see homeworks it's coming from the home component for this register also it's coming as the home let me verify yes the mapping is not correct so now it's fine so first we can start the formity from this registration so what I'm going to do let me initiate the form so in this TS side first we have to import this reactive form model okay since it is the Standalone template and then we can have this Constructor here let me inject the form Builder and also we need to create the model file so we can have one common folder for the models so the first one is for user registration I would say user model so the fields we can get here from the AP itself so this is our APA for the user registration so it's having five Fields so we can include all the items in our interface side [Music] string then name email phone number and password and password okay the model is fine so next to defining the form so the first field is username so the data type is string and we can include this validators requir and also we need to set the minimum length is five so let me include two validation by using this valid validators do compose option and then password and then confirm password the name email and phone number okay so this is fine so the next thing is uh we have to focus on the designing area so since uh we are going to use a number of material uway components so in this common material uway model we have to import all the required models so again this also a kind of onetime change so let me include all the models one by one so the first one is MAT card okay so the same way I'm importing all the models one by one here is the only trick is uh it's all about the component names and the model always start from this mat and then the component name end within this model okay this is the format for all the models so this match checkbox model so this m page add sharting uh part of the table and then this uh dialog component used for showing the popup and the final three are used for displaying our menu G included uh this m menu only showing error let me verify the Comm is missing that's fine so next I'm going to import this material model the required areas so since we started from this uh register let me import this one material model okay so next we can move on the HTM side so here we can remove the existing content and then adding this form here I'm using this form group so let me copy this form name and then we can do the even bending okay and in this form we can include the mat card that is for the better design and in this card we can have the content also the header and also m card actions so in this header we can include one hon tag user registration and in this condent side we can include all the form Fields uh M so our first name is username and we can have one input control for making this input element into material U element we can include this smart input directory and the final one is f control name okay and this field is created for this uh username so let me include so the same way we can include the other fields also password and then confirm password next one is is email and then phone number okay in between we have missed one more field that is the name okay we can move this into after this usern okay okay the design is not fine so let me include some static classes in this application style. CSS so already we have some default Styles so after that we can include some static Styles so the first one is MAT card for this MAT card see know so the box size is reduced so next we can apply for these controls withd is 98 percentage and the margin is we can give one percentage see now now this is fine so username uh name password confirm password email and phone number we can do some more alignment so let me include one more class and the margin is 1 percentage okay so this class we can apply for this password see now okay now it is silent fine and the next thing is uh we can include the buttons so in this mat actions I'm going to have two buttons type submit and the name we can provide register okay and it is the m button and the color is primary okay and we can move this button into one of the DU and in this du we can include one more class D50 so let me Define this class also now this is fine for making this button into uh full row again in this style section we can include this matm DC raed button okay so these are the default classes from Material uway actually we are modifying this class now it is fine and we can have one cancel button also just copied this one and instead of the button let me Mark this into anger tag I would say back to login you can just navigate using this router link and here the very important thing is this router Outlet is not the known property of this component so we have to import this one router link so let me save this one this color we can provide asent okay now this is fine see the validation also working if I'm click this back to login it is redirected into our normal login page okay and the next thing is we have to get the values from this form then we have to pass to the services okay so what I'm going to do in this TS site so already I'm defined this proceed register function so here we can write our Logics first of all checking this registration form is valid or not and the we can create one object here and the data type is user user registration I believe maybe let me check yeah it is the user register first we added all the default values the next thing is we can get the exact values from our form and then assign one by one so the same way we can do for the other fields and the next one is name and then phone and the fourth one is email and the final one is password so here we have this confirm password that is for the application Level validation only okay so now let me save this one and the next thing is uh we are going to use the services so already I have created one service the name is user Services here let me inject the HTTP client and the function we can write the base you are relas we can get it from the environment file AP okay and this is the post method first thing is we need to pass the URL okay and we need to pass the data and the data type is user register okay now this is fine from this base URL okay up to this AP only but the exact URL for this registration we have to include uh this user SL user registration so maybe we can just try by using this dummy values see so basically we will get our response also like this so we can copy these things so now the service set is completed and again let me move back to our component side so since we have this valid data first I'm injecting the service here and then declaring one response variable so whatever response is coming we can assign this into right okay and here we can check l here we can expect two scenarios one is success and another one is the failure so in this failure scenario we have to show the uh error message for showing the salid as I mentioned we are going to use the toaster only so let me inject the toer also it is the other first one is failed and due to the reason we will get us the response and the title we can see registration field okay and in this success scenario we can show this notification so the text message we can say validate and complete the registration okay at the same time we have to navigate this into confirm OTP screen for doing this navigation the router is needed so let me inject the router also so the URL we can get get it from our routing site okay this is fine and also we can put this response into the console so we can try now so let me provide some values so let me include the type also password okay now it's fine so let me save this one okay see the response so we got our result is pass so the initial level of registration is completed and then we got this message one 03 uh this is nothing but our generated user ID okay it's needed for the future transaction so let me keep this in the notepad Okay and the next thing is we have to enter the OTP text so that we received in our mail and also we can check in our database side see for the test user the OTP text is something like this okay okay so let me implement this confirm OTP screen and one more thing I noticed the popup also it's not showing very clearly it's shown but it's closed uh but the designing is not good so the reason is uh we have to import one CSS that I missed let me include that also so in our angular.js site so in this style section we have this style. CSS and also this material U CSS and additionally we have to include one more CSS so the path we can get it from the node site itself INX toaster okay we can copy this one okay just included so since we are doing some changes from this angular JSM we have to rerun the application so parall we can start the designing in our OT p screen so in this confirm OTP component we can remove the existing content so as usual I'm adding this m card so in this m card content point of view uh we have a only input field that is for getting the OTP text and in this control I'm not going to use this uh reactive forms so I'm just removing and this type also not needed okay so instead of that I'm going to use the two-way banding so let me import this form model and also using this uh material U control so we need to import this material model also okay and I'm using one variable OTP text okay so this is the string and the default value also empty and then we can include the Constructor and this we can inject some of the common items okay and then router and finally services this is fine and in this bottom we can have the button also so the designing point of view we can use the same items okay so instead of typing every time we are just reusing the things and here this class is not needed so cancel once it is cancelled again it will go to the register page only and in this button uh we can say confirm because we are confirming the OTP and let me bind on event let a click event okay this is the function name so let me Define it here so the next thing is uh we have to work within services so in the service point of view uh we supposed to use this confirm registration option it's expecting three parameters okay user ID uh username and OTP text so let me create one model class so we can copy these all the items so we can use the existing uh file also for the real time scenarios uh we can have a separate files so since we are using the same Logics I'm just reusing the existing files okay so there are three Fields so the first one is user ID and the data type is numeric and then username so this user ID uh basically we will get us the response once we did the initial level of registration okay this is the value and then username uh that we already provided the part of registration the OTP text we will receive from the mail and also we can get it from this uh table for the development time so now the model class is fine so next we can work within services confirm registration here the data type is register confirm and the URL need to change so we can provide these values okay anyway the record is created so and we have this wordp also okay once it is done uh we will get a response like this so let me take this Ur also now this is fine and let me go back to our uh component side so from this component point of view we are able to get this VP text okay uh that also let me confirm so since we applied this to a bending obviously we can get this value okay so we are able to get this value and the next thing is this user ID and also the username so it will be available in our registration component okay that we need to pass to this OTP confirmation component so in that scenario I'm going to use the State Management concept signals so let me go back to our register component and in this area only we have to include the change so before that let me initiate one signal variable in our service site okay in this user Services I'm just assigning one signal variable so register response using this signal variable and I am setting this data type also register confirmation then we have to include some static values okay uh next in our component side here I'm going to to declare one object okay register confirm so here we will get this user ID uh from this so we going to add this uh user ID value from this response the object name is message and the next thing is uh user name that we can get it from this top of the object okay I changed this object name from here we will get this username the OTB text we can keep it as the mty from now so this is our actual signal object using the set variable okay now this is is completed and the next thing is in our confirm OTP component site so in this component first let me implement this NG on in Hook and then declaring one variable and then we can access the value from our signals here whatever data we had in our registration component that also now available so additionally we can include this OTP text also the OTP text is nothing but our value okay so now our object is ready and the next thing is we can call the services confirm registration and then passing this registration response and just to declaring one more variable so whatever response is coming we can add it here from this object we will get a response like this r s and messages so here we we can just check like this result if it is pass only uh the process completed otherwise we can show the failure message and any exception also we will get from these messages okay so let me copy this one if it is pass then it is the success scenario we have to show the success messages the text is registation completed and the header point of view just a success that's enough okay and also we need to clear this signals value so again we can use the same okay by using this set option I'm just resetting otherwise the world data will be available for every time okay once this is completed uh we can just navigate this into our login page login so in between if there is any error we can just show that error so let me copy the same this is the error registration failed we can say failed due to message okay so let me save this one there is no error uh we can do one round of testing why this cancel is not working okay the router link also need to be imported now we can do one more round of registration with the complete OTP uh verification that is test user one so once I'm clicked this register okay okay it's saying validate OTP and complete p and complete the registration so the color actually I need to change so anyway we I can complete this OTP from schy so if I'm checking in this table I got this OTP okay see the registration is completed successfully okay the credential we used this test user one and the password is test so this is the one we are going to use in this uh login page also so before that uh in this registration page the alert came in the red color right so for that let me verify okay it should be success okay anyway the functional is working fine okay next we can work on the login page again here also I'm going to use the reactive forms so let me import this reactive form model and then the controls uh we can use this material controls so importing this material model and doing this navigation we should import the router link okay that also done next adding The Constructor and again in this Constructor uh we have to inject some default items like a router toaster and also the services so the first one is form the F Builder and the second one is user service we are just importing that's it okay so now we are good to go and the second thing is uh we have to initiate the form so it contains two controls so one is the username and we can just include this required validat only okay so the same way uh let me use this password also okay now this is fine and then writing on function proceed loging and then designing point of view so whatever design available in this register screen we can copy everything and just adding in our login screen okay so after that from this form so instead of the register form we can use this login from there add then this function proceed login so the function is added and then the title is user login and the control point of view we can have this username and then the password okay so in this password I'm just removing this class so other fields it's not needed so we can remove everything and in this button instead of register we can say login and the next link is sign up okay we can change this link into a register so let me save this one see the screen now so if I'm clicking this sign up it will go to this register page okay the designing point of view it's fine so the next thing is we have to call the APA so the APA is this generate token so it's expecting uh username password as the input so if I'm giving test to user one credential is the test it's generating one token and also it's returning this rooll so let me take the same Ur we can start our changes from this service side proceed login okay and the input data is uh it's expecting two parameters in this object format username and password so let me Define one class not a class just interface okay next in the service said I'm changing this model other things are fine only and this response we will get three items okay so I'm defining one more interface so we can add this into our service head also L response so next in our component side first I'm checking whether it's having this uh valid records okay if it is valid only we are proceeding and then I'm creating one object the model is user credential the first one is username this value we can get it from our login form string so the same way we can get this password also next we are calling the services proceed log in for getting this response uh let me declare one variable so once we got this response uh we can include this token into the local storage so actually we can keep this value into signals or ngx uh the thing is once we refresh the screen the data will gone okay so that's what we are keeping in this local storage so the same way we can add the username adds the user role so usern name we can get it from this object itself okay once everything is done uh we can simply navigate into our homepage I just format if there is any error in this login scenario we can get using this uh error option so in this scenario uh we can show this select message okay the reason we can give us the title okay so let me format this one so if I'm providing see it is redirected into the homepage and we can see see now we can see this uh token and username and also this user rle okay then our login functionality also success so at the same time if I'm providing some invalid value test user one I just provided the invalid password see it's failed to login uh we got this unauthorized access also okay and the next thing is uh we are okay we are in this homepage so here we have to load all the menus in this Dynamic manner so once we logged in we will get to know our exact user role So based on the user R permissions we have to load all the respective menus okay that is our next work so first we can see this C apapa get all menus by roll so the default role is user only okay so this user have uh two menus one is reports and another one is the customer okay using this APA we can load all of our menus in this Dynamic manner okay so let me copy this one the function name is load menu by roll just copy and it is the get method and we can remove this one and it's having one parameter R and the data type is string just format okay and the data we will get just code and name okay so let me declare one more interface so in this response point of view okay the AP is fine so next we can work for the menu so already we have created one component for having the common menus okay this is the app menu component okay so again in this component also this material way model is required and having the constru constuctor so in this Constructor we can inject the services and also router and then implementing one hook okay NCR we can call our APA and then declaring one variable menu list and in this NG on uh we can call the services so for that we need an user role user role already we have included in this uh local storage one be logged in and I'm calling the services load menu by roll okay so whatever response we are getting from services that we can include in our menu list okay the next thing is we have to bind this value into our UI so in this UI point of view I'm just removed this one so here first I'm having one D tag and then using mat toolbar the color theme we can use primary and additionally adding one class and adding the application name and then we can use this app menu in our app component so it's having the router Outlet okay and what we can do this router Outlet also I'm just moving this into our app menu so since we are using this router Outlet here let me import this router Outlet also okay and inever app component side I'm using this app menu so that also we have to import it see now the error got resolved see we have our menu like this okay this is the top menu and let me include the side new bar also for the na bar uh I'm using the m r control okay and including this identifier and opened true mode side position start okay so inside that I'm using Matt na list and then Matt list item so inside that we can have our static menu the name is home okay and let me include one icon also okay okay wait it's not included okay we have to include this list also okay the exception got resolved okay now this is fine so once we added this static menu we can include this uh mat tryer content so in this uh Mater content so here we can move our router Outlet okay so before that let me include one more de okay and in this St of the menu let me include one more icon and in the click event okay it's just a moving uh this designing point of view let me see that okay we have to include this mad button directory and also included this router line it's defaultly navigating the homepage only and since we are using this router link obviously we have to include the router link also here okay the static menu is fine so the same way we can generate the dynamic menus also let me copy this variable and then we can use the for Loop so here only we are generating all the menus and we can keep the same icon and the text item. name and in this router link right item. code okay okay it's added so we did we did the code changes uh but it's not reflected so let me verify 4 not4 let me verify from the service side there is the spelling mistake okay see it's loaded fine so the icons also uh if we mapped different icons for all the menus that also we can dynamically generate So currently we just provided the hard code value okay that's what it so that's what the same icon is coming for all the menus and the next thing is even if I'm clicking reports or customer it won't work the reason is we not gener any components and also we not mapped anything in our routing site so what I'm going to do let me so let me create one new component for this customer then we can map in our routing site and see whether the navigation is working or not okay I hope it will work so the same way I'm generating two more components one is for user and then forget password and then reset password and the final one is update password okay now this is fine so let me map all the common also in our routing side the first one is forget password so from this forget password uh we will have an update password screen also and the next one is reset password okay so now we are good to go so now if I'm clicking this customer oh it's not working it's a customer let me see now oh item. code so actually it is not the it's not on property binding so we have to use like this see it is changed okay the routing also working and we have generated the menus also in the dynamic manner so I'm having one more credential it's a admin credential see now so now it is uh loaded for all the admin screens okay again if I'm refreshing the data will be there even if I'm going to the login page so what I'm going to do let me clear everything so whenever we reached in our login page so now if I'm trying to login with an admin so we logged in so after refreshing only all the menus are showing okay so the reason is the initial time when the component is loaded it don't have the data for this user role okay that's what nothing is loaded it is empty once we are logged in we are adding user role values into our local storage at the same time this trigger not going to execute okay when I manually refreshing the screen obviously this commment is loaded once again this time we have values in our user role obviously we loaded all the menu list okay uh but it is not the good practice so handling this scenario what we can do whenever we are logged in automatically we have to call the services okay in our login page itself before navigating this into homepage we can call the services okay at the same time I'm declaring one more signal variable in our service site so I would say menu list okay and the data type is menu it is the array so the default value we can put as the empty okay so this is the first step and the next thing is so in our login component side we can call the same services load menu B rule I'm just passing the same user rle okay and the next thing is whenever this signal value is changed we need to fetch this menu information so again we can go back to our app menu okay so in this Constructor side I'm going to use the effect option okay so in this effect site I'm going to assign values into our defined menu list this time I'm getting values from our services so now the thing is whenever user logged in obviously we will get the user Ro based on the user Ro we can fetch the complete menu and then we are adding into our signals from this signals we are getting this value from our app menu okay but again you may have the question then why we have included this much of lines so these codes used for whenever refresh is happened if uh so if you are doing any manual refreshing or application this should be helpful okay because whenever we are doing the refresh the signal should be reseted okay so in this case uh we can use this codes okay let me save this one and can verify actually we have to provide the log out option but now we can see it it's loaded immediately without refreshing it's loaded okay this is fine the next thing is we can provide the log out option and also reset password so let me go back to the HTML side in the top section we already added this application title after that we can include one more new button and then adding this m button direct here then adding one icon arrow down okay and actually making this is the uh menu list so we can use this mat menu option here my first option is user profile and the direct is mat menu item the same way I'm including two more linkes one we can say it is the log out and the other one is reset password okay and here we can use the router link link and in this router link let me include this reset password we already created the routing for the same way in this log out time I'm just redirecting this into login page okay so next in our login page also the initial load time so we are just clearing this local storage values and also here we can clean this menu also menu list so initially it should be empty so let me [Music] run so we can see the output now okay okay I is coming but the menu is not showing so in this case I'm just adding one identifier and provide the name is profile and in this button you can include this m menu trigger for and here we can use the same directory okay see it's fine and also we can move this into right side so doing this one let me include one span tag and adding one classes okay so let me Define another style side okay now it is moved to right side and also we can show the logged in username also again in the same app menu component side declaring one more variable login user okay so the default value I provided empty and just copy this one adding this as the span tag okay and we can assign value in this do check time we can move this into bottom so in this do check hook we can assign the values from our local storage now this is fine and the next thing is what once we logged out uh we are in this login page screen right so in this login page and also this uh register page there is no need to show this menu we have to hide everything for doing this one let me declare one more variable that is show menu okay the default value should be false and in our HTML s let me use this if if it is having the value only we have to show and in this Els scenario just to bind the content from our loaded component okay see now it will be like this so in this homepage it's supposed to show for that what we can do in our component site already we have this NG do check here I'm going to create one more new function set access okay so in this function I'm trying to access two variable one is our user role so that we can get it from the local storage and the next thing is uh we should know the current URL so the current URL we can get using this router okay so once we have this we can just check if the current Ur list register are login then the show menu is false okay and in this Els scenario it should be true so we can call this function in this do check you know it's showing so in case if I logged out now it is fine so in this register page if I'm loging within this test user see it's loaded The Limited menus reports and this customer okay the menu point of view now we are good to go then so the next thing is we can work for this reset password so in this reset password also the menu is not needed so let me include this one also our condition check can use all three triple equal to now this is fine so in this reset point of view uh let me show you this APA so in this user section we have this reset password it's expecting three parameters one is our username then old password and new password so as usual uh first we can create our model I mean this angular point of view it is the interface so I'm just reusing the existing file and creating one new interface data type is string and obviously we can work for this uh service side and the data type is reset password I believe this is the first method only we can remove this response type also and the next thing is we have to change the url so let me try now okay this is our actual URL and we have to pass this data okay now the AP is fine so next in our component point of view we have to do the design changes first and also parall we can Define this form so we can just take the register screen as the sample okay first we added this one we can resolve all the issues one by one okay first implementing this on into hook and importing all the items one by one the first one is form buer then user service then this toaster service a router okay and in this form point of view reset form the first one is uh username that is fine but in our point of view uh we can have just a single validation okay just importing this validators and required and the next one is password and the final one is new password we can just remove the other things and in this method also so proceed change maybe I can give the steps are same only uh we are just checking whether this form has the valid data then we can create our one object okay reset password okay old password and a new password so then we can change in our form also World password and final one is new password okay so now we have this object the next thing is we have to call over services so the next once we called the services we will get the response if it is pass we can say like what the text is please login with new password so in this failed scenario we can say reset password failed so if everything is fine we have to redirect into our login page okay so these are the changes from the HTML side I mean in this TS side so next we can move on the HTML so in this HTML point of view so again I'm just copying all the codes from our register side and just added it here okay so the first thing is uh we have to change the form because the form name also got changed and then this function the function name also I just changed and this is reset password and the fields are username this is fine and the second one is old password and the third one is new password and other fields are not needed we can remove everything and we can have this buttons the first button text we can change into update and the second one we can say cancel so it will go to our homepage itself okay I believe we are good to go all and there is an error it may happen Okay so in this import section right we have to import this material model and we are using this reactive forms and the next thing is we are using the router link okay first of all let me log out test user and the current password is just a test okay so if I go to this reset password so in this username field actually we can hide this one okay at the same time the value is needed no need to get the values from this form so instead of that we can get it from the local storage now this is fine and let me provide the old password is test and the new password is test one there is an error so this is not implemented and here I'm just removing this field it's not needed and this one also we can command it okay let me try now so the old password is test and the new password is test see password changed please login with the new password so now we are in the login page so if I'm loging with a new password if I give just a test it won't allow so if I'm providing the new password test one it's logged in so again I'm trying to change this password so this time if I'm providing just test okay actually expected Valu is test one but I provided just a test see failed to validate the old password that's what it is simply blocked so if I'm giving this correct one see now it is got changed okay I just logged in using the new password this so this user profile we can Implement later time so currently we finish this reset password and also this log out so next let me implement the forget password option okay first we can include the forget password link here so let me go to our login component I'm just adding one du tag inside that I'm adding one link okay forget password and again this one I'll say mat button color we can use primary and adding router link and navigating this into forget password see the response now the link is included once I'm clicked so it is redirected into our forget password page so in this forget password page also uh these menus are not needed we can include this also in the condition State okay it's got removed so in this forget password screen uh we can include only one text box so let me go to the design so the design we can get it from our OTP confirmation so both are almost the same design the first one is title it's forget password and the input is uh the username okay so here also we can use the same toway bending okay just proceed that is our function name so in this cancel uh we can redirect into Lin page okay so next in the HTML I mean this DS side we can import the material model first and since we are using two-way bending we have to import the form model and this fion we need to Define uh let me copy the TS side changes also then we can modify based on our requirement okay I just copied all the code and included it here and we added the router link then this then this router link also need to be imported instead of the OTP text we can say username that we are using in this two bending and the function just proceed we have this CNG on it and this register response it's not needed toaster service needed then this router also needed the user service okay I think this s on in also not needed okay so in this proceed section actually we have to call over APA so we can work for the AP first okay so our AP function is forget password actually this is the get method so if I give test user one so basically it will send an OTP okay so let me copy this AP URL and we can use the same user services so the idea is uh first AP will send the OTP in this uh next AP we have to validate our OTP at the same time we can give the new credentials okay that's our plan and this is the get method so we can use the same pattern user SL forget password and this one is the parameter usern name okay so next in our forget password screen I'm just calling this API forget password and here we can pass this username so whatever response we are getting adding the we are adding this into our response s and if it is fast we can say OTP send to the registered email okay and the next set of code is not needed and we are navigating this into update password screen so let me verify from our app routing side yeah it is the update password okay initially we are in this login page once I'm clicked forget password so we need to enter the username I just provid a test user to okay it's saying invalid user because we don't have a user like that so if I'm giving test user one see it is saying the OTP send so we can get the OTP from our mail the same time we can check from our database itself okay this is our OTP so the next thing is we have to validate the OTP and also update the password but doing this one uh we have another function I mean the AP function so it's having these all the fields we have to pass usern name OTP and the password okay okay here the thing is now we just navigated into our update password so in this update password also we should know so exactly which username we are going to use okay so again in this case also we can declare one signal variable usern name so the default value is empty okay and next in our forget password screen in the success scenario we can just set the values okay the same value we can get in our password update screen I mean the password update component so here also first let me import this material way model and then this router link here I'm going to use the reactive for model only okay and then implementing Ng on into hook so the username I'm defined as the mg value so in this NG on in Hook we can get the values from our signals itself okay first of all we need to inject the services through our Constructor so anyway let me take some common codes because the same steps Only We are following we can get the code from our reset password screen first importing this form Builder then services and this toaster services and uh router so first we are assigning values into this current username okay okay this is the first step and then uh we are defining our form okay reset form this is fine so here the parameters are one is the OTP text and another one is the password the username is not needed uh anyway we are getting from the signal itself okay next in this function uh we can work with the services so let me take the service okay the parameter should be like this so first we can create one interface can say update password here all are string only okay okay and next in our service site update password and again this should be update password and in this URL point of view we can say user SL update password okay the AP is fine so next we can move on the component side once again so the object is update password and in this username we can use the current usern field and then password password we can get it from the form itself again this OTP text also we can get it from the form so next in the service point of view we can use this update password method so once we got a response like this the password changed so other texts are fine okay so now we have finished from the TS side so the same kind of change we can apply for the HTML also I just copied all the existing HTML content from the reset password and I just added into our update password screen so here again the Form and Function names are same only okay and this username is not needed and this instead of this world password we can say password okay and one more field is for the OTP text so in this form we have defined like this okay other things are same only I believe the update also fine and uh this is actually forget password screen uh once we clicked this cancel we have to redirect into login page okay let me save now so our condition would be like this so now we are in this login page so we can send the wordp once again test user one okay and I'm saying password test three and the OTP 5184 okay it's saying password changed successfully so now if I'm loging with a new credential test user one test three okay it's logged in fin so let me log out one second so now actually I'm not logged in okay so if I'm trying to go to the homepage I can go actually the expected response is it should redirect into the login page once again okay for for doing this implementation uh we can use the cards in our angular application so this one also a part of authentication scenario okay so we can go to the new terminal NG generate guard so let me provide the name is hard card so here we can use this scan activate see the card is generated so here you can see the default value showing us the true so the first thing here what I'm going to do here I'm just checking so if it is having the value then it should be true so in this Els scenario I we would say return false also we can redirect into login page okay so in this cards we cannot directly use the Constructor at the same time we have to uh inject something okay so what I'm going to do let me use the inject option and here we can IND the functions so using that okay navigate by URL login page so if you want to show any alert so next we can use this card in our uh routing side so first we can apply for this uh home screen okay so the same thing we can apply for all the authenticated menus so this register login confirm OTP and forget password and update password reset password these are the open URLs okay uh we can include this authentication I mean this H card for the customer and also the user so this is the initial level changes okay it's saying un authorized taxes so in case if I'm providing the credential so now it is coming here okay at the same time if I'm go to the customer I can access and one more thing actually I don't have access for this user okay but if I'm entering so the user menu is coming for that also we have to apply the Restriction so let me show you for doing this one we can use one of the AP function okay get menu permission uh by rule this is the API we can use rule I would say user and this menu first time giving customer okay so it's returning the values okay the code it's there and have the view access added it some of anyway while implementing the role based access it's needed this APL okay so let me implement the function and before that we can create one model using the same file menu permission first code it is the string and then this name this name also string so the next one is have view this should be Boolean and then this have ADD so this one also Boolean so the next one is how edit so that also Boolean so next in our uh AP side get menu permission so it's having two parameters the first one is role and the second one is menu name okay and actually this is the get method and the response is menu permission next in this URL point of view it should be like this menu name and then this rule okay now the AP is ready next in our cards we can inject this service also okay and in this access scenario okay here we can call the services get menu permission so the first thing is uh we need to pass the role that already available in this local storage so we can pass this one and the second thing is the active menu forgetting this menu name also so uh let me declare one variable first so initially I provided a CMT and then having one check if it is more than zero we can assign the menu name okay now the menu name also available so let me use in this this function so in this scenario I'm just checking like item. have view so if it is true then we can just return return true so else scenario we can return return false okay and defaultly I'm just returning false okay and in this scenario uh we can say this notification messages this another access is fine and we are just redirect into the homepage the scenario is user is logged in but they don't have the access in the specific menus okay that is the plan so now again we are in this test user only so if I'm trying to access this user so it's saying unauthorized access impes comes to this home P page I mean simply comes to our homepage so when I'm clicking this customer it's supposed to work but it's not working let me confirm okay the initial load we are getting on error so if it is menu code empty that means our home page no need to send anything so in this case I'm just applying one condition okay for the service calling uh we can use other than homepage only okay so then this CC scenario default default it should be true and here also the default value always should be true okay so we can verify now and clear this exception So currently we are in this homepage so if I'm click to this customer yeah it's working at the same time I'm providing this user so then it's saying unauthorized access okay so the next thing is uh we can do the basic reductions for this customer screen so like we can have one listing screen there we can provide the add Ed delete options so after that so based on this user role permission we can do the Restriction so that means we are simply doing this role based authentication for this customer screen okay so the first thing is we can populate the customer information in one of the table for doing this one uh we can use the APA customer so this get all method okay so we got a response is 4 not1 the reason is this APS the secured one we have to pass the JWT token so then only we can access so anyway the URL is fine let me copy this one and we can create one more new Services n generate service provided the name is customer okay the service also ready so again we have this Constructor uh here we can inject this HTTP client and the first method is get all actually we need to pass the token uh that we can do through the HTTP interceptors and the next is we need to get the base URL the pattern we can use the same pattern okay and then next thing is Fe should know the response type so let me create one model so first we can see what is the exact return return type I'm just opening the postman okay in this Postman uh we can open one new request and then take the same URL okay customer gal method so in Postman also initially we will get the same error 4 not one so here we can pass our token and our token type is beor next the token can generate from our swager itself here we need to pass the credential test user one and the last updated password is test three okay it should be test user see now it is generated the token the same token we can use it here see the response it's 200 and also we can see this object okay we can have the same the default Json format so in this model file we can create one new model file OKAY customer. model and Export interface the name is customer so the first field is code the data typ is string so the same way let me apply for the other fields also okay the model is ready so next we can move on the service s okay and then we have to change the url okay by passing this token we can handle through the HTTP interceptors okay so let me do that now we can generate in the same service folder itself provided the name is HTTP intercept okay it's generated so here the first thing is uh we have to get our token so once we logged in uh we got the token so that we assigned in the local storage itself so once we have this token uh let me Define one object and here we can set the head test through this head I'm going to pass this authorization and then our token type Bor so finally we have to pass the token at the end we have to return this JWT token okay now it is fine so actually the name I provided as the HTTP intercept 6 it's actually not the good so basically we can provide like a token intercept or something like that okay maybe we can change now that also not a problem okay this one is not needed so don't worry so next we have to register this HTTP interceptors so for that we can move on the app config side so in this app config side we already registered this provide HTTP client so here we can include this HTTP inds also okay with interceptors actually this is the array here we can use this token interceptors okay so next we can move on our component so in our customer component side as usual in this import section uh we can include this material model and then router link okay and implementing NG on into hook and then having the Constructor so in this Constructor I'm injecting this customer services okay and then declaring one object and the data type is customer array next to defining one function load customer so in this function we can call up our services and there is no parameters so whatever response we are getting from our service that we can assign into our customer list okay I just formatted and we can call this function in this enion in Hook and we can include this value into the console if it is returning the data next thing is we can focus on how to bind this data into the table okay okay HTP error response Let me refresh one second okay we are getting the same response so the token also there so anyway let me log out and try one again okay I cleared all the errors so now see we are able to get the customers by using the newly created token okay so next let me focus on how to band in this list first in our TS side we can Define one array that is display columns okay it's actually a string array here we can Define the default columns okay that we are going to displ explain this listing status and finally we can include one more field that is the action next declaring one more variable that is actually a data source and the data type is CN okay next once we got the data from our services we are assigned into our customer list object next we can assign the same values into our data source but this time we are converting these values into math table data source okay okay so now we have the data next in know the so next in our HTML side can remove the existing content so here we can include this m card okay as usual adding this header and content so in this header point of view we can say customer listing and additionally we can have one button that is for creating new record add customer and it is the mat rced button and the color also primary next we can include this m code content so here we can use the mat table next we can include the data source so already we have a values the object of data source the same value we can use it here and the next thing is we can Define the table header row and also the table body row so the first one is matte header okay here we can use the displayed columns okay so the same way for the body row we can use the directive is mat row and in this definitions so these are the basic syntax so anyway I have covered in the separate video just to follow the steps okay so finally we can Define all the columns by using the CNG container and adding this table header th so here we can use the direct two mat header cell and in this definition also here we can provide the and we can provide the value so the same way we can include the TD also here the directive is mat cell and in this definition also we can say Mell definition the same way we can include the other columns also okay the next one is for name and the third one is email and then phone the next one is credit limit and the final one is for the action so here actually we can include the buttons okay so initially I'm just keeping us the mg the status column is needed actually it's missed so after this credit limit we can have this status from the model point of view uh I believe we have the status name yes the status name was there so the datas are loaded uh but it is not the full screen so in this case uh let me include to custom CSS okay in our actual CSS we have added this MAT card so first of all uh I just copied this one next in our customer CSS I'm just changing this into 90 per okay and the same way this mat button the width we can say it's Auto and in this margin left we can say just 5 percentage it's more than enough okay now this is fine and we have to move this button into uh right side side so we can do some manual adjustment okay so now this is fine and if you need some styles that also we can include for this header so in this header only we can use this class okay see now so now it is somewhat fine okay so whatever data is there we just populated it here and for this actions we can include two buttons just a basic button the first one is edit and the directives is MATC button and this color also primary so the same way and including one more button so this is for a delete and the color I just Chang it into asent so now the design is fine the next thing is we have to work for this add edit and delete functionality so before that uh we can include the role based authentication in this screen so basically it's not going to take much time so initially I'm just declaring one variable okay permission and the data type is menu permission and in the service point of view I'm injecting one more service okay just injected the user service and then writing on function set access so in this function and the function is get man permission so the first input is R so again that we can get it from our local storage maybe we can have a common functions uh in our service side instead of getting values from this local storage for every time we can just use the functions for the time being we can follow the same thing okay add the menu name So currently we are in this customer page so we can just hard code this one okay just add it and the next thing is so in our HTML side uh we defaultly provide this button okay so instead of that what we can do if it is having have add only have ADD so then only uh we are showing this button okay that's my plan for the same way for doing this uh edit and delete let me bind uh event so in this click event and adding the function function edit and we can pass the code as the parameter okay and the same way uh binding one more function delete so let me Define both the functions okay so here the first check is have edit then only we are allowing okay so in this Els scenario we have to show the warning by using this toaster alert so let me inject that warning user not having ad Tes so the same way for this delete also we can say just we are cheing have delete now this is fine and we can clear the existing errors it's still having some issues I'm just moving this function in this Constructor itself okay see now uh the add button is disappeared and also if I'm clicking this edit it's showing us the warning and in this delete Al showing the warning so that means the user don't have an access so the next thing is let me change the permission so actually we can manage this permission from the UA itself that I will do a little later so currently let me change from the database itself so our current role is user and the menu is customer okay so let me provide this adds true and this edit also okay so if I'm refreshed see we have this add customer and if I'm clicking this edit actually we not implemented any functionality but it's not showing any warning at the same time if I'm clicking this delete it will show the warning okay okay this console it's showing some error for resolving this one uh we can add some default values okay in our object we just declared this object so instead of that we can have some default value okay so the fality point of view it will work uh since we got some exception in our console we just resoled so the next thing is uh we can work for this add customer okay this button we can include the router Link customer SL add so the same time we can create the required components and I'm creating one more component that is for user Ro I mean this user Ro permission mapping so it's kind of admin screen so next we can map all the components in into the routing s so already we have this user and then we can include this user role okay and then after this customer we can have this add customer and the component name is ADD customer okay so the same way we can include the route for edit the route is fine so next if I'm clicking this add customer okay it should redirect wa it's not happen let me verify in this import side we have this router link okay customer SL customer add okay so now if I'm clicking yeah it's redirected into our add customer page okay so here the first thing is uh we can focus on the TS side as usually importing this material model then this reactive form model and router link and then implementing an NG on into hook implementing NG on in Hook and then having the Constructor so in this instructor we can inject the Builder I mean this form Builder and then toaster then router and the final one is services and the next thing is uh defining this form customer form so the first field is code so already we have created the model So based on that we can Define all the fields okay so the next one is name then email and then phone number then credit limit and then status for the state us uh default value we can say true okay and then we can have a function save customer so in this function we are just checking whether the form have the valid value so if it is valid only we are proceeding and the next thing is uh we have to work with our services once we have valid dat we need to work with services so let me take my actual service okay so we can take this create function okay this is our AP method so we can move on the service side create customer create customer is the post method and we now need to specify this return type and the URL should be customer / create and it's having one parameter that is our customer object and we can pass this as the parameter okay so the same way we can do for this update and delete so update also show should be like this this is the put and we have to pass the data and the URL should be update and also we need to pass the code the data will be available in number data object itself and the final one is delete and it's having a single data just a code only okay and it is the delete method and also our URL should be remove customer SL remove okay one function is missing that is the get by code okay it will return the single object and then our URL should be URL should be like this and this code is the parameter so next we can move on the TS side so once we have this data let me Define one object we can add all the values one by one so the same way we can include all the values one by one okay but the status name actually we are not passing as the parameters but anyway it's part of our interface so just we are added the default value okay next declaring one variable okay and here we can call our services create customer and we are passing this object and then just subscribed and whatever response we are getting the same value we are just assigning into the response so once we have this response if result equal to pass then this is the success scenario and then I am showing this notification and the header is Success also we can navigate into power listing page okay so other ways we have to show the uh error message okay first of all this title should be failed and it should be G error okay we just completed so the next thing is we can focus on the HTML side first we can remove this uh existing content and the designing point of view we can just copy from our register screen itself okay so in instead of typing everything uh we can just reuse the existing content and then we can modify accordingly okay so here the first thing is uh we have to assign the form name so our form is customer form and then this function save customer so initially we can say add customer otherwise let me have one title okay the initial value should be customer so why I'm providing like this means uh for doing this add and update I'm going to use the same component so initially we are just working for this add after that we can reuse for the update also so the first field is code and the form control name is code and the name that is fine and the third one is email and the type it's not needed and the fourth one is phone number okay here also this phone number what are there and the fifth field is credit limit and the final one is one of the checkbox field for maintaining the status and in this form control name status okay other things are fine the text should be save and then cancel so the cancel should redirect into our customer listing okay see the design so if I'm clicking cancel it's coming here and in this listing screen also one thing we missed that is the shorting and pagination so I will do a little later so so before that we can finish this adding also so the recent record is 02 okay so we can provide 023 the some name so defaultly it's active once time click to save so created successfully we can see this new record okay it's coming so that means our add functionality is working fine so the next thing is we have to work for this edit so before that let me include this sharting and Page Nation first we can do this page Nation okay so in this listing component side after this content let me include the mat card footer okay so in this footer side we can have our Matt pator so here first we can provide the uh page size options so it's expecting the value in Array format we can give like 5 10 20 okay and also we are enabling this first and last buttons okay so next in this TS side we can try to access the same M pator using this view child option okay here we can use the mat pageor okay we can ask and then in our actual data see the response now totally we have seven records in this first page we are showing the five records so this next page we have a two records so if I'm choosing 10 so our uh okay so now all the records are showing in the same page that so that means our vagination is working so the same way we can work for the sharting also first in our TS side okay next in our HTML side first in this table uh we have to include the match shot okay and then in this header side we can say match sh head okay so we can try now cannot use this host okay okay I made a clear mistake it should be included for only the headers not for the NG container okay okay uh we have this sharting option also so the next thing is we can work for this cedit so in this cedit button click already we have created one function okay whether we injected the router no okay just a format so now if I'm clicking this edit see we we are just passing this parameter also okay this is fine and the next thing is we have to access this value So based on this uh customer code we have to get the individual customer information make sure we have to pop it in this form okay and this header also need to be changed into to update customer so let me go back to this component once again so what I'm going to do here let me declare one variable okay that is edit code so the default value should be empty and then declaring one more variable is cedit the default value should be false okay so let me save this one add the next thing is we can inject the activated route okay so using this activated route we can get the parameter value okay so whatever value is coming that we can assigning into our edit code so the unique value uh will be used in the routing side itself so we are mapping as the code okay then I'm just used it here and then just converting this into string okay so next we can check whether this edit code have the value it should not empty and it should not n okay this is the actual condition check so in this scenario in this is edit also true okay and then we can make this code field as the disabled one okay we just disabled and then changing this title into edit customer okay just we can verify see the code is disabled and the text also changed so if I'm clicking this add customer so the code is available and also it is the edit customer so if I'm coming from this edit now it is disabled and this title also changed so the next thing is we need to populate the values so here we can just call the services get by code so here we can pass this edit code and just and we subscribed and declaring one more set of data so the data type should be customer so whatever response we are getting from this apaa just send it here okay so let me format this one also assigning these values into our form so first we are assigning this into code so the same way we can do for the other fields code name then email so the next one is phone number and then credit limit and the final one is status so the data point of you it say is active see now the data also loaded so if I'm clicking this inactive one see if I'm clicking this here te Keys see okay the existing data is loaded so the next thing is we have to work in this save section so already we have binded one function that is our save customer okay so here uh we have to include one more condition check okay if it is not is it so in this case this is fine so in this Els scenario it should be an object update okay so we can copy the same code but we can do some modification the first one is we can say this is the update customer okay so if it is fast we can say updated successfully and navigation this is fine and failed so additionally we have to set one value in this object okay that is a code okay so the reason is uh since it is a disabled we will get just the undefined value only okay but the exact value will be available in this edit code so we can verify now so if I'm changed this into 2,000 see it's saying updated successfully the 2,000 is updated okay so we can take this ail R and adding three Dot and added to four just kill so let me save this one see all got updated and let me make this rock this active and credit limit also provided see so now our update funty also working fine so the final one is delete fality so that we can Implement from our customer compon itself okay for this delete also we already return the function but here I'm going to have one more condition let check we are just asking the confirmation if it is fine only we are going to proceed the delete okay so again we are calling this Services delete customer and we pass this ID and we can declare one variable so whatever response we are getting that I just asend end over response okay and the next thing is we have to show this notifications we can just copy and reuse it so we can say deleted successfully and no need to navigate so instead of that we can call this load customer okay so we can try now so it's saying you don't have an access so first we can enable this access okay so now if I'm trying to delete this one are you sure once I click okay so the record got removed see now we have just six records so if I'm removing the 78 that means the name is ravikumar are you sure so once I click so it's got removed okay so now the delete functionality also working fine and and also we have implemented the complete Ro based authentication okay so the next thing is we can work for the admin screens so there are two screens one is the user and another one is the user role so in this user role uh we can populate all the existing uses and we can provide two functionalities one is for changing the user role and another one is changing the Status okay and in this user R screen we can do the complete user Ro permission assignment okay so first let me start from this users for this user screen we can have a table there we can populate all the uses so the change we can start from the AP Okay so we have a method is called get all as usual uh first we can create one interface the file we can use the same user okay and we can provide the name is just the users so the first one is username the data typ is [Music] string and the name email phone number and is active and then status name and the final one is rle okay so the model is ready next we can move on the services the name get all uses okay it don't have any parameters and the return type should be users array and then we have to modify the URL user SL G so next we can move on the component side here we can use this uses compon okay we can initiate the changes from our TS side so since this is the uh grid loading screen okay so we can follow the same codes from our customer itself and then we can modify based on our requirement okay first we can start from this import section anyway we are using this material model and it's not a customer list it's user list and our class is users and then implementing on in it hook and in the display column point of view we can say username name email phone number and status and additionally we can show the role okay so next this response and this permission both are not needed next this view it's needed also this mat pageor and then mat shot these all the things are needed and in this service point of view uh we can use the user services this customer services is not needed and toaster well it will be needed and routing I'm not sure for time being uh let me remove this one okay and in this set access it's not needed and in this load customer we can say load users this object name also I'm just Chang it into services and our function is get all uses once we have a response uh we are just adding this into our user list and then converting this value into ma table data source and our interface should be usess and instead of the customer list we can change this into user list and other things are fine but it don't have an edit functionality so anyway let me command this one and this delete also it's not needed okay for this one I just removed so the next thing is uh we can work for the HTML side for the HTML also I just copied the existing code completely and then replaced we can say user listing and it don't have any ads screen this data source is fine so First Column is username the next one is name then email phone number up to this F and instead of the credit limit we can have the role okay and in the status yeah this one is fine and then in this action point of view we can say update Ro and in this next button update status see the response now okay it is coming so look like we have to include the custom CSS also okay I just copied everything so now this is fine and the next thing is if the role is atmin uh we no need to provide this actions okay so let me disable this one for doing this one uh we can use this if it is admin no need to show anything otherwise we can say if not equal to admin only we are just showing these two buttons okay and the next thing is we can work for this update role so I would say update Ro the same way the next function is update status and again we can start our changes from the API side so the first one is update role okay so the inputs are username and role only so let me create the model so next in our service point of view we can say like update role and again this one also post method and our you should be user SL update rule okay okay the service said we have completed the next thing is in this UA point of view so we can open one popup so in this popup we can do the rooll update functionality okay for the popup let me create one more component the name is user update okay this button click let me open the popup so our user component so let me inject the M dialog so this one also kind of uh material control for showing the popup next I'm creating one more function so here we need to pass our component so our component name is uh user update okay and we can pass the additional properties so the first property uh let me provide the width is 30% it's expecting in the string format only okay and the next thing is we can include this uh animation 1000 millisecond so the same way we can include for the exit animation and additionally uh if we need to pass any parameter we can pass by using this data okay so in our case we can two we can pass two parameters one is the username that is the key value value that we can get as the parameter and the second parameter is type so type means So currently we are doing this Ro update for doing the status update also I'm going to use the same popup so we can have one more parameter we have to call this function here okay so here the code is nothing but our username and the second thing is a type so I just pass the Valu roll okay at the same time for the status update we can say status now let me click this button see okay the popup is opened so the next thing is we have to work with this pop popup so in this popup component so again here also uh we can import this material model and then reactive form model and implementing on hook and also having the Constructor first we can inject the form Builder add then toaster and the very important thing is whatever value we have passed while opening this popup the same value we have to get it here okay for getting this data we can use the M dialog data option okay so let me format this one and then declaring one variable the dialog data any okay and then in this NG on in Hook we can assign the values so the next thing is uh we can Define our form so we can provide the name is user form okay so the first field is username okay the initial value should be Mt and then adding this disabled as true gu this is the read only field only and then user role and the final one is status the default value should be true and the next thing is once we have this dialog data I'm just checking if it is not equal to empty then we can get the uh individual user information okay so let me declare one more variable so here we can call over Services okay the service is not injected so the function name is get user by code I don't think I have defined so let me check in this service s get user by code so it will return return the single object and it's having one parameter so the URL we can get it from here the get by code and we pass the code also okay so now we are good to go at the same time I have to write one more function okay that is for the rle get all rules for these roles also first we can create the model class so next in this service side get all rules so it will return return the array of data and there is no parameters and our URL should be like this okay I just saved everything so next in our component side get user by code and here we can pass this username so whatever response we are getting that we can assign into our user data so once we got this response uh we can assign into our form this do user form and the second one is role and the final one is status SE so the TS side the changes are done the next thing is we can move on the HTML side for the design perspective uh we can get it from the existing screen okay first time defaultly I'm just to provide it change rule okay and our form name is user form and the function proceed change here as usual first we can check whether the form has the valid data and the controls the first one is username and the second one is user role it should be rooll and very important thing is actually uh this is the select control Okay match select so in this match select we can use this form control name so the next thing is mat option that we can generate dynamically based on the AP data okay and we can have a function load roles here we can call over services so now we have values in this uh role list here we can use the for Loop here just generating this mat option okay item. name and the same way for the value it should be code and finally and finally we can have one checkbox okay and the form control name is status see the screen now okay it's loaded but the edit data is not loaded that we can verify and this size we can have in the full screen okay style we can take it from here okay so the style is coming with an full screen so next let me verify uh why the data is not loaded okay so the trade values all are empty maybe this could be a reason yeah it's coming as the undefined from a user component we are just passing this data and in this function point of view it should be username so next I believe it will work okay see ENT user and staff for this cancel button we have to implement okay so let me close this one and if I'm choosing this test user one see the role is user and active this is the status so as for our current logic we are doing this update role and update status we are doing as the separate way okay so that means so if I'm clicking this update role uh the user can change only this role only this active we can make us the disabled mode or else we can hide this one okay first we can include one function in this cancel for closing this popup that we have to do in our uh user update component itself so currently it's having the router link it's actually not needed okay and just wred one click event close popup so in this Constructor side we can inject the Matt dialog C so here we can use our component and in this variable point of view I'm declaring one more variable so the default value should be empty and once we have this dialect data okay so in our HTML set side so if the type is roll we are just showing this content so in thiss scenario we can show this set box see now so it's showing the rule if you are clicking the status it's showing like this so the next thing is we have to work this update functionality so already I just written on function okay so next here we can check if the type is RO we can call our services so before that let me make one object okay so we already created one class so let me verify update role so the interface is update user so it's having username and role only okay I think we have to include one more item but we'll do later so currently it's fine we can say update user so this username point of view uh we can get it from the dialog data itself and the next value role we can get it from the form itself string update R and here we can have one more declaration so let me copy this one so we just copied and I'm adding it here so if it is fast then we can say R updated and in this access scenario we have to close this popup okay and in this failed scenario okay this much is enough first let me verify whether it is working or not we have one more change in this user side okay so once the popup is closed we need to reload our grid okay load users so we can take our test user currently it's in the status of user I mean the role is user and just to change it into stuff so on I click I'm getting some error okay I believe it is updated uh but this result is showing an error so let me refresh this one okay it is coming as the staff it's updated uh I'm not sure what's the response actually we are getting we not assigned the response into this object we can do one again again now it is in the Stu I'm just changing this into user okay roll update updated successfully so if I'm changing the next one change it successfully so the same way uh we can work for this uh status update also it's actually not going to take much time because we can reuse some of the areas okay so in our interface uh we can do one small change actually we are adding one more property okay and just add it here so anyway it's this one also a part of user related item so let me move this into this user area okay so next in our service side okay this one need to be removed update user okay and [Music] writing one more function status so the AP URL should be update status update status next in our component side we can remove this one so here we can include this status also the status value also uh we can get it from the form itself so let me copy the code and in this Els scenario we are using this update status and other things are same status So currently our user in this AC mode now it is Ina user so now I'm trying to change this into active okay it's changed so now we have completed this update role and also this update status so the next thing is uh we can move on this user roles okay for this user roles also uh we have created the component first in this TS side as usual we can import this material model and this reactive for model okay and implementing on hook also creating the Constructor so in this Constructor we can inject the form Builder and then toaster and the final one is services so in this uh user R screen first we have to load all the available roles and also all the menus and then we have to map the permissions against the user Ro okay so first we can load all the menus for that let me declare one variables okay and the function is load roles get all roles so the same way uh we have to load all the menus we have a function I mean the APA get all menus okay same code name status only the fields so in this model side already we have this roles so the same kind of fields only we are having for the menus okay next in the service side get all the menus and the URL should be user ro/ get all menus so next in our component side I'm just created uh one more function and also declaring one more variable menu list and the model is menus load menus okay get to all the menus manual list we can call this function also so next in the HTML side we can remove the existing one as usual we can have this MAT card and then M card header and then M card content so the header point of view we can have one hun tag user Ro assignment okay in this m card content we can have the user R option okay select user Ro and then we have a select control okay this select control be recently used I just copyed okay I believe we decare the same role list only okay and this form control name uh that we can include little later currently let me see the design okay all are loaded so the next thing is we can work for the menu so inside the mat card we can have one more M card okay this one actually I'm including for the designing purpose only and then let me include on table so here we can have the fields have menu so the fields are menu name and then the access okay have you and then have ADD have edit and have delete okay so the designing point of view okay in this table I'm going to load all the menus and also for this options like have view add edit delete we can generate the controls in the dynamic manner okay for that what I'm going to do let me use the for Concept in this reactive forms okay in this import section we already imported this reactive form model so the next thing is let me Define our form Ro form okay so the first field is user role and this field is required and the second field is our form array I just provide the name is access so the default value we can have as the Mt aray okay so let me format this one and the next thing is we can have one function for generating the rows generate menu row okay so initially I'm not added any parameters so basically it will return the form group here we can include all the fields so before adding these fields uh uh let me show the API so it should be like this so our input should be like this so it's a kind of array we have to pass the objects this user role and then menu code and then permissions like have view add edit delete so in our row creation we should have this menu then view add edit and delete okay so let me assign all the items one by one code this code is nothing but our menu code so the default value I have provided as mty and the second thing is have View so the default value let me provide just to Pro okay actually we can modify the same way I have to include other controls also have ADD then have edit and the final one is have delete so the next thing is so once we have this menus let me check like if the menu list length is more than zero we can generate the loop data type should be so actually in this place we have to implement some logic so before that let me create one more function Okay add a new row it's expecting one parameter the data type is menu okay and then we can declare one variable access array okay and the data type is form array okay so next in this function access array we can push like generate row okay and here we can pass this input menus and this add new row function we can call it here so let me format this one so since we have this menu code we can just include it here the codee okay okay this is fine so the next thing is uh we can have one get function and we can return we are just returning this access that is is nothing but the form array okay so using this get rows we can bind our controls in this HTML side okay already we have this table header then I just included this table body so let me include one table draw and then we can include the NG for we can get all the controls okay and then we can take the index and we can use this index is the form group name okay I just saved everything and next in this TD we are just binding the value only okay so in this case we can use like this okay for other the next TD we can have the checkbox so next in this form control name we can say have View here it's not needed okay anyway we have included in this header itself so the same way uh let me include three more 3D Okay add okay okay it's showing some error uh we can verify so ng4 is not the N okay we can import the common model since we are using this ng4 we have to use this common model okay okay the next error is this push is not working so let me verify that okay we just declared one form array and then we are just pushing okay but but it's don't have any connection with our actual uh form so that let me include so before calling this Services okay we can say this access are equal to as for and whatever value is already there I'm just clearing okay and then only we are adding the new row we can check now okay now it is loaded uh but the other menus form group name must be used within the parent form direct you okay that's fine so before using this MAT card uh let me use one form okay okay so let me cut and move everything down and then choosing this form name we can say this form this is our main form group and also in this Sumit event save roles and then in this select control we can have the form control name okay so the form control name user Ro so next in our table side form AR name okay the form AR name is access check now okay now there is no error and see our screen also there the default value I have provided Aller two that's what we are seeing this color so basically our idea is whenever we are changing this user role So based on the access permission this checkbox value will be changed and if there is any changes needed like a permission add or removal needed we can just do the tick and untick and then we have to save the things okay so first we can finish the design side anyway we have to include one control also I mean this button control also I'm just having this m card actions and here we have to include the button maybe we can have the full length just keeping this one okay okay the next thing is we can work for this uh selection change so in this select control we can write the on change event the event name is selction and change so I'm just binding on event R change and here we can pass the event okay so let me Define this function any select r equal to even. value from this event we can call over load menu function and this time we can pass this role as the parameter and let me include string from the initial load uh so let me provide the empty rules okay so the next thing is using this role we can get the current access permission okay so let me take this roles first I'm just checking user rle not equal to mg okay so in this scenario uh we can call our APA you're declaring one more variable okay it should be menu permission so here we can call the services so get menu permission okay so it's expecting uh two parameters the first one is user role and the next one is menu okay the menu we will get as the code here so whatever response is coming that we can assign to this variable user access okay so let me format this one and once we have this data we can call this add new okay and I'm passing this user access also a parameter next let me modify this one minu permission so in this uh initial load also we need to uh load the data so even if you not selected the role also we have to load the menu so for that we can use the same one but instead of this data I'm just having some empty values okay added some Dum values so let me format this one and then in our add new row function so we are calling this generate menu row so in this generate menu row we can pass this data okay and let me include that as the parameter here and instead of adding this default value we can just say have View and then have add the next one is have edit and the final one is have delete okay see now the initial load nothing is selected once I choose the staff staff have this much access only and admin admin have the full access and the user user having this reports and customers so from the database itself we just changed this access for the customer we have enabled this ad edit and delete that's what it's showing like this so maybe if I'm removing from database it will reflect in our UI okay so on say refresh again if I'm choosing this user see it's just to have the view access okay so now uh we have done the existing exess so the next thing is we have to work for this save fality okay so let me go back to this TS side okay for the save we can start the changes from the service side so already I shown uh this is our APA uh we can just click with the dummy data so we will get our response should be like this okay first So based on these parameters we can create own model already we have created this uh menu permission uh but in this model some Fields have the changes okay so what we can do let me check okay it's don't have this uh user role and instead of the code we can use as the uh menu code but anyway let me use string okay and already we have the code uh for some functionalities we are already using so I'm not removing and adding the new Fields that's it okay so the same menu permission uh we can use so next in this service side assign Ro permission so the data type should be menu permission it should be in the array format and again this one also a kind of post method if we are passing this data and the very important thing is the URL URL should be in this format okay so now the service also ready and the final change from our since we added some fields we can have both of the empty values okay so in this user role also we are getting some error okay so next in our save roles as usual uh first we are checking this role form has the valid data so if it is valid then we can deare one variable for getting the form array value so this array don't have the value for the user role so that we have to include it manually so what I'm going to do let me have one par so here the user rle is nothing but the selected one okay okay instead of making this much of Loop simply what we can do and get this role also a parameter okay so here obviously uh we will get the role and in this function we can have this r as the empty value okay so since we have this rooll information uh this Loop is not needed so here we can just call over apaa okay here this menu code as the parameter so I'm doing one more change so in this forms we can have this as the menu code okay so the same [Music] change I just applied here also okay so now this is fine so here we can call this as permission and this form array we can pass as the parameter and as usual we can have this response declaration and the data type should be any and just to scroll down okay so whatever response is coming we are just ascending this variable and finally we can say like saved permission assigned successfully okay so once the save is completed uh actually there is no more action okay so we can verify now I just refreshed so if I'm just choosing this user I'm additionally adding this have ad only okay it's saying saved successfully so even if I'm refreshed and chosing the same user okay it's there that means the functionality point of VI it's working fine and let me include one new menu okay so then only we can verify this functionality clearly So currently we are in this admin login so the same time frame coming with an test user one so we have just the this we have just two menus one is the report and another one is the customer this home is the default one okay so even if I'm trying to access this user role it's saying unauthorized access simply read directed into our homepage so now from this database let me include one new menu invoice okay so next we can log in with an admin user so admin have all the menus but still so in this admin menu also the newly created manage not showing but we can see in this user Ro assignment side this invoice was there so if I'm choosing admin none of the item is selected okay so I just refreshed I I I mean just assigned and then saved so if I am just refreshing so we can see this invoice also included so again for this user role so even our test user also belongs to this user for this user also I'm just assigned those permissions okay and edit we can you and so edit I not provided the access but the same time for the delete I have provided for for this customer so now let me save this one so now if I'm loging with our test user one okay test user see now the invo man also showing so in this customer page we have this ad and if I'm clicking this edit it's saying you don't have access at the same time I'm clicking this delete it's allowing to do the delete okay because we have because we have provided the access so now we have completed all the topics so finally we can do one more round of demo first let me log out this one okay so this is our initial screen so if I'm coming as the new user so first thing is I have to register okay so the username I'm just providing inch I provided the password is CCH confirm password additionally added one more character so let me click save so now we have to enter the OTP so so let me take this OTP from our table itself so we can see this Y and our OTP once I given okay the registration is completed we can log in with a new credentials so our credential is ENT okay I'm able to log in and current Ro is the user so that's what I am able to see these three menus okay and using this reset password let me change the password the old password is inch okay so additionally providing one okay the password also changed and finally we can do this forget password so once I entered this username it's sending one OTP so the new password I just provide a test and OTP okay the password is changed we can log in with our new password Here we can see the available menus from this customer page we can see all the records since we have a view access by clicking this ad let me create one new record okay so we can see the newly created customer here 901 so if I'm trying to edit actually I don't have an access so let me change the permission from the database itself for this customer so I don't have a edit access but at the same time I'm having the delete access so before that let me loog log in with an admin credential so in this admin screen we can see the newly created user ych I'm just changing this role into admin okay so once it is changed this action also got removed now let me try to log in with them the same credential and test so if I'm coming to the customer screen I can do this edit also we can see the newly created customer I just changed the name and completing this phone number also and limit also 2,000 I just did some changes okay so once I'm sa once I'm saved I see the same information from our grid okay so finally I'm doing this delete also okay now we did the complete ctions and also with the proper role based access okay and finally so in this user role we can change the permissions for the staff I just provided the full access for this customer and invoice okay okay now we have completed our final demo so now we are in the end of the video still if you have any doubts or clarifications please post in the comment box and also please don't forget to subscribe my channel and in this complete video I have used the net core web apaa so the whatever AP I have used that same code and script and the video so I will include everything in this video description so if you have your own API you can use that otherwise just follow the video and create the AP a so after completing your APA if you are starting this angular work it's more efficient okay thank you thanks for watching

Channel: Nihira Techiees

Views: 2,128

Keywords: angular 17 example, angular 17 standalone template example, angular authentication, angular authentication with dot net core api, angular 17 role based authentication implementation, angular 17 mini project with dot net core api, angular 17 real time project, angular 17 for begginers, admin screen in angular for user management, role based access assignment screem, login implementation in angular, forget password in angular, password management in angular, formarry examples

Id: r7mIY8Incog

Length: 250min 56sec (15056 seconds)

Published: Mon Apr 29 2024