Design Modern Responsive Login & Signup Form With Material UI And React | Material UI Project

so now we have learned the topics of the material ui and now in this module it's time to start building some projects so here we start with the mini project one which is based on the login and the register screen which will be building with the material ui and it will be a fully responsive project and you can also switch between the scenes like if you are on a login you can also switch to the sign up and if you are on a sign up you can switch to the login screen as well and it will be a fully responsive project and then we will use couple of components from the material ui like the box we have learnt about the box and we'll use it for wrapping the layout and then we'll be using the typography for text headings and then we'll be using the buttons for submitting the data of the form and then we will use the icons as well and then the source code of this tutorial is also attached so let's see the demo and then we will jump right into it so here is the project which we will be building so we have a login screen and then you can see this is a nice login screen and then you can say we have two text fields for the login first is email and then the second one is the password and then you can also say we have the login button here as well and then we also have a change to sign up button as well so once people click on the change to sign up now you can see now the sign up screen will appear and then you can see now we'll be having three text fields here first for the name the email and the password which we want to set and then again we can also just move on to the login as well by clicking on the change to login and then you can also see some icons here in the buttons as well so for the login we have different icon and for the sign up or the register we have different icon and all of the data of this form is also stored inside the state so we can also get the data as well so once i haven't removed this i will now just click on the login now you can see we have the data of the login as well we have the email and the password and once i will click on the change to sign up we can delete this data and then we can just provided the name as the nickel and once i will click on the register now you can see we have the name and the email and the password of the user as well so everything is working fine so this is the login screen which we want to build and now i will show you if this is responsive or not so now you can see if i will not just to minimize the screen as well now you can see till the access screen as well project is fully responsive so it's a fully responsive project which you can build so let's start implementing this project into our application so now we are into the vs code and now we can just start implementing the project so now we have the file as the test.js we can also create a new file as the auth.js to start implementing this project as well so now we have the auth and now we can just have here the initial setup of the react application with the rafce command and after that now we can just start building the application and now we can just remove this auth and inside that we will have a form because this is a login and designer project so first thing which we need is the form and inside this form now we'll have the box so we will be using the box with the material ui so now i will import this box as well we need to import the box from mui material so now the box is now imported and now we can just use the box and now inside this box now we will just define some styles like we can just define some styles like we can just find a display can be equals to the flex and then we can also define the flex direction and the flex direction will be close to the column so this is the initial setup for this box and after this box now we will just add any typography to test if everything is working fine or not and in the typography then we will add some text like this is a form so if i will now just save and if i will now just open the react application on the server so the npm start and now i forgot to add this inside the app.js as well so we need to add there as well so now instead of this test now we need to add the auth so we'll be using the auth here so now the auth is now imported and now we can just remove the test from there as well so now if i will now just save i will now move on to the application now you can see this is a form and if you will just inspect the element from there like now you can see you have the typography root and then this is into the html which is into the form and now you can just select anything and then you can also see we have a form we have the box and then we have the typography so now everything is working and now we need to just define some styles inside that so in the form we will have the typography and the typography can be a login and the sign up and after the typography then we will have some items like we will have the text fields so we'll be using the text fields from the material ui so there will be three text fields for now so i will now just copy i will now paste the three text fields here so if i will now just save now you can see if i will now just close this now we have three text fields onto the browser and now i know that it is not looking good but now we have to style everything from there as well and after the text field now we'll have the button as well from there so we have a button and then it can be the login button if i will now save so now you can see now we have the login button as well so now we have defined the input elements inside the form and now after that now we can just define some more styles like we can just define here the max width property so the max weight we can just define here as the 400 to that so if i will now just save so now you can see the width will be now decreased of the login form you can see we have the login and now the width is now decreased and after that now we can just define some more flex items so we can just define the flex i think we can just define align items and the align items can be close to the center and then we can also define the justify content can also be the center so now we have defined some flex items there and now we will see there will be some change onto the screen and now you can see there is some change and after that now we can just define some more style we can just define here the margin and it can be the auto from all the sides so if i will now save so now you can see this is now into the center of the web page and after that we can just define some margin from the top as well so we have the margin from the top and the margin top can be we can just define as the five for now it is a hardcoded value for now and now you can see now we have the form and after that we can just define some padding as well inside this form as well for the padding we can just define the padding equals to the something like five or we can just define the three as well for the padding so now you can see there will be some padding between the element of the box and then if you will just inspect that if you just select the box now you can see this is the form and you can see this is the box which has the green color on the background and now it has some paddings between the content and after that we can just move on and then we can just define some border radius as well the border radius for now will be equals to we can just define as the five so if i will now save if i will not just move on to the application once again but now we don't see any borders so we need to define the border as well for that and after the border radius now we can just define the box shadow as well to implement the shadow inside the application and for the shadow we can just define a string and then we can just define the five pixels and again five pixels horizontally and then we can just define the 10 pixels of blur and then we can just define the color of the hash ccc of the box shadow so if i will now save so now you can see now we have the rounded border with the box shadow inside that and after that we can just have here the hover property as well and for the hover we need to add the sx prop and the sx prop we already knew about the sx prop and the sx prop is used to add some custom css styles into that and then we can just have here the hover property so you can just press the control and the space and then you will see all of the properties here inside that and if you will just add the hover now you can see we have the hover property and now you have the hover and inside that you can also create an object of the properties for the hover whenever we will hover over it so the styles which will apply there will be applied to the there as well so we can just have the box shadow and the box shadow we will just increase the box shadow in the over so that it should be a clickable so we can just add here the 10 pixels we can just double all of the items from there 10 pixels from vertically 10 pixels horizontally and then we can have a 20 pixels of blur and then the color will be same if i will now save i think there is an error so i made a mistake so there should be the colon here and not just the object and inside that now we need to remove the curly braces as well so if i will now save and it should be compiled successfully now it is compiled and now we can just move on to the application and once i will just hover over it now you can see the blur is now increased and now the shadow is now increased of the box and everything is working quite fine for now now we need to just define some styles for the typography and for the text fields as well so for that we can just move on to the typography and inside that we can just define the variant so the variant we need to define for the typography can be the h3 or h2 for the heading and after that we can just define the padding as well for the typography as well so that it can have some space between the elements and then we can just have here the text align into the center as well so if i will now just save with that if i will now just move on to the application once again now you can see now we have the big login typography there and now it is looking good and now you can see now we have also defined the login as well and now we need to just create these styles for the typography as well so for that we can just move on to the text fields and then we can just define a variant and it can be the outlined and we can just define the variant for all three text fields there variant equals to the outline and there as well variant equals to the outline so if i will now just save i will now move on to the application now the variant would be now outlined there and after the variant now we can just define some more styles so we can just define the placeholder the placeholder for first text field will be the name and we can just copy that and then we can just paste for the second text field here as well we have the placeholder equals to the this placeholder equals to this so it will be the email it will be the password so we have defined the placeholder as well so if i will now just save now you can see now we have the name email and the password there and now we can just define the type of the text fields as well so we can have a type and this is of the type of the text so we don't need to add anything here because it is a by default text but i will now still edit here and now after that now we can just add the type and this would be the type of the email so this text field will be the email and then we can just have here the password as well for the last text field so we can just change the email to the password so if i will now just save and if i will now just move on to the application now you can see for the name we can just write any name over there and for the email we need to write the email over there as well and then we can just have here the password as well and for the password now you can see now we need to add the password for the password and after that now we can just define some margin between the text field as well and now you can see there is no any margin and all of the text fields are now just attached to each other so we can just define the margin so the text fields have the prop of the margin and now you can see the margin can be the none dense or the normal so we can just divide the margin and we need to define the margin as the normal so we can just do same for every other text field as well so we can just copy out and then we can just paste here in the email and in the password as well so if i will now save file now move on to the application now you can see now the text fields have good margin over there so we have almost completed the login screen as well in just very less time and after that now we can just move on to the button and then we can just tell the button as well so for the first button here that we want to use will be having the variant will be equals to the contained and then we can just define the color as well of the button so we can just define the color as the warning so if i will now just save if i will now move on to the application now you can see now we have the color equals to the warning and now you can see the the button is looking nice and then we can just define some more props to the button as well so we can just define the sx and then we can just define the margin from the top because the margin top is very less so we can just define the three so if i will now save so now you can see now we have the three margin from the top and then we can just have here the border radius as well inside the button so we can have a border radius and the border radius can be equals to the three so if i will now save five will move on to the application now you can see the button is there and you can see we have the border radius as well on the buttons and everything is working perfectly fine till now and now till now you can see this is also a responsive project till now now you can say you can just minimize the screen and now you can see it is fully responsive and it is fully in the center of the web page and after that we can just define here one more button for the change to sign up or change to login we can just have here the one more button and for this button we don't need to define here the variant and the color so we can just remove that and after that the text will be the change to and it will be the sign up for now so if i will now just save if i will not just move on to the application again now you can see now we have the change to sign up button but now you can see now we have three text fields so now we will just fix the functionality as well so now the stylings of this form is now almost complete and now we can just style more according to our requirements but now we will start implementing the validations with the form as well so we will handle the form with the state and then we will just handle all of the button for the change to sign up so the sign up text should appear and then we can just have here all of the state handling feature inside the form as well so let's start implementing this state so now the styling part in the application is completed and the next thing which we want to do is we want to implement the state inside the application now you can see now we only have the login text here and this is a static and the hard coded text so we need to update this state dynamically and then the state will update the text here as well so once the screen will be of the sign up screen so now you can see now we only have the sign up screen only because we have the name we have the email and the password so all three fields contain the sign up and if there would be only two fields of the email and the password then that will be the login screen so for now this is a sign up so we need to change the state accordingly if the screen will be of the login so we need to change the state to the login or as the state will be the sign up and then we can just also change the change to sign up button from there as well so if there will be the sign up we need to add the change to login and if there would be the login we need to change the state to the sign up so for that we can just move on to the application and then we can just use the use state for that and the use date we will have the variable as this is sign up so that will be a boolean state so whenever the signup will be true we need to show the sign up screen and whenever the signup will be false we need to show the login so for that we can just have it is sign up and for the set is sign up and by default value will be close to the false so this will be the use date and after that we need to update this state as well so in the change to sign up button that we have we can just have here the on click prop we can just have either one click and whenever we will click that we will just update this state again so then we will have here the callback only and then we will have the reset is sign up prop set is signup state and then it will be equal to the reverse value of this is sign up so for that we will just have here the reverse value of the exclamation mark and then we will have the sign up here so if i will not just save and if i will now just log the value of this sign up as well so we can just log this is sign up so if i will now just save i will now move on to the application now you can see once i will move on to the inspect once i will move on to the console now we can just clear everything from there and once i will click on the change to sign up now you can see now we have the login now we have the signup properties too and once i will click on the change to sign up again now the signup property will be close to the false so now after that now we can just add the condition like we only need to show first text field whenever the is signup will be close to the true so that it will help so whenever the signup will be true then only we need to show the first text field or as there will be the login screen inside the application so for that we can have a sign up and then only we need to render this text field so if i will now just save i think this is the email text field so we need to remove that we need to add it to the name here so like now you can see this is the name so we need to add the condition here like the sign up is there and then only we need to render this text field only so if i will now just save if i will now go on to the application now you can see now we have the login screen but once i will just click on the change to sign up now you can see now we have the name here and once every click on this change to sign up again and now you can see now we have the login and now we can just fix the functionality one by one so the first functionality that we want to fix would be the change to sign up button so for that we can just move on to the text of the change to sign up we can just remove the text and then we can just add the condition so the condition would be if the signup property will be equals to the true and then we need to add the text as the login and then we need to add here the and if the assign a property will be equals to the false so we will just add the text at the sign up and before that now we need to add the change to so we can add a change to so if i will now just save and if i will just move on to the application now you can see now we have the change to sign up but once i will click on the change to sign up now you can see we have the change to login and once i will click again now you can see again we have the change to sign up again so everything in now application is now working fine and now it is working fine and now we need to just update the state of this typography as well so for that we can just move on to the typography and here inside the static text now we need to add the text so if the assign a property will be equals to the true so we can just have here the is sign up when the signup will be close to the true then we need to add either the sign up or else if the login will be true or if the sign up will be false then we need to add the login so if i will now just save if i will now move on to the application now you can see we will now refresh the page again now initial value is the false now we have the sign up and now you can see now we have the login screen inside the application and again if i will just click on the change to sign up now you can see now we have the sign up screen we have the sign up and then we have the name field as well but now you can see we have the change to login as well but the button is still showing the login so for that we can also change the button as well so we can just move on to the button and then we can just remove the static text and again we have the sign up if the assigner will be true then we need to show here the sign up or else we need to show the login so if i will not just save again i will not just move on to the application again now you can see everything is working quite fine inside this functionality so now this functionality of showing the login and the sign up screen is fully completed and now the next thing which we want to do is we want to handle the state of this text field as well so for now we cannot get the values of these text fields so now we need to add the use state again to get the values of these text fields as well so let's start so we can just move on and then we can just declare one more state so we can just have one more state here as well so we have the use date so we have already handled the form inside the previous lectures so we can just add here the same functionality so we will add here the name and the name by default value will be equals to the empty string and then we'll have the email by default value will again be the empty string and then we have the password by default value again we will have the empty string and after that now we need to match the name to the text fields as well so now you can see now we have the text field and now we need to add the name as well so this identifier of the text field will be equals to the name and for the email we need to add the name equals to the email and for the password we will have the text field of the name equals to the password so we have the name equals to the password if i will now just save so there will be no any change onto the screen because now we have just defined some identifiers into the text field so now this should be the same of the name email and the password of the name equals to the name name equals to the email and the name equals to the password and after that we need to define the value as well so we need to just define the value of the state value so for that we can just have the inputs dot email here inside the email and then we need to just define the name value will be called to the inputs dot name and for the password as well we will have the value will be equals to the inputs dot password so now the value will be there so if i will now just save so now we cannot edit any value inside this email or the password field or inside the name field as well because now we have just defined the value of the empty string so the value will not be changed even the sign up the value will not be changed of any text field so now to accept and handle all of the values inside the text field so we need to just move on to the text field and then we need to add the own change function inside the text field so whenever the values of the text field will be changed the on change function is called so we can just have the handle change function inside the own change so we can have a handle change and the same function would be there in every text field so we can just add here to this text field as well and to this text field as well so if i will now just save so now you can see now we have the handle change function and now we need to define the handle change as well so we can just define the const and the change will be equal to the function which will get e as the parameter which is the event and after that we need to just update the values of the inputs so after that now we need to update the state of the inputs as well for that we need to either this set inputs and then first we need to grab the previous states so to grab the previous state we have the callback function inside that so we can have the callback function and after that now we will just return the previous state inside that then we will just have the object inside that and for the object first we will have the previous state inside that object so we will have that previous state and after that we need to add there the name property of the text fields so we can just grab the name property of the event.target dot name property of every text field and then we will just grab the value of the text field as well so we'll have the event dot target dot value so this is how we will update this state inside that so first we will have the previous state because we don't need to lose the previous state of the text field as well so so if we type the nikx so we don't need to lose the nik of the previous state so for that we need to add the previous state and after that we need to target the name property of that text field like name is the same name that we have just defined in the inputs as we have discussed previously as well and then we will just dynamically update the value of that name only so now if i will not just save and if i will not just move on to the application now you can see now we have the login and now you can see the values can be now changed inside this text fields and now you can see it is accepting values and then we can just have all of the values as well so to get all of these values now now we need to just move on and then we need to just click on the sign up so whenever we will click on the sign up so we need to get all of these values of this form so for that we can just move on to the button submit button and then we can just add the type of the button to the submit because now we are into the form so we need to add the type equals to the submit and after defining the type now we need to move on to the form and then we need to define the on submit here inside this form so whenever the form will be submitted so the onsubmit function will be then called and then we can just have here the handle submit as well so now we need to declare the handle submit function const handle submit will be equals to the function which will have the event as the parameter and then we will just have here the handle submit so the first thing which we want to do inside that we need to just prevent the default behavior of the html inside that so will we need to call the event.prevent default because the form data sends a new http request whenever the submit button is clicked so we need to just prevent that also so now the event.event default is now called and now we can just log the values as well inside that so we can just grab the values of the inputs so if i will now just save and if i will not just move on to the application we can just move on to the developer tools again and now we are into the console so once i have let anything into that like we have the name equals to the nickel the email we have is the nickel test.com we can have any password like one two three four five six so once i will just click on the sign up now you can see now we are able to handle all of this state inside the check field as well now we can just get all of this value like the name we can grab the name we can get the email and then we can get up the password so now we are getting the values as well so once i will click on the change to login and now once i will just click on the login button once i will click on the submit button now you can see now we can grab the values like now you can see the name is the empty string because we don't have any name and then now you can see now we have the email as well inside that we can grab the value of the email as well and then you can see we have the value of the password as well so everything in our application is working fine and once you will just click on the change to sign up and then you will just add anything into the name you can add the nickel again you can just change the email as the test at the test.com and then you can just change the password of the one two three four five six so once you will just click on the sign up now you can see the state of that application will be then changed and now you can see you have the name as the you can have the email as the nickel at the test.com you can have the password as the one to three four five six and once you will just click on the login again like now you can see you can just get all of these values again and now you can see there is an error so now you can see once you will just switch from the sign up to login and now you can say you can still see the name as the nickel here so once you will just click on the login again like now you can see you have the values but you can still see the name as the nickel so for that we can just move on to the application and we can just fix that also like now you can see now we have the button on click so here we have the set is sign up and then we can just wrap it inside the function so we can just remove it from here and then we can just have the handle or then we can just have here the function as the reset state so we can just copy that and then we can just declare a new function at the reset state cost reset state will be cost to the function and inside this function the first thing which we want to do is we want to just change the state of the set is sign up so it will be equals to the previous value of the sign up and after that we need to reset the state of the inputs so for that we can have the set inputs so the by default value of the inputs will be there so the inputs will be having the value as the name will be equals to the again the empty string the email again will be the empty string and for the password again we will have the empty string so this is how the things work so if i will now just save if i will now move on to the application we can just remove everything from there once i will just click on this change to sign up once i will click anything into the state like we have the name email and the password once i will just click on the sign up now you can see now we have the name and the email and the password and once i will just click on the login now you can see the state is now changed and now once i will add anything inside that once i will click on the login now you can see now you can see the name is now the again the empty string but we have the values of the email and the password so now everything in our application is working perfectly fine so now we have completed this project but the last thing which we have missed is we want to add the icons into the login button and into the change to sign up buttons as well so for that we can just move on to the meui.com in the icons so we can just move on to the icons and then you will see there will be the material icons and then you can just select any icon from there like for the login we can just have a login you can just log in and then search for it like now you can see you can have the outline and now you can see this login is looking good so we can just get this login icon and then we can just move on to the application and then we can just paste this icon and after that we want to get the register icon as well so we have the register and now you can see this register icon would be okay so we can just get that and then we can just import that icon here as well after importing the icon now we have the prop inside the button which is the end icon so with that the icon will be added into the end of the button so for that we can just add here the icon so we can just add here the login icon from there so we can have the login outlined icon so this is how we can add the icon so if i will now just save and if i will not just move on to the application now you can see now after the login now we have the icon here and now it is looking good as well so for that we can again get a state inside that so we can have inside the state so we can just have the assign a property again so when the sign up will be equals to the true then we need to handle a different icon and and if the signup will be close to the false then we need to handle the login so if the signup property will be close to the true so we'll have the how to register outlet icon so we can just get this icon if the signup is equal to the true and if the signup is false then we will add this icon here so if i will now just save and if i will not just move on to the application now you can see now we have the icon inside the login and once i will just change to sign up now you can see in the sign up we have different icon and in the login we have different icon there so you can also add the icon to change to sign up button as well so you can just get this and icon property and then you can just add the end icon here as well so just you just need to change the order of the icons so for that you can just get this icon and then you can just add the condition here and here you need to remove this column here so now what it is saying that you have the end icon so the signup property is equals to the true then we need to show the login icon as we have did here and then if the is sign up is equals to the false then we need to add the sign up icon so if i will not just save if i will now move on to the application now you can see in the sign up we have this change to sign up once you will just click on the change to sign up you have the change to login and in the login you have the login icon here so everything of our project is completed successfully so now we will see the summary of this application of what we have built and now let's see the summary part of what we have done throughout this section so we have just created the login and the signup project and this is a fully responsive project that you can use on any screen size and this is a fully responsive project and then we have also done the state handling inside this project as well so we have handled the state of the different elements like the typography we have entered the state of the button text and then we have handled the state of the changing of screens like we have two screens here inside the application so we have a button of changing the screen like we have this login screen so once we click on the change to sign up the sign up screen will appear and once we will click on the change to login the login screen will appear so we have handled the state handling with that and everything is handled dynamically and we have handled this state of the input elements as well like the text fields so we handle the state of the text field and we have dynamically got their values as well so we have properly done the state handling part and then we have also made use of the icons inside the material ui so with that we have just completed the login and the signup project of the material ui so we have completed our first mini project and now we will have more projects later in this course

Channel: Indian Coders

Views: 18,774

Keywords: react login form with material-ui, react login form tutorial, react login form project, react login form with bootstrap, react register and login form, login and registration form in react js, basic login form in react js, how to create login form in react js, create simple login form with react js code, create a modern react login/register form with smooth animations, material ui login form react, design a login form using material ui, material ui form in react, react login form

Id: ZSBZ4QrfETM

Length: 31min 21sec (1881 seconds)

Published: Mon Jul 11 2022