feat:turning password generators into list

Author: martinheidegger

scripts/import-words

@@ -5,13 +5,14 @@ const BASE = new URL("..", import.meta.url);
 
 for (const wordSet of [
   {
+    humanName: "Words",
     dictFile: "dict-words.txt",
     outFile: "src/utils/password-dict-words.ts",
     constName: "passwordWords",
     targetLength: 37,
   },
 ]) {
-  const { dictFile, targetLength, outFile, constName } = wordSet;
+  const { humanName, dictFile, targetLength, outFile, constName } = wordSet;
   const wordlist = (await readFile(new URL(dictFile, BASE), "utf-8"))
     .split("\n")
     .sort((a, b) =>
@@ -74,7 +75,7 @@ for (const wordSet of [
 import { RandomWords } from '@/utils/crypto';
 
 const words: string[][] = ${JSON.stringify(words, null, 2)}
-export const ${constName} = new RandomWords(${targetLength}, [
+export const ${constName} = new RandomWords("${humanName}", ${targetLength}, [
 `;
   for (const permutation of permutate()) {
     str += `  [${permutation.map((len) => len - shortest).join(", ")}],\n`;

src/components/safeDoc-react/NewDocDialog.tsx

@@ -1,8 +1,7 @@
 import type { DocTypeDefinition } from "@/utils/codecs";
 import { useEffect, useMemo, useRef, useState, type Ref } from "react";
 import { InputWithLabel } from "@/components/form/InputWithLabel";
-import { passwordBase32 } from "@/utils/password-base32";
-import { passwordWords } from "@/utils/password-dict-words";
+import { passwordGenerators } from "@/utils/password-generators";
 import { applyRef } from "@/utils/applyRef";
 import { SelectWithLabel } from "@/components/form/SelectWithLabel";
 import { DocButtonList } from "./DocButtonList";
@@ -18,21 +17,22 @@ export function NewDocDialog({
   ref: parentRef,
   onSuccess,
 }: NewDocDialogProps) {
-  const [idType, setIdType] = useState<"base32" | "words">("base32");
+  const [idType, setIdType] = useState<number>(0);
   const [type, setType] = useState<DocTypeDefinition>(types[0]);
   const [lastRefresh, setLastRefresh] = useState<number>(Date.now());
   const random = useMemo(
     () =>
       createRandom(
         Math.ceil(
-          Math.max(passwordBase32.entropyNeeded, passwordWords.entropyNeeded) /
-            8,
-        ),
+          passwordGenerators.reduce((maxNeeded, { entropyNeeded }) => Math.max(maxNeeded, entropyNeeded), 0) / 8
+        )
       ),
     [lastRefresh],
   );
   const passwordGenerator = useMemo(
-    () => (idType === "base32" ? passwordBase32 : passwordWords),
+    () => {
+      return passwordGenerators[idType]
+    },
     [idType],
   );
   const password = useMemo(
@@ -51,9 +51,7 @@ export function NewDocDialog({
         onChange={(e) => {
           const typeForm = e.currentTarget.elements;
           setIdType(
-            (typeForm["idType" as any] as any as RadioNodeList).value as any as
-              | "base32"
-              | "words",
+            parseInt((typeForm["idType" as any] as any as RadioNodeList).value, 10),
           );
           setType(
             types.find((type) => {
@@ -109,20 +107,19 @@ export function NewDocDialog({
             <em>"Base 32"-variant</em> is a bit shorter but harder to read and
             enter. Choose as you like.
           </p>
-          <div style={{ display: "flex", flexDirection: "row" }}>
-            <InputWithLabel
-              type="radio"
-              name="idType"
-              value="base32"
-              label="Base 32"
-              defaultChecked
-            />
-            <InputWithLabel
-              type="radio"
-              name="idType"
-              value="words"
-              label="Words"
-            />
+          <div style={{ display: "flex", flexDirection: "column" }}>
+            {
+              passwordGenerators.map(({ humanName }, num) => 
+                <InputWithLabel
+                  type="radio"
+                  name="idType"
+                  key={num}
+                  value={num}
+                  label={humanName}
+                  defaultChecked={num === 0}
+                />
+              )
+            }
           </div>
           <InputWithLabel
             type="text"

src/utils/crypto.ts

@@ -117,6 +117,7 @@ export class RandomWeighted<T extends { weight: number }> {
 }
 
 export interface PasswordGenerator {
+  humanName: string;
   targetLength: number;
   entropyNeeded: number;
   entropyProvided: number;
@@ -129,6 +130,7 @@ export class RandomWords implements PasswordGenerator {
   entropyProvided: number = -1; // TODO
 
   constructor(
+    public humanName: string,
     public targetLength: number,
     public words: string[][][],
   ) {

src/utils/password-base32.ts

@@ -12,7 +12,7 @@ class RandomBase32 implements PasswordGenerator {
   entropyNeeded: number;
   entropyProvided: number;
 
-  constructor(bytes: number) {
+  constructor(public humanName: string, bytes: number) {
     const bits = bytes * 8;
     const buffer = new Uint8Array(bytes);
     this.buffer = buffer;
@@ -26,4 +26,4 @@ class RandomBase32 implements PasswordGenerator {
   }
 }
 
-export const passwordBase32 = new RandomBase32(12);
+export const passwordBase32 = new RandomBase32("Base 32", 12);

src/utils/password-dict-words.ts

@@ -43061,6 +43061,7 @@ const words: string[][] = [
   ],
 ];
 export const passwordWords = new RandomWords(
+  "Words",
   37,
   [
     [5, 5, 5, 3, 0],

src/utils/password-generators.ts

@@ -0,0 +1,7 @@
+import { passwordBase32 } from "@/utils/password-base32";
+import { passwordWords } from "@/utils/password-dict-words";
+
+export const passwordGenerators = [
+    passwordBase32,
+    passwordWords,
+];