remove all mention of hpke configs in the app except for the upload form

divviup · Oct 14, 2023 · 4d8f35b · 4d8f35b
1 parent 783be57
commit 4d8f35b
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 68 deletions.
diff --git a/app/src/accounts/AccountSummary.tsx b/app/src/accounts/AccountSummary.tsx
@@ -172,7 +172,7 @@ export default function AccountSummary() {
 
               <LinkContainer to="collector_credentials">
                 <ListGroup.Item action>
-                  <KeyFill /> HPKE Configs
+                  <KeyFill /> Collector Credentials
                 </ListGroup.Item>
               </LinkContainer>
             </ListGroup>

diff --git 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 (
-    <fetcher.Form method="post">
+  const onNameChange = React.useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => setName(event.target.value),
+    [setName],
+  );
+
+  if (fetcher.data && "token" in fetcher.data) {
+    return (
       <Row>
         <Col sm="5">
-          <FormGroup>
-            <FormLabel>DAP-encoded HPKE config file</FormLabel>
-            <FormControl
-              type="file"
-              onChange={onChange}
-              isInvalid={!!errors.hpke_config}
-              ref={ref}
-            />
-            {errors.hpke_config ? (
-              <FormControl.Feedback type="invalid">
-                {errors.hpke_config}
-              </FormControl.Feedback>
-            ) : null}
-          </FormGroup>
-        </Col>
-        <Col sm="5">
-          <FormGroup controlId="name">
-            <FormLabel>Config Name</FormLabel>
-            <FormControl
-              type="text"
-              name="name"
-              data-1p-ignore
-              value={name}
-              onChange={React.useCallback(
-                (event: ChangeEvent<HTMLInputElement>) =>
-                  setName(event.target.value),
-                [setName],
-              )}
-              isInvalid={!!errors.name}
-            />
-            {errors.name ? (
-              <FormControl.Feedback type="invalid">
-                {errors.name}
-              </FormControl.Feedback>
-            ) : null}
-          </FormGroup>
-          <input type="hidden" name="hpke_config" value={collectorCredential} />
-        </Col>
-        <Col sm="2">
-          <FormGroup controlId="submit" className="my-3">
-            <Button
-              variant="primary"
-              type="submit"
-              className="my-3"
-              disabled={fetcher.state === "submitting"}
-            >
-              <KeyFill /> Upload
-            </Button>
-          </FormGroup>
+          <Card className="p-3 my-3 shadow">
+            <Card.Body>
+              <Card.Title>Collector Auth Token</Card.Title>
+              <CopyCode code={fetcher.data.token} />
+              <small className="d-block">
+                <em>
+                  Store this somewhere safe, like a password manager or secrets
+                  vault. Divvi Up does not store a copy.
+                </em>
+              </small>
+            </Card.Body>
+          </Card>
         </Col>
       </Row>
-    </fetcher.Form>
-  );
+    );
+  } else {
+    return (
+      <fetcher.Form method="post">
+        <Row>
+          <Col sm="5">
+            <FormGroup>
+              <FormLabel>DAP-encoded HPKE config file</FormLabel>
+              <FormControl
+                type="file"
+                onChange={onChange}
+                isInvalid={!!errors.hpke_config}
+                ref={ref}
+              />
+              {errors.hpke_config ? (
+                <FormControl.Feedback type="invalid">
+                  {errors.hpke_config}
+                </FormControl.Feedback>
+              ) : null}
+            </FormGroup>
+          </Col>
+          <Col sm="5">
+            <FormGroup controlId="name">
+              <FormLabel>Config Name</FormLabel>
+              <FormControl
+                type="text"
+                name="name"
+                data-1p-ignore
+                value={name}
+                onChange={onNameChange}
+                isInvalid={!!errors.name}
+              />
+              {errors.name ? (
+                <FormControl.Feedback type="invalid">
+                  {errors.name}
+                </FormControl.Feedback>
+              ) : null}
+            </FormGroup>
+            <input
+              type="hidden"
+              name="hpke_config"
+              value={collectorCredential}
+            />
+          </Col>
+          <Col sm="2">
+            <FormGroup controlId="submit" className="my-3">
+              <Button
+                variant="primary"
+                type="submit"
+                className="my-3"
+                disabled={fetcher.state === "submitting"}
+              >
+                <KeyFill /> Upload
+              </Button>
+            </FormGroup>
+          </Col>
+        </Row>
+      </fetcher.Form>
+    );
+  }
 }
diff --git 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() {
             <Suspense fallback={<Placeholder animation="glow" xs={6} />}>
               <WithAccount>{(account) => account.name}</WithAccount>
             </Suspense>{" "}
-            HPKE Configs
+            Collector Credentials
           </h1>
         </Col>
       </Row>
@@ -54,7 +61,7 @@ export default function CollectorCredentials() {
 function Breadcrumbs() {
   return (
     <AccountBreadcrumbs>
-      <Breadcrumb.Item active>HPKE Configs</Breadcrumb.Item>
+      <Breadcrumb.Item active>Collector Credentials</Breadcrumb.Item>
     </AccountBreadcrumbs>
   );
 }
@@ -72,6 +79,7 @@ function CollectorCredentialList() {
           <td>KEM</td>
           <td>KDF</td>
           <td>AEAD</td>
+          <td>Has token</td>
           <td>Created</td>
           <td></td>
         </tr>
@@ -128,7 +136,7 @@ function Name({
     return (
       <span onClick={edit}>
         {collectorCredential.name ||
-          `HPKE Config ${collectorCredential.hpke_config.id}`}{" "}
+          `Collector Credential ${collectorCredential.hpke_config.id}`}{" "}
         <Button
           variant="outline-secondary"
           onClick={edit}
@@ -181,12 +189,12 @@ function DeleteButton({
       <Modal show={show} onHide={close}>
         <Modal.Header closeButton>
           <Modal.Title>
-            Confirm HPKE Config Deletion {collectorCredential.name}
+            Confirm Collector Credential Deletion {collectorCredential.name}
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          This HPKE Config will immediately be inactivated and cannot be used to
-          create new tasks. Existing tasks will continue to function.
+          This collector credential will immediately be inactivated and cannot
+          be used to create new tasks. Existing tasks will continue to function.
         </Modal.Body>
         <Modal.Footer>
           <Button variant="secondary" onClick={close}>
@@ -220,6 +228,7 @@ function CollectorCredentialRow({
       <td>{collectorCredential.hpke_config.kem_id}</td>
       <td>{collectorCredential.hpke_config.kdf_id}</td>
       <td>{collectorCredential.hpke_config.aead_id}</td>
+      <td>{collectorCredential.token_hash ? <CheckCircle /> : <XCircle />}</td>
       <td>
         <RelativeTime time={collectorCredential.created_at} />
       </td>

diff --git a/app/src/tasks/TaskDetail/TaskPropertyTable.tsx b/app/src/tasks/TaskDetail/TaskPropertyTable.tsx
@@ -117,7 +117,7 @@ export default function TaskPropertyTable() {
             </Suspense>
           </ListGroup.Item>
           <ListGroup.Item>
-            HPKE Config:{" "}
+            Collector Crededential:{" "}
             <Suspense fallback={<Placeholder animation="glow" xs={6} />}>
               <Await resolve={collectorCredential}>
                 {(collectorCredential) => (

diff --git a/app/src/tasks/TaskForm/HelpText.tsx b/app/src/tasks/TaskForm/HelpText.tsx
@@ -151,14 +151,13 @@ export const HELPS: {
   },
 
   collector_credential_id: {
-    title: "Collector HPKE Config",
-    short:
-      "The collector's HPKE config. Results will be encrypted using the config's public key.",
+    title: "Collector Credentials",
+    short: "Credentials that can be used to retrieve aggregates for this task.",
     long: (
       <p>
-        Select a previously uploaded HPKE configuration. You will need to use
-        the config&apos;s corresponding private key when collecting aggregate
-        results.
+        Select a previously uploaded collector credential. You will need to use
+        the config&apos;s corresponding private key and auth token when
+        collecting aggregate results.
       </p>
     ),
   },