mirror of
https://github.com/bulwarkmail/webmail.git
synced 2026-11-05 08:16:22 +00:00
Linus Rath
b082ce582e
Offline sat in the middle of Backup & reset, privacy settings were spread
over Reading, Composing and Message list, and the version card took room
from the page list in the sidebar's footer. The search matched letters
inside words ("lock" found Time format and Send Checks) and knew no other
words for a setting ("offline", "autoreply", "logout" found nothing).
- Offline is a page in the top group: Keep mail on this device, what is
kept, Remove everything from this device, and the Outbox as its own
section. Old `/settings/backup/offline` links and the offline notice
land there.
- Privacy holds remote images and trusted senders, read receipts, sender
pictures from the web, the desktop app's usage info and crash reports,
and a link to the push relay on Notifications. Reading, Composing and
Message list keep a link row; old links to those sections land on
Privacy.
- About is the last page and holds the version card; the footer keeps the
Advanced switch.
- The search matches whole words and word starts (substrings only in
Chinese, Japanese and Thai), and each row can carry synonyms in the
user's language. A page matches by its name and keywords or when one of
its rows has every word. Account gets a Sign out row so "logout" leads
somewhere.
- The index test now also fails when a page draws a section the index
doesn't know, and a new test fails on two indexed rows with the same
name. Tests that rendered remote content and sender pictures on Reading
and Message list render Privacy instead, since that's where the rows are.
76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
|
|
import { wipeWholeDevice } from '@/lib/offline/device-wipe';
|
|
import { unsentForWipe } from '@/lib/offline/offline-mode';
|
|
|
|
/** The question doesn't wait as long for the count as the wipe itself does. */
|
|
const QUESTION_WAIT_MS = 2_000;
|
|
|
|
/**
|
|
* "Remove everything from this device", for someone giving a computer away or
|
|
* selling it. It signs out, so the question says exactly what goes.
|
|
*/
|
|
export function WipeDeviceSection() {
|
|
const t = useTranslations('offlineWipe');
|
|
const [asking, setAsking] = useState(false);
|
|
// Null: the store couldn't say, which isn't the same as none.
|
|
const [unsent, setUnsent] = useState<number | null>(0);
|
|
const [wiping, setWiping] = useState(false);
|
|
|
|
const ask = async () => {
|
|
setUnsent(await unsentForWipe('all', QUESTION_WAIT_MS).catch(() => null));
|
|
setAsking(true);
|
|
};
|
|
|
|
const confirmed = () => {
|
|
setAsking(false);
|
|
setWiping(true);
|
|
void wipeWholeDevice('user').finally(() => setWiping(false));
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center justify-between gap-3 border-t border-border py-3" data-testid="wipe-device-section" data-search-label={t('settings_title')}>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium text-foreground">{t('settings_title')}</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{t('settings_description')}</p>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-destructive"
|
|
disabled={wiping}
|
|
onClick={() => { void ask(); }}
|
|
data-testid="wipe-device-button"
|
|
>
|
|
{wiping ? t('settings_wiping') : t('settings_button')}
|
|
</Button>
|
|
<ConfirmDialog
|
|
isOpen={asking}
|
|
onClose={() => setAsking(false)}
|
|
onConfirm={confirmed}
|
|
title={t('confirm_title')}
|
|
message={t('confirm_message')}
|
|
details={(
|
|
<ul className="list-disc space-y-1 ps-5 text-sm text-muted-foreground" data-testid="wipe-device-details">
|
|
<li>{t('confirm_mail')}</li>
|
|
{unsent === null && <li className="font-medium text-foreground">{t('confirm_unsent_unknown')}</li>}
|
|
{unsent !== null && unsent > 0 && <li className="font-medium text-foreground">{t('confirm_unsent', { count: unsent })}</li>}
|
|
<li>{t('confirm_keys')}</li>
|
|
<li>{t('confirm_plugins')}</li>
|
|
<li>{t('confirm_files')}</li>
|
|
<li>{t('confirm_templates')}</li>
|
|
<li>{t('confirm_accounts')}</li>
|
|
</ul>
|
|
)}
|
|
confirmText={t('confirm_button')}
|
|
variant="destructive"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|