web-next: paridad de los campos de login con el tema Django
- Turnstile: quitar clases Tailwind del wrapper (my-3/flex/justify-center) → estilo inline neutral centrado, como la web Django. - login/register/recover: el boton ya NO arranca deshabilitado (gris) por falta de captcha; se ve activo como en Django. El captcha lo sigue validando el servidor (devuelve captchaFailed). Se quita el SITE_KEY cliente ya innecesario. - reset-password: pagina que habia quedado sin migrar (usaba nw-btn/ nw-input/mx-auto/text-amber) → PageShell + middle-center-table + inputs planos + recover-button + alert-message, igual que el resto del flujo. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -6,7 +6,6 @@ import { useRouter } from '@/i18n/navigation'
|
|||||||
import { Turnstile } from '@/components/Turnstile'
|
import { Turnstile } from '@/components/Turnstile'
|
||||||
|
|
||||||
const ERROR_KEYS = ['invalidCredentials', 'missingFields', 'invalidRequest', 'captchaFailed'] as const
|
const ERROR_KEYS = ['invalidCredentials', 'missingFields', 'invalidRequest', 'captchaFailed'] as const
|
||||||
const SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
|
|
||||||
|
|
||||||
export function LoginForm() {
|
export function LoginForm() {
|
||||||
const t = useTranslations('Login')
|
const t = useTranslations('Login')
|
||||||
@@ -99,7 +98,7 @@ export function LoginForm() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="login-button"
|
className="login-button"
|
||||||
disabled={busy || (!!SITE_KEY && !captcha)}
|
disabled={busy}
|
||||||
>
|
>
|
||||||
{busy ? t('connecting') : t('submit')}
|
{busy ? t('connecting') : t('submit')}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import { useTranslations } from 'next-intl'
|
|||||||
import { Turnstile } from '@/components/Turnstile'
|
import { Turnstile } from '@/components/Turnstile'
|
||||||
|
|
||||||
const ERROR_KEYS = ['invalidEmail', 'captchaFailed'] as const
|
const ERROR_KEYS = ['invalidEmail', 'captchaFailed'] as const
|
||||||
const SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
|
|
||||||
|
|
||||||
export function RecoverForm() {
|
export function RecoverForm() {
|
||||||
const t = useTranslations('Recover')
|
const t = useTranslations('Recover')
|
||||||
@@ -65,7 +64,7 @@ export function RecoverForm() {
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<button type="submit" className="recover-button" disabled={busy || (!!SITE_KEY && !captcha)}>
|
<button type="submit" className="recover-button" disabled={busy}>
|
||||||
{busy ? t('sending') : t('submit')}
|
{busy ? t('sending') : t('submit')}
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ const ERROR_KEYS = [
|
|||||||
'recruiterNotFound',
|
'recruiterNotFound',
|
||||||
'captchaFailed',
|
'captchaFailed',
|
||||||
] as const
|
] as const
|
||||||
const SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
|
|
||||||
|
|
||||||
export function RegisterForm() {
|
export function RegisterForm() {
|
||||||
const t = useTranslations('Register')
|
const t = useTranslations('Register')
|
||||||
@@ -97,7 +96,7 @@ export function RegisterForm() {
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<button type="submit" className="create-button" disabled={busy || !accepted || (!!SITE_KEY && !captcha)}>
|
<button type="submit" className="create-button" disabled={busy || !accepted}>
|
||||||
{busy ? t('creating') : t('submit')}
|
{busy ? t('creating') : t('submit')}
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@@ -42,25 +42,42 @@ export function ResetForm({ token }: { token: string }) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const field = 'nw-input'
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto max-w-sm text-center">
|
<>
|
||||||
<form onSubmit={handleSubmit} className="space-y-3">
|
<form onSubmit={handleSubmit} acceptCharset="utf-8">
|
||||||
<input type="password" maxLength={16} placeholder={t('password')} value={password} onChange={(e) => setPassword(e.target.value)} required className={field} />
|
<table className="middle-center-table">
|
||||||
<input type="password" maxLength={16} placeholder={t('confPassword')} value={confPassword} onChange={(e) => setConfPassword(e.target.value)} required className={field} />
|
<tbody>
|
||||||
<button type="submit" disabled={busy || done} className="w-full nw-btn disabled:opacity-60">
|
<tr>
|
||||||
{busy ? t('saving') : t('submit')}
|
<td>
|
||||||
</button>
|
<input type="password" maxLength={16} placeholder={t('password')} value={password} onChange={(e) => setPassword(e.target.value)} required />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<input type="password" maxLength={16} placeholder={t('confPassword')} value={confPassword} onChange={(e) => setConfPassword(e.target.value)} required />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<button type="submit" className="recover-button" disabled={busy || done}>
|
||||||
|
{busy ? t('saving') : t('submit')}
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</form>
|
</form>
|
||||||
{message && <p className={`mt-3 ${message.ok ? 'text-green-400' : 'text-red-400'}`}>{message.text}</p>}
|
<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>
|
||||||
{done && (
|
{done && (
|
||||||
<p className="mt-4">
|
<p>
|
||||||
<Link href="/login" className="text-sky-400 underline">
|
<Link href="/login">{t('goLogin')}</Link>
|
||||||
{t('goLogin')}
|
|
||||||
</Link>
|
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
import { getTranslations, setRequestLocale } from 'next-intl/server'
|
||||||
|
import { PageShell } from '@/components/PageShell'
|
||||||
import { ResetForm } from './ResetForm'
|
import { ResetForm } from './ResetForm'
|
||||||
|
|
||||||
export default async function ResetPasswordPage({
|
export default async function ResetPasswordPage({
|
||||||
@@ -14,9 +15,12 @@ export default async function ResetPasswordPage({
|
|||||||
const t = await getTranslations('Reset')
|
const t = await getTranslations('Reset')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="mx-auto max-w-lg px-4 py-8">
|
<PageShell title={t('title')}>
|
||||||
<h1 className="mb-6 text-center text-2xl font-bold text-amber-500">{t('title')}</h1>
|
<div className="box-content">
|
||||||
<ResetForm token={token ?? ''} />
|
<div className="body-box-content centered">
|
||||||
</main>
|
<ResetForm token={token ?? ''} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PageShell>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -74,5 +74,5 @@ export function Turnstile({ onVerify }: { onVerify: (token: string) => void }) {
|
|||||||
}, [siteKey])
|
}, [siteKey])
|
||||||
|
|
||||||
if (!siteKey) return null
|
if (!siteKey) return null
|
||||||
return <div ref={ref} className="my-3 flex justify-center" />
|
return <div ref={ref} style={{ display: 'flex', justifyContent: 'center', margin: '12px 0' }} />
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user