Table of Contents
Introduction ( Login and Registration Form in React.js )
Any online application must have a user-friendly login and registration form. This tutorial will lead you through the process of using React.js to create a responsive form with an emphasis on user experience and simplicity.
Prerequisites
Before we begin, ensure you have the following:
- 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: Start by setting up a new React project. Open your terminal and execute the following commands:
create-react-app react-login-form
cd react-login-form
Start the Application: Launch the app in your browser by typing npm start in your terminal. This will open the app at http://localhost:3000.
Step 2: Structuring the Project
- In the src directory, create a folder named components.
- Inside 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, import React and create a functional component that returns a form with input fields for username, email, and password. Also, include buttons for login, signup.
import React, { useState } from 'react';
import './LoginSignUp.css'; // Import your CSS file
// Login and Registration Form in React.js
function LoginSignupForm() {
const [loginEmail, setLoginEmail] = useState('');
const [loginPassword, setLoginPassword] = useState('');
const [signupEmail, setSignupEmail] = useState('');
const [signupPassword, setSignupPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [loginEmailError, setLoginEmailError] = useState('');
const [loginPasswordError, setLoginPasswordError] = useState('');
const [signupEmailError, setSignupEmailError] = useState('');
const [signupPasswordError, setSignupPasswordError] = useState('');
const [confirmPasswordError, setConfirmPasswordError] = useState('');
const handleSignupClick = () => {
const loginForm = document.querySelector(".form-inner form.login");
const loginText = document.querySelector(".title-text .login");
loginForm.style.marginLeft = "-50%";
loginText.style.marginLeft = "-50%";
// Reset login form values
setLoginEmail('');
setLoginPassword('');
setLoginEmailError('');
setLoginPasswordError('');
};
// Login and Registration Form in React.js
const handleLoginClick = () => {
const loginForm = document.querySelector(".form-inner form.login");
const loginText = document.querySelector(".title-text .login");
loginForm.style.marginLeft = "0%";
loginText.style.marginLeft = "0%";
// Reset signup form values
setSignupEmail('');
setSignupPassword('');
setConfirmPassword('');
setSignupEmailError('');
setSignupPasswordError('');
setConfirmPasswordError('');
};
const handleSignupLinkClick = (e) => {
e.preventDefault();
document.getElementById("signup").checked = true;
handleSignupClick();
};
const validateLoginEmail = () => {
if (!loginEmail) {
setLoginEmailError('Please enter your email address');
return false;
}
const isValid = /\S+@\S+\.\S+/.test(loginEmail);
setLoginEmailError(isValid ? '' : 'Email is invalid');
return isValid;
};
const validateLoginPassword = () => {
if (!loginPassword) {
setLoginPasswordError('Please enter your password');
return false;
}
const isValid = loginPassword.length >= 6;
setLoginPasswordError(isValid ? '' : 'Password must be at least 6 characters');
return isValid;
};
const validateSignupEmail = () => {
if (!signupEmail) {
setSignupEmailError('Please enter your email address');
return false;
}
const isValid = /\S+@\S+\.\S+/.test(signupEmail);
setSignupEmailError(isValid ? '' : 'Email is invalid');
return isValid;
};
const validateSignupPassword = () => {
if (!signupPassword) {
setSignupPasswordError('Please enter your password');
return false;
}
const isValid = signupPassword.length >= 6;
setSignupPasswordError(isValid ? '' : 'Password must be at least 6 characters');
return isValid;
};
const validateConfirmPassword = () => {
if (!confirmPassword) {
setConfirmPasswordError('Please confirm your password');
return false;
}
const isValid = confirmPassword === signupPassword;
setConfirmPasswordError(isValid ? '' : 'Passwords do not match');
return isValid;
};
const handleSignupSubmit = (e) => {
e.preventDefault();
if (validateSignupEmail() && validateSignupPassword() && validateConfirmPassword()) {
// Signup form submission logic here
console.log('Signup form submitted');
} else {
console.log('Signup form has errors');
}
};
const handleLoginSubmit = (e) => {
e.preventDefault();
if (validateLoginEmail() && validateLoginPassword()) {
// Login form submission logic here
console.log('Login form submitted');
} else {
console.log('Login form has errors');
}
};
return (
<div className="wrapper">
<div className="title-text">
<div className="title login">
Login Form
</div>
<div className="title signup">
Signup Form
</div>
</div>
<div className="form-container">
<div className="slide-controls">
<input type="radio" name="slide" id="login" defaultChecked />
<input type="radio" name="slide" id="signup" />
<label htmlFor="login" className="slide login" onClick={handleLoginClick}>Login</label>
<label htmlFor="signup" className="slide signup" onClick={handleSignupClick}>Signup</label>
<div className="slider-tab"></div>
</div>
<div className="form-inner">
<form action="#" className="login" onSubmit={handleLoginSubmit}>
<div className="field">
<input type="text" placeholder="Email Address" required value={loginEmail} onChange={(e) => setLoginEmail(e.target.value)} onBlur={validateLoginEmail} />
{loginEmailError && <div className="error">{loginEmailError}</div>}
</div>
<div className="field">
<input type="password" placeholder="Password" required value={loginPassword} onChange={(e) => setLoginPassword(e.target.value)} />
{loginPasswordError && <div className="error">{loginPasswordError}</div>}
</div>
<div className="pass-link">
<a href="#">Forgot password?</a>
</div>
<div className="field btn">
<div className="btn-layer"></div>
<input type="submit" value="Login" />
</div>
<div className="signup-link">
Not a member? <a href="" onClick={handleSignupLinkClick}>Signup now</a>
</div>
</form>
<form action="#" className="signup" onSubmit={handleSignupSubmit}>
<div className="field">
<input type="text" placeholder="Email Address" required value={signupEmail} onChange={(e) => setSignupEmail(e.target.value)} onBlur={validateSignupEmail} />
{signupEmailError && <div className="error">{signupEmailError}</div>}
</div>
<div className="field">
<input type="password" placeholder="Password" required value={signupPassword} onChange={(e) => setSignupPassword(e.target.value)} onBlur={validateSignupPassword} />
{signupPasswordError && <div className="error">{signupPasswordError}</div>}
</div>
<div className="field">
<input type="password" placeholder="Confirm password" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} onBlur={validateConfirmPassword} />
{confirmPasswordError && <div className="error">{confirmPasswordError}</div>}
</div>
<div className="field btn">
<div className="btn-layer"></div>
<input type="submit" value="Signup" />
</div>
</form>
</div>
</div>
</div>
);
}
export default LoginSignupForm;
// Login and Registration Form in React.js
2. 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.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* Import Font Awesome styles */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
// Login and Registration Form in React.js
/* Your existing CSS styles */
/* ... */
/* Additional styles can be added below */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
}
::selection{
background: #fa4299;
color: #fff;
}
.wrapper{
overflow: hidden;
max-width: 390px;
background: #fff;
padding: 30px;
border-radius: 5px;
box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
}
.wrapper .title-text{
display: flex;
width: 200%;
}
.wrapper .title{
width: 50%;
font-size: 35px;
font-weight: 600;
text-align: center;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .slide-controls{
position: relative;
display: flex;
height: 50px;
width: 100%;
overflow: hidden;
margin: 30px 0 10px 0;
justify-content: space-between;
border: 1px solid lightgrey;
border-radius: 5px;
}
.slide-controls .slide{
height: 100%;
width: 100%;
color: #fff;
font-size: 18px;
font-weight: 500;
text-align: center;
line-height: 48px;
cursor: pointer;
z-index: 1;
transition: all 0.6s ease;
}
.slide-controls label.signup{
color: #000;
}
.slide-controls .slider-tab{
position: absolute;
height: 100%;
width: 50%;
left: 0;
z-index: 0;
border-radius: 5px;
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
input[type="radio"]{
display: none;
}
#signup:checked ~ .slider-tab{
left: 50%;
}
#signup:checked ~ label.signup{
color: #fff;
cursor: default;
user-select: none;
}
#signup:checked ~ label.login{
color: #000;
}
#login:checked ~ label.signup{
color: #000;
}
#login:checked ~ label.login{
cursor: default;
user-select: none;
}
.wrapper .form-container{
width: 100%;
overflow: hidden;
}
.form-container .form-inner{
display: flex;
width: 200%;
}
.form-container .form-inner form{
width: 50%;
transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field{
height: 50px;
width: 100%;
margin-top: 20px;
}
.form-inner form .field input{
height: 100%;
width: 100%;
outline: none;
padding-left: 15px;
border-radius: 5px;
border: 1px solid lightgrey;
border-bottom-width: 2px;
font-size: 17px;
transition: all 0.3s ease;
}
.form-inner form .field input:focus{
border-color: #fc83bb;
/* box-shadow: inset 0 0 3px #fb6aae; */
}
.form-inner form .field input::placeholder{
color: #999;
transition: all 0.3s ease;
}
form .field input:focus::placeholder{
color: #b3b3b3;
}
.form-inner form .pass-link{
margin-top: 5px;
}
.form-inner form .signup-link{
text-align: center;
margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link a{
color: #fa4299;
text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
text-decoration: underline;
}
form .btn{
height: 50px;
width: 100%;
border-radius: 5px;
position: relative;
overflow: hidden;
}
form .btn .btn-layer{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: -webkit-linear-gradient(right, #a445b2, #fa4299, #a445b2, #fa4299);
border-radius: 5px;
transition: all 0.4s ease;;
}
form .btn:hover .btn-layer{
left: 0;
}
form .btn input[type="submit"]{
height: 100%;
width: 100%;
z-index: 1;
position: relative;
background: none;
border: none;
color: #fff;
padding-left: 0;
border-radius: 5px;
font-size: 20px;
font-weight: 500;
cursor: pointer;
}
.error {
color: red;
font-size: 16px;
}
Step4. Integrating the Form into the App.js
- Update App.js: Import LoginSignupForm into App.js and render it inside the App component.
import './App.css';
import LoginSignupForm from './components/LoginSignUp';
// Login and Registration Form in React.js
/* Login and Signup Form in React.js */
function App() {
return (
<div className="App">
<LoginSignupForm />
</div>
);
}
export default App;
2. Apply Global Styles: In index.css, define global styles such as font family, background color, etc.
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;
}
// Login and Registration Form in React.js
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
Step 6: Running and Testing the Application
- Run the Application: Start the application again using npm start.
- Test the Form: Ensure that the form is functional and responsive. Check if inputs are capturing data correctly and if the form reacts appropriately to user interaction.
Conclusion
Congratulations! You have successfully created a login and registration form in your React application. This form serves as a solid foundation and can be further enhanced with 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.
-> Creating a Responsive Login and Signup Form in React.js
1 Comment
Pingback: Ultimate Appointment Request Form in HTML and CSS - Tech Masters Lab