feat: add UI components and improve layout
- Introduced new UI components: Input, Label, ScrollArea, Separator, Sheet, Skeleton, Table. - Implemented utility function for class name merging. - Enhanced the authenticated layout with a sidebar and user menu. - Added login functionality with improved UI and error handling. - Integrated theme provider for consistent theming across the application. - Updated styles with Tailwind CSS and custom properties for dark mode support. - Refactored routes to utilize new components and improve user experience.
This commit is contained in:
@@ -2,6 +2,7 @@ import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
|
||||
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
|
||||
import { TanstackDevtools } from '@tanstack/react-devtools'
|
||||
import type { SupabaseAuthState } from '@/auth/supabase'
|
||||
import { ThemeProvider } from '@/components/theme-provider'
|
||||
|
||||
interface AuthContext {
|
||||
auth: SupabaseAuthState
|
||||
@@ -10,18 +11,21 @@ interface AuthContext {
|
||||
export const Route = createRootRouteWithContext<AuthContext>()({
|
||||
component: () => (
|
||||
<>
|
||||
<Outlet />
|
||||
<TanstackDevtools
|
||||
config={{
|
||||
position: 'bottom-left',
|
||||
}}
|
||||
plugins={[
|
||||
{
|
||||
name: 'Tanstack Router',
|
||||
render: <TanStackRouterDevtoolsPanel />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
|
||||
|
||||
<Outlet />
|
||||
<TanstackDevtools
|
||||
config={{
|
||||
position: 'bottom-left',
|
||||
}}
|
||||
plugins={[
|
||||
{
|
||||
name: 'Tanstack Router',
|
||||
render: <TanStackRouterDevtoolsPanel />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
</>
|
||||
),
|
||||
})
|
||||
|
||||
@@ -1,9 +1,167 @@
|
||||
import { createFileRoute, redirect } from '@tanstack/react-router'
|
||||
import { createFileRoute, Outlet, redirect, Link } from "@tanstack/react-router"
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import { ModeToggle } from "@/components/mode-toggle"
|
||||
import {
|
||||
Menu,
|
||||
Bell,
|
||||
Search as SearchIcon,
|
||||
LayoutDashboard,
|
||||
GraduationCap,
|
||||
FileText,
|
||||
Settings,
|
||||
LogOut,
|
||||
} from "lucide-react"
|
||||
import { useSupabaseAuth } from "@/auth/supabase"
|
||||
|
||||
export const Route = createFileRoute('/_authenticated')({
|
||||
export const Route = createFileRoute("/_authenticated")({
|
||||
beforeLoad: ({ context }) => {
|
||||
if (!context.auth.isAuthenticated) {
|
||||
throw redirect({ to: '/login', search: { redirect: location.href } })
|
||||
throw redirect({ to: "/login", search: { redirect: location.href } })
|
||||
}
|
||||
},
|
||||
})
|
||||
component: Layout,
|
||||
})
|
||||
|
||||
const nav = [
|
||||
{ to: "/planes", label: "Planes", icon: GraduationCap },
|
||||
{ to: "/materias", label: "Materias", icon: FileText },
|
||||
{ to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
|
||||
{ to: "/ajustes", label: "Ajustes", icon: Settings },
|
||||
]
|
||||
|
||||
function Layout() {
|
||||
const { auth } = Route.useRouteContext()
|
||||
const [query, setQuery] = useState("")
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
{/* Top bar */}
|
||||
<header className="sticky top-0 z-40 border-b border-border bg-card/80 backdrop-blur supports-[backdrop-filter]:bg-card/60">
|
||||
<div className="mx-auto flex h-16 max-w-screen-2xl items-center gap-3 px-4">
|
||||
{/* Mobile menu */}
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="md:hidden">
|
||||
<Menu className="h-5 w-5" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" className="p-0">
|
||||
<Sidebar onNavigate={() => { }} />
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
{/* Brand */}
|
||||
<Link to="/dashboard" className="hidden items-center gap-2 md:flex">
|
||||
<span className="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-primary/10 text-primary font-bold">U</span>
|
||||
<span className="font-semibold tracking-tight">La Salle · Ingeniería</span>
|
||||
</Link>
|
||||
|
||||
{/* Search */}
|
||||
<div className="ml-auto hidden items-center gap-2 md:flex">
|
||||
<div className="relative">
|
||||
<SearchIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Buscar…"
|
||||
className="w-64 pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" aria-label="Notificaciones">
|
||||
<Bell className="h-5 w-5" />
|
||||
</Button>
|
||||
<ModeToggle />
|
||||
<UserMenu user={{ name: auth.user?.email ?? "Usuario", avatar: auth.user?.avatar_url }} />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Shell */}
|
||||
<div className="mx-auto grid max-w-screen-2xl grid-cols-1 md:grid-cols-[260px_1fr] gap-0">
|
||||
{/* Sidebar (desktop) */}
|
||||
<aside className="sticky top-16 hidden h-[calc(100dvh-4rem)] border-r border-border bg-card/40 md:block">
|
||||
<Sidebar />
|
||||
</aside>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="min-h-[calc(100dvh-4rem)] p-4 md:p-6">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
|
||||
return (
|
||||
<div className="h-full">
|
||||
<div className="flex items-center gap-2 p-4 md:hidden">
|
||||
<span className="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-primary/10 text-primary font-bold">U</span>
|
||||
<span className="font-semibold">La Salle · Ingeniería</span>
|
||||
</div>
|
||||
<Separator />
|
||||
<ScrollArea className="h-[calc(100%-4rem)] p-2">
|
||||
<nav className="grid gap-1 p-2">
|
||||
{nav.map((item) => (
|
||||
<Link
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
className="group inline-flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-muted-foreground hover:bg-primary/10 hover:text-foreground"
|
||||
onClick={onNavigate}
|
||||
>
|
||||
<item.icon className="h-4 w-4" />
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</ScrollArea>
|
||||
<Separator className="mt-auto" />
|
||||
<div className="p-3 text-xs text-muted-foreground">© {new Date().getFullYear()} La Salle</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function UserMenu({ user }: { user: { name?: string; avatar?: string | null } }) {
|
||||
const auth = useSupabaseAuth()
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-9 gap-2 px-2">
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarImage src={user.avatar ?? undefined} />
|
||||
<AvatarFallback className="text-xs">LS</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="hidden max-w-[16ch] truncate text-sm md:inline">{user.name}</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel className="truncate">{user.name}</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/perfil">Perfil</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/ajustes">Ajustes</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="text-destructive" onClick={auth.logout}>
|
||||
<LogOut className="mr-2 h-4 w-4" /> Cerrar sesión
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,22 +1,131 @@
|
||||
import { useSupabaseAuth } from '@/auth/supabase'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { createFileRoute, useRouter } from "@tanstack/react-router"
|
||||
import { useMemo, useState } from "react"
|
||||
import { supabase, useSupabaseAuth } from "@/auth/supabase"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Plus, RefreshCcw } from "lucide-react"
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/planes')({
|
||||
// --- Tipo correcto según tu esquema ---
|
||||
export type PlanDeEstudios = {
|
||||
id: string
|
||||
nombre: string
|
||||
nivel: string | null
|
||||
objetivo_general: string | null
|
||||
perfil_ingreso: string | null
|
||||
perfil_egreso: string | null
|
||||
duracion: string | null
|
||||
total_creditos: number | null
|
||||
competencias_genericas: string | null
|
||||
competencias_especificas: string | null
|
||||
sistema_evaluacion: string | null
|
||||
indicadores_desempeno: string | null
|
||||
estado: string | null
|
||||
fecha_creacion: string | null // timestamp with time zone → string ISO
|
||||
pertinencia: string | null
|
||||
prompt: string | null
|
||||
carrera_id: string | null // uuid
|
||||
}
|
||||
|
||||
export const Route = createFileRoute("/_authenticated/planes")({
|
||||
component: RouteComponent,
|
||||
loader: async () => {
|
||||
const { data, error } = await supabase
|
||||
.from("plan_estudios")
|
||||
.select("*")
|
||||
.order("fecha_creacion", { ascending: false })
|
||||
.limit(100)
|
||||
|
||||
if (error) throw new Error(error.message)
|
||||
return data as PlanDeEstudios[]
|
||||
}
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
const auth = useSupabaseAuth()
|
||||
console.log(auth.user);
|
||||
const [q, setQ] = useState("")
|
||||
const data = Route.useLoaderData()
|
||||
const router = useRouter()
|
||||
|
||||
return <div>
|
||||
<h2>Hello "/_authenticated/planes"!</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
auth.logout()
|
||||
}}
|
||||
>
|
||||
Logout {auth.isAuthenticated}
|
||||
</button>
|
||||
</div>
|
||||
const filtered = useMemo(() => {
|
||||
const term = q.trim().toLowerCase()
|
||||
if (!term || !data) return data
|
||||
return data.filter((p) =>
|
||||
[p.nombre, p.nivel, p.estado]
|
||||
.filter(Boolean)
|
||||
.some((v) => String(v).toLowerCase().includes(term))
|
||||
)
|
||||
}, [q, data])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<CardTitle className="text-xl">Planes de estudio</CardTitle>
|
||||
<div className="flex w-full items-center gap-2 md:w-auto">
|
||||
<div className="relative w-full md:w-80">
|
||||
<Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar por nombre, nivel o estado…" />
|
||||
</div>
|
||||
<Button variant="outline" size="icon" onClick={() => router.invalidate()} title="Recargar">
|
||||
<RefreshCcw className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button>
|
||||
<Plus className="mr-2 h-4 w-4" /> Nuevo plan
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nombre</TableHead>
|
||||
<TableHead className="hidden md:table-cell">Nivel</TableHead>
|
||||
<TableHead className="hidden md:table-cell">Créditos</TableHead>
|
||||
<TableHead>Duración</TableHead>
|
||||
<TableHead>Estado</TableHead>
|
||||
<TableHead className="hidden md:table-cell">Creado</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered?.map((p) => (
|
||||
<TableRow key={p.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-medium">{p.nombre}</TableCell>
|
||||
<TableCell className="hidden md:table-cell">{p.nivel ?? "—"}</TableCell>
|
||||
<TableCell className="hidden md:table-cell">{p.total_creditos ?? "—"}</TableCell>
|
||||
<TableCell>{p.duracion ?? "—"}</TableCell>
|
||||
<TableCell>
|
||||
{p.estado ? (
|
||||
<Badge variant={p.estado === "activo" ? "default" : p.estado === "en revisión" ? "secondary" : "outline"}>
|
||||
{p.estado}
|
||||
</Badge>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="hidden md:table-cell">
|
||||
{p.fecha_creacion ? new Date(p.fecha_creacion).toLocaleDateString() : "—"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{!filtered?.length && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center text-sm text-muted-foreground">
|
||||
Sin resultados
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Logueado como: <strong>{auth.user?.email}</strong>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,92 +1,149 @@
|
||||
import { createFileRoute, redirect } from '@tanstack/react-router'
|
||||
import { useState } from 'react'
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router"
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Mail, Lock, Eye, EyeOff, Loader2, Shield } from "lucide-react"
|
||||
import { useTheme } from "@/components/theme-provider"
|
||||
|
||||
export const Route = createFileRoute('/login')({
|
||||
validateSearch: (search) => ({
|
||||
redirect: (search.redirect as string) || '/planes',
|
||||
}),
|
||||
beforeLoad: ({ context, search }) => {
|
||||
if (context.auth.isAuthenticated) {
|
||||
throw redirect({ to: search.redirect })
|
||||
}
|
||||
},
|
||||
component: LoginComponent,
|
||||
export const Route = createFileRoute("/login")({
|
||||
validateSearch: (search) => ({
|
||||
redirect: (search.redirect as string) || "/planes",
|
||||
}),
|
||||
beforeLoad: ({ context, search }) => {
|
||||
if (context.auth.isAuthenticated) {
|
||||
throw redirect({ to: search.redirect })
|
||||
}
|
||||
},
|
||||
component: LoginComponent,
|
||||
})
|
||||
|
||||
function LoginComponent() {
|
||||
const { auth } = Route.useRouteContext()
|
||||
const { redirect } = Route.useSearch()
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const { auth } = Route.useRouteContext()
|
||||
const { redirect } = Route.useSearch()
|
||||
const [email, setEmail] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
setError('')
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
setError("")
|
||||
|
||||
try {
|
||||
await auth.login(email, password)
|
||||
// Supabase auth will automatically update context
|
||||
window.location.href = redirect
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Login failed')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
try {
|
||||
await auth.login(email, password)
|
||||
window.location.href = redirect
|
||||
} catch (err: any) {
|
||||
setError(err.message || "No fue posible iniciar sesión")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="max-w-md w-full space-y-4 p-6 border rounded-lg"
|
||||
>
|
||||
<h1 className="text-2xl font-bold text-center">Sign In</h1>
|
||||
return (
|
||||
<div className="min-h-screen w-full grid place-items-center px-4 bg-background text-foreground relative overflow-hidden">
|
||||
{/* Auroras decorativas claras */}
|
||||
<div className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(50%_50%_at_50%_50%,black,transparent)]">
|
||||
<div className="absolute -top-32 -left-24 h-80 w-80 rounded-full bg-primary/15 blur-3xl" />
|
||||
<div className="absolute -bottom-24 -right-16 h-72 w-72 rounded-full bg-secondary/30 blur-3xl" />
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<Card className="w-full max-w-md border border-border bg-card shadow-xl rounded-2xl backdrop-blur-sm">
|
||||
<CardHeader className="space-y-1 text-center">
|
||||
<div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-2xl bg-muted">
|
||||
<Shield className="h-6 w-6 text-foreground" aria-hidden />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Iniciar sesión</CardTitle>
|
||||
<CardDescription className="text-muted-foreground">
|
||||
Accede a tu panel para gestionar planes y materias
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
<CardContent>
|
||||
{error && (
|
||||
<div role="alert" className="mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Email */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">Correo institucional</Label>
|
||||
<div className="relative">
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 flex w-10 items-center justify-center">
|
||||
<Mail className="h-4 w-4 text-muted-foreground" aria-hidden />
|
||||
</div>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="pl-10"
|
||||
placeholder="usuario@lasalle.mx"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:opacity-50"
|
||||
{/* Password */}
|
||||
<div className="grid gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="password">Contraseña</Label>
|
||||
<a
|
||||
href="/reset-password"
|
||||
className="text-xs text-muted-foreground underline-offset-4 hover:underline"
|
||||
>
|
||||
{isLoading ? 'Signing in...' : 'Sign In'}
|
||||
¿Olvidaste tu contraseña?
|
||||
</a>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 flex w-10 items-center justify-center">
|
||||
<Lock className="h-4 w-4 text-muted-foreground" aria-hidden />
|
||||
</div>
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={showPassword ? "Ocultar contraseña" : "Mostrar contraseña"}
|
||||
onClick={() => setShowPassword((s) => !s)}
|
||||
className="absolute inset-y-0 right-0 flex w-10 items-center justify-center text-muted-foreground hover:text-foreground/80"
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" disabled={isLoading} className="w-full" size="lg">
|
||||
{isLoading ? (
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin" /> Iniciando…
|
||||
</span>
|
||||
) : (
|
||||
"Entrar"
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Separator className="my-2" />
|
||||
<p className="text-center text-xs text-muted-foreground">
|
||||
Al continuar aceptas nuestros <a href="#" className="underline underline-offset-4">Términos</a> y <a href="#" className="underline underline-offset-4">Política de privacidad</a>.
|
||||
</p>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user