79 lines
3.6 KiB
TypeScript
79 lines
3.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import api from '../api';
|
|
import { Lock, User } from 'lucide-react';
|
|
|
|
const Login: React.FC = () => {
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const { login } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await api.post('/auth/login', { username, password });
|
|
const { access_token } = response.data;
|
|
|
|
const role = username === 'admin' ? 'admin' : 'user';
|
|
|
|
login(access_token, { username, role });
|
|
navigate('/dashboard');
|
|
} catch (err) {
|
|
setError('Invalid credentials');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-secondary">
|
|
<div className="bg-white p-8 rounded shadow-sm border border-gray-200 w-96">
|
|
<div className="flex justify-center mb-6">
|
|
<img src="/logo.png" alt="Logo" className="h-12 w-auto" />
|
|
</div>
|
|
<h2 className="text-xl font-bold mb-6 text-center text-primary">Sign In</h2>
|
|
{error && <div className="bg-red-50 text-red-700 p-2 rounded mb-4 text-sm border border-red-100 text-center">{error}</div>}
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
className="pl-9 w-full border border-gray-300 rounded p-2 text-sm focus:ring-1 focus:ring-accent focus:border-accent outline-none transition-all"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
required
|
|
placeholder="Enter your username"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="mb-6">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
|
<input
|
|
type="password"
|
|
className="pl-9 w-full border border-gray-300 rounded p-2 text-sm focus:ring-1 focus:ring-accent focus:border-accent outline-none transition-all"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
placeholder="Enter your password"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-accent text-white py-2 rounded font-medium hover:bg-accent-hover transition-colors shadow-sm"
|
|
>
|
|
Login
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|