Settings › Security › Hardening: the legacy mail protocols switch
The screen for inbuxa:ProtocolPolicy, the server-wide switch that closes IMAP, POP3 and ManageSieve (legacy-protocols spec). Reached as CustomComponent/LegacyProtocols, which the server's schema places under Settings › Security; a server without that link never shows it. - The selector lists every mail protocol, with what the switch does to each and on which ports. SMTP and JMAP are shown locked, from the server's lockedProtocols rather than a list carried here, so unlocking later needs no admin release (LP-21). - The statement is shown in full before the switch moves and while it is off, with the listeners that close by name and port, and the note that firewall rules and port-forwards are the operator's to reconcile (LP-16, LP-20). - Turning it off takes the typed phrase "turn off legacy mail", matched exactly. Turning it back on is one click (LP-17). - Listeners that could not be reopened stay listed, with a Try again (LP-5). - A banner on the Security settings and the dashboard while it is off (LP-18). It stays silent on a server without the switch. Visible to whoever may see listeners, changeable by whoever may update them, matching the permissions the server checks. Not here yet: the impact panel (LP-15), which needs the server to record last use per protocol, and the tenant switch (LP-9 to LP-14).
This commit is contained in:
@@ -0,0 +1,385 @@
|
||||
/*
|
||||
* SPDX-FileCopyrightText: 2026 Coffey Labs
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
/**
|
||||
* INBUXA: Settings › Security › Hardening, the server-wide legacy mail
|
||||
* protocols switch (legacy-protocols spec, LP-16, LP-17, LP-20, LP-21).
|
||||
*
|
||||
* Nobody should turn this on by accident or without understanding it, so the
|
||||
* statement is shown in full before the switch moves, and turning it on takes
|
||||
* a typed phrase. Turning it back on is one click: undoing a restriction must
|
||||
* never be the hard part.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { AlertTriangle, Loader2, Lock, RotateCcw, ShieldCheck, ShieldOff } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { LoadingFallback } from '@/components/common/LoadingFallback';
|
||||
import { useAccountStore } from '@/stores/accountStore';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
CONFIRM_PHRASE,
|
||||
describeListener,
|
||||
fetchProtocolPolicy,
|
||||
phraseMatches,
|
||||
PolicyUnavailable,
|
||||
protocolRows,
|
||||
updateProtocolPolicy,
|
||||
type PolicyListener,
|
||||
type ProtocolPolicy,
|
||||
type ProtocolRow,
|
||||
} from './protocolPolicy';
|
||||
|
||||
type Load = { kind: 'loading' } | { kind: 'ready'; policy: ProtocolPolicy } | { kind: 'error'; message: string };
|
||||
|
||||
export function LegacyProtocolsPage() {
|
||||
const { t } = useTranslation();
|
||||
const canUpdate = useAccountStore((s) => s.hasObjectPermission('sysNetworkListener', 'Update'));
|
||||
const [load, setLoad] = useState<Load>({ kind: 'loading' });
|
||||
const [confirming, setConfirming] = useState(false);
|
||||
const [typed, setTyped] = useState('');
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const loaded = useCallback(
|
||||
(fetching: Promise<ProtocolPolicy>, signal?: AbortSignal) =>
|
||||
fetching
|
||||
.then((policy) => {
|
||||
if (!signal?.aborted) setLoad({ kind: 'ready', policy });
|
||||
})
|
||||
.catch((e: unknown) => {
|
||||
if (signal?.aborted) return;
|
||||
setLoad({
|
||||
kind: 'error',
|
||||
message:
|
||||
e instanceof PolicyUnavailable
|
||||
? t('legacyProtocols.unavailable', 'This server does not offer the legacy protocols switch.')
|
||||
: e instanceof Error
|
||||
? e.message
|
||||
: String(e),
|
||||
});
|
||||
}),
|
||||
[t],
|
||||
);
|
||||
const refresh = useCallback(() => loaded(fetchProtocolPolicy()), [loaded]);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
void loaded(fetchProtocolPolicy(controller.signal), controller.signal);
|
||||
return () => controller.abort();
|
||||
}, [loaded]);
|
||||
|
||||
const turn = useCallback(
|
||||
async (legacyProtocols: 'enabled' | 'disabled') => {
|
||||
setBusy(true);
|
||||
try {
|
||||
// Only legacyProtocols is sent. The server may still report closeSubmission
|
||||
// overruled by the SMTP lock (LP-21), which the selector already shows.
|
||||
await updateProtocolPolicy({ legacyProtocols });
|
||||
setConfirming(false);
|
||||
setTyped('');
|
||||
await refresh();
|
||||
} catch (e) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: t('legacyProtocols.failed', 'The switch did not change'),
|
||||
description: e instanceof Error ? e.message : String(e),
|
||||
});
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
},
|
||||
[refresh, t],
|
||||
);
|
||||
|
||||
if (load.kind === 'loading') return <LoadingFallback />;
|
||||
if (load.kind === 'error') {
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl rounded-lg border border-dashed p-12 text-center text-muted-foreground">
|
||||
{load.message}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { policy } = load;
|
||||
const off = policy.legacyProtocols === 'disabled';
|
||||
// What closes: what already did while the switch is off, what would otherwise.
|
||||
const listeners = off ? policy.savedListeners : policy.wouldClose;
|
||||
// Enabled with listeners still saved: some could not be put back (LP-5).
|
||||
const stranded = off ? [] : policy.savedListeners;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-3xl space-y-6">
|
||||
<header className="space-y-1">
|
||||
<h1 className="text-2xl font-semibold">{t('legacyProtocols.title', 'Legacy mail protocols')}</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{t(
|
||||
'legacyProtocols.subtitle',
|
||||
'Turn off IMAP, POP3, ManageSieve and sending from mail apps, so that only INBUXA webmail and JMAP apps can reach this server.',
|
||||
)}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<StatusCard policy={policy} off={off} busy={busy} canUpdate={canUpdate} onTurnOn={() => turn('enabled')} />
|
||||
|
||||
{stranded.length > 0 && (
|
||||
<div className="rounded-xl border border-destructive/40 bg-destructive/5 p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
|
||||
<div className="space-y-2">
|
||||
<p className="font-medium">
|
||||
{t('legacyProtocols.strandedTitle', 'Some listeners could not be reopened')}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t(
|
||||
'legacyProtocols.strandedBody',
|
||||
'Their ports may be taken by something else, or need a restart to bind. They are kept, and can be tried again:',
|
||||
)}{' '}
|
||||
{stranded.map(describeListener).join(', ')}
|
||||
</p>
|
||||
{canUpdate && (
|
||||
<Button size="sm" variant="outline" disabled={busy} onClick={() => turn('enabled')}>
|
||||
<RotateCcw className="mr-2 h-4 w-4" />
|
||||
{t('legacyProtocols.tryAgain', 'Try again')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ProtocolTable rows={protocolRows(policy, listeners)} off={off} />
|
||||
|
||||
{(off || confirming) && <Statement listeners={listeners} />}
|
||||
|
||||
{!off && canUpdate && !confirming && (
|
||||
<Button variant="destructive" onClick={() => setConfirming(true)}>
|
||||
<ShieldOff className="mr-2 h-4 w-4" />
|
||||
{t('legacyProtocols.turnOff', 'Turn off legacy protocols…')}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!off && confirming && (
|
||||
<form
|
||||
className="space-y-3 rounded-xl border p-4"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (phraseMatches(typed)) void turn('disabled');
|
||||
}}
|
||||
>
|
||||
<Label htmlFor="legacy-confirm">
|
||||
{t('legacyProtocols.typeToConfirm', 'To confirm, type')}{' '}
|
||||
<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-sm">{CONFIRM_PHRASE}</code>
|
||||
</Label>
|
||||
<Input
|
||||
id="legacy-confirm"
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
value={typed}
|
||||
onChange={(e) => setTyped(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" variant="destructive" disabled={busy || !phraseMatches(typed)}>
|
||||
{busy && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{t('legacyProtocols.confirm', 'Turn off legacy protocols')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
disabled={busy}
|
||||
onClick={() => {
|
||||
setConfirming(false);
|
||||
setTyped('');
|
||||
}}
|
||||
>
|
||||
{t('common.cancel', 'Cancel')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusCard({
|
||||
policy,
|
||||
off,
|
||||
busy,
|
||||
canUpdate,
|
||||
onTurnOn,
|
||||
}: {
|
||||
policy: ProtocolPolicy;
|
||||
off: boolean;
|
||||
busy: boolean;
|
||||
canUpdate: boolean;
|
||||
onTurnOn: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const Icon = off ? ShieldCheck : ShieldOff;
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col gap-4 rounded-xl border p-4 sm:flex-row sm:items-center sm:justify-between',
|
||||
off ? 'border-emerald-500/30 bg-emerald-500/5' : 'bg-card',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<Icon className={cn('mt-0.5 h-5 w-5 shrink-0', off ? 'text-emerald-600' : 'text-muted-foreground')} />
|
||||
<div>
|
||||
<p className="font-medium">
|
||||
{off
|
||||
? t('legacyProtocols.statusOff', 'Legacy mail protocols are off on this server.')
|
||||
: t('legacyProtocols.statusOn', 'Legacy mail protocols are on.')}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{off
|
||||
? t('legacyProtocols.statusOffBody', 'Only INBUXA webmail and JMAP apps can sign in.')
|
||||
: t('legacyProtocols.statusOnBody', 'Mail apps can use IMAP, POP3 and ManageSieve.')}
|
||||
{policy.changedAt !== null && (
|
||||
<>
|
||||
{' '}
|
||||
{t('legacyProtocols.changedAt', 'Last changed {{when}}.', {
|
||||
when: new Date(policy.changedAt).toLocaleString(),
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{off && canUpdate && (
|
||||
<Button variant="outline" disabled={busy} onClick={onTurnOn} className="shrink-0">
|
||||
{busy && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{t('legacyProtocols.turnOn', 'Turn legacy protocols back on')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProtocolTable({ rows, off }: { rows: ProtocolRow[]; off: boolean }) {
|
||||
const { t } = useTranslation();
|
||||
const stateText = (row: ProtocolRow) => {
|
||||
switch (row.state) {
|
||||
case 'locked':
|
||||
return t('legacyProtocols.rowLocked', 'Locked open');
|
||||
case 'refused':
|
||||
return t('legacyProtocols.rowRefused', 'Port open, sign-in refused');
|
||||
case 'closes':
|
||||
if (row.ports.length === 0) return t('legacyProtocols.rowNoListener', 'No listener');
|
||||
return off ? t('legacyProtocols.rowClosed', 'Closed') : t('legacyProtocols.rowWouldClose', 'Closes');
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/50 text-left text-muted-foreground">
|
||||
<tr>
|
||||
<th className="px-4 py-2 font-medium">{t('legacyProtocols.colProtocol', 'Protocol')}</th>
|
||||
<th className="px-4 py-2 font-medium">{t('legacyProtocols.colPorts', 'Ports')}</th>
|
||||
<th className="px-4 py-2 font-medium">
|
||||
{off ? t('legacyProtocols.colNow', 'Now') : t('legacyProtocols.colWhenOff', 'When turned off')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr key={row.key} className="border-t">
|
||||
<td className="px-4 py-2 font-medium">{row.label}</td>
|
||||
<td className="px-4 py-2 tabular-nums text-muted-foreground">
|
||||
{row.ports.length > 0 ? row.ports.join(', ') : '—'}
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span
|
||||
className={cn('inline-flex items-center gap-1.5', row.state === 'locked' && 'text-muted-foreground')}
|
||||
>
|
||||
{row.state === 'locked' && <Lock className="h-3.5 w-3.5" />}
|
||||
{stateText(row)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<p className="border-t bg-muted/30 px-4 py-2 text-xs text-muted-foreground">
|
||||
{t(
|
||||
'legacyProtocols.lockNote',
|
||||
'Incoming mail (SMTP) and INBUXA webmail (JMAP) are locked open: closing them would stop mail arriving and lock everyone out, including you.',
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The statement (LP-16), at server scope, with the firewall note (LP-20). */
|
||||
function Statement({ listeners }: { listeners: PolicyListener[] }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<section className="space-y-3 rounded-xl border border-amber-500/40 bg-amber-500/5 p-5 text-sm leading-relaxed">
|
||||
<p className="text-base font-semibold">
|
||||
{t('legacyProtocols.statementTitle', 'Only INBUXA webmail and JMAP apps will work.')}
|
||||
</p>
|
||||
<p>
|
||||
{t(
|
||||
'legacyProtocols.statementLead',
|
||||
'Legacy mail protocols (IMAP, POP3, ManageSieve and sending from mail apps) will be turned off for everyone on this server.',
|
||||
)}
|
||||
</p>
|
||||
<ul className="list-disc space-y-1 pl-5">
|
||||
<li>
|
||||
{t(
|
||||
'legacyProtocols.statementApps',
|
||||
'Phone and desktop mail apps will stop receiving and sending mail. That’s iPhone and iPad Mail, the Gmail and Outlook apps, Outlook, Thunderbird and Apple Mail. People will see sign-in errors in them.',
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{t(
|
||||
'legacyProtocols.statementFilters',
|
||||
'Filters managed from a mail app (ManageSieve) will stop working. Filters set in INBUXA webmail keep working.',
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{t(
|
||||
'legacyProtocols.statementUnaffected',
|
||||
'Incoming mail is not affected. Calendars and contacts are not affected.',
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{t(
|
||||
'legacyProtocols.statementWebmail',
|
||||
'People keep full access through INBUXA webmail, which can be installed as an app on phones and computers.',
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
{listeners.length > 0
|
||||
? t('legacyProtocols.statementPorts', 'The IMAP, POP3 and ManageSieve ports will close: {{list}}.', {
|
||||
list: listeners.map(describeListener).join(', '),
|
||||
})
|
||||
: t(
|
||||
'legacyProtocols.statementNoPorts',
|
||||
'No IMAP, POP3 or ManageSieve listeners are configured, so no ports will close.',
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{t(
|
||||
'legacyProtocols.statementSubmission',
|
||||
'Sending from mail apps (SMTP submission) will stop working, but its ports stay open: mail apps will be told they cannot sign in. Incoming mail (SMTP) and INBUXA webmail (JMAP) are not affected and cannot be turned off here.',
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{t('legacyProtocols.firewallLead', 'This does not change your firewall or port forwarding.')}</strong>{' '}
|
||||
{t(
|
||||
'legacyProtocols.firewallBody',
|
||||
'INBUXA stops answering on these ports; anything that still routes them to this server — firewall rules, NAT port-forwards, a load balancer or proxy — is yours to reconcile.',
|
||||
)}
|
||||
</p>
|
||||
<p>{t('legacyProtocols.statementUndo', 'You can turn legacy protocols back on at any time.')}</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user