feat: add countdown timer and redirect functionality on access denial in MenuProtection component; enhance Sidebar menu item styling and active state handling

This commit is contained in:
2025-10-27 11:21:23 -03:00
parent 929633492d
commit 42cb78e779
5 changed files with 960 additions and 10 deletions

View File

@@ -24,6 +24,7 @@
let verificando = $state(true);
let temPermissao = $state(false);
let motivoNegacao = $state("");
let segundosRestantes = $state(3);
// Query para verificar permissões (só executa se o usuário estiver autenticado)
const permissaoQuery = $derived(
@@ -85,9 +86,22 @@
verificando = false;
temPermissao = false;
motivoNegacao = "access_denied";
segundosRestantes = 3;
const currentPath = window.location.pathname;
window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
// Contador regressivo
const intervalo = setInterval(() => {
segundosRestantes--;
if (segundosRestantes <= 0) {
clearInterval(intervalo);
}
}, 1000);
// Aguardar 3 segundos antes de redirecionar
setTimeout(() => {
clearInterval(intervalo);
const currentPath = window.location.pathname;
window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
}, 3000);
return;
}
@@ -96,9 +110,22 @@
verificando = false;
temPermissao = false;
motivoNegacao = "write_denied";
segundosRestantes = 3;
const currentPath = window.location.pathname;
window.location.href = `${redirectTo}?error=write_denied&route=${encodeURIComponent(currentPath)}`;
// Contador regressivo
const intervalo = setInterval(() => {
segundosRestantes--;
if (segundosRestantes <= 0) {
clearInterval(intervalo);
}
}, 1000);
// Aguardar 3 segundos antes de redirecionar
setTimeout(() => {
clearInterval(intervalo);
const currentPath = window.location.pathname;
window.location.href = `${redirectTo}?error=write_denied&route=${encodeURIComponent(currentPath)}`;
}, 3000);
return;
}
@@ -145,8 +172,14 @@
</div>
<h2 class="text-2xl font-bold text-base-content mb-2">Acesso Negado</h2>
<p class="text-base-content/70 mb-4">Você não tem permissão para acessar esta página.</p>
<div class="flex items-center justify-center gap-2 mb-4 text-primary">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="text-sm font-medium">Redirecionando em <span class="font-bold text-lg">{segundosRestantes}</span> segundo{segundosRestantes !== 1 ? 's' : ''}...</p>
</div>
<button class="btn btn-primary" onclick={() => goto(redirectTo)}>
Voltar ao Dashboard
Voltar Agora
</button>
</div>
</div>