[client] Authorize daemon IPC callers by their local identity (#6967)

client/ui/frontend/src/modules/error/ErrorDialog.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
 import { AlertCircleIcon } from "lucide-react";
 import { Button } from "@/components/buttons/Button";
+import { CopyToClipboard } from "@/components/CopyToClipboard";
 import { ConfirmDialog } from "@/components/dialog/ConfirmDialog";
 import { DialogActions } from "@/components/dialog/DialogActions";
 import { DialogDescription } from "@/components/dialog/DialogDescription";
@@ -12,14 +13,22 @@ import { WindowManager } from "@bindings/services";
 import { useAutoSizeWindow } from "@/hooks/useAutoSizeWindow";
 
 const WINDOW_WIDTH = 380;
+// A command needs the room to wrap at a sensible number of characters instead of
+// breaking every few words.
+const WINDOW_WIDTH_WITH_COMMAND = 460;
 
 export default function ErrorDialog() {
     const { t } = useTranslation();
-    const contentRef = useAutoSizeWindow<HTMLDivElement>(WINDOW_WIDTH);
     const [params] = useSearchParams();
 
     const title = params.get("title") || t("window.title.error");
     const message = params.get("message") || "";
+    // Set when the daemon refused an operation that needs elevated privileges:
+    // the command that performs it, offered for copying.
+    const command = params.get("command") || "";
+    const contentRef = useAutoSizeWindow<HTMLDivElement>(
+        command ? WINDOW_WIDTH_WITH_COMMAND : WINDOW_WIDTH,
+    );
 
     const close = useCallback(() => {
         WindowManager.CloseError().catch(console.error);
@@ -37,15 +46,37 @@ export default function ErrorDialog() {
         <ConfirmDialog ref={contentRef} aria-labelledby={"nb-error-dialog-title"}>
             <SquareIcon icon={AlertCircleIcon} variant={"danger"} />
 
-            <div className={"flex flex-col items-center gap-1"}>
+            <div className={"flex w-full flex-col items-center gap-1"}>
                 <DialogHeading id={"nb-error-dialog-title"} className={"text-balance"}>
                     {title}
                 </DialogHeading>
                 {message && (
                     <DialogDescription className={"text-balance"}>
-                        <span className={"whitespace-pre-wrap break-words"}>{message}</span>
+                        {/* select-text: the message often names a path, a flag or an
+                            address the user needs to act on. */}
+                        <span className={"select-text whitespace-pre-wrap break-words"}>
+                            {message}
+                        </span>
                     </DialogDescription>
                 )}
+                {command && (
+                    <CopyToClipboard
+                        message={command}
+                        alwaysShowIcon
+                        wrap
+                        variant={"bright"}
+                        className={
+                            "mt-2 w-full items-start gap-2 rounded-md bg-nb-gray-930 px-3 py-2 text-left"
+                        }
+                        aria-label={t("common.copy")}
+                    >
+                        <code
+                            className={"select-text break-all font-mono text-xs text-nb-gray-200"}
+                        >
+                            {command}
+                        </code>
+                    </CopyToClipboard>
+                )}
             </div>
 
             <DialogActions>

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

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import { CopyToClipboard } from "@/components/CopyToClipboard";
 import FancyToggleSwitch from "@/components/switches/FancyToggleSwitch";
 import { HelpText } from "@/components/typography/HelpText";
 import { Input } from "@/components/inputs/Input";
@@ -6,12 +7,50 @@ 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 ChangeEvent, useEffect, useId, useState } from "react";
+import { usePrivilege } from "@/hooks/usePrivilege.ts";
+import { 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 privilege = usePrivilege();
     const isSSHServerEnabled = config.serverSshAllowed;
+
+    // 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.
+    //
+    // 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,
+        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,
+    ) => {
+        if (!privilege || privilege.privileged) {
+            return { disabled: false, hint: undefined };
+        }
+        const hint = (
+            <PrivilegeHint
+                actor={privilege.actor}
+                command={command(privilege)}
+                oneWay={guardedDirectionActive}
+                inverted={inverted}
+            />
+        );
+        return { disabled: !guardedDirectionActive, hint };
+    };
+
+    const sshServer = guarded(config.serverSshAllowed, (p) => p.allowSshServer);
+    const sshRoot = guarded(config.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 jwtTtlId = useId();
     const [jwtTtlInput, setJwtTtlInput] = useState(String(config.sshJwtCacheTtl));
 
@@ -46,9 +85,11 @@ export function SettingsSSH() {
                 <FancyToggleSwitch
                     value={config.serverSshAllowed}
                     onChange={(v) => setField("serverSshAllowed", v)}
+                    disabled={sshServer.disabled}
                     label={t("settings.ssh.server.label")}
                     helpText={t("settings.ssh.server.help")}
                 />
+                {sshServer.hint}
             </SectionGroup>
 
             <SectionGroup
@@ -58,9 +99,11 @@ export function SettingsSSH() {
                 <FancyToggleSwitch
                     value={config.enableSshRoot}
                     onChange={(v) => setField("enableSshRoot", v)}
+                    disabled={sshRoot.disabled}
                     label={t("settings.ssh.root.label")}
                     helpText={t("settings.ssh.root.help")}
                 />
+                {sshRoot.hint}
                 <FancyToggleSwitch
                     value={config.enableSshSftp}
                     onChange={(v) => setField("enableSshSftp", v)}
@@ -88,9 +131,11 @@ export function SettingsSSH() {
                 <FancyToggleSwitch
                     value={!config.disableSshAuth}
                     onChange={(v) => setField("disableSshAuth", !v)}
+                    disabled={sshAuth.disabled}
                     label={t("settings.ssh.jwt.label")}
                     helpText={t("settings.ssh.jwt.help")}
                 />
+                {sshAuth.hint}
                 <div
                     className={cn(
                         "flex items-center justify-between gap-6",
@@ -117,3 +162,42 @@ 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({
+    actor,
+    command,
+    oneWay,
+    inverted,
+}: {
+    actor: string;
+    command: string;
+    oneWay: boolean;
+    inverted: boolean;
+}): ReactNode {
+    const { t } = useTranslation();
+    if (!command) return null;
+    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>
+        </div>
+    );
+}