Add application logging, SMTP email notifications, and supporting changes
Phase 5.4 — Application Logging: - AppLog model + migration 0010 for unified audit/usage/error logging - Usage logging middleware in app.py (after_request for /api/* requests) - Error logging in 500 handler with traceback capture - Audit logging for auth events (register, login, login_failed, logout, password_change) and admin actions (backup, restore, user_delete, registration_toggle, smtp_config, smtp_test) - Admin log viewer (LogsView.vue) with stats, category/search/date filters, paginated table with expandable detail rows - Admin logs API endpoints in admin.py (GET /logs, GET /logs/stats) - Configurable retention via LOG_RETENTION_DAYS with hourly cleanup Phase 5.5 — SMTP Email Notifications: - aiosmtplib dependency for async email sending - Email service (services/email.py) with STARTTLS/implicit TLS support - Notification service (services/notifications.py) for security alerts and task due date reminders with per-user preferences - Admin SMTP config endpoints (GET/PUT /api/admin/smtp, POST test) - SMTP config in Config class with env var + Docker secret support - Settings UI: notification preferences for all users, SMTP config section for admin with test email Other changes: - stream_chat() now accepts optional options dict (for num_predict) - Increase assist MAX_BODY_CHARS from 3000 to 8000 - get_user_by_username() added to auth service - apiStreamPost buffer processing refactored for robustness - AppHeader: admin Logs nav link - Router: /admin/logs route Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
+24
-24
@@ -226,22 +226,25 @@ export async function apiStreamPost(
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = "";
|
||||
|
||||
function processLines(text: string) {
|
||||
const lines = text.split("\n");
|
||||
function processLine(line: string) {
|
||||
const trimmed = line.trim();
|
||||
if (trimmed.startsWith("data: ")) {
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(trimmed.slice(6));
|
||||
} catch {
|
||||
return; // Skip malformed JSON lines
|
||||
}
|
||||
onChunk(data);
|
||||
}
|
||||
}
|
||||
|
||||
function processBuffer() {
|
||||
const lines = buffer.split("\n");
|
||||
// Keep the last (possibly incomplete) line in the buffer
|
||||
buffer = lines.pop() || "";
|
||||
|
||||
for (const line of lines) {
|
||||
const trimmed = line.trim();
|
||||
if (trimmed.startsWith("data: ")) {
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(trimmed.slice(6));
|
||||
} catch {
|
||||
continue; // Skip malformed JSON lines
|
||||
}
|
||||
onChunk(data);
|
||||
}
|
||||
processLine(line);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -250,22 +253,19 @@ export async function apiStreamPost(
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
processLines(buffer);
|
||||
processBuffer();
|
||||
}
|
||||
} catch {
|
||||
// Stream may close with a network error after all data was sent.
|
||||
// Process whatever remains in the buffer before deciding to throw.
|
||||
}
|
||||
|
||||
// Process any remaining buffer
|
||||
const remaining = buffer.trim();
|
||||
if (remaining.startsWith("data: ")) {
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(remaining.slice(6));
|
||||
} catch {
|
||||
return; // Skip malformed JSON
|
||||
// Flush any remaining complete lines in the buffer
|
||||
if (buffer.trim()) {
|
||||
// The buffer may contain one or more unprocessed lines
|
||||
const remaining = buffer;
|
||||
buffer = "";
|
||||
for (const line of remaining.split("\n")) {
|
||||
processLine(line);
|
||||
}
|
||||
onChunk(data);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,6 +62,7 @@ router.afterEach(() => {
|
||||
<router-link to="/chat" class="nav-link">Chat</router-link>
|
||||
<router-link to="/settings" class="nav-link">Settings</router-link>
|
||||
<router-link v-if="authStore.isAdmin" to="/admin/users" class="nav-link">Users</router-link>
|
||||
<router-link v-if="authStore.isAdmin" to="/admin/logs" class="nav-link">Logs</router-link>
|
||||
<span class="status-indicator" :class="statusClass" :title="statusLabel">
|
||||
<span class="status-dot"></span>
|
||||
</span>
|
||||
|
||||
@@ -82,6 +82,11 @@ const router = createRouter({
|
||||
name: "admin-users",
|
||||
component: () => import("@/views/UserManagementView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/admin/logs",
|
||||
name: "admin-logs",
|
||||
component: () => import("@/views/LogsView.vue"),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,491 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { apiGet } from "@/api/client";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import PaginationBar from "@/components/PaginationBar.vue";
|
||||
|
||||
const toastStore = useToastStore();
|
||||
|
||||
interface LogEntry {
|
||||
id: number;
|
||||
category: string;
|
||||
user_id: number | null;
|
||||
username: string | null;
|
||||
action: string | null;
|
||||
endpoint: string | null;
|
||||
method: string | null;
|
||||
status_code: number | null;
|
||||
duration_ms: number | null;
|
||||
ip_address: string | null;
|
||||
details: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface LogStats {
|
||||
audit: number;
|
||||
usage: number;
|
||||
error: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
const logs = ref<LogEntry[]>([]);
|
||||
const stats = ref<LogStats>({ audit: 0, usage: 0, error: 0, total: 0 });
|
||||
const total = ref(0);
|
||||
const loading = ref(true);
|
||||
const expandedId = ref<number | null>(null);
|
||||
|
||||
// Filters
|
||||
const category = ref("");
|
||||
const search = ref("");
|
||||
const dateFrom = ref("");
|
||||
const dateTo = ref("");
|
||||
const limit = 50;
|
||||
const offset = ref(0);
|
||||
|
||||
let searchTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([fetchLogs(), fetchStats()]);
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
watch([category, dateFrom, dateTo], () => {
|
||||
offset.value = 0;
|
||||
fetchLogs();
|
||||
});
|
||||
|
||||
watch(search, () => {
|
||||
if (searchTimeout) clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
offset.value = 0;
|
||||
fetchLogs();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
watch(offset, () => {
|
||||
fetchLogs();
|
||||
});
|
||||
|
||||
async function fetchLogs() {
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (category.value) params.set("category", category.value);
|
||||
if (search.value) params.set("search", search.value);
|
||||
if (dateFrom.value) params.set("date_from", dateFrom.value);
|
||||
if (dateTo.value) params.set("date_to", dateTo.value);
|
||||
params.set("limit", String(limit));
|
||||
params.set("offset", String(offset.value));
|
||||
|
||||
const data = await apiGet<{ logs: LogEntry[]; total: number }>(
|
||||
`/api/admin/logs?${params}`
|
||||
);
|
||||
logs.value = data.logs;
|
||||
total.value = data.total;
|
||||
} catch {
|
||||
toastStore.show("Failed to load logs", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchStats() {
|
||||
try {
|
||||
stats.value = await apiGet<LogStats>("/api/admin/logs/stats");
|
||||
} catch {
|
||||
// Ignore
|
||||
}
|
||||
}
|
||||
|
||||
function toggleExpand(id: number) {
|
||||
expandedId.value = expandedId.value === id ? null : id;
|
||||
}
|
||||
|
||||
function formatTime(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
function formatDetails(details: string | null): string {
|
||||
if (!details) return "";
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(details), null, 2);
|
||||
} catch {
|
||||
return details;
|
||||
}
|
||||
}
|
||||
|
||||
function displayLabel(entry: LogEntry): string {
|
||||
if (entry.category === "audit" && entry.action) return entry.action;
|
||||
if (entry.endpoint) return entry.endpoint;
|
||||
return "—";
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
category.value = "";
|
||||
search.value = "";
|
||||
dateFrom.value = "";
|
||||
dateTo.value = "";
|
||||
offset.value = 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="logs-page">
|
||||
<h1>Application Logs</h1>
|
||||
|
||||
<section class="settings-section stats-section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-count">{{ stats.total.toLocaleString() }}</span>
|
||||
<span class="stat-label">Total</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-count stat-audit">{{ stats.audit.toLocaleString() }}</span>
|
||||
<span class="stat-label">Audit</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-count stat-usage">{{ stats.usage.toLocaleString() }}</span>
|
||||
<span class="stat-label">Usage</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-count stat-error">{{ stats.error.toLocaleString() }}</span>
|
||||
<span class="stat-label">Error</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-section">
|
||||
<h2>Filters</h2>
|
||||
<div class="filter-bar">
|
||||
<select v-model="category" class="filter-select">
|
||||
<option value="">All categories</option>
|
||||
<option value="audit">Audit</option>
|
||||
<option value="usage">Usage</option>
|
||||
<option value="error">Error</option>
|
||||
</select>
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
placeholder="Search logs..."
|
||||
class="filter-input"
|
||||
/>
|
||||
<input v-model="dateFrom" type="date" class="filter-date" title="From date" />
|
||||
<input v-model="dateTo" type="date" class="filter-date" title="To date" />
|
||||
<button
|
||||
v-if="category || search || dateFrom || dateTo"
|
||||
class="btn-clear"
|
||||
@click="clearFilters"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-section">
|
||||
<div v-if="loading" class="loading-msg">Loading logs...</div>
|
||||
|
||||
<div v-else-if="logs.length === 0" class="empty-msg">No log entries found.</div>
|
||||
|
||||
<template v-else>
|
||||
<table class="users-table logs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Category</th>
|
||||
<th class="hide-mobile">User</th>
|
||||
<th>Action / Endpoint</th>
|
||||
<th class="hide-mobile">Status</th>
|
||||
<th class="hide-mobile">Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="entry in logs" :key="entry.id">
|
||||
<tr
|
||||
class="log-row"
|
||||
:class="{ 'row-expanded': expandedId === entry.id }"
|
||||
@click="toggleExpand(entry.id)"
|
||||
>
|
||||
<td class="cell-time">{{ formatTime(entry.created_at) }}</td>
|
||||
<td>
|
||||
<span class="category-badge" :class="'cat-' + entry.category">
|
||||
{{ entry.category }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="hide-mobile cell-user">{{ entry.username || "—" }}</td>
|
||||
<td class="cell-action">
|
||||
<span v-if="entry.method" class="method-tag">{{ entry.method }}</span>
|
||||
{{ displayLabel(entry) }}
|
||||
</td>
|
||||
<td class="hide-mobile cell-status">
|
||||
<span v-if="entry.status_code" :class="entry.status_code >= 400 ? 'text-error' : ''">
|
||||
{{ entry.status_code }}
|
||||
</span>
|
||||
<span v-else>—</span>
|
||||
</td>
|
||||
<td class="hide-mobile cell-duration">
|
||||
{{ entry.duration_ms != null ? entry.duration_ms + "ms" : "—" }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="expandedId === entry.id && entry.details" class="detail-row">
|
||||
<td colspan="6">
|
||||
<pre class="detail-json">{{ formatDetails(entry.details) }}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<PaginationBar
|
||||
:total="total"
|
||||
:limit="limit"
|
||||
:offset="offset"
|
||||
@update:offset="offset = $event"
|
||||
/>
|
||||
</template>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logs-page {
|
||||
max-width: 960px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.logs-page h1 {
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
.settings-section {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.settings-section h2 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Stats */
|
||||
.stats-section {
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
.stats-grid {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
.stat-count {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.stat-audit {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.stat-usage {
|
||||
color: var(--color-success);
|
||||
}
|
||||
.stat-error {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
/* Filters */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.filter-select,
|
||||
.filter-input,
|
||||
.filter-date {
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.filter-select {
|
||||
min-width: 140px;
|
||||
}
|
||||
.filter-input {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
.filter-date {
|
||||
width: 140px;
|
||||
}
|
||||
.btn-clear {
|
||||
padding: 0.4rem 0.75rem;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.btn-clear:hover {
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.loading-msg,
|
||||
.empty-msg {
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.logs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.logs-table th {
|
||||
text-align: left;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-muted);
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.logs-table td {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.logs-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.log-row {
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.log-row:hover {
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
.row-expanded {
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
.cell-time {
|
||||
white-space: nowrap;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.cell-user {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.cell-action {
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cell-status {
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.cell-duration {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.text-error {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
/* Category badges */
|
||||
.category-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.cat-audit {
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
|
||||
}
|
||||
.cat-usage {
|
||||
color: var(--color-success);
|
||||
background: color-mix(in srgb, var(--color-success) 15%, transparent);
|
||||
}
|
||||
.cat-error {
|
||||
color: var(--color-danger);
|
||||
background: color-mix(in srgb, var(--color-danger) 15%, transparent);
|
||||
}
|
||||
|
||||
/* Method tag */
|
||||
.method-tag {
|
||||
display: inline-block;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
font-family: monospace;
|
||||
padding: 0.05rem 0.25rem;
|
||||
border-radius: 3px;
|
||||
background: var(--color-bg-secondary);
|
||||
color: var(--color-text-muted);
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
/* Detail row */
|
||||
.detail-row td {
|
||||
padding: 0 0.75rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.detail-json {
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8rem;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stats-grid {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.stat-card {
|
||||
min-width: calc(50% - 0.5rem);
|
||||
}
|
||||
.filter-bar {
|
||||
flex-direction: column;
|
||||
}
|
||||
.filter-select,
|
||||
.filter-input,
|
||||
.filter-date {
|
||||
width: 100%;
|
||||
}
|
||||
.cell-action {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@ import { ref, computed, onMounted } from "vue";
|
||||
import { useSettingsStore } from "@/stores/settings";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import { apiPut } from "@/api/client";
|
||||
import { apiGet, apiPost, apiPut } from "@/api/client";
|
||||
import type { ModelInfo } from "@/types/settings";
|
||||
|
||||
const store = useSettingsStore();
|
||||
@@ -23,6 +23,27 @@ const exporting = ref(false);
|
||||
const restoring = ref(false);
|
||||
const restoreFileInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
// Notification preferences
|
||||
const notifyTaskReminders = ref(true);
|
||||
const notifySecurityAlerts = ref(true);
|
||||
const savingNotifications = ref(false);
|
||||
const notificationsSaved = ref(false);
|
||||
|
||||
// SMTP settings (admin only)
|
||||
const smtp = ref({
|
||||
smtp_host: "",
|
||||
smtp_port: "587",
|
||||
smtp_username: "",
|
||||
smtp_password: "",
|
||||
smtp_from_address: "",
|
||||
smtp_from_name: "Fabled Assistant",
|
||||
smtp_use_tls: "true",
|
||||
});
|
||||
const savingSmtp = ref(false);
|
||||
const smtpSaved = ref(false);
|
||||
const testRecipient = ref("");
|
||||
const sendingTest = ref(false);
|
||||
|
||||
const MODEL_CATALOG: ModelInfo[] = [
|
||||
// — General Purpose —
|
||||
{
|
||||
@@ -193,6 +214,25 @@ onMounted(async () => {
|
||||
assistantName.value = store.assistantName;
|
||||
selectedModel.value = store.defaultModel;
|
||||
store.fetchInstalledModels();
|
||||
|
||||
// Load notification preferences from user settings
|
||||
const allSettings = await apiGet<Record<string, string>>("/api/settings");
|
||||
if (allSettings.notify_task_reminders !== undefined) {
|
||||
notifyTaskReminders.value = allSettings.notify_task_reminders !== "false";
|
||||
}
|
||||
if (allSettings.notify_security_alerts !== undefined) {
|
||||
notifySecurityAlerts.value = allSettings.notify_security_alerts !== "false";
|
||||
}
|
||||
|
||||
// Load SMTP config if admin
|
||||
if (authStore.isAdmin) {
|
||||
try {
|
||||
const smtpConfig = await apiGet<Record<string, string>>("/api/admin/smtp");
|
||||
smtp.value = { ...smtp.value, ...smtpConfig };
|
||||
} catch {
|
||||
// SMTP not configured yet
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function changePassword() {
|
||||
@@ -319,6 +359,58 @@ function triggerRestoreUpload() {
|
||||
restoreFileInput.value?.click();
|
||||
}
|
||||
|
||||
async function saveNotifications() {
|
||||
savingNotifications.value = true;
|
||||
notificationsSaved.value = false;
|
||||
try {
|
||||
await apiPut("/api/settings", {
|
||||
notify_task_reminders: notifyTaskReminders.value ? "true" : "false",
|
||||
notify_security_alerts: notifySecurityAlerts.value ? "true" : "false",
|
||||
});
|
||||
notificationsSaved.value = true;
|
||||
setTimeout(() => (notificationsSaved.value = false), 2000);
|
||||
} catch {
|
||||
toastStore.show("Failed to save notification preferences", "error");
|
||||
} finally {
|
||||
savingNotifications.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function saveSmtp() {
|
||||
savingSmtp.value = true;
|
||||
smtpSaved.value = false;
|
||||
try {
|
||||
await apiPut("/api/admin/smtp", smtp.value);
|
||||
smtpSaved.value = true;
|
||||
setTimeout(() => (smtpSaved.value = false), 2000);
|
||||
} catch {
|
||||
toastStore.show("Failed to save SMTP settings", "error");
|
||||
} finally {
|
||||
savingSmtp.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function sendTestEmail() {
|
||||
if (!testRecipient.value.trim()) {
|
||||
toastStore.show("Enter a recipient email address", "error");
|
||||
return;
|
||||
}
|
||||
sendingTest.value = true;
|
||||
try {
|
||||
await apiPost("/api/admin/smtp/test", { recipient: testRecipient.value.trim() });
|
||||
toastStore.show("Test email sent successfully");
|
||||
} catch (e: unknown) {
|
||||
if (e && typeof e === "object" && "body" in e) {
|
||||
const body = (e as { body?: { error?: string } }).body;
|
||||
toastStore.show(body?.error || "Failed to send test email", "error");
|
||||
} else {
|
||||
toastStore.show("Failed to send test email", "error");
|
||||
}
|
||||
} finally {
|
||||
sendingTest.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRestoreFile(event: Event) {
|
||||
const file = (event.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
@@ -425,6 +517,99 @@ async function handleRestoreFile(event: Event) {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-section">
|
||||
<h2>Notifications</h2>
|
||||
<p class="section-desc">
|
||||
Choose which email notifications you'd like to receive. Requires SMTP to be configured by an admin.
|
||||
</p>
|
||||
|
||||
<div class="checkbox-field">
|
||||
<label>
|
||||
<input type="checkbox" v-model="notifyTaskReminders" />
|
||||
Task due date reminders
|
||||
</label>
|
||||
<p class="field-hint">Receive a daily email when you have tasks due or overdue.</p>
|
||||
</div>
|
||||
<div class="checkbox-field">
|
||||
<label>
|
||||
<input type="checkbox" v-model="notifySecurityAlerts" />
|
||||
Security alerts
|
||||
</label>
|
||||
<p class="field-hint">Receive emails for login, logout, failed login attempts, and password changes.</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn-save" @click="saveNotifications" :disabled="savingNotifications">
|
||||
{{ savingNotifications ? "Saving..." : "Save" }}
|
||||
</button>
|
||||
<span v-if="notificationsSaved" class="saved-msg">Saved!</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="authStore.isAdmin" class="settings-section">
|
||||
<h2>Email / SMTP</h2>
|
||||
<p class="section-desc">
|
||||
Configure SMTP settings to enable email notifications for all users.
|
||||
</p>
|
||||
|
||||
<div class="smtp-grid">
|
||||
<div class="field">
|
||||
<label for="smtp-host">SMTP Host</label>
|
||||
<input id="smtp-host" v-model="smtp.smtp_host" type="text" placeholder="smtp.example.com" class="input" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="smtp-port">Port</label>
|
||||
<input id="smtp-port" v-model="smtp.smtp_port" type="text" placeholder="587" class="input" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="smtp-username">Username</label>
|
||||
<input id="smtp-username" v-model="smtp.smtp_username" type="text" class="input" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="smtp-password">Password</label>
|
||||
<input id="smtp-password" v-model="smtp.smtp_password" type="password" class="input" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="smtp-from-address">From Address</label>
|
||||
<input id="smtp-from-address" v-model="smtp.smtp_from_address" type="email" placeholder="noreply@example.com" class="input" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="smtp-from-name">From Name</label>
|
||||
<input id="smtp-from-name" v-model="smtp.smtp_from_name" type="text" placeholder="Fabled Assistant" class="input" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-field">
|
||||
<label>
|
||||
<input type="checkbox" :checked="smtp.smtp_use_tls === 'true'" @change="smtp.smtp_use_tls = ($event.target as HTMLInputElement).checked ? 'true' : 'false'" />
|
||||
Use STARTTLS
|
||||
</label>
|
||||
<p class="field-hint">Enable STARTTLS encryption (recommended for port 587). Implicit TLS is used automatically for port 465.</p>
|
||||
</div>
|
||||
|
||||
<div class="actions" style="margin-bottom: 1.25rem;">
|
||||
<button class="btn-save" @click="saveSmtp" :disabled="savingSmtp">
|
||||
{{ savingSmtp ? "Saving..." : "Save SMTP Settings" }}
|
||||
</button>
|
||||
<span v-if="smtpSaved" class="saved-msg">Saved!</span>
|
||||
</div>
|
||||
|
||||
<div class="test-email-section">
|
||||
<h3 class="subsection-label">Test Email</h3>
|
||||
<div class="test-email-row">
|
||||
<input
|
||||
v-model="testRecipient"
|
||||
type="email"
|
||||
placeholder="test@example.com"
|
||||
class="input"
|
||||
style="flex: 1;"
|
||||
/>
|
||||
<button class="btn-save" @click="sendTestEmail" :disabled="sendingTest || !testRecipient.trim()">
|
||||
{{ sendingTest ? "Sending..." : "Send Test" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="settings-section">
|
||||
<h2>Model</h2>
|
||||
<p class="section-desc">
|
||||
@@ -843,4 +1028,51 @@ async function handleRestoreFile(event: Event) {
|
||||
.hidden-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Checkbox fields */
|
||||
.checkbox-field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.checkbox-field label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-field input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* SMTP grid */
|
||||
.smtp-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0 1rem;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.smtp-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Test email */
|
||||
.subsection-label {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.test-email-section {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.test-email-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user