92 lines
3.4 KiB
TypeScript
92 lines
3.4 KiB
TypeScript
"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>
|
|
);
|
|
}
|