Prepare v0.1.0 release dependencies

webui/src/components/mail/MailServerSettingsPanel.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import Button from "../Button";
 import DismissibleAlert from "../DismissibleAlert";
 import FormField from "../FormField";
+import PasswordField from "../PasswordField";
 import ToggleSwitch from "../ToggleSwitch";
 
 export type MailServerSecurity = "plain" | "tls" | "starttls" | string;
@@ -50,10 +51,14 @@ export type MailServerSettingsPanelProps = {
   onImapEnabledChange?: (enabled: boolean) => void;
   smtpDisabled?: boolean;
   smtpCredentialDisabled?: boolean;
+  smtpPasswordSaved?: boolean;
+  smtpSavedPasswordPlaceholder?: string;
   smtpActionDisabled?: boolean;
   imapToggleDisabled?: boolean;
   imapServerDisabled?: boolean;
   imapCredentialDisabled?: boolean;
+  imapPasswordSaved?: boolean;
+  imapSavedPasswordPlaceholder?: string;
   imapActionDisabled?: boolean;
   smtpTitle?: ReactNode;
   imapTitle?: ReactNode;
@@ -98,10 +103,14 @@ export default function MailServerSettingsPanel({
   onImapEnabledChange,
   smtpDisabled = false,
   smtpCredentialDisabled = smtpDisabled,
+  smtpPasswordSaved = false,
+  smtpSavedPasswordPlaceholder = "••••••••",
   smtpActionDisabled = smtpDisabled,
   imapToggleDisabled = false,
   imapServerDisabled = false,
   imapCredentialDisabled = imapServerDisabled,
+  imapPasswordSaved = false,
+  imapSavedPasswordPlaceholder = "••••••••",
   imapActionDisabled = imapServerDisabled,
   smtpTitle = "SMTP login",
   imapTitle = "IMAP sent-folder append",
@@ -149,7 +158,16 @@ export default function MailServerSettingsPanel({
             <FormField label="Host"><input value={stringValue(smtp.host)} disabled={smtpFieldsDisabled} onChange={(event) => onSmtpChange({ host: event.target.value })} /></FormField>
             <FormField label="Port"><input type="number" min={1} max={65535} value={stringValue(smtp.port)} disabled={smtpFieldsDisabled} onChange={(event) => onSmtpChange({ port: event.target.value })} /></FormField>
             <FormField label="Username"><input value={stringValue(smtp.username)} disabled={smtpCredentialFieldsDisabled} onChange={(event) => onSmtpChange({ username: event.target.value })} /></FormField>
-            <FormField label="Password"><input type="password" value={stringValue(smtp.password)} disabled={smtpCredentialFieldsDisabled} onChange={(event) => onSmtpChange({ password: event.target.value })} /></FormField>
+            <FormField label="Password">
+              <PasswordField
+                value={stringValue(smtp.password)}
+                disabled={smtpCredentialFieldsDisabled}
+                saved={smtpPasswordSaved}
+                savedPlaceholder={smtpSavedPasswordPlaceholder}
+                autoComplete="new-password"
+                onValueChange={(password) => onSmtpChange({ password })}
+              />
+            </FormField>
             <FormField label="Security"><SecuritySelect value={stringValue(smtp.security, "starttls")} disabled={smtpFieldsDisabled} onChange={(security) => onSmtpChange({ security })} /></FormField>
             <FormField label="Timeout seconds"><input type="number" min={1} value={stringValue(smtp.timeout_seconds)} disabled={smtpFieldsDisabled} onChange={(event) => onSmtpChange({ timeout_seconds: event.target.value })} /></FormField>
           </div>
@@ -174,7 +192,16 @@ export default function MailServerSettingsPanel({
             <FormField label="Host"><input value={stringValue(imap.host)} disabled={imapFieldsDisabled} onChange={(event) => onImapChange({ host: event.target.value })} /></FormField>
             <FormField label="Port"><input type="number" min={1} max={65535} value={stringValue(imap.port)} disabled={imapFieldsDisabled} onChange={(event) => onImapChange({ port: event.target.value })} /></FormField>
             <FormField label="Username"><input value={stringValue(imap.username)} disabled={imapCredentialFieldsDisabled} onChange={(event) => onImapChange({ username: event.target.value })} /></FormField>
-            <FormField label="Password"><input type="password" value={stringValue(imap.password)} disabled={imapCredentialFieldsDisabled} onChange={(event) => onImapChange({ password: event.target.value })} /></FormField>
+            <FormField label="Password">
+              <PasswordField
+                value={stringValue(imap.password)}
+                disabled={imapCredentialFieldsDisabled}
+                saved={imapPasswordSaved}
+                savedPlaceholder={imapSavedPasswordPlaceholder}
+                autoComplete="new-password"
+                onValueChange={(password) => onImapChange({ password })}
+              />
+            </FormField>
             <FormField label="Security"><SecuritySelect value={stringValue(imap.security, "tls")} disabled={imapFieldsDisabled} onChange={(security) => onImapChange({ security })} /></FormField>
             <FormField label="Detected/saved sent folder"><input value={stringValue(imap.sent_folder, "auto")} disabled={imapFieldsDisabled} onChange={(event) => onImapChange({ sent_folder: event.target.value })} /></FormField>
             <FormField label="Timeout seconds"><input type="number" min={1} value={stringValue(imap.timeout_seconds)} disabled={imapFieldsDisabled} onChange={(event) => onImapChange({ timeout_seconds: event.target.value })} /></FormField>