Master React and Node: Build Full Employee Management System (part 2)

hello everyone uh in the previous video of this employee management system using react node in my SQL database in the previous video we just completed our admin dashboard uh okay so let's check it okay this was the previous project that we has completed validation and let's uh log to the system Press login button so we came to the dashboard okay this for the summary page employe management here we can manage the emploees are edit and delete and also uh the image you see we can upload the image also this is the category or whenever we are uh adding a new employe so we can select the category also so we can fix the category and display that here also okay but I didn't did that this was the profile page that I talked about in the previous video and the log out we l out from the system in this video what we will do first of all we will create a login page for the admin for the employee okay first I will design a page so there I will just show to the user you want to login as admin or employee okay so whenever he press the employee Lin so he then we will perform the employee Lin and also role based management system and also to verify the users when we are fing something so we will do in these videos um if you didn't watch the previous video so first of all watch that uh then come to this video this is the second part okay so let's start it okay okay first of all we will design a page then we will specify two buttons for admin login and for the employee login so I separating one thing I should mention that I'm separate I'm creating two different pages for login because we have two different tables for admin and for the employee for the employee we are entering a lot of information like if that is salary image and other things but for the admin we have just uh the email and the password so that's why I have created two different tables and I am creating to different pages for uh admin and for the implo so let's get started now so this is the previous code let's move to our front end and just come here to the front end and here we will create one another component by the name of like name it start okay start. jsx R FC in the start what we will do we will design a page let's copy the code of Lin page okay I will remove the input fields from that but I will just leave let's move to the yeah this is the li. jsx copy this code first then I will customize it okay don't worry just come here to the start and paste it here now I will remove this uh uh yeah I will remove the Forum because we don't need of any forum and also this error I already okay this is just one de and these are the classes of Bo stuff a second D element and here I will write login as okay login as admin or employee let's write for another du element and inside that I will create two buttons that is button and here I will specify ad me uh employee and let's create one another by the name of U so let's shift alt down control Z yeah that is okay admin and here I will add some classes class name display flex and justify content between and also margin um top should be five margin bottom two and yeah it looks like this so let's add classes for the buttons also class name this is button button a primary and we will add a class name for the admin also class name button button success close it uh now let's move to um run our start page so for that we will add a route in uh up. j6 okay let's add route first of all I will add that here route and that is let's add path path is slash start and the element is is equal to with start yes start let's save it and now let's move okay let's move to start page we came to this route and it looks like this okay now I will move this text to the center just come here to the start where is start here that's here let's right here class name text Center yeah login as employee or admin whenever we press this employe we should move to the employee login if we pre admin we should move to the login admin so let's do this okay so for that I will add here button let's first of all format the document and in this button I will add on uh on click event okay whenever we click on this we should move directly to the uh uh employee Lin so for that I will uh create use n let's create an arrow function set and inside this I will call Navigate Okay so let's first of all import use navigate from react. so after importing a a let's now create an instance of that const navigate is equal to use navigate and now I will call the navigate here okay navigate and we will move to the start page okay let's move to the uh employe Lin sorry okay slash employee lugin same thing weever we click on the admin we should move copy this to the admin L okay paste it I think I copied extra code or what happened contr set it we should unclick and let copy the code and paste it here that is okay and here we will move to the admin login let's check the route of the admin login uh admin login like this copy this paste it here save it and now first of all we will create this route okay employe Lin copy this and let's come here to the op. jsx I will change it to the employee Lin now let's create a new component by the name of employee login okay JX close it and come here back instead of this lugin we will use employe login that is okay now let's check it okay let's come here let's press imply see we came to the imply Lin component if we go back and press admin so we should come here to the admin Lin so now let's um design our employe login page okay let's come here to the uh let's remove this home and also employe and D emplo category and add employe add category I will remove all these things and just come here to the lugin I will copy the whole code from this uh employee lugin okay to the uh uh from this admin lugin to the emploee Lin because we would like to implement something like that okay just paste it we need the same thing like as we did okay let's also copy the above code okay just I will change the U um the route okay copy this and paste it here copy the and paste it here C save it now we will just change this route okay we would like to instead of calling admin Lin we will call employee Lin uh part okay employee uh Lin uh instead of going to this earth now we should move to the emploee okay because we would like to create a parent folder file now before we were moving to this this admin route let's move to the server side up we were coming to this routes to the admin routes but now we will create a new file by the name of uh employee lugin employee route doj okay in this file now I will Implement all routes all apis related to the employee and here I will write employee uh okay employee employee Lin uh now we will let's create this API okay employee login just save this file I think here everything is correct here now let's move to employee route here I will import XS Express sorry Express from Express what happened Express after that now let's create um a router okay const uh let's create that this is emplyee router play router uh is equal to express. router or I can name it employe router or just I will name it a router okay now we will use this router okay to create our apis but let's copy the login API code from our um lugin r admin route okay because we are Implement something uh same but we are we will just change the database table okay the table of database just come here the top we will also import all these things because we will Implement like uh let's copy the database connection and also the biglift because we want to check our password and also the token we will yeah let's copy first of all these things because we need them just come here and I will paste it them here and after that uh now let's copy all login okay this is admin login but I will change the code to the employee Lin just come here paste it here and also let's import export this router okay export um router as uh imply router save it and now let's change this admin L to um our uh employee Lin employee login and we will import import this um file emploee lugin in our index.js okay in this file as we imported this admin router now we will import uh sorry employee Lin employee router okay the employee router has imported now I will use that okay as we used this one ad main router so we will use up. use we will add employee prefix in all routes okay employee employ comma employee router so we have used that now let's move here to the employee contr B employee route this is employee Lin and here we will change just the um table name okay here we are using the uh admin but here I will use employee employee table and we will check just the email not the password because the password is hashed and we will uh change it we will verify the password then we will check it okay Al select St from employee where email is equal to okay the question mark here I will just attach the email okay whenever we pass the data in the request so we will attach just the this is our SQL query here we will use our connection. query and we attach the email then we will get error and result if error then we will DET return login status for false error query error for example and the error if the length was greater than zero it mean there is a record existed so what we will do then here we will first of all verify our password and also the tokens that we need we will Implement now the logic so now let's uh Implement first of all we will check our password okay so to check the password for that we have changed whenever we were uh inserting the emplo card we change the password to Hash permit okay so now we will check that we will use B library for that b. uh compare and here we will pass for supp all the pass the password that we pass from Front End request. body. password after that we will write our user password okay the user that we pitch right now inside this user okay the inside the result that we have result uh password result uh the zero index okay the first record that we pitched okay whenever we run this query so it will pitch the record so we will just check the password of the first recard okay this is an array type which returned with us do password so here it will um compare the password then it will generate an error or response for example okay let's create it okay it is a callback function that we has created ifo there was an error we will do the same thing okay let's copy this code if there was an error copy this code paste it if error was existed so then we will return this Lin status false and error that is that wrong password if response it means um if that was okay so what we will do now we will um uh Implement our logic okay to generate a token okay so first of all we will generate a token let's cut this code we have generated the code okay paste it here shift TP so this is the email that we stored from our recard that we pitched okay from this result okay and this is the token that we generated GWT do sign and the role is imply here and we also stor the email of the user and here this is the secret key as I talked in the admin area so it is I I will also tell you this is a very this is a secret key no one should know about this only you should know about this and also this should be at least 32 characters so now for the learning purpose I'm writing like this okay in front of you and expires in one day so this was our token now we will store our token inside the cookies so to store the token for that we need okay this logic okay we already did it in the admin section let's come here and paste it here so res. cookie we have stored the token inside the cookies okay of over the browser then return Json login status true it means that we logged in successfully so now let's check it okay we will learn our application what happened okay let's save it and let's move to the browser uh and here let's move to the Start employee and let's first of all press this login button so after loging it means these are empty we should see the um wrong credentials page here okay it means the error we should display that error here let's move to the console what is the result that we got let's move to the console now we faced within error that failed to load employee employee l in AIS error in promise so the problem is that here we imported Express two times okay because when we copied these data from the admin route so we copied Express also so that was two times let's save it and now let's check it okay let's refresh the page let's Press login see we got this this data uh now let's log into the system okay uh we have an employee record so let's check the employee email first of all I will check the emploee recard so we have just one employe recard so let's insert the email of that come and also password let's press log in see we log into to the system but here uh I specified AR path so we can we went directly to the dashboard so let's fix it just come here to the employee login so whenever we log in successfully so then where we should move we should move to the employee detail page we should see the detail of the employee instead of this we will move to the detail or employee detail employee detail and also we should pass the ID of the employee okay to pitch the record based on the ID then there okay so for that we need to just um return the ID also just come here to the employee route and here we will return uh a response then here we are returning just Lin status true and we should return the ID also so for that I will simply write ID is equal to with the result 0. ID just come here to the login system and here we will pass the ID also plus ID uh sorry that is result. data. ID l. data. ID now let's create this emplyee detail route in app. GSX and I will just create that here somewhere okay and let's that was Employee detail SL ID okay and we will create a new component let's create a new component employee detail do jsx save it and just come here to the up. jsx instead of this employee detail that has imported let's go back and control B close it and let's check it now so let's go back and we should do the same thing employee detail employee detail and employee log yeah that is emply detail so it says that we faced with an error let's check it SL desport is not valid an absolute child route path must start with the combined path of all its parent routes yeah the problem is in up. G6 I have written this emploee detail inside this dasboard route but I should control xit and I should write it outside from the dashboard okay now let's Mo and check it okay let's uh employee email.com Press login see we came to the employee details so now here we will P see the uh ID number is see ID s 10 so now we should display the record of the employee so let's come here to the employee detail and here first of all I will just grab the ID from the URL const ID is equal to use forums hook okay we will grab the use use Forum hook of fre to take ID from the URL then we will fix the record based on this ID okay let's move to use effect we will use use effect and here we will WR a call back function and here array dependency I explained I explained the array dependenc the use effect hook in first video here we will use A.G okay we will get data based on ID and we will move to http uh SL Local Host then 3,000 is our F uh Slash we will move to employee slash uh we will picture data based on the ID okay we will pass our ID also so we will do something like this uh employee uh Slash we will pass our ID plus ID or we can write detail slash ID do then we will get a result so first of all I will console the result result do data do cage if there was any error console log error so let's move back to our um let's write this API okay detail plus ID just come here to the employee route and here I will WR that router dogit and here we will write detail slash we will get an ID also request and response let's take the idid so for that we will use const ID is equal to with request. forums. ID after that let's write our SQL query SQL is equal to select St from employee where ID is equal to with question mark and here we will run our query con do query pass our SQL and also our ID comma here we will get um creating um uh function okay error and result so if you faced with an error F error so then we will return uh return response. Json in object uh state false and okay just status false and a result if we got the result so we will return response. Json the I will just return the result okay let's check it and let's move now to the uh back to our browser and here let's move to the console so we in AIS error it says pil with status code so let's check it where is the error small employee detail we CB the ID xess local heart 3000 employe detail see there was no problem we just refesh the page so that was okay because uh last time we didn't refresh the page so after refreshing the page we got this result see we got the ID the record okay this is the record that we pitched so now we will display that record okay in employee detail so for that let's first of all store it somewhere let's create a state variable const uh employee sit employee is equal to use State hook and this is an array type with us we are returning an array and here we will store the recard inside that okay I call set employee and result. data pass result data there are data zero okay the first recard just store the first recard there and here we will detail now the um user information let's first of all just display the name okay the name of the user so for that I will use employee. name let's check it what happened see we just printed the user name now instead of um I will first of all create a no bar here at the top then the image of the user then the detail of the user then two buttons so I wrote this code for employee detail okay here I displayed the nowbar employee management system as we did in the dashboard and here I displayed just the image how to display the image we talked about this all about this in admin area okay and this is the um details of the employee and here we have two buttons for the edit and the logout and it looks like this okay let's check it and look the image and the detail of the user and here at the down we have two buttons the edit functionality we already did in the admin dashboard okay that is the same uh employee so we can edit the data like we did in the admin dashboard but for the log out let's create a function to um uh log out user from the system okay so let's more here and here we will Implement unclick handle lagout save it and let's create this function const and the log out is equal to and here we will implement the logic and here we will now call our API so as we did in the dashboard so the same thing handle logout and we will call an API and we will return a result let's copy this code and we will paste it here and after that here we will move to employee and log out then when we get the result we will move back to start page okay let's save it and now let's create the logout API just come here to the employee router do um git logout SL logout we will just clear the cookies okay as we did in admin route just come here control F L out okay just this simple to line of code we can call the same um function also but I it here so let's check it okay now let's mo/ log out okay everything is okay imply and let's press L out so let's repes it once after reping uh press the L out didn't work let's response. clear cookie token I'll we into employee SL lout in result. cage if there was any error console.log error see it and let's check it handle log out function is also okay no problem let's move to this console reference oh navigate is not defined let's come here to the navigate here we didn't imported the navigate let's import the navigate use navigate from react autodom and after that we will create an instance of that const navigate navigate here const navigate is equal to use navigate save it here so we already logged out from the system it means that there is no cookies because we cleared the cookies let's move to contrl C and contrl V push the page Log out so we came to the login as uh employee or admin now what we we should do with the next the next thing is that if we come here to the Local Host okay so right now we faced with an empty page okay so here we will verify the user if we were already logged in so we if you were logged in as admin we will move to the admin part if you were logged in as employee we will move to the employee F if you are not Lo not logged in so then we will move to the start page okay or or the login page so let's uh perform this task okay for that let's come here to the code and let's move to our upd G6 here I will use run use effect okay create a function whenever we start our program so we will do this task create it here okay it means that we will verify the users and also we will create a function for to ify the users whenever we are at the dashboard okay we will verify all the requests from the uh user so let's write Xs dogit and we will move to http Local Host sl3000 SL verify do then we will get a result and let's first of all handle the error error if we got the result so what we should do let's do it Appo result. data. status if it means that if the status was okay so then what we should do we will check app result. data Dot um we will return the uh role okay role of the user a r uh was equal to equal to with admin so then we will move to the dashboard okay let's import the navigate and we will use navigate const navigate is equal to use navigate the navigate has imported or not yeah that has imported now let's use the Navigator here we will move to dashboard dashboard else EPO that was not admin so then we will move to the um uh employee details okay we will navigate to uh Slash um I think let's check it first of all the URL the route yeah employee details SL ID copy this and we will move to imply detail slash we will pass our ID plus ID so how we can get the ID so the ID we will return ID from uh in this data okay let's do it plus we will write instead of ID we will write result. data. ID we will return the ID also so it is okay if the status was not okay it means that we were if we were not logged in so then we will move to the start page navigate to/ start save it so now let's create this verify uh route okay let's move to our index stes we will create it in the index file and here I will create that okay let's come here down up.get SL verify and we will get here we will call our middleware okay so let's first of all create our metalware let's come here up and here I will create that const verify user is equal to this is f function with us and we will call it here verify user then we will get request and response so inside this verify user we will get request response and also next next means that whenever um we would like to jump back to this our uh route okay if everything was okay we would like to come back to this veryy user this method so then we will call next okay we will we will do it later okay now let's first of all we will uh fix our token okay to verify the user is the user logged in or not so for that let's con token is equal to request. cookies. token if the token was existed it means if it was inside the cookies so what we will do a token if the token was existed so then here we will validate okay we will verify the token if the token was okay so then we will go back to our front end else if the token was not okay so then we will return response. Json uh status false and also um the error is that not authenticated okay did we handle this part or not just come here to the uh verify user yeah we should move to our up G6 in here if the result if the status was okay if the status was not okay else we should move back to our start page okay that's okay just come here back to our index page and here now we will Implement our logic we will verify now our token is the token validated it means correct or not so for that we need to import JWT okay let's import that import Json token JWT from Jason web token okay let's should not drop inside this now let's use it ewt do verify so we will verify our token then we will specify our secret key okay so the secret key let's check our secret key let's move to uh the login page admin login uh in the admin login let's check that hly ourly yeah login so this is our secret kgwt secret key copy this and come here to the index and we should write it here and also let's Mo check the our employee secret key so let's make it JWT secret key okay should have one security key that is okay okay just come here back to index touches then we will get an error or our decoded value I will show you the decoded value which which are these values now if there was an error if there was an error so then we will return response. Json uh status false and also um we will return an error Rong credentials okay wrong uh token it means the token is not validated not the correct one that we want else we will now decode use our decoded value it means in the decoded value we stored our email in roll let's I will show you in admin okay this is the um our uh admin login see this these are our decoded value admin and rooll and email we stored these two uh roll and email so let's come here I will just write um that uh con email is equal to decoded. email and also const do R is equal to decoded do um Ro so I think instead of decoding the email we will decode the ID okay just come here to the ID to the admin route here I will add ID is equal to with the result 0. ID we should decode the ID yeah that is okay and also let's move to employee and here we will decode the id id result 0. ID so after that come here back to our index stres and here instead of this we will decode our ID and we will directly attach that with the request. id request. id is equal to and also request dot request. R is equal to decod it roll then we will call our next method okay let's let's call next so it will go back there and we attach this ID androll with our request so now whenever we come here back it means if this was validated there was no a ER and we passed it correctly so what we will do now now we will return return uh response. Json first of all the status let's check that in app.jsx we are checking data. status okay status is true then we will return our um ID and roll uh roll request. Ro uh and also the id request. id save it now let's run it okay what happened let's come here uh at the start so let's move to the console if there was an error we will solve that error first of all okay use navigate may be used only in the context of Route so let's check it where is the error that is navigate error okay navigate in which component is that navigate error so the error is that use navigate should be used just inside the router okay react autodom but we have written that uh let's come here to the op GSX we have used the use navigate outside from this route routes okay router so because of component is outside from that so let's uh do something I will cut all this code control exit and also instead of start I will make it the homepage this would be the route of start then come here to the start and in the start I will paste that code paste the code and let's remove one of them that is okay contr s and let's edit okay if the status was false so then in the else we will not specify the start because we are on the start component so let's move and check it what happened uh let's repace the page so boundary to your AIS is not defined let's define the AIS XS let's repeate again and we paste with usip is not defined okay save it let's come here see we came directly to here and let's repeate what happened request F server error so let's check the server error a server error is that canot yeah token it me it says that we cannot read the property of token so let's use cookies here I will use the cookies as um imported now let's use them okay so just come here and here we will use the cookie app. use cookie parser see we have imported the cookies then we have used them here in the index JS file now let's check it that is is okay now we will not face with that error so we came directly to whenever we refresh here so we came directly to the login or um to the login as employee or admin so right now we don't have the cookie let's check it the cookie is not stored with us let's come here to the application enter the cookies uh we have the cookies okay so I think we were logged in before so first of all I will delete the cookie let's uh Delete the cookie so after deleting the cookie now let's refresh the page so after refreshing we are at the start okay now let's log in okay let's log in as an employee what happened let's login press the login button so we came directly to the login page and the Tok the cookie has stored the token has stored inside the cookies so now if I would like to move back to for example we came directly to the to refesh our website the homepage what happened let's do it see we came directly to the employee page because we specified there if we were already logged in it means that if the token was stored inside the cookies so then we should move if that was admin we should move to the admin page if that was uh employee we should move to the employee page so right now we came directly to the employee page now let's check the admin we should log in let's log out and we we will uh lag in so we should just correct this route because whenever we L out from the system we should move to the uh SL homepage okay let's come here to the emploee detail and the delete okay the handle log out we should move to the home page to this page because we change that in after GSX so after coming here now let's login as admin. 1 2 3 4 5 and let's log in now to the system see we came and logged in as admin meain okay so now let's log out from the system what happened okay yeah these are warnings let's log out see we l out so we should directly move to the um start page okay let's move to the correct this also uh we will move to the dashboard yeah just come here to the dashboard and here in the log out we will move to the SL start page okay we will directly move to the start page so now again let's log in as emply once again we will check it come and password login so we came we logged in as admin okay uh as an employe let's close it and also close it and close it we should close it also we closed everything okay so now let's try it Local Host let's come here directly we directly came to the emploee because we were logged in as employe now let's log in log out from the system we came directly here let's log in as admin login so let's log out so let's move to an tab okay let's again come here see we directly came to the uh dashboard page so now let's press log out so we log out from the system so the last part is that to apply protected routes okay and rjs let's for example we log in as admin and I will show admin gmail.com Press login and we log in okay so whenever we log out from the system so let's press L out so we should not go whenever we press this back button we came back here so we should not do like this okay so we should protect it we should protect our routes so for that let's uh move to our reactjs and in the app.jsx we will just apply protected routes and this okay so to apply that so for that whenever whenever we log into the system there I will store a value inside the local storage okay so let's move to the login okay first of all to this login whenever we log to this successfully see this is handle submit and whenever we here we logged in successfully so here I will store a value inside the local storage local storage. set item uh that is valid the value is true so it means that valid are not valid or logged in or not login we can whatever you call this okay this the variable that we stored inside the uh login and also whenever we logged in as employee so let's check it and here let's copy this statement copy this statement and imply l in whenever we log in successfully here result do data status paste it here so we will again uh store the wallet inside local storage so whenever we l log out so we should remove this okay so just come here to the logout where once we yeah here handle logout local storage do remove item Val it copy this and I'll so whenever we log out from as an employee just come here employee detail and here handle log out here we will write that save it now let's create a protected route component okay I will create uh component protected route or private route. jsx so here what what I will do here I will pass the children okay and I will just display the con concept like this okay I will do something like this here I will check up local storage dog item valid if it was true so what we will do we will display it we will return the children else what we will do we will move back to the uh home or the start page okay so we will use navigate hook we will use navigate from react aam this tag and let's use it to is equal to homepage we will move to the homepage so now we will call this private route from our op. G6 okay control B just come here to the op G6 let's we would like to protect our dashboard so so just come here to the dashboard in the element inside the element what we will do we will call Private route okay private route that has imported and inside this we will call our dashboard control V it save it now let's check it okay what happened let's move to the browser so we are uh on the login as let's admin Let's uh login as admin.com file and Press login see okay we logged in right now okay let's check the uh uh local storage just come here to the application into the storage local storage see we stored this valid okay this valid it is stored here so now just come here now whenever we press this log out button see log out and let's check it that deleted or not see that has like deleted so if I press now this back button what happen let's check it see the back button is not working we are coming directly back to this start page when you refes this we are coming directly to this back uh start page so it was all about to create the protect uh protected hours in reactjs so it was all about employee management system I hope this video was helpful for you uh if you like this video don't forget to subscribe our YouTube channel like this video and share with the friend this video now this was just an educational video that to learn something new and to learn the concepts of Rea in note and I hope this video will be helpful for you and finally I will say thank you for watching thank you for watching thanks

Channel: Code With Yousaf

Views: 9,808

Keywords: react, javascript, react js, react project, react beginner projects, react beginner tutorial, node, node js, mysql, react and node employee management system, react and node project, full stack project, master react and node, employee management system, employee management system project, employee management system in react js, hrms software, HR Management system, hr management system project in react js, react node, react & node projects

Id: 6a4B7ev3vd0

Length: 54min 52sec (3292 seconds)

Published: Thu Oct 12 2023