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 Set `VITE_TURNSTILE_SITE_KEY` at frontend build time to show Cloudflare Turnstile
on the login page. 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 ## Validation
```bash ```bash

View File

@@ -23,6 +23,10 @@ declare global {
const turnstileSiteKey = import.meta.env.VITE_TURNSTILE_SITE_KEY; const turnstileSiteKey = import.meta.env.VITE_TURNSTILE_SITE_KEY;
const turnstileScriptId = 'turnstile-api-script'; 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 Login = () => {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
@@ -58,7 +62,7 @@ const Login = () => {
'error-callback': () => { 'error-callback': () => {
setCaptchaToken(''); setCaptchaToken('');
setCaptchaReady(false); setCaptchaReady(false);
setError('Não foi possível carregar a verificação anti-bot.'); setError(securityUnavailableMessage);
}, },
}); });
setCaptchaReady(true); setCaptchaReady(true);
@@ -83,7 +87,7 @@ const Login = () => {
script.addEventListener('load', renderCaptcha, { once: true }); script.addEventListener('load', renderCaptcha, { once: true });
script.addEventListener('error', () => { script.addEventListener('error', () => {
setCaptchaReady(false); setCaptchaReady(false);
setError('Não foi possível carregar a verificação anti-bot.'); setError(securityUnavailableMessage);
}, { once: true }); }, { once: true });
document.head.appendChild(script); document.head.appendChild(script);
@@ -93,7 +97,7 @@ const Login = () => {
const handleLogin = async (e: React.FormEvent) => { const handleLogin = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
if (captchaEnabled && !captchaToken) { if (captchaEnabled && !captchaToken) {
setError('Confirme a verificação anti-bot antes de entrar.'); setError(securityRequiredMessage);
return; return;
} }
@@ -105,7 +109,7 @@ const Login = () => {
if (result === 'success') { if (result === 'success') {
navigate('/graph'); navigate('/graph');
} else if (result === 'captcha_failed') { } else if (result === 'captcha_failed') {
setError('A verificação anti-bot falhou. Tente novamente.'); setError(captchaEnabled ? securityFailedMessage : securityConfigurationMessage);
if (captchaEnabled) { if (captchaEnabled) {
setCaptchaToken(''); setCaptchaToken('');
window.turnstile?.reset(captchaWidgetIdRef.current ?? undefined); 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 className="min-h-[70px] rounded-xl border border-dark-border bg-dark-input/60 p-3">
<div ref={captchaContainerRef} className="flex justify-center" /> <div ref={captchaContainerRef} className="flex justify-center" />
{!captchaReady && ( {!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> </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 <button
type="submit" type="submit"