feat: implement advanced access control system with user blocking, rate limiting, and enhanced login security; update UI components for improved user experience and documentation
This commit is contained in:
299
apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
Normal file
299
apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
Normal file
@@ -0,0 +1,299 @@
|
||||
<script lang="ts">
|
||||
import { useQuery, useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
|
||||
const client = useConvexClient();
|
||||
const templates = useQuery(api.templatesMensagens.listarTemplates, {});
|
||||
const usuarios = useQuery(api.usuarios.listar, {});
|
||||
|
||||
let destinatarioId = $state("");
|
||||
let canal = $state<"chat" | "email" | "ambos">("chat");
|
||||
let templateId = $state("");
|
||||
let mensagemPersonalizada = $state("");
|
||||
let usarTemplate = $state(true);
|
||||
let processando = $state(false);
|
||||
|
||||
const templateSelecionado = $derived(
|
||||
templates?.data?.find(t => t._id === templateId)
|
||||
);
|
||||
|
||||
async function enviarNotificacao() {
|
||||
if (!destinatarioId) {
|
||||
alert("Selecione um destinatário");
|
||||
return;
|
||||
}
|
||||
|
||||
if (usarTemplate && !templateId) {
|
||||
alert("Selecione um template");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!usarTemplate && !mensagemPersonalizada.trim()) {
|
||||
alert("Digite uma mensagem");
|
||||
return;
|
||||
}
|
||||
|
||||
processando = true;
|
||||
try {
|
||||
// TODO: Implementar envio de notificação
|
||||
console.log("Enviar notificação", {
|
||||
destinatarioId,
|
||||
canal,
|
||||
templateId: usarTemplate ? templateId : undefined,
|
||||
mensagem: !usarTemplate ? mensagemPersonalizada : undefined
|
||||
});
|
||||
|
||||
alert("Notificação enviada com sucesso!");
|
||||
|
||||
// Limpar form
|
||||
destinatarioId = "";
|
||||
templateId = "";
|
||||
mensagemPersonalizada = "";
|
||||
} catch (error) {
|
||||
console.error("Erro ao enviar notificação:", error);
|
||||
alert("Erro ao enviar notificação");
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto px-4 py-6 max-w-7xl">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-3 bg-info/10 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-base-content">Notificações e Mensagens</h1>
|
||||
<p class="text-base-content/60 mt-1">Enviar notificações para usuários do sistema</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Formulário -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">Enviar Notificação</h2>
|
||||
|
||||
<!-- Destinatário -->
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Destinatário *</span>
|
||||
</label>
|
||||
<select bind:value={destinatarioId} class="select select-bordered">
|
||||
<option value="">Selecione um usuário</option>
|
||||
{#if usuarios?.data}
|
||||
{#each usuarios.data as usuario}
|
||||
<option value={usuario._id}>
|
||||
{usuario.nome} ({usuario.matricula})
|
||||
</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Canal -->
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Canal de Envio *</span>
|
||||
</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="label cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value="chat"
|
||||
bind:group={canal}
|
||||
class="radio radio-primary"
|
||||
/>
|
||||
<span class="label-text ml-2">Chat</span>
|
||||
</label>
|
||||
<label class="label cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value="email"
|
||||
bind:group={canal}
|
||||
class="radio radio-primary"
|
||||
/>
|
||||
<span class="label-text ml-2">Email</span>
|
||||
</label>
|
||||
<label class="label cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value="ambos"
|
||||
bind:group={canal}
|
||||
class="radio radio-primary"
|
||||
/>
|
||||
<span class="label-text ml-2">Ambos</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tipo de Mensagem -->
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Tipo de Mensagem</span>
|
||||
</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="label cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
checked={usarTemplate}
|
||||
onchange={() => usarTemplate = true}
|
||||
class="radio radio-secondary"
|
||||
/>
|
||||
<span class="label-text ml-2">Usar Template</span>
|
||||
</label>
|
||||
<label class="label cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
checked={!usarTemplate}
|
||||
onchange={() => usarTemplate = false}
|
||||
class="radio radio-secondary"
|
||||
/>
|
||||
<span class="label-text ml-2">Mensagem Personalizada</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if usarTemplate}
|
||||
<!-- Template -->
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Template *</span>
|
||||
</label>
|
||||
<select bind:value={templateId} class="select select-bordered">
|
||||
<option value="">Selecione um template</option>
|
||||
{#if templates?.data}
|
||||
{#each templates.data as template}
|
||||
<option value={template._id}>
|
||||
{template.nome}
|
||||
</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if templateSelecionado}
|
||||
<div class="alert alert-info mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<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"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-bold">{templateSelecionado.titulo}</div>
|
||||
<div class="text-sm mt-1">{templateSelecionado.corpo}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<!-- Mensagem Personalizada -->
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Mensagem *</span>
|
||||
</label>
|
||||
<textarea
|
||||
bind:value={mensagemPersonalizada}
|
||||
class="textarea textarea-bordered h-32"
|
||||
placeholder="Digite sua mensagem personalizada..."
|
||||
></textarea>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Botão Enviar -->
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button
|
||||
class="btn btn-primary btn-block"
|
||||
onclick={enviarNotificacao}
|
||||
disabled={processando}
|
||||
>
|
||||
{#if processando}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{: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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
|
||||
</svg>
|
||||
{/if}
|
||||
Enviar Notificação
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lista de Templates -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="card-title">Templates Disponíveis</h2>
|
||||
<button class="btn btn-sm btn-outline btn-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Novo Template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if !templates?.data}
|
||||
<div class="flex justify-center py-10">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
{:else if templates.data.length === 0}
|
||||
<div class="text-center py-10 text-base-content/60">
|
||||
Nenhum template disponível
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-3 max-h-[600px] overflow-y-auto">
|
||||
{#each templates.data as template}
|
||||
<div class="card bg-base-200 compact">
|
||||
<div class="card-body">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<h3 class="font-bold text-sm">{template.nome}</h3>
|
||||
<p class="text-xs opacity-70 mt-1">{template.titulo}</p>
|
||||
<p class="text-xs mt-2 line-clamp-2">{template.corpo}</p>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<span class="badge badge-sm {template.tipo === 'sistema' ? 'badge-primary' : 'badge-secondary'}">
|
||||
{template.tipo}
|
||||
</span>
|
||||
{#if template.variaveis && template.variaveis.length > 0}
|
||||
<span class="badge badge-sm badge-outline">
|
||||
{template.variaveis.length} variáveis
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if template.tipo !== "sistema"}
|
||||
<div class="dropdown dropdown-end">
|
||||
<label tabindex="0" class="btn btn-ghost btn-xs">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
|
||||
</svg>
|
||||
</label>
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-32">
|
||||
<li><button>Editar</button></li>
|
||||
<li><button class="text-error">Excluir</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="alert alert-warning mt-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
|
||||
</svg>
|
||||
<span>Para enviar emails, certifique-se de configurar o SMTP em Configurações de Email.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user