From 5e1e9793771c1f937b86900cbc789c7a69f35415 Mon Sep 17 00:00:00 2001
From: dmolinari <dmolinari@eldia.com>
Date: Tue, 14 Apr 2026 11:21:53 -0300
Subject: [PATCH] refactor(web): LoginPage con shadcn Form, zod validation y
 Alert destructive

---
 .../features/auth/components/LoginForm.tsx    | 132 +++++++++++-------
 src/web/src/features/auth/pages/LoginPage.tsx |  58 +++++---
 2 files changed, 115 insertions(+), 75 deletions(-)

diff --git a/src/web/src/features/auth/components/LoginForm.tsx b/src/web/src/features/auth/components/LoginForm.tsx
index 860b61c..69276cf 100644
--- a/src/web/src/features/auth/components/LoginForm.tsx
+++ b/src/web/src/features/auth/components/LoginForm.tsx
@@ -1,66 +1,90 @@
-import type { FormEvent } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+
+const loginSchema = z.object({
+  username: z.string().min(1, 'El usuario es requerido'),
+  password: z.string().min(1, 'La contraseña es requerida'),
+})
+
+type LoginFormValues = z.infer<typeof loginSchema>
 
 interface LoginFormProps {
   onSubmit: (username: string, password: string) => void
   isLoading: boolean
-  error: string | null
 }
 
-export function LoginForm({ onSubmit, isLoading, error }: LoginFormProps) {
-  function handleSubmit(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault()
-    const form = e.currentTarget
-    const data = new FormData(form)
-    const username = data.get('username') as string
-    const password = data.get('password') as string
-    onSubmit(username, password)
+export function LoginForm({ onSubmit, isLoading }: LoginFormProps) {
+  const form = useForm<LoginFormValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { username: '', password: '' },
+  })
+
+  function handleSubmit(values: LoginFormValues) {
+    onSubmit(values.username, values.password)
   }
 
   return (
-    <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full max-w-sm">
-      <div className="flex flex-col gap-1">
-        <label htmlFor="username" className="text-sm font-medium text-gray-700">
-          Usuario
-        </label>
-        <input
-          id="username"
-          name="username"
-          type="text"
-          required
-          autoComplete="username"
-          disabled={isLoading}
-          className="rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
-        />
-      </div>
-
-      <div className="flex flex-col gap-1">
-        <label htmlFor="password" className="text-sm font-medium text-gray-700">
-          Contraseña
-        </label>
-        <input
-          id="password"
-          name="password"
-          type="password"
-          required
-          autoComplete="current-password"
-          disabled={isLoading}
-          className="rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
-        />
-      </div>
-
-      {error && (
-        <p role="alert" className="text-sm text-red-600">
-          {error}
-        </p>
-      )}
-
-      <button
-        type="submit"
-        disabled={isLoading}
-        className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(handleSubmit)}
+        className="space-y-4"
+        noValidate
       >
-        {isLoading ? 'Ingresando...' : 'Ingresar'}
-      </button>
-    </form>
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Usuario</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  type="text"
+                  autoComplete="username"
+                  disabled={isLoading}
+                  placeholder="Ingresá tu usuario"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Contraseña</FormLabel>
+              <FormControl>
+                <Input
+                  {...field}
+                  type="password"
+                  autoComplete="current-password"
+                  disabled={isLoading}
+                  placeholder="Ingresá tu contraseña"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit" disabled={isLoading} className="w-full">
+          {isLoading ? 'Ingresando...' : 'Ingresar'}
+        </Button>
+      </form>
+    </Form>
   )
 }
diff --git a/src/web/src/features/auth/pages/LoginPage.tsx b/src/web/src/features/auth/pages/LoginPage.tsx
index 08aa325..44b5ad6 100644
--- a/src/web/src/features/auth/pages/LoginPage.tsx
+++ b/src/web/src/features/auth/pages/LoginPage.tsx
@@ -1,7 +1,25 @@
 import { useNavigate } from 'react-router-dom'
+import { isAxiosError } from 'axios'
+import { AlertCircle } from 'lucide-react'
 import { useLogin } from '../hooks/useLogin'
 import { LoginForm } from '../components/LoginForm'
-import { isAxiosError } from 'axios'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+
+function resolveErrorMessage(err: unknown): string | null {
+  if (!err) return null
+  if (isAxiosError(err) && err.response?.data) {
+    const data = err.response.data as { error?: string }
+    return data.error ?? 'Error al iniciar sesión'
+  }
+  return 'Error al iniciar sesión'
+}
 
 export function LoginPage() {
   const navigate = useNavigate()
@@ -18,27 +36,25 @@ export function LoginPage() {
     )
   }
 
-  function resolveErrorMessage(err: unknown): string | null {
-    if (!err) return null
-    if (isAxiosError(err) && err.response?.data) {
-      const data = err.response.data as { error?: string }
-      return data.error ?? 'Error al iniciar sesión'
-    }
-    return 'Error al iniciar sesión'
-  }
+  const errorMessage = resolveErrorMessage(error)
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50">
-      <div className="rounded-lg bg-white p-8 shadow-md w-full max-w-sm">
-        <h1 className="mb-6 text-center text-2xl font-semibold text-gray-900">
-          SIG-CM2
-        </h1>
-        <LoginForm
-          onSubmit={handleSubmit}
-          isLoading={isPending}
-          error={resolveErrorMessage(error)}
-        />
-      </div>
-    </div>
+    <Card className="w-full max-w-sm">
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl text-center">SIG-CM 2.0</CardTitle>
+        <CardDescription className="text-center">
+          Iniciar sesión
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {errorMessage && (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>{errorMessage}</AlertDescription>
+          </Alert>
+        )}
+        <LoginForm onSubmit={handleSubmit} isLoading={isPending} />
+      </CardContent>
+    </Card>
   )
 }