first
This commit is contained in:
commit
f4be03ceba
1826 changed files with 830924 additions and 0 deletions
12
frontend/src/app.html
Normal file
12
frontend/src/app.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
190
frontend/src/lib/api/client.ts
Normal file
190
frontend/src/lib/api/client.ts
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
const API_BASE = '/api';
|
||||
|
||||
interface ApiResponse<T> {
|
||||
data: T;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
function getToken(): string | null {
|
||||
if (typeof localStorage === 'undefined') return null;
|
||||
return localStorage.getItem('token');
|
||||
}
|
||||
|
||||
async function request<T>(
|
||||
endpoint: string,
|
||||
options: RequestInit = {}
|
||||
): Promise<T> {
|
||||
const token = getToken();
|
||||
|
||||
const res = await fetch(`${API_BASE}${endpoint}`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
...options.headers,
|
||||
},
|
||||
...options,
|
||||
});
|
||||
|
||||
if (res.status === 401) {
|
||||
localStorage.removeItem('token');
|
||||
window.location.href = '/auth/login';
|
||||
throw new Error('Unauthorized');
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
const error = await res.json().catch(() => ({ error: 'Request failed' }));
|
||||
throw new Error(error.error || `HTTP ${res.status}`);
|
||||
}
|
||||
|
||||
if (res.status === 204) {
|
||||
return {} as T;
|
||||
}
|
||||
|
||||
const json: ApiResponse<T> = await res.json();
|
||||
if (json.error) {
|
||||
throw new Error(json.error);
|
||||
}
|
||||
return json.data;
|
||||
}
|
||||
|
||||
export const api = {
|
||||
auth: {
|
||||
login: async (identifier: string, password: string) => {
|
||||
const res = await fetch(`${API_BASE}/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username: identifier, password }),
|
||||
});
|
||||
const json = await res.json();
|
||||
if (!res.ok) throw new Error(json.error || 'Login failed');
|
||||
localStorage.setItem('token', json.data.token);
|
||||
return json.data;
|
||||
},
|
||||
logout: () => {
|
||||
localStorage.removeItem('token');
|
||||
},
|
||||
me: () => request<UserInfo>('/auth/me'),
|
||||
forgot: async (identifier: string) => {
|
||||
const res = await fetch(`${API_BASE}/auth/forgot`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ identifier }),
|
||||
});
|
||||
const json = await res.json();
|
||||
if (!res.ok) throw new Error(json.error || 'Request failed');
|
||||
return json.data;
|
||||
},
|
||||
changePassword: async (oldPassword: string, newPassword: string) => {
|
||||
const res = await fetch(`${API_BASE}/auth/change-password`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
body: JSON.stringify({ oldPassword, newPassword }),
|
||||
});
|
||||
const json = await res.json();
|
||||
if (!res.ok) throw new Error(json.error || 'Failed to change password');
|
||||
return json.data;
|
||||
},
|
||||
isLoggedIn: () => {
|
||||
return typeof localStorage !== 'undefined' && !!localStorage.getItem('token');
|
||||
},
|
||||
},
|
||||
|
||||
domains: {
|
||||
list: () => request<Domain[]>('/domains'),
|
||||
get: (id: number) => request<Domain>(`/domains/${id}`),
|
||||
create: (data: { name: string }) => request<Domain>('/domains', { method: 'POST', body: JSON.stringify(data) }),
|
||||
delete: (id: number) => request<void>(`/domains/${id}`, { method: 'DELETE' }),
|
||||
},
|
||||
|
||||
users: {
|
||||
listByDomain: (domainName: string) => request<User[]>(`/domains/${domainName}/users`),
|
||||
get: (domainName: string, id: number) => request<User>(`/domains/${domainName}/users/${id}`),
|
||||
create: (domainName: string, data: CreateUser) => request<User>(`/domains/${domainName}/users`, { method: 'POST', body: JSON.stringify(data) }),
|
||||
update: (domainName: string, id: number, data: Partial<User>) => request<void>(`/domains/${domainName}/users/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
|
||||
delete: (domainName: string, id: number) => request<void>(`/domains/${domainName}/users/${id}`, { method: 'DELETE' }),
|
||||
},
|
||||
|
||||
aliases: {
|
||||
listByDomain: (domainName: string) => request<Alias[]>(`/domains/${domainName}/aliases`),
|
||||
create: (domainName: string, data: CreateAlias) => request<Alias>(`/domains/${domainName}/aliases`, { method: 'POST', body: JSON.stringify(data) }),
|
||||
delete: (domainName: string, id: number) => request<void>(`/domains/${domainName}/aliases/${id}`, { method: 'DELETE' }),
|
||||
},
|
||||
|
||||
queue: {
|
||||
list: () => request<QueueEntry[]>('/queue'),
|
||||
requeue: (id: string) => request<void>(`/queue/${id}/requeue`, { method: 'POST' }),
|
||||
delete: (id: string) => request<void>(`/queue/${id}`, { method: 'DELETE' }),
|
||||
},
|
||||
|
||||
logs: {
|
||||
list: (hours = 1, filter = '') => request<LogEntry[]>(`/logs?hours=${hours}&filter=${encodeURIComponent(filter)}`),
|
||||
},
|
||||
};
|
||||
|
||||
export interface UserInfo {
|
||||
id: number;
|
||||
username?: string;
|
||||
email?: string;
|
||||
role: string;
|
||||
domainId?: number;
|
||||
quota?: number;
|
||||
}
|
||||
|
||||
export interface AuthUser {
|
||||
id: number;
|
||||
username: string;
|
||||
role: string;
|
||||
domainId?: number;
|
||||
}
|
||||
|
||||
export interface Domain {
|
||||
id: number;
|
||||
name: string;
|
||||
userCount?: number;
|
||||
aliasCount?: number;
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: number;
|
||||
email: string;
|
||||
domainId: number;
|
||||
quota: number;
|
||||
domain?: Domain;
|
||||
}
|
||||
|
||||
export interface CreateUser {
|
||||
email: string;
|
||||
password: string;
|
||||
quota?: number;
|
||||
}
|
||||
|
||||
export interface Alias {
|
||||
id: number;
|
||||
source: string;
|
||||
destination: string;
|
||||
domainId: number;
|
||||
domainName?: string;
|
||||
}
|
||||
|
||||
export interface CreateAlias {
|
||||
source: string;
|
||||
destination: string;
|
||||
}
|
||||
|
||||
export interface QueueEntry {
|
||||
id: string;
|
||||
sender: string;
|
||||
recipients: string[];
|
||||
size: number;
|
||||
time: string;
|
||||
reason: string;
|
||||
}
|
||||
|
||||
export interface LogEntry {
|
||||
timestamp: string;
|
||||
priority: string;
|
||||
message: string;
|
||||
}
|
||||
38
frontend/src/lib/stores/auth.ts
Normal file
38
frontend/src/lib/stores/auth.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { writable } from 'svelte/store';
|
||||
import type { User } from '$lib/api/client';
|
||||
|
||||
interface AuthState {
|
||||
user: User | null;
|
||||
token: string | null;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
function createAuthStore() {
|
||||
const { subscribe, set, update } = writable<AuthState>({
|
||||
user: null,
|
||||
token: null,
|
||||
loading: true,
|
||||
});
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
login: (user: User, token: string) => {
|
||||
localStorage.setItem('token', token);
|
||||
set({ user, token, loading: false });
|
||||
},
|
||||
logout: () => {
|
||||
localStorage.removeItem('token');
|
||||
set({ user: null, token: null, loading: false });
|
||||
},
|
||||
init: () => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
set({ user: null, token, loading: false });
|
||||
} else {
|
||||
set({ user: null, token: null, loading: false });
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export const auth = createAuthStore();
|
||||
184
frontend/src/routes/+layout.svelte
Normal file
184
frontend/src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let { children } = $props();
|
||||
let user: { username?: string; email?: string; role?: string } | null = $state(null);
|
||||
let loading = $state(true);
|
||||
|
||||
$effect(() => {
|
||||
const path = $page.url.pathname;
|
||||
if (!path.startsWith('/auth/')) {
|
||||
checkAuth();
|
||||
} else {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
|
||||
async function checkAuth() {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
goto('/auth/login');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/me', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
goto('/auth/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
user = data.data;
|
||||
|
||||
if (user?.role !== 'admin') {
|
||||
goto('/auth/dashboard');
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
goto('/auth/login');
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem('token');
|
||||
user = null;
|
||||
goto('/auth/login');
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
<div class="loading">Loading...</div>
|
||||
{:else if user?.role === 'admin'}
|
||||
<div class="app">
|
||||
<header>
|
||||
<h1>IMC Vibe</h1>
|
||||
<nav>
|
||||
<a href="/">Dashboard</a>
|
||||
<a href="/domains">Domains</a>
|
||||
<a href="/users">Users</a>
|
||||
<a href="/aliases">Aliases</a>
|
||||
<a href="/queue">Queue</a>
|
||||
<a href="/logs">Logs</a>
|
||||
</nav>
|
||||
<div class="user-menu">
|
||||
{#if user}
|
||||
<span>{user.username || user.email}</span>
|
||||
{/if}
|
||||
<a href="/auth/change-password">Change Password</a>
|
||||
<button onclick={logout}>Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
{:else}
|
||||
{@render children()}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.loading {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
padding: 0.75rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #ecf0f1;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: #34495e;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.user-menu span {
|
||||
color: #ecf0f1;
|
||||
}
|
||||
|
||||
.user-menu a {
|
||||
color: #ecf0f1;
|
||||
text-decoration: none;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border: 1px solid #7f8c8d;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.user-menu a:hover {
|
||||
background: #34495e;
|
||||
}
|
||||
|
||||
.user-menu button {
|
||||
background: transparent;
|
||||
border: 1px solid #7f8c8d;
|
||||
color: #ecf0f1;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.user-menu button:hover {
|
||||
background: #34495e;
|
||||
}
|
||||
</style>
|
||||
97
frontend/src/routes/+page.svelte
Normal file
97
frontend/src/routes/+page.svelte
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
interface Stats {
|
||||
totalDomains: number;
|
||||
totalUsers: number;
|
||||
totalAliases: number;
|
||||
queueSize: number;
|
||||
}
|
||||
|
||||
interface ApiResponse {
|
||||
data: Stats;
|
||||
}
|
||||
|
||||
let stats = $state<Stats>({
|
||||
totalDomains: 0,
|
||||
totalUsers: 0,
|
||||
totalAliases: 0,
|
||||
queueSize: 0
|
||||
});
|
||||
let loading = $state(true);
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/stats');
|
||||
if (res.ok) {
|
||||
const json: ApiResponse = await res.json();
|
||||
stats = json.data;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch stats:', e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2>Dashboard</h2>
|
||||
|
||||
{#if loading}
|
||||
<p>Loading...</p>
|
||||
{:else}
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<h3>{stats.totalDomains}</h3>
|
||||
<p>Domains</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>{stats.totalUsers}</h3>
|
||||
<p>Users</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>{stats.totalAliases}</h3>
|
||||
<p>Aliases</p>
|
||||
</div>
|
||||
<div class="stat-card" class:warning={stats.queueSize > 10}>
|
||||
<h3>{stats.queueSize}</h3>
|
||||
<p>Queued Emails</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-card.warning {
|
||||
border: 2px solid #e74c3c;
|
||||
}
|
||||
|
||||
.stat-card h3 {
|
||||
font-size: 2.5rem;
|
||||
margin: 0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.stat-card p {
|
||||
margin: 0.5rem 0 0;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.warning h3 {
|
||||
color: #e74c3c;
|
||||
}
|
||||
</style>
|
||||
10
frontend/src/routes/aliases/+page.svelte
Normal file
10
frontend/src/routes/aliases/+page.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
onMount(() => {
|
||||
goto('/domains');
|
||||
});
|
||||
</script>
|
||||
|
||||
<p>Redirecting to domains...</p>
|
||||
283
frontend/src/routes/auth/change-password/+page.svelte
Normal file
283
frontend/src/routes/auth/change-password/+page.svelte
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let user: { email?: string; username?: string } | null = null;
|
||||
let oldPassword = $state('');
|
||||
let newPassword = $state('');
|
||||
let confirmPassword = $state('');
|
||||
let error = $state('');
|
||||
let success = $state(false);
|
||||
let loading = $state(false);
|
||||
|
||||
onMount(async () => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
await goto('/auth/login');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/me', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
await goto('/auth/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
user = data.data;
|
||||
} catch {
|
||||
await goto('/auth/login');
|
||||
}
|
||||
});
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
error = 'Passwords do not match';
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 8) {
|
||||
error = 'Password must be at least 8 characters';
|
||||
return;
|
||||
}
|
||||
|
||||
loading = true;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/change-password', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${localStorage.getItem('token')}`,
|
||||
},
|
||||
body: JSON.stringify({ oldPassword, newPassword }),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
error = data.error || 'Failed to change password';
|
||||
return;
|
||||
}
|
||||
|
||||
success = true;
|
||||
oldPassword = '';
|
||||
newPassword = '';
|
||||
confirmPassword = '';
|
||||
} catch (err) {
|
||||
error = 'Connection error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
localStorage.removeItem('token');
|
||||
goto('/auth/login');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="page-container">
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<h1>Change Password</h1>
|
||||
<div class="user-info">
|
||||
{#if user}
|
||||
<span>Logged in as <strong>{user.email || user.username}</strong></span>
|
||||
{/if}
|
||||
<button class="logout" onclick={handleLogout}>Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
{#if error}
|
||||
<div class="error">{error}</div>
|
||||
{/if}
|
||||
|
||||
{#if success}
|
||||
<div class="success">
|
||||
Password changed successfully!
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={handleSubmit}>
|
||||
<label>
|
||||
Current Password
|
||||
<input
|
||||
type="password"
|
||||
bind:value={oldPassword}
|
||||
placeholder="Enter current password"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
New Password
|
||||
<input
|
||||
type="password"
|
||||
bind:value={newPassword}
|
||||
placeholder="Enter new password (min 8 characters)"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Confirm New Password
|
||||
<input
|
||||
type="password"
|
||||
bind:value={confirmPassword}
|
||||
placeholder="Confirm new password"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Changing...' : 'Change Password'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="links">
|
||||
<a href="/auth/dashboard">Back to Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.logout {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 500px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
color: #c00;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #efe;
|
||||
color: #060;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.75rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
187
frontend/src/routes/auth/dashboard/+page.svelte
Normal file
187
frontend/src/routes/auth/dashboard/+page.svelte
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let user: { email?: string; username?: string; quota?: number; role?: string } | null = null;
|
||||
let loading = $state(true);
|
||||
|
||||
onMount(async () => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
await goto('/auth/login');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/me', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
await goto('/auth/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
user = data.data;
|
||||
|
||||
if (user?.role === 'admin') {
|
||||
await goto('/');
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
await goto('/auth/login');
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
|
||||
function handleLogout() {
|
||||
localStorage.removeItem('token');
|
||||
goto('/auth/login');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="page-container">
|
||||
<header class="header">
|
||||
<h1>User Dashboard</h1>
|
||||
<div class="user-info">
|
||||
{#if user}
|
||||
<span>Logged in as <strong>{user.email || user.username}</strong></span>
|
||||
{/if}
|
||||
<button class="logout" onclick={handleLogout}>Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
{#if loading}
|
||||
<p>Loading...</p>
|
||||
{:else if user}
|
||||
<div class="card">
|
||||
<h2>Account Information</h2>
|
||||
<div class="info-row">
|
||||
<span class="label">Email:</span>
|
||||
<span class="value">{user.email || 'N/A'}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">Username:</span>
|
||||
<span class="value">{user.username || 'N/A'}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">Role:</span>
|
||||
<span class="value">{user.role}</span>
|
||||
</div>
|
||||
{#if user.quota !== undefined}
|
||||
<div class="info-row">
|
||||
<span class="label">Quota:</span>
|
||||
<span class="value">{user.quota > 0 ? (user.quota / 1024 / 1024).toFixed(0) + ' MB' : 'Unlimited'}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Quick Actions</h2>
|
||||
<div class="actions">
|
||||
<a href="/auth/change-password" class="action-btn">Change Password</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.logout {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem;
|
||||
color: #2c3e50;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
198
frontend/src/routes/auth/forgot/+page.svelte
Normal file
198
frontend/src/routes/auth/forgot/+page.svelte
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let identifier = $state('');
|
||||
let error = $state('');
|
||||
let success = $state(false);
|
||||
let loading = $state(false);
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
loading = true;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/forgot', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ identifier }),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
error = data.error || 'Request failed';
|
||||
return;
|
||||
}
|
||||
|
||||
success = true;
|
||||
} catch (err) {
|
||||
error = 'Connection error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h1>Reset Password</h1>
|
||||
|
||||
{#if error}
|
||||
<div class="error">{error}</div>
|
||||
{/if}
|
||||
|
||||
{#if success}
|
||||
<div class="success">
|
||||
<p>If an account exists with that email or username, a password reset link has been sent.</p>
|
||||
<p>Please check your inbox.</p>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a href="/auth/login">Back to Login</a>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="info">Enter your email address or username and we'll send you a link to reset your password.</p>
|
||||
|
||||
<form onsubmit={handleSubmit}>
|
||||
<label>
|
||||
Email or Username
|
||||
<input
|
||||
type="text"
|
||||
bind:value={identifier}
|
||||
placeholder="user@example.org or username"
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Sending...' : 'Send Reset Link'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="links">
|
||||
<a href="/auth/login">Back to Login</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 0 0 1rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
color: #c00;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #efe;
|
||||
color: #060;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.75rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: 1.5rem;
|
||||
text-align: center;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
189
frontend/src/routes/auth/login/+page.svelte
Normal file
189
frontend/src/routes/auth/login/+page.svelte
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let identifier = $state('');
|
||||
let password = $state('');
|
||||
let error = $state('');
|
||||
let loading = $state(false);
|
||||
|
||||
async function handleSubmit() {
|
||||
loading = true;
|
||||
error = '';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username: identifier, password })
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
error = data.error || 'Login failed';
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem('token', data.data.token);
|
||||
|
||||
if (data.data.user.role === 'admin') {
|
||||
goto('/');
|
||||
} else {
|
||||
goto('/auth/dashboard');
|
||||
}
|
||||
} catch (e) {
|
||||
error = 'Connection error';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h1>IMC Vibe</h1>
|
||||
<p class="subtitle">Mail Server Administration</p>
|
||||
|
||||
{#if error}
|
||||
<div class="error">{error}</div>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
|
||||
<label>
|
||||
Email or Username
|
||||
<input
|
||||
type="text"
|
||||
bind:value={identifier}
|
||||
placeholder="user@example.org or username"
|
||||
required
|
||||
autocomplete="username"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Password
|
||||
<input
|
||||
type="password"
|
||||
bind:value={password}
|
||||
placeholder="Enter password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="forgot">
|
||||
<a href="/auth/forgot">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Signing in...' : 'Sign In'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: white;
|
||||
padding: 3rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
margin: 0.5rem 0 2rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
border: 1px solid #fcc;
|
||||
color: #c00;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
.forgot {
|
||||
text-align: right;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.forgot a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.forgot a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.875rem;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
190
frontend/src/routes/domains/+page.svelte
Normal file
190
frontend/src/routes/domains/+page.svelte
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
<script lang="ts">
|
||||
interface Domain {
|
||||
id: number;
|
||||
name: string;
|
||||
userCount: number;
|
||||
aliasCount: number;
|
||||
}
|
||||
|
||||
let domains = $state<Domain[]>([]);
|
||||
let loading = $state(true);
|
||||
let showModal = $state(false);
|
||||
let newDomain = $state({ name: '' });
|
||||
|
||||
async function loadDomains() {
|
||||
try {
|
||||
const res = await fetch('/api/domains');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
domains = data.data || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load domains:', e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createDomain() {
|
||||
try {
|
||||
const res = await fetch('/api/domains', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(newDomain)
|
||||
});
|
||||
if (res.ok) {
|
||||
showModal = false;
|
||||
newDomain = { name: '' };
|
||||
await loadDomains();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to create domain:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteDomain(id: number) {
|
||||
if (!confirm('Delete this domain? Users and aliases will be deleted.')) return;
|
||||
try {
|
||||
await fetch(`/api/domains/${id}`, { method: 'DELETE' });
|
||||
await loadDomains();
|
||||
} catch (e) {
|
||||
console.error('Failed to delete domain:', e);
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => { loadDomains(); });
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<h2>Domains</h2>
|
||||
<button onclick={() => showModal = true}>Add Domain</button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p>Loading...</p>
|
||||
{:else if domains.length === 0}
|
||||
<p>No domains configured yet.</p>
|
||||
{:else}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Domain</th>
|
||||
<th>Users</th>
|
||||
<th>Aliases</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each domains as domain}
|
||||
<tr>
|
||||
<td><a href="/domains/{domain.name}/users">{domain.name}</a></td>
|
||||
<td>{domain.userCount}</td>
|
||||
<td>{domain.aliasCount}</td>
|
||||
<td>
|
||||
<button class="danger" onclick={() => deleteDomain(domain.id)}>Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if showModal}
|
||||
<div class="modal-backdrop" onclick={() => showModal = false}>
|
||||
<div class="modal" onclick={(e) => e.stopPropagation()}>
|
||||
<h3>Add Domain</h3>
|
||||
<form onsubmit={(e) => { e.preventDefault(); createDomain(); }}>
|
||||
<label>
|
||||
Domain name:
|
||||
<input type="text" bind:value={newDomain.name} placeholder="example.org" required />
|
||||
</label>
|
||||
<div class="actions">
|
||||
<button type="button" onclick={() => showModal = false}>Cancel</button>
|
||||
<button type="submit">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.modal form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.modal label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.modal input {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
114
frontend/src/routes/domains/[name]/+page.svelte
Normal file
114
frontend/src/routes/domains/[name]/+page.svelte
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
|
||||
interface DomainDetail {
|
||||
id: number;
|
||||
name: string;
|
||||
userCount: number;
|
||||
aliasCount: number;
|
||||
}
|
||||
|
||||
let domain = $state<DomainDetail | null>(null);
|
||||
let loading = $state(true);
|
||||
let error = $state('');
|
||||
|
||||
async function loadDomain(name: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/domains/${encodeURIComponent(name)}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
domain = data.data;
|
||||
} else {
|
||||
error = 'Domain not found';
|
||||
}
|
||||
} catch (e) {
|
||||
error = 'Failed to load domain';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const name = $page.params.name;
|
||||
if (name) loadDomain(name);
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
<p>Loading...</p>
|
||||
{:else if error}
|
||||
<p class="error">{error}</p>
|
||||
{:else if domain}
|
||||
<div class="header">
|
||||
<a href="/domains" class="back">← Back to Domains</a>
|
||||
<h2>{domain.name}</h2>
|
||||
</div>
|
||||
|
||||
<div class="cards-grid">
|
||||
<a href="/domains/{domain.name}/users" class="card">
|
||||
<h3>{domain.userCount}</h3>
|
||||
<p>Users</p>
|
||||
</a>
|
||||
<a href="/domains/{domain.name}/aliases" class="card">
|
||||
<h3>{domain.aliasCount}</h3>
|
||||
<p>Aliases</p>
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<p>Domain not found</p>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.back {
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0.5rem 0 0;
|
||||
color: #7f8c8d;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
227
frontend/src/routes/domains/[name]/aliases/+page.svelte
Normal file
227
frontend/src/routes/domains/[name]/aliases/+page.svelte
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
|
||||
interface Alias {
|
||||
id: number;
|
||||
source: string;
|
||||
destination: string;
|
||||
}
|
||||
|
||||
let aliases = $state<Alias[]>([]);
|
||||
let loading = $state(true);
|
||||
let showModal = $state(false);
|
||||
let newAlias = $state({ source: '', destination: '' });
|
||||
let domainName = $state('');
|
||||
|
||||
async function loadAliases(name: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/domains/${encodeURIComponent(name)}/aliases`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
aliases = data.data || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load aliases:', e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createAlias() {
|
||||
try {
|
||||
const res = await fetch(`/api/domains/${encodeURIComponent(domainName)}/aliases`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(newAlias)
|
||||
});
|
||||
if (res.ok) {
|
||||
showModal = false;
|
||||
newAlias = { source: '', destination: '' };
|
||||
await loadAliases(domainName);
|
||||
} else {
|
||||
const error = await res.json();
|
||||
alert(error.error || 'Failed to create alias');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to create alias:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteAlias(id: number) {
|
||||
if (!confirm('Delete this alias?')) return;
|
||||
try {
|
||||
await fetch(`/api/domains/${encodeURIComponent(domainName)}/aliases/${id}`, { method: 'DELETE' });
|
||||
await loadAliases(domainName);
|
||||
} catch (e) {
|
||||
console.error('Failed to delete alias:', e);
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const name = $page.params.name;
|
||||
if (name) {
|
||||
domainName = name;
|
||||
loadAliases(name);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<a href="/domains/{domainName}" class="back">← Back to {domainName}</a>
|
||||
<h2>Aliases</h2>
|
||||
<button onclick={() => showModal = true}>Add Alias</button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p>Loading...</p>
|
||||
{:else if aliases.length === 0}
|
||||
<p>No aliases configured yet.</p>
|
||||
{:else}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Source</th>
|
||||
<th>Destination</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each aliases as alias}
|
||||
<tr>
|
||||
<td>{alias.source}</td>
|
||||
<td>{alias.destination}</td>
|
||||
<td>
|
||||
<button class="danger" onclick={() => deleteAlias(alias.id)}>Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if showModal}
|
||||
<button class="modal-backdrop" onclick={() => showModal = false} aria-label="Close modal"></button>
|
||||
<div class="modal">
|
||||
<h3>Add Alias</h3>
|
||||
<form onsubmit={(e) => { e.preventDefault(); createAlias(); }}>
|
||||
<label>
|
||||
Source (alias address):
|
||||
<input type="text" bind:value={newAlias.source} placeholder="info@{domainName}" required />
|
||||
</label>
|
||||
<label>
|
||||
Destination (forward to):
|
||||
<input type="text" bind:value={newAlias.destination} placeholder="user@example.org" required />
|
||||
</label>
|
||||
<div class="actions">
|
||||
<button type="button" onclick={() => showModal = false}>Cancel</button>
|
||||
<button type="submit">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.back {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
min-width: 400px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.modal h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.modal form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.modal label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.modal input {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
243
frontend/src/routes/domains/[name]/users/+page.svelte
Normal file
243
frontend/src/routes/domains/[name]/users/+page.svelte
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
email: string;
|
||||
domain_id: number;
|
||||
quota: number;
|
||||
used_quota: number;
|
||||
}
|
||||
|
||||
let users = $state<User[]>([]);
|
||||
let loading = $state(true);
|
||||
let showModal = $state(false);
|
||||
let newUser = $state({ email: '', password: '', quota: 0 });
|
||||
let domainName = $state('');
|
||||
|
||||
async function loadUsers(name: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/domains/${encodeURIComponent(name)}/users`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
users = data.data || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load users:', e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createUser() {
|
||||
try {
|
||||
const res = await fetch(`/api/domains/${encodeURIComponent(domainName)}/users`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(newUser)
|
||||
});
|
||||
if (res.ok) {
|
||||
showModal = false;
|
||||
newUser = { email: '', password: '', quota: 0 };
|
||||
await loadUsers(domainName);
|
||||
} else {
|
||||
const error = await res.json();
|
||||
alert(error.error || 'Failed to create user');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to create user:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteUser(id: number) {
|
||||
if (!confirm('Delete this user? Mailbox will NOT be deleted.')) return;
|
||||
try {
|
||||
await fetch(`/api/domains/${encodeURIComponent(domainName)}/users/${id}`, { method: 'DELETE' });
|
||||
await loadUsers(domainName);
|
||||
} catch (e) {
|
||||
console.error('Failed to delete user:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function formatQuota(bytes: number): string {
|
||||
if (bytes === 0) return 'Default';
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
if (bytes < 1024 * 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + ' MB';
|
||||
return (bytes / 1024 / 1024 / 1024).toFixed(2) + ' GB';
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const name = $page.params.name;
|
||||
if (name) {
|
||||
domainName = name;
|
||||
loadUsers(name);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<a href="/domains/{domainName}" class="back">← Back to {domainName}</a>
|
||||
<h2>Users</h2>
|
||||
<button onclick={() => showModal = true}>Add User</button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p>Loading...</p>
|
||||
{:else if users.length === 0}
|
||||
<p>No users configured yet.</p>
|
||||
{:else}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Email</th>
|
||||
<th>Quota</th>
|
||||
<th>Used</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each users as user}
|
||||
<tr>
|
||||
<td>{user.email}</td>
|
||||
<td>{formatQuota(user.quota)}</td>
|
||||
<td>{formatQuota(user.used_quota)}</td>
|
||||
<td>
|
||||
<button class="danger" onclick={() => deleteUser(user.id)}>Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
{#if showModal}
|
||||
<button class="modal-backdrop" onclick={() => showModal = false} aria-label="Close modal"></button>
|
||||
<div class="modal">
|
||||
<h3>Add User</h3>
|
||||
<form onsubmit={(e) => { e.preventDefault(); createUser(); }}>
|
||||
<label>
|
||||
Email:
|
||||
<input type="email" bind:value={newUser.email} placeholder="user@{domainName}" required />
|
||||
</label>
|
||||
<label>
|
||||
Password:
|
||||
<input type="password" bind:value={newUser.password} required />
|
||||
</label>
|
||||
<label>
|
||||
Quota (bytes, 0 = default):
|
||||
<input type="number" bind:value={newUser.quota} min="0" />
|
||||
</label>
|
||||
<div class="actions">
|
||||
<button type="button" onclick={() => showModal = false}>Cancel</button>
|
||||
<button type="submit">Create</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.back {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
min-width: 400px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.modal h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.modal form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.modal label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.modal input {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
165
frontend/src/routes/logs/+page.svelte
Normal file
165
frontend/src/routes/logs/+page.svelte
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
<script lang="ts">
|
||||
interface LogEntry {
|
||||
timestamp: string;
|
||||
priority: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
let logs = $state<LogEntry[]>([]);
|
||||
let loading = $state(true);
|
||||
let error = $state('');
|
||||
let filter = $state('');
|
||||
let hours = $state(1);
|
||||
|
||||
async function loadLogs() {
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
const res = await fetch(`/api/logs?hours=${hours}&filter=${encodeURIComponent(filter)}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
logs = data.data || [];
|
||||
} else {
|
||||
error = 'Failed to load logs';
|
||||
}
|
||||
} catch (e) {
|
||||
error = 'Connection error';
|
||||
console.error('Failed to load logs:', e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getPriorityClass(priority: string): string {
|
||||
const p = priority.toLowerCase();
|
||||
if (p === 'err' || p === 'error') return 'error';
|
||||
if (p === 'warning' || p === 'warn') return 'warning';
|
||||
if (p === 'info') return 'info';
|
||||
return '';
|
||||
}
|
||||
|
||||
$effect(() => { loadLogs(); });
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<h2>Mail Logs</h2>
|
||||
<div class="controls">
|
||||
<label>
|
||||
Hours:
|
||||
<select bind:value={hours} onchange={loadLogs}>
|
||||
<option value={1}>Last hour</option>
|
||||
<option value={6}>Last 6 hours</option>
|
||||
<option value={24}>Last 24 hours</option>
|
||||
<option value={48}>Last 48 hours</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Filter:
|
||||
<input type="text" bind:value={filter} placeholder="Filter logs..." onkeydown={(e) => e.key === 'Enter' && loadLogs()} />
|
||||
</label>
|
||||
<button onclick={loadLogs}>Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p>Loading...</p>
|
||||
{:else if error}
|
||||
<p class="error">{error}</p>
|
||||
{:else if logs.length === 0}
|
||||
<p>No log entries found.</p>
|
||||
{:else}
|
||||
<div class="log-container">
|
||||
{#each logs as entry}
|
||||
<div class="log-entry {getPriorityClass(entry.priority)}">
|
||||
<span class="timestamp">{entry.timestamp}</span>
|
||||
<span class="priority">[{entry.priority}]</span>
|
||||
<span class="message">{entry.message}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.controls label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.controls select,
|
||||
.controls input {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.log-container {
|
||||
background: #1a1a2e;
|
||||
color: #eee;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
padding: 0.25rem 0;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.log-entry:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: #888;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.priority {
|
||||
margin-right: 0.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.log-entry.error .priority {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.log-entry.warning .priority {
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
.log-entry.info .priority {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #e74c3c;
|
||||
}
|
||||
</style>
|
||||
160
frontend/src/routes/queue/+page.svelte
Normal file
160
frontend/src/routes/queue/+page.svelte
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<script lang="ts">
|
||||
interface QueueEntry {
|
||||
id: string;
|
||||
sender: string;
|
||||
recipients: string[];
|
||||
size: number;
|
||||
time: string;
|
||||
reason: string;
|
||||
}
|
||||
|
||||
let queue = $state<QueueEntry[]>([]);
|
||||
let loading = $state(true);
|
||||
let error = $state('');
|
||||
|
||||
async function loadQueue() {
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
const res = await fetch('/api/queue');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
queue = data.data || [];
|
||||
} else {
|
||||
error = 'Failed to load queue';
|
||||
}
|
||||
} catch (e) {
|
||||
error = 'Connection error';
|
||||
console.error('Failed to load queue:', e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function requeue(id: string) {
|
||||
try {
|
||||
await fetch(`/api/queue/${id}/requeue`, { method: 'POST' });
|
||||
await loadQueue();
|
||||
} catch (e) {
|
||||
console.error('Failed to requeue:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFromQueue(id: string) {
|
||||
if (!confirm('Delete this message from queue?')) return;
|
||||
try {
|
||||
await fetch(`/api/queue/${id}`, { method: 'DELETE' });
|
||||
await loadQueue();
|
||||
} catch (e) {
|
||||
console.error('Failed to delete from queue:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / 1024 / 1024).toFixed(1) + ' MB';
|
||||
}
|
||||
|
||||
$effect(() => { loadQueue(); });
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<h2>Mail Queue</h2>
|
||||
<button onclick={loadQueue}>Refresh</button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p>Loading...</p>
|
||||
{:else if error}
|
||||
<p class="error">{error}</p>
|
||||
{:else if queue.length === 0}
|
||||
<p>Queue is empty.</p>
|
||||
{:else}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Sender</th>
|
||||
<th>Recipients</th>
|
||||
<th>Size</th>
|
||||
<th>Time</th>
|
||||
<th>Reason</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each queue as entry}
|
||||
<tr>
|
||||
<td class="id">{entry.id}</td>
|
||||
<td>{entry.sender}</td>
|
||||
<td>{entry.recipients.join(', ')}</td>
|
||||
<td>{formatSize(entry.size)}</td>
|
||||
<td>{entry.time}</td>
|
||||
<td class="reason">{entry.reason}</td>
|
||||
<td>
|
||||
<button onclick={() => requeue(entry.id)}>Requeue</button>
|
||||
<button class="danger" onclick={() => deleteFromQueue(entry.id)}>Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.id {
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.reason {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #e74c3c;
|
||||
}
|
||||
</style>
|
||||
10
frontend/src/routes/users/+page.svelte
Normal file
10
frontend/src/routes/users/+page.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
onMount(() => {
|
||||
goto('/domains');
|
||||
});
|
||||
</script>
|
||||
|
||||
<p>Redirecting to domains...</p>
|
||||
Loading…
Add table
Add a link
Reference in a new issue