create-account: validación en cliente con red-response inmediato

Antes los errores (contraseñas/correos que no coinciden, campos vacíos) solo se
mostraban en rojo tras el envío al servidor. Ahora se validan en el cliente y se
muestran al instante como red-form-response, sin llamada al servidor. Nueva clave
emailMismatch. El servidor sigue haciendo la validación final (Gmail, existe, etc.).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/app/[locale]/create-account/RegisterForm.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
+import { Link } from '@/i18n/navigation'
 import { Turnstile } from '@/components/Turnstile'
 
 const ERROR_KEYS = [
@@ -14,21 +15,78 @@ const ERROR_KEYS = [
   'captchaFailed',
 ] as const
 
+/** Campo de contraseña con ojo para mostrar/ocultar. */
+function PasswordInput({
+  value,
+  onChange,
+  placeholder,
+  ariaLabel,
+  blockPaste,
+}: {
+  value: string
+  onChange: (v: string) => void
+  placeholder: string
+  ariaLabel: string
+  blockPaste?: boolean
+}) {
+  const [show, setShow] = useState(false)
+  const noPaste = blockPaste ? (e: React.ClipboardEvent) => e.preventDefault() : undefined
+  return (
+    <>
+      <input
+        type={show ? 'text' : 'password'}
+        maxLength={16}
+        placeholder={placeholder}
+        required
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onPaste={noPaste}
+        onCopy={noPaste}
+        onCut={noPaste}
+      />{' '}
+      <span
+        className={`far ${show ? 'fa-eye-slash' : 'fa-eye'} toggle-password`}
+        role="button"
+        tabIndex={0}
+        aria-label={ariaLabel}
+        onClick={() => setShow((s) => !s)}
+      />
+    </>
+  )
+}
+
 export function RegisterForm() {
   const t = useTranslations('Register')
   const [form, setForm] = useState({ password: '', confPassword: '', email: '', confEmail: '', recruiter: '' })
   const [accepted, setAccepted] = useState(false)
+  const [notUs, setNotUs] = useState(false)
   const [busy, setBusy] = useState(false)
   const [captcha, setCaptcha] = useState('')
   const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)
 
+  const canSubmit = accepted && notUs && !busy
+
   function upd(k: string, v: string) {
     setForm((f) => ({ ...f, [k]: v }))
   }
 
+  /** Validación en cliente: muestra el error en rojo al instante, sin ir al servidor. */
+  function clientError(): string | null {
+    if (!form.password || !form.confPassword || !form.email || !form.confEmail) return 'missingFields'
+    if (form.password !== form.confPassword) return 'passwordMismatch'
+    if (form.password.length > 16) return 'passwordTooLong'
+    if (form.email.trim() !== form.confEmail.trim()) return 'emailMismatch'
+    return null
+  }
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
-    if (busy || !accepted) return
+    if (!canSubmit) return
+    const err = clientError()
+    if (err) {
+      setMessage({ ok: false, text: t(err) })
+      return
+    }
     setBusy(true)
     setMessage(null)
     try {
@@ -52,6 +110,8 @@ export function RegisterForm() {
     }
   }
 
+  const noPaste = (e: React.ClipboardEvent) => e.preventDefault()
+
   return (
     <>
       <form onSubmit={handleSubmit} acceptCharset="utf-8">
@@ -59,12 +119,12 @@ export function RegisterForm() {
           <tbody>
             <tr>
               <td>
-                <input type="password" maxLength={16} placeholder={t('password')} required value={form.password} onChange={(e) => upd('password', e.target.value)} />
+                <PasswordInput value={form.password} onChange={(v) => upd('password', v)} placeholder={t('password')} ariaLabel={t('showPassword')} />
               </td>
             </tr>
             <tr>
               <td>
-                <input type="password" maxLength={16} placeholder={t('confPassword')} required value={form.confPassword} onChange={(e) => upd('confPassword', e.target.value)} />
+                <PasswordInput value={form.confPassword} onChange={(v) => upd('confPassword', v)} placeholder={t('confPassword')} ariaLabel={t('showPassword')} blockPaste />
               </td>
             </tr>
             <tr>
@@ -74,19 +134,30 @@ export function RegisterForm() {
             </tr>
             <tr>
               <td>
-                <input type="email" maxLength={320} placeholder={t('confEmail')} required value={form.confEmail} onChange={(e) => upd('confEmail', e.target.value)} />
+                <input
+                  type="email"
+                  maxLength={320}
+                  placeholder={t('confEmail')}
+                  required
+                  value={form.confEmail}
+                  onChange={(e) => upd('confEmail', e.target.value)}
+                  onPaste={noPaste}
+                  onCopy={noPaste}
+                  onCut={noPaste}
+                />
               </td>
             </tr>
             <tr>
               <td>
-                <input type="text" maxLength={12} placeholder={t('recruiter')} value={form.recruiter} onChange={(e) => upd('recruiter', e.target.value)} />
+                <hr />
               </td>
             </tr>
             <tr>
-              <td className="lefted separate">
-                <label>
-                  <input type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} /> {t('terms')}
-                </label>
+              <td className="second-brown">{t('recruiterOptional')}</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>
@@ -94,9 +165,27 @@ export function RegisterForm() {
                 <Turnstile onVerify={setCaptcha} />
               </td>
             </tr>
+            <tr>
+              <td className="lefted separate">
+                <label>
+                  <input type="checkbox" className="terms-check" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} />{' '}
+                  {t.rich('termsRich', {
+                    terms: (c) => <Link href="/terms-and-conditions" target="_blank">{c}</Link>,
+                    privacy: (c) => <Link href="/privacy-policy" target="_blank">{c}</Link>,
+                  })}
+                </label>
+              </td>
+            </tr>
+            <tr>
+              <td className="lefted separate">
+                <label>
+                  <input type="checkbox" className="terms-check" checked={notUs} onChange={(e) => setNotUs(e.target.checked)} /> {t('notUs')}
+                </label>
+              </td>
+            </tr>
             <tr>
               <td>
-                <button type="submit" className="create-button" disabled={busy || !accepted}>
+                <button type="submit" className="create-button" disabled={!canSubmit}>
                   {busy ? t('creating') : t('submit')}
                 </button>
               </td>
@@ -106,9 +195,7 @@ export function RegisterForm() {
       </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>
-        )}
+        {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
       </div>
     </>
   )