Name:-Khushi Kumari
[Link]:- 12209380
Roll no:-39
Section:-K22AE
Activity 9:- to make a login page
[Link]
import React, { useRef, useState } from 'react';
import './[Link]'; // Add styles here or use inline styles
const LoginForm = () => {
const emailRef = useRef(null);
const passwordRef = useRef(null);
const [isLogin, setIsLogin] = useState(true);
const handleSubmit = (e) => {
[Link]();
const email = [Link];
const password = [Link];
[Link](`Email: ${email}, Password: ${password}`);
};
return (
<div className="login-form-container">
<form onSubmit={handleSubmit}>
<h2>Login Form</h2>
<div className="toggle-btns">
<button type="button" className={isLogin ? 'active' : ''}
onClick={() => setIsLogin(true)}>
Login
</button>
<button type="button" className={!isLogin ? 'active' : ''}
onClick={() => setIsLogin(false)}>
Signup
</button>
</div>
<input type="email" placeholder="Email Address" ref={emailRef}
required/>
<input type="password" placeholder="Password" ref={passwordRef}
required/>
<div className="forgot-password">
<a href="#">Forgot password?</a>
</div>
<button type="submit" className="login-btn">
{isLogin ? 'Login' : 'Signup'}
</button>
<div className="not-member">
{isLogin ? 'Not a member? ' : 'Already have an account? '}
<a href="#" onClick={() => setIsLogin(!isLogin)}>
{isLogin ? 'Signup now' : 'Login here'}
</a>
</div>
</form>
</div>
);
};
export default LoginForm;
[Link]
.login-form-container {
width: 300px;
margin: auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
h2 {
margin-bottom: 20px;
font-family: 'Arial', sans-serif;
}
.toggle-btns {
display: flex;
justify-content: center;
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
border: 1px solid #ddd;
}
.toggle-btns button {
flex: 1;
padding: 10px 0;
font-size: 16px;
font-weight: bold;
cursor: pointer;
background-color: white;
color: black;
border-radius: 10px;
border: none;
outline: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.toggle-btns [Link] {
background: linear-gradient(to right, blue, rgb(4, 4, 140));
color: white;
}
.toggle-btns button:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.toggle-btns button:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.toggle-btns button:hover {
background-color: whitesmoke;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 10px;
box-sizing: border-box;
}
.forgot-password {
text-align: left;
margin-bottom: 10px;
}
.forgot-password a {
color: blue;
text-decoration: none;
}
.login-btn {
width: 100%;
padding: 10px;
background: linear-gradient(to right, blue, rgb(4, 4, 140));
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
}
.not-member {
margin-top: 15px;
font-size: 14px;
}
.not-member a {
color: blue;
text-decoration: none;
}
[Link]
import React from 'react';
import LoginForm from './LoginForm';
function App() {
return (
<div className="App">
<h1></h1>
<LoginForm />
</div>
);
}
export default App;
Output:-
