Add Spanish/English languaje
This commit is contained in:
@@ -1,65 +1,81 @@
|
||||
import { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
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 }) {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const navigate = useNavigate();
|
||||
function Login({ setToken, setUserRole, setUsername }) {
|
||||
const { t } = useTranslation();
|
||||
const [formData, setFormData] = useState({ username: '', password: '' });
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const res = await axios.post(`${API_URL}/api/auth/login`, { username, password });
|
||||
const { token, role, username: user } = res.data;
|
||||
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);
|
||||
|
||||
localStorage.setItem('token', token);
|
||||
localStorage.setItem('role', role);
|
||||
localStorage.setItem('username', user);
|
||||
|
||||
setToken(token);
|
||||
setUserRole(role);
|
||||
|
||||
if (role === 'ADMIN') {
|
||||
navigate('/admin');
|
||||
} else {
|
||||
navigate('/user');
|
||||
}
|
||||
setToken(res.data.token);
|
||||
setUserRole(res.data.role);
|
||||
setUsername(res.data.username);
|
||||
} catch (err) {
|
||||
alert('Login failed: ' + (err.response?.data?.error || err.message));
|
||||
setError(err.response?.data?.error || 'Login failed');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-900 flex items-center justify-center p-4">
|
||||
<div className="bg-slate-800 p-8 rounded-2xl w-full max-w-md border border-slate-700 shadow-2xl">
|
||||
<h2 className="text-3xl font-bold text-white mb-6 text-center">Control Patente AI</h2>
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-slate-400 mb-2">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
<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-slate-400 mb-2">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
/>
|
||||
<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>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-bold text-white transition-colors"
|
||||
>
|
||||
Login
|
||||
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user