@imansi/templates 0.1.0

package/src/auth/RegisterPage.jsx

@@ -0,0 +1,302 @@
+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 RegisterPage({
+  title = 'Crear cuenta',
+  subtitle = 'Completá tus datos para empezar. Es gratis.',
+  submitText = 'Crear cuenta',
+  submitLoadingText = 'Creando cuenta...',
+  nameLabel = 'Nombre completo',
+  emailLabel = 'Correo electrónico',
+  passwordLabel = 'Contraseña',
+  passwordConfirmLabel = 'Confirmar contraseña',
+  termsText = 'Acepto los Términos y la Política de Privacidad',
+  loginText = '¿Ya tenés cuenta?',
+  loginLinkText = 'Iniciar sesión',
+
+  loginHref = '/login',
+
+  brandName,
+  brandTagline,
+  brandLogo,
+
+  oauthProviders = [],
+  oauthTexts = {
+    github: 'Registrarme con GitHub',
+    google: 'Registrarme con Google',
+    o: 'o registrate con',
+  },
+
+  onSubmit,
+  onOAuthClick,
+  error: externalError,
+  loading = false,
+  showName = true,
+  showTerms = true,
+
+  footer,
+  className,
+}) {
+  const [nombre, setNombre] = useState('');
+  const [correo, setCorreo] = useState('');
+  const [contrasena, setContrasena] = useState('');
+  const [contrasenaRepetir, setContrasenaRepetir] = useState('');
+  const [aceptaTerminos, setAceptaTerminos] = useState(false);
+  const [localError, setLocalError] = useState(null);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLocalError(null);
+
+    if (!correo || !contrasena) {
+      setLocalError('Completá todos los campos obligatorios.');
+      return;
+    }
+
+    if (contrasena.length < 8) {
+      setLocalError('La contraseña debe tener al menos 8 caracteres.');
+      return;
+    }
+
+    if (contrasena !== contrasenaRepetir) {
+      setLocalError('Las contraseñas no coinciden.');
+      return;
+    }
+
+    if (showTerms && !aceptaTerminos) {
+      setLocalError('Debés aceptar los términos para continuar.');
+      return;
+    }
+
+    if (onSubmit) {
+      await onSubmit({ nombre, correo, contrasena, aceptaTerminos });
+    }
+  }
+
+  function handleOAuth(provider) {
+    if (onOAuthClick) onOAuthClick(provider);
+  }
+
+  const error = localError || externalError;
+
+  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">
+            <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>
+            )}
+
+            {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>
+
+                <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>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {showName && (
+                <div className="space-y-1.5">
+                  <Label htmlFor="reg-nombre" className="text-small font-medium">
+                    {nameLabel}
+                  </Label>
+                  <Input
+                    id="reg-nombre"
+                    type="text"
+                    placeholder="Juan Pérez"
+                    value={nombre}
+                    onChange={(e) => setNombre(e.target.value)}
+                    autoComplete="name"
+                    autoFocus
+                    disabled={loading}
+                  />
+                </div>
+              )}
+
+              <div className="space-y-1.5">
+                <Label htmlFor="reg-correo" className="text-small font-medium">
+                  {emailLabel}
+                </Label>
+                <Input
+                  id="reg-correo"
+                  type="email"
+                  placeholder="correo@ejemplo.com"
+                  value={correo}
+                  onChange={(e) => setCorreo(e.target.value)}
+                  autoComplete="email"
+                  disabled={loading}
+                />
+              </div>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-1.5">
+                  <Label
+                    htmlFor="reg-contrasena"
+                    className="text-small font-medium"
+                  >
+                    {passwordLabel}
+                  </Label>
+                  <Input
+                    id="reg-contrasena"
+                    type="password"
+                    placeholder="••••••••"
+                    value={contrasena}
+                    onChange={(e) => setContrasena(e.target.value)}
+                    autoComplete="new-password"
+                    disabled={loading}
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label
+                    htmlFor="reg-contrasena-repetir"
+                    className="text-small font-medium"
+                  >
+                    {passwordConfirmLabel}
+                  </Label>
+                  <Input
+                    id="reg-contrasena-repetir"
+                    type="password"
+                    placeholder="••••••••"
+                    value={contrasenaRepetir}
+                    onChange={(e) => setContrasenaRepetir(e.target.value)}
+                    autoComplete="new-password"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              {showTerms && (
+                <div className="flex items-start gap-2.5">
+                  <Checkbox
+                    id="reg-terminos"
+                    checked={aceptaTerminos}
+                    onCheckedChange={setAceptaTerminos}
+                    disabled={loading}
+                    className="mt-0.5"
+                  />
+                  <Label
+                    htmlFor="reg-terminos"
+                    className="cursor-pointer font-normal text-small text-muted-foreground leading-snug"
+                  >
+                    {termsText}
+                  </Label>
+                </div>
+              )}
+
+              <Button type="submit" fullWidth disabled={loading}>
+                {loading ? submitLoadingText : submitText}
+              </Button>
+            </form>
+          </div>
+        </CardContent>
+      </Card>
+
+      {loginHref && (
+        <p className="text-center text-small text-muted-foreground mt-5">
+          {loginText}{' '}
+          <Link
+            to={loginHref}
+            className="text-primary font-medium hover:underline underline-offset-4"
+          >
+            {loginLinkText}
+          </Link>
+        </p>
+      )}
+
+      {footer && (
+        <p className="text-center text-caption text-muted-foreground mt-3 px-2">
+          {footer}
+        </p>
+      )}
+    </AuthLayout>
+  );
+}
+
+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>
+  );
+}

package/src/auth/ResetPasswordPage.jsx

@@ -0,0 +1,158 @@
+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 ResetPasswordPage({
+  title = 'Nueva contraseña',
+  subtitle = 'Elegí una contraseña segura de al menos 8 caracteres.',
+  submitText = 'Restablecer contraseña',
+  submitLoadingText = 'Actualizando...',
+  passwordLabel = 'Nueva contraseña',
+  passwordConfirmLabel = 'Confirmar contraseña',
+
+  loginHref = '/login',
+  loginText = 'Volver al inicio de sesión',
+
+  brandName,
+  brandTagline,
+  brandLogo,
+
+  onSubmit,
+  error: externalError,
+  loading = false,
+
+  footer,
+  className,
+}) {
+  const [contrasena, setContrasena] = useState('');
+  const [contrasenaRepetir, setContrasenaRepetir] = useState('');
+  const [localError, setLocalError] = useState(null);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLocalError(null);
+
+    if (!contrasena || !contrasenaRepetir) {
+      setLocalError('Completá ambos campos.');
+      return;
+    }
+
+    if (contrasena.length < 8) {
+      setLocalError('La contraseña debe tener al menos 8 caracteres.');
+      return;
+    }
+
+    if (contrasena !== contrasenaRepetir) {
+      setLocalError('Las contraseñas no coinciden.');
+      return;
+    }
+
+    if (onSubmit) {
+      await onSubmit({ contrasena });
+    }
+  }
+
+  const error = localError || externalError;
+
+  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">
+            <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="reset-pass" className="text-small font-medium">
+                  {passwordLabel}
+                </Label>
+                <Input
+                  id="reset-pass"
+                  type="password"
+                  placeholder="••••••••"
+                  value={contrasena}
+                  onChange={(e) => setContrasena(e.target.value)}
+                  autoComplete="new-password"
+                  autoFocus
+                  disabled={loading}
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label
+                  htmlFor="reset-pass-repetir"
+                  className="text-small font-medium"
+                >
+                  {passwordConfirmLabel}
+                </Label>
+                <Input
+                  id="reset-pass-repetir"
+                  type="password"
+                  placeholder="••••••••"
+                  value={contrasenaRepetir}
+                  onChange={(e) => setContrasenaRepetir(e.target.value)}
+                  autoComplete="new-password"
+                  disabled={loading}
+                />
+              </div>
+
+              <Button type="submit" fullWidth disabled={loading}>
+                {loading ? submitLoadingText : submitText}
+              </Button>
+            </form>
+          </div>
+        </CardContent>
+      </Card>
+
+      {loginHref && (
+        <p className="text-center text-small text-muted-foreground mt-5">
+          <Link
+            to={loginHref}
+            className="text-primary font-medium hover:underline underline-offset-4"
+          >
+            {loginText}
+          </Link>
+        </p>
+      )}
+
+      {footer && (
+        <p className="text-center text-caption text-muted-foreground mt-3 px-2">
+          {footer}
+        </p>
+      )}
+    </AuthLayout>
+  );
+}

package/src/auth/Verify2FAPage.jsx

@@ -0,0 +1,175 @@
+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 Verify2FAPage({
+  title = 'Verificación en dos pasos',
+  subtitle = 'Ingresá el código de 6 dígitos que enviamos a tu correo.',
+  submitText = 'Verificar',
+  submitLoadingText = 'Verificando...',
+  resendText = 'Reenviar código',
+  cancelText = 'Cancelar',
+  codeLabel = 'Código de verificación',
+  codeLength = 6,
+
+  cancelHref = '/login',
+
+  brandName,
+  brandTagline,
+  brandLogo,
+
+  onSubmit,
+  onResend,
+  error: externalError,
+  loading = false,
+
+  footer,
+  className,
+}) {
+  const [codigo, setCodigo] = useState('');
+  const [localError, setLocalError] = useState(null);
+  const [resendMessage, setResendMessage] = useState(null);
+
+  // Solo acepta dígitos, máximo codeLength caracteres
+  function handleChange(e) {
+    const valor = e.target.value.replace(/\D/g, '').slice(0, codeLength);
+    setCodigo(valor);
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLocalError(null);
+
+    if (codigo.length !== codeLength) {
+      setLocalError(`Ingresá los ${codeLength} dígitos completos.`);
+      return;
+    }
+
+    if (onSubmit) {
+      await onSubmit({ codigo });
+    }
+  }
+
+  async function handleResend() {
+    setResendMessage(null);
+    if (onResend) {
+      await onResend();
+    }
+    setResendMessage('Código reenviado. Revisá tu correo.');
+  }
+
+  const error = localError || externalError;
+
+  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">
+            <div className="space-y-1.5 text-center sm:text-left">
+              <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>
+            )}
+
+            {resendMessage && !error && (
+              <Alert variant="success" title="Listo">
+                {resendMessage}
+              </Alert>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-1.5">
+                <Label htmlFor="verify-codigo" className="text-small font-medium">
+                  {codeLabel}
+                </Label>
+                <Input
+                  id="verify-codigo"
+                  type="text"
+                  inputMode="numeric"
+                  autoComplete="one-time-code"
+                  pattern="[0-9]*"
+                  maxLength={codeLength}
+                  placeholder={'•'.repeat(codeLength)}
+                  value={codigo}
+                  onChange={handleChange}
+                  autoFocus
+                  disabled={loading}
+                  className="text-center text-h4 tracking-[0.5em] font-mono"
+                />
+                <p className="text-caption text-muted-foreground">
+                  {codigo.length} / {codeLength} dígitos
+                </p>
+              </div>
+
+              <Button
+                type="submit"
+                fullWidth
+                disabled={loading || codigo.length !== codeLength}
+              >
+                {loading ? submitLoadingText : submitText}
+              </Button>
+            </form>
+
+            <div className="flex flex-col sm:flex-row gap-3 sm:gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                fullWidth
+                onClick={handleResend}
+                disabled={loading}
+              >
+                {resendText}
+              </Button>
+              {cancelHref && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  fullWidth
+                  asChild
+                  disabled={loading}
+                >
+                  <Link to={cancelHref}>{cancelText}</Link>
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {footer && (
+        <p className="text-center text-caption text-muted-foreground mt-3 px-2">
+          {footer}
+        </p>
+      )}
+    </AuthLayout>
+  );
+}