Refactor code structure for improved readability and maintainability

2025-09-27 13:05:32 +02:00
commit f9f0651628
47 changed files with 16493 additions and 0 deletions
@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { TextInput, PasswordInput, Button, Paper, Title, Container, Group, Alert } from '@mantine/core';
+import { User, Lock } from 'phosphor-react'; // ← Importa los iconos Phosphor
+
+export function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    // Aquí deberías llamar a tu endpoint de login (ajusta la URL y payload)
+    try {
+      const res = await fetch('/api/v1/usuarios/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password })
+      });
+      if (!res.ok) throw new Error('Credenciales incorrectas');
+      // Aquí puedes guardar el usuario/token en el estado global o localStorage
+      window.location.href = '/';
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Container size={420} my={40}>
+      <Title align="center" mb={20}>Iniciar sesión</Title>
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+        <form onSubmit={handleSubmit}>
+          <TextInput
+            label="Email"
+            placeholder="tucorreo@ejemplo.com"
+            icon={<User size={18} />} // ← Usa el icono Phosphor aquí
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            required
+            mb={10}
+          />
+          <PasswordInput
+            label="Contraseña"
+            placeholder="Tu contraseña"
+            icon={<Lock size={18} />} // ← Usa el icono Phosphor aquí
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+            mb={20}
+          />
+          {error && <Alert color="red" mb={10}>{error}</Alert>}
+          <Group mt="md">
+            <Button type="submit" loading={loading} fullWidth>
+              Entrar
+            </Button>
+          </Group>
+        </form>
+      </Paper>
+    </Container>
+  );
+}