web-next: botón «+» para crear cuentas de juego (WOW2, WOW3…)

Junto al «Nombre de la cuenta» hay un botón «+» que pide la contraseña y crea
una nueva cuenta de juego bajo la Battle.net. Ruta /api/account/add-game-account:
verifica la contraseña (authenticate contra battlenet_accounts), calcula el
siguiente battlenet_index (máx 8) y crea la fila `account` con SRP6 Grunt
derivado de la contraseña (gameMakeRegistration) — igual que la activación, así
la cuenta sirve para entrar al juego. Recarga completa al crear/cambiar.
GameAccountSwitcher siempre presente (select si >1, texto si 1) + «+».

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

web-next/components/GameAccountSwitcher.tsx

@@ -1,23 +1,28 @@
 'use client'
 
 import { useState } from 'react'
+import { useTranslations } from 'next-intl'
 
 /**
- * Desplegable INLINE para cambiar la cuenta de juego activa (WOW1, WOW2…),
- * mostrado en el campo «Nombre de la cuenta» cuando la Battle.net tiene más de
- * una. Al cambiar, fija la cuenta en la sesión (/api/auth/select-account) y
- * hace una RECARGA COMPLETA (no router.refresh) → todo /account (datos,
- * personajes, servicios, compras…) pasa a operar sobre la cuenta elegida y se
- * recargan bien todos los estilos/iconos.
+ * Campo «Nombre de la cuenta»: muestra la cuenta de juego activa (WOW1) —como
+ * desplegable si hay más de una— y un botón «+» para crear nuevas cuentas de
+ * juego (WOW2, WOW3…) bajo la misma Battle.net. Cambiar o crear hace una
+ * RECARGA COMPLETA para que todo /account opere sobre la cuenta correcta.
  */
 export function GameAccountSwitcher({
   accounts,
   currentId,
+  currentLabel,
 }: {
   accounts: { id: number; index: number }[]
   currentId: number
+  currentLabel: string
 }) {
+  const t = useTranslations('Account')
   const [busy, setBusy] = useState(false)
+  const [adding, setAdding] = useState(false)
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
 
   async function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
     const id = Number(e.target.value)
@@ -38,13 +43,75 @@ export function GameAccountSwitcher({
     }
   }
 
+  async function addAccount(e: React.FormEvent) {
+    e.preventDefault()
+    if (busy || !password) return
+    setBusy(true)
+    setError(null)
+    try {
+      const res = await fetch('/api/account/add-game-account', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ password }),
+      })
+      const d: { success?: boolean; error?: string } = await res.json()
+      if (d.success) {
+        window.location.reload()
+        return
+      }
+      setError(
+        d.error === 'invalidPassword'
+          ? t('addAccountBadPassword')
+          : d.error === 'maxAccounts'
+            ? t('addAccountMax')
+            : t('addAccountError'),
+      )
+      setBusy(false)
+    } catch {
+      setError(t('addAccountError'))
+      setBusy(false)
+    }
+  }
+
   return (
-    <select value={currentId} onChange={onChange} disabled={busy} className="account-select" aria-label="Cuenta de juego">
-      {accounts.map((a) => (
-        <option key={a.id} value={a.id}>
-          WOW{a.index}
-        </option>
-      ))}
-    </select>
+    <span className="game-account-field">
+      {accounts.length > 1 ? (
+        <select value={currentId} onChange={onChange} disabled={busy} className="account-select" aria-label={t('accountName')}>
+          {accounts.map((a) => (
+            <option key={a.id} value={a.id}>
+              WOW{a.index}
+            </option>
+          ))}
+        </select>
+      ) : (
+        <span>{currentLabel}</span>
+      )}
+      <button
+        type="button"
+        className="add-account-btn"
+        onClick={() => { setAdding((v) => !v); setError(null) }}
+        title={t('addAccount')}
+        aria-label={t('addAccount')}
+      >
+        +
+      </button>
+      {adding && (
+        <form onSubmit={addAccount} className="add-account-form" autoComplete="off">
+          <input
+            type="password"
+            maxLength={16}
+            placeholder={t('addAccountPassword')}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="account-select add-account-input"
+          />
+          <button type="submit" className="add-account-btn" disabled={busy}>
+            {busy ? '…' : t('addAccountConfirm')}
+          </button>
+          {error && <span className="red-form-response"> {error}</span>}
+        </form>
+      )}
+    </span>
   )
 }