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

feat: enhance login page design and functionality by integrating new components, updating styles, and improving user experience

Browse Source
This commit is contained in:
killer-cf
2025-12-13 19:12:08 -03:00
parent 0404edd0ba
commit d2c0636179
11 changed files with 300 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/src/routes/(dashboard)/+layout.svelte
View File

@@ -4,11 +4,11 @@
import PushNotificationManager from '$lib/components/PushNotificationManager.svelte';
import Footer from '$lib/components/Footer.svelte';
import Header from '$lib/components/Header.svelte';
import MenuToggleIcon from '$lib/components/MenuToggleIcon.svelte';
import Sidebar from '$lib/components/Sidebar.svelte';
import DashboardHeaderActions from '$lib/components/dashboard/DashboardHeaderActions.svelte';
import ChatWidget from '$lib/components/chat/ChatWidget.svelte';
import PresenceManager from '$lib/components/chat/PresenceManager.svelte';
import { Menu, X } from 'lucide-svelte';
const { children } = $props();
@@ -44,11 +44,7 @@
aria-label={sidebarOpen ? 'Fechar menu' : 'Abrir menu'}
onclick={toggleSidebar}
>
{#if sidebarOpen}
<X class="h-5 w-5" />
{:else}
<Menu class="h-5 w-5" />
{/if}
<MenuToggleIcon open={sidebarOpen} class="h-5 w-5" />
</button>
{/snippet}

124
apps/web/src/routes/(public)/login/+page.svelte
View File

@@ -9,7 +9,13 @@
import logo from '$lib/assets/logo_governo_PE.png';
import { authClient } from '$lib/auth';
import { obterIPPublico } from '$lib/utils/deviceInfo';
import { LogIn, XCircle } from 'lucide-svelte';
import AnimatedBackgroundElements from '$lib/components/AnimatedBackgroundElements.svelte';
import DecorativeTopLine from '$lib/components/DecorativeTopLine.svelte';
import ErrorMessage from '$lib/components/ErrorMessage.svelte';
import GlassCard from '$lib/components/GlassCard.svelte';
import LoginInput from '$lib/components/login/LoginInput.svelte';
import ShineEffect from '$lib/components/ShineEffect.svelte';
import { LogIn } from 'lucide-svelte';
interface GPSLocation {
latitude?: number;
@@ -167,114 +173,74 @@
</script>
<main
class="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[#0f172a]"
class="bg-base-100 relative flex min-h-screen w-full items-center justify-center overflow-hidden"
>
<!-- Animated Background Elements -->
<div class="absolute inset-0 h-full w-full">
<div
class="bg-primary/20 absolute top-[-10%] left-[-10%] h-[40%] w-[40%] animate-pulse rounded-full blur-[120px]"
></div>
<div
class="bg-secondary/20 absolute right-[-10%] bottom-[-10%] h-[40%] w-[40%] animate-pulse rounded-full blur-[120px] delay-700"
></div>
</div>
<AnimatedBackgroundElements />
<!-- Glass Card -->
<div class="relative z-10 w-full max-w-md p-6">
<div
class="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-8 shadow-2xl ring-1 ring-white/10 backdrop-blur-xl transition-all duration-300"
>
<!-- Decorative Top Line -->
<div
class="via-primary absolute top-0 left-0 h-1 w-full bg-linear-to-r from-transparent to-transparent opacity-50"
></div>
<GlassCard>
<DecorativeTopLine />
<!-- Header -->
<div class="mb-10 text-center">
<div
class="mb-6 inline-flex items-center justify-center rounded-2xl bg-white/5 p-4 shadow-inner ring-1 ring-white/10"
class="bg-base-content/5 ring-base-content/10 mb-6 inline-flex items-center justify-center rounded-2xl p-4 shadow-inner ring-1"
>
<img src={logo} alt="Logo SGSE" class="h-12 w-auto object-contain" />
</div>
<h1 class="mb-2 font-sans text-3xl font-bold tracking-tight text-white">
<h1 class="text-base-content mb-2 font-sans text-3xl font-bold tracking-tight">
Bem-vindo de volta
</h1>
<p class="text-sm font-medium text-gray-400">
<p class="text-base-content/60 text-sm font-medium">
Entre com suas credenciais para acessar o sistema
</p>
</div>
<!-- Error Message -->
{#if erroLogin}
<div
class="mb-6 flex items-center gap-3 rounded-lg border border-red-500/20 bg-red-500/10 p-4 text-red-200 backdrop-blur-md"
>
<XCircle class="h-5 w-5 shrink-0" />
<span class="text-sm font-medium">{erroLogin}</span>
</div>
{/if}
<ErrorMessage message={erroLogin} />
<!-- Form -->
<form class="space-y-6" onsubmit={handleLogin}>
<div class="space-y-2">
<label
for="login-matricula"
class="text-xs font-semibold tracking-wider text-gray-400 uppercase"
>
Matrícula ou E-mail
</label>
<div class="group relative">
<input
id="login-matricula"
type="text"
class="focus:border-primary/50 focus:ring-primary/20 w-full rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-white placeholder-gray-500 transition-all duration-300 focus:bg-black/40 focus:ring-2 focus:outline-none"
placeholder="Digite sua identificação"
bind:value={matricula}
required
disabled={carregandoLogin}
autocomplete="username"
/>
</div>
</div>
<LoginInput
id="login-matricula"
label="Matrícula ou E-mail"
placeholder="Digite sua identificação"
bind:value={matricula}
required
disabled={carregandoLogin}
autocomplete="username"
/>
<div class="space-y-2">
<div class="flex items-center justify-between">
<label
for="login-password"
class="text-xs font-semibold tracking-wider text-gray-400 uppercase"
>
Senha
</label>
<LoginInput
id="login-password"
label="Senha"
type="password"
placeholder="Digite sua senha"
bind:value={senha}
required
disabled={carregandoLogin}
autocomplete="current-password"
>
{#snippet right()}
<a
href={resolve('/esqueci-senha')}
class="text-primary hover:text-primary-focus text-xs font-medium transition-colors"
>
Esqueceu a senha?
</a>
</div>
<div class="group relative">
<input
id="login-password"
type="password"
class="focus:border-primary/50 focus:ring-primary/20 w-full rounded-xl border border-white/10 bg-black/20 px-4 py-3 text-white placeholder-gray-500 transition-all duration-300 focus:bg-black/40 focus:ring-2 focus:outline-none"
placeholder="Digite sua senha"
bind:value={senha}
required
disabled={carregandoLogin}
autocomplete="current-password"
/>
</div>
</div>
{/snippet}
</LoginInput>
<button
type="submit"
class="group bg-primary hover:bg-primary-focus hover:shadow-primary/25 relative w-full overflow-hidden rounded-xl px-4 py-3.5 text-sm font-bold text-white shadow-lg transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-50"
class="group bg-primary hover:bg-primary-focus hover:shadow-primary/25 text-primary-content relative w-full overflow-hidden rounded-xl px-4 py-3.5 text-sm font-bold shadow-lg transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-50"
disabled={carregandoLogin}
>
<div class="relative z-10 flex items-center justify-center gap-2">
{#if carregandoLogin}
<span
class="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white"
class="border-primary-content/30 border-t-primary-content h-5 w-5 animate-spin rounded-full border-2"
></span>
<span>Autenticando...</span>
{:else}
@@ -283,28 +249,26 @@
{/if}
</div>
<!-- Shine Effect -->
<div
class="absolute inset-0 -translate-x-full bg-linear-to-r from-transparent via-white/20 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
></div>
<ShineEffect />
</button>
</form>
<!-- Footer Links -->
<div class="mt-8 text-center">
<p class="text-sm text-gray-500">
<p class="text-base-content/40 text-sm">
Precisa de ajuda?
<a
href={resolve('/abrir-chamado')}
class="font-medium text-gray-300 decoration-1 transition-colors hover:text-white hover:underline"
class="text-base-content/70 hover:text-base-content font-medium decoration-1 transition-colors hover:underline"
>
Abrir um chamado
</a>
</p>
</div>
</div>
</GlassCard>
<!-- Footer Info -->
<div class="mt-8 text-center text-xs text-gray-600">
<div class="text-base-content/40 mt-8 text-center text-xs">
<p>© {new Date().getFullYear()} Governo de Pernambuco. Todos os direitos reservados.</p>
</div>
</div>