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.
This commit is contained in:
@@ -98,6 +98,7 @@
|
|||||||
matricula = '';
|
matricula = '';
|
||||||
senha = '';
|
senha = '';
|
||||||
erroLogin = '';
|
erroLogin = '';
|
||||||
|
carregandoLogin = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeLoginModal() {
|
function closeLoginModal() {
|
||||||
@@ -105,6 +106,7 @@
|
|||||||
matricula = '';
|
matricula = '';
|
||||||
senha = '';
|
senha = '';
|
||||||
erroLogin = '';
|
erroLogin = '';
|
||||||
|
carregandoLogin = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function openAboutModal() {
|
function openAboutModal() {
|
||||||
@@ -137,6 +139,7 @@
|
|||||||
} else {
|
} else {
|
||||||
erroLogin = 'Erro ao fazer login';
|
erroLogin = 'Erro ao fazer login';
|
||||||
}
|
}
|
||||||
|
carregandoLogin = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleLogout() {
|
async function handleLogout() {
|
||||||
@@ -391,101 +394,142 @@
|
|||||||
<!-- Modal de Login -->
|
<!-- Modal de Login -->
|
||||||
{#if loginModalStore.showModal}
|
{#if loginModalStore.showModal}
|
||||||
<dialog class="modal modal-open">
|
<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
|
<button
|
||||||
type="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}
|
onclick={closeLoginModal}
|
||||||
|
aria-label="Fechar modal"
|
||||||
>
|
>
|
||||||
✕
|
<XCircle class="h-5 w-5" strokeWidth={2.5} />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="p-4">
|
<!-- Decoração de fundo -->
|
||||||
<div class="mb-6 text-center">
|
<div
|
||||||
<div class="avatar mb-4">
|
class="absolute -top-20 -right-20 h-40 w-40 rounded-full bg-primary/10 blur-3xl"
|
||||||
<div class="bg-primary/10 w-20 rounded-lg p-3">
|
></div>
|
||||||
<img src={logo} alt="Logo" class="h-full w-full object-contain" />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-primary text-3xl font-bold">Login</h3>
|
<h3 class="text-primary mb-2 text-4xl font-bold tracking-tight">Login</h3>
|
||||||
<p class="text-base-content/60 mt-2 text-sm">Acesse o sistema com suas credenciais</p>
|
<p class="text-base-content/70 text-sm font-medium">
|
||||||
|
Acesse o sistema com suas credenciais
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Mensagem de erro -->
|
||||||
{#if erroLogin}
|
{#if erroLogin}
|
||||||
<div class="alert alert-error mb-4">
|
<div
|
||||||
<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
|
class="alert alert-error mb-6 border-error/30 bg-error/10 shadow-lg backdrop-blur-sm"
|
||||||
<span>{erroLogin}</span>
|
>
|
||||||
|
<XCircle class="h-5 w-5 shrink-0 stroke-current" strokeWidth={2.5} />
|
||||||
|
<span class="font-medium">{erroLogin}</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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">
|
<div class="form-control">
|
||||||
<label class="label" for="login-matricula">
|
<label class="label pb-2" for="login-matricula">
|
||||||
<span class="label-text font-semibold">Matrícula ou E-mail</span>
|
<span class="text-primary label-text text-sm font-semibold"
|
||||||
|
>Matrícula ou E-mail</span
|
||||||
|
>
|
||||||
</label>
|
</label>
|
||||||
<input
|
<div class="relative">
|
||||||
id="login-matricula"
|
<input
|
||||||
type="text"
|
id="login-matricula"
|
||||||
placeholder="Digite sua matrícula ou e-mail"
|
type="text"
|
||||||
class="input input-bordered input-primary w-full"
|
placeholder="Digite sua matrícula ou e-mail"
|
||||||
bind:value={matricula}
|
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"
|
||||||
required
|
bind:value={matricula}
|
||||||
disabled={carregandoLogin}
|
required
|
||||||
/>
|
disabled={carregandoLogin}
|
||||||
|
autocomplete="username"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Campo Senha -->
|
||||||
<div class="form-control">
|
<div class="form-control">
|
||||||
<label class="label" for="login-password">
|
<label class="label pb-2" for="login-password">
|
||||||
<span class="label-text font-semibold">Senha</span>
|
<span class="text-primary label-text text-sm font-semibold">Senha</span>
|
||||||
</label>
|
</label>
|
||||||
<input
|
<div class="relative">
|
||||||
id="login-password"
|
<input
|
||||||
type="password"
|
id="login-password"
|
||||||
placeholder="Digite sua senha"
|
type="password"
|
||||||
class="input input-bordered input-primary w-full"
|
placeholder="Digite sua senha"
|
||||||
bind:value={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"
|
||||||
required
|
bind:value={senha}
|
||||||
disabled={carregandoLogin}
|
required
|
||||||
/>
|
disabled={carregandoLogin}
|
||||||
|
autocomplete="current-password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</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}
|
{#if carregandoLogin}
|
||||||
<span class="loading loading-spinner loading-sm"></span>
|
<span class="loading loading-spinner loading-sm"></span>
|
||||||
Entrando...
|
<span class="font-semibold">Entrando...</span>
|
||||||
{:else}
|
{:else}
|
||||||
<LogIn class="h-5 w-5" strokeWidth={2} />
|
<LogIn class="h-5 w-5 transition-transform duration-300 group-hover:scale-110" strokeWidth={2.5} />
|
||||||
Entrar
|
<span class="font-semibold">Entrar</span>
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 space-y-2 text-center">
|
|
||||||
|
<!-- Links auxiliares -->
|
||||||
|
<div class="pt-4 space-y-3 text-center">
|
||||||
<a
|
<a
|
||||||
href={resolve('/abrir-chamado')}
|
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}
|
onclick={closeLoginModal}
|
||||||
>
|
>
|
||||||
Abrir Chamado
|
Abrir Chamado
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href={resolve('/esqueci-senha')}
|
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}
|
onclick={closeLoginModal}
|
||||||
>
|
>
|
||||||
Esqueceu sua senha?
|
Esqueceu sua senha?
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||||
|
|||||||
Reference in New Issue
Block a user