feat(web-ui): add optional ballot text summary (#56)

Author: aduh95

packages/web-ui/src/App.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
+  import BallotSummary from "./BallotSummary.svelte";
   import CopyEncryptedBallotForm from "./CopyEncryptedBallotForm.svelte";
   import FillBallotForm from "./FillBallotForm.svelte";
   import GitHubCredentials from "./GitHubCredentials.svelte";
   import FindPrForm from "./FindPRForm.svelte";
 
-  let encryptDataPromise = new Promise(() => {}) as Promise<never>;
+  import encryptData from "@node-core/caritat-crypto/encrypt";
+  import uint8ArrayToBase64 from "./uint8ArrayToBase64.ts";
+  const textEncoder =
+    typeof TextEncoder === "undefined" ? { encode() {} } : new TextEncoder();
+
+  let ballot: string | undefined;
+  let encryptDataPromise = new Promise<never>(() => {});
+  let shouldSummarize = false;
+  let ballotSummary = new Promise<never>(() => {});
 
   let url = globalThis.location?.hash.slice(1);
 
@@ -23,16 +32,32 @@
     step = url ? Math.max(step, 1) : 0;
   });
 
-  function registerEncryptedBallot(promise) {
-    encryptDataPromise = promise;
-    promise.then(
-      () => {
-        step = 2;
-      },
-      () => {
-        step = Math.min(step, 1);
-      }
-    );
+  function maybeUpdateSummary() {
+    ballotSummary = shouldSummarize && ballot ? (async () => {
+      // Lazy-loading as the summary is only a nice-to-have.
+      const { getSummarizedBallot } = await import("./ballotSummary.ts");
+      return getSummarizedBallot(ballot);
+    })() : new Promise<never>(() => {});
+  }
+  function registerBallot(ballotContent, publicKey) {
+    encryptDataPromise = (async () => {
+        const { encryptedSecret, saltedCiphertext } = await encryptData(
+          textEncoder.encode(ballotContent) as Uint8Array,
+          await publicKey
+        );
+        return JSON.stringify({
+          encryptedSecret: uint8ArrayToBase64(new Uint8Array(encryptedSecret)),
+          data: uint8ArrayToBase64(saltedCiphertext),
+        });
+      })();
+    ballot = ballotContent;
+    step = 2;
+    maybeUpdateSummary();
+  }
+
+  function onSummaryToggle(e) {
+    shouldSummarize = e.newState === 'open';
+    maybeUpdateSummary();
   }
 </script>
 
@@ -48,8 +73,11 @@
   <FindPrForm {url} />
 </details>
 <details open={step === 1}>
-  <FillBallotForm {url} {username} {token} {registerEncryptedBallot} />
+  <FillBallotForm {url} {username} {token} {registerBallot} />
+</details>
+<details open={shouldSummarize} on:toggle={onSummaryToggle}>
+  <BallotSummary {ballotSummary} />
 </details>
 <details open={step === 2}>
-  <CopyEncryptedBallotForm {encryptDataPromise} {url} />
+  <CopyEncryptedBallotForm {ballot} {encryptDataPromise} {url} />
 </details>

packages/web-ui/src/BallotSummary.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  export let ballotSummary: Promise<string | never>;
+</script>
+
+<summary>Ballot summary (requires downloading YAML parser)</summary>
+
+{#await ballotSummary}
+  <textarea readonly>Getting summary… </textarea>
+{:then data}
+  <textarea readonly>{data}</textarea>
+{:catch error}
+  An error occurred: {error?.message ?? error}
+{/await}
+

packages/web-ui/src/FillBallotForm.svelte

@@ -1,32 +1,16 @@
 <script lang="ts">
   import { beforeUpdate } from "svelte";
 
-  import encryptData from "@node-core/caritat-crypto/encrypt";
-  import uint8ArrayToBase64 from "./uint8ArrayToBase64.ts";
   import fetchFromGitHub from "./fetchDataFromGitHub.ts";
 
-  export let url, username, token, registerEncryptedBallot;
+  export let url, username, token, registerBallot;
 
   let fetchedBallot: Promise<string>, fetchedPublicKey;
 
-  const textEncoder =
-    typeof TextEncoder === "undefined" ? { encode() {} } : new TextEncoder();
-
   function onSubmit(this: HTMLFormElement, event: SubmitEvent) {
     event.preventDefault();
     const textarea = this.elements.namedItem("ballot") as HTMLInputElement;
-    registerEncryptedBallot(
-      (async () => {
-        const { encryptedSecret, saltedCiphertext } = await encryptData(
-          textEncoder.encode(textarea.value) as Uint8Array,
-          await fetchedPublicKey
-        );
-        return JSON.stringify({
-          encryptedSecret: uint8ArrayToBase64(new Uint8Array(encryptedSecret)),
-          data: uint8ArrayToBase64(saltedCiphertext),
-        });
-      })()
-    );
+    registerBallot(textarea.value, fetchedPublicKey);
   }
 
   fetchedBallot = fetchedPublicKey = Promise.reject("no data");
@@ -47,7 +31,7 @@
     {#await fetchedPublicKey}
       <button type="submit" disabled>Loading public key…</button>
     {:then}
-      <button type="submit">Encrypt ballot</button>
+      <button type="submit">Next</button>
     {/await}
   </form>
 {:catch error}

packages/web-ui/src/ballotSummary.ts

@@ -0,0 +1,18 @@
+import * as yaml from "js-yaml";
+import {
+  getSummarizedBallot as _getSummarizedBallot,
+  summarizeCondorcetBallotForVoter,
+} from "@node-core/caritat/summary/condorcet";
+
+export function getSummarizedBallot(ballotStr: string) {
+  const ballot = yaml.load(ballotStr) as { preferences: Array<{ title: string; score: number }> };
+  if (!Array.isArray(ballot?.preferences)) {
+    throw new Error("Ballot does not contain a list of preferences");
+  }
+  return summarizeCondorcetBallotForVoter(
+    _getSummarizedBallot({
+      voter: {},
+      preferences: ballot.preferences.map(({ title, score }) => [title, score]),
+    }),
+  );
+}