diff --git a/app/src/accounts/AccountSummary.tsx b/app/src/accounts/AccountSummary.tsx
index e9f0a18d..2eacf7fa 100644
--- a/app/src/accounts/AccountSummary.tsx
+++ b/app/src/accounts/AccountSummary.tsx
@@ -172,7 +172,7 @@ export default function AccountSummary() {
- HPKE Configs
+ Collector Credentials
diff --git a/app/src/collector-credentials/CollectorCredentialForm.tsx b/app/src/collector-credentials/CollectorCredentialForm.tsx
index cac92206..130cc6b7 100644
--- a/app/src/collector-credentials/CollectorCredentialForm.tsx
+++ b/app/src/collector-credentials/CollectorCredentialForm.tsx
@@ -6,6 +6,7 @@ import React, {
} from "react";
import {
Button,
+ Card,
Col,
FormControl,
FormGroup,
@@ -15,6 +16,7 @@ import {
import { KeyFill } from "react-bootstrap-icons";
import { useFetcher } from "react-router-dom";
import { formikErrors } from "../ApiClient";
+import { CopyCode } from "../util";
export default function CollectorCredentialForm() {
const fetcher = useFetcher();
@@ -57,61 +59,87 @@ export default function CollectorCredentialForm() {
: { name: undefined, hpke_config: undefined },
);
- return (
-
+ const onNameChange = React.useCallback(
+ (event: ChangeEvent) => setName(event.target.value),
+ [setName],
+ );
+
+ if (fetcher.data && "token" in fetcher.data) {
+ return (
-
- DAP-encoded HPKE config file
-
- {errors.hpke_config ? (
-
- {errors.hpke_config}
-
- ) : null}
-
-
-
-
- Config Name
- ) =>
- setName(event.target.value),
- [setName],
- )}
- isInvalid={!!errors.name}
- />
- {errors.name ? (
-
- {errors.name}
-
- ) : null}
-
-
-
-
-
-
-
+
+
+ Collector Auth Token
+
+
+
+ Store this somewhere safe, like a password manager or secrets
+ vault. Divvi Up does not store a copy.
+
+
+
+
-
- );
+ );
+ } else {
+ return (
+
+
+
+
+ DAP-encoded HPKE config file
+
+ {errors.hpke_config ? (
+
+ {errors.hpke_config}
+
+ ) : null}
+
+
+
+
+ Config Name
+
+ {errors.name ? (
+
+ {errors.name}
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+ );
+ }
}
diff --git a/app/src/collector-credentials/CollectorCredentialList.tsx b/app/src/collector-credentials/CollectorCredentialList.tsx
index bb88bf26..cd555e26 100644
--- a/app/src/collector-credentials/CollectorCredentialList.tsx
+++ b/app/src/collector-credentials/CollectorCredentialList.tsx
@@ -3,7 +3,14 @@ import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import { AccountBreadcrumbs, WithAccount } from "../util";
-import { Check, PencilFill, Key, Trash } from "react-bootstrap-icons";
+import {
+ Check,
+ PencilFill,
+ Key,
+ Trash,
+ CheckCircle,
+ XCircle,
+} from "react-bootstrap-icons";
import { Suspense, useCallback, useEffect, useState } from "react";
import {
Await,
@@ -33,7 +40,7 @@ export default function CollectorCredentials() {
}>
{(account) => account.name}
{" "}
- HPKE Configs
+ Collector Credentials
@@ -54,7 +61,7 @@ export default function CollectorCredentials() {
function Breadcrumbs() {
return (
- HPKE Configs
+ Collector Credentials
);
}
@@ -72,6 +79,7 @@ function CollectorCredentialList() {
KEM |
KDF |
AEAD |
+ Has token |
Created |
|
@@ -128,7 +136,7 @@ function Name({
return (
{collectorCredential.name ||
- `HPKE Config ${collectorCredential.hpke_config.id}`}{" "}
+ `Collector Credential ${collectorCredential.hpke_config.id}`}{" "}