-
+
update(i, { oauthEndSessionUrl: e.target.value })}
placeholder="https://auth.example.com/logout"
- className="h-8 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+ className={fieldClass}
/>
Where signing out sends the browser to end the provider's session, instead of the end_session_endpoint from discovery. Set it for providers that advertise none, such as Stalwart. Must be https.
diff --git a/app/(main)/admin/_pages/auth.tsx b/app/(main)/admin/_pages/auth.tsx
new file mode 100644
index 000000000..219a801c3
--- /dev/null
+++ b/app/(main)/admin/_pages/auth.tsx
@@ -0,0 +1,324 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Loader2, Sparkles } from '@/components/icons';
+import { apiFetch } from '@/lib/browser-navigation';
+import { adminPageDef } from '@/lib/admin/admin-nav';
+import { useAdminUnsavedChanges } from '@/stores/admin-unsaved-store';
+import { DEFAULT_OAUTH_SCOPES } from '@/lib/oauth/scopes';
+import { SettingsSection, SettingItem, SectionNav } from '@/components/settings/settings-section';
+import { Button } from '@/components/ui/button';
+import { AdminPageHeader } from '@/components/admin/page-header';
+import { AdminSaveBar } from '@/components/admin/save-bar';
+import { Flash, useFlash } from '@/components/admin/flash-message';
+import { ConfigTextItem, ConfigToggleItem, ConfigSelectItem, inputClass } from '@/components/admin/config-items';
+import { cn } from '@/lib/utils';
+
+interface ConfigEntry {
+ // Sensitive keys (sessionSecret, oauthClientSecret) come back with
+ // `value` omitted and `hasValue` set instead - the server never echoes
+ // the raw secret to the client.
+ value?: unknown;
+ source: 'admin' | 'env' | 'default';
+ hasValue?: boolean;
+}
+
+const PAGE = adminPageDef('auth');
+
+export function AuthPage() {
+ const [config, setConfig] = useState>({});
+ const [edits, setEdits] = useState>({});
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+ const [message, setMessage] = useFlash();
+ const [configReadOnly, setConfigReadOnly] = useState(false);
+
+ useEffect(() => {
+ fetchConfig();
+ apiFetch('/api/setup/status')
+ .then(res => (res.ok ? res.json() : null))
+ .then(data => setConfigReadOnly(data?.readOnly === true))
+ .catch(() => {});
+ }, []);
+
+ async function fetchConfig() {
+ setLoading(true);
+ const res = await apiFetch('/api/admin/config');
+ if (res.ok) setConfig(await res.json());
+ setLoading(false);
+ }
+
+ function handleChange(key: string, value: unknown) {
+ setEdits(prev => ({ ...prev, [key]: value }));
+ setMessage(null);
+ }
+
+ function currentValue(key: string): unknown {
+ if (key in edits) return edits[key];
+ return config[key]?.value;
+ }
+
+ async function handleSave() {
+ if (Object.keys(edits).length === 0) return;
+ setSaving(true);
+ setMessage(null);
+
+ const res = await apiFetch('/api/admin/config', {
+ method: 'PATCH',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(edits),
+ });
+
+ if (res.ok) {
+ setMessage({ type: 'success', text: 'Authentication settings saved.' });
+ setEdits({});
+ await fetchConfig();
+ } else {
+ const data = await res.json();
+ setMessage({ type: 'error', text: data.error || 'Failed to save' });
+ }
+ setSaving(false);
+ }
+
+ async function handleRevert(key: string) {
+ const res = await apiFetch('/api/admin/config', {
+ method: 'DELETE',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ key }),
+ });
+ if (res.ok) {
+ setEdits(prev => { const next = { ...prev }; delete next[key]; return next; });
+ await fetchConfig();
+ }
+ }
+
+ const [setupRunning, setSetupRunning] = useState(false);
+ const [setupOpen, setSetupOpen] = useState(false);
+ const [setupOrigin, setSetupOrigin] = useState('');
+ const [setupIssuer, setSetupIssuer] = useState('');
+ const [setupOauthOnly, setSetupOauthOnly] = useState(false);
+
+ function openSetupDialog() {
+ if (typeof window === 'undefined') return;
+ const origin = window.location.origin;
+ const jmapUrl = (currentValue('jmapServerUrl') as string | undefined)?.replace(/\/+$/, '') || '';
+ setSetupOrigin(origin);
+ setSetupIssuer(jmapUrl || origin);
+ setSetupOauthOnly(currentValue('oauthOnly') === true);
+ setSetupOpen(true);
+ }
+
+ async function handleAutoSetup() {
+ setSetupRunning(true);
+ setMessage(null);
+ try {
+ const res = await apiFetch('/api/admin/oauth/setup', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ origin: setupOrigin.trim().replace(/\/+$/, ''),
+ issuerUrl: setupIssuer.trim().replace(/\/+$/, ''),
+ oauthOnly: setupOauthOnly,
+ }),
+ });
+ const data = await res.json();
+ if (res.ok) {
+ setMessage({
+ type: 'success',
+ text: `OAuth client ${data.action} on Stalwart (${data.issuerUrl}). ${data.redirectUriCount} redirect URI(s) registered for ${data.origin}.`,
+ });
+ setEdits({});
+ setSetupOpen(false);
+ await fetchConfig();
+ } else {
+ const detail = data.detail ? ` (${typeof data.detail === 'string' ? data.detail : JSON.stringify(data.detail).slice(0, 200)})` : '';
+ setMessage({ type: 'error', text: (data.error || 'Setup failed') + detail });
+ }
+ } catch (err) {
+ setMessage({ type: 'error', text: err instanceof Error ? err.message : 'Setup failed' });
+ } finally {
+ setSetupRunning(false);
+ }
+ }
+
+ const setupOriginValid = /^https?:\/\/[^/]+$/.test(setupOrigin.trim().replace(/\/+$/, ''));
+ const setupIssuerValid = /^https?:\/\/[^/]+$/.test(setupIssuer.trim().replace(/\/+$/, ''));
+
+ const hasEdits = Object.keys(edits).length > 0;
+
+ useAdminUnsavedChanges('auth', hasEdits);
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+
setMessage(null)} />
+
+ {setupOpen && (
+ { if (e.target === e.currentTarget && !setupRunning) setSetupOpen(false); }}
+ >
+
+
+
Auto-configure OAuth
+
+ Verify the URLs below before continuing. The webmail and Stalwart can live on different domains.
+
+
+
+
+
+
setSetupOrigin(e.target.value)}
+ disabled={setupRunning}
+ placeholder="https://webmail.example.com"
+ className={cn(inputClass, 'w-full')}
+ />
+
+ Used to register redirect URIs (one per locale: {setupOrigin.trim().replace(/\/+$/, '') || 'https://…'}/<locale>/auth/callback) on Stalwart.
+
+ {!setupOriginValid && setupOrigin.length > 0 && (
+
Must be like https://host with no path.
+ )}
+
+
+
+
setSetupIssuer(e.target.value)}
+ disabled={setupRunning}
+ placeholder="https://mail.example.com"
+ className={cn(inputClass, 'w-full')}
+ />
+
+ Where Stalwart serves /.well-known/oauth-authorization-server. Saved as OAUTH_ISSUER_URL. Pre-filled from your JMAP server URL.
+
+ {!setupIssuerValid && setupIssuer.length > 0 && (
+
Must be like https://host with no path.
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {configReadOnly && (
+
+ Not available while the configuration is read-only (ADMIN_CONFIG_READONLY).
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {overrideBadge(field.key)}
+ handleChange(field.key, e.target.value)}
+ placeholder={placeholder}
+ aria-label={field.label}
+ autoComplete="off"
+ spellCheck={false}
+ className={cn(inputClass, 'w-full min-w-0 sm:w-72')}
+ />
+ {isOverriddenInScope(field.key) && handleRevert(field.key)} />}
+
+
+ );
+
+ return (
+
+
+
+
setMessage(null)} />
+
+
+
+
+
+
+
+ {domainEntries.map(entry => (
+
+ ))}
+ {!addingHost && (
+
+ )}
+
+ { setNewHostInput(e.target.value); setNewHostError(null); }}
+ onKeyDown={(e) => { if (e.key === 'Enter') void handleAddDomain(); }}
+ placeholder="mail.example.com or *.example.com"
+ aria-label="Hostname"
+ autoComplete="off"
+ spellCheck={false}
+ className={cn(inputClass, 'w-64')}
+ />
+
+
+ {newHostError && {newHostError}}
+
+ )}
+ {selectedHost ? (
+
+
+ Editing overrides for {selectedHost}.
+ Unset fields fall back to the Default values.
+ {wildcardScope && ' Uploads are disabled for wildcard hosts; enter a URL instead.'}
+
+
+
+ Editing the Default branding. Add a domain to override branding when the webmail is served on a specific hostname.
+
+ )}
+
+
+
+ {IMAGE_FIELDS.map(imageRow)}
+
+
+
+ {PWA_IMAGE_FIELDS.map(imageRow)}
+ {PWA_TEXT_FIELDS.map(field => textRow(field, field.placeholder))}
+ {PWA_COLOR_FIELDS.map(field => {
+ const value = currentValue(field.key) || field.defaultValue;
+ return (
+
+
+ {overrideBadge(field.key)}
+ handleChange(field.key, e.target.value)}
+ aria-label={`${field.label} picker`}
+ className="h-9 w-10 shrink-0 cursor-pointer rounded-md border border-input bg-background p-0.5"
+ title="Pick a color"
+ />
+ handleChange(field.key, e.target.value)}
+ placeholder={field.defaultValue}
+ aria-label={field.label}
+ autoComplete="off"
+ spellCheck={false}
+ className={cn(inputClass, 'w-full min-w-0 font-mono sm:w-32')}
+ />
+ {isOverriddenInScope(field.key) && handleRevert(field.key)} />}
+
+
+ );
+ })}
+
+
+
+ {TEXT_FIELDS.map(field => textRow(field, field.key.includes('Url') ? 'https://...' : 'Enter value'))}
+
+
+
+ {badge}
+ onChange(e.target.value)}
+ placeholder={placeholder}
+ aria-label={label}
+ autoComplete="off"
+ spellCheck={false}
+ className={cn(inputClass, 'w-full min-w-0 sm:w-64')}
+ />
+ {
+ const file = e.target.files?.[0];
+ if (file) onUpload(file);
+ e.target.value = '';
+ }}
+ />
+
+ {uploaded && (
+
+ )}
+ {overridden && !uploaded && }
+
+ {value && (
+
+
+
+
})
{ (e.target as HTMLImageElement).style.display = 'none'; }}
+ />
+
+
+ )}
+
+
+
+
+ {warnings.length > 0 && (
+
+ {warnings.map((msg, i) => (
+
+ ))}
+
+ )}
+
+
+
+ 0 ? `${pendingApprovals} awaiting approval` : undefined}
+ subTone="warning"
+ />
+
+
+
+
+
+
+ {config?.appName || '-'}
+
+
+ {jmapHostname}
+
+
+
+ {status?.lastLogin ? new Date(status.lastLogin).toLocaleString() : 'Never'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {recentActivity.length === 0 ? (
+ No activity recorded yet
+ ) : (
+
+ {recentActivity.map((entry, i) => (
+ {entry.action}}
+ description={formatDetail(entry.detail) || undefined}
+ meta={<>{entry.ip} · {new Date(entry.ts).toLocaleString()}}
+ />
+ ))}
+
+ )}
+
+ All entries
+
+
+
+
{label}
+ {value}
+ {sub && {sub}
}
+
+ );
+ const className = 'block min-w-0 rounded-lg border border-border p-4';
+ if (href) {
+ return (
+
+ {body}
+
+ );
+ }
+ return {body}
;
+}
+
+function OnOff({ on }: { on: boolean }) {
+ return {on ? 'On' : 'Off'};
+}
+
+function formatDetail(detail: Record): string {
+ if (!detail || Object.keys(detail).length === 0) return '';
+ if (detail.key) return `${detail.key}: ${detail.old} → ${detail.new}`;
+ if (detail.reason) return String(detail.reason);
+ if (detail.changes && Array.isArray(detail.changes)) return `${detail.changes.length} setting(s) changed`;
+ return JSON.stringify(detail).slice(0, 80);
+}
diff --git a/app/(main)/admin/_pages/extension-detail.tsx b/app/(main)/admin/_pages/extension-detail.tsx
new file mode 100644
index 000000000..51d9d8e2b
--- /dev/null
+++ b/app/(main)/admin/_pages/extension-detail.tsx
@@ -0,0 +1,494 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Puzzle, SwatchBook, Loader2, Eye, EyeOff, Lock, RotateCcw, Trash2, Shield, ShieldAlert, Store, Upload } from '@/components/icons';
+import { apiFetch } from '@/lib/browser-navigation';
+import { adminPath } from '@/lib/admin/admin-nav';
+import { HIGH_RISK_PERMISSIONS } from '@/lib/plugin-sandbox/permission-text';
+import { useAdminUnsavedChanges } from '@/stores/admin-unsaved-store';
+import { navigateAdmin } from '@/hooks/use-admin-navigation';
+import { usePluginSlotOffers } from '@/hooks/use-plugin-slot-offers';
+import { PluginIframeSlot } from '@/components/plugins/plugin-iframe-slot';
+import { SettingsSection, SettingItem, ToggleSwitch } from '@/components/settings/settings-section';
+import { Button } from '@/components/ui/button';
+import { AdminPageHeader } from '@/components/admin/page-header';
+import { AdminLink } from '@/components/admin/admin-link';
+import { AdminSaveBar } from '@/components/admin/save-bar';
+import { Badge } from '@/components/admin/badge';
+import { Flash, useFlash } from '@/components/admin/flash-message';
+import { inputClass } from '@/components/admin/config-items';
+import { ExtensionIcon } from '@/components/admin/extension-icon';
+import { cn } from '@/lib/utils';
+import { useExtensionIcons } from './use-extension-icons';
+
+export interface ConfigField {
+ type: 'string' | 'secret' | 'boolean' | 'number' | 'select';
+ label: string;
+ description?: string;
+ required?: boolean;
+ default?: unknown;
+ placeholder?: string;
+ options?: { label: string; value: string }[];
+}
+
+/** A plugin or theme as /api/admin/plugins and /api/admin/themes list it. */
+export interface ExtensionEntry {
+ id: string;
+ name: string;
+ version: string;
+ author: string;
+ description: string;
+ /** Plugins: hook, ui-extension, ... */
+ type?: string;
+ /** Themes: the colour modes it ships. */
+ variants?: string[];
+ enabled: boolean;
+ forceEnabled?: boolean;
+ permissions?: string[];
+ installedAt: string;
+ updatedAt: string;
+ source?: { kind: 'marketplace'; slug: string; directoryUrl: string } | { kind: 'upload' };
+ /** Versions kept on this server for a rollback, most recently replaced first. */
+ previousVersions?: string[];
+ /** Loaded from the dev plugins directory rather than installed. */
+ dev?: boolean;
+ configSchema?: Record;
+}
+
+type Kind = 'plugin' | 'theme';
+
+const KIND_LABEL: Record = {
+ plugin: { one: 'plugin', many: 'Plugins', endpoint: '/api/admin/plugins' },
+ theme: { one: 'theme', many: 'Themes', endpoint: '/api/admin/themes' },
+};
+
+interface Props {
+ kind: Kind;
+ id: string;
+}
+
+/**
+ * One installed plugin or theme: its settings first, then whether users
+ * can turn it off, what it may do, and the versions kept for a rollback.
+ */
+export function ExtensionDetailPage({ kind, id }: Props) {
+ const words = KIND_LABEL[kind];
+ const listHref = adminPath(kind === 'plugin' ? 'plugins' : 'themes');
+ const [entry, setEntry] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [config, setConfig] = useState>({});
+ const [formValues, setFormValues] = useState>({});
+ const [revealSecrets, setRevealSecrets] = useState>({});
+ const [saving, setSaving] = useState(false);
+ const [busy, setBusy] = useState(null);
+ const [message, setMessage] = useFlash();
+ const iconFor = useExtensionIcons();
+
+ const load = useCallback(async () => {
+ const [listRes, configRes] = await Promise.all([
+ apiFetch(words.endpoint),
+ kind === 'plugin' ? apiFetch(`/api/admin/plugins/${encodeURIComponent(id)}/config`) : Promise.resolve(null),
+ ]);
+ if (listRes.ok) {
+ const entries: ExtensionEntry[] = await listRes.json();
+ setEntry(entries.find((e) => e.id === id) ?? null);
+ }
+ if (configRes?.ok) setConfig(await configRes.json());
+ }, [id, kind, words.endpoint]);
+
+ useEffect(() => {
+ let cancelled = false;
+ setLoading(true);
+ load().finally(() => { if (!cancelled) setLoading(false); });
+ return () => { cancelled = true; };
+ }, [load]);
+
+ const schema = entry?.configSchema;
+ const hasSchema = !!schema && Object.keys(schema).length > 0;
+
+ const savedValues = useMemo(() => {
+ const initial: Record = {};
+ if (!schema) return initial;
+ for (const [key, field] of Object.entries(schema)) {
+ const stored = config[key];
+ if (stored !== undefined && stored !== null) initial[key] = String(stored);
+ else if (field.default !== undefined) initial[key] = String(field.default);
+ else initial[key] = '';
+ }
+ return initial;
+ }, [schema, config]);
+
+ useEffect(() => {
+ if (!schema) return;
+ setFormValues(savedValues);
+ }, [schema, savedValues]);
+
+ const dirty = Object.keys(savedValues).some((key) => (formValues[key] ?? '') !== savedValues[key]);
+ useAdminUnsavedChanges(`${kind}-config`, dirty);
+
+ async function saveConfig() {
+ if (!schema) return;
+ for (const [key, field] of Object.entries(schema)) {
+ if (field.required && !formValues[key]?.trim()) {
+ setMessage({ type: 'error', text: `"${field.label}" is required` });
+ return;
+ }
+ }
+ setSaving(true);
+ setMessage(null);
+ try {
+ let firstError: string | null = null;
+ let failed = false;
+ const noteError = async (res: Response) => {
+ failed = true;
+ if (firstError) return;
+ const data = await res.json().catch(() => null);
+ if (typeof data?.error === 'string') firstError = data.error;
+ };
+ const endpoint = `/api/admin/plugins/${encodeURIComponent(id)}/config`;
+ for (const [key, field] of Object.entries(schema)) {
+ const newVal = formValues[key] ?? '';
+ const oldVal = config[key] !== undefined ? String(config[key]) : '';
+ if (newVal === oldVal) continue;
+ if (field.type === 'secret' && !newVal && config[key]) continue;
+
+ if (!newVal && !field.required) {
+ const res = await apiFetch(endpoint, {
+ method: 'DELETE',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ key }),
+ });
+ if (res.ok) setConfig((prev) => { const next = { ...prev }; delete next[key]; return next; });
+ else await noteError(res);
+ continue;
+ }
+
+ let value: unknown = newVal;
+ if (field.type === 'boolean') value = newVal === 'true';
+ else if (field.type === 'number') value = Number(newVal);
+ const res = await apiFetch(endpoint, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ key, value }),
+ });
+ if (res.ok) setConfig((prev) => ({ ...prev, [key]: value }));
+ else await noteError(res);
+ }
+ setMessage(failed
+ ? { type: 'error', text: firstError ?? 'Some settings could not be saved' }
+ : { type: 'success', text: 'Settings saved' });
+ } catch {
+ setMessage({ type: 'error', text: 'Could not save the settings' });
+ } finally {
+ setSaving(false);
+ }
+ }
+
+ async function patch(body: Record, what: string): Promise {
+ setBusy(what);
+ setMessage(null);
+ try {
+ const res = await apiFetch(words.endpoint, {
+ method: 'PATCH',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ id, ...body }),
+ });
+ if (res.ok) return true;
+ const data = await res.json().catch(() => ({}));
+ setMessage({ type: 'error', text: data.error || `Could not change the ${words.one}` });
+ return false;
+ } finally {
+ setBusy(null);
+ }
+ }
+
+ async function setEnabled(enabled: boolean) {
+ if (await patch({ enabled }, 'enabled')) setEntry((prev) => (prev ? { ...prev, enabled } : prev));
+ }
+
+ async function setForced(forceEnabled: boolean) {
+ const body: Record = { forceEnabled };
+ if (forceEnabled) body.enabled = true;
+ if (await patch(body, 'forced')) {
+ setEntry((prev) => (prev ? { ...prev, forceEnabled, ...(forceEnabled ? { enabled: true } : {}) } : prev));
+ }
+ }
+
+ async function rollback(version: string) {
+ if (!entry) return;
+ if (!confirm(`Put v${version} of "${entry.name}" back in place of v${entry.version}? The copy kept on this server is used.`)) return;
+ setBusy(`rollback:${version}`);
+ setMessage(null);
+ try {
+ const res = await apiFetch(`/api/admin/extensions/${kind}/${encodeURIComponent(id)}/rollback`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ version }),
+ });
+ const data = await res.json().catch(() => ({}));
+ if (res.ok) {
+ setMessage({ type: 'success', text: `"${entry.name}" rolled back to v${version}` });
+ await load();
+ } else {
+ setMessage({ type: 'error', text: data.error || 'Rollback failed' });
+ }
+ } finally {
+ setBusy(null);
+ }
+ }
+
+ async function remove() {
+ if (!entry) return;
+ if (!confirm(`Remove "${entry.name}" for every user? Its kept versions are removed too; this cannot be undone.`)) return;
+ setBusy('remove');
+ setMessage(null);
+ const res = await apiFetch(words.endpoint, {
+ method: 'DELETE',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ id }),
+ });
+ if (res.ok) {
+ navigateAdmin(listHref);
+ return;
+ }
+ const data = await res.json().catch(() => ({}));
+ setMessage({ type: 'error', text: data.error || 'Could not remove it' });
+ setBusy(null);
+ }
+
+ const back = { href: listHref, label: words.many };
+ const Icon = kind === 'plugin' ? Puzzle : SwatchBook;
+
+ if (loading && !entry) {
+ return (
+
+
Loading} />
+
+ Loading
+
+
+
Nothing is installed under the id {id}.} />
+ {entry.description}
}
+
+ setMessage(null)} />
+
+
+
+
+ void setForced(v)} />
+
+
+ {entry.source?.kind === 'marketplace' ? (
+
+ Open in marketplace
+
+ ) : (
+ Upload
+ )}
+
+
+
+ {kind === 'plugin' && (
+
+ {perms.length > 0 && (
+
+ {perms.map((perm) => {
+ const risky = HIGH_RISK_PERMISSIONS.has(perm);
+ return (
+ -
+ {risky
+ ?
+ : }
+
{perm}
+ {risky && High risk}
+
+ );
+ })}
+
+ )}
+
+ )}
+
+
+
+ v{entry.version}
+
+ {previous.map((version) => (
+
+
+
+ ))}
+
+
+ {kind === 'plugin' &&
}
+
+ {/* The plugin's own settings come last: they are the long part. */}
+ {kind === 'plugin' && hasSchema && schema && (
+
+ {Object.entries(schema).map(([key, field]) => (
+
+ setRevealSecrets((prev) => ({ ...prev, [key]: !prev[key] }))}
+ onChange={(v) => setFormValues((prev) => ({ ...prev, [key]: v }))}
+ />
+
+ ))}
+
+ )}
+