Почтовый кабинет: регистрация, папки, черновики, вложения, грид @jambotron/aria-grid, интерфейс по synthwave-шаблону
Бэкенд: регистрация со входом сразу и /api/config, профиль и смена пароля, свои папки, PATCH письма (прочитано, флажок, перенос; Спам ставит отметку), корзина и очистка, черновики, несколько адресатов и копия, вложения черновика уходят с письмом, вложения и заголовки To/Cc входящих сохраняются, письма заблокированных — в Спам. Исправлено: загрузка файла (415), колонка content_id (500 на любых вложениях), SPA-маршрут с точкой. Фронтенд переписан: все таблицы — грид, оформление — шаблон synthwave-design-showcase.html. α Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
|
||||
import { BackgroundComponent } from '../../ui/background.component';
|
||||
|
||||
/** Logo + a glass card over the synthwave background — the login and registration pages. */
|
||||
@Component({
|
||||
selector: 'app-auth-frame',
|
||||
imports: [BackgroundComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<app-background />
|
||||
<main class="relative z-10 min-h-screen flex items-center justify-center p-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="flex items-center justify-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-pink-500 to-cyan-400 flex items-center justify-center
|
||||
text-slate-950 font-black text-2xl shadow-[0_0_15px_rgba(255,0,127,0.8)] font-orbitron">M</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold font-orbitron tracking-wider neon-text-primary">
|
||||
SYNTH <span class="text-cyan-400 font-normal">MAIL</span>
|
||||
</h1>
|
||||
<p class="text-xs text-cyan-300/70 font-mono tracking-widest uppercase">Reactive mail server</p>
|
||||
</div>
|
||||
</div>
|
||||
<section class="glass-panel static p-6 sm:p-8" [attr.aria-labelledby]="'auth-title'">
|
||||
<h2 id="auth-title" class="text-xl font-orbitron font-bold neon-text-secondary mb-1">{{ title() }}</h2>
|
||||
<p class="text-xs text-slate-400 font-mono mb-6">{{ subtitle() }}</p>
|
||||
<ng-content />
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
`
|
||||
})
|
||||
export class AuthFrameComponent {
|
||||
readonly title = input.required<string>();
|
||||
readonly subtitle = input('');
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { ApiService } from '../../core/api.service';
|
||||
import { AuthService } from '../../core/auth.service';
|
||||
import { errorText } from '../../core/models';
|
||||
import { AuthFrameComponent } from './auth-frame.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
imports: [FormsModule, RouterLink, MatIconModule, AuthFrameComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<app-auth-frame title="LOG IN" subtitle="Your mailbox address and password">
|
||||
<form (ngSubmit)="submit()" class="space-y-4">
|
||||
<div>
|
||||
<label class="synth-label" for="email">Email</label>
|
||||
<input id="email" name="email" type="email" class="synth-input" [(ngModel)]="email" required
|
||||
autocomplete="username" placeholder="you@domain">
|
||||
</div>
|
||||
<div>
|
||||
<label class="synth-label" for="password">Password</label>
|
||||
<div class="relative">
|
||||
<input id="password" name="password" [type]="show() ? 'text' : 'password'" class="synth-input pr-10"
|
||||
[(ngModel)]="password" required autocomplete="current-password">
|
||||
<button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-cyan-300"
|
||||
[attr.aria-label]="show() ? 'Hide password' : 'Show password'" (click)="show.set(!show())">
|
||||
<mat-icon>{{ show() ? 'visibility_off' : 'visibility' }}</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@if (error()) {
|
||||
<p class="text-sm text-pink-400 font-rajdhani flex items-center gap-2" role="alert">
|
||||
<mat-icon class="!text-lg">error</mat-icon>{{ error() }}
|
||||
</p>
|
||||
}
|
||||
<button type="submit" class="cyber-btn w-full py-2.5 rounded-xl font-bold text-sm" [disabled]="busy()">
|
||||
<mat-icon>login</mat-icon> {{ busy() ? 'LOGGING IN…' : 'LOG IN' }}
|
||||
</button>
|
||||
</form>
|
||||
@if (registration()) {
|
||||
<p class="mt-6 text-center text-sm text-slate-400 font-rajdhani">
|
||||
No mailbox yet? <a routerLink="/register" class="text-cyan-300 hover:text-pink-400 font-semibold">Create one</a>
|
||||
</p>
|
||||
}
|
||||
</app-auth-frame>
|
||||
`
|
||||
})
|
||||
export class LoginPage {
|
||||
private auth = inject(AuthService);
|
||||
private router = inject(Router);
|
||||
|
||||
email = '';
|
||||
password = '';
|
||||
readonly show = signal(false);
|
||||
readonly busy = signal(false);
|
||||
readonly error = signal('');
|
||||
readonly registration = signal(false);
|
||||
|
||||
constructor() {
|
||||
inject(ApiService).config().subscribe({ next: c => this.registration.set(c.registrationEnabled), error: () => {} });
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
if (!this.email.trim() || !this.password) {
|
||||
this.error.set('Enter the email and the password');
|
||||
return;
|
||||
}
|
||||
this.busy.set(true);
|
||||
this.error.set('');
|
||||
this.auth.login(this.email.trim(), this.password).subscribe({
|
||||
next: () => this.router.navigate(['/']),
|
||||
error: e => {
|
||||
this.busy.set(false);
|
||||
this.error.set(errorText(e) === 'Invalid credentials' ? 'Wrong email or password' : errorText(e));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { ApiService } from '../../core/api.service';
|
||||
import { AuthService } from '../../core/auth.service';
|
||||
import { errorText } from '../../core/models';
|
||||
import { AuthFrameComponent } from './auth-frame.component';
|
||||
|
||||
const NAME = /^[a-z0-9]([a-z0-9._-]{0,62}[a-z0-9])?$/;
|
||||
|
||||
@Component({
|
||||
selector: 'app-register',
|
||||
imports: [FormsModule, RouterLink, MatIconModule, AuthFrameComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<app-auth-frame title="NEW MAILBOX" subtitle="Pick an address — you are logged in right away">
|
||||
@if (!loaded()) {
|
||||
<p class="text-slate-400 font-mono text-sm">Loading…</p>
|
||||
} @else if (!enabled()) {
|
||||
<p class="text-slate-300 font-rajdhani mb-4">Registration is closed on this server. Ask the administrator for a mailbox.</p>
|
||||
<a routerLink="/login" class="cyber-btn w-full py-2.5 rounded-xl font-bold text-sm"><mat-icon>arrow_back</mat-icon> BACK TO LOGIN</a>
|
||||
} @else {
|
||||
<form (ngSubmit)="submit()" class="space-y-4">
|
||||
<div>
|
||||
<label class="synth-label" for="local">Address</label>
|
||||
<div class="flex items-stretch gap-2">
|
||||
<input id="local" name="local" class="synth-input" [ngModel]="local()" (ngModelChange)="local.set($event.toLowerCase())"
|
||||
required autocomplete="username" placeholder="name" aria-describedby="local-hint">
|
||||
<span class="flex items-center text-cyan-300 font-mono">@</span>
|
||||
@if (domains().length > 1) {
|
||||
<select name="domain" class="synth-input !w-auto" [ngModel]="domain()" (ngModelChange)="domain.set($event)"
|
||||
aria-label="Domain">
|
||||
@for (d of domains(); track d) { <option [value]="d">{{ d }}</option> }
|
||||
</select>
|
||||
} @else {
|
||||
<span class="flex items-center px-3 rounded-[10px] bg-slate-900/70 border border-cyan-500/30 font-mono text-sm text-slate-200">
|
||||
{{ domain() }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<p id="local-hint" class="mt-1 text-[11px] font-mono" [class]="localValid() || !local() ? 'text-slate-500' : 'text-pink-400'">
|
||||
Letters, digits, dot, dash, underscore
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="synth-label" for="name">Your name (shown to recipients)</label>
|
||||
<input id="name" name="name" class="synth-input" [(ngModel)]="displayName" maxlength="100" autocomplete="name">
|
||||
</div>
|
||||
<div>
|
||||
<label class="synth-label" for="password">Password (8+ characters)</label>
|
||||
<input id="password" name="password" type="password" class="synth-input" [ngModel]="password()"
|
||||
(ngModelChange)="password.set($event)" required minlength="8" autocomplete="new-password">
|
||||
</div>
|
||||
<div>
|
||||
<label class="synth-label" for="password2">Password again</label>
|
||||
<input id="password2" name="password2" type="password" class="synth-input" [ngModel]="password2()"
|
||||
(ngModelChange)="password2.set($event)" required autocomplete="new-password">
|
||||
</div>
|
||||
@if (error()) {
|
||||
<p class="text-sm text-pink-400 font-rajdhani flex items-center gap-2" role="alert">
|
||||
<mat-icon class="!text-lg">error</mat-icon>{{ error() }}
|
||||
</p>
|
||||
}
|
||||
<button type="submit" class="cyber-btn w-full py-2.5 rounded-xl font-bold text-sm" [disabled]="busy()">
|
||||
<mat-icon>person_add</mat-icon> {{ busy() ? 'CREATING…' : 'CREATE MAILBOX' }}
|
||||
</button>
|
||||
</form>
|
||||
<p class="mt-6 text-center text-sm text-slate-400 font-rajdhani">
|
||||
Have a mailbox? <a routerLink="/login" class="text-cyan-300 hover:text-pink-400 font-semibold">Log in</a>
|
||||
</p>
|
||||
}
|
||||
</app-auth-frame>
|
||||
`
|
||||
})
|
||||
export class RegisterPage {
|
||||
private auth = inject(AuthService);
|
||||
private router = inject(Router);
|
||||
|
||||
readonly loaded = signal(false);
|
||||
readonly enabled = signal(false);
|
||||
readonly domains = signal<string[]>([]);
|
||||
readonly domain = signal('');
|
||||
readonly local = signal('');
|
||||
readonly password = signal('');
|
||||
readonly password2 = signal('');
|
||||
displayName = '';
|
||||
readonly busy = signal(false);
|
||||
readonly error = signal('');
|
||||
readonly localValid = computed(() => NAME.test(this.local()));
|
||||
|
||||
constructor() {
|
||||
inject(ApiService).config().subscribe({
|
||||
next: c => {
|
||||
this.enabled.set(c.registrationEnabled);
|
||||
this.domains.set(c.domains);
|
||||
this.domain.set(c.domains[0] ?? '');
|
||||
this.loaded.set(true);
|
||||
},
|
||||
error: e => { this.loaded.set(true); this.error.set(errorText(e)); }
|
||||
});
|
||||
}
|
||||
|
||||
submit(): void {
|
||||
const problem = !this.localValid() ? 'The address: letters, digits, dot, dash, underscore'
|
||||
: this.password().length < 8 ? 'The password is shorter than 8 characters'
|
||||
: this.password() !== this.password2() ? 'The passwords do not match' : '';
|
||||
if (problem) {
|
||||
this.error.set(problem);
|
||||
return;
|
||||
}
|
||||
this.busy.set(true);
|
||||
this.error.set('');
|
||||
this.auth.register(`${this.local()}@${this.domain()}`, this.password(), this.displayName.trim()).subscribe({
|
||||
next: () => this.router.navigate(['/']),
|
||||
error: e => { this.busy.set(false); this.error.set(errorText(e)); }
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import {
|
||||
JtGridBulkEvent, JtGridBulkService, JtGridCellDirective, JtGridColumn, JtGridComponent, JtGridRowEvent, RowAction
|
||||
} from '@jambotron/aria-grid';
|
||||
import { ApiService } from '../../core/api.service';
|
||||
import { BlacklistEntry, errorText } from '../../core/models';
|
||||
import { ToastService } from '../../ui/toast.service';
|
||||
|
||||
/** Blocked senders: their mail goes straight to Spam. */
|
||||
@Component({
|
||||
selector: 'app-blocked',
|
||||
imports: [DatePipe, FormsModule, MatIconModule, JtGridComponent, JtGridCellDirective],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<section class="glass-panel static p-4 md:p-6" aria-labelledby="blocked-title">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<mat-icon class="text-pink-400">block</mat-icon>
|
||||
<div>
|
||||
<h1 id="blocked-title" class="text-xl font-orbitron font-bold neon-text-secondary">BLOCKED SENDERS</h1>
|
||||
<p class="text-xs text-slate-400 font-mono">Messages from these addresses go straight to Spam</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="flex flex-wrap items-end gap-3 mb-5 p-4 rounded-xl bg-slate-950/50 border border-pink-500/20" (ngSubmit)="add()">
|
||||
<div class="flex-grow min-w-[220px]">
|
||||
<label class="synth-label" for="b-email">Sender address</label>
|
||||
<input id="b-email" name="email" type="email" class="synth-input" [(ngModel)]="email" placeholder="spammer@example.com">
|
||||
</div>
|
||||
<div class="flex-grow min-w-[180px]">
|
||||
<label class="synth-label" for="b-reason">Reason (optional)</label>
|
||||
<input id="b-reason" name="reason" class="synth-input" [(ngModel)]="reason" maxlength="255">
|
||||
</div>
|
||||
<button type="submit" class="cyber-btn px-4 py-2.5 rounded-lg text-xs font-bold"><mat-icon>block</mat-icon> BLOCK</button>
|
||||
</form>
|
||||
|
||||
<jt-grid [rows]="entries()" [columns]="columns" [trackBy]="bySender" label="Blocked senders"
|
||||
[emptyMessage]="loading() ? 'Loading…' : 'Nobody is blocked'" [bulkActions]="bulkActions" (bulkAction)="onBulk($event)"
|
||||
[rowActions]="rowActions" (rowAction)="onRow($event)" [rowSubject]="senderOf" [initialSort]="{ key: 'date', direction: 'desc' }">
|
||||
<ng-template jtGridCell="sender" let-row><span class="font-mono text-sm text-cyan-300">{{ row.senderEmail }}</span></ng-template>
|
||||
<ng-template jtGridCell="reason" let-row><span class="text-slate-300">{{ row.reason || '' }}</span></ng-template>
|
||||
<ng-template jtGridCell="date" let-row><span class="font-mono text-xs text-slate-400">{{ row.createdAt | date: 'd MMM y, HH:mm' }}</span></ng-template>
|
||||
</jt-grid>
|
||||
</section>
|
||||
`
|
||||
})
|
||||
export class BlockedPage {
|
||||
private api = inject(ApiService);
|
||||
private bulk = inject(JtGridBulkService);
|
||||
private toasts = inject(ToastService);
|
||||
|
||||
readonly entries = signal<BlacklistEntry[]>([]);
|
||||
readonly loading = signal(true);
|
||||
email = '';
|
||||
reason = '';
|
||||
|
||||
readonly columns: JtGridColumn<BlacklistEntry>[] = [
|
||||
{ key: 'sender', label: 'Sender', sort: e => e.senderEmail },
|
||||
{ key: 'reason', label: 'Reason', sort: e => e.reason || '' },
|
||||
{ key: 'date', label: 'Blocked', sort: e => e.createdAt || '', align: 'end' }
|
||||
];
|
||||
readonly bulkActions: RowAction[] = [{ value: 'unblock', label: 'Unblock', icon: 'lock_open' }];
|
||||
readonly rowActions = (): RowAction[] => [{ value: 'unblock', label: 'Unblock', icon: 'lock_open', inline: true }];
|
||||
readonly bySender = (e: BlacklistEntry) => e.senderEmail;
|
||||
readonly senderOf = (e: BlacklistEntry) => e.senderEmail;
|
||||
|
||||
constructor() { this.load(); }
|
||||
|
||||
load(): void {
|
||||
this.api.blacklist().subscribe({
|
||||
next: list => { this.entries.set(list); this.loading.set(false); },
|
||||
error: e => { this.loading.set(false); this.toasts.error(errorText(e)); }
|
||||
});
|
||||
}
|
||||
|
||||
add(): void {
|
||||
const email = this.email.trim().toLowerCase();
|
||||
if (!/^[^@\s]+@[^@\s]+$/.test(email)) {
|
||||
this.toasts.error('Enter a valid sender address');
|
||||
return;
|
||||
}
|
||||
this.api.block(email, this.reason.trim()).subscribe({
|
||||
next: () => { this.toasts.ok(`${email} blocked`); this.email = ''; this.reason = ''; this.load(); },
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
onRow(e: JtGridRowEvent<BlacklistEntry>): void {
|
||||
this.api.unblock(e.row.senderEmail).subscribe({
|
||||
next: () => { this.toasts.ok(`${e.row.senderEmail} unblocked`); this.load(); },
|
||||
error: err => this.toasts.error(errorText(err))
|
||||
});
|
||||
}
|
||||
|
||||
onBulk(e: JtGridBulkEvent<BlacklistEntry>): void {
|
||||
this.bulk.run({ rows: e.rows, label: 'Unblock', run: x => this.api.unblock(x.senderEmail) }).subscribe(() => this.load());
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,370 @@
|
||||
import { ChangeDetectionStrategy, Component, DestroyRef, computed, effect, inject, input, signal, untracked } from '@angular/core';
|
||||
import { NgTemplateOutlet } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { Observable, of, switchMap, tap } from 'rxjs';
|
||||
import { ApiService } from '../../core/api.service';
|
||||
import { MailStateService } from '../../core/mail-state.service';
|
||||
import { Attachment, Contact, Draft, Message, errorText, formatBytes } from '../../core/models';
|
||||
import { DialogService } from '../../ui/dialog.service';
|
||||
import { ToastService } from '../../ui/toast.service';
|
||||
|
||||
const MAX_FILE = 10 * 1024 * 1024;
|
||||
|
||||
/**
|
||||
* New message, reply, reply all, forward, or a draft being edited. A draft is saved on the server
|
||||
* (automatically every 15 s while there are changes, and before attaching a file — files belong to the draft).
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-compose',
|
||||
imports: [FormsModule, NgTemplateOutlet, MatIconModule, MatTooltipModule],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<section class="glass-panel static p-4 md:p-6" aria-labelledby="compose-title">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 mb-5">
|
||||
<h1 id="compose-title" class="text-xl font-orbitron font-bold neon-text-secondary">{{ title() }}</h1>
|
||||
<span class="text-xs font-mono" [class]="dirty() ? 'text-yellow-300' : 'text-slate-500'" aria-live="polite">
|
||||
{{ saving() ? 'Saving…' : dirty() ? 'Unsaved changes' : draftId() ? 'Draft saved' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<form (ngSubmit)="send()" class="space-y-4">
|
||||
<div class="relative">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="synth-label" for="to">To</label>
|
||||
@if (!showCc()) {
|
||||
<button type="button" class="text-[11px] font-mono text-cyan-300 hover:text-pink-400 mb-1" (click)="showCc.set(true)">+ Cc</button>
|
||||
}
|
||||
</div>
|
||||
<input id="to" name="to" class="synth-input" [ngModel]="to()" (ngModelChange)="to.set($event); touch()"
|
||||
(focus)="focused.set('to')" (blur)="blurLater()" autocomplete="off" placeholder="name@domain, another@domain"
|
||||
role="combobox" aria-autocomplete="list" [attr.aria-expanded]="focused() === 'to' && suggestions().length > 0"
|
||||
aria-controls="suggest-to">
|
||||
@if (focused() === 'to') { <ng-container *ngTemplateOutlet="suggest; context: { field: 'to' }" /> }
|
||||
</div>
|
||||
@if (showCc()) {
|
||||
<div class="relative">
|
||||
<label class="synth-label" for="cc">Cc</label>
|
||||
<input id="cc" name="cc" class="synth-input" [ngModel]="cc()" (ngModelChange)="cc.set($event); touch()"
|
||||
(focus)="focused.set('cc')" (blur)="blurLater()" autocomplete="off"
|
||||
role="combobox" aria-autocomplete="list" [attr.aria-expanded]="focused() === 'cc' && suggestions().length > 0"
|
||||
aria-controls="suggest-cc">
|
||||
@if (focused() === 'cc') { <ng-container *ngTemplateOutlet="suggest; context: { field: 'cc' }" /> }
|
||||
</div>
|
||||
}
|
||||
<div>
|
||||
<label class="synth-label" for="subject">Subject</label>
|
||||
<input id="subject" name="subject" class="synth-input" [ngModel]="subject()" (ngModelChange)="subject.set($event); touch()"
|
||||
maxlength="1000" autocomplete="off">
|
||||
</div>
|
||||
<div>
|
||||
<label class="synth-label" for="body">Message</label>
|
||||
<textarea id="body" name="body" rows="14" class="synth-input font-rajdhani leading-relaxed resize-y"
|
||||
[ngModel]="body()" (ngModelChange)="body.set($event); touch()"></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<label class="ghost-btn cursor-pointer" [class.opacity-50]="uploading()">
|
||||
<mat-icon>attach_file</mat-icon> Attach files
|
||||
<input type="file" multiple class="sr-only" (change)="attach($event)" [disabled]="uploading()">
|
||||
</label>
|
||||
<span class="text-[11px] font-mono text-slate-500">up to 10 MB each</span>
|
||||
@if (uploading()) { <span class="text-xs font-mono text-cyan-300">Uploading…</span> }
|
||||
</div>
|
||||
@if (attachments().length) {
|
||||
<ul class="flex flex-wrap gap-2 mt-3" aria-label="Attached files">
|
||||
@for (a of attachments(); track a.id) {
|
||||
<li class="flex items-center gap-2 pl-3 pr-1 py-1 rounded-lg bg-slate-900/70 border border-cyan-500/30 text-sm">
|
||||
<mat-icon class="!text-base text-cyan-300">attach_file</mat-icon>
|
||||
<span class="max-w-[220px] truncate text-slate-200">{{ a.filename }}</span>
|
||||
<span class="text-xs font-mono text-slate-500">{{ size(a.sizeBytes) }}</span>
|
||||
<button type="button" class="text-slate-400 hover:text-pink-400 p-1" [attr.aria-label]="'Remove ' + a.filename"
|
||||
(click)="detach(a)"><mat-icon class="!text-lg">close</mat-icon></button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (error()) {
|
||||
<p class="text-sm text-pink-400 font-rajdhani flex items-center gap-2" role="alert"><mat-icon class="!text-lg">error</mat-icon>{{ error() }}</p>
|
||||
}
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3 pt-2 border-t border-cyan-500/20">
|
||||
<button type="submit" class="cyber-btn px-6 py-2.5 rounded-xl font-bold text-sm" [disabled]="sending() || uploading()">
|
||||
<mat-icon>send</mat-icon> {{ sending() ? 'SENDING…' : 'SEND' }}
|
||||
</button>
|
||||
<button type="button" class="ghost-btn" (click)="saveNow()" [disabled]="saving() || !hasContent()">
|
||||
<mat-icon>save</mat-icon> Save draft
|
||||
</button>
|
||||
<span class="flex-grow"></span>
|
||||
<button type="button" class="ghost-btn danger" (click)="discard()"><mat-icon>delete</mat-icon> Discard</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<ng-template #suggest let-field="field">
|
||||
@if (suggestions().length) {
|
||||
<ul [id]="'suggest-' + field" role="listbox" aria-label="Contacts"
|
||||
class="absolute z-30 w-full mt-1 bg-slate-950/95 border border-pink-500/40 rounded-xl shadow-2xl py-1 backdrop-blur-2xl">
|
||||
@for (c of suggestions(); track c.email) {
|
||||
<li role="option" aria-selected="false" class="px-4 py-2 text-sm cursor-pointer hover:bg-cyan-500/20 flex gap-2"
|
||||
(mousedown)="$event.preventDefault(); pick(field, c)">
|
||||
<span class="text-slate-200 font-semibold">{{ c.name || c.email }}</span>
|
||||
@if (c.name) { <span class="text-cyan-300 font-mono text-xs self-center">{{ c.email }}</span> }
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</ng-template>
|
||||
`
|
||||
})
|
||||
export class ComposePage {
|
||||
readonly draft = input<string>();
|
||||
readonly reply = input<string>();
|
||||
readonly replyAll = input<string>();
|
||||
readonly forward = input<string>();
|
||||
readonly toParam = input<string>(undefined, { alias: 'to' });
|
||||
|
||||
private api = inject(ApiService);
|
||||
private state = inject(MailStateService);
|
||||
private dialogs = inject(DialogService);
|
||||
private toasts = inject(ToastService);
|
||||
private router = inject(Router);
|
||||
|
||||
readonly to = signal('');
|
||||
readonly cc = signal('');
|
||||
readonly subject = signal('');
|
||||
readonly body = signal('');
|
||||
readonly showCc = signal(false);
|
||||
readonly draftId = signal<number | null>(null);
|
||||
readonly attachments = signal<Attachment[]>([]);
|
||||
readonly dirty = signal(false);
|
||||
readonly saving = signal(false);
|
||||
readonly sending = signal(false);
|
||||
readonly uploading = signal(false);
|
||||
readonly error = signal('');
|
||||
readonly focused = signal<'to' | 'cc' | null>(null);
|
||||
private contacts = signal<Contact[]>([]);
|
||||
private done = false;
|
||||
|
||||
readonly title = computed(() => this.reply() ? 'REPLY' : this.replyAll() ? 'REPLY ALL' : this.forward() ? 'FORWARD'
|
||||
: this.draft() ? 'EDIT DRAFT' : 'NEW MESSAGE');
|
||||
readonly hasContent = computed(() => !!(this.to().trim() || this.cc().trim() || this.subject().trim() || this.body().trim()));
|
||||
|
||||
/** Contacts matching the address being typed (after the last comma). */
|
||||
readonly suggestions = computed(() => {
|
||||
const field = this.focused();
|
||||
if (!field) return [];
|
||||
const value = field === 'to' ? this.to() : this.cc();
|
||||
const typed = value.split(/[,;]/).pop()!.trim().toLowerCase();
|
||||
if (!typed) return [];
|
||||
const taken = value.toLowerCase();
|
||||
return this.contacts()
|
||||
.filter(c => !taken.includes(c.email.toLowerCase()) &&
|
||||
(c.email.toLowerCase().includes(typed) || (c.name || '').toLowerCase().includes(typed)))
|
||||
.slice(0, 6);
|
||||
});
|
||||
|
||||
constructor() {
|
||||
this.api.contacts().subscribe({ next: c => this.contacts.set(c), error: () => {} });
|
||||
effect(() => {
|
||||
const draft = this.draft(), reply = this.reply(), replyAll = this.replyAll(), forward = this.forward(), to = this.toParam();
|
||||
untracked(() => this.init(draft, reply, replyAll, forward, to));
|
||||
});
|
||||
const timer = setInterval(() => { if (this.dirty() && !this.saving() && !this.sending()) this.save().subscribe(); }, 15000);
|
||||
inject(DestroyRef).onDestroy(() => {
|
||||
clearInterval(timer);
|
||||
if (!this.done && this.dirty() && this.hasContent()) this.save().subscribe();
|
||||
});
|
||||
}
|
||||
|
||||
private init(draft?: string, reply?: string, replyAll?: string, forward?: string, to?: string): void {
|
||||
const source = draft ?? reply ?? replyAll ?? forward;
|
||||
if (to) this.to.set(to);
|
||||
if (!source) return;
|
||||
this.api.message(Number(source)).subscribe({
|
||||
next: m => {
|
||||
if (draft) this.fromDraft(m);
|
||||
else if (forward) this.fromForward(m);
|
||||
else this.fromReply(m, !!replyAll);
|
||||
},
|
||||
error: e => this.error.set(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
private fromDraft(m: Message): void {
|
||||
this.draftId.set(m.id);
|
||||
this.to.set(m.recipientEmail || '');
|
||||
this.cc.set(m.ccEmail || '');
|
||||
this.showCc.set(!!m.ccEmail);
|
||||
this.subject.set(m.subject || '');
|
||||
this.body.set(m.body || '');
|
||||
if (m.attachmentCount) this.api.attachments(m.id).subscribe({ next: a => this.attachments.set(a), error: () => {} });
|
||||
}
|
||||
|
||||
private fromReply(m: Message, all: boolean): void {
|
||||
const me = (this.state.profile()?.email ?? '').toLowerCase();
|
||||
this.to.set(m.senderEmail);
|
||||
if (all) {
|
||||
const others = [...m.recipientEmail.split(','), ...(m.ccEmail ? m.ccEmail.split(',') : [])]
|
||||
.map(a => a.trim()).filter(a => a && a.toLowerCase() !== me && a.toLowerCase() !== m.senderEmail.toLowerCase());
|
||||
if (others.length) { this.cc.set(others.join(', ')); this.showCc.set(true); }
|
||||
}
|
||||
this.subject.set(prefixed('Re: ', m.subject));
|
||||
this.body.set(`\n\n${header(m)} wrote:\n${quote(m)}`);
|
||||
this.dirty.set(true);
|
||||
}
|
||||
|
||||
private fromForward(m: Message): void {
|
||||
this.subject.set(prefixed('Fwd: ', m.subject));
|
||||
this.body.set(`\n\n---------- Forwarded message ----------\nFrom: ${header(m)}\nDate: ${new Date(m.receivedAt).toLocaleString()}\n`
|
||||
+ `Subject: ${m.subject || ''}\nTo: ${m.recipientEmail}\n\n${plain(m)}`);
|
||||
this.dirty.set(true);
|
||||
if (m.attachmentCount) this.toasts.ok('Attachments of the original are not forwarded — attach them again if needed');
|
||||
}
|
||||
|
||||
touch(): void { this.dirty.set(true); this.error.set(''); }
|
||||
|
||||
blurLater(): void { setTimeout(() => this.focused.set(null), 150); }
|
||||
|
||||
pick(field: 'to' | 'cc', contact: Contact): void {
|
||||
const target = field === 'to' ? this.to : this.cc;
|
||||
const parts = target().split(/[,;]/).map(p => p.trim());
|
||||
parts[parts.length - 1] = contact.email;
|
||||
target.set(parts.filter(Boolean).join(', ') + ', ');
|
||||
this.touch();
|
||||
}
|
||||
|
||||
private current(): Draft {
|
||||
return { to: this.to().trim(), cc: this.showCc() ? this.cc().trim() : '', subject: this.subject(), body: this.body(), html: false };
|
||||
}
|
||||
|
||||
/** Creates the draft on the first save, updates it afterwards. */
|
||||
private save(): Observable<number> {
|
||||
const id = this.draftId();
|
||||
this.saving.set(true);
|
||||
const request = id ? this.api.updateDraft(id, this.current()) : this.api.createDraft(this.current());
|
||||
return request.pipe(
|
||||
tap({
|
||||
next: m => { this.draftId.set(m.id); this.dirty.set(false); this.saving.set(false); this.state.refreshFolders(); },
|
||||
error: e => { this.saving.set(false); this.error.set('Draft not saved: ' + errorText(e)); }
|
||||
}),
|
||||
switchMap(m => of(m.id))
|
||||
);
|
||||
}
|
||||
|
||||
saveNow(): void {
|
||||
this.save().subscribe({ next: () => this.toasts.ok('Draft saved'), error: () => {} });
|
||||
}
|
||||
|
||||
attach(event: Event): void {
|
||||
const field = event.target as HTMLInputElement;
|
||||
const files = Array.from(field.files ?? []);
|
||||
// the input is cleared only after the upload: Chrome cannot read a File whose input was reset
|
||||
const reset = () => { field.value = ''; };
|
||||
const tooBig = files.filter(f => f.size > MAX_FILE);
|
||||
if (tooBig.length) this.toasts.error(`Too big (over 10 MB): ${tooBig.map(f => f.name).join(', ')}`);
|
||||
const ok = files.filter(f => f.size <= MAX_FILE);
|
||||
if (!ok.length) { reset(); return; }
|
||||
this.uploading.set(true);
|
||||
const id = this.draftId();
|
||||
(id && !this.dirty() ? of(id) : this.save()).subscribe({
|
||||
next: draftId => this.uploadNext(draftId, ok, reset),
|
||||
error: () => { this.uploading.set(false); reset(); }
|
||||
});
|
||||
}
|
||||
|
||||
private uploadNext(draftId: number, files: File[], done: () => void): void {
|
||||
const [file, ...rest] = files;
|
||||
if (!file) {
|
||||
this.uploading.set(false);
|
||||
done();
|
||||
return;
|
||||
}
|
||||
this.api.upload(draftId, file).subscribe({
|
||||
next: a => { this.attachments.update(list => [...list, a]); this.uploadNext(draftId, rest, done); },
|
||||
error: e => { this.toasts.error(`${file.name}: ${errorText(e)}`); this.uploadNext(draftId, rest, done); }
|
||||
});
|
||||
}
|
||||
|
||||
detach(a: Attachment): void {
|
||||
this.api.deleteAttachment(a.id).subscribe({
|
||||
next: () => this.attachments.update(list => list.filter(x => x.id !== a.id)),
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
send(): void {
|
||||
if (!this.to().trim()) {
|
||||
this.error.set('Who is it for? Fill in "To"');
|
||||
return;
|
||||
}
|
||||
const go = () => {
|
||||
this.sending.set(true);
|
||||
this.error.set('');
|
||||
this.api.send(this.current(), this.draftId()).subscribe({
|
||||
next: () => {
|
||||
this.done = true;
|
||||
this.toasts.ok('Message sent');
|
||||
this.state.refreshFolders();
|
||||
this.state.refreshProfile();
|
||||
const sent = this.state.system('Sent');
|
||||
this.router.navigate(sent ? ['/folder', sent.id] : ['/']);
|
||||
},
|
||||
error: e => { this.sending.set(false); this.error.set(errorText(e)); }
|
||||
});
|
||||
};
|
||||
if (!this.subject().trim()) {
|
||||
this.dialogs.confirm('Send without a subject?', 'The message has no subject.', 'Send').subscribe(ok => ok !== null && go());
|
||||
} else {
|
||||
go();
|
||||
}
|
||||
}
|
||||
|
||||
discard(): void {
|
||||
const id = this.draftId();
|
||||
const leave = () => {
|
||||
this.done = true;
|
||||
this.router.navigate(['/']);
|
||||
};
|
||||
if (!id && !this.hasContent()) {
|
||||
leave();
|
||||
return;
|
||||
}
|
||||
this.dialogs.confirm('Discard this message?', id ? 'The draft and its attachments are deleted.' : 'What you typed is lost.', 'Discard', true)
|
||||
.subscribe(ok => {
|
||||
if (ok === null) return;
|
||||
if (!id) { leave(); return; }
|
||||
// a draft: to the Trash, then out of it
|
||||
this.api.deleteMessage(id).pipe(switchMap(() => this.api.deleteMessage(id))).subscribe({
|
||||
next: () => { this.state.refreshFolders(); leave(); },
|
||||
error: () => { this.state.refreshFolders(); leave(); }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
size(bytes: number): string { return formatBytes(bytes); }
|
||||
}
|
||||
|
||||
function prefixed(prefix: string, subject: string): string {
|
||||
const s = subject || '';
|
||||
return s.toLowerCase().startsWith(prefix.toLowerCase()) ? s : prefix + s;
|
||||
}
|
||||
|
||||
function header(m: Message): string {
|
||||
return m.senderName ? `${m.senderName} <${m.senderEmail}>` : m.senderEmail;
|
||||
}
|
||||
|
||||
function plain(m: Message): string {
|
||||
if (!m.html) return m.body || '';
|
||||
const doc = new DOMParser().parseFromString(m.body || '', 'text/html');
|
||||
return (doc.body.textContent || '').replace(/\n{3,}/g, '\n\n').trim();
|
||||
}
|
||||
|
||||
function quote(m: Message): string {
|
||||
return plain(m).split('\n').map(line => '> ' + line).join('\n');
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { A11yModule } from '@angular/cdk/a11y';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import {
|
||||
JtGridBulkEvent, JtGridBulkService, JtGridCellDirective, JtGridColumn, JtGridComponent, JtGridRowEvent, RowAction
|
||||
} from '@jambotron/aria-grid';
|
||||
import { ApiService } from '../../core/api.service';
|
||||
import { Contact, errorText } from '../../core/models';
|
||||
import { DialogService } from '../../ui/dialog.service';
|
||||
import { ToastService } from '../../ui/toast.service';
|
||||
|
||||
/** Address book: grid, add/edit form, write to a contact. */
|
||||
@Component({
|
||||
selector: 'app-contacts',
|
||||
imports: [FormsModule, A11yModule, MatIconModule, JtGridComponent, JtGridCellDirective],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<section class="glass-panel static p-4 md:p-6" aria-labelledby="contacts-title">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<mat-icon class="text-pink-400">contacts</mat-icon>
|
||||
<div>
|
||||
<h1 id="contacts-title" class="text-xl font-orbitron font-bold neon-text-secondary">CONTACTS</h1>
|
||||
<p class="text-xs text-slate-400 font-mono">{{ contacts().length }} contacts · suggested while you type an address</p>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="cyber-btn px-4 py-2 rounded-lg text-xs font-bold" (click)="edit({ name: '', email: '' })">
|
||||
<mat-icon>person_add</mat-icon> ADD CONTACT
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<jt-grid [rows]="contacts()" [columns]="columns" [trackBy]="byEmail" label="Contacts"
|
||||
[emptyMessage]="loading() ? 'Loading…' : 'No contacts yet'" [bulkActions]="bulkActions" (bulkAction)="onBulk($event)"
|
||||
[rowActions]="rowActions" (rowAction)="onRow($event)" [rowSubject]="nameOf" [initialSort]="{ key: 'name', direction: 'asc' }">
|
||||
<ng-template jtGridCell="name" let-row><span class="font-semibold text-slate-100">{{ row.name || '—' }}</span></ng-template>
|
||||
<ng-template jtGridCell="email" let-row><span class="font-mono text-xs text-cyan-300">{{ row.email }}</span></ng-template>
|
||||
<ng-template jtGridCell="phone" let-row><span class="font-mono text-xs">{{ row.phone || '' }}</span></ng-template>
|
||||
<ng-template jtGridCell="company" let-row>{{ row.company || '' }}</ng-template>
|
||||
</jt-grid>
|
||||
</section>
|
||||
|
||||
@if (editing(); as c) {
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md" (click)="editing.set(null)"
|
||||
(keydown.escape)="editing.set(null)">
|
||||
<form class="glass-panel static max-w-lg w-full p-6 border-2 !border-cyan-400 shadow-[0_0_50px_rgba(0,240,255,0.4)] space-y-4"
|
||||
role="dialog" aria-modal="true" aria-labelledby="contact-form-title" cdkTrapFocus [cdkTrapFocusAutoCapture]="true"
|
||||
(click)="$event.stopPropagation()" (ngSubmit)="save()">
|
||||
<h2 id="contact-form-title" class="text-lg font-orbitron font-bold text-slate-100">{{ c.id ? 'EDIT CONTACT' : 'NEW CONTACT' }}</h2>
|
||||
<div><label class="synth-label" for="c-name">Name</label>
|
||||
<input id="c-name" name="name" class="synth-input" [(ngModel)]="c.name" maxlength="255"></div>
|
||||
<div><label class="synth-label" for="c-email">Email *</label>
|
||||
<input id="c-email" name="email" type="email" class="synth-input" [(ngModel)]="c.email" required maxlength="255"></div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div><label class="synth-label" for="c-phone">Phone</label>
|
||||
<input id="c-phone" name="phone" class="synth-input" [(ngModel)]="c.phone" maxlength="50"></div>
|
||||
<div><label class="synth-label" for="c-company">Company</label>
|
||||
<input id="c-company" name="company" class="synth-input" [(ngModel)]="c.company" maxlength="255"></div>
|
||||
</div>
|
||||
@if (formError()) { <p class="text-sm text-pink-400" role="alert">{{ formError() }}</p> }
|
||||
<div class="flex justify-end gap-3">
|
||||
<button type="button" class="px-4 py-2 rounded-lg text-xs font-mono text-slate-400 hover:text-slate-200" (click)="editing.set(null)">CANCEL [ESC]</button>
|
||||
<button type="submit" class="cyber-btn px-5 py-2 rounded-lg text-xs font-bold">SAVE</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
`
|
||||
})
|
||||
export class ContactsPage {
|
||||
private api = inject(ApiService);
|
||||
private bulk = inject(JtGridBulkService);
|
||||
private dialogs = inject(DialogService);
|
||||
private toasts = inject(ToastService);
|
||||
private router = inject(Router);
|
||||
|
||||
readonly contacts = signal<Contact[]>([]);
|
||||
readonly loading = signal(true);
|
||||
readonly editing = signal<Contact | null>(null);
|
||||
readonly formError = signal('');
|
||||
|
||||
readonly columns: JtGridColumn<Contact>[] = [
|
||||
{ key: 'name', label: 'Name', sort: c => (c.name || '').toLowerCase() },
|
||||
{ key: 'email', label: 'Email', sort: c => c.email.toLowerCase() },
|
||||
{ key: 'phone', label: 'Phone', sort: c => c.phone || '' },
|
||||
{ key: 'company', label: 'Company', sort: c => (c.company || '').toLowerCase() }
|
||||
];
|
||||
readonly bulkActions: RowAction[] = [
|
||||
{ value: 'write', label: 'Write to them', icon: 'edit' },
|
||||
{ value: 'delete', label: 'Delete', icon: 'delete', danger: true }
|
||||
];
|
||||
readonly rowActions = (): RowAction[] => [
|
||||
{ value: 'write', label: 'Write', icon: 'edit', inline: true },
|
||||
{ value: 'edit', label: 'Edit', icon: 'manage_accounts', inline: true },
|
||||
{ value: 'delete', label: 'Delete', icon: 'delete', danger: true }
|
||||
];
|
||||
readonly byEmail = (c: Contact) => c.id ?? c.email;
|
||||
readonly nameOf = (c: Contact) => c.name || c.email;
|
||||
|
||||
constructor() { this.load(); }
|
||||
|
||||
load(): void {
|
||||
this.api.contacts().subscribe({
|
||||
next: list => { this.contacts.set(list); this.loading.set(false); },
|
||||
error: e => { this.loading.set(false); this.toasts.error(errorText(e)); }
|
||||
});
|
||||
}
|
||||
|
||||
edit(c: Contact): void {
|
||||
this.formError.set('');
|
||||
this.editing.set({ ...c });
|
||||
}
|
||||
|
||||
save(): void {
|
||||
const c = this.editing();
|
||||
if (!c) return;
|
||||
if (!/^[^@\s]+@[^@\s]+$/.test((c.email || '').trim())) {
|
||||
this.formError.set('Enter a valid email');
|
||||
return;
|
||||
}
|
||||
const body = { name: (c.name || '').trim(), email: c.email.trim(), phone: (c.phone || '').trim(), company: (c.company || '').trim() };
|
||||
(c.id ? this.api.updateContact(c.id, body) : this.api.addContact(body)).subscribe({
|
||||
next: () => { this.editing.set(null); this.toasts.ok(c.id ? 'Contact saved' : 'Contact added'); this.load(); },
|
||||
error: e => this.formError.set(errorText(e).includes('duplicate') ? 'This email is already in contacts' : errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
onRow(e: JtGridRowEvent<Contact>): void {
|
||||
if (e.action === 'write') this.router.navigate(['/compose', { to: e.row.email }]);
|
||||
if (e.action === 'edit') this.edit(e.row);
|
||||
if (e.action === 'delete') {
|
||||
this.dialogs.confirm(`Delete ${this.nameOf(e.row)}?`, 'The contact is removed from the address book.', 'Delete', true)
|
||||
.subscribe(ok => ok !== null && this.api.deleteContact(e.row.id!).subscribe({
|
||||
next: () => { this.toasts.ok('Contact deleted'); this.load(); },
|
||||
error: err => this.toasts.error(errorText(err))
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
onBulk(e: JtGridBulkEvent<Contact>): void {
|
||||
if (e.action === 'write') {
|
||||
this.router.navigate(['/compose', { to: e.rows.map(c => c.email).join(', ') }]);
|
||||
return;
|
||||
}
|
||||
this.bulk.run({
|
||||
rows: e.rows, label: 'Delete', danger: true, confirm: `Delete ${e.rows.length} contacts?`,
|
||||
run: c => this.api.deleteContact(c.id!)
|
||||
}).subscribe(() => this.load());
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,292 @@
|
||||
import { ChangeDetectionStrategy, Component, DestroyRef, computed, effect, inject, input, signal } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import {
|
||||
JtGridBulkEvent, JtGridBulkService, JtGridCellDirective, JtGridColumn, JtGridComponent, JtGridRowEvent, RowAction
|
||||
} from '@jambotron/aria-grid';
|
||||
import { Observable, forkJoin, of } from 'rxjs';
|
||||
import { ApiService } from '../../core/api.service';
|
||||
import { MailStateService } from '../../core/mail-state.service';
|
||||
import { Message, errorText, folderIcon, folderLabel, formatBytes } from '../../core/models';
|
||||
import { DialogService } from '../../ui/dialog.service';
|
||||
import { ToastService } from '../../ui/toast.service';
|
||||
|
||||
/** One folder: the message list (grid), search, bulk actions, empty Trash/Spam. */
|
||||
@Component({
|
||||
selector: 'app-folder',
|
||||
imports: [DatePipe, RouterLink, MatIconModule, MatTooltipModule, JtGridComponent, JtGridCellDirective],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<section class="glass-panel static p-4 md:p-6" [attr.aria-labelledby]="'folder-title'">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<mat-icon class="text-pink-400">{{ icon() }}</mat-icon>
|
||||
<div class="min-w-0">
|
||||
<h1 id="folder-title" class="text-xl font-orbitron font-bold neon-text-secondary truncate">{{ title() }}</h1>
|
||||
<p class="text-xs text-slate-400 font-mono">
|
||||
@if (q()) { Search “{{ q() }}”: {{ messages().length }} found }
|
||||
@else { {{ messages().length }} messages · {{ unread() }} unread }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
@if (q()) {
|
||||
<a [routerLink]="['/folder', folderId()]" class="ghost-btn"><mat-icon>close</mat-icon> Clear search</a>
|
||||
}
|
||||
<button type="button" class="ghost-btn" (click)="load()" [disabled]="loading()" aria-label="Refresh" matTooltip="Refresh">
|
||||
<mat-icon [class.animate-spin]="loading()">refresh</mat-icon>
|
||||
</button>
|
||||
@if (canEmpty()) {
|
||||
<button type="button" class="ghost-btn danger" (click)="empty()" [disabled]="!messages().length">
|
||||
<mat-icon>delete_forever</mat-icon> Empty {{ title() }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (error()) {
|
||||
<p class="text-pink-400 font-rajdhani mb-3" role="alert">{{ error() }}</p>
|
||||
}
|
||||
|
||||
<jt-grid [rows]="messages()" [columns]="columns()" [trackBy]="byId" [label]="title() + ' messages'"
|
||||
[emptyMessage]="loading() ? 'Loading…' : q() ? 'Nothing found' : 'No messages here'"
|
||||
[bulkActions]="bulkActions()" (bulkAction)="onBulk($event)"
|
||||
[rowActions]="rowActions" (rowAction)="onRow($event)" [rowSubject]="subjectOf"
|
||||
[highlight]="isUnread" [initialSort]="{ key: 'date', direction: 'desc' }" [pageSize]="25">
|
||||
<ng-template jtGridCell="flag" let-row>
|
||||
<button type="button" class="align-middle" [class]="row.flagged ? 'text-yellow-400' : 'text-slate-600 hover:text-yellow-300'"
|
||||
[attr.aria-label]="row.flagged ? 'Remove flag' : 'Flag'" [attr.aria-pressed]="row.flagged" (click)="toggleFlag(row)">
|
||||
<mat-icon class="!text-xl">{{ row.flagged ? 'star' : 'star_border' }}</mat-icon>
|
||||
</button>
|
||||
</ng-template>
|
||||
<ng-template jtGridCell="who" let-row>
|
||||
<div class="max-w-[220px] truncate" [class.font-bold]="!row.read" [class.text-white]="!row.read">
|
||||
{{ who(row) }}
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template jtGridCell="subject" let-row>
|
||||
<a [routerLink]="link(row)" class="block max-w-[560px] group">
|
||||
<span class="truncate block group-hover:text-cyan-300" [class.font-bold]="!row.read" [class.text-white]="!row.read">
|
||||
@if (!row.read) { <span class="inline-block w-2 h-2 rounded-full bg-pink-500 mr-1.5 align-middle shadow-[0_0_8px_#ff007f]" aria-label="Unread"></span> }
|
||||
{{ row.subject || '(no subject)' }}
|
||||
</span>
|
||||
<span class="truncate block text-xs text-slate-500">{{ row.body }}</span>
|
||||
</a>
|
||||
</ng-template>
|
||||
<ng-template jtGridCell="files" let-row>
|
||||
@if (row.attachmentCount) {
|
||||
<span class="text-cyan-300 text-xs font-mono whitespace-nowrap" [attr.aria-label]="row.attachmentCount + ' attachments'">
|
||||
<mat-icon class="!text-base">attach_file</mat-icon>{{ row.attachmentCount }}
|
||||
</span>
|
||||
}
|
||||
</ng-template>
|
||||
<ng-template jtGridCell="date" let-row>
|
||||
<span class="font-mono text-xs whitespace-nowrap text-slate-400" [title]="row.receivedAt | date: 'medium'">
|
||||
{{ shortDate(row.receivedAt) }}
|
||||
</span>
|
||||
</ng-template>
|
||||
<ng-template jtGridCell="size" let-row>
|
||||
<span class="font-mono text-xs text-slate-500 whitespace-nowrap">{{ size(row) }}</span>
|
||||
</ng-template>
|
||||
</jt-grid>
|
||||
</section>
|
||||
`
|
||||
})
|
||||
export class FolderPage {
|
||||
readonly id = input.required<string>();
|
||||
readonly q = input<string | undefined>();
|
||||
|
||||
private api = inject(ApiService);
|
||||
private state = inject(MailStateService);
|
||||
private bulk = inject(JtGridBulkService);
|
||||
private dialogs = inject(DialogService);
|
||||
private toasts = inject(ToastService);
|
||||
private router = inject(Router);
|
||||
|
||||
readonly messages = signal<Message[]>([]);
|
||||
readonly loading = signal(false);
|
||||
readonly error = signal('');
|
||||
|
||||
readonly folderId = computed(() => Number(this.id()));
|
||||
readonly folder = computed(() => this.state.folder(this.folderId()));
|
||||
readonly title = computed(() => this.folder() ? folderLabel(this.folder()!) : 'Folder');
|
||||
readonly icon = computed(() => this.folder() ? folderIcon(this.folder()!) : 'folder');
|
||||
readonly kind = computed(() => this.folder()?.system ? this.folder()!.name : 'own');
|
||||
readonly outgoing = computed(() => this.kind() === 'Sent' || this.kind() === 'Drafts');
|
||||
readonly canEmpty = computed(() => this.kind() === 'Trash' || this.kind() === 'Spam');
|
||||
readonly unread = computed(() => this.messages().filter(m => !m.read).length);
|
||||
|
||||
readonly columns = computed<JtGridColumn<Message>[]>(() => [
|
||||
{ key: 'flag', label: 'Flag', hiddenLabel: true, sort: m => m.flagged },
|
||||
{ key: 'who', label: this.outgoing() ? 'To' : 'From', sort: m => this.who(m).toLowerCase() },
|
||||
{ key: 'subject', label: 'Subject', sort: m => (m.subject || '').toLowerCase() },
|
||||
{ key: 'files', label: 'Attachments', hiddenLabel: true, sort: m => m.attachmentCount },
|
||||
{ key: 'date', label: 'Date', sort: m => m.receivedAt, align: 'end' },
|
||||
{ key: 'size', label: 'Size', sort: m => this.bytes(m), align: 'end' }
|
||||
]);
|
||||
|
||||
readonly bulkActions = computed<RowAction[]>(() => {
|
||||
const here = this.folderId();
|
||||
const moves = this.state.folders()
|
||||
.filter(f => f.id !== here && f.name !== 'Drafts' && f.name !== 'Sent')
|
||||
.map(f => ({ value: 'move:' + f.id, label: 'To ' + folderLabel(f), icon: f.system && f.name === 'Spam' ? 'report' : 'drive_file_move' }));
|
||||
return [
|
||||
{ value: 'read', label: 'Mark read', icon: 'drafts' },
|
||||
{ value: 'unread', label: 'Mark unread', icon: 'mark_email_unread' },
|
||||
{ value: 'flag', label: 'Flag', icon: 'star' },
|
||||
...moves.filter(m => !m.label.endsWith('Trash')),
|
||||
{ value: 'delete', label: this.kind() === 'Trash' ? 'Delete forever' : 'Delete', icon: 'delete', danger: true }
|
||||
];
|
||||
});
|
||||
|
||||
readonly byId = (m: Message) => m.id;
|
||||
readonly isUnread = (m: Message) => !m.read;
|
||||
readonly subjectOf = (m: Message) => m.subject || '(no subject)';
|
||||
|
||||
readonly rowActions = (m: Message): RowAction[] => {
|
||||
const draft = this.kind() === 'Drafts';
|
||||
const spam = this.kind() === 'Spam';
|
||||
return [
|
||||
draft ? { value: 'edit', label: 'Edit draft', icon: 'edit', inline: true }
|
||||
: { value: 'reply', label: 'Reply', icon: 'reply', inline: true },
|
||||
...(draft ? [] : [{ value: 'forward', label: 'Forward', icon: 'forward' }]),
|
||||
{ value: m.read ? 'unread' : 'read', label: m.read ? 'Mark unread' : 'Mark read', icon: m.read ? 'mark_email_unread' : 'drafts' },
|
||||
...(this.outgoing() ? [] : [spam ? { value: 'notspam', label: 'Not spam', icon: 'inbox' } : { value: 'spam', label: 'Spam', icon: 'report' }]),
|
||||
{ value: 'delete', label: this.kind() === 'Trash' ? 'Delete forever' : 'Delete', icon: 'delete', danger: true }
|
||||
];
|
||||
};
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
this.folderId();
|
||||
this.q();
|
||||
this.load();
|
||||
});
|
||||
const timer = setInterval(() => { if (!this.q() && !document.hidden) this.load(true); }, 30000);
|
||||
inject(DestroyRef).onDestroy(() => clearInterval(timer));
|
||||
}
|
||||
|
||||
load(quiet = false): void {
|
||||
const id = this.folderId();
|
||||
if (!id) return;
|
||||
if (!quiet) this.loading.set(true);
|
||||
const q = this.q()?.trim();
|
||||
(q ? this.api.search(id, q) : this.api.messages(id)).subscribe({
|
||||
next: list => { this.messages.set(list); this.loading.set(false); this.error.set(''); },
|
||||
error: e => { this.loading.set(false); if (!quiet) this.error.set(errorText(e)); }
|
||||
});
|
||||
}
|
||||
|
||||
who(m: Message): string {
|
||||
return this.outgoing() ? (m.recipientEmail || '(no recipient)') : (m.senderName || m.senderEmail);
|
||||
}
|
||||
|
||||
link(m: Message): unknown[] {
|
||||
return this.kind() === 'Drafts' ? ['/compose', { draft: m.id }] : ['/message', m.id];
|
||||
}
|
||||
|
||||
bytes(m: Message): number { return m.messageSize ?? 0; }
|
||||
size(m: Message): string { return formatBytes(m.messageSize); }
|
||||
|
||||
shortDate(value: string): string {
|
||||
const date = new Date(value);
|
||||
const now = new Date();
|
||||
return date.toDateString() === now.toDateString()
|
||||
? date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
: date.toLocaleDateString([], { day: 'numeric', month: 'short', ...(date.getFullYear() !== now.getFullYear() ? { year: 'numeric' } : {}) });
|
||||
}
|
||||
|
||||
toggleFlag(m: Message): void {
|
||||
this.patch(m, { flagged: !m.flagged });
|
||||
}
|
||||
|
||||
onRow(e: JtGridRowEvent<Message>): void {
|
||||
const m = e.row;
|
||||
switch (e.action) {
|
||||
case 'edit': this.router.navigate(['/compose', { draft: m.id }]); break;
|
||||
case 'reply': this.router.navigate(['/compose', { reply: m.id }]); break;
|
||||
case 'forward': this.router.navigate(['/compose', { forward: m.id }]); break;
|
||||
case 'read': case 'unread':
|
||||
this.patch(m, { read: e.action === 'read' });
|
||||
break;
|
||||
case 'spam': this.moveTo([m], this.state.system('Spam')?.id, 'Moved to Spam'); break;
|
||||
case 'notspam': this.moveTo([m], this.state.inbox()?.id, 'Moved to Inbox'); break;
|
||||
case 'delete':
|
||||
if (this.kind() === 'Trash') {
|
||||
this.dialogs.confirm('Delete forever?', `"${this.subjectOf(m)}" cannot be restored.`, 'Delete', true)
|
||||
.subscribe(ok => ok !== null && this.remove([m]));
|
||||
} else {
|
||||
this.remove([m]);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onBulk(e: JtGridBulkEvent<Message>): void {
|
||||
const action = e.action;
|
||||
if (action.startsWith('move:')) {
|
||||
const target = this.state.folder(Number(action.slice(5)));
|
||||
this.runBulk(e.rows, 'To ' + (target ? folderLabel(target) : 'folder'), m => this.api.updateMessage(m.id, { folderId: target!.id }));
|
||||
return;
|
||||
}
|
||||
switch (action) {
|
||||
case 'read': this.runBulk(e.rows, 'Mark read', m => this.api.updateMessage(m.id, { read: true })); break;
|
||||
case 'unread': this.runBulk(e.rows, 'Mark unread', m => this.api.updateMessage(m.id, { read: false })); break;
|
||||
case 'flag': this.runBulk(e.rows, 'Flag', m => this.api.updateMessage(m.id, { flagged: true })); break;
|
||||
case 'delete':
|
||||
this.runBulk(e.rows, this.kind() === 'Trash' ? 'Delete forever' : 'Delete', m => this.api.deleteMessage(m.id),
|
||||
this.kind() === 'Trash' ? `Delete ${e.rows.length} messages forever? They cannot be restored.` : `Move ${e.rows.length} messages to the Trash?`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
empty(): void {
|
||||
const folder = this.folder();
|
||||
if (!folder) return;
|
||||
this.dialogs.confirm(`Empty ${this.title()}?`, `All ${this.messages().length} messages are deleted forever.`, 'Empty', true)
|
||||
.subscribe(ok => {
|
||||
if (ok === null) return;
|
||||
this.api.emptyFolder(folder.id).subscribe({
|
||||
next: r => { this.toasts.ok(`${r.deleted} messages deleted`); this.afterChange(); },
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private runBulk(rows: Message[], label: string, run: (m: Message) => Observable<unknown>, confirm?: string): void {
|
||||
this.bulk.run({ rows, label, confirm, danger: !!confirm, run }).subscribe(() => this.afterChange());
|
||||
}
|
||||
|
||||
private moveTo(rows: Message[], folderId: number | undefined, done: string): void {
|
||||
if (!folderId) return;
|
||||
forkJoin(rows.map(m => this.api.updateMessage(m.id, { folderId }))).subscribe({
|
||||
next: () => { this.toasts.ok(done); this.afterChange(); },
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
private remove(rows: Message[]): void {
|
||||
forkJoin(rows.length ? rows.map(m => this.api.deleteMessage(m.id)) : [of(null)]).subscribe({
|
||||
next: () => { this.toasts.ok(this.kind() === 'Trash' ? 'Deleted forever' : 'Moved to Trash'); this.afterChange(); },
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
private patch(m: Message, change: { read?: boolean; flagged?: boolean }): void {
|
||||
this.api.updateMessage(m.id, change).subscribe({
|
||||
next: updated => {
|
||||
this.messages.update(list => list.map(x => x.id === m.id ? { ...x, read: updated.read, flagged: updated.flagged } : x));
|
||||
if (change.read !== undefined) this.state.refreshFolders();
|
||||
},
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
private afterChange(): void {
|
||||
this.load(true);
|
||||
this.state.refreshFolders();
|
||||
this.state.refreshProfile();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { ApiService } from '../core/api.service';
|
||||
import { errorText } from '../core/models';
|
||||
|
||||
/** "/" → the Inbox (its id is per user). */
|
||||
@Component({
|
||||
selector: 'app-inbox-redirect',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `<section class="glass-panel static p-6 text-slate-400 font-mono text-sm">{{ message }}</section>`
|
||||
})
|
||||
export class InboxRedirect {
|
||||
message = 'Loading…';
|
||||
|
||||
constructor() {
|
||||
const router = inject(Router);
|
||||
inject(ApiService).folders().subscribe({
|
||||
next: folders => {
|
||||
const inbox = folders.find(f => f.system && f.name === 'INBOX') ?? folders[0];
|
||||
if (inbox) router.navigate(['/folder', inbox.id], { replaceUrl: true });
|
||||
},
|
||||
error: e => { this.message = errorText(e); }
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
import { ChangeDetectionStrategy, Component, computed, effect, inject, input, signal } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
import { Location } from '@angular/common';
|
||||
import { Router, RouterLink } from '@angular/router';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { ApiService } from '../../core/api.service';
|
||||
import { MailStateService } from '../../core/mail-state.service';
|
||||
import { Attachment, Message, errorText, folderLabel, formatBytes } from '../../core/models';
|
||||
import { DialogService } from '../../ui/dialog.service';
|
||||
import { ToastService } from '../../ui/toast.service';
|
||||
|
||||
/** One message: headers, body, attachments, reply/forward/move/spam/block/delete. */
|
||||
@Component({
|
||||
selector: 'app-message',
|
||||
imports: [DatePipe, FormsModule, RouterLink, MatIconModule, MatTooltipModule],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
@if (error()) {
|
||||
<section class="glass-panel static p-6">
|
||||
<p class="text-pink-400 font-rajdhani mb-4" role="alert">{{ error() }}</p>
|
||||
<a routerLink="/" class="ghost-btn"><mat-icon>arrow_back</mat-icon> Inbox</a>
|
||||
</section>
|
||||
} @else if (message(); as m) {
|
||||
<article class="glass-panel static p-4 md:p-6" aria-labelledby="message-subject">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-5 pb-4 border-b border-cyan-500/20" role="toolbar" aria-label="Message actions">
|
||||
<button type="button" class="ghost-btn" (click)="back()"><mat-icon>arrow_back</mat-icon> Back</button>
|
||||
<span class="flex-grow"></span>
|
||||
<a [routerLink]="['/compose', { reply: m.id }]" class="ghost-btn"><mat-icon>reply</mat-icon> Reply</a>
|
||||
@if (hasOthers()) {
|
||||
<a [routerLink]="['/compose', { replyAll: m.id }]" class="ghost-btn"><mat-icon>reply_all</mat-icon> Reply all</a>
|
||||
}
|
||||
<a [routerLink]="['/compose', { forward: m.id }]" class="ghost-btn"><mat-icon>forward</mat-icon> Forward</a>
|
||||
<button type="button" class="ghost-btn" [attr.aria-pressed]="m.flagged" (click)="update({ flagged: !m.flagged })">
|
||||
<mat-icon [class.text-yellow-400]="m.flagged">{{ m.flagged ? 'star' : 'star_border' }}</mat-icon> {{ m.flagged ? 'Flagged' : 'Flag' }}
|
||||
</button>
|
||||
<button type="button" class="ghost-btn" (click)="markUnread()"><mat-icon>mark_email_unread</mat-icon> Unread</button>
|
||||
<label for="move-to" class="sr-only">Move to folder</label>
|
||||
<select id="move-to" class="bg-slate-900/80 text-slate-300 border border-cyan-500/35 rounded-[10px] px-2 py-1.5 text-xs font-mono"
|
||||
[ngModel]="''" (ngModelChange)="move($event)">
|
||||
<option value="" disabled>Move to…</option>
|
||||
@for (f of targets(); track f.id) { <option [value]="f.id">{{ label(f) }}</option> }
|
||||
</select>
|
||||
@if (inSpam()) {
|
||||
<button type="button" class="ghost-btn" (click)="notSpam()"><mat-icon>inbox</mat-icon> Not spam</button>
|
||||
} @else if (!outgoing()) {
|
||||
<button type="button" class="ghost-btn" (click)="spam()"><mat-icon>report</mat-icon> Spam</button>
|
||||
}
|
||||
<button type="button" class="ghost-btn danger" (click)="remove()"><mat-icon>delete</mat-icon> {{ inTrash() ? 'Delete forever' : 'Delete' }}</button>
|
||||
</div>
|
||||
|
||||
<h1 id="message-subject" class="text-2xl font-orbitron font-bold neon-text-secondary mb-4 break-words">{{ m.subject || '(no subject)' }}</h1>
|
||||
|
||||
<div class="flex items-start gap-3 mb-5">
|
||||
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-pink-500/60 to-cyan-400/60 flex items-center justify-center font-orbitron font-bold text-white shrink-0"
|
||||
aria-hidden="true">{{ initial() }}</div>
|
||||
<dl class="text-sm font-rajdhani min-w-0 flex-grow grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5">
|
||||
<dt class="text-slate-500 font-mono text-xs pt-0.5">From</dt>
|
||||
<dd class="text-slate-100 break-all">
|
||||
@if (m.senderName) { <span class="font-bold">{{ m.senderName }}</span> }
|
||||
<span class="text-cyan-300 font-mono text-xs ml-1"><{{ m.senderEmail }}></span>
|
||||
@if (!outgoing()) {
|
||||
<button type="button" class="ml-2 text-[11px] font-mono text-slate-500 hover:text-pink-400" (click)="block()">block sender</button>
|
||||
}
|
||||
</dd>
|
||||
<dt class="text-slate-500 font-mono text-xs pt-0.5">To</dt>
|
||||
<dd class="text-slate-300 break-all">{{ m.recipientEmail }}</dd>
|
||||
@if (m.ccEmail) {
|
||||
<dt class="text-slate-500 font-mono text-xs pt-0.5">Cc</dt>
|
||||
<dd class="text-slate-300 break-all">{{ m.ccEmail }}</dd>
|
||||
}
|
||||
<dt class="text-slate-500 font-mono text-xs pt-0.5">Date</dt>
|
||||
<dd class="text-slate-400 font-mono text-xs pt-0.5">{{ m.receivedAt | date: 'EEEE, d MMMM y, HH:mm' }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
@if (m.spam) {
|
||||
<p class="mb-4 px-3 py-2 rounded-lg bg-pink-500/15 border border-pink-500/40 text-pink-200 text-sm font-rajdhani flex items-center gap-2">
|
||||
<mat-icon>report</mat-icon> Marked as spam: the sender is blocked or the message failed the SPF/DKIM/DMARC checks.
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (m.html) {
|
||||
<div class="flex items-center gap-3 mb-2 text-xs font-mono text-slate-400">
|
||||
<span>HTML message</span>
|
||||
<button type="button" class="ghost-btn !py-1" (click)="remoteImages.set(!remoteImages())" [attr.aria-pressed]="remoteImages()">
|
||||
<mat-icon>image</mat-icon> {{ remoteImages() ? 'Hide remote images' : 'Show remote images' }}
|
||||
</button>
|
||||
</div>
|
||||
<iframe class="w-full h-[65vh] rounded-xl bg-white border border-cyan-500/30" sandbox="allow-popups allow-popups-to-escape-sandbox"
|
||||
[srcdoc]="htmlDoc()" title="Message body"></iframe>
|
||||
} @else {
|
||||
<div class="bg-slate-950/70 rounded-xl border border-cyan-500/20 p-4 md:p-5 font-rajdhani text-[1.02rem] text-slate-200 whitespace-pre-wrap break-words leading-relaxed">{{ m.body }}</div>
|
||||
}
|
||||
|
||||
@if (attachments().length) {
|
||||
<h2 class="mt-6 mb-2 text-xs font-orbitron font-bold text-cyan-300 tracking-widest">ATTACHMENTS ({{ attachments().length }})</h2>
|
||||
<ul class="flex flex-wrap gap-2">
|
||||
@for (a of attachments(); track a.id) {
|
||||
<li>
|
||||
<button type="button" class="ghost-btn !py-2" (click)="download(a)" [attr.aria-label]="'Download ' + a.filename">
|
||||
<mat-icon>{{ fileIcon(a) }}</mat-icon>
|
||||
<span class="max-w-[220px] truncate text-slate-200">{{ a.filename }}</span>
|
||||
<span class="text-slate-500">{{ size(a.sizeBytes) }}</span>
|
||||
<mat-icon class="text-cyan-300">download</mat-icon>
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</article>
|
||||
} @else {
|
||||
<section class="glass-panel static p-6 text-slate-400 font-mono text-sm">Loading…</section>
|
||||
}
|
||||
`
|
||||
})
|
||||
export class MessagePage {
|
||||
readonly id = input.required<string>();
|
||||
|
||||
private api = inject(ApiService);
|
||||
private state = inject(MailStateService);
|
||||
private dialogs = inject(DialogService);
|
||||
private toasts = inject(ToastService);
|
||||
private router = inject(Router);
|
||||
private location = inject(Location);
|
||||
private sanitizer = inject(DomSanitizer);
|
||||
|
||||
readonly message = signal<Message | null>(null);
|
||||
readonly attachments = signal<Attachment[]>([]);
|
||||
readonly error = signal('');
|
||||
readonly remoteImages = signal(false);
|
||||
|
||||
readonly folder = computed(() => { const m = this.message(); return m ? this.state.folder(m.folderId) : null; });
|
||||
readonly inTrash = computed(() => this.folder()?.system === true && this.folder()?.name === 'Trash');
|
||||
readonly inSpam = computed(() => this.folder()?.system === true && this.folder()?.name === 'Spam');
|
||||
readonly outgoing = computed(() => this.folder()?.system === true && ['Sent', 'Drafts'].includes(this.folder()!.name));
|
||||
readonly targets = computed(() => this.state.folders().filter(f => f.id !== this.message()?.folderId && f.name !== 'Drafts'));
|
||||
readonly initial = computed(() => (this.message()?.senderName || this.message()?.senderEmail || '?').trim().charAt(0).toUpperCase());
|
||||
readonly hasOthers = computed(() => {
|
||||
const m = this.message();
|
||||
if (!m) return false;
|
||||
return m.recipientEmail.split(',').length + (m.ccEmail ? m.ccEmail.split(',').length : 0) > 1;
|
||||
});
|
||||
|
||||
/** No scripts (sandbox), remote content only when asked — a sender cannot see that the message was opened. */
|
||||
readonly htmlDoc = computed<SafeHtml>(() => {
|
||||
const img = this.remoteImages() ? 'img-src data: https: http:;' : 'img-src data:;';
|
||||
const csp = `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; ${img} font-src data:">`;
|
||||
const base = '<base target="_blank"><style>body{font-family:system-ui,sans-serif;margin:16px;color:#111;word-wrap:break-word}</style>';
|
||||
return this.sanitizer.bypassSecurityTrustHtml(csp + base + (this.message()?.body ?? ''));
|
||||
});
|
||||
|
||||
label = folderLabel;
|
||||
|
||||
constructor() {
|
||||
effect(() => this.load(Number(this.id())));
|
||||
}
|
||||
|
||||
private load(id: number): void {
|
||||
this.message.set(null);
|
||||
this.attachments.set([]);
|
||||
this.error.set('');
|
||||
this.remoteImages.set(false);
|
||||
this.api.message(id).subscribe({
|
||||
next: m => {
|
||||
this.message.set(m);
|
||||
if (m.attachmentCount) this.api.attachments(m.id).subscribe({ next: a => this.attachments.set(a), error: () => {} });
|
||||
if (!m.read) {
|
||||
this.api.updateMessage(m.id, { read: true }).subscribe({
|
||||
next: () => { this.message.update(x => x && { ...x, read: true }); this.state.refreshFolders(); },
|
||||
error: () => {}
|
||||
});
|
||||
}
|
||||
},
|
||||
error: e => this.error.set(e?.status === 404 ? 'This message does not exist (or was deleted).' : errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
back(): void {
|
||||
const m = this.message();
|
||||
if (history.length > 1) this.location.back();
|
||||
else this.router.navigate(m ? ['/folder', m.folderId] : ['/']);
|
||||
}
|
||||
|
||||
update(change: { read?: boolean; flagged?: boolean; folderId?: number }): void {
|
||||
const m = this.message();
|
||||
if (!m) return;
|
||||
this.api.updateMessage(m.id, change).subscribe({
|
||||
next: updated => { this.message.set({ ...m, ...updated, body: m.body }); this.state.refreshFolders(); },
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
markUnread(): void {
|
||||
const m = this.message();
|
||||
if (!m) return;
|
||||
this.api.updateMessage(m.id, { read: false }).subscribe({
|
||||
next: () => { this.state.refreshFolders(); this.router.navigate(['/folder', m.folderId]); },
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
move(value: string): void {
|
||||
const target = this.state.folder(Number(value));
|
||||
const m = this.message();
|
||||
if (!target || !m) return;
|
||||
this.api.updateMessage(m.id, { folderId: target.id }).subscribe({
|
||||
next: () => { this.toasts.ok(`Moved to ${folderLabel(target)}`); this.state.refreshFolders(); this.router.navigate(['/folder', m.folderId]); },
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
spam(): void { const s = this.state.system('Spam'); if (s) this.move(String(s.id)); }
|
||||
notSpam(): void { const i = this.state.inbox(); if (i) this.move(String(i.id)); }
|
||||
|
||||
block(): void {
|
||||
const m = this.message();
|
||||
if (!m) return;
|
||||
this.dialogs.confirm(`Block ${m.senderEmail}?`, 'New messages from this sender go straight to Spam. This message moves to Spam too.', 'Block', true)
|
||||
.subscribe(ok => {
|
||||
if (ok === null) return;
|
||||
this.api.block(m.senderEmail, 'Blocked from a message').subscribe({
|
||||
next: () => { this.toasts.ok(`${m.senderEmail} blocked`); this.spam(); },
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
remove(): void {
|
||||
const m = this.message();
|
||||
if (!m) return;
|
||||
const go = () => this.api.deleteMessage(m.id).subscribe({
|
||||
next: () => {
|
||||
this.toasts.ok(this.inTrash() ? 'Deleted forever' : 'Moved to Trash');
|
||||
this.state.refreshFolders();
|
||||
this.state.refreshProfile();
|
||||
this.router.navigate(['/folder', m.folderId]);
|
||||
},
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
if (this.inTrash()) {
|
||||
this.dialogs.confirm('Delete forever?', 'This message cannot be restored.', 'Delete', true).subscribe(ok => ok !== null && go());
|
||||
} else {
|
||||
go();
|
||||
}
|
||||
}
|
||||
|
||||
download(a: Attachment): void {
|
||||
this.api.download(a.id).subscribe({
|
||||
next: blob => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = a.filename;
|
||||
link.click();
|
||||
setTimeout(() => URL.revokeObjectURL(url), 1000);
|
||||
},
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
size(bytes: number): string { return formatBytes(bytes); }
|
||||
|
||||
fileIcon(a: Attachment): string {
|
||||
const type = a.contentType || '';
|
||||
if (type.startsWith('image/')) return 'image';
|
||||
if (type.includes('pdf')) return 'picture_as_pdf';
|
||||
if (type.includes('zip') || type.includes('compressed')) return 'folder_zip';
|
||||
if (type.startsWith('text/')) return 'description';
|
||||
return 'attach_file';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
import { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { ApiService } from '../../core/api.service';
|
||||
import { MailStateService } from '../../core/mail-state.service';
|
||||
import { errorText, formatBytes } from '../../core/models';
|
||||
import { THEMES, ThemeService } from '../../ui/theme.service';
|
||||
import { ToastService } from '../../ui/toast.service';
|
||||
|
||||
/** Profile name, password, storage, look. */
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
imports: [DatePipe, FormsModule, MatIconModule],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 gap-5">
|
||||
<section class="glass-panel static p-5 md:p-6" aria-labelledby="profile-title">
|
||||
<h1 id="profile-title" class="text-lg font-orbitron font-bold text-cyan-300 flex items-center gap-2 mb-4 border-b border-cyan-500/20 pb-2">
|
||||
<mat-icon class="text-pink-500">badge</mat-icon> PROFILE
|
||||
</h1>
|
||||
@if (state.profile(); as p) {
|
||||
<dl class="text-sm font-rajdhani grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 mb-5">
|
||||
<dt class="text-slate-500 font-mono text-xs pt-0.5">Mailbox</dt><dd class="text-cyan-300 font-mono">{{ p.email }}</dd>
|
||||
<dt class="text-slate-500 font-mono text-xs pt-0.5">Since</dt><dd class="text-slate-300">{{ p.createdAt | date: 'd MMMM y' }}</dd>
|
||||
</dl>
|
||||
}
|
||||
<form (ngSubmit)="saveName()" class="space-y-3">
|
||||
<div>
|
||||
<label class="synth-label" for="display-name">Name shown to recipients</label>
|
||||
<input id="display-name" name="displayName" class="synth-input" [(ngModel)]="displayName" maxlength="100" required>
|
||||
</div>
|
||||
<button type="submit" class="cyber-btn px-4 py-2 rounded-lg text-xs font-bold"><mat-icon>save</mat-icon> SAVE NAME</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="glass-panel static p-5 md:p-6" aria-labelledby="password-title">
|
||||
<h2 id="password-title" class="text-lg font-orbitron font-bold text-cyan-300 flex items-center gap-2 mb-4 border-b border-cyan-500/20 pb-2">
|
||||
<mat-icon class="text-pink-500">key</mat-icon> PASSWORD
|
||||
</h2>
|
||||
<form (ngSubmit)="changePassword()" class="space-y-3">
|
||||
<input type="email" name="username" class="sr-only" [value]="state.profile()?.email ?? ''" autocomplete="username" tabindex="-1" aria-hidden="true">
|
||||
<div><label class="synth-label" for="pw-current">Current password</label>
|
||||
<input id="pw-current" name="current" type="password" class="synth-input" [(ngModel)]="current" autocomplete="current-password"></div>
|
||||
<div><label class="synth-label" for="pw-new">New password (8+ characters)</label>
|
||||
<input id="pw-new" name="next" type="password" class="synth-input" [(ngModel)]="next" autocomplete="new-password"></div>
|
||||
<div><label class="synth-label" for="pw-again">New password again</label>
|
||||
<input id="pw-again" name="again" type="password" class="synth-input" [(ngModel)]="again" autocomplete="new-password"></div>
|
||||
@if (passwordError()) { <p class="text-sm text-pink-400" role="alert">{{ passwordError() }}</p> }
|
||||
<button type="submit" class="cyber-btn px-4 py-2 rounded-lg text-xs font-bold"><mat-icon>lock_reset</mat-icon> CHANGE PASSWORD</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="glass-panel static p-5 md:p-6" aria-labelledby="storage-title">
|
||||
<h2 id="storage-title" class="text-lg font-orbitron font-bold text-cyan-300 flex items-center gap-2 mb-4 border-b border-cyan-500/20 pb-2">
|
||||
<mat-icon class="text-pink-500">storage</mat-icon> STORAGE
|
||||
</h2>
|
||||
<div class="flex justify-between text-xs font-mono text-slate-300 mb-1">
|
||||
<span>{{ used() }} of {{ quota() }}</span><span class="text-pink-400">{{ percent() }}%</span>
|
||||
</div>
|
||||
<div class="h-2 rounded-full bg-slate-800 overflow-hidden mb-4" role="progressbar" aria-label="Storage used"
|
||||
[attr.aria-valuenow]="percent()" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="h-full bg-gradient-to-r from-cyan-400 to-pink-500" [style.width.%]="percent()"></div>
|
||||
</div>
|
||||
<ul class="text-sm font-rajdhani text-slate-300 space-y-1">
|
||||
@for (f of state.folders(); track f.id) {
|
||||
<li class="flex justify-between"><span>{{ f.system ? label(f.name) : f.name }}</span>
|
||||
<span class="font-mono text-xs text-slate-400">{{ f.messageCount }} messages</span></li>
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="glass-panel static p-5 md:p-6" aria-labelledby="look-title">
|
||||
<h2 id="look-title" class="text-lg font-orbitron font-bold text-cyan-300 flex items-center gap-2 mb-4 border-b border-cyan-500/20 pb-2">
|
||||
<mat-icon class="text-pink-500">palette</mat-icon> LOOK
|
||||
</h2>
|
||||
<fieldset class="mb-4">
|
||||
<legend class="synth-label">Palette</legend>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
@for (t of themes; track t.value) {
|
||||
<button type="button" class="ghost-btn justify-center !py-2" [attr.aria-pressed]="theme.theme() === t.value"
|
||||
[class.!border-pink-500]="theme.theme() === t.value" [class.!text-pink-300]="theme.theme() === t.value"
|
||||
(click)="theme.theme.set(t.value)">{{ t.label }}</button>
|
||||
}
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between p-3 bg-slate-900/50 rounded-lg border border-pink-500/20">
|
||||
<div><div class="font-bold text-slate-200">High contrast</div><div class="text-xs text-slate-400">Black background, bright outlines</div></div>
|
||||
<button type="button" class="ghost-btn" [attr.aria-pressed]="theme.highContrast()" (click)="theme.highContrast.set(!theme.highContrast())">
|
||||
{{ theme.highContrast() ? 'ON' : 'OFF' }}</button>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-slate-900/50 rounded-lg border border-pink-500/20">
|
||||
<div><div class="font-bold text-slate-200">Grid motion</div><div class="text-xs text-slate-400">The moving retro floor in the background</div></div>
|
||||
<button type="button" class="ghost-btn" [attr.aria-pressed]="theme.animation()" (click)="theme.animation.set(!theme.animation())">
|
||||
{{ theme.animation() ? 'ON' : 'OFF' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class SettingsPage {
|
||||
readonly state = inject(MailStateService);
|
||||
readonly theme = inject(ThemeService);
|
||||
private api = inject(ApiService);
|
||||
private toasts = inject(ToastService);
|
||||
|
||||
readonly themes = THEMES;
|
||||
displayName = '';
|
||||
current = '';
|
||||
next = '';
|
||||
again = '';
|
||||
readonly passwordError = signal('');
|
||||
|
||||
readonly used = computed(() => formatBytes(this.state.profile()?.usedBytes));
|
||||
readonly quota = computed(() => formatBytes(this.state.profile()?.quotaBytes));
|
||||
readonly percent = computed(() => {
|
||||
const p = this.state.profile();
|
||||
return p && p.quotaBytes ? Math.min(100, Math.round(p.usedBytes / p.quotaBytes * 1000) / 10) : 0;
|
||||
});
|
||||
|
||||
constructor() {
|
||||
this.state.refreshProfile();
|
||||
effect(() => { this.displayName = this.state.profile()?.displayName ?? ''; });
|
||||
}
|
||||
|
||||
label(name: string): string {
|
||||
return ({ INBOX: 'Inbox', Drafts: 'Drafts', Sent: 'Sent', Spam: 'Spam', Trash: 'Trash' } as Record<string, string>)[name] ?? name;
|
||||
}
|
||||
|
||||
saveName(): void {
|
||||
const name = this.displayName.trim();
|
||||
if (!name) { this.toasts.error('The name cannot be empty'); return; }
|
||||
this.api.updateMe(name).subscribe({
|
||||
next: p => { this.state.profile.set(p); this.toasts.ok('Name saved'); },
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
}
|
||||
|
||||
changePassword(): void {
|
||||
const problem = !this.current ? 'Enter the current password'
|
||||
: this.next.length < 8 ? 'The new password is shorter than 8 characters'
|
||||
: this.next !== this.again ? 'The new passwords do not match' : '';
|
||||
this.passwordError.set(problem);
|
||||
if (problem) return;
|
||||
this.api.changePassword(this.current, this.next).subscribe({
|
||||
next: () => { this.current = this.next = this.again = ''; this.toasts.ok('Password changed'); },
|
||||
error: e => this.passwordError.set(errorText(e))
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,254 @@
|
||||
import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NavigationEnd, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { JtRowActionsComponent, RowAction } from '@jambotron/aria-grid';
|
||||
import { filter } from 'rxjs';
|
||||
import { ApiService } from '../../core/api.service';
|
||||
import { AuthService } from '../../core/auth.service';
|
||||
import { MailStateService } from '../../core/mail-state.service';
|
||||
import { Folder, errorText, folderIcon, folderLabel, formatBytes } from '../../core/models';
|
||||
import { BackgroundComponent } from '../../ui/background.component';
|
||||
import { DialogService } from '../../ui/dialog.service';
|
||||
import { THEMES, ThemeService } from '../../ui/theme.service';
|
||||
import { ToastService } from '../../ui/toast.service';
|
||||
|
||||
/** Header, folders sidebar and the page — everything after login. */
|
||||
@Component({
|
||||
selector: 'app-shell',
|
||||
imports: [FormsModule, RouterOutlet, RouterLink, RouterLinkActive, MatIconModule, MatTooltipModule,
|
||||
JtRowActionsComponent, BackgroundComponent],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
<app-background />
|
||||
<div class="relative z-10 flex flex-col min-h-screen">
|
||||
<header class="px-4 py-3 lg:px-6 border-b border-cyan-500/20 glass-panel static rounded-none border-t-0 border-x-0 sticky top-0 z-40 backdrop-blur-xl">
|
||||
<div class="max-w-[1500px] mx-auto flex items-center gap-3">
|
||||
<button type="button" class="lg:hidden ghost-btn !px-2" aria-label="Folders" [attr.aria-expanded]="menuOpen()"
|
||||
(click)="menuOpen.set(!menuOpen())"><mat-icon>menu</mat-icon></button>
|
||||
<a routerLink="/" class="flex items-center gap-3 shrink-0" aria-label="Synth Mail — inbox">
|
||||
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-pink-500 to-cyan-400 flex items-center justify-center
|
||||
text-slate-950 font-black text-xl shadow-[0_0_15px_rgba(255,0,127,0.8)] font-orbitron">M</div>
|
||||
<div class="hidden sm:block">
|
||||
<div class="text-xl font-extrabold font-orbitron tracking-wider neon-text-primary leading-tight">
|
||||
SYNTH <span class="text-cyan-400 font-normal">MAIL</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-cyan-300/70 font-mono tracking-widest uppercase">Reactive mail server</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<form class="flex-grow max-w-xl mx-auto" role="search" (ngSubmit)="search()">
|
||||
<label for="global-search" class="sr-only">Search in the current folder</label>
|
||||
<div class="relative">
|
||||
<mat-icon class="absolute left-3 top-1/2 -translate-y-1/2 text-cyan-400/70 !text-xl">search</mat-icon>
|
||||
<input id="global-search" name="q" [(ngModel)]="query" placeholder="Search mail…"
|
||||
class="synth-input !pl-10 !rounded-full !py-2">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="hidden md:flex items-center gap-3 bg-slate-950/60 px-4 py-1.5 rounded-full border border-pink-500/30 text-xs font-mono">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping" aria-hidden="true"></span>
|
||||
<span class="text-slate-300">Unread: <span class="text-pink-400 font-bold">{{ state.unreadTotal() }}</span></span>
|
||||
<span class="text-slate-600" aria-hidden="true">|</span>
|
||||
<span class="text-cyan-300 max-w-[220px] truncate" [matTooltip]="auth.email() ?? ''">{{ state.profile()?.displayName || auth.email() }}</span>
|
||||
</div>
|
||||
|
||||
<label for="palette" class="sr-only">Color theme</label>
|
||||
<select id="palette" class="hidden xl:block bg-slate-900/90 text-cyan-300 border border-cyan-500/40 rounded-lg px-2 py-1.5 text-xs font-mono"
|
||||
[ngModel]="theme.theme()" (ngModelChange)="theme.theme.set($event)">
|
||||
@for (t of themes; track t.value) { <option [value]="t.value">{{ t.label }}</option> }
|
||||
</select>
|
||||
<button type="button" class="ghost-btn !px-2" matTooltip="High contrast" aria-label="High contrast"
|
||||
[attr.aria-pressed]="theme.highContrast()" (click)="theme.highContrast.set(!theme.highContrast())">
|
||||
<mat-icon class="text-yellow-400">contrast</mat-icon>
|
||||
</button>
|
||||
<button type="button" class="ghost-btn !px-2" matTooltip="Log out" aria-label="Log out" (click)="logout()">
|
||||
<mat-icon>logout</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-grow max-w-[1500px] w-full mx-auto p-3 md:p-5 grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-5">
|
||||
<nav class="glass-panel static p-4 h-fit lg:sticky lg:top-24 lg:block" [class.hidden]="!menuOpen()"
|
||||
aria-label="Mail folders">
|
||||
<a routerLink="/compose" class="cyber-btn w-full py-2.5 rounded-xl font-bold text-xs mb-4" (click)="menuOpen.set(false)">
|
||||
<mat-icon>edit</mat-icon> COMPOSE
|
||||
</a>
|
||||
|
||||
<ul class="space-y-1">
|
||||
@for (folder of systemFolders(); track folder.id) {
|
||||
<li>
|
||||
<a [routerLink]="['/folder', folder.id]" routerLinkActive="!bg-pink-500/20 !text-pink-300 !border-pink-500/40"
|
||||
class="flex items-center gap-3 px-3 py-2 rounded-lg border border-transparent text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-300 font-rajdhani font-semibold"
|
||||
(click)="menuOpen.set(false)">
|
||||
<mat-icon class="!text-xl">{{ icon(folder) }}</mat-icon>
|
||||
<span class="flex-grow">{{ label(folder) }}</span>
|
||||
@if (badge(folder)) {
|
||||
<span class="text-[11px] font-mono px-2 rounded-full bg-pink-500/25 text-pink-300 border border-pink-500/40"
|
||||
[attr.aria-label]="badge(folder) + ' unread'">{{ badge(folder) }}</span>
|
||||
}
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<div class="flex items-center justify-between mt-5 mb-2 px-1">
|
||||
<h2 class="text-[11px] font-orbitron font-bold text-cyan-300 tracking-widest">MY FOLDERS</h2>
|
||||
<button type="button" class="text-slate-400 hover:text-cyan-300" matTooltip="New folder" aria-label="New folder"
|
||||
(click)="createFolder()"><mat-icon class="!text-xl">create_new_folder</mat-icon></button>
|
||||
</div>
|
||||
<ul class="space-y-1">
|
||||
@for (folder of ownFolders(); track folder.id) {
|
||||
<li class="flex items-center gap-1">
|
||||
<a [routerLink]="['/folder', folder.id]" routerLinkActive="!bg-pink-500/20 !text-pink-300 !border-pink-500/40"
|
||||
class="flex-grow flex items-center gap-3 px-3 py-1.5 rounded-lg border border-transparent text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-300 font-rajdhani font-semibold min-w-0"
|
||||
(click)="menuOpen.set(false)">
|
||||
<mat-icon class="!text-xl">folder</mat-icon>
|
||||
<span class="flex-grow truncate">{{ folder.name }}</span>
|
||||
@if (folder.unreadCount) {
|
||||
<span class="text-[11px] font-mono px-2 rounded-full bg-pink-500/25 text-pink-300">{{ folder.unreadCount }}</span>
|
||||
}
|
||||
</a>
|
||||
<jt-row-actions [actions]="folderActions" [subject]="folder.name" (action)="onFolderAction($event, folder)" />
|
||||
</li>
|
||||
} @empty {
|
||||
<li class="px-3 text-xs text-slate-500 font-mono">No folders yet</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<div class="border-t border-cyan-500/20 mt-5 pt-3 space-y-1">
|
||||
@for (link of links; track link.path) {
|
||||
<a [routerLink]="link.path" routerLinkActive="!text-pink-300"
|
||||
class="flex items-center gap-3 px-3 py-1.5 rounded-lg text-slate-400 hover:text-cyan-300 font-rajdhani font-semibold"
|
||||
(click)="menuOpen.set(false)">
|
||||
<mat-icon class="!text-xl">{{ link.icon }}</mat-icon>{{ link.label }}
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (state.profile(); as p) {
|
||||
<div class="mt-4 px-1 text-[11px] font-mono text-slate-400">
|
||||
<div class="flex justify-between mb-1"><span>Storage</span><span class="text-cyan-300">{{ used() }}</span></div>
|
||||
<div class="h-1.5 rounded-full bg-slate-800 overflow-hidden" role="progressbar" aria-label="Storage used"
|
||||
[attr.aria-valuenow]="usedPercent()" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="h-full bg-gradient-to-r from-cyan-400 to-pink-500" [style.width.%]="usedPercent()"></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</nav>
|
||||
|
||||
<main class="min-w-0" id="main">
|
||||
<router-outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ShellComponent {
|
||||
readonly auth = inject(AuthService);
|
||||
readonly state = inject(MailStateService);
|
||||
readonly theme = inject(ThemeService);
|
||||
private api = inject(ApiService);
|
||||
private dialogs = inject(DialogService);
|
||||
private toasts = inject(ToastService);
|
||||
private router = inject(Router);
|
||||
|
||||
readonly themes = THEMES;
|
||||
readonly menuOpen = signal(false);
|
||||
query = '';
|
||||
|
||||
readonly links = [
|
||||
{ path: '/contacts', label: 'Contacts', icon: 'contacts' },
|
||||
{ path: '/blocked', label: 'Blocked senders', icon: 'block' },
|
||||
{ path: '/settings', label: 'Settings', icon: 'settings' }
|
||||
];
|
||||
|
||||
readonly folderActions: RowAction[] = [
|
||||
{ value: 'rename', label: 'Rename', icon: 'drive_file_rename_outline' },
|
||||
{ value: 'delete', label: 'Delete folder', icon: 'delete', danger: true }
|
||||
];
|
||||
|
||||
readonly systemFolders = computed(() => this.state.folders().filter(f => f.system));
|
||||
readonly ownFolders = computed(() => this.state.folders().filter(f => !f.system));
|
||||
readonly used = computed(() => {
|
||||
const p = this.state.profile();
|
||||
return p ? `${formatBytes(p.usedBytes)} / ${formatBytes(p.quotaBytes)}` : '';
|
||||
});
|
||||
readonly usedPercent = computed(() => {
|
||||
const p = this.state.profile();
|
||||
return p && p.quotaBytes ? Math.min(100, Math.round(p.usedBytes / p.quotaBytes * 100)) : 0;
|
||||
});
|
||||
|
||||
label = folderLabel;
|
||||
icon = folderIcon;
|
||||
|
||||
constructor() {
|
||||
this.state.refreshFolders();
|
||||
this.state.refreshProfile();
|
||||
const timer = setInterval(() => this.state.refreshFolders(), 30000);
|
||||
inject(DestroyRef).onDestroy(() => clearInterval(timer));
|
||||
this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
|
||||
const q = this.router.parseUrl(this.router.url).queryParams['q'];
|
||||
this.query = typeof q === 'string' ? q : '';
|
||||
});
|
||||
}
|
||||
|
||||
/** Drafts: how many; Sent, Trash: nothing; others: unread. */
|
||||
badge(folder: Folder): number {
|
||||
if (folder.name === 'Drafts') return folder.messageCount;
|
||||
if (folder.name === 'Sent' || folder.name === 'Trash') return 0;
|
||||
return folder.unreadCount;
|
||||
}
|
||||
|
||||
search(): void {
|
||||
const match = this.router.url.match(/^\/folder\/(\d+)/);
|
||||
const folderId = match ? Number(match[1]) : this.state.inbox()?.id;
|
||||
if (!folderId) return;
|
||||
const q = this.query.trim();
|
||||
this.router.navigate(['/folder', folderId], { queryParams: q ? { q } : {} });
|
||||
}
|
||||
|
||||
createFolder(): void {
|
||||
this.dialogs.prompt('New folder', 'Folder name', '', 'Create').subscribe(name => {
|
||||
if (!name) return;
|
||||
this.api.createFolder(name).subscribe({
|
||||
next: folder => {
|
||||
this.state.refreshFolders();
|
||||
this.toasts.ok(`Folder "${folder.name}" created`);
|
||||
this.router.navigate(['/folder', folder.id]);
|
||||
},
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onFolderAction(action: string, folder: Folder): void {
|
||||
if (action === 'rename') {
|
||||
this.dialogs.prompt('Rename folder', 'Folder name', folder.name, 'Rename').subscribe(name => {
|
||||
if (!name || name === folder.name) return;
|
||||
this.api.renameFolder(folder.id, name).subscribe({
|
||||
next: () => { this.state.refreshFolders(); this.toasts.ok('Folder renamed'); },
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
});
|
||||
} else if (action === 'delete') {
|
||||
this.dialogs.confirm(`Delete "${folder.name}"?`, 'Its messages go to the Trash.', 'Delete', true).subscribe(ok => {
|
||||
if (ok === null) return;
|
||||
this.api.deleteFolder(folder.id).subscribe({
|
||||
next: () => {
|
||||
this.state.refreshFolders();
|
||||
this.toasts.ok('Folder deleted');
|
||||
if (this.router.url.startsWith(`/folder/${folder.id}`)) this.router.navigate(['/']);
|
||||
},
|
||||
error: e => this.toasts.error(errorText(e))
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
logout(): void {
|
||||
this.state.reset();
|
||||
this.auth.logout();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user