feat(settings): let users clear stored secrets from the UI

Redacted secrets (SMTP password, Telegram bot token, LDAP password) are
always served blank to the browser, so the update path treats a blank
submission as "unchanged" and silently restores the stored value. That
made a once-set secret impossible to remove without editing the database
— e.g. switching to a passwordless localhost SMTP relay kept sending the
old credentials forever.

Blank stays "unchanged"; clearing is now its own signal. The update
request carries explicit clear flags (request-scoped fields on the
controller form, so they are never persisted as settings rows), and
preserveRedactedSecrets skips the restore for a flagged secret. Each
secret field gets a Clear/Undo button that arms the flag; typing a new
value disarms it. The 2FA token keeps its existing behavior: it is
already clearable by disabling 2FA.

Closes #5724

frontend/src/models/setting.ts

@@ -103,6 +103,9 @@ export class AllSetting {
   hasWarpSecret = false;
   hasNordSecret = false;
   hasSmtpPassword = false;
+  clearTgBotToken = false;
+  clearLdapPassword = false;
+  clearSmtpPassword = false;
 
   constructor(data?: unknown) {
     if (data != null) {

frontend/src/pages/settings/EmailTab.tsx

@@ -8,6 +8,7 @@ import { SettingListItem } from '@/components/ui';
 import { EmailNotifications } from '@/components/ui/notifications/EmailNotifications';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { catTabLabel } from './catTabLabel';
+import SecretInput from './SecretInput';
 
 interface EmailTabProps {
   allSetting: AllSetting;
@@ -72,10 +73,13 @@ export default function EmailTab({ allSetting, updateSetting }: EmailTabProps) {
             </SettingListItem>
 
             <SettingListItem paddings="small" title={t('pages.settings.smtpPassword')}
-              description={allSetting.hasSmtpPassword ? t('pages.settings.smtpPasswordConfigured') : t('pages.settings.smtpPasswordDesc')}>
-              <Input.Password value={allSetting.smtpPassword}
-                placeholder={allSetting.hasSmtpPassword ? t('pages.settings.smtpPasswordPlaceholder') : ''}
-                onChange={(e) => updateSetting({ smtpPassword: e.target.value })} />
+              description={allSetting.hasSmtpPassword && !allSetting.clearSmtpPassword ? t('pages.settings.smtpPasswordConfigured') : t('pages.settings.smtpPasswordDesc')}>
+              <SecretInput value={allSetting.smtpPassword}
+                configured={allSetting.hasSmtpPassword}
+                clearArmed={allSetting.clearSmtpPassword}
+                placeholder={t('pages.settings.smtpPasswordPlaceholder')}
+                onChange={(v) => updateSetting({ smtpPassword: v })}
+                onClearArmedChange={(armed) => updateSetting({ clearSmtpPassword: armed })} />
             </SettingListItem>
 
             <SettingListItem paddings="small" title={t('pages.settings.smtpTo')} description={t('pages.settings.smtpToDesc')}>

frontend/src/pages/settings/GeneralTab.tsx

@@ -21,6 +21,7 @@ import { SettingListItem } from '@/components/ui';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { catTabLabel } from './catTabLabel';
 import { sanitizePath } from './uriPath';
+import SecretInput from './SecretInput';
 
 interface ApiMsg<T = unknown> {
   success?: boolean;
@@ -329,12 +330,15 @@ export default function GeneralTab({ allSetting, updateSetting }: GeneralTabProp
             <SettingListItem
               paddings="small"
               title={t('password')}
-              description={allSetting.hasLdapPassword ? t('pages.settings.ldap.passwordConfigured') : t('pages.settings.ldap.passwordUnconfigured')}
+              description={allSetting.hasLdapPassword && !allSetting.clearLdapPassword ? t('pages.settings.ldap.passwordConfigured') : t('pages.settings.ldap.passwordUnconfigured')}
             >
-              <Input.Password
+              <SecretInput
                 value={allSetting.ldapPassword}
-                placeholder={allSetting.hasLdapPassword ? t('pages.settings.ldap.passwordPlaceholder') : ''}
-                onChange={(e) => updateSetting({ ldapPassword: e.target.value })}
+                configured={allSetting.hasLdapPassword}
+                clearArmed={allSetting.clearLdapPassword}
+                placeholder={t('pages.settings.ldap.passwordPlaceholder')}
+                onChange={(v) => updateSetting({ ldapPassword: v })}
+                onClearArmedChange={(armed) => updateSetting({ clearLdapPassword: armed })}
               />
             </SettingListItem>
             <SettingListItem paddings="small" title={t('pages.settings.ldap.baseDn')}>

frontend/src/pages/settings/SecretInput.tsx

@@ -0,0 +1,45 @@
+import { Button, Input, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+interface SecretInputProps {
+  value: string;
+  configured: boolean;
+  clearArmed: boolean;
+  placeholder: string;
+  onChange: (value: string) => void;
+  onClearArmedChange: (armed: boolean) => void;
+}
+
+export default function SecretInput({
+  value,
+  configured,
+  clearArmed,
+  placeholder,
+  onChange,
+  onClearArmedChange,
+}: SecretInputProps) {
+  const { t } = useTranslation();
+  return (
+    <Space.Compact style={{ width: '100%' }}>
+      <Input.Password
+        value={value}
+        placeholder={configured && !clearArmed ? placeholder : ''}
+        onChange={(e) => {
+          onChange(e.target.value);
+          if (clearArmed) onClearArmedChange(false);
+        }}
+      />
+      {configured && (
+        <Button
+          danger={clearArmed}
+          onClick={() => {
+            onChange('');
+            onClearArmedChange(!clearArmed);
+          }}
+        >
+          {clearArmed ? t('pages.settings.secretClearUndo') : t('pages.settings.secretClear')}
+        </Button>
+      )}
+    </Space.Compact>
+  );
+}

frontend/src/pages/settings/TelegramTab.tsx

@@ -9,6 +9,7 @@ import { SettingListItem } from '@/components/ui';
 import { TelegramNotifications } from '@/components/ui/notifications/TelegramNotifications';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { catTabLabel } from './catTabLabel';
+import SecretInput from './SecretInput';
 
 interface TelegramTabProps {
   allSetting: AllSetting;
@@ -193,12 +194,15 @@ export default function TelegramTab({ allSetting, updateSetting }: TelegramTabPr
             <SettingListItem
               paddings="small"
               title={t('pages.settings.telegramToken')}
-              description={allSetting.hasTgBotToken ? t('pages.settings.telegramTokenConfigured') : t('pages.settings.telegramTokenDesc')}
+              description={allSetting.hasTgBotToken && !allSetting.clearTgBotToken ? t('pages.settings.telegramTokenConfigured') : t('pages.settings.telegramTokenDesc')}
             >
-              <Input.Password
+              <SecretInput
                 value={allSetting.tgBotToken}
-                placeholder={allSetting.hasTgBotToken ? t('pages.settings.telegramTokenPlaceholder') : ''}
-                onChange={(e) => updateSetting({ tgBotToken: e.target.value })}
+                configured={allSetting.hasTgBotToken}
+                clearArmed={allSetting.clearTgBotToken}
+                placeholder={t('pages.settings.telegramTokenPlaceholder')}
+                onChange={(v) => updateSetting({ tgBotToken: v })}
+                onClearArmedChange={(armed) => updateSetting({ clearTgBotToken: armed })}
               />
             </SettingListItem>