Renombrar /register -> /create-account + rediseño (Battle.net)

Mueve la página de registro a /create-account (los enlaces del header y del login apuntan ahí; /register ahora da 404 con el 404 del sitio). Rediseño según el diseño aportado, adaptado a Battle.net (cuenta por email, sin usuario): caja de info bnet (tipo bnet, reglas de contraseña/Gmail, activación, login por correo), ojos para mostrar/ocultar contraseña, checkbox de "no accedo desde EEUU" + términos (con enlaces), ambos requeridos para habilitar el botón, y bloqueo de pegar en confirmar contraseña/correo. i18n ES/EN. No incluye FingerprintJS (antiabuso por huella de dispositivo, requiere backend; la protección es Turnstile + Gmail + activación). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-14 20:44:15 +00:00
parent f37bf71dc0
commit 5d0d2bb089
2 changed files with 0 additions and 0 deletions
@@ -0,0 +1,115 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { Turnstile } from '@/components/Turnstile'
+
+const ERROR_KEYS = [
+  'missingFields',
+  'passwordMismatch',
+  'passwordTooLong',
+  'invalidEmail',
+  'emailExists',
+  'recruiterNotFound',
+  'captchaFailed',
+] as const
+
+export function RegisterForm() {
+  const t = useTranslations('Register')
+  const [form, setForm] = useState({ password: '', confPassword: '', email: '', confEmail: '', recruiter: '' })
+  const [accepted, setAccepted] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [captcha, setCaptcha] = useState('')
+  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
+
+  function upd(k: string, v: string) {
+    setForm((f) => ({ ...f, [k]: v }))
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (busy || !accepted) return
+    setBusy(true)
+    setMessage(null)
+    try {
+      const res = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ ...form, turnstileToken: captcha }),
+      })
+      const data: { success?: boolean; error?: string } = await res.json()
+      if (data.success) {
+        setMessage({ ok: true, text: t('success') })
+      } else {
+        const key = (ERROR_KEYS as readonly string[]).includes(data.error ?? '') ? data.error! : 'genericError'
+        setMessage({ ok: false, text: t(key) })
+      }
+    } catch {
+      setMessage({ ok: false, text: t('genericError') })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit} acceptCharset="utf-8">
+        <table className="middle-center-table">
+          <tbody>
+            <tr>
+              <td>
+                <input type="password" maxLength={16} placeholder={t('password')} required value={form.password} onChange={(e) => upd('password', e.target.value)} />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <input type="password" maxLength={16} placeholder={t('confPassword')} required value={form.confPassword} onChange={(e) => upd('confPassword', e.target.value)} />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <input type="email" maxLength={320} placeholder={t('email')} required value={form.email} onChange={(e) => upd('email', e.target.value)} />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <input type="email" maxLength={320} placeholder={t('confEmail')} required value={form.confEmail} onChange={(e) => upd('confEmail', e.target.value)} />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <input type="text" maxLength={12} placeholder={t('recruiter')} value={form.recruiter} onChange={(e) => upd('recruiter', e.target.value)} />
+              </td>
+            </tr>
+            <tr>
+              <td className="lefted separate">
+                <label>
+                  <input type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} /> {t('terms')}
+                </label>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Turnstile onVerify={setCaptcha} />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <button type="submit" className="create-button" disabled={busy || !accepted}>
+                  {busy ? t('creating') : t('submit')}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </form>
+      <hr />
+      <div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
+        {message && (
+          <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>
+        )}
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,24 @@
+import { getTranslations, setRequestLocale } from 'next-intl/server'
+import { PageShell } from '@/components/PageShell'
+import { RegisterForm } from './RegisterForm'
+
+export default async function RegisterPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params
+  setRequestLocale(locale)
+  const t = await getTranslations('Register')
+
+  return (
+    <PageShell title={t('title')}>
+      <div className="box-content">
+        <div className="body-box-content info-box-light justified">
+          <p>{t('info')}</p>
+        </div>
+      </div>
+      <div className="box-content">
+        <div className="body-box-content centered">
+          <RegisterForm />
+        </div>
+      </div>
+    </PageShell>
+  )
+}