Table of Contents
Introduction (Login and Signup Form in React.js)
Building an engaging and efficient login and signup form in React.js crucial for user interaction on any web application. In this guide, we’ll develop a responsive form using React.js, focusing on simplicity and user experience.
Prerequisites
- Basic knowledge of JavaScript, HTML, and CSS.
- Node.js and npm installed on your computer.
- A code editor like Visual Studio Code.
Step 1: Initialize Your React Application
- Create a New React App: Begin by setting up a new React project. Open your terminal and execute:
npx create-react-app react-login-form
cd react-login-form
- Start the Application: Type npm start in your terminal. This will launch the app in your browser at http://localhost:3000.
Step 2: Structuring the Project
- In the src directory, create a folder named components.
- In the components directory, create a folder LoginSignUpComponent and assets
- Inside LoginSignUpComponent, create LoginSignUp.jsx and LoginSignUp.css for your login and signup form.
Step 3: Building the Form Component
- Crafting the JSX Structure: In LoginSignUp.jsx, start by importing React. Create a functional component that returns a form with input fields for username, email, and password. Also, include buttons for login, signup, and password recovery.
import React, { useState } from 'react';
import './LoginSignup.css';
import user_icon from '../Assets/person.png';
import email_icon from '../Assets/email.png';
import password_icon from '../Assets/password.png';
//Login and Signup Form in React.js
export const LoginSignUp = () => {
const [action, setAction] = useState("Sign Up");
const [showForgotPassword, setShowForgotPassword] = useState(false);
const handleForgotPasswordClick = () => {
setShowForgotPassword(true);
setAction(""); // Hide other forms when showing forgot password
};
const handleFormSwitch = (formType) => {
setAction(formType);
setShowForgotPassword(false); // Hide forgot password when switching forms
};
const handleBackToLogin = () => {
setShowForgotPassword(false);
setAction("Login");
};
return (
<div className='container'>
<div className="header">
<div className="text">
{showForgotPassword ? "Forgot Password" : action}
</div>
<div className="underline"></div>
</div>
<div className="inputs">
{showForgotPassword ? (
<>
<div className='input'>
<img src={email_icon} alt=""/>
<input type="email" placeholder='Enter your Email'/>
</div>
<div className='submit-container'>
<div className="submit" onClick={() => {/* Handle send password reset email logic here */}}>
Send
</div>
<div className="submit gray" onClick={handleBackToLogin}>
Back
</div>
</div>
</>
) : (
<>
{action === "Login" ? null : (
<div className='input'>
<img src={user_icon} alt=""/>
<input type="text" placeholder="Name" />
</div>
)}
<div className='input'>
<img src={email_icon} alt=""/>
<input type="email" placeholder='Email Id'/>
</div>
<div className='input'>
<img src={password_icon} alt=""/>
<input type="password" placeholder='Password'/>
</div>
{action === "Sign Up" ? null : (
<div className='forgot-password' onClick={handleForgotPasswordClick}>
Lost Password? <span>Click Here</span>
</div>
)}
</>
)}
</div>
{!showForgotPassword && (
<div className='submit-container'>
<div className={action === "Login" ? "submit gray" : "submit"} onClick={() => handleFormSwitch("Sign Up")}>
SignUp
</div>
<div className={action === "Sign Up" ? "submit gray" : "submit"} onClick={() => handleFormSwitch("Login")}>
LogIn
</div>
</div>
)}
</div>
);
};
- Styling the Form: Use LoginSignUp.css to add styles. Focus on making the form intuitive and responsive. Style input fields, buttons, and any text elements.
/* Login and Signup Form in React.js */
.container {
display: flex;
flex-direction: column;
margin: auto;
margin-top: 200px;
background: #fff;
padding-bottom: 30px;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
width: 100%;
margin-top: 30px;
}
.text {
color: #d3435b;
font-size: 48px;
font-weight: 700;
}
.underline {
width: 61px;
height: 6px;
background: #d3435b;
border-radius: 9px;
}
.inputs {
margin-top: 55px;
display: flex;
flex-direction: column;
gap: 25px;
}
.input {
display: flex;
align-items: center;
margin: auto;
width: 480px;
height: 80px;
background: #eaeaea;
border-radius: 6px;
}
.input img {
margin: 0px 30px;
}
.input input {
height: 50px;
width: 400px;
background: transparent;
border: none;
outline: none;
color: #797979;
font-size: 19px;
}
.forgot-password {
padding-left: 35%;
margin-top: 27px;
color: #797979;
font-size: 18px;
}
.forgot-password span {
color: #d3435b;
cursor: pointer;
}
.submit-container {
display: flex;
gap: 30px;
margin: 60px auto;
}
.submit {
display: flex;
justify-content: center;
align-items: center;
width: 220px;
height: 59px;
color: #fff;
background: #d3435b;
border-radius: 50px;
font-size: 19px;
font-weight: 700;
cursor: pointer;
}
.gray {
background: #EAEAEA;
color: #676767;
}
Step 4: Implementing Form Logic
- In LoginForm.jsx, manage the form state using React’s useState hook. Handle input changes and form submissions.
- Implement basic validation checks like email format and password length.
Step 5: Integrating the Form into the App
Update App.js: Import LoginForm into App.js. Then, render LoginForm inside the App component.
import './App.css';
import LoginForm from './components/LoginForm';
/* Login and Signup Form in React.js */
function App() {
return (
<div className="App">
<LoginForm />
</div>
);
}
export default App;
Apply Global Styles: In index.css, define global styles such as font family, background color, etc.
/* Login and Signup Form in React.js */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100vh;
background-color: rgb(206, 191, 106);
}
/* Login and Signup Form in React.js */
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
Step 6: Running and Testing the Application
- Run the application again using npm start.
- Test the form for functionality and responsiveness. Ensure that inputs are capturing data correctly and that the form reacts appropriately to user interaction.
Conclusion
You now have a fully operational login and signup form in your React application. This form is a great starting point and can be enhanced with further features like real-time validation, animations, and integration with a backend for authentication.
If you want to download the project. ClickHere: Github
Explore more:
-> Create A Login Registration and Forgot Password Form In HTML CSS and JavaScript.
-> Creating Responsive Login and Registration Form in Html CSS and JavaScript with Validations.
-> Create a Stunning Tailwind CSS Registration Form with HTML and JavaScript Validation.
3 Comments
Pingback: Build a Dynamic Spring Boot and MongoDB Rest API - Tech Masters Lab
sabdiel azdad
Kaylis Bruckmeier