release-2.4.1 (#921)

* chore(deps-dev): bump the dev-minor-updates group across 1 directory with 12 updates (#910) Bumps the dev-minor-updates group with 12 updates in the / directory: | Package | From | To | | --- | --- | --- | | [@radix-ui/react-select](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/select) | `2.2.6` | `2.3.1` | | [@radix-ui/react-slider](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/slider) | `1.3.6` | `1.4.1` | | [@radix-ui/react-slot](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/slot) | `1.2.5` | `1.3.0` | | [@radix-ui/react-switch](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/switch) | `1.2.6` | `1.3.1` | | [cytoscape](https://github.com/cytoscape/cytoscape.js) | `3.33.4` | `3.34.0` | | [electron](https://github.com/electron/electron) | `42.2.0` | `42.4.1` | | [electron-builder](https://github.com/electron-userland/electron-builder/tree/HEAD/packages/electron-builder) | `26.8.1` | `26.15.3` | | [lucide-react](https://github.com/lucide-icons/lucide/tree/HEAD/packages/lucide-react) | `1.16.0` | `1.20.0` | | [radix-ui](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/radix-ui) | `1.4.3` | `1.6.0` | | [react-hook-form](https://github.com/react-hook-form/react-hook-form) | `7.76.1` | `7.79.0` | | [sharp](https://github.com/lovell/sharp) | `0.34.5` | `0.35.1` | | [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/typescript-eslint) | `8.60.0` | `8.61.1` | Updates `@radix-ui/react-select` from 2.2.6 to 2.3.1 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/select/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/select) Updates `@radix-ui/react-slider` from 1.3.6 to 1.4.1 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/slider/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/slider) Updates `@radix-ui/react-slot` from 1.2.5 to 1.3.0 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/slot/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/slot) Updates `@radix-ui/react-switch` from 1.2.6 to 1.3.1 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/switch/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/switch) Updates `cytoscape` from 3.33.4 to 3.34.0 - [Release notes](https://github.com/cytoscape/cytoscape.js/releases) - [Commits](https://github.com/cytoscape/cytoscape.js/compare/v3.33.4...v3.34.0) Updates `electron` from 42.2.0 to 42.4.1 - [Release notes](https://github.com/electron/electron/releases) - [Commits](https://github.com/electron/electron/compare/v42.2.0...v42.4.1) Updates `electron-builder` from 26.8.1 to 26.15.3 - [Release notes](https://github.com/electron-userland/electron-builder/releases) - [Changelog](https://github.com/electron-userland/electron-builder/blob/master/packages/electron-builder/CHANGELOG.md) - [Commits](https://github.com/electron-userland/electron-builder/commits/electron-builder@26.15.3/packages/electron-builder) Updates `lucide-react` from 1.16.0 to 1.20.0 - [Release notes](https://github.com/lucide-icons/lucide/releases) - [Commits](https://github.com/lucide-icons/lucide/commits/1.20.0/packages/lucide-react) Updates `radix-ui` from 1.4.3 to 1.6.0 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/radix-ui/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/radix-ui) Updates `react-hook-form` from 7.76.1 to 7.79.0 - [Release notes](https://github.com/react-hook-form/react-hook-form/releases) - [Changelog](https://github.com/react-hook-form/react-hook-form/blob/master/CHANGELOG.md) - [Commits](https://github.com/react-hook-form/react-hook-form/compare/v7.76.1...v7.79.0) Updates `sharp` from 0.34.5 to 0.35.1 - [Release notes](https://github.com/lovell/sharp/releases) - [Commits](https://github.com/lovell/sharp/compare/v0.34.5...v0.35.1) Updates `typescript-eslint` from 8.60.0 to 8.61.1 - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/typescript-eslint/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.61.1/packages/typescript-eslint) --- updated-dependencies: - dependency-name: "@radix-ui/react-select" dependency-version: 2.3.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: "@radix-ui/react-slider" dependency-version: 1.4.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: "@radix-ui/react-slot" dependency-version: 1.3.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: "@radix-ui/react-switch" dependency-version: 1.3.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: cytoscape dependency-version: 3.34.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: electron dependency-version: 42.4.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: electron-builder dependency-version: 26.15.3 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: lucide-react dependency-version: 1.18.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: radix-ui dependency-version: 1.6.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: react-hook-form dependency-version: 7.79.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: sharp dependency-version: 0.35.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: typescript-eslint dependency-version: 8.61.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump node in /docker in the docker-major-updates group (#914) Bumps the docker-major-updates group in /docker with 1 update: node. Updates `node` from 24-slim to 26-slim --- updated-dependencies: - dependency-name: node dependency-version: 26-slim dependency-type: direct:production dependency-group: docker-major-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * ci(deps): bump the github-actions group with 2 updates (#915) Bumps the github-actions group with 2 updates: [actions/checkout](https://github.com/actions/checkout) and [actions/setup-node](https://github.com/actions/setup-node). Updates `actions/checkout` from 5 to 6 - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](https://github.com/actions/checkout/compare/v5...v6) Updates `actions/setup-node` from 4 to 6 - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/v4...v6) --- updated-dependencies: - dependency-name: actions/checkout dependency-version: '6' dependency-type: direct:production update-type: version-update:semver-major dependency-group: github-actions - dependency-name: actions/setup-node dependency-version: '6' dependency-type: direct:production update-type: version-update:semver-major dependency-group: github-actions ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump the prod-minor-updates group across 1 directory with 5 updates (#916) Bumps the prod-minor-updates group with 5 updates in the / directory: | Package | From | To | | --- | --- | --- | | [axios](https://github.com/axios/axios) | `1.17.0` | `1.18.0` | | [better-sqlite3](https://github.com/WiseLibs/better-sqlite3) | `12.10.0` | `12.11.1` | | [body-parser](https://github.com/expressjs/body-parser) | `2.2.2` | `2.3.0` | | [multer](https://github.com/expressjs/multer) | `2.1.1` | `2.2.0` | | [undici](https://github.com/nodejs/undici) | `8.4.0` | `8.5.0` | Updates `axios` from 1.17.0 to 1.18.0 - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](https://github.com/axios/axios/compare/v1.17.0...v1.18.0) Updates `better-sqlite3` from 12.10.0 to 12.11.1 - [Release notes](https://github.com/WiseLibs/better-sqlite3/releases) - [Commits](https://github.com/WiseLibs/better-sqlite3/compare/v12.10.0...v12.11.1) Updates `body-parser` from 2.2.2 to 2.3.0 - [Release notes](https://github.com/expressjs/body-parser/releases) - [Changelog](https://github.com/expressjs/body-parser/blob/master/HISTORY.md) - [Commits](https://github.com/expressjs/body-parser/compare/v2.2.2...v2.3.0) Updates `multer` from 2.1.1 to 2.2.0 - [Release notes](https://github.com/expressjs/multer/releases) - [Changelog](https://github.com/expressjs/multer/blob/main/CHANGELOG.md) - [Commits](https://github.com/expressjs/multer/compare/v2.1.1...v2.2.0) Updates `undici` from 8.4.0 to 8.5.0 - [Release notes](https://github.com/nodejs/undici/releases) - [Commits](https://github.com/nodejs/undici/compare/v8.4.0...v8.5.0) --- updated-dependencies: - dependency-name: axios dependency-version: 1.18.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: better-sqlite3 dependency-version: 12.11.1 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: body-parser dependency-version: 2.3.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: multer dependency-version: 2.2.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: undici dependency-version: 8.5.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: add unlink button for dual auth * fix: general bug fixes * fix: general qol/small feature additions * fix: 100mb max upload size * fix: terminal syntax not handling carriage returns or shell prompt lines properly * feat: continued general improvements * fix: terminal outputting success right after folder path * chore: update release notes * feat: continued fixes and improvements * chore: lint, format, and bump version to 2.4.1 * chore: sync Crowdin translations for 2.4.1 * fix: rebase dev branch onto main before Crowdin download * fix: use merge instead of rebase to sync main before Crowdin --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-07-18 22:33:37 +00:00 · 2026-06-21 15:55:41 -05:00
parent 8072b4ede9
commit d1a8dcf3c6
165 changed files with 87244 additions and 60766 deletions
@@ -2,18 +2,30 @@ import type { Dispatch, SetStateAction } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/button";
 import { Input } from "@/components/input";
+import { PasswordInput } from "@/components/password-input";
 import { SettingRow } from "@/components/section-card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/select";
 import {
  Database,
+  Lock,
  Pencil,
  Plus,
  RefreshCw,
+  Server,
  Settings,
  Shield,
  Trash2,
 } from "lucide-react";
 import { AccordionSection, AdminToggle } from "./AdminSettingsShared";
 import type { SSOProvider, SSOProviderType } from "@/types/index";
+import type { HostDefaults } from "@/api/settings-api";
+import type { AcmeSettings, AcmeChallengeType } from "@/api/acme-ssl-api";

 type GeneralSettingsSectionProps = {
  open: boolean;
@@ -24,6 +36,8 @@ type GeneralSettingsSectionProps = {
  handleTogglePasswordLogin: () => void;
  oidcAutoProvision: boolean;
  handleToggleOidcAutoProvision: () => void;
+  oidcSilentLoginDefault: boolean;
+  handleToggleOidcSilentLoginDefault: () => void;
  allowPasswordReset: boolean;
  handleTogglePasswordReset: () => void;
  commandHistoryEnabled: boolean;
@@ -57,6 +71,8 @@ export function AdminGeneralSettingsSection({
  handleTogglePasswordLogin,
  oidcAutoProvision,
  handleToggleOidcAutoProvision,
+  oidcSilentLoginDefault,
+  handleToggleOidcSilentLoginDefault,
  allowPasswordReset,
  handleTogglePasswordReset,
  commandHistoryEnabled,
@@ -117,6 +133,15 @@ export function AdminGeneralSettingsSection({
            onToggle={handleToggleOidcAutoProvision}
          />
        </SettingRow>
+        <SettingRow
+          label={t("admin.oidcSilentLoginDefault")}
+          description={t("admin.oidcSilentLoginDefaultDesc")}
+        >
+          <AdminToggle
+            on={oidcSilentLoginDefault}
+            onToggle={handleToggleOidcSilentLoginDefault}
+          />
+        </SettingRow>
        <SettingRow
          label={t("admin.allowPasswordReset")}
          description={t("admin.allowPasswordResetDesc")}
@@ -774,3 +799,388 @@ export function AdminSSOSection({
    </AccordionSection>
  );
 }
+
+type AdminHostDefaultsSectionProps = {
+  open: boolean;
+  onToggle: () => void;
+  defaults: HostDefaults;
+  setDefaults: Dispatch<SetStateAction<HostDefaults>>;
+  handleSaveDefaults: () => void;
+};
+
+export function AdminHostDefaultsSection({
+  open,
+  onToggle,
+  defaults,
+  setDefaults,
+  handleSaveDefaults,
+}: AdminHostDefaultsSectionProps) {
+  const { t } = useTranslation();
+
+  return (
+    <AccordionSection
+      label={t("admin.sectionHostDefaults")}
+      icon={<Server className="size-3.5" />}
+      open={open}
+      onToggle={onToggle}
+    >
+      <div className="flex flex-col gap-4 pt-3">
+        <span className="text-[10px] text-muted-foreground">
+          {t("admin.hostDefaultsDesc")}
+        </span>
+
+        <div className="flex flex-col gap-2">
+          <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+            {t("admin.hostDefaultsSocks5")}
+          </span>
+          <SettingRow
+            label={t("admin.hostDefaultsUseSocks5")}
+            description={t("admin.hostDefaultsUseSocks5Desc")}
+          >
+            <AdminToggle
+              on={defaults.useSocks5 ?? false}
+              onToggle={() =>
+                setDefaults((p) => ({ ...p, useSocks5: !p.useSocks5 }))
+              }
+            />
+          </SettingRow>
+          {defaults.useSocks5 && (
+            <div className="flex flex-col gap-3 ml-4">
+              <div className="flex flex-col gap-1">
+                <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+                  {t("admin.hostDefaultsSocks5Host")}
+                </label>
+                <div className="flex gap-2">
+                  <Input
+                    value={defaults.socks5Host ?? ""}
+                    onChange={(e) =>
+                      setDefaults((p) => ({ ...p, socks5Host: e.target.value }))
+                    }
+                    placeholder="127.0.0.1"
+                    className="text-xs"
+                  />
+                  <Input
+                    type="number"
+                    value={defaults.socks5Port ?? 1080}
+                    onChange={(e) =>
+                      setDefaults((p) => ({
+                        ...p,
+                        socks5Port: Number(e.target.value),
+                      }))
+                    }
+                    placeholder="1080"
+                    className="text-xs w-24 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  />
+                </div>
+              </div>
+              <div className="flex flex-col gap-1">
+                <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+                  {t("admin.hostDefaultsSocks5Username")}
+                </label>
+                <Input
+                  value={defaults.socks5Username ?? ""}
+                  onChange={(e) =>
+                    setDefaults((p) => ({
+                      ...p,
+                      socks5Username: e.target.value,
+                    }))
+                  }
+                  className="text-xs"
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+                  {t("admin.hostDefaultsSocks5Password")}
+                </label>
+                <PasswordInput
+                  value={defaults.socks5Password ?? ""}
+                  onChange={(e) =>
+                    setDefaults((p) => ({
+                      ...p,
+                      socks5Password: e.target.value,
+                    }))
+                  }
+                  className="h-8 text-xs pr-8"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-2 border-t border-border pt-3">
+          <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+            {t("admin.hostDefaultsMetrics")}
+          </span>
+          <SettingRow
+            label={t("admin.hostDefaultsMetricsEnabled")}
+            description={t("admin.hostDefaultsMetricsEnabledDesc")}
+          >
+            <AdminToggle
+              on={defaults.metricsEnabled ?? true}
+              onToggle={() =>
+                setDefaults((p) => ({
+                  ...p,
+                  metricsEnabled: !(p.metricsEnabled ?? true),
+                }))
+              }
+            />
+          </SettingRow>
+          <SettingRow
+            label={t("admin.hostDefaultsStatusCheckEnabled")}
+            description={t("admin.hostDefaultsStatusCheckEnabledDesc")}
+          >
+            <AdminToggle
+              on={defaults.statusCheckEnabled ?? true}
+              onToggle={() =>
+                setDefaults((p) => ({
+                  ...p,
+                  statusCheckEnabled: !(p.statusCheckEnabled ?? true),
+                }))
+              }
+            />
+          </SettingRow>
+        </div>
+
+        <div className="flex flex-col gap-2 border-t border-border pt-3">
+          <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+            {t("admin.hostDefaultsTerminal")}
+          </span>
+          <SettingRow
+            label={t("admin.hostDefaultsSessionLogging")}
+            description={t("admin.hostDefaultsSessionLoggingDesc")}
+          >
+            <AdminToggle
+              on={defaults.enableSessionLogging ?? true}
+              onToggle={() =>
+                setDefaults((p) => ({
+                  ...p,
+                  enableSessionLogging: !(p.enableSessionLogging ?? true),
+                }))
+              }
+            />
+          </SettingRow>
+          <SettingRow
+            label={t("admin.hostDefaultsCommandHistory")}
+            description={t("admin.hostDefaultsCommandHistoryDesc")}
+          >
+            <AdminToggle
+              on={defaults.enableCommandHistory ?? true}
+              onToggle={() =>
+                setDefaults((p) => ({
+                  ...p,
+                  enableCommandHistory: !(p.enableCommandHistory ?? true),
+                }))
+              }
+            />
+          </SettingRow>
+        </div>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="self-start text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand h-7"
+          onClick={handleSaveDefaults}
+        >
+          {t("common.save")}
+        </Button>
+      </div>
+    </AccordionSection>
+  );
+}
+
+const CERT_STATUS_STYLES: Record<AcmeSettings["certStatus"], string> = {
+  none: "text-muted-foreground",
+  valid: "text-green-500",
+  expiring: "text-yellow-500",
+  expired: "text-destructive",
+};
+
+type AdminSSLSectionProps = {
+  open: boolean;
+  onToggle: () => void;
+  settings: AcmeSettings;
+  setSettings: Dispatch<SetStateAction<AcmeSettings>>;
+  cloudflareTokenDraft: string;
+  setCloudflareTokenDraft: Dispatch<SetStateAction<string>>;
+  requesting: boolean;
+  handleSave: () => void;
+  handleRequest: () => void;
+};
+
+export function AdminSSLSection({
+  open,
+  onToggle,
+  settings,
+  setSettings,
+  cloudflareTokenDraft,
+  setCloudflareTokenDraft,
+  requesting,
+  handleSave,
+  handleRequest,
+}: AdminSSLSectionProps) {
+  const { t } = useTranslation();
+
+  const certStatusLabel: Record<AcmeSettings["certStatus"], string> = {
+    none: t("admin.sslCertStatusNone"),
+    valid: t("admin.sslCertStatusValid"),
+    expiring: t("admin.sslCertStatusExpiring"),
+    expired: t("admin.sslCertStatusExpired"),
+  };
+
+  return (
+    <AccordionSection
+      label={t("admin.sectionSsl")}
+      icon={<Lock className="size-3.5" />}
+      open={open}
+      onToggle={onToggle}
+    >
+      <div className="flex flex-col gap-3 pt-3">
+        <span className="text-[10px] text-muted-foreground">
+          {t("admin.sslDescription")}{" "}
+          <a
+            href="https://docs.termix.site/features/networking/ssl"
+            target="_blank"
+            rel="noreferrer"
+            className="text-accent-brand hover:underline"
+          >
+            {t("admin.sslDocsLink")}
+          </a>
+        </span>
+
+        <div className="flex flex-col gap-0.5 p-2 border border-border bg-background/50">
+          <div className="flex items-center justify-between">
+            <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+              {t("admin.sslCertStatus")}
+            </span>
+            <span
+              className={`text-xs font-medium ${CERT_STATUS_STYLES[settings.certStatus]}`}
+            >
+              {certStatusLabel[settings.certStatus]}
+            </span>
+          </div>
+          {settings.certExpiresAt && (
+            <span className="text-[10px] text-muted-foreground">
+              {t("admin.sslCertExpiresAt", {
+                date: new Date(settings.certExpiresAt).toLocaleDateString(),
+              })}
+            </span>
+          )}
+          {settings.lastIssuedAt && (
+            <span className="text-[10px] text-muted-foreground">
+              {t("admin.sslLastIssued", {
+                date: new Date(settings.lastIssuedAt).toLocaleString(),
+              })}
+            </span>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+            {t("admin.sslDomain")}
+          </label>
+          <Input
+            value={settings.domain}
+            onChange={(e) =>
+              setSettings((p) => ({ ...p, domain: e.target.value }))
+            }
+            placeholder={t("admin.sslDomainPlaceholder")}
+            className="text-xs"
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+            {t("admin.sslEmail")}
+          </label>
+          <Input
+            value={settings.email}
+            onChange={(e) =>
+              setSettings((p) => ({ ...p, email: e.target.value }))
+            }
+            placeholder={t("admin.sslEmailPlaceholder")}
+            className="text-xs"
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+            {t("admin.sslChallengeType")}
+          </label>
+          <Select
+            value={settings.challengeType}
+            onValueChange={(v) =>
+              setSettings((p) => ({
+                ...p,
+                challengeType: v as AcmeChallengeType,
+              }))
+            }
+          >
+            <SelectTrigger size="sm" className="w-full text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="http-webroot" className="text-xs">
+                HTTP (webroot)
+              </SelectItem>
+              <SelectItem value="dns-cloudflare" className="text-xs">
+                DNS (Cloudflare)
+              </SelectItem>
+            </SelectContent>
+          </Select>
+          <span className="text-[10px] text-muted-foreground">
+            {t("admin.sslChallengeTypeDesc")}
+          </span>
+        </div>
+
+        {settings.challengeType === "dns-cloudflare" && (
+          <div className="flex flex-col gap-1">
+            <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+              {t("admin.sslCloudflareToken")}
+            </label>
+            <PasswordInput
+              value={cloudflareTokenDraft}
+              onChange={(e) => setCloudflareTokenDraft(e.target.value)}
+              placeholder={
+                settings.cloudflareToken ||
+                t("admin.sslCloudflareTokenPlaceholder")
+              }
+              className="text-xs h-8 pr-8"
+            />
+            <span className="text-[10px] text-muted-foreground">
+              {t("admin.sslCloudflareTokenDesc")}
+            </span>
+          </div>
+        )}
+
+        <span className="text-[10px] text-muted-foreground border-t border-border pt-2">
+          {t("admin.sslInfoNote")}
+        </span>
+
+        <div className="flex flex-col gap-1.5">
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand h-7"
+            onClick={handleSave}
+          >
+            {t("admin.sslSave")}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand h-7"
+            onClick={handleRequest}
+            disabled={requesting}
+          >
+            <RefreshCw
+              className={`size-3 ${requesting ? "animate-spin" : ""}`}
+            />
+            {requesting
+              ? t("admin.sslRequestCertLoading")
+              : t("admin.sslRequestCert")}
+          </Button>
+        </div>
+      </div>
+    </AccordionSection>
+  );
+}