@thorprovider/blocks 0.1.0

package/src/blocks/application/verification/verify-1.tsx

@@ -0,0 +1,307 @@
+'use client'
+
+import { useEffect, useId, useState, type FormEvent } from 'react'
+import { KeyRound, Loader2, ShieldCheck } from 'lucide-react'
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../ui/card'
+import { Input } from '../../../ui/input'
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../../../ui/input-otp'
+import { Label } from '../../../ui/label'
+import { Confetti } from './verify-confetti'
+
+/**
+ * Bloque de verificación de dos factores (solo render).
+ *
+ * Este bloque NO valida credenciales reales, no crea sesiones ni se comunica con
+ * ningún backend. Para producción, conecta la verificación real a través de las
+ * props `onVerify` y `onVerifyBackup` (devuelven `Promise<boolean>`) y de `onResend`
+ * / `onContinue`. Si no se proporcionan, se usa una demo interna documentada:
+ * código `123456`, código de respaldo `CQ4T-9WLM`, máximo 3 intentos antes del
+ * bloqueo y reenvío con espera de 30 segundos. La máquina de estados (modo
+ * otp/respaldo, intentos, bloqueo, cuenta atrás, verificado, pendiente) es el
+ * comportamiento valioso del bloque y se conserva en ambos modos.
+ */
+
+const acceptedCode = '123456'
+const acceptedBackupCode = 'CQ4T-9WLM'
+const maxAttempts = 3
+const resendCooldownSeconds = 30
+
+async function demoVerifyCode(code: string): Promise<boolean> {
+  await new Promise(resolve => setTimeout(resolve, 700))
+  return code === acceptedCode
+}
+
+async function demoVerifyBackupCode(code: string): Promise<boolean> {
+  await new Promise(resolve => setTimeout(resolve, 700))
+  return code.trim().toUpperCase() === acceptedBackupCode
+}
+
+export interface Verify1Props {
+  verifyTitleLabel?: string
+  verifyDescriptionLabel?: string
+  backupCodeTitleLabel?: string
+  backupCodeDescriptionLabel?: string
+  backupCodeLabel?: string
+  backupCodePlaceholder?: string
+  otpAriaLabel?: string
+  verifyLabel?: string
+  resendCodeLabel?: string
+  /** Plantilla con {n} sustituido por los segundos restantes. */
+  resendCooldownLabel?: string
+  useBackupCodeLabel?: string
+  useAuthenticatorLabel?: string
+  tooManyAttemptsLabel?: string
+  /** Plantilla con {n} sustituido por los intentos restantes. */
+  attemptsLeftLabel?: string
+  verifiedTitleLabel?: string
+  verifiedDescriptionLabel?: string
+  continueLabel?: string
+  demoOtpHintLabel?: string
+  /** Plantilla con {code} sustituido por el código de respaldo de la demo. */
+  demoBackupHintLabel?: string
+  /** Verificación real del código OTP. Devuelve true si es correcto. */
+  onVerify?: (code: string) => Promise<boolean>
+  /** Verificación real del código de respaldo. Devuelve true si es correcto. */
+  onVerifyBackup?: (code: string) => Promise<boolean>
+  /** Se dispara al pedir reenviar el código. */
+  onResend?: () => void
+  /** Se dispara al continuar tras la verificación. */
+  onContinue?: () => void
+}
+
+export function Verify1({
+  verifyTitleLabel = 'Verificación de dos factores',
+  verifyDescriptionLabel = 'Ingresa el código de 6 dígitos de tu aplicación de autenticación',
+  backupCodeTitleLabel = 'Usa un código de respaldo',
+  backupCodeDescriptionLabel = 'Ingresa uno de tus códigos de respaldo de un solo uso',
+  backupCodeLabel = 'Código de respaldo',
+  backupCodePlaceholder = 'XXXX-XXXX',
+  otpAriaLabel = 'Código de verificación',
+  verifyLabel = 'Verificar',
+  resendCodeLabel = 'Reenviar código',
+  resendCooldownLabel = 'Reenviar código en {n}s',
+  useBackupCodeLabel = 'Usar un código de respaldo en su lugar',
+  useAuthenticatorLabel = 'Usa tu aplicación de autenticación',
+  tooManyAttemptsLabel = 'Demasiados códigos incorrectos. Espera quince minutos o usa un código de respaldo.',
+  attemptsLeftLabel = 'Ese código no es correcto. Te quedan {n} intentos.',
+  verifiedTitleLabel = 'Verificación completa',
+  verifiedDescriptionLabel = 'Este dispositivo es de confianza por treinta días. Puedes revocarlo desde la configuración de seguridad.',
+  continueLabel = 'Continuar',
+  demoOtpHintLabel = 'Prueba 123456 en esta demo.',
+  demoBackupHintLabel = 'Prueba {code} en esta demo. Cada código funciona una sola vez.',
+  onVerify,
+  onVerifyBackup,
+  onResend,
+  onContinue,
+}: Verify1Props) {
+  const backupId = useId()
+  const [mode, setMode] = useState<'otp' | 'backup'>('otp')
+  const [code, setCode] = useState('')
+  const [backup, setBackup] = useState('')
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [attempts, setAttempts] = useState(0)
+  const [verified, setVerified] = useState(false)
+  const [cooldown, setCooldown] = useState(resendCooldownSeconds)
+
+  const locked = attempts >= maxAttempts
+
+  useEffect(() => {
+    if (cooldown <= 0) {
+      return
+    }
+
+    const timer = window.setTimeout(() => setCooldown(current => current - 1), 1000)
+    return () => window.clearTimeout(timer)
+  }, [cooldown])
+
+  const handleResend = () => {
+    onResend?.()
+    setCooldown(resendCooldownSeconds)
+  }
+
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    if (locked) {
+      return
+    }
+
+    setPending(true)
+    setError(null)
+
+    try {
+      const ok =
+        mode === 'otp'
+          ? onVerify
+            ? await onVerify(code)
+            : await demoVerifyCode(code)
+          : onVerifyBackup
+            ? await onVerifyBackup(backup)
+            : await demoVerifyBackupCode(backup)
+
+      if (ok) {
+        setVerified(true)
+        return
+      }
+
+      const next = attempts + 1
+      setAttempts(next)
+      setCode('')
+      setBackup('')
+      setError(
+        next >= maxAttempts
+          ? tooManyAttemptsLabel
+          : attemptsLeftLabel.replace('{n}', String(maxAttempts - next)),
+      )
+    } finally {
+      setPending(false)
+    }
+  }
+
+  if (verified) {
+    return (
+      <div className='bg-muted/30 relative flex min-h-dvh w-full items-center justify-center overflow-hidden px-4 py-12'>
+        {/* Fired once, over the whole field rather than the card, so the paper has somewhere
+            to fall. The success is stated in the heading below; this only decorates it. */}
+        <Confetti fire origin={{ x: 0.5, y: 0.5 }} />
+
+        <Card className='relative w-full max-w-md gap-6 py-8 shadow-lg'>
+          <CardContent className='flex flex-col items-center gap-4 px-8 py-8 text-center'>
+            <span
+              aria-hidden='true'
+              className='bg-primary/10 text-primary flex size-14 items-center justify-center rounded-full'
+            >
+              <ShieldCheck className='size-7' />
+            </span>
+            <h1 className='text-2xl font-semibold tracking-tight'>{verifiedTitleLabel}</h1>
+            <p className='text-muted-foreground max-w-xs text-sm'>{verifiedDescriptionLabel}</p>
+            <Button className='mt-2' onClick={onContinue}>
+              {continueLabel}
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className='bg-muted/30 flex min-h-dvh w-full items-center justify-center px-4 py-12'>
+      <Card className='w-full max-w-md gap-6 py-8 shadow-lg'>
+        <CardHeader className='gap-2 px-8 text-center'>
+          <span
+            aria-hidden='true'
+            className='bg-muted text-muted-foreground mx-auto mb-3 flex size-14 items-center justify-center rounded-full'
+          >
+            {mode === 'otp' ? <ShieldCheck className='size-6' /> : <KeyRound className='size-6' />}
+          </span>
+          <CardTitle className='text-2xl font-semibold tracking-tight'>
+            {mode === 'otp' ? verifyTitleLabel : backupCodeTitleLabel}
+          </CardTitle>
+          <CardDescription>
+            {mode === 'otp' ? verifyDescriptionLabel : backupCodeDescriptionLabel}
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className='px-8'>
+          <form onSubmit={submit} noValidate className='flex flex-col items-center gap-6'>
+            {mode === 'otp' ? (
+              <>
+                <InputOTP
+                  maxLength={6}
+                  value={code}
+                  onChange={setCode}
+                  disabled={pending || locked}
+                  aria-label={otpAriaLabel}
+                  aria-invalid={error ? true : undefined}
+                  aria-describedby={error ? 'verify-error' : undefined}
+                >
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} className='size-12 text-lg' />
+                    <InputOTPSlot index={1} className='size-12 text-lg' />
+                    <InputOTPSlot index={2} className='size-12 text-lg' />
+                  </InputOTPGroup>
+                  <InputOTPSeparator />
+                  <InputOTPGroup>
+                    <InputOTPSlot index={3} className='size-12 text-lg' />
+                    <InputOTPSlot index={4} className='size-12 text-lg' />
+                    <InputOTPSlot index={5} className='size-12 text-lg' />
+                  </InputOTPGroup>
+                </InputOTP>
+                <p className='text-muted-foreground text-xs'>{demoOtpHintLabel}</p>
+              </>
+            ) : (
+              <div className='grid w-full gap-2'>
+                <Label htmlFor={backupId}>{backupCodeLabel}</Label>
+                <Input
+                  id={backupId}
+                  value={backup}
+                  onChange={event => setBackup(event.target.value)}
+                  placeholder={backupCodePlaceholder}
+                  autoComplete='one-time-code'
+                  className='font-mono tracking-wider'
+                  aria-invalid={error ? true : undefined}
+                  aria-describedby={error ? 'verify-error' : `${backupId}-hint`}
+                  disabled={pending || locked}
+                />
+                <p id={`${backupId}-hint`} className='text-muted-foreground text-xs'>
+                  {demoBackupHintLabel.replace('{code}', acceptedBackupCode)}
+                </p>
+              </div>
+            )}
+
+            {error ? (
+              <p id='verify-error' role='alert' className='text-destructive text-center text-sm'>
+                {error}
+              </p>
+            ) : null}
+
+            <Button
+              type='submit'
+              className='w-full'
+              disabled={
+                pending || locked || (mode === 'otp' ? code.length < 6 : backup.trim() === '')
+              }
+              aria-busy={pending}
+            >
+              {pending ? <Loader2 className='size-4 animate-spin' aria-hidden='true' /> : null}
+              {verifyLabel}
+            </Button>
+
+            <div className='flex w-full flex-col items-center gap-1 pt-1'>
+              {mode === 'otp' ? (
+                <Button
+                  type='button'
+                  variant='ghost'
+                  size='sm'
+                  disabled={cooldown > 0}
+                  onClick={handleResend}
+                >
+                  {cooldown > 0
+                    ? resendCooldownLabel.replace('{n}', String(cooldown))
+                    : resendCodeLabel}
+                </Button>
+              ) : null}
+
+              <Button
+                type='button'
+                variant='link'
+                size='sm'
+                className='text-muted-foreground'
+                onClick={() => {
+                  setMode(current => (current === 'otp' ? 'backup' : 'otp'))
+                  setError(null)
+                }}
+              >
+                {mode === 'otp' ? useBackupCodeLabel : useAuthenticatorLabel}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default Verify1

package/src/blocks/application/verification/verify-confetti.tsx

@@ -0,0 +1,192 @@
+'use client'
+
+import { useCallback, useEffect, useImperativeHandle, useRef } from 'react'
+
+import { cn } from '../../../lib/utils'
+
+/**
+ * @title Confetti burst
+ * @description Canvas confetti fired once when something succeeds, with no animation library.
+ *
+ * Deliberately dependency-free. Every other confetti component reaches for `canvas-confetti`,
+ * which means a buyer pasting one block also installs a package. This is roughly a hundred
+ * lines of the same physics: throw particles from an origin, apply gravity and drag, spin them,
+ * fade them out, stop the loop when the last one dies.
+ *
+ * The canvas is `pointer-events-none` and `aria-hidden`, so it can never sit between a person
+ * and the button underneath it, and a screen reader never announces it. Success has to be
+ * stated in text as well; confetti is not a message.
+ *
+ * Under `prefers-reduced-motion` it renders nothing at all. A burst of moving particles is the
+ * exact thing that setting is asking us not to do, and dropping it costs no information.
+ */
+const GRAVITY = 0.24
+const DRAG = 0.992
+const TERMINAL_VELOCITY = 7
+const DECAY = 0.0125
+
+/** Bright by default: a monochrome theme would fire grey paper, which reads as dust. */
+const DEFAULT_COLORS = ['#f43f5e', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7', '#14b8a6']
+
+export interface ConfettiHandle {
+  /** Fire a burst now. Repeated calls stack rather than restart. */
+  fire: () => void
+}
+
+export interface ConfettiProps extends Omit<React.ComponentProps<'canvas'>, 'ref'> {
+  /** Flip to true to fire. Firing again needs a flip back to false first. */
+  fire?: boolean
+  /** Particles per burst. */
+  count?: number
+  /** Origin inside the canvas, 0 to 1 on each axis. */
+  origin?: { x: number; y: number }
+  /** How far the burst throws, in canvas pixels per frame. */
+  spread?: number
+  colors?: string[]
+  ref?: React.Ref<ConfettiHandle>
+}
+
+type Particle = {
+  x: number
+  y: number
+  vx: number
+  vy: number
+  size: number
+  tilt: number
+  spin: number
+  life: number
+  color: string
+}
+
+export function Confetti({
+  fire = false,
+  count = 90,
+  origin = { x: 0.5, y: 0.45 },
+  spread = 11,
+  colors = DEFAULT_COLORS,
+  className,
+  ref,
+  ...props
+}: ConfettiProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const particlesRef = useRef<Particle[]>([])
+  const frameRef = useRef<number | null>(null)
+
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current
+    const context = canvas?.getContext('2d')
+
+    if (!canvas || !context) {
+      return
+    }
+
+    const ratio = window.devicePixelRatio || 1
+    context.clearRect(0, 0, canvas.width, canvas.height)
+
+    const alive: Particle[] = []
+
+    for (const particle of particlesRef.current) {
+      particle.vy = Math.min(particle.vy + GRAVITY, TERMINAL_VELOCITY)
+      particle.vx *= DRAG
+      particle.x += particle.vx
+      particle.y += particle.vy
+      particle.tilt += particle.spin
+      particle.life -= DECAY
+
+      if (particle.life <= 0) {
+        continue
+      }
+
+      alive.push(particle)
+
+      context.save()
+      context.translate(particle.x * ratio, particle.y * ratio)
+      context.rotate(particle.tilt)
+      context.globalAlpha = Math.min(1, particle.life)
+      context.fillStyle = particle.color
+      // Scaling the height by the tilt is what sells a flat rectangle as a tumbling
+      // piece of paper. Without it the pieces read as falling dots.
+      context.fillRect(
+        (-particle.size / 2) * ratio,
+        (-particle.size / 4) * ratio,
+        particle.size * ratio,
+        ((particle.size / 2) * Math.abs(Math.cos(particle.tilt)) + 1) * ratio,
+      )
+      context.restore()
+    }
+
+    particlesRef.current = alive
+
+    if (alive.length > 0) {
+      frameRef.current = window.requestAnimationFrame(draw)
+      return
+    }
+
+    frameRef.current = null
+    context.clearRect(0, 0, canvas.width, canvas.height)
+  }, [])
+
+  const start = useCallback(() => {
+    const canvas = canvasRef.current
+
+    if (!canvas || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      return
+    }
+
+    const ratio = window.devicePixelRatio || 1
+    const { width, height } = canvas.getBoundingClientRect()
+
+    canvas.width = Math.round(width * ratio)
+    canvas.height = Math.round(height * ratio)
+
+    for (let index = 0; index < count; index += 1) {
+      // Biased upward: paper thrown sideways at the floor never looks celebratory.
+      const angle = Math.PI * (1.15 + Math.random() * 0.7)
+      const velocity = spread * (0.45 + Math.random() * 0.55)
+
+      particlesRef.current.push({
+        x: origin.x * width,
+        y: origin.y * height,
+        vx: Math.cos(angle) * velocity,
+        vy: Math.sin(angle) * velocity,
+        size: 6 + Math.random() * 6,
+        tilt: Math.random() * Math.PI,
+        spin: (Math.random() - 0.5) * 0.34,
+        life: 1,
+        color: colors[index % colors.length],
+      })
+    }
+
+    if (frameRef.current === null) {
+      frameRef.current = window.requestAnimationFrame(draw)
+    }
+  }, [colors, count, draw, origin.x, origin.y, spread])
+
+  useImperativeHandle(ref, () => ({ fire: start }), [start])
+
+  useEffect(() => {
+    if (fire) {
+      start()
+    }
+  }, [fire, start])
+
+  useEffect(
+    () => () => {
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current)
+      }
+    },
+    [],
+  )
+
+  return (
+    <canvas
+      ref={canvasRef}
+      aria-hidden="true"
+      className={cn('pointer-events-none absolute inset-0 z-10 size-full', className)}
+      {...props}
+    />
+  )
+}
+
+export default Confetti