web-next: selector de cuenta INLINE en «Nombre de la cuenta» + fix iconos al cambiar
- El desplegable WOW1/WOW2… ya no es un box aparte: va dentro del campo «Nombre de la cuenta» (select compacto .account-select). Con una sola cuenta, texto plano. - FIX iconos: el cambio de cuenta hacía router.refresh() (navegación suave) que en algunos navegadores dejaba caer las hojas de estilo/FA y no se recuperaban. Ahora hace window.location.reload() (recarga completa) → todo se recarga bien. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -46,11 +46,6 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<PageShell title={t('title')}>
|
<PageShell title={t('title')}>
|
||||||
{/* Selector de cuenta de juego (WOW1/WOW2…) si la bnet tiene más de una */}
|
|
||||||
{games.length > 1 && (
|
|
||||||
<GameAccountSwitcher accounts={games} currentId={session.accountId ?? 0} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Información: dos fieldsets como en Django */}
|
{/* Información: dos fieldsets como en Django */}
|
||||||
<div className="box-content">
|
<div className="box-content">
|
||||||
<div className="title-box-content">
|
<div className="title-box-content">
|
||||||
@@ -60,7 +55,11 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
|
|||||||
<fieldset className="account-fieldset">
|
<fieldset className="account-fieldset">
|
||||||
<legend>{t('basicData')}</legend>
|
<legend>{t('basicData')}</legend>
|
||||||
<div className="separate account-info">
|
<div className="separate account-info">
|
||||||
<p><i className="fa-solid fa-user account-ficon third-brown"></i> {t('accountName')}: <span>{wowAccountName(data.gameAccount)}</span></p>
|
<p><i className="fa-solid fa-user account-ficon third-brown"></i> {t('accountName')}:{' '}
|
||||||
|
{games.length > 1
|
||||||
|
? <GameAccountSwitcher accounts={games} currentId={session.accountId ?? 0} />
|
||||||
|
: <span>{wowAccountName(data.gameAccount)}</span>}
|
||||||
|
</p>
|
||||||
<p><i className="fa-solid fa-at account-ficon third-brown"></i> {t('regMail')}: <span>{maskEmail(data.regMail)}</span></p>
|
<p><i className="fa-solid fa-at account-ficon third-brown"></i> {t('regMail')}: <span>{maskEmail(data.regMail)}</span></p>
|
||||||
<p><i className="fa-solid fa-at account-ficon third-brown"></i> {t('currentMail')}: <span>{maskEmail(data.email)}</span></p>
|
<p><i className="fa-solid fa-at account-ficon third-brown"></i> {t('currentMail')}: <span>{maskEmail(data.email)}</span></p>
|
||||||
<p><i className="fa-solid fa-calendar-days account-ficon third-brown"></i> {t('joindate')}: <span>{data.joindate}</span></p>
|
<p><i className="fa-solid fa-calendar-days account-ficon third-brown"></i> {t('joindate')}: <span>{data.joindate}</span></p>
|
||||||
|
|||||||
@@ -359,6 +359,17 @@ textarea:focus {
|
|||||||
color: #b1997f;
|
color: #b1997f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Selector de cuenta inline (dentro de «Nombre de la cuenta»). */
|
||||||
|
.account-select {
|
||||||
|
width: auto;
|
||||||
|
min-width: 92px;
|
||||||
|
height: auto;
|
||||||
|
padding: 2px 8px;
|
||||||
|
margin: 0 0 0 4px;
|
||||||
|
font-size: 17px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
/* Colores de clase de WoW (nombre de personaje) */
|
/* Colores de clase de WoW (nombre de personaje) */
|
||||||
.class-warrior { color: #c79c6e; }
|
.class-warrior { color: #c79c6e; }
|
||||||
.class-paladin { color: #f58cba; }
|
.class-paladin { color: #f58cba; }
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { useTranslations } from 'next-intl'
|
|
||||||
import { useRouter } from '@/i18n/navigation'
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Desplegable para cambiar la cuenta de juego activa (WOW1, WOW2…) cuando la
|
* Desplegable INLINE para cambiar la cuenta de juego activa (WOW1, WOW2…),
|
||||||
* Battle.net tiene más de una. Al cambiar, fija la cuenta en la sesión
|
* mostrado en el campo «Nombre de la cuenta» cuando la Battle.net tiene más de
|
||||||
* (/api/auth/select-account) y refresca → todo /account (datos, personajes,
|
* una. Al cambiar, fija la cuenta en la sesión (/api/auth/select-account) y
|
||||||
* servicios, compras…) pasa a operar sobre la cuenta seleccionada.
|
* 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.
|
||||||
*/
|
*/
|
||||||
export function GameAccountSwitcher({
|
export function GameAccountSwitcher({
|
||||||
accounts,
|
accounts,
|
||||||
@@ -17,8 +17,6 @@ export function GameAccountSwitcher({
|
|||||||
accounts: { id: number; index: number }[]
|
accounts: { id: number; index: number }[]
|
||||||
currentId: number
|
currentId: number
|
||||||
}) {
|
}) {
|
||||||
const t = useTranslations('Account')
|
|
||||||
const router = useRouter()
|
|
||||||
const [busy, setBusy] = useState(false)
|
const [busy, setBusy] = useState(false)
|
||||||
|
|
||||||
async function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
|
async function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
|
||||||
@@ -33,7 +31,7 @@ export function GameAccountSwitcher({
|
|||||||
body: JSON.stringify({ accountId: id }),
|
body: JSON.stringify({ accountId: id }),
|
||||||
})
|
})
|
||||||
const d = await res.json()
|
const d = await res.json()
|
||||||
if (d.success) router.refresh()
|
if (d.success) window.location.reload()
|
||||||
else setBusy(false)
|
else setBusy(false)
|
||||||
} catch {
|
} catch {
|
||||||
setBusy(false)
|
setBusy(false)
|
||||||
@@ -41,19 +39,12 @@ export function GameAccountSwitcher({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="box-content">
|
<select value={currentId} onChange={onChange} disabled={busy} className="account-select" aria-label="Cuenta de juego">
|
||||||
<div className="body-box-content centered">
|
{accounts.map((a) => (
|
||||||
<p>
|
<option key={a.id} value={a.id}>
|
||||||
{t('switchAccountLabel')}{' '}
|
WOW{a.index}
|
||||||
<select value={currentId} onChange={onChange} disabled={busy} aria-label={t('switchAccountLabel')}>
|
</option>
|
||||||
{accounts.map((a) => (
|
))}
|
||||||
<option key={a.id} value={a.id}>
|
</select>
|
||||||
WOW{a.index}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user