From 22e77d8890e71c00bfd9baf2ad5a1bdc4a868e64 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Tue, 18 Nov 2025 07:02:54 -0300
Subject: [PATCH] refactor: enhance Sidebar login modal with improved styling
 and loading state management

- Added loading state management to the login modal for better user feedback during authentication.
- Updated modal styling with a gradient background and improved button interactions for a more modern look.
- Enhanced error message display and form input fields for better accessibility and user experience.
- Refined layout and spacing for a cleaner presentation of the login form and auxiliary links.
---
 apps/web/src/lib/components/Sidebar.svelte | 154 +++++++++++++--------
 1 file changed, 99 insertions(+), 55 deletions(-)

diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index b9cc92b..fe64cde 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -98,6 +98,7 @@
 		matricula = '';
 		senha = '';
 		erroLogin = '';
+		carregandoLogin = false;
 	}
 
 	function closeLoginModal() {
@@ -105,6 +106,7 @@
 		matricula = '';
 		senha = '';
 		erroLogin = '';
+		carregandoLogin = false;
 	}
 
 	function openAboutModal() {
@@ -137,6 +139,7 @@
 		} else {
 			erroLogin = 'Erro ao fazer login';
 		}
+		carregandoLogin = false;
 	}
 
 	async function handleLogout() {
@@ -391,101 +394,142 @@
 <!-- Modal de Login -->
 {#if loginModalStore.showModal}
 	<dialog class="modal modal-open">
-		<div class="modal-box bg-base-100 relative max-w-md overflow-hidden">
+		<div
+			class="modal-box from-base-100 via-base-100 to-primary/5 relative max-w-md overflow-hidden bg-gradient-to-br shadow-2xl backdrop-blur-sm"
+		>
+			<!-- Botão de fechar moderno -->
 			<button
 				type="button"
-				class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
+				class="btn btn-sm btn-circle btn-ghost absolute top-4 right-4 z-10 hover:bg-error/20 hover:text-error transition-all duration-200"
 				onclick={closeLoginModal}
+				aria-label="Fechar modal"
 			>
-				✕
+				<XCircle class="h-5 w-5" strokeWidth={2.5} />
 			</button>
 
-			<div class="p-4">
-				<div class="mb-6 text-center">
-					<div class="avatar mb-4">
-						<div class="bg-primary/10 w-20 rounded-lg p-3">
-							<img src={logo} alt="Logo" class="h-full w-full object-contain" />
+			<!-- Decoração de fundo -->
+			<div
+				class="absolute -top-20 -right-20 h-40 w-40 rounded-full bg-primary/10 blur-3xl"
+			></div>
+			<div
+				class="absolute -bottom-20 -left-20 h-40 w-40 rounded-full bg-primary/5 blur-3xl"
+			></div>
+
+			<div class="relative z-10 p-8">
+				<!-- Header com logo e título -->
+				<div class="mb-8 text-center">
+					<div class="avatar mb-5 mx-auto">
+						<div
+							class="group relative w-24 overflow-hidden rounded-2xl bg-white p-4 shadow-xl ring-2 ring-primary/20 transition-all duration-300 hover:scale-105 hover:shadow-2xl"
+						>
+							<div
+								class="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+							></div>
+							<img
+								src={logo}
+								alt="Logo SGSE"
+								class="relative z-10 h-full w-full object-contain"
+							/>
 						</div>
 					</div>
-					<h3 class="text-primary text-3xl font-bold">Login</h3>
-					<p class="text-base-content/60 mt-2 text-sm">Acesse o sistema com suas credenciais</p>
+					<h3 class="text-primary mb-2 text-4xl font-bold tracking-tight">Login</h3>
+					<p class="text-base-content/70 text-sm font-medium">
+						Acesse o sistema com suas credenciais
+					</p>
 				</div>
 
+				<!-- Mensagem de erro -->
 				{#if erroLogin}
-					<div class="alert alert-error mb-4">
-						<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
-						<span>{erroLogin}</span>
+					<div
+						class="alert alert-error mb-6 border-error/30 bg-error/10 shadow-lg backdrop-blur-sm"
+					>
+						<XCircle class="h-5 w-5 shrink-0 stroke-current" strokeWidth={2.5} />
+						<span class="font-medium">{erroLogin}</span>
 					</div>
 				{/if}
 
-				<form class="space-y-4" onsubmit={handleLogin}>
+				<!-- Formulário -->
+				<form class="space-y-5" onsubmit={handleLogin}>
+					<!-- Campo Matrícula/E-mail -->
 					<div class="form-control">
-						<label class="label" for="login-matricula">
-							<span class="label-text font-semibold">Matrícula ou E-mail</span>
+						<label class="label pb-2" for="login-matricula">
+							<span class="text-primary label-text text-sm font-semibold"
+								>Matrícula ou E-mail</span
+							>
 						</label>
-						<input
-							id="login-matricula"
-							type="text"
-							placeholder="Digite sua matrícula ou e-mail"
-							class="input input-bordered input-primary w-full"
-							bind:value={matricula}
-							required
-							disabled={carregandoLogin}
-						/>
+						<div class="relative">
+							<input
+								id="login-matricula"
+								type="text"
+								placeholder="Digite sua matrícula ou e-mail"
+								class="input input-bordered input-primary w-full border-2 transition-all duration-200 focus:border-primary focus:shadow-lg focus:shadow-primary/20 disabled:opacity-50"
+								bind:value={matricula}
+								required
+								disabled={carregandoLogin}
+								autocomplete="username"
+							/>
+						</div>
 					</div>
+
+					<!-- Campo Senha -->
 					<div class="form-control">
-						<label class="label" for="login-password">
-							<span class="label-text font-semibold">Senha</span>
+						<label class="label pb-2" for="login-password">
+							<span class="text-primary label-text text-sm font-semibold">Senha</span>
 						</label>
-						<input
-							id="login-password"
-							type="password"
-							placeholder="Digite sua senha"
-							class="input input-bordered input-primary w-full"
-							bind:value={senha}
-							required
-							disabled={carregandoLogin}
-						/>
+						<div class="relative">
+							<input
+								id="login-password"
+								type="password"
+								placeholder="Digite sua senha"
+								class="input input-bordered input-primary w-full border-2 transition-all duration-200 focus:border-primary focus:shadow-lg focus:shadow-primary/20 disabled:opacity-50"
+								bind:value={senha}
+								required
+								disabled={carregandoLogin}
+								autocomplete="current-password"
+							/>
+						</div>
 					</div>
-					<div class="form-control mt-6">
-						<button type="submit" class="btn btn-primary w-full" disabled={carregandoLogin}>
+
+					<!-- Botão de submit -->
+					<div class="form-control pt-2">
+						<button
+							type="submit"
+							class="btn btn-primary btn-lg group relative w-full overflow-hidden border-0 bg-gradient-to-r from-primary via-primary to-primary/90 shadow-xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl disabled:opacity-50"
+							disabled={carregandoLogin}
+						>
+							<!-- Efeito de brilho animado -->
+							<div
+								class="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
+							></div>
+
 							{#if carregandoLogin}
 								<span class="loading loading-spinner loading-sm"></span>
-								Entrando...
+								<span class="font-semibold">Entrando...</span>
 							{:else}
-								<LogIn class="h-5 w-5" strokeWidth={2} />
-								Entrar
+								<LogIn class="h-5 w-5 transition-transform duration-300 group-hover:scale-110" strokeWidth={2.5} />
+								<span class="font-semibold">Entrar</span>
 							{/if}
 						</button>
 					</div>
-					<div class="mt-4 space-y-2 text-center">
+
+					<!-- Links auxiliares -->
+					<div class="pt-4 space-y-3 text-center">
 						<a
 							href={resolve('/abrir-chamado')}
-							class="link link-primary block text-sm"
+							class="link link-primary block text-sm font-medium transition-all duration-200 hover:scale-105"
 							onclick={closeLoginModal}
 						>
 							Abrir Chamado
 						</a>
 						<a
 							href={resolve('/esqueci-senha')}
-							class="link link-secondary block text-sm"
+							class="link link-secondary block text-sm font-medium transition-all duration-200 hover:scale-105"
 							onclick={closeLoginModal}
 						>
 							Esqueceu sua senha?
 						</a>
 					</div>
 				</form>
-
-				<div class="divider text-base-content/40 text-xs">Credenciais de teste</div>
-				<div class="bg-base-200 rounded-lg p-3 text-xs">
-					<p class="mb-1 font-semibold">Admin:</p>
-					<p>
-						Matrícula: <code class="bg-base-300 rounded px-2 py-1">0000</code>
-					</p>
-					<p>
-						Senha: <code class="bg-base-300 rounded px-2 py-1">Admin@123</code>
-					</p>
-				</div>
 			</div>
 		</div>
 		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->