killer-cf
11eef4aa2a
- Updated various Svelte components to improve code readability and maintainability. - Standardized button classes across components for a consistent user interface. - Enhanced error handling and user feedback in modals and forms. - Cleaned up unnecessary imports and optimized component structure for better performance.
364 lines
9.8 KiB
Svelte
364 lines
9.8 KiB
Svelte
<script lang="ts">
|
|
import { useConvexClient } from 'convex-svelte';
|
|
import { api } from '@sgse-app/backend/convex/_generated/api';
|
|
|
|
const convex = useConvexClient();
|
|
|
|
let matricula = $state('');
|
|
let email = $state('');
|
|
let carregando = $state(false);
|
|
let notice = $state<{ type: 'success' | 'error' | 'info'; message: string } | null>(null);
|
|
let solicitacaoEnviada = $state(false);
|
|
|
|
async function handleSubmit(e: Event) {
|
|
e.preventDefault();
|
|
notice = null;
|
|
|
|
if (!matricula || !email) {
|
|
notice = {
|
|
type: 'error',
|
|
message: 'Por favor, preencha todos os campos'
|
|
};
|
|
return;
|
|
}
|
|
|
|
carregando = true;
|
|
|
|
try {
|
|
// Verificar se o usuário existe
|
|
const usuarios = await convex.query(api.usuarios.listar, {
|
|
matricula: matricula
|
|
});
|
|
|
|
const usuario = usuarios.find((u) => u.matricula === matricula && u.email === email);
|
|
|
|
if (!usuario) {
|
|
notice = {
|
|
type: 'error',
|
|
message: 'Matrícula ou e-mail não encontrados. Verifique os dados e tente novamente.'
|
|
};
|
|
carregando = false;
|
|
return;
|
|
}
|
|
|
|
// Simular envio de solicitação
|
|
solicitacaoEnviada = true;
|
|
notice = {
|
|
type: 'success',
|
|
message: 'Solicitação enviada com sucesso! A equipe de TI entrará em contato em breve.'
|
|
};
|
|
|
|
// Limpar campos
|
|
matricula = '';
|
|
email = '';
|
|
} catch (error: any) {
|
|
notice = {
|
|
type: 'error',
|
|
message: error.message || 'Erro ao processar solicitação'
|
|
};
|
|
} finally {
|
|
carregando = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<main class="container mx-auto max-w-2xl px-4 py-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<div class="mb-2 flex items-center gap-3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-primary h-10 w-10"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<h1 class="text-primary text-4xl font-bold">Esqueci Minha Senha</h1>
|
|
</div>
|
|
<p class="text-base-content/70 text-lg">Solicite a recuperação da sua senha de acesso</p>
|
|
</div>
|
|
|
|
<!-- Breadcrumbs -->
|
|
<div class="breadcrumbs mb-6 text-sm">
|
|
<ul>
|
|
<li><a href="/">Dashboard</a></li>
|
|
<li>Esqueci Minha Senha</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Alertas -->
|
|
{#if notice}
|
|
<div
|
|
class="alert {notice.type === 'success'
|
|
? 'alert-success'
|
|
: notice.type === 'error'
|
|
? 'alert-error'
|
|
: 'alert-info'} mb-6 shadow-lg"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6 shrink-0 stroke-current"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
{#if notice.type === 'success'}
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
{:else if notice.type === 'error'}
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
{:else}
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
{/if}
|
|
</svg>
|
|
<span>{notice.message}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if !solicitacaoEnviada}
|
|
<!-- Formulário -->
|
|
<div class="card bg-base-100 border-base-300 border shadow-xl">
|
|
<div class="card-body">
|
|
<div class="alert alert-info mb-6">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6 shrink-0 stroke-current"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<h3 class="font-bold">Como funciona?</h3>
|
|
<p class="text-sm">
|
|
Informe sua matrícula e e-mail cadastrados. A equipe de TI receberá sua solicitação e
|
|
entrará em contato para resetar sua senha.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form onsubmit={handleSubmit} class="space-y-6">
|
|
<!-- Matrícula -->
|
|
<div class="form-control">
|
|
<label class="label" for="matricula">
|
|
<span class="label-text font-semibold">Matrícula</span>
|
|
<span class="label-text-alt text-error">*</span>
|
|
</label>
|
|
<input
|
|
id="matricula"
|
|
type="text"
|
|
placeholder="Digite sua matrícula"
|
|
class="input input-bordered input-primary w-full"
|
|
bind:value={matricula}
|
|
required
|
|
disabled={carregando}
|
|
/>
|
|
</div>
|
|
|
|
<!-- E-mail -->
|
|
<div class="form-control">
|
|
<label class="label" for="email">
|
|
<span class="label-text font-semibold">E-mail</span>
|
|
<span class="label-text-alt text-error">*</span>
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
placeholder="Digite seu e-mail cadastrado"
|
|
class="input input-bordered input-primary w-full"
|
|
bind:value={email}
|
|
required
|
|
disabled={carregando}
|
|
/>
|
|
<label class="label">
|
|
<span class="label-text-alt text-base-content/60">
|
|
Use o e-mail cadastrado no sistema
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Botões -->
|
|
<div class="mt-8 flex justify-end gap-4">
|
|
<a href="/" class="btn" class:btn-disabled={carregando}>
|
|
<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="M10 19l-7-7m0 0l7-7m-7 7h18"
|
|
/>
|
|
</svg>
|
|
Voltar
|
|
</a>
|
|
<button type="submit" class="btn btn-primary" disabled={carregando}>
|
|
{#if carregando}
|
|
<span class="loading loading-spinner loading-sm"></span>
|
|
Enviando...
|
|
{:else}
|
|
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
Enviar Solicitação
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<!-- Mensagem de Sucesso -->
|
|
<div class="card bg-success/10 border-success/30 border shadow-xl">
|
|
<div class="card-body text-center">
|
|
<div class="mb-4 flex justify-center">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-success h-24 w-24"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-success mb-4 text-2xl font-bold">Solicitação Enviada!</h2>
|
|
<p class="text-base-content/70 mb-6">
|
|
Sua solicitação de recuperação de senha foi enviada para a equipe de TI. Você receberá um
|
|
contato em breve com as instruções para resetar sua senha.
|
|
</p>
|
|
<div class="flex justify-center gap-4">
|
|
<a href="/" class="btn btn-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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
|
/>
|
|
</svg>
|
|
Voltar ao Dashboard
|
|
</a>
|
|
<button type="button" class="btn" onclick={() => (solicitacaoEnviada = false)}>
|
|
Enviar Nova Solicitação
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Card de Contato -->
|
|
<div class="card bg-base-200 mt-6 shadow-lg">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-info h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
Precisa de Ajuda?
|
|
</h3>
|
|
<p class="text-base-content/70 text-sm">
|
|
Se você não conseguir recuperar sua senha ou tiver problemas com o sistema, entre em contato
|
|
diretamente com a equipe de TI:
|
|
</p>
|
|
<div class="mt-4 space-y-2">
|
|
<div class="flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-primary h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
<span class="text-sm">ti@sgse.pe.gov.br</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-primary h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
|
|
/>
|
|
</svg>
|
|
<span class="text-sm">(81) 3183-8000</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|