diff --git a/frontend/src/app/core/mail-state.service.ts b/frontend/src/app/core/mail-state.service.ts index 779d557..d22f46c 100644 --- a/frontend/src/app/core/mail-state.service.ts +++ b/frontend/src/app/core/mail-state.service.ts @@ -1,6 +1,6 @@ import { Injectable, computed, inject, signal } from '@angular/core'; import { ApiService } from './api.service'; -import { Folder, Profile } from './models'; +import { Folder, MailboxEntry, Profile } from './models'; /** Folders and the profile, shared by the sidebar, the lists and the header; refreshed after changes. */ @Injectable({ providedIn: 'root' }) @@ -9,6 +9,8 @@ export class MailStateService { readonly folders = signal([]); readonly profile = signal(null); + /** own, shared and attached mailboxes of the login — sidebar combobox, Settings → MY MAILBOXES */ + readonly boxes = signal([]); readonly inbox = computed(() => this.folders().find(f => f.system && f.name === 'INBOX') ?? null); readonly unreadTotal = computed(() => this.inbox()?.unreadCount ?? 0); @@ -28,8 +30,13 @@ export class MailStateService { this.api.me().subscribe({ next: profile => this.profile.set(profile), error: () => {} }); } + refreshBoxes(): void { + this.api.myMailboxes().subscribe({ next: list => this.boxes.set(list), error: () => {} }); + } + reset(): void { this.folders.set([]); this.profile.set(null); + this.boxes.set([]); } } diff --git a/frontend/src/app/pages/settings/my-mailboxes.section.ts b/frontend/src/app/pages/settings/my-mailboxes.section.ts new file mode 100644 index 0000000..ed4226a --- /dev/null +++ b/frontend/src/app/pages/settings/my-mailboxes.section.ts @@ -0,0 +1,95 @@ +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatIconModule } from '@angular/material/icon'; +import { ApiService } from '../../core/api.service'; +import { AuthService } from '../../core/auth.service'; +import { MailStateService } from '../../core/mail-state.service'; +import { MailboxEntry, errorText } from '../../core/models'; +import { DialogService } from '../../ui/dialog.service'; +import { ToastService } from '../../ui/toast.service'; + +/** Settings → MY MAILBOXES (everyone): mailboxes in the sidebar combobox — add one by its password, remove an added one. */ +@Component({ + selector: 'app-my-mailboxes-section', + imports: [FormsModule, MatIconModule], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'block' }, + template: ` +
+

+ alternate_email MY MAILBOXES +

+
    + @for (b of state.boxes(); track b.email) { +
  • + {{ b.shared ? 'groups' : b.kind === 'OWN' ? 'person' : 'link' }} + {{ b.email }} + {{ b.kind === 'OWN' ? 'own' : b.shared ? 'shared' : 'added' }} + @if (b.kind !== 'OWN') { + + } +
    • + } +
+
+
+
+
+
+ +
+
+ ` +}) +export class MyMailboxesSection { + readonly state = inject(MailStateService); + private api = inject(ApiService); + private auth = inject(AuthService); + private dialogs = inject(DialogService); + private toasts = inject(ToastService); + + email = ''; + password = ''; + + constructor() { + this.state.refreshBoxes(); + } + + attach(): void { + const email = this.email.trim().toLowerCase(); + if (!email || !this.password) { this.toasts.error('Mailbox and its password'); return; } + this.api.attachMailbox(email, this.password).subscribe({ + next: b => { + this.email = this.password = ''; + this.toasts.ok(b.email + ' added — pick it in the MAILBOX list on the left'); + this.state.refreshBoxes(); + }, + error: e => this.toasts.error(errorText(e)) + }); + } + + leave(b: MailboxEntry): void { + this.dialogs.confirm(`Remove ${b.email}?`, b.shared + ? 'It disappears from your list. An administrator can give it back.' + : 'It disappears from your list. Add it again with its password.', 'Remove', true).subscribe(ok => { + if (ok === null) return; + this.api.leaveMailbox(b.email).subscribe({ + next: () => { + this.toasts.ok(b.email + ' removed'); + if (b.email === this.auth.email()) { + // removed the one we are in — back to the own mailbox + this.api.mailboxSession(this.state.boxes().find(x => x.kind === 'OWN')?.email ?? '').subscribe({ + next: session => { this.state.reset(); this.auth.switchTo(session); location.assign('/'); }, + error: () => location.assign('/') + }); + return; + } + this.state.refreshBoxes(); + }, + error: e => this.toasts.error(errorText(e)) + }); + }); + } +} diff --git a/frontend/src/app/pages/settings/settings.page.ts b/frontend/src/app/pages/settings/settings.page.ts index 4a73675..2c999da 100644 --- a/frontend/src/app/pages/settings/settings.page.ts +++ b/frontend/src/app/pages/settings/settings.page.ts @@ -9,11 +9,12 @@ import { THEMES, ThemeService } from '../../ui/theme.service'; import { ToastService } from '../../ui/toast.service'; import { MailboxesSection } from './mailboxes.section'; import { ListsSection } from './lists.section'; +import { MyMailboxesSection } from './my-mailboxes.section'; /** Profile name, password, storage, look. */ @Component({ selector: 'app-settings', - imports: [DatePipe, FormsModule, MatIconModule, MailboxesSection, ListsSection], + imports: [DatePipe, FormsModule, MatIconModule, MailboxesSection, ListsSection, MyMailboxesSection], changeDetection: ChangeDetectionStrategy.OnPush, template: `
@@ -93,7 +94,7 @@ import { ListsSection } from './lists.section';
@for (t of themes; track t.value) { }
@@ -112,6 +113,8 @@ import { ListsSection } from './lists.section';
+ + @if (state.profile()?.admin) { diff --git a/frontend/src/app/pages/shell/shell.component.ts b/frontend/src/app/pages/shell/shell.component.ts index 858e944..e46d81c 100644 --- a/frontend/src/app/pages/shell/shell.component.ts +++ b/frontend/src/app/pages/shell/shell.component.ts @@ -81,43 +81,15 @@ import { ToastService } from '../../ui/toast.service';