Improve Turnstile login failure message
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 47s

This commit is contained in:
Cauê Faleiros
2026-07-28 12:56:17 -03:00
parent 4857438e6f
commit 20dde11ff0
2 changed files with 13 additions and 6 deletions

View File

@@ -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

View File

@@ -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"