Notes

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import './Login.css'; // Ensure you have the CSS file for styling

export default function Login() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate();

const handleLogin = async (e) => {
e.preventDefault(); // Prevent default form submission behavior

if (username === '' || password === '') {
alert('Please enter both username and password.');
return;
}

try {
const response = await axios.post('http://localhost:5000/api/user/login', {
username,
password,
});

if (response.data && response.data.token) {
localStorage.setItem('token', response.data.token);
alert('Login Successfully.');
navigate('/'); // Navigate to homepage or dashboard
} else {
alert('Login failed. Please try again.');
}
} catch (error) {
alert('Login failed. Please try again.');
}
};

return (
<div className="login-container">
<form onSubmit={handleLogin} className="login-form">
<h1>LOGIN</h1>
<div className="form-group">
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Username"
required
/>
</div>
<div className="form-group">
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
required
/>
</div>
<button type="submit">LOGIN</button>
</form>
<div className="login-links">
<a href="#" className="forgot-password">Forgot Password?</a>
<a href="/register" className="signup">Signup</a>
</div>
</div>
);
}



css
.login-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 56vh;
background-color: #f2f2f2;
}

.profile-image {
width: 200px;
height: auto;
border-radius: 50%;
margin-right: 50px;
}

.login-form {
display: flex;
flex-direction: column;
border: 2px solid #ccc;
border-radius: 10px;
transition: border 0.3s ease, box-shadow 0.3s ease;
animation: loginBorderAnimation 16s linear infinite;
width: 25%;
padding: 20px;
align-items: center;
}

@keyframes loginBorderAnimation {
0%, 14.99% {
border: 2px solid #62bf87;
}
15%, 29.99% {
border: 4px solid #b7da4e;
}
30%, 44.99% {
border: 4px solid #4aa0b8;
}
45%, 59.99% {
border: 6px solid #c9e736;
}
60%, 100% {
border: 6px solid #a227d3;
}
}


.login-label {
margin-bottom: 5px;
font-weight: bold;
}

.login-input {
margin-bottom: 20px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
transition: background-color 6s linear;
}

.login-input:focus {
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

@keyframes changeColor {
0%, 20% {
background-color: rgba(255, 255, 255, 0.8); /* Default color */
}
25%, 45% {
background-color: #ffd700; /* New color at 20% of transition */
}
50%, 70% {
background-color: #ff5733; /* Another new color at 40% of transition */
}
75%, 95% {
background-color: #90ee90; /* Yet another new color at 60% of transition */
}
100% {
background-color: #1e90ff; /* Final color at 80% of transition */
}
}

.login-input {
animation: changeColor 24s infinite linear;
}

.login-button {
padding: 8px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}

.login-button:hover {
transform: translateY(-3px);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

.login-remember {
margin-top: 20px;
display: flex;
align-items: center;
}

.login-remember label {
margin-left: 10px;
}

.create-account-button {
margin-top: 20px;
background-color: #4CAF50;
border: none;
color: white;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
border-radius: 5px;
transition: transform 0.3s ease-in-out;
}

.create-account-button:hover {
transform: scale(1.1);
}

.icon {
margin-right: 5px;
}