87 lines
4.0 KiB
JavaScript
87 lines
4.0 KiB
JavaScript
import { useState } from 'react';
|
|
import axios from 'axios';
|
|
import { Lock, User } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import LanguageSelector from '../components/LanguageSelector';
|
|
|
|
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
|
|
|
|
function Login({ setToken, setUserRole, setUsername }) {
|
|
const { t } = useTranslation();
|
|
const [formData, setFormData] = useState({ username: '', password: '' });
|
|
const [error, setError] = useState('');
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const res = await axios.post(`${API_URL}/api/auth/login`, formData);
|
|
localStorage.setItem('token', res.data.token);
|
|
localStorage.setItem('role', res.data.role);
|
|
localStorage.setItem('username', res.data.username);
|
|
|
|
setToken(res.data.token);
|
|
setUserRole(res.data.role);
|
|
setUsername(res.data.username);
|
|
} catch (err) {
|
|
setError(err.response?.data?.error || 'Login failed');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-slate-950 relative">
|
|
<div className="absolute top-4 right-4">
|
|
<LanguageSelector />
|
|
</div>
|
|
<div className="bg-slate-900 p-8 rounded-2xl shadow-2xl w-96 border border-slate-800">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
|
|
{t('title')}
|
|
</h1>
|
|
<p className="text-slate-400 mt-2">{t('login_subtitle')}</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-red-500/10 border border-red-500 text-red-500 p-3 rounded mb-4 text-center">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-400 mb-1">{t('username')}</label>
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-3 text-slate-500" size={20} />
|
|
<input
|
|
className="w-full bg-slate-950 border border-slate-700 rounded-lg py-2.5 pl-10 text-white focus:ring-2 focus:ring-blue-500 outline-none"
|
|
placeholder="admin"
|
|
value={formData.username}
|
|
onChange={e => setFormData({ ...formData, username: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-400 mb-1">{t('password')}</label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-3 text-slate-500" size={20} />
|
|
<input
|
|
type="password"
|
|
className="w-full bg-slate-950 border border-slate-700 rounded-lg py-2.5 pl-10 text-white focus:ring-2 focus:ring-blue-500 outline-none"
|
|
placeholder="••••••"
|
|
value={formData.password}
|
|
onChange={e => setFormData({ ...formData, password: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 py-3 rounded-lg font-bold shadow-lg shadow-blue-500/20 transition-all">
|
|
{t('sign_in')}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Login;
|