82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
|
|
|
|
export default function LoginPage() {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
|
|
const handleLogin = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// In a real application, this would send credentials to an API
|
|
console.log("Login attempt:", { email, password });
|
|
alert("Login functionality is not implemented in this frontend demo.");
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<div className="flex min-h-screen items-center justify-center p-4">
|
|
<div className="w-full max-w-md rounded-lg bg-card p-8 shadow-lg">
|
|
<h1 className="mb-6 text-center text-3xl font-semibold text-foreground">
|
|
Iniciar Sesión
|
|
</h1>
|
|
<form onSubmit={handleLogin}>
|
|
<div className="mb-4">
|
|
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
|
|
Correo Electrónico
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
className="w-full rounded-md border border-gray-300 bg-background px-3 py-2 text-foreground focus:border-primary-cta focus:ring-primary-cta"
|
|
placeholder="tu@ejemplo.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="mb-6">
|
|
<label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
|
|
Contraseña
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
className="w-full rounded-md border border-gray-300 bg-background px-3 py-2 text-foreground focus:border-primary-cta focus:ring-primary-cta"
|
|
placeholder="••••••••"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
<ButtonTextShift
|
|
text="Entrar"
|
|
type="submit"
|
|
className="w-full"
|
|
ariaLabel="Iniciar sesión"
|
|
/>
|
|
</form>
|
|
<p className="mt-6 text-center text-sm text-foreground">
|
|
¿Olvidaste tu contraseña?{" "}
|
|
<a href="#" className="text-primary-cta hover:underline">
|
|
Recuperar
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |