Ask the operating system for privileges when a guarded SSH setting is changed

client/ui/frontend/src/modules/settings/SettingsSSH.tsx

@@ -1,3 +1,4 @@
+import { type TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import { CopyToClipboard } from "@/components/CopyToClipboard";
 import FancyToggleSwitch from "@/components/switches/FancyToggleSwitch";
@@ -6,51 +7,91 @@ import { Input } from "@/components/inputs/Input";
 import { Label } from "@/components/typography/Label";
 import { cn } from "@/lib/cn";
 import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
-import { useSettings } from "@/contexts/SettingsContext.tsx";
+import { type GuardedField, useSettings } from "@/contexts/SettingsContext.tsx";
 import { usePrivilege } from "@/hooks/usePrivilege.ts";
-import { Privilege } from "@bindings/services/models.js";
+import type { Privilege } from "@bindings/services/models.js";
 import { type ChangeEvent, type ReactNode, useEffect, useId, useState } from "react";
 
 export function SettingsSSH() {
     const { t } = useTranslation();
-    const { config, setField } = useSettings();
+    const { config, setField, saveGuardedField } = useSettings();
     const privilege = usePrivilege();
+    // The field whose elevation prompt is currently up, if any. The prompt is
+    // modal to the operating system, not to us, so the guarded controls are held
+    // still meanwhile rather than allowed to stack a second one behind it.
+    const [authorizing, setAuthorizing] = useState<GuardedField | null>(null);
     const isSSHServerEnabled = config.serverSshAllowed;
 
+    const authorize = async (field: GuardedField, value: boolean) => {
+        setAuthorizing(field);
+        try {
+            await saveGuardedField(field, value);
+        } finally {
+            setAuthorizing(null);
+        }
+    };
+
     // The daemon restricts only the direction that hands out shells from a process
-    // running as root. So for an unprivileged user a guarded control is either
-    // unavailable (it is off and only they could turn it on) or a one-way switch
-    // (it is on, they may turn it off, but not back on) — say which, either way.
+    // running as root: for all three settings that is switching the field on.
+    //
+    // An unprivileged user gets that direction routed through the platform's
+    // elevation prompt where there is one to raise, and otherwise the old
+    // arrangement, where the control is either unavailable (it is off and only a
+    // privileged caller could turn it on) or a one-way switch (it is on, they may
+    // turn it off but not back on) with the command that does it.
     //
     // A null privilege means we could not determine it: leave the control alone
     // rather than greying it out with nothing to explain why. The daemon enforces
     // this regardless, and a rejected save reports its own guidance.
     const guarded = (
-        guardedDirectionActive: boolean,
+        field: GuardedField,
         command: (p: Privilege) => string,
         // inverted marks a control whose guarded direction is switching it off, so
         // the one-way warning has to read the other way round.
         inverted = false,
     ) => {
+        const plain = (value: boolean) => setField(field, value);
         if (!privilege || privilege.privileged) {
-            return { disabled: false, hint: undefined };
+            return { apply: plain, disabled: false, hint: undefined };
         }
-        const hint = (
-            <PrivilegeHint
-                actor={privilege.actor}
-                command={command(privilege)}
+
+        const guardedDirectionActive = config[field];
+        const hint = (pending: boolean, command?: string) => (
+            <GuardedHint
+                actor={actorLabel(privilege, t)}
                 oneWay={guardedDirectionActive}
                 inverted={inverted}
+                pending={pending}
+                command={command}
             />
         );
-        return { disabled: !guardedDirectionActive, hint };
+
+        if (privilege.canElevate) {
+            return {
+                // Switching off is ours to do; only switching on is authorized.
+                apply: (value: boolean) => {
+                    if (!value) {
+                        plain(value);
+                        return;
+                    }
+                    void authorize(field, value);
+                },
+                disabled: authorizing !== null,
+                hint: hint(authorizing === field),
+            };
+        }
+        return {
+            apply: plain,
+            disabled: !guardedDirectionActive,
+            hint: hint(false, command(privilege)),
+        };
     };
 
-    const sshServer = guarded(config.serverSshAllowed, (p) => p.allowSshServer);
-    const sshRoot = guarded(config.enableSshRoot, (p) => p.enableSshRoot);
+    const sshServer = guarded("serverSshAllowed", (p) => p.allowSshServer);
+    const sshRoot = guarded("enableSshRoot", (p) => p.enableSshRoot);
     // Inverted control: the guarded direction is switching authentication off, so
     // it is the already-disabled state that is the one-way one.
-    const sshAuth = guarded(config.disableSshAuth, (p) => p.disableSshAuth, true);
+    const sshAuth = guarded("disableSshAuth", (p) => p.disableSshAuth, true);
     const jwtTtlId = useId();
     const [jwtTtlInput, setJwtTtlInput] = useState(String(config.sshJwtCacheTtl));
 
@@ -84,7 +125,7 @@ export function SettingsSSH() {
             <SectionGroup title={t("settings.ssh.section.server")}>
                 <FancyToggleSwitch
                     value={config.serverSshAllowed}
-                    onChange={(v) => setField("serverSshAllowed", v)}
+                    onChange={sshServer.apply}
                     disabled={sshServer.disabled}
                     label={t("settings.ssh.server.label")}
                     helpText={t("settings.ssh.server.help")}
@@ -98,7 +139,7 @@ export function SettingsSSH() {
             >
                 <FancyToggleSwitch
                     value={config.enableSshRoot}
-                    onChange={(v) => setField("enableSshRoot", v)}
+                    onChange={sshRoot.apply}
                     disabled={sshRoot.disabled}
                     label={t("settings.ssh.root.label")}
                     helpText={t("settings.ssh.root.help")}
@@ -130,7 +171,7 @@ export function SettingsSSH() {
             >
                 <FancyToggleSwitch
                     value={!config.disableSshAuth}
-                    onChange={(v) => setField("disableSshAuth", !v)}
+                    onChange={(v) => sshAuth.apply(!v)}
                     disabled={sshAuth.disabled}
                     label={t("settings.ssh.jwt.label")}
                     helpText={t("settings.ssh.jwt.help")}
@@ -163,41 +204,81 @@ export function SettingsSSH() {
     );
 }
 
-// PrivilegeHint explains what an unprivileged user can and cannot do with a
-// guarded control, and offers the command that does it with the privileges the
-// daemon requires. oneWay covers the control being in the guarded state already:
-// switching it back is the part that needs privileges.
-function PrivilegeHint({
+// actorLabel names the principal the daemon requires, in the user's language. The
+// Go side reports which one it is rather than wording it, because "administrator
+// privileges" is English and a translated sentence cannot borrow it.
+function actorLabel(privilege: Privilege, t: TFunction): string {
+    return privilege.actorKey === "administrator"
+        ? t("settings.ssh.privilege.actorAdministrator")
+        : t("settings.ssh.privilege.actorRoot");
+}
+
+// GuardedHint is what a control the daemon guards says to an unprivileged user.
+// There are three things worth saying, and it says at most one:
+//
+//   - A prompt is open. Worth a line because it can take a few seconds to appear,
+//     long enough that a control which merely went inert would read as a hang.
+//   - The setting is in its guarded state already (oneWay), so the user may switch
+//     it back as they please and it is switching it away again that will ask. No
+//     command either way: the direction they can take is theirs to take.
+//   - Only a privileged caller can move it at all, and there is no prompt to
+//     raise: the command that does it belongs here, and nothing else will do.
+//
+// Which leaves the case of a control whose guarded direction is still ahead of the
+// user and a prompt that can be raised for it: nothing to say, because clicking it
+// raises the prompt and the prompt explains itself.
+function GuardedHint({
     actor,
-    command,
     oneWay,
     inverted,
+    pending,
+    command,
 }: {
     actor: string;
-    command: string;
     oneWay: boolean;
     inverted: boolean;
+    pending: boolean;
+    command?: string;
 }): ReactNode {
     const { t } = useTranslation();
+
+    if (pending) {
+        return <HintBox>{t("settings.ssh.privilege.authorizePending")}</HintBox>;
+    }
+    if (oneWay) {
+        return (
+            <HintBox>
+                <span>
+                    {inverted
+                        ? t("settings.ssh.privilege.oneWayInverted", { actor })
+                        : t("settings.ssh.privilege.oneWay", { actor })}
+                </span>
+            </HintBox>
+        );
+    }
     if (!command) return null;
+    return (
+        <HintBox>
+            <span>{t("settings.ssh.privilege.hint", { actor })}</span>
+            <CopyToClipboard message={command} alwaysShowIcon wrap variant={"bright"}>
+                <code className={"select-text break-all font-mono text-xs text-nb-gray-200"}>
+                    {command}
+                </code>
+            </CopyToClipboard>
+        </HintBox>
+    );
+}
+
+// HintBox is the box a guarded control puts its explanation in, directly under the
+// control it belongs to.
+function HintBox({ children }: { children: ReactNode }): ReactNode {
     return (
         <div
             className={
                 "-mt-2 flex flex-col gap-1 rounded-md bg-nb-gray-930 px-3 py-2 text-xs text-nb-gray-300"
             }
         >
-            <span>
-                {!oneWay
-                    ? t("settings.ssh.privilege.hint", { actor })
-                    : inverted
-                      ? t("settings.ssh.privilege.oneWayInverted", { actor })
-                      : t("settings.ssh.privilege.oneWay", { actor })}
-            </span>
-            <CopyToClipboard message={command} alwaysShowIcon wrap variant={"bright"}>
-                <code className={"select-text break-all font-mono text-xs text-nb-gray-200"}>
-                    {command}
-                </code>
-            </CopyToClipboard>
+            {children}
         </div>
     );
 }