feat(setup): center onboarding and add secure token help

2026-09-19 18:22:25 +12:00
parent 5fa5d45535
commit 4aba89c063
8 changed files with 218 additions and 28 deletions
@@ -0,0 +1,91 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { copySetupTokenCommand, SETUP_TOKEN_COMMAND } from "./setup-token-help";
+import styles from "./setup.module.css";
+
+export default function SetupTokenHelp({ disabled = false }: { disabled?: boolean }) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+  const commandField = useRef<HTMLTextAreaElement>(null);
+  const [copyStatus, setCopyStatus] = useState("");
+
+  const copyCommand = async () => {
+    const result = await copySetupTokenCommand(navigator.clipboard, commandField.current);
+    setCopyStatus(
+      result === "copied"
+        ? "Command copied. Paste it into the Magent container console."
+        : result === "selected"
+          ? "Automatic copying is unavailable. The command is selected; press Ctrl+C (Command+C on Mac), or touch and hold to copy."
+          : "Automatic copying is unavailable. Select and copy the command above.",
+    );
+  };
+
+  return (
+    <div className={styles.tokenHelp}>
+      <button
+        ref={trigger}
+        type="button"
+        className="ghost-button"
+        disabled={disabled}
+        aria-haspopup="dialog"
+        aria-controls="setup-token-help"
+        onClick={() => {
+          setCopyStatus("");
+          dialog.current?.showModal();
+        }}
+      >
+        Get setup token
+      </button>
+      <dialog
+        ref={dialog}
+        id="setup-token-help"
+        className={styles.tokenHelpDialog}
+        aria-labelledby="setup-token-help-title"
+        aria-describedby="setup-token-help-description"
+        onClose={() => trigger.current?.focus()}
+      >
+        <header className={styles.tokenHelpHeading}>
+          <h2 id="setup-token-help-title">Get your setup token</h2>
+          <button type="button" className="ghost-button" onClick={() => dialog.current?.close()}>
+            Close
+          </button>
+        </header>
+        <p id="setup-token-help-description">
+          Magent generates a private setup token when a managed installation starts. Retrieve it from your server
+          console to create the first administrator.
+        </p>
+        <ol className={styles.tokenHelpSteps}>
+          <li>In Portainer, open Containers and select the healthy Magent container.</li>
+          <li>
+            Open Console, choose command <code>/bin/ash</code> and user <code>magent</code>, then connect.
+          </li>
+          <li>Run the command below, then copy its output into the Setup token field on this page.</li>
+        </ol>
+        <label htmlFor="setup-token-command">Container console command</label>
+        <textarea
+          ref={commandField}
+          id="setup-token-command"
+          className={styles.tokenCommand}
+          readOnly
+          rows={3}
+          spellCheck={false}
+          value={SETUP_TOKEN_COMMAND}
+        />
+        <button type="button" onClick={() => void copyCommand()}>
+          Copy command
+        </button>
+        <p role="status" aria-live="polite" className={styles.copyStatus}>
+          {copyStatus}
+        </p>
+        <p>
+          Keep the token private. Anyone with it and access to this installation can create the first administrator. The
+          command stops returning it once an administrator exists.
+        </p>
+        <p>
+          For a manual deployment, use the <code>SETUP_TOKEN</code> from your deployment environment.
+        </p>
+      </dialog>
+    </div>
+  );
+}