Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "How To Create a Simple Responsive Login and Signup Form in React Js | React Project", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Setting Up the Project
Create a Project Folder:
- Make a new folder, for instance, “login-signup-form-react”.
- Open this folder in your VS Code editor.
Initialize the Project:
npm create vite@latest ./ -- --template react
npm install
npm run dev
Modify folder and CSS Files:
- Remove the default assets folder and App.css file.
- Replace the content of index.css with the provided CSS code.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.app {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
transition: all 0.5s ease;
background: linear-gradient(135deg, #6a11cb, #2575fc);
}
.login-page {
background: #6a11cb;
}
.signup-page {
background: #2575fc;
}
.form-container {
position: relative;
max-width: 450px;
width: 90%;
padding: 20px;
background: #fff;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
border-radius: 15px;
overflow: hidden;
transform-style: preserve-3d;
animation: pageTransition 1.5s ease-in-out;
}
/* Animating the form container with a complex 3D flip effect */
@keyframes pageTransition {
0% {
transform: rotateY(90deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotateY(0deg);
}
}
.switch-link {
margin-top: 30px;
width: 100%;
text-align: center;
font-size: 14px;
color: #555;
cursor: pointer;
}
.switch-link:hover {
text-decoration: underline;
}
Creating the Components
- Login.jsx
- Signup.jsx
- Form.css
Adding the Codes
import React, { useRef, useEffect, useState } from "react";
import "./Form.css";
import eyeOpen from "../assets/eye-open.png";
import eyeClose from "../assets/eye-close.png";
function Login() {
const inputPassword = useRef();
const [showPassword, setShowPassword] = useState(false);
const handleShowPassword = () => {
return setShowPassword(!showPassword);
};
useEffect(() => {
if (inputPassword.current) {
inputPassword.current.type = showPassword ? "text" : "password";
}
}, [showPassword]);
return (
<div className="form">
<h2>Login</h2>
<span>Welcome back!</span>
<form>
<input type="text" placeholder="Username" />
<div>
<input ref={inputPassword} type="password" placeholder="Password" />
{showPassword ? (
<img onClick={handleShowPassword} src={eyeOpen} />
) : (
<img onClick={handleShowPassword} src={eyeClose} />
)}
</div>
<button type="submit">Login</button>
</form>
</div>
);
}
export default Login;
import React, { useEffect, useRef, useState } from "react";
import "./Form.css";
import eyeOpen from "../assets/eye-open.png";
import eyeClose from "../assets/eye-close.png";
function Signup() {
const inputPassword = useRef();
const [showPassword, setShowPassword] = useState(false);
const handleShowPassword = () => {
return setShowPassword(!showPassword);
};
useEffect(() => {
if (inputPassword.current) {
inputPassword.current.type = showPassword ? "text" : "password";
}
}, [showPassword]);
return (
<div className="form">
<h2>Signup</h2>
<span>Register and get 5% bonus!</span>
<form>
<input type="text" placeholder="Username" />
<input type="email" placeholder="Email" />
<div>
<input ref={inputPassword} type="password" placeholder="Password" />
{showPassword ? (
<img onClick={handleShowPassword} src={eyeOpen} />
) : (
<img onClick={handleShowPassword} src={eyeClose} />
)}
</div>
<button type="submit">Signup</button>
</form>
</div>
);
}
export default Signup;
.form {
display: flex;
flex-direction: column;
align-items: center;
transform: perspective(1000px);
}
.form form {
width: 100%;
}
h2 {
font-size: 28px;
text-transform: uppercase;
letter-spacing: 2px;
}
.form > span {
margin-bottom: 10px;
color: #555;
text-align: center;
}
input {
margin: 10px 0;
padding: 15px;
width: 100%;
outline: none;
border-radius: 10px;
border: 1px solid #ddd;
background-color: #f4f4f4;
transition: all 0.3s ease;
}
input:focus {
background-color: #fff;
box-shadow: 0 0 8px rgba(38, 92, 255, 0.7);
}
div {
position: relative;
}
img {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
cursor: pointer;
}
button {
padding: 12px 25px;
background-color: #2575fc;
width: 100%;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #6a11cb;
}
/* Keyframe for button hover effect */
@keyframes buttonHover {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
button:hover {
animation: buttonHover 0.7s ease;
}
.form {
animation: bounceIn 1s ease-out;
}
@keyframes bounceIn {
0% {
transform: translateY(-200px);
opacity: 0;
}
60% {
transform: translateY(10px);
opacity: 1;
}
100% {
transform: translateY(0);
}
}
import React, { useState } from "react";
import Login from "./components/Login";
import Signup from "./components/Signup";
function App() {
const [showSignup, setShowSignup] = useState(false);
const handleSwitch = () => {
setShowSignup(!showSignup);
};
return (
<div className={`app ${showSignup ? "signup-page" : "login-page"}`}>
<div className="form-container">
{showSignup ? <Signup /> : <Login />}
<div className="switch-link">
<span onClick={handleSwitch}>
{showSignup
? "Already have an account? Login"
: "Don't have an account? Signup"}
</span>
</div>
</div>
</div>
);
}
export default App;
2 Comments
Hey
ReplyDeleteDo you have any question??
DeleteWe are happy to hear from you.