SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: improve layout and backend monitoring functionality - Streamlined the layout component in Svelte for better readability and consistency. - Enhanced the backend monitoring functions by updating argument structures and improving code clarity. - A #10

Merged
killer-cf merged 15 commits from feat-better-auth into master 2025-11-08 22:27:29 +00:00
Conversation 1 Commits 15 Files Changed 95 +5054 -2200
40 changed files with 5054 additions and 2200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 28107b4050 - Show all commits

388
apps/web/src/lib/components/Sidebar.svelte
View File

@@ -5,58 +5,66 @@
import type { Snippet } from "svelte"; import type { Snippet } from "svelte";
import { authStore } from "$lib/stores/auth.svelte"; import { authStore } from "$lib/stores/auth.svelte";
import { loginModalStore } from "$lib/stores/loginModal.svelte"; import { loginModalStore } from "$lib/stores/loginModal.svelte";
import { useConvexClient } from "convex-svelte"; import { useQuery } from "convex-svelte";
import { api } from "@sgse-app/backend/convex/_generated/api"; import { api } from "@sgse-app/backend/convex/_generated/api";
import NotificationBell from "$lib/components/chat/NotificationBell.svelte"; import NotificationBell from "$lib/components/chat/NotificationBell.svelte";
import ChatWidget from "$lib/components/chat/ChatWidget.svelte"; import ChatWidget from "$lib/components/chat/ChatWidget.svelte";
import PresenceManager from "$lib/components/chat/PresenceManager.svelte"; import PresenceManager from "$lib/components/chat/PresenceManager.svelte";
import { getBrowserInfo } from "$lib/utils/browserInfo";
import { getAvatarUrl } from "$lib/utils/avatarGenerator"; import { getAvatarUrl } from "$lib/utils/avatarGenerator";
import { Menu, User, Home, UserPlus, XCircle, LogIn, Tag, Plus, Check } from "lucide-svelte"; import {
Menu,
User,
Home,
UserPlus,
XCircle,
LogIn,
Tag,
Plus,
Check,
} from "lucide-svelte";
import { authClient } from "$lib/auth";
let { children }: { children: Snippet } = $props(); let { children }: { children: Snippet } = $props();
const convex = useConvexClient();
// Caminho atual da página
const currentPath = $derived(page.url.pathname); const currentPath = $derived(page.url.pathname);
const currentUser = useQuery(api.auth.getCurrentUser, {});
// Função para obter a URL do avatar/foto do usuário // Função para obter a URL do avatar/foto do usuário
const avatarUrlDoUsuario = $derived(() => { const avatarUrlDoUsuario = $derived(() => {
const usuario = authStore.usuario; if (!currentUser.data) return null;
if (!usuario) return null;
// Prioridade: fotoPerfilUrl > avatar > fallback com nome // Prioridade: fotoPerfilUrl > avatar > fallback com nome
if (usuario.fotoPerfilUrl) { if (currentUser.data.fotoPerfil) {
return usuario.fotoPerfilUrl; return currentUser.data.fotoPerfil;
}
if (usuario.avatar) {
return getAvatarUrl(usuario.avatar);
} }
// Fallback: gerar avatar baseado no nome // Fallback: gerar avatar baseado no nome
return getAvatarUrl(usuario.nome); return getAvatarUrl(currentUser.data.nome);
}); });
// Função para gerar classes do menu ativo // Função para gerar classes do menu ativo
function getMenuClasses(isActive: boolean) { function getMenuClasses(isActive: boolean) {
const baseClasses = "group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105"; const baseClasses =
"group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
if (isActive) { if (isActive) {
return `${baseClasses} border-primary bg-primary text-white shadow-lg scale-105`; return `${baseClasses} border-primary bg-primary text-white shadow-lg scale-105`;
} }
return `${baseClasses} border-primary/30 bg-gradient-to-br from-base-100 to-base-200 text-base-content hover:from-primary hover:to-primary/80 hover:text-white`; return `${baseClasses} border-primary/30 bg-linear-to-br from-base-100 to-base-200 text-base-content hover:from-primary hover:to-primary/80 hover:text-white`;
} }
// Função para gerar classes do botão "Solicitar Acesso" // Função para gerar classes do botão "Solicitar Acesso"
function getSolicitarClasses(isActive: boolean) { function getSolicitarClasses(isActive: boolean) {
const baseClasses = "group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105"; const baseClasses =
"group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
if (isActive) { if (isActive) {
return `${baseClasses} border-success bg-success text-white shadow-lg scale-105`; return `${baseClasses} border-success bg-success text-white shadow-lg scale-105`;
} }
return `${baseClasses} border-success/30 bg-gradient-to-br from-success/10 to-success/20 text-base-content hover:from-success hover:to-success/80 hover:text-white`; return `${baseClasses} border-success/30 bg-linear-to-br from-success/10 to-success/20 text-base-content hover:from-success hover:to-success/80 hover:text-white`;
} }
const setores = [ const setores = [
@@ -113,88 +121,55 @@
showAboutModal = false; showAboutModal = false;
} }
/**
* FASE 2: Login dual - tenta Better Auth primeiro, fallback para sistema customizado
*/
async function handleLogin(e: Event) { async function handleLogin(e: Event) {
e.preventDefault(); e.preventDefault();
erroLogin = ""; erroLogin = "";
carregandoLogin = true; carregandoLogin = true;
try { // const browserInfo = await getBrowserInfo();
// FASE 2: Por enquanto, sistema customizado funciona normalmente
// Quando Better Auth estiver configurado, tentaremos primeiro:
//
// try {
// await authStore.loginWithBetterAuth(matricula, senha);
// closeLoginModal();
// goto("/");
// return;
// } catch (betterAuthError) {
// // Fallback para sistema customizado
// console.log("Better Auth falhou, usando sistema customizado");
// }
// Sistema customizado (atual e funcionando) const result = await authClient.signIn.email(
const browserInfo = await getBrowserInfo(); { email: matricula.trim(), password: senha },
{
const resultado = await convex.mutation(api.autenticacao.login, { onError: (ctx) => {
matriculaOuEmail: matricula.trim(), alert(ctx.error.message);
senha: senha, },
userAgent: browserInfo.userAgent || undefined, },
ipAddress: browserInfo.ipAddress, );
});
if (resultado.sucesso) { if (result.data) {
authStore.login(resultado.usuario, resultado.token); closeLoginModal();
closeLoginModal(); goto("/");
} else {
// Redirecionar baseado no role erroLogin = "Erro ao fazer login";
if (resultado.usuario.role.nome === "ti" || resultado.usuario.role.nivel === 0) {
goto("/ti/painel-administrativo");
} else if (resultado.usuario.role.nome === "rh") {
goto("/recursos-humanos");
} else {
goto("/");
}
} else {
erroLogin = resultado.erro || "Erro ao fazer login";
}
} catch (error) {
console.error("Erro ao fazer login:", error);
erroLogin = "Erro ao conectar com o servidor. Tente novamente.";
} finally {
carregandoLogin = false;
} }
} }
async function handleLogout() { async function handleLogout() {
if (authStore.token) { const result = await authClient.signOut();
try { if (result.error) {
await convex.mutation(api.autenticacao.logout, { console.error("Sign out error:", result.error);
token: authStore.token,
});
} catch (error) {
console.error("Erro ao fazer logout:", error);
}
} }
authStore.logout();
goto("/"); goto("/");
} }
</script> </script>
<!-- Header Fixo acima de tudo --> <!-- Header Fixo acima de tudo -->
<div class="navbar bg-gradient-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm shadow-lg border-b border-primary/10 px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-24"> <div
class="navbar bg-linear-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm shadow-lg border-b border-primary/10 px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-24"
>
<div class="flex-none lg:hidden"> <div class="flex-none lg:hidden">
<label <label
for="my-drawer-3" for="my-drawer-3"
class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden cursor-pointer group transition-all duration-300 hover:scale-105" class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden cursor-pointer group transition-all duration-300 hover:scale-105"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
aria-label="Abrir menu" aria-label="Abrir menu"
> >
<!-- Efeito de brilho no hover --> <!-- Efeito de brilho no hover -->
<div class="absolute inset-0 bg-gradient-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div
class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
></div>
<!-- Ícone de menu hambúrguer --> <!-- Ícone de menu hambúrguer -->
<Menu <Menu
class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300" class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
@@ -206,42 +181,54 @@
<div class="flex-1 flex items-center gap-4 lg:gap-6"> <div class="flex-1 flex items-center gap-4 lg:gap-6">
<!-- Logo MODERNO do Governo --> <!-- Logo MODERNO do Governo -->
<div class="avatar"> <div class="avatar">
<div <div
class="w-16 lg:w-20 rounded-2xl shadow-xl p-2 relative overflow-hidden group transition-all duration-300 hover:scale-105" class="w-16 lg:w-20 rounded-2xl shadow-xl p-2 relative overflow-hidden group transition-all duration-300 hover:scale-105"
style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid rgba(102, 126, 234, 0.1);" style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid rgba(102, 126, 234, 0.1);"
> >
<!-- Efeito de brilho no hover --> <!-- Efeito de brilho no hover -->
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div
class="absolute inset-0 bg-linear-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
></div>
<!-- Logo --> <!-- Logo -->
<img <img
src={logo} src={logo}
alt="Logo do Governo de PE" alt="Logo do Governo de PE"
class="w-full h-full object-contain relative z-10 transition-transform duration-300 group-hover:scale-105" class="w-full h-full object-contain relative z-10 transition-transform duration-300 group-hover:scale-105"
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));" style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));"
/> />
<!-- Brilho sutil no canto --> <!-- Brilho sutil no canto -->
<div class="absolute top-0 right-0 w-8 h-8 bg-gradient-to-br from-white/40 to-transparent rounded-bl-full opacity-70"></div> <div
class="absolute top-0 right-0 w-8 h-8 bg-linear-to-br from-white/40 to-transparent rounded-bl-full opacity-70"
></div>
</div> </div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<h1 class="text-xl lg:text-3xl font-bold text-primary tracking-tight">SGSE</h1> <h1 class="text-xl lg:text-3xl font-bold text-primary tracking-tight">
<p class="text-xs lg:text-base text-base-content/80 hidden sm:block font-medium leading-tight"> SGSE
</h1>
<p
class="text-xs lg:text-base text-base-content/80 hidden sm:block font-medium leading-tight"
>
Sistema de Gerenciamento da<br class="lg:hidden" /> Secretaria de Esportes Sistema de Gerenciamento da<br class="lg:hidden" /> Secretaria de Esportes
</p> </p>
</div> </div>
</div> </div>
<div class="flex-none flex items-center gap-4 ml-auto"> <div class="flex-none flex items-center gap-4 ml-auto">
{#if authStore.autenticado} {#if currentUser.data}
<!-- Sino de notificações no canto superior direito --> <!-- Sino de notificações no canto superior direito -->
<div class="relative"> <div class="relative">
<NotificationBell /> <NotificationBell />
</div> </div>
<div class="hidden lg:flex flex-col items-end mr-2"> <div class="hidden lg:flex flex-col items-end mr-2">
<span class="text-sm font-semibold text-primary">{authStore.usuario?.nome}</span> <span class="text-sm font-semibold text-primary"
<span class="text-xs text-base-content/60">{authStore.usuario?.role.nome}</span> >{currentUser.data.nome}</span
>
<span class="text-xs text-base-content/60"
>{currentUser.data.role?.nome}</span
>
</div> </div>
<div class="dropdown dropdown-end"> <div class="dropdown dropdown-end">
<!-- Botão de Perfil ULTRA MODERNO --> <!-- Botão de Perfil ULTRA MODERNO -->
@@ -253,11 +240,16 @@
aria-label="Menu do usuário" aria-label="Menu do usuário"
> >
<!-- Efeito de brilho no hover --> <!-- Efeito de brilho no hover -->
<div class="absolute inset-0 bg-gradient-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div
class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
></div>
<!-- Anel de pulso sutil --> <!-- Anel de pulso sutil -->
<div class="absolute inset-0 rounded-2xl" style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></div> <div
class="absolute inset-0 rounded-2xl"
style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
></div>
<!-- Avatar/Foto do usuário ou ícone padrão --> <!-- Avatar/Foto do usuário ou ícone padrão -->
{#if avatarUrlDoUsuario()} {#if avatarUrlDoUsuario()}
<img <img
@@ -267,40 +259,55 @@
/> />
{:else} {:else}
<!-- Ícone de usuário moderno (fallback) --> <!-- Ícone de usuário moderno (fallback) -->
<User <User
class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300" class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));" style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
/> />
{/if} {/if}
<!-- Badge de status online --> <!-- Badge de status online -->
<div class="absolute top-1 right-1 w-3 h-3 bg-success rounded-full border-2 border-white shadow-lg z-20" style="animation: pulse-dot 2s ease-in-out infinite;"></div> <div
class="absolute top-1 right-1 w-3 h-3 bg-success rounded-full border-2 border-white shadow-lg z-20"
style="animation: pulse-dot 2s ease-in-out infinite;"
></div>
</button> </button>
<!-- svelte-ignore a11y_no_noninteractive_tabindex --> <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow-xl bg-base-100 rounded-box w-52 mt-4 border border-primary/20"> <ul
tabindex="0"
class="dropdown-content z-1 menu p-2 shadow-xl bg-base-100 rounded-box w-52 mt-4 border border-primary/20"
>
<li class="menu-title"> <li class="menu-title">
<span class="text-primary font-bold">{authStore.usuario?.nome}</span> <span class="text-primary font-bold">{authStore.usuario?.nome}</span
>
</li> </li>
<li><a href="/perfil">Meu Perfil</a></li> <li><a href="/perfil">Meu Perfil</a></li>
<li><a href="/alterar-senha">Alterar Senha</a></li> <li><a href="/alterar-senha">Alterar Senha</a></li>
<div class="divider my-0"></div> <div class="divider my-0"></div>
<li><button type="button" onclick={handleLogout} class="text-error">Sair</button></li> <li>
<button type="button" onclick={handleLogout} class="text-error"
>Sair</button
>
</li>
</ul> </ul>
</div> </div>
{:else} {:else}
<button <button
type="button" type="button"
class="btn btn-lg shadow-2xl hover:shadow-primary/30 transition-all duration-500 hover:scale-110 group relative overflow-hidden border-0 bg-gradient-to-br from-primary via-primary to-primary/80 hover:from-primary/90 hover:via-primary/80 hover:to-primary/70" class="btn btn-lg shadow-2xl hover:shadow-primary/30 transition-all duration-500 hover:scale-110 group relative overflow-hidden border-0 bg-linear-to-br from-primary via-primary to-primary/80 hover:from-primary/90 hover:via-primary/80 hover:to-primary/70"
style="width: 4rem; height: 4rem; border-radius: 9999px;" style="width: 4rem; height: 4rem; border-radius: 9999px;"
onclick={() => openLoginModal()} onclick={() => openLoginModal()}
aria-label="Login" aria-label="Login"
> >
<!-- Efeito de brilho animado --> <!-- Efeito de brilho animado -->
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div> <div
class="absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"
></div>
<!-- Anel pulsante de fundo --> <!-- Anel pulsante de fundo -->
<div class="absolute inset-0 rounded-full bg-white/10 group-hover:animate-ping"></div> <div
class="absolute inset-0 rounded-full bg-white/10 group-hover:animate-ping"
></div>
<!-- Ícone de login premium --> <!-- Ícone de login premium -->
<User <User
class="h-8 w-8 relative z-10 text-white group-hover:scale-110 transition-all duration-500" class="h-8 w-8 relative z-10 text-white group-hover:scale-110 transition-all duration-500"
@@ -314,48 +321,66 @@
<div class="drawer lg:drawer-open" style="margin-top: 96px;"> <div class="drawer lg:drawer-open" style="margin-top: 96px;">
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" /> <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col lg:ml-72" style="min-height: calc(100vh - 96px);"> <div
class="drawer-content flex flex-col lg:ml-72"
style="min-height: calc(100vh - 96px);"
>
<!-- Page content --> <!-- Page content -->
<div class="flex-1 overflow-y-auto"> <div class="flex-1 overflow-y-auto">
{@render children?.()} {@render children?.()}
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="footer footer-center bg-gradient-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm text-base-content p-6 border-t-2 border-primary/20 shadow-inner flex-shrink-0"> <footer
<div class="grid grid-flow-col gap-6 text-sm font-medium"> class="footer footer-center bg-linear-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm text-base-content p-6 border-t-2 border-primary/20 shadow-inner shrink-0"
<button type="button" class="link link-hover hover:text-primary transition-colors" onclick={() => openAboutModal()}>Sobre</button> >
<span class="text-base-content/30">•</span> <div class="grid grid-flow-col gap-6 text-sm font-medium">
<a href="/" class="link link-hover hover:text-primary transition-colors">Contato</a> <button
<span class="text-base-content/30">•</span> type="button"
<a href="/" class="link link-hover hover:text-primary transition-colors">Suporte</a> class="link link-hover hover:text-primary transition-colors"
<span class="text-base-content/30">•</span> onclick={() => openAboutModal()}>Sobre</button
<a href="/" class="link link-hover hover:text-primary transition-colors">Privacidade</a> >
</div> <span class="text-base-content/30">•</span>
<div class="flex items-center gap-3 mt-2"> <a href="/" class="link link-hover hover:text-primary transition-colors"
<div class="avatar"> >Contato</a
<div class="w-10 rounded-lg bg-white p-1.5 shadow-md"> >
<img src={logo} alt="Logo" class="w-full h-full object-contain" /> <span class="text-base-content/30">•</span>
</div> <a href="/" class="link link-hover hover:text-primary transition-colors"
</div> >Suporte</a
<div class="text-left"> >
<p class="text-xs font-bold text-primary">Governo do Estado de Pernambuco</p> <span class="text-base-content/30">•</span>
<p class="text-xs text-base-content/70">Secretaria de Esportes</p> <a href="/" class="link link-hover hover:text-primary transition-colors"
>Privacidade</a
>
</div>
<div class="flex items-center gap-3 mt-2">
<div class="avatar">
<div class="w-10 rounded-lg bg-white p-1.5 shadow-md">
<img src={logo} alt="Logo" class="w-full h-full object-contain" />
</div> </div>
</div> </div>
<p class="text-xs text-base-content/60 mt-2">© {new Date().getFullYear()} - Todos os direitos reservados</p> <div class="text-left">
</footer> <p class="text-xs font-bold text-primary">
Governo do Estado de Pernambuco
</p>
<p class="text-xs text-base-content/70">Secretaria de Esportes</p>
</div>
</div>
<p class="text-xs text-base-content/60 mt-2">
© {new Date().getFullYear()} - Todos os direitos reservados
</p>
</footer>
</div> </div>
<div class="drawer-side z-40 fixed" style="margin-top: 96px;"> <div class="drawer-side z-40 fixed" style="margin-top: 96px;">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay" <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
></label> ></label>
<div class="menu bg-gradient-to-b from-primary/25 to-primary/15 backdrop-blur-sm w-72 p-4 flex flex-col gap-2 h-[calc(100vh-96px)] overflow-y-auto border-r-2 border-primary/20 shadow-xl"> <div
class="menu bg-linear-to-b from-primary/25 to-primary/15 backdrop-blur-sm w-72 p-4 flex flex-col gap-2 h-[calc(100vh-96px)] overflow-y-auto border-r-2 border-primary/20 shadow-xl"
>
<!-- Sidebar menu items --> <!-- Sidebar menu items -->
<ul class="flex flex-col gap-2"> <ul class="flex flex-col gap-2">
<li class="rounded-xl"> <li class="rounded-xl">
<a <a href="/" class={getMenuClasses(currentPath === "/")}>
href="/"
class={getMenuClasses(currentPath === "/")}
>
<Home <Home
class="h-5 w-5 group-hover:scale-110 transition-transform" class="h-5 w-5 group-hover:scale-110 transition-transform"
strokeWidth={2} strokeWidth={2}
@@ -376,14 +401,11 @@
</li> </li>
{/each} {/each}
<li class="rounded-xl mt-auto"> <li class="rounded-xl mt-auto">
<a <a
href="/solicitar-acesso" href="/solicitar-acesso"
class={getSolicitarClasses(currentPath === "/solicitar-acesso")} class={getSolicitarClasses(currentPath === "/solicitar-acesso")}
> >
<UserPlus <UserPlus class="h-5 w-5" strokeWidth={2} />
class="h-5 w-5"
strokeWidth={2}
/>
<span>Solicitar acesso</span> <span>Solicitar acesso</span>
</a> </a>
</li> </li>
@@ -412,7 +434,9 @@
</div> </div>
</div> </div>
<h3 class="font-bold text-3xl text-primary">Login</h3> <h3 class="font-bold text-3xl text-primary">Login</h3>
<p class="text-sm text-base-content/60 mt-2">Acesse o sistema com suas credenciais</p> <p class="text-sm text-base-content/60 mt-2">
Acesse o sistema com suas credenciais
</p>
</div> </div>
{#if erroLogin} {#if erroLogin}
@@ -452,8 +476,8 @@
/> />
</div> </div>
<div class="form-control mt-6"> <div class="form-control mt-6">
<button <button
type="submit" type="submit"
class="btn btn-primary w-full" class="btn btn-primary w-full"
disabled={carregandoLogin} disabled={carregandoLogin}
> >
@@ -467,20 +491,34 @@
</button> </button>
</div> </div>
<div class="text-center mt-4 space-y-2"> <div class="text-center mt-4 space-y-2">
<a href="/solicitar-acesso" class="link link-primary text-sm block" onclick={closeLoginModal}> <a
href="/solicitar-acesso"
class="link link-primary text-sm block"
onclick={closeLoginModal}
>
Não tem acesso? Solicite aqui Não tem acesso? Solicite aqui
</a> </a>
<a href="/esqueci-senha" class="link link-secondary text-sm block" onclick={closeLoginModal}> <a
href="/esqueci-senha"
class="link link-secondary text-sm block"
onclick={closeLoginModal}
>
Esqueceu sua senha? Esqueceu sua senha?
</a> </a>
</div> </div>
</form> </form>
<div class="divider text-xs text-base-content/40">Credenciais de teste</div> <div class="divider text-xs text-base-content/40">
Credenciais de teste
</div>
<div class="bg-base-200 p-3 rounded-lg text-xs"> <div class="bg-base-200 p-3 rounded-lg text-xs">
<p class="font-semibold mb-1">Admin:</p> <p class="font-semibold mb-1">Admin:</p>
<p>Matrícula: <code class="bg-base-300 px-2 py-1 rounded">0000</code></p> <p>
<p>Senha: <code class="bg-base-300 px-2 py-1 rounded">Admin@123</code></p> Matrícula: <code class="bg-base-300 px-2 py-1 rounded">0000</code>
</p>
<p>
Senha: <code class="bg-base-300 px-2 py-1 rounded">Admin@123</code>
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -495,7 +533,9 @@
<!-- Modal Sobre --> <!-- Modal Sobre -->
{#if showAboutModal} {#if showAboutModal}
<dialog class="modal modal-open"> <dialog class="modal modal-open">
<div class="modal-box max-w-2xl relative overflow-hidden bg-gradient-to-br from-base-100 to-base-200"> <div
class="modal-box max-w-2xl relative overflow-hidden bg-linear-to-br from-base-100 to-base-200"
>
<button <button
type="button" type="button"
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
@@ -509,7 +549,11 @@
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<div class="avatar"> <div class="avatar">
<div class="w-24 rounded-xl bg-white p-3 shadow-lg"> <div class="w-24 rounded-xl bg-white p-3 shadow-lg">
<img src={logo} alt="Logo SGSE" class="w-full h-full object-contain" /> <img
src={logo}
alt="Logo SGSE"
class="w-full h-full object-contain"
/>
</div> </div>
</div> </div>
<div> <div>
@@ -538,7 +582,9 @@
<!-- Desenvolvido por --> <!-- Desenvolvido por -->
<div class="space-y-2"> <div class="space-y-2">
<p class="text-sm font-medium text-base-content/60">Desenvolvido por</p> <p class="text-sm font-medium text-base-content/60">
Desenvolvido por
</p>
<p class="text-lg font-bold text-primary"> <p class="text-lg font-bold text-primary">
Secretaria de Esportes de Pernambuco Secretaria de Esportes de Pernambuco
</p> </p>
@@ -561,8 +607,8 @@
<!-- Botão OK --> <!-- Botão OK -->
<div class="pt-4"> <div class="pt-4">
<button <button
type="button" type="button"
class="btn btn-primary btn-lg w-full max-w-xs mx-auto shadow-lg hover:shadow-xl transition-all duration-300" class="btn btn-primary btn-lg w-full max-w-xs mx-auto shadow-lg hover:shadow-xl transition-all duration-300"
onclick={closeAboutModal} onclick={closeAboutModal}
> >
@@ -572,8 +618,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal-backdrop" onclick={closeAboutModal} role="button" tabindex="0" onkeydown={(e) => e.key === 'Escape' && closeAboutModal()}> <div
</div> class="modal-backdrop"
onclick={closeAboutModal}
role="button"
tabindex="0"
onkeydown={(e) => e.key === "Escape" && closeAboutModal()}
></div>
</dialog> </dialog>
{/if} {/if}
@@ -586,7 +637,8 @@
<style> <style>
/* Animação de pulso sutil para o anel do botão de perfil */ /* Animação de pulso sutil para o anel do botão de perfil */
@keyframes pulse-ring-subtle { @keyframes pulse-ring-subtle {
0%, 100% { 0%,
100% {
opacity: 0.1; opacity: 0.1;
transform: scale(1); transform: scale(1);
} }
@@ -598,7 +650,8 @@
/* Animação de pulso para o badge de status online */ /* Animação de pulso para o badge de status online */
@keyframes pulse-dot { @keyframes pulse-dot {
0%, 100% { 0%,
100% {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
@@ -608,4 +661,3 @@
} }
} }
</style> </style>

13
packages/backend/convex/auth.ts
View File

@@ -50,10 +50,21 @@ export const getCurrentUser = query({
.query("usuarios") .query("usuarios")
.withIndex("authId", (q) => q.eq("authId", authUser._id)) .withIndex("authId", (q) => q.eq("authId", authUser._id))
.unique(); .unique();
if (!user) { if (!user) {
return; return;
} }
return user;
if (!user.roleId) {
return { ...user, role: null };
}
const role = await ctx.db
.query("roles")
.withIndex("by_id", (q) => q.eq("_id", user.roleId))
.unique();
return { ...user, role };
}, },
}); });