Improve Turnstile login failure message
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 47s
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 47s
This commit is contained in:
@@ -120,6 +120,9 @@ VITE_TURNSTILE_SITE_KEY
|
||||
Set `VITE_TURNSTILE_SITE_KEY` at frontend build time to show Cloudflare Turnstile
|
||||
on the login page.
|
||||
|
||||
If `TURNSTILE_SECRET` is set but the login page does not show the verification
|
||||
widget, rebuild the frontend image with `VITE_TURNSTILE_SITE_KEY` available.
|
||||
|
||||
## Validation
|
||||
|
||||
```bash
|
||||
|
||||
@@ -23,6 +23,10 @@ declare global {
|
||||
|
||||
const turnstileSiteKey = import.meta.env.VITE_TURNSTILE_SITE_KEY;
|
||||
const turnstileScriptId = 'turnstile-api-script';
|
||||
const securityUnavailableMessage = 'Não foi possível carregar a verificação de segurança. Atualize a página e tente novamente.';
|
||||
const securityConfigurationMessage = 'Verificação de segurança indisponível. Entre em contato com o administrador.';
|
||||
const securityRequiredMessage = 'Conclua a verificação de segurança para continuar.';
|
||||
const securityFailedMessage = 'Não foi possível validar a verificação de segurança. Atualize a página e tente novamente.';
|
||||
|
||||
const Login = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
@@ -58,7 +62,7 @@ const Login = () => {
|
||||
'error-callback': () => {
|
||||
setCaptchaToken('');
|
||||
setCaptchaReady(false);
|
||||
setError('Não foi possível carregar a verificação anti-bot.');
|
||||
setError(securityUnavailableMessage);
|
||||
},
|
||||
});
|
||||
setCaptchaReady(true);
|
||||
@@ -83,7 +87,7 @@ const Login = () => {
|
||||
script.addEventListener('load', renderCaptcha, { once: true });
|
||||
script.addEventListener('error', () => {
|
||||
setCaptchaReady(false);
|
||||
setError('Não foi possível carregar a verificação anti-bot.');
|
||||
setError(securityUnavailableMessage);
|
||||
}, { once: true });
|
||||
document.head.appendChild(script);
|
||||
|
||||
@@ -93,7 +97,7 @@ const Login = () => {
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (captchaEnabled && !captchaToken) {
|
||||
setError('Confirme a verificação anti-bot antes de entrar.');
|
||||
setError(securityRequiredMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -105,7 +109,7 @@ const Login = () => {
|
||||
if (result === 'success') {
|
||||
navigate('/graph');
|
||||
} else if (result === 'captcha_failed') {
|
||||
setError('A verificação anti-bot falhou. Tente novamente.');
|
||||
setError(captchaEnabled ? securityFailedMessage : securityConfigurationMessage);
|
||||
if (captchaEnabled) {
|
||||
setCaptchaToken('');
|
||||
window.turnstile?.reset(captchaWidgetIdRef.current ?? undefined);
|
||||
@@ -173,12 +177,12 @@ const Login = () => {
|
||||
<div className="min-h-[70px] rounded-xl border border-dark-border bg-dark-input/60 p-3">
|
||||
<div ref={captchaContainerRef} className="flex justify-center" />
|
||||
{!captchaReady && (
|
||||
<p className="mt-2 text-center text-xs font-medium text-red-400">Verificação anti-bot indisponível.</p>
|
||||
<p className="mt-2 text-center text-xs font-medium text-red-400">Verificação de segurança indisponível.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="text-red-500 text-sm font-medium">{error}</p>}
|
||||
{error && <p className="text-red-500 text-sm font-medium" role="alert">{error}</p>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
|
||||
Reference in New Issue
Block a user