swarm-ui: add CheckboxField and use it for the issue report toggle and the account delete option

frontend/packages/swarm-ui/src/agent/detail/LinkedAccounts.tsx

@@ -13,6 +13,7 @@ import { useEffect, useState } from "preact/hooks";
 import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
 import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
 import { Badge } from "@hive/shared/badge.js";
+import { CheckboxField } from "../../ui/checkbox-field/CheckboxField.js";
 import { ConfirmDialog } from "../../ui/confirm-dialog/ConfirmDialog.js";
 import { accountKindLabel } from "./account-kind.js";
 import "./LinkedAccounts.css";
@@ -136,17 +137,12 @@ export function LinkedAccounts({
             removed from the swarm secret store. The agent is not told.
           </p>
           {deleteTarget.kind === "matrix" ? (
-            <label>
-              <input
-                type="checkbox"
-                checked={revoke}
-                onChange={(e) =>
-                  setRevoke((e.target as HTMLInputElement).checked)
-                }
-              />{" "}
-              also log the token out at the homeserver; if that fails, the
-              account is kept
-            </label>
+            <CheckboxField
+              id="linked-accounts-revoke"
+              label="also log the token out at the homeserver; if that fails, the account is kept"
+              checked={revoke}
+              onChange={setRevoke}
+            />
           ) : null}
           {deleteError ? (
             <ApiErrorPanel context="delete failed" problem={deleteError} />