452 lines
17 KiB
TypeScript
452 lines
17 KiB
TypeScript
|
import React, { useCallback, useState } from 'react';
|
||
|
|
|
||
|
|
import { useI18n } from '../../../application/i18n/I18nProvider';
|
||
|
|
import type { AppLockSystemUnlockStatus } from '../../../application/state/useAppLockState';
|
||
|
|
import {
|
||
|
|
APP_LOCK_TIMEOUT_OPTIONS_MINUTES,
|
||
|
|
type AppLockSettings,
|
||
|
|
type AppLockSettingsChangeError,
|
||
|
|
type AppLockTimeoutMinutes,
|
||
|
|
} from '../../../domain/appLock';
|
||
|
|
import { Button } from '../../ui/button';
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogContent,
|
||
|
|
DialogDescription,
|
||
|
|
DialogFooter,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
} from '../../ui/dialog';
|
||
|
|
import { Input } from '../../ui/input';
|
||
|
|
import { Label } from '../../ui/label';
|
||
|
|
import { Select, SettingCard, SettingHint, SettingRow, SectionHeader, Toggle } from '../settings-ui';
|
||
|
|
|
||
|
|
type AppLockDialogMode = 'setup' | 'change' | 'disable' | null;
|
||
|
|
|
||
|
|
interface AppLockSettingsSectionProps {
|
||
|
|
appLockSettings: AppLockSettings;
|
||
|
|
setAppLockTimeoutMinutes: (timeoutMinutes: AppLockTimeoutMinutes) => void;
|
||
|
|
requestAppLockDisable: (
|
||
|
|
currentPassword: string,
|
||
|
|
) => Promise<AppLockSettings | { ok: false; error: AppLockSettingsChangeError }>;
|
||
|
|
requestAppLockPasswordChange: (input: {
|
||
|
|
currentPassword?: string;
|
||
|
|
nextPassword: string;
|
||
|
|
}) => Promise<AppLockSettings | { ok: false; error: AppLockSettingsChangeError }>;
|
||
|
|
appLockSystemUnlockStatus?: AppLockSystemUnlockStatus;
|
||
|
|
setAppLockSystemUnlockEnabled?: (input: {
|
||
|
|
enabled: boolean;
|
||
|
|
currentPassword?: string;
|
||
|
|
autoPromptEnabled?: boolean;
|
||
|
|
}) => Promise<
|
||
|
|
AppLockSettings
|
||
|
|
| { ok: false; error: 'empty-current' | 'incorrect' | 'locked' | 'unsupported' | 'unavailable' | 'cancelled' | 'failed' }
|
||
|
|
>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const AppLockSettingsSection: React.FC<AppLockSettingsSectionProps> = ({
|
||
|
|
appLockSettings,
|
||
|
|
setAppLockTimeoutMinutes,
|
||
|
|
requestAppLockDisable,
|
||
|
|
requestAppLockPasswordChange,
|
||
|
|
appLockSystemUnlockStatus,
|
||
|
|
setAppLockSystemUnlockEnabled,
|
||
|
|
}) => {
|
||
|
|
const { t } = useI18n();
|
||
|
|
const [dialogMode, setDialogMode] = useState<AppLockDialogMode>(null);
|
||
|
|
const [currentPassword, setCurrentPassword] = useState('');
|
||
|
|
const [disablePassword, setDisablePassword] = useState('');
|
||
|
|
const [newPassword, setNewPassword] = useState('');
|
||
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
const [isDisabling, setIsDisabling] = useState(false);
|
||
|
|
const [isSavingPassword, setIsSavingPassword] = useState(false);
|
||
|
|
const [isSavingSystemUnlock, setIsSavingSystemUnlock] = useState(false);
|
||
|
|
|
||
|
|
const hasPassword = Boolean(appLockSettings.passwordVerifier);
|
||
|
|
const isDialogBusy = isDisabling || isSavingPassword;
|
||
|
|
const showSystemUnlock = Boolean(
|
||
|
|
hasPassword
|
||
|
|
&& appLockSystemUnlockStatus?.supported
|
||
|
|
&& appLockSystemUnlockStatus.label
|
||
|
|
&& (appLockSystemUnlockStatus.available || appLockSettings.systemUnlockEnabled),
|
||
|
|
);
|
||
|
|
const timeoutOptions = APP_LOCK_TIMEOUT_OPTIONS_MINUTES.map((minutes) => ({
|
||
|
|
value: String(minutes),
|
||
|
|
label: t(`settings.appLock.timeout.${minutes}`),
|
||
|
|
}));
|
||
|
|
|
||
|
|
const mapChangeError = useCallback((
|
||
|
|
changeError: AppLockSettingsChangeError | 'locked' | 'unsupported' | 'unavailable' | 'failed',
|
||
|
|
): string => {
|
||
|
|
switch (changeError) {
|
||
|
|
case 'empty-current':
|
||
|
|
return t('settings.appLock.validation.currentRequired');
|
||
|
|
case 'empty-next':
|
||
|
|
return t('settings.appLock.validation.newRequired');
|
||
|
|
case 'incorrect':
|
||
|
|
return t('settings.appLock.validation.incorrect');
|
||
|
|
case 'locked':
|
||
|
|
return t('settings.appLock.systemUnlock.locked');
|
||
|
|
case 'unsupported':
|
||
|
|
case 'unavailable':
|
||
|
|
case 'failed':
|
||
|
|
return t('settings.appLock.systemUnlock.unavailable');
|
||
|
|
}
|
||
|
|
}, [t]);
|
||
|
|
|
||
|
|
const resetDialog = useCallback(() => {
|
||
|
|
setDialogMode(null);
|
||
|
|
setCurrentPassword('');
|
||
|
|
setDisablePassword('');
|
||
|
|
setNewPassword('');
|
||
|
|
setConfirmPassword('');
|
||
|
|
setError(null);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const openDialog = useCallback((mode: Exclude<AppLockDialogMode, null>) => {
|
||
|
|
setError(null);
|
||
|
|
setDialogMode(mode);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleTimeoutChange = useCallback((value: string) => {
|
||
|
|
const timeoutMinutes = Number(value) as AppLockTimeoutMinutes;
|
||
|
|
if (!APP_LOCK_TIMEOUT_OPTIONS_MINUTES.includes(timeoutMinutes)) return;
|
||
|
|
setAppLockTimeoutMinutes(timeoutMinutes);
|
||
|
|
}, [setAppLockTimeoutMinutes]);
|
||
|
|
|
||
|
|
const handleDisable = useCallback(async () => {
|
||
|
|
setError(null);
|
||
|
|
setIsDisabling(true);
|
||
|
|
try {
|
||
|
|
const result = await requestAppLockDisable(disablePassword);
|
||
|
|
if ('ok' in result && result.ok === false) {
|
||
|
|
setError(mapChangeError(result.error));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
resetDialog();
|
||
|
|
} finally {
|
||
|
|
setIsDisabling(false);
|
||
|
|
}
|
||
|
|
}, [disablePassword, mapChangeError, requestAppLockDisable, resetDialog]);
|
||
|
|
|
||
|
|
const handleSavePassword = useCallback(async () => {
|
||
|
|
setError(null);
|
||
|
|
if (newPassword.length === 0) {
|
||
|
|
setError(t('settings.appLock.validation.newRequired'));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (confirmPassword.length === 0) {
|
||
|
|
setError(t('settings.appLock.validation.confirmRequired'));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (newPassword !== confirmPassword) {
|
||
|
|
setError(t('settings.appLock.validation.mismatch'));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
setIsSavingPassword(true);
|
||
|
|
try {
|
||
|
|
const result = await requestAppLockPasswordChange({
|
||
|
|
currentPassword: hasPassword ? currentPassword : undefined,
|
||
|
|
nextPassword: newPassword,
|
||
|
|
});
|
||
|
|
if ('ok' in result && result.ok === false) {
|
||
|
|
setError(mapChangeError(result.error));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
resetDialog();
|
||
|
|
} finally {
|
||
|
|
setIsSavingPassword(false);
|
||
|
|
}
|
||
|
|
}, [
|
||
|
|
confirmPassword,
|
||
|
|
currentPassword,
|
||
|
|
hasPassword,
|
||
|
|
mapChangeError,
|
||
|
|
newPassword,
|
||
|
|
requestAppLockPasswordChange,
|
||
|
|
resetDialog,
|
||
|
|
t,
|
||
|
|
]);
|
||
|
|
|
||
|
|
const handleSystemUnlockChange = useCallback(async (enabled: boolean) => {
|
||
|
|
if (!setAppLockSystemUnlockEnabled || !appLockSystemUnlockStatus?.label) return;
|
||
|
|
setError(null);
|
||
|
|
setIsSavingSystemUnlock(true);
|
||
|
|
try {
|
||
|
|
const result = await setAppLockSystemUnlockEnabled({
|
||
|
|
enabled,
|
||
|
|
autoPromptEnabled: enabled && appLockSettings.systemUnlockEnabled
|
||
|
|
? appLockSettings.systemUnlockAutoPromptEnabled
|
||
|
|
: false,
|
||
|
|
});
|
||
|
|
if ('ok' in result && result.ok === false) {
|
||
|
|
if (result.error === 'cancelled') return;
|
||
|
|
setError(mapChangeError(result.error));
|
||
|
|
}
|
||
|
|
} finally {
|
||
|
|
setIsSavingSystemUnlock(false);
|
||
|
|
}
|
||
|
|
}, [
|
||
|
|
appLockSettings.systemUnlockAutoPromptEnabled,
|
||
|
|
appLockSettings.systemUnlockEnabled,
|
||
|
|
appLockSystemUnlockStatus?.label,
|
||
|
|
mapChangeError,
|
||
|
|
setAppLockSystemUnlockEnabled,
|
||
|
|
]);
|
||
|
|
|
||
|
|
const handleAutoPromptChange = useCallback(async (autoPromptEnabled: boolean) => {
|
||
|
|
if (!setAppLockSystemUnlockEnabled || !appLockSystemUnlockStatus?.label) return;
|
||
|
|
if (!appLockSettings.systemUnlockEnabled) return;
|
||
|
|
setError(null);
|
||
|
|
setIsSavingSystemUnlock(true);
|
||
|
|
try {
|
||
|
|
const result = await setAppLockSystemUnlockEnabled({ enabled: true, autoPromptEnabled });
|
||
|
|
if ('ok' in result && result.ok === false) {
|
||
|
|
if (result.error === 'cancelled') return;
|
||
|
|
setError(mapChangeError(result.error));
|
||
|
|
}
|
||
|
|
} finally {
|
||
|
|
setIsSavingSystemUnlock(false);
|
||
|
|
}
|
||
|
|
}, [
|
||
|
|
appLockSettings.systemUnlockEnabled,
|
||
|
|
appLockSystemUnlockStatus?.label,
|
||
|
|
mapChangeError,
|
||
|
|
setAppLockSystemUnlockEnabled,
|
||
|
|
]);
|
||
|
|
|
||
|
|
const dialogTitle = dialogMode === 'disable'
|
||
|
|
? t('settings.appLock.disableTitle')
|
||
|
|
: dialogMode === 'change'
|
||
|
|
? t('settings.appLock.changePasswordTitle')
|
||
|
|
: t('settings.appLock.setupPasswordTitle');
|
||
|
|
const dialogDescription = dialogMode === 'disable'
|
||
|
|
? t('settings.appLock.disableDescription')
|
||
|
|
: dialogMode === 'change'
|
||
|
|
? t('settings.appLock.changePasswordDescription')
|
||
|
|
: t('settings.appLock.setupPasswordDescription');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<SectionHeader title={t('settings.appLock.title')} anchorId="system-app-lock" />
|
||
|
|
<SettingCard divided>
|
||
|
|
{!hasPassword ? (
|
||
|
|
<SettingRow
|
||
|
|
label={t('settings.appLock.setupTitle')}
|
||
|
|
description={t('settings.appLock.setupDescription')}
|
||
|
|
>
|
||
|
|
<Button type="button" size="sm" onClick={() => openDialog('setup')}>
|
||
|
|
{t('settings.appLock.savePassword')}
|
||
|
|
</Button>
|
||
|
|
</SettingRow>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<SettingRow
|
||
|
|
label={t('settings.appLock.manageTitle')}
|
||
|
|
description={appLockSettings.enabled
|
||
|
|
? t('settings.appLock.enabledStatus')
|
||
|
|
: t('settings.appLock.disabledStatus')}
|
||
|
|
>
|
||
|
|
<span className={appLockSettings.enabled
|
||
|
|
? 'text-xs font-medium text-emerald-600 dark:text-emerald-400'
|
||
|
|
: 'text-xs font-medium text-muted-foreground'}
|
||
|
|
>
|
||
|
|
{t(appLockSettings.enabled ? 'common.enabled' : 'common.disabled')}
|
||
|
|
</span>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
<SettingRow
|
||
|
|
label={t('settings.appLock.timeout')}
|
||
|
|
description={t('settings.appLock.timeoutDesc')}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={String(appLockSettings.timeoutMinutes)}
|
||
|
|
options={timeoutOptions}
|
||
|
|
onChange={handleTimeoutChange}
|
||
|
|
className="w-36"
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
{showSystemUnlock && appLockSystemUnlockStatus?.label && (
|
||
|
|
<>
|
||
|
|
<SettingRow
|
||
|
|
label={t('settings.appLock.systemUnlock.label').replace('{label}', appLockSystemUnlockStatus.label)}
|
||
|
|
description={appLockSystemUnlockStatus.available
|
||
|
|
? t('settings.appLock.systemUnlock.desc').replace('{label}', appLockSystemUnlockStatus.label)
|
||
|
|
: t('settings.appLock.systemUnlock.unavailableDesc').replace('{label}', appLockSystemUnlockStatus.label)}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={appLockSettings.systemUnlockEnabled}
|
||
|
|
disabled={
|
||
|
|
isSavingSystemUnlock
|
||
|
|
|| (!appLockSystemUnlockStatus.available && !appLockSettings.systemUnlockEnabled)
|
||
|
|
}
|
||
|
|
ariaLabel={t('settings.appLock.systemUnlock.label').replace('{label}', appLockSystemUnlockStatus.label)}
|
||
|
|
onChange={(enabled) => void handleSystemUnlockChange(enabled)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t('settings.appLock.systemUnlock.autoPrompt.label').replace('{label}', appLockSystemUnlockStatus.label)}
|
||
|
|
description={t('settings.appLock.systemUnlock.autoPrompt.desc').replace('{label}', appLockSystemUnlockStatus.label)}
|
||
|
|
>
|
||
|
|
<Toggle
|
||
|
|
checked={appLockSettings.systemUnlockAutoPromptEnabled}
|
||
|
|
disabled={
|
||
|
|
isSavingSystemUnlock
|
||
|
|
|| !appLockSettings.systemUnlockEnabled
|
||
|
|
|| !appLockSystemUnlockStatus.available
|
||
|
|
}
|
||
|
|
ariaLabel={t('settings.appLock.systemUnlock.autoPrompt.label').replace('{label}', appLockSystemUnlockStatus.label)}
|
||
|
|
onChange={(enabled) => void handleAutoPromptChange(enabled)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<SettingRow
|
||
|
|
label={t('settings.appLock.changePasswordTitle')}
|
||
|
|
description={t('settings.appLock.changePasswordDescription')}
|
||
|
|
>
|
||
|
|
<Button type="button" size="sm" variant="outline" onClick={() => openDialog('change')}>
|
||
|
|
{t('settings.appLock.replacePassword')}
|
||
|
|
</Button>
|
||
|
|
</SettingRow>
|
||
|
|
|
||
|
|
{appLockSettings.enabled && (
|
||
|
|
<SettingRow
|
||
|
|
label={t('settings.appLock.disableTitle')}
|
||
|
|
description={t('settings.appLock.disableDescription')}
|
||
|
|
>
|
||
|
|
<Button type="button" size="sm" variant="destructive" onClick={() => openDialog('disable')}>
|
||
|
|
{t('settings.appLock.disable')}
|
||
|
|
</Button>
|
||
|
|
</SettingRow>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</SettingCard>
|
||
|
|
<SettingHint>{t('settings.appLock.localOnlyHint')}</SettingHint>
|
||
|
|
{error && dialogMode === null && (
|
||
|
|
<p className="mt-2 text-xs text-destructive">{error}</p>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Dialog
|
||
|
|
open={dialogMode !== null}
|
||
|
|
onOpenChange={(open) => {
|
||
|
|
if (!open && !isDialogBusy) resetDialog();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<DialogContent className="sm:max-w-[440px]">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>{dialogTitle}</DialogTitle>
|
||
|
|
<DialogDescription>{dialogDescription}</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
<form
|
||
|
|
className="space-y-4"
|
||
|
|
onSubmit={(event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
if (dialogMode === 'disable') {
|
||
|
|
void handleDisable();
|
||
|
|
} else {
|
||
|
|
void handleSavePassword();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="space-y-3">
|
||
|
|
{dialogMode === 'disable' && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="app-lock-disable-password">{t('settings.appLock.currentPassword')}</Label>
|
||
|
|
<Input
|
||
|
|
id="app-lock-disable-password"
|
||
|
|
type="password"
|
||
|
|
value={disablePassword}
|
||
|
|
autoComplete="current-password"
|
||
|
|
placeholder={t('settings.appLock.currentPasswordForDisablePlaceholder')}
|
||
|
|
disabled={isDialogBusy}
|
||
|
|
onChange={(event) => {
|
||
|
|
setDisablePassword(event.target.value);
|
||
|
|
setError(null);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{dialogMode === 'change' && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="app-lock-current-password">{t('settings.appLock.currentPassword')}</Label>
|
||
|
|
<Input
|
||
|
|
id="app-lock-current-password"
|
||
|
|
type="password"
|
||
|
|
value={currentPassword}
|
||
|
|
autoComplete="current-password"
|
||
|
|
placeholder={t('settings.appLock.currentPasswordForChangePlaceholder')}
|
||
|
|
disabled={isDialogBusy}
|
||
|
|
onChange={(event) => {
|
||
|
|
setCurrentPassword(event.target.value);
|
||
|
|
setError(null);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{dialogMode !== 'disable' && (
|
||
|
|
<>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="app-lock-new-password">{t('settings.appLock.newPassword')}</Label>
|
||
|
|
<Input
|
||
|
|
id="app-lock-new-password"
|
||
|
|
type="password"
|
||
|
|
value={newPassword}
|
||
|
|
autoComplete="new-password"
|
||
|
|
placeholder={t('settings.appLock.newPasswordPlaceholder')}
|
||
|
|
disabled={isDialogBusy}
|
||
|
|
onChange={(event) => {
|
||
|
|
setNewPassword(event.target.value);
|
||
|
|
setError(null);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="app-lock-confirm-password">{t('settings.appLock.confirmPassword')}</Label>
|
||
|
|
<Input
|
||
|
|
id="app-lock-confirm-password"
|
||
|
|
type="password"
|
||
|
|
value={confirmPassword}
|
||
|
|
autoComplete="new-password"
|
||
|
|
placeholder={t('settings.appLock.confirmPasswordPlaceholder')}
|
||
|
|
disabled={isDialogBusy}
|
||
|
|
onChange={(event) => {
|
||
|
|
setConfirmPassword(event.target.value);
|
||
|
|
setError(null);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{error && <p className="text-sm text-destructive">{error}</p>}
|
||
|
|
|
||
|
|
<DialogFooter>
|
||
|
|
<Button type="button" variant="outline" disabled={isDialogBusy} onClick={resetDialog}>
|
||
|
|
{t('common.cancel')}
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
variant={dialogMode === 'disable' ? 'destructive' : 'default'}
|
||
|
|
disabled={isDialogBusy}
|
||
|
|
>
|
||
|
|
{dialogMode === 'disable'
|
||
|
|
? (isDisabling ? t('settings.appLock.disabling') : t('settings.appLock.disable'))
|
||
|
|
: (isSavingPassword ? t('settings.appLock.savingPassword') : t('settings.appLock.savePassword'))}
|
||
|
|
</Button>
|
||
|
|
</DialogFooter>
|
||
|
|
</form>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|