@imansi/templates 0.1.0

package/src/auth/ForgotPasswordPage.jsx

@@ -0,0 +1,176 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Label,
+} from '@imansi/ui';
+import { AuthLayout } from '../layouts/AuthLayout.jsx';
+
+export function ForgotPasswordPage({
+  title = '¿Olvidaste tu contraseña?',
+  subtitle = 'Ingresá tu correo y te enviamos un link para restablecerla.',
+  submitText = 'Enviar link',
+  submitLoadingText = 'Enviando...',
+  emailLabel = 'Correo electrónico',
+  successTitle = 'Revisá tu correo',
+  successMessage = 'Si el correo está registrado, te enviamos un link para restablecer tu contraseña. Revisá tu bandeja de entrada y la carpeta de spam.',
+
+  backToLoginHref = '/login',
+  backToLoginText = 'Volver al inicio de sesión',
+
+  brandName,
+  brandTagline,
+  brandLogo,
+
+  onSubmit,
+  error: externalError,
+  success: externalSuccess = false,
+  loading = false,
+
+  footer,
+  className,
+}) {
+  const [correo, setCorreo] = useState('');
+  const [localError, setLocalError] = useState(null);
+  const [localSuccess, setLocalSuccess] = useState(false);
+
+  const showingSuccess = externalSuccess || localSuccess;
+  const error = localError || externalError;
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLocalError(null);
+
+    if (!correo) {
+      setLocalError('Ingresá tu correo electrónico.');
+      return;
+    }
+
+    if (onSubmit) {
+      const result = await onSubmit({ correo });
+      if (result?.ok) setLocalSuccess(true);
+    } else {
+      setLocalSuccess(true);
+    }
+  }
+
+  return (
+    <AuthLayout
+      brandName={brandName}
+      brandTagline={brandTagline}
+      brandLogo={brandLogo}
+      className={className}
+    >
+      <div className="lg:hidden flex items-center gap-3 justify-center mb-6">
+        {brandLogo || (
+          <div className="h-10 w-10 rounded-lg bg-primary text-primary-foreground flex items-center justify-center font-bold">
+            {brandName?.charAt(0) || 'I'}
+          </div>
+        )}
+        <span className="text-h4 font-semibold">{brandName}</span>
+      </div>
+
+      <Card className="shadow-lg border-border/50">
+        <CardContent className="p-6 sm:p-7">
+          <div className="space-y-5">
+            {showingSuccess ? (
+              <>
+                <div className="space-y-1.5 text-center sm:text-left">
+                  <div className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-success/10 text-success">
+                    <svg
+                      width="22"
+                      height="22"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <polyline points="4,12 10,18 20,6" />
+                    </svg>
+                  </div>
+                  <h1 className="text-h3 font-semibold tracking-tight">
+                    {successTitle}
+                  </h1>
+                  <p className="text-small text-muted-foreground leading-snug">
+                    {successMessage}
+                  </p>
+                </div>
+
+                {backToLoginHref && (
+                  <Button variant="outline" fullWidth asChild>
+                    <Link to={backToLoginHref}>{backToLoginText}</Link>
+                  </Button>
+                )}
+              </>
+            ) : (
+              <>
+                <div className="space-y-1.5">
+                  <h1 className="text-h3 font-semibold tracking-tight">
+                    {title}
+                  </h1>
+                  <p className="text-small text-muted-foreground leading-snug">
+                    {subtitle}
+                  </p>
+                </div>
+
+                {error && (
+                  <Alert variant="destructive" title="Error">
+                    {error}
+                  </Alert>
+                )}
+
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <div className="space-y-1.5">
+                    <Label
+                      htmlFor="forgot-correo"
+                      className="text-small font-medium"
+                    >
+                      {emailLabel}
+                    </Label>
+                    <Input
+                      id="forgot-correo"
+                      type="email"
+                      placeholder="correo@ejemplo.com"
+                      value={correo}
+                      onChange={(e) => setCorreo(e.target.value)}
+                      autoComplete="email"
+                      autoFocus
+                      disabled={loading}
+                    />
+                  </div>
+
+                  <Button type="submit" fullWidth disabled={loading}>
+                    {loading ? submitLoadingText : submitText}
+                  </Button>
+                </form>
+              </>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {!showingSuccess && backToLoginHref && (
+        <p className="text-center text-small text-muted-foreground mt-5">
+          <Link
+            to={backToLoginHref}
+            className="text-primary font-medium hover:underline underline-offset-4"
+          >
+            {backToLoginText}
+          </Link>
+        </p>
+      )}
+
+      {footer && (
+        <p className="text-center text-caption text-muted-foreground mt-3 px-2">
+          {footer}
+        </p>
+      )}
+    </AuthLayout>
+  );
+}

package/src/auth/LoginPage.jsx

@@ -0,0 +1,265 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  Checkbox,
+  Input,
+  Label,
+} from '@imansi/ui';
+import { AuthLayout } from '../layouts/AuthLayout.jsx';
+
+export function LoginPage({
+  title = 'Iniciar sesión',
+  subtitle = 'Bienvenido de nuevo. Ingresá tus credenciales para continuar.',
+  submitText = 'Entrar',
+  submitLoadingText = 'Entrando...',
+  emailLabel = 'Correo electrónico',
+  passwordLabel = 'Contraseña',
+  forgotPasswordText = '¿La olvidaste?',
+  registerText = '¿No tenés cuenta?',
+  registerLinkText = 'Crear una gratis',
+  rememberText = 'Recordarme por 30 días',
+
+  registerHref = '/registro',
+  forgotPasswordHref = '/recuperar',
+
+  brandName,
+  brandTagline,
+  brandLogo,
+
+  oauthProviders = [],
+  oauthTexts = {
+    github: 'Continuar con GitHub',
+    google: 'Continuar con Google',
+    o: 'o continuá con',
+  },
+
+  onSubmit,
+  onOAuthClick,
+  error: externalError,
+  loading = false,
+  showRememberMe = true,
+
+  footer,
+  className,
+}) {
+  const [correo, setCorreo] = useState('');
+  const [contrasena, setContrasena] = useState('');
+  const [recordarme, setRecordarme] = useState(false);
+  const [localError, setLocalError] = useState(null);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLocalError(null);
+
+    if (!correo || !contrasena) {
+      setLocalError('Completá todos los campos.');
+      return;
+    }
+
+    if (onSubmit) {
+      await onSubmit({ correo, contrasena, recordarme });
+    }
+  }
+
+  function handleOAuth(provider) {
+    if (onOAuthClick) onOAuthClick(provider);
+  }
+
+  const error = localError || externalError;
+
+  return (
+    <AuthLayout
+      brandName={brandName}
+      brandTagline={brandTagline}
+      brandLogo={brandLogo}
+      className={className}
+    >
+      {/* Logo mobile */}
+      <div className="lg:hidden flex items-center gap-3 justify-center mb-6">
+        {brandLogo || (
+          <div className="h-10 w-10 rounded-lg bg-primary text-primary-foreground flex items-center justify-center font-bold">
+            {brandName?.charAt(0) || 'I'}
+          </div>
+        )}
+        <span className="text-h4 font-semibold">{brandName}</span>
+      </div>
+
+      <Card className="shadow-lg border-border/50">
+        <CardContent className="p-6 sm:p-7">
+          <div className="space-y-5">
+            {/* Encabezado */}
+            <div className="space-y-1.5">
+              <h1 className="text-h3 font-semibold tracking-tight">{title}</h1>
+              <p className="text-small text-muted-foreground leading-snug">
+                {subtitle}
+              </p>
+            </div>
+
+            {/* Error */}
+            {error && (
+              <Alert variant="destructive" title="Error">
+                {error}
+              </Alert>
+            )}
+
+            {/* OAuth */}
+            {oauthProviders.length > 0 && (
+              <div className="space-y-4">
+                <div className="grid gap-2.5">
+                  {oauthProviders.includes('github') && (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      fullWidth
+                      onClick={() => handleOAuth('github')}
+                      disabled={loading}
+                    >
+                      <GitHubIcon />
+                      {oauthTexts.github}
+                    </Button>
+                  )}
+                  {oauthProviders.includes('google') && (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      fullWidth
+                      onClick={() => handleOAuth('google')}
+                      disabled={loading}
+                    >
+                      <GoogleIcon />
+                      {oauthTexts.google}
+                    </Button>
+                  )}
+                </div>
+
+                {/* Divisor */}
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t border-border" />
+                  </div>
+                  <div className="relative flex justify-center text-caption uppercase">
+                    <span className="bg-card px-3 text-muted-foreground tracking-widest text-[10px]">
+                      {oauthTexts.o}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Formulario */}
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-1.5">
+                <Label htmlFor="login-correo" className="text-small font-medium">
+                  {emailLabel}
+                </Label>
+                <Input
+                  id="login-correo"
+                  type="email"
+                  placeholder="correo@ejemplo.com"
+                  value={correo}
+                  onChange={(e) => setCorreo(e.target.value)}
+                  autoComplete="email"
+                  autoFocus
+                  disabled={loading}
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <div className="flex items-center justify-between">
+                  <Label
+                    htmlFor="login-contrasena"
+                    className="text-small font-medium"
+                  >
+                    {passwordLabel}
+                  </Label>
+                  {forgotPasswordHref && (
+                    <Link
+                      to={forgotPasswordHref}
+                      className="text-caption text-primary hover:underline underline-offset-4 font-medium"
+                    >
+                      {forgotPasswordText}
+                    </Link>
+                  )}
+                </div>
+                <Input
+                  id="login-contrasena"
+                  type="password"
+                  placeholder="••••••••"
+                  value={contrasena}
+                  onChange={(e) => setContrasena(e.target.value)}
+                  autoComplete="current-password"
+                  disabled={loading}
+                />
+              </div>
+
+              {showRememberMe && (
+                <div className="flex items-center gap-2.5">
+                  <Checkbox
+                    id="login-recordarme"
+                    checked={recordarme}
+                    onCheckedChange={setRecordarme}
+                    disabled={loading}
+                  />
+                  <Label
+                    htmlFor="login-recordarme"
+                    className="cursor-pointer font-normal text-small text-muted-foreground"
+                  >
+                    {rememberText}
+                  </Label>
+                </div>
+              )}
+
+              <Button type="submit" fullWidth disabled={loading}>
+                {loading ? submitLoadingText : submitText}
+              </Button>
+            </form>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Link a registro */}
+      {registerHref && (
+        <p className="text-center text-small text-muted-foreground mt-5">
+          {registerText}{' '}
+          <Link
+            to={registerHref}
+            className="text-primary font-medium hover:underline underline-offset-4"
+          >
+            {registerLinkText}
+          </Link>
+        </p>
+      )}
+
+      {/* Footer legal */}
+      {footer && (
+        <p className="text-center text-caption text-muted-foreground mt-3 px-2">
+          {footer}
+        </p>
+      )}
+    </AuthLayout>
+  );
+}
+
+/* Iconos */
+function GitHubIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className="size-4">
+      <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.55v-1.94c-3.2.7-3.87-1.54-3.87-1.54-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.23-1.28-5.23-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.05 11.05 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.43-2.69 5.4-5.25 5.69.41.35.78 1.05.78 2.12v3.15c0 .3.21.66.8.55C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5Z" />
+    </svg>
+  );
+}
+
+function GoogleIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="size-4">
+      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z" />
+      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z" />
+      <path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84Z" />
+      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38Z" />
+    </svg>
+  );
+}