811b23cd6b
useSubmit holds the idle, sending, done and error state and the request flow that six forms each wrote out; FormResult shows the success line and the problem panel; FormStack is the column the link, claude-login, inference and limits forms each styled by hand. The create-agent, link account, backend-env and agent-input forms use the submit flow; the link, claude-login, inference and limits forms use FormStack.
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
// <LinkGithubAccountForm> — writes a GitHub personal access token for one
|
|
// agent into the swarm secret store.
|
|
// PUTs `/api/hives/{hive}/agents/{agent}/github-account` — 204 on success,
|
|
// 400/409/500 as `problem+json`, shown via `ApiErrorPanel` like
|
|
// `LinkForgeAccountForm`.
|
|
//
|
|
// One token per agent. A blind set: no route hands a token back.
|
|
// Whether one is stored shows on the agent panel (`LinkedAccounts`).
|
|
import { useState } from "preact/hooks";
|
|
import { Panel } from "../ui/panel/Panel.js";
|
|
import { TextField } from "../ui/text-field/TextField.js";
|
|
import { Button } from "../ui/button/Button.js";
|
|
import { ExternalLink } from "../ui/external-link/ExternalLink.js";
|
|
import { FormStack } from "../ui/form-stack/FormStack.js";
|
|
import { FormResult } from "../ui/submit/FormResult.js";
|
|
import { useSubmit } from "../ui/submit/useSubmit.js";
|
|
|
|
export function LinkGithubAccountForm({
|
|
hive,
|
|
agent,
|
|
onClose,
|
|
}: {
|
|
hive: string;
|
|
agent: string;
|
|
onClose?: () => void;
|
|
}) {
|
|
const [token, setToken] = useState("");
|
|
const { state, submitting, run } = useSubmit();
|
|
|
|
function submit(e: Event) {
|
|
e.preventDefault();
|
|
void run(
|
|
() =>
|
|
fetch(
|
|
`/api/hives/${encodeURIComponent(hive)}/agents/${encodeURIComponent(agent)}/github-account`,
|
|
{
|
|
method: "PUT",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({ token }),
|
|
},
|
|
),
|
|
// The store holds the token; nothing here needs it.
|
|
{ onDone: () => setToken("") },
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Panel
|
|
title={`link a github account — ${agent}`}
|
|
icon="🔗"
|
|
onClose={onClose}
|
|
>
|
|
<p>
|
|
Writes the token to the swarm secret store. The agent fetches it within
|
|
two minutes, and its <code>gh</code> and <code>git push</code> to
|
|
github.com then authenticate with it. Use a dedicated bot account and a
|
|
minimally scoped token, created at{" "}
|
|
<ExternalLink href="https://github.com/settings/tokens">
|
|
github.com/settings/tokens
|
|
</ExternalLink>
|
|
; GitHub notifications also need the <code>notifications</code> scope.
|
|
</p>
|
|
<FormStack onSubmit={submit}>
|
|
<TextField
|
|
id="github-account-token"
|
|
label="personal access token"
|
|
type="password"
|
|
value={token}
|
|
required
|
|
onInput={setToken}
|
|
/>
|
|
<Button variant="primary" type="submit" disabled={submitting}>
|
|
{submitting ? "linking…" : "link account"}
|
|
</Button>
|
|
</FormStack>
|
|
<FormResult
|
|
state={state}
|
|
done={() => (
|
|
<>
|
|
stored a github token for <strong>{agent}</strong>
|
|
</>
|
|
)}
|
|
failed="failed to link the account"
|
|
/>
|
|
</Panel>
|
|
);
|
|
}
|