@thorprovider/blocks 0.1.0

package/src/blocks/application/password-recovery/forgot-password-page-1.tsx

@@ -0,0 +1,320 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Eye, EyeOff, Lock, Mail } from 'lucide-react'
+
+import { Button } from '../../../ui/button'
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from '../../../ui/card'
+import { Input } from '../../../ui/input'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../../../ui/input-otp'
+import { Progress } from '../../../ui/progress'
+
+import ForgotPasswordPage1BrandMark from './forgot-password-page-1-brand-mark'
+
+export interface ForgotPasswordPage1Props {
+  /** Callback fired with the email when the user submits the reset-code step. */
+  onSendResetCode?: (email: string) => void
+  /** Callback fired with the 6-digit code when the user verifies it. */
+  onVerifyCode?: (code: string) => void
+  /** Callback fired when the user requests a new code. */
+  onResendCode?: () => void
+  /** Callback fired with the new password when the user sets it. */
+  onSetNewPassword?: (password: string) => void
+  /** Callback fired when the user goes back to login from the success step. */
+  onBackToLogin?: () => void
+  step1TitleLabel?: string
+  step1DescriptionLabel?: string
+  emailLabel?: string
+  emailPlaceholder?: string
+  sendResetCodeLabel?: string
+  step2TitleLabel?: string
+  step2DescriptionLabel?: string
+  codeLabel?: string
+  verifyCodeLabel?: string
+  resendCodeLabel?: string
+  resendCodeCooldownLabel?: string
+  didNotReceiveLabel?: string
+  step3TitleLabel?: string
+  step3DescriptionLabel?: string
+  newPasswordLabel?: string
+  setNewPasswordLabel?: string
+  strengthWeakLabel?: string
+  strengthMediumLabel?: string
+  strengthStrongLabel?: string
+  strengthIndicatorLabel?: string
+  step4TitleLabel?: string
+  step4DescriptionLabel?: string
+  backToLoginLabel?: string
+  dontHaveAccountLabel?: string
+  signUpLabel?: string
+  showPasswordLabel?: string
+  hidePasswordLabel?: string
+}
+
+const RESEND_COOLDOWN_SECONDS = 30
+
+/**
+ * Returns a password strength score from 0 to 100.
+ * Adds 25 points per satisfied criterion: length >= 8, contains an
+ * uppercase letter, contains a digit, and contains a non-alphanumeric
+ * character. Used to gate the "Set new password" step and drive the
+ * strength progress bar.
+ */
+function passwordStrength(password: string) {
+  let strength = 0
+  if (password.length >= 8) strength += 25
+  if (/[A-Z]/.test(password)) strength += 25
+  if (/[0-9]/.test(password)) strength += 25
+  if (/[^A-Za-z0-9]/.test(password)) strength += 25
+  return strength
+}
+
+export function ForgotPasswordPage1({
+  onSendResetCode,
+  onVerifyCode,
+  onResendCode,
+  onSetNewPassword,
+  onBackToLogin,
+  step1TitleLabel = '¿Olvidaste tu contraseña?',
+  step1DescriptionLabel = 'Ingresa tu correo para restablecer tu contraseña',
+  emailLabel = 'Correo electrónico',
+  emailPlaceholder = 'tucorreo@ejemplo.com',
+  sendResetCodeLabel = 'Enviar código de restablecimiento',
+  step2TitleLabel = 'Revisa tu correo',
+  step2DescriptionLabel = 'Ingresa el código de 6 dígitos enviado a {email}',
+  codeLabel = 'Código de verificación',
+  verifyCodeLabel = 'Verificar código',
+  resendCodeLabel = 'Reenviar código',
+  resendCodeCooldownLabel = 'Reenviar en {n}s',
+  didNotReceiveLabel = '¿No lo recibiste?',
+  step3TitleLabel = 'Crea una nueva contraseña',
+  step3DescriptionLabel = 'Elige una contraseña segura para proteger tu cuenta',
+  newPasswordLabel = 'Nueva contraseña',
+  setNewPasswordLabel = 'Establecer nueva contraseña',
+  strengthWeakLabel = 'Débil',
+  strengthMediumLabel = 'Media',
+  strengthStrongLabel = 'Fuerte',
+  strengthIndicatorLabel = 'Indicador de fuerza de contraseña',
+  step4TitleLabel = '¡Felicitaciones!',
+  step4DescriptionLabel = 'Restableciste tu contraseña correctamente',
+  backToLoginLabel = 'Volver al inicio de sesión',
+  dontHaveAccountLabel = '¿Aún no tienes una cuenta?',
+  signUpLabel = 'Regístrate',
+  showPasswordLabel = 'Mostrar contraseña',
+  hidePasswordLabel = 'Ocultar contraseña',
+}: ForgotPasswordPage1Props) {
+  const [step, setStep] = useState(1)
+  const [email, setEmail] = useState('')
+  const [code, setCode] = useState('')
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [resendCooldown, setResendCooldown] = useState(0)
+
+  useEffect(() => {
+    if (resendCooldown <= 0) return
+    const timer = setInterval(() => {
+      setResendCooldown(prev => (prev <= 1 ? 0 : prev - 1))
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [resendCooldown])
+
+  const handleResend = () => {
+    onResendCode?.()
+    setResendCooldown(RESEND_COOLDOWN_SECONDS)
+  }
+
+  const renderStepContent = () => {
+    switch (step) {
+      case 1:
+        return (
+          <>
+            <CardHeader className="pt-0 text-center">
+              <CardTitle className="text-2xl">{step1TitleLabel}</CardTitle>
+              <CardDescription>{step1DescriptionLabel}</CardDescription>
+            </CardHeader>
+
+            <div className="flex flex-col gap-6">
+              <div className="relative">
+                <Input
+                  id="email-forgot-password-page-1"
+                  type="email"
+                  placeholder={emailPlaceholder}
+                  className="bg-transparent ps-10 h-9 text-sm"
+                  autoComplete="email"
+                  aria-label={emailLabel}
+                  value={email}
+                  onChange={e => setEmail(e.target.value)}
+                  required
+                />
+                <Mail className="text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2" />
+              </div>
+              <Button
+                type="button"
+                className="h-9 px-4 py-2 w-full cursor-pointer"
+                onClick={() => {
+                  onSendResetCode?.(email)
+                  setStep(2)
+                }}
+                disabled={!email}
+              >
+                {sendResetCodeLabel}
+              </Button>
+              <p className="mt-6 flex justify-center gap-1 text-center text-sm">
+                <span>{dontHaveAccountLabel}</span>
+                <a href="#" className="underline underline-offset-4">
+                  {signUpLabel}
+                </a>
+              </p>
+            </div>
+          </>
+        )
+
+      case 2:
+        return (
+          <>
+            <div className="mb-6 text-center">
+              <h1 className="mb-2 text-2xl font-bold tracking-tight text-balance">{step2TitleLabel}</h1>
+              <p className="text-muted-foreground text-sm text-balance">
+                {step2DescriptionLabel.replace('{email}', email || 'tu correo')}
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-6">
+              <InputOTP
+                maxLength={6}
+                value={code}
+                onChange={value => setCode(value)}
+                aria-label={codeLabel}
+              >
+                <InputOTPGroup className="grid w-full grid-cols-6 gap-2 sm:gap-3">
+                  <InputOTPSlot index={0} className="h-12 w-auto flex-1 rounded-md border-l text-lg" />
+                  <InputOTPSlot index={1} className="h-12 w-auto flex-1 rounded-md border-l text-lg" />
+                  <InputOTPSlot index={2} className="h-12 w-auto flex-1 rounded-md border-l text-lg" />
+                  <InputOTPSlot index={3} className="h-12 w-auto flex-1 rounded-md border-l text-lg" />
+                  <InputOTPSlot index={4} className="h-12 w-auto flex-1 rounded-md border-l text-lg" />
+                  <InputOTPSlot index={5} className="h-12 w-auto flex-1 rounded-md border-l text-lg" />
+                </InputOTPGroup>
+              </InputOTP>
+              <Button
+                type="button"
+                className="h-9 px-4 py-2 w-full cursor-pointer"
+                onClick={() => {
+                  onVerifyCode?.(code)
+                  setStep(3)
+                }}
+                disabled={code.length < 6}
+              >
+                {verifyCodeLabel}
+              </Button>
+              <p className="text-muted-foreground text-center text-sm">
+                {didNotReceiveLabel}{' '}
+                <Button
+                  variant="link"
+                  className="cursor-pointer px-1 font-medium underline underline-offset-4 hover:underline"
+                  onClick={handleResend}
+                  disabled={resendCooldown > 0}
+                >
+                  {resendCooldown > 0
+                    ? resendCodeCooldownLabel.replace('{n}', String(resendCooldown))
+                    : resendCodeLabel}
+                </Button>
+              </p>
+            </div>
+          </>
+        )
+
+      case 3: {
+        const strength = passwordStrength(password)
+        const strengthLabel =
+          strength === 0 ? '' : strength < 50 ? strengthWeakLabel : strength < 75 ? strengthMediumLabel : strengthStrongLabel
+        return (
+          <>
+            <div className="mb-6 text-center">
+              <h1 className="mb-2 text-2xl font-bold tracking-tight text-balance">{step3TitleLabel}</h1>
+              <p className="text-muted-foreground text-sm text-balance">{step3DescriptionLabel}</p>
+            </div>
+
+            <div className="flex flex-col gap-6">
+              <div className="relative">
+                <Input
+                  id="new-password-forgot-password-page-1"
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder={newPasswordLabel}
+                  className="bg-transparent ps-10 text-sm"
+                  autoComplete="new-password"
+                  aria-label={newPasswordLabel}
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  required
+                />
+                <Lock className="text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2" />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-9 text-muted-foreground absolute end-1 top-1/2 -translate-y-1/2 cursor-pointer hover:bg-transparent"
+                  onClick={() => setShowPassword(prev => !prev)}
+                  aria-label={showPassword ? hidePasswordLabel : showPasswordLabel}
+                >
+                  {showPassword ? <EyeOff /> : <Eye />}
+                </Button>
+              </div>
+              <div className="flex flex-col gap-1">
+                <Progress value={strength} className="h-2" aria-label={strengthIndicatorLabel} />
+                <small className="text-muted-foreground block text-end text-xs">{strengthLabel}</small>
+              </div>
+
+              <Button
+                type="button"
+                className="h-9 px-4 py-2 w-full cursor-pointer"
+                onClick={() => {
+                  onSetNewPassword?.(password)
+                  setStep(4)
+                }}
+                disabled={strength < 75}
+              >
+                {setNewPasswordLabel}
+              </Button>
+            </div>
+          </>
+        )
+      }
+
+      case 4:
+        return (
+          <>
+            <CardHeader className="mb-4 pt-0 text-center">
+              <CardTitle className="text-2xl">{step4TitleLabel}</CardTitle>
+              <CardDescription>{step4DescriptionLabel}</CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <Button
+                className="h-9 px-4 py-2 w-full cursor-pointer"
+                onClick={() => {
+                  onBackToLogin?.()
+                  setStep(1)
+                }}
+              >
+                {backToLoginLabel}
+              </Button>
+            </CardFooter>
+          </>
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <section className="from-background to-muted/50 relative isolate flex min-h-dvh w-full items-center justify-center overflow-hidden bg-linear-to-br">
+      <div className="relative z-10 container mx-auto flex min-h-dvh items-center justify-center px-4 py-12 sm:py-16">
+        <Card className="bg-background/80 relative w-full max-w-md ring-0 p-6 shadow-2xl backdrop-blur-md sm:p-8">
+          <ForgotPasswordPage1BrandMark />
+          {renderStepContent()}
+        </Card>
+      </div>
+    </section>
+  )
+}
+
+export default ForgotPasswordPage1

package/src/blocks/application/signup-forms/signup-page-1.tsx

@@ -0,0 +1,231 @@
+import type { FormEvent } from 'react'
+import { Lock, Mail, User, type LucideIcon } from 'lucide-react'
+
+import { Button } from '../../../ui/button'
+import { Card } from '../../../ui/card'
+import { Input } from '../../../ui/input'
+
+export interface SignUpPage1SocialButton {
+  name: string
+  icon: LucideIcon
+}
+
+export interface SignUpPage1Data {
+  fullName: string
+  email: string
+  password: string
+}
+
+export interface SignUpPage1Props {
+  /** Brand text shown under the logo mark. Omit to hide it. */
+  logoText?: string
+  createAccountTitleLabel?: string
+  createAccountDescriptionLabel?: string
+  fullNameLabel?: string
+  fullNamePlaceholder?: string
+  emailLabel?: string
+  emailPlaceholder?: string
+  passwordLabel?: string
+  passwordPlaceholder?: string
+  createAccountLabel?: string
+  orSignUpWithLabel?: string
+  /** aria-label template for each social button. Use `{name}` as the button name placeholder. */
+  socialAriaLabel?: string
+  /** Social sign-up buttons rendered in a 3-column grid. Pass an empty array to hide. */
+  socialButtons?: SignUpPage1SocialButton[]
+  alreadyHaveAccountLabel?: string
+  signInLabel?: string
+  termsLabel?: string
+  termsLinkLabel?: string
+  termsHref?: string
+  termsAndLabel?: string
+  privacyLinkLabel?: string
+  privacyHref?: string
+  onSubmit?: (data: SignUpPage1Data) => void
+  onSignIn?: () => void
+}
+
+export function SignUpPage1({
+  logoText,
+  createAccountTitleLabel = 'Crea tu cuenta',
+  createAccountDescriptionLabel = 'Completa el formulario para comenzar',
+  fullNameLabel = 'Nombre completo',
+  fullNamePlaceholder = 'Nombre completo',
+  emailLabel = 'Correo electrónico',
+  emailPlaceholder = 'me@ejemplo.com',
+  passwordLabel = 'Contraseña',
+  passwordPlaceholder = 'Crea una contraseña',
+  createAccountLabel = 'Crear cuenta',
+  orSignUpWithLabel = 'O regístrate con',
+  socialAriaLabel = 'Continuar con {name}',
+  socialButtons = [],
+  alreadyHaveAccountLabel = '¿Ya tienes una cuenta?',
+  signInLabel = 'Inicia sesión',
+  termsLabel = 'Al crear una cuenta, aceptas los',
+  termsLinkLabel = 'Términos de servicio',
+  termsHref,
+  termsAndLabel = 'y',
+  privacyLinkLabel = 'Política de privacidad',
+  privacyHref,
+  onSubmit,
+  onSignIn,
+}: SignUpPage1Props) {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const formData = new FormData(event.currentTarget)
+    onSubmit?.({
+      fullName: String(formData.get('fullName') ?? ''),
+      email: String(formData.get('email') ?? ''),
+      password: String(formData.get('password') ?? ''),
+    })
+  }
+
+  return (
+    <section className='from-background to-muted/50 relative isolate flex min-h-dvh w-full flex-col items-center justify-center overflow-hidden bg-linear-to-br'>
+      <div className='relative z-10 container mx-auto flex min-h-dvh flex-col items-center justify-center px-4 py-12'>
+        <Card className='relative w-full max-w-lg p-8 shadow-2xl ring-0'>
+          <div className='mb-8 flex flex-col items-center'>
+            <div className='my-4 flex justify-center'>
+              <div className='bg-secondary relative size-14 rounded-full border'>
+                <div className='flex h-full items-center justify-center'>
+                  <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
+                    <path
+                      d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
+                      fill='currentColor'
+                    />
+                    <path
+                      d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
+                      fill='currentColor'
+                    />
+                    <path
+                      d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
+                      fill='currentColor'
+                    />
+                    <path
+                      d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
+                      fill='currentColor'
+                    />
+                    <path
+                      d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
+                      fill='currentColor'
+                    />
+                    <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' />
+                    <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' />
+                    <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' />
+                    <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            {logoText && <div className='text-base font-semibold tracking-tight'>{logoText}</div>}
+            <h1 className='mb-2 mt-4 text-center text-2xl font-bold tracking-tight'>{createAccountTitleLabel}</h1>
+            <p className='text-muted-foreground text-center text-sm'>{createAccountDescriptionLabel}</p>
+          </div>
+
+          <form className='flex flex-col gap-6' onSubmit={handleSubmit}>
+            <div className='relative'>
+              <Input
+                id='fullname'
+                name='fullName'
+                type='text'
+                placeholder={fullNamePlaceholder}
+                aria-label={fullNameLabel}
+                className='bg-transparent h-9 ps-10 text-sm'
+                autoComplete='name'
+                required
+              />
+              <User className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />
+            </div>
+
+            <div className='relative'>
+              <Input
+                id='email'
+                name='email'
+                type='email'
+                placeholder={emailPlaceholder}
+                aria-label={emailLabel}
+                className='bg-transparent h-9 ps-10 text-sm'
+                autoComplete='email'
+                required
+              />
+              <Mail className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />
+            </div>
+
+            <div className='relative'>
+              <Input
+                id='password'
+                name='password'
+                type='password'
+                placeholder={passwordPlaceholder}
+                aria-label={passwordLabel}
+                className='bg-transparent h-9 ps-10 text-sm'
+                autoComplete='new-password'
+                required
+              />
+              <Lock className='text-muted-foreground absolute start-3 top-1/2 size-5 -translate-y-1/2' />
+            </div>
+
+            <Button className='h-9 w-full cursor-pointer px-4 py-2' type='submit'>
+              {createAccountLabel}
+            </Button>
+
+            {socialButtons.length > 0 && (
+              <>
+                <div className='relative my-6 text-center'>
+                  <div className='absolute inset-0 flex items-center'>
+                    <div className='w-full border-t' />
+                  </div>
+                  <div className='relative flex justify-center text-xs uppercase'>
+                    <span className='bg-card text-muted-foreground px-2'>{orSignUpWithLabel}</span>
+                  </div>
+                </div>
+
+                <div className='grid grid-cols-3 gap-3'>
+                  {socialButtons.map(button => (
+                    <Button key={button.name} variant='outline' className='h-9 w-full cursor-pointer px-4 py-2'>
+                      <button.icon />
+                      <span className='sr-only'>{socialAriaLabel.replace('{name}', button.name)}</span>
+                    </Button>
+                  ))}
+                </div>
+              </>
+            )}
+          </form>
+
+          <p className='mt-6 flex justify-center gap-1 text-center text-sm'>
+            <span>{alreadyHaveAccountLabel}</span>
+            {onSignIn ? (
+              <button type='button' onClick={onSignIn} className='underline underline-offset-4'>
+                {signInLabel}
+              </button>
+            ) : (
+              <span className='underline underline-offset-4'>{signInLabel}</span>
+            )}
+          </p>
+        </Card>
+
+        <p className='text-muted-foreground relative z-10 mt-8 max-w-lg px-8 text-center text-xs text-balance'>
+          {termsLabel}{' '}
+          {termsHref ? (
+            <a href={termsHref} className='hover:text-primary underline underline-offset-4'>
+              {termsLinkLabel}
+            </a>
+          ) : (
+            <span className='hover:text-primary underline underline-offset-4'>{termsLinkLabel}</span>
+          )}{' '}
+          {termsAndLabel}{' '}
+          {privacyHref ? (
+            <a href={privacyHref} className='hover:text-primary underline underline-offset-4'>
+              {privacyLinkLabel}
+            </a>
+          ) : (
+            <span className='hover:text-primary underline underline-offset-4'>{privacyLinkLabel}</span>
+          )}
+          .
+        </p>
+      </div>
+    </section>
+  )
+}
+
+export default SignUpPage1