add: implementar login/registro

2026-04-06 10:20:27 +02:00
parent e96af43990
commit 22ed6c107e
8 changed files with 257 additions and 406 deletions
@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { authService } from '../services/authService';
+
+export default function Login() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const navigate = useNavigate();
+    const { login } = useAuth(); 
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError('');
+
+        try {
+            const data = await authService.login(email, password);
+            
+            const userData = {
+                id: data.user_id,
+                username: data.username,
+                email: email
+            };
+            
+            login(userData, data.token);
+            navigate('/');
+        } catch (err) {
+            setError(err.response?.data?.detail || 'Error al iniciar sesión. Revisa tus credenciales.');
+        }
+    };
+
+  return (
+    <div className="flex justify-center mt-4 sm:mt-8">
+      <div className="max-w-md w-full bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-bold text-slate-800">Bienvenido</h2>
+          <p className="text-slate-500 mt-2">Inicia sesión para guardar tus espectros difusos</p>
+        </div>
+
+        {error && (
+          <div className="bg-red-50 text-red-600 p-3 rounded-lg mb-6 text-sm font-medium border border-red-200">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div>
+            <label className="block text-sm font-semibold text-slate-700 mb-1">Email</label>
+            <input 
+              type="email" 
+              required
+              autoComplete="email"
+              className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="tu@email.com"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold text-slate-700 mb-1">Contraseña</label>
+            <input 
+              type="password" 
+              required
+              autoComplete="current-password"
+              className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+            />
+          </div>
+
+          <button 
+            type="submit" 
+            className="w-full py-3 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-colors shadow-md mt-4"
+          >
+            Entrar
+          </button>
+        </form>
+
+        <p className="text-center mt-6 text-sm text-slate-600">
+          ¿No tienes cuenta? <Link to="/register" className="text-blue-600 font-bold hover:underline">Regístrate aquí</Link>
+        </p>
+      </div>
+    </div>
+  );
+}