Make a Form element to make creating Forms easier.

src/elements/Form.ts

@@ -0,0 +1,18 @@
+import { makeElement } from "z-makeelement";
+
+export function Form(
+  children: Element[],
+  submit: (form: HTMLFormElement) => unknown,
+): HTMLFormElement {
+  const form = makeElement({
+    tag: "form",
+    children: children,
+  }) as HTMLFormElement;
+
+  form.addEventListener("submit", (e: Event) => {
+    e.preventDefault();
+    submit(form);
+  });
+
+  return form;
+}

src/pages/Login.ts

@@ -1,3 +1,4 @@
+import { Form } from "../elements/Form";
 import { Margin } from "../elements/Margin";
 import { MarginInline } from "../elements/MarginInline";
 import { Page } from "../types/Page";
@@ -12,9 +13,8 @@ export class LoginPage extends Page {
     super();
   }
   async render(): Promise<void> {
-    const tokenLoginForm = makeElement({
+    const tokenLoginForm = Form(
-      tag: "form",
+      [
-      children: [
         Margin(
           makeElement({
             tag: "input",
@@ -38,11 +38,28 @@ export class LoginPage extends Page {
           }),
         ),
       ],
-    }) as HTMLFormElement;
+      async (form: HTMLFormElement) => {
+        const formData = new FormData(form);
+        const token = formData.get("token");
+        this.state.token = token as string;
 
-    const usernameLoginForm = makeElement({
+        try {
-      tag: "form",
+          await lookupSelf();
-      children: [
+          await this.router.changePage("HOME");
+        } catch (e: unknown) {
+          const error = e as Error;
+          document.getElementById("tokenInput").classList.add("uk-form-danger");
+          if (error.message == "permission denied") {
+            setErrorText(i18next.t("token_login_error"));
+          } else {
+            setErrorText(error.message);
+          }
+        }
+      },
+    );
+
+    const usernameLoginForm = Form(
+      [
         Margin(
           makeElement({
             tag: "input",
@@ -80,7 +97,24 @@ export class LoginPage extends Page {
           }),
         ),
       ],
-    }) as HTMLFormElement;
+      async (form: HTMLFormElement) => {
+        const formData = new FormData(form);
+
+        try {
+          const res = await usernameLogin(
+            formData.get("username") as string,
+            formData.get("password") as string,
+          );
+          this.state.token = res;
+          await this.router.changePage("HOME");
+        } catch (e: unknown) {
+          const error = e as Error;
+          document.getElementById("usernameInput").classList.add("uk-form-danger");
+          document.getElementById("passwordInput").classList.add("uk-form-danger");
+          setErrorText(error.message);
+        }
+      },
+    );
 
     await this.router.setPageContent(
       makeElement({
@@ -130,44 +164,6 @@ export class LoginPage extends Page {
         ],
       }),
     );
-
-    tokenLoginForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const formData = new FormData(tokenLoginForm);
-      const token = formData.get("token");
-      this.state.token = token as string;
-
-      try {
-        await lookupSelf();
-        await this.router.changePage("HOME");
-      } catch (e: unknown) {
-        const error = e as Error;
-        document.getElementById("tokenInput").classList.add("uk-form-danger");
-        if (error.message == "permission denied") {
-          setErrorText(i18next.t("token_login_error"));
-        } else {
-          setErrorText(error.message);
-        }
-      }
-    });
-    usernameLoginForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const formData = new FormData(usernameLoginForm);
-
-      try {
-        const res = await usernameLogin(
-          formData.get("username") as string,
-          formData.get("password") as string,
-        );
-        this.state.token = res;
-        await this.router.changePage("HOME");
-      } catch (e: unknown) {
-        const error = e as Error;
-        document.getElementById("usernameInput").classList.add("uk-form-danger");
-        document.getElementById("passwordInput").classList.add("uk-form-danger");
-        setErrorText(error.message);
-      }
-    });
   }
 
   get name(): string {

src/pages/PwGen.ts

@@ -1,4 +1,5 @@
 import { CopyableInputBox, CopyableInputBoxType } from "../elements/CopyableInputBox";
+import { Form } from "../elements/Form";
 import { Margin } from "../elements/Margin";
 import { Option } from "../elements/Option";
 import { Page } from "../types/Page";
@@ -90,9 +91,8 @@ export class PwGenPage extends Page {
       ],
     }) as HTMLSelectElement;
 
-    this.passwordForm = makeElement({
+    this.passwordForm = Form(
-      tag: "form",
+      [
-      children: [
         this.passwordLengthTitle,
         Margin(this.passwordLengthRange),
         Margin(this.passwordAlphabet),
@@ -106,9 +106,8 @@ export class PwGenPage extends Page {
           }),
         ),
       ],
-    }) as HTMLFormElement;
+      (_) => this.updatePassword(),
-
+    );
-    this.passwordForm.addEventListener("submit", (e) => this.formEvent(e));
     await this.router.setPageContent(this.passwordForm);
   }
 
@@ -119,11 +118,6 @@ export class PwGenPage extends Page {
     });
   }
 
-  formEvent(e: Event): void {
-    e.preventDefault();
-    this.updatePassword();
-  }
-
   updatePassword(): void {
     this.passwordLengthTitle.innerText = this.getPasswordLengthText();
     this.passwordBox.setText(

src/pages/Secrets/KeyValue/KeyValueNew.ts

@@ -1,3 +1,4 @@
+import { Form } from "../../../elements/Form";
 import { Page } from "../../../types/Page";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { createOrUpdateSecret } from "../../../api/kv/createOrUpdateSecret";
@@ -14,13 +15,10 @@ export class KeyValueNewPage extends Page {
     await this.router.changePage("KEY_VALUE_VIEW");
   }
 
-  addKVNewForm: HTMLFormElement;
-
   async render(): Promise<void> {
-    this.addKVNewForm = makeElement({
+    await this.router.setPageContent(
-      tag: "form",
+      Form(
-      id: "addKVNewForm",
+        [
-      children: [
           makeElement({
             tag: "div",
             class: "uk-margin",
@@ -49,17 +47,13 @@ export class KeyValueNewPage extends Page {
             },
           }),
         ],
-    }) as HTMLFormElement;
+        async (form: HTMLFormElement) => await this.newKVSecretHandleForm(form),
-    await this.router.setPageContent(this.addKVNewForm);
+      ),
-
+    );
-    this.addKVNewForm.addEventListener("submit", async (e: Event) => {
-      e.preventDefault();
-      await this.newKVSecretHandleForm();
-    });
   }
 
-  async newKVSecretHandleForm(): Promise<void> {
+  async newKVSecretHandleForm(form: HTMLFormElement): Promise<void> {
-    const formData = new FormData(this.addKVNewForm);
+    const formData = new FormData(form);
     const path = formData.get("path") as string;
     let keyData = {};
 

src/pages/Secrets/NewEngines/NewKVEngine.ts

@@ -1,3 +1,4 @@
+import { Form } from "../../../elements/Form";
 import { Margin } from "../../../elements/Margin";
 import { Option } from "../../../elements/Option";
 import { Page } from "../../../types/Page";
@@ -14,9 +15,9 @@ export class NewKVEnginePage extends Page {
     await this.router.changePage("SECRETS_HOME");
   }
   async render(): Promise<void> {
-    const newEngineForm = makeElement({
+    await this.router.setPageContent(
-      tag: "form",
+      Form(
-      children: [
+        [
           Margin(
             makeElement({
               tag: "input",
@@ -56,13 +57,8 @@ export class NewKVEnginePage extends Page {
             },
           }),
         ],
-    }) as HTMLFormElement;
+        async (form: HTMLFormElement) => {
-
+          const formData = new FormData(form);
-    await this.router.setPageContent(newEngineForm);
-
-    newEngineForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const formData = new FormData(newEngineForm);
 
           const name = formData.get("name") as string;
           const version = formData.get("version") as string;
@@ -82,7 +78,9 @@ export class NewKVEnginePage extends Page {
             const error = e as Error;
             setErrorText(error.message);
           }
-    });
+        },
+      ),
+    );
   }
   get name(): string {
     return i18next.t("new_kv_engine_title");

src/pages/Secrets/NewEngines/NewTOTPEngine.ts

@@ -1,3 +1,4 @@
+import { Form } from "../../../elements/Form";
 import { Margin } from "../../../elements/Margin";
 import { Page } from "../../../types/Page";
 import { makeElement } from "z-makeelement";
@@ -13,9 +14,9 @@ export class NewTOTPEnginePage extends Page {
     await this.router.changePage("SECRETS_HOME");
   }
   async render(): Promise<void> {
-    const newEngineForm = makeElement({
+    await this.router.setPageContent(
-      tag: "form",
+      Form(
-      children: [
+        [
           Margin(
             makeElement({
               tag: "input",
@@ -42,13 +43,8 @@ export class NewTOTPEnginePage extends Page {
             },
           }),
         ],
-    }) as HTMLFormElement;
+        async (form: HTMLFormElement) => {
-
+          const formData = new FormData(form);
-    await this.router.setPageContent(newEngineForm);
-
-    newEngineForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const formData = new FormData(newEngineForm);
 
           const name = formData.get("name") as string;
 
@@ -64,7 +60,9 @@ export class NewTOTPEnginePage extends Page {
             const error = e as Error;
             setErrorText(error.message);
           }
-    });
+        },
+      ),
+    );
   }
   get name(): string {
     return i18next.t("new_totp_engine_title");

src/pages/Secrets/NewEngines/NewTransitEngine.ts

@@ -1,3 +1,4 @@
+import { Form } from "../../../elements/Form";
 import { Margin } from "../../../elements/Margin";
 import { Page } from "../../../types/Page";
 import { makeElement } from "z-makeelement";
@@ -13,9 +14,9 @@ export class NewTransitEnginePage extends Page {
     await this.router.changePage("SECRETS_HOME");
   }
   async render(): Promise<void> {
-    const newEngineForm = makeElement({
+    await this.router.setPageContent(
-      tag: "form",
+      Form(
-      children: [
+        [
           Margin(
             makeElement({
               tag: "input",
@@ -42,13 +43,8 @@ export class NewTransitEnginePage extends Page {
             },
           }),
         ],
-    }) as HTMLFormElement;
+        async (form: HTMLFormElement) => {
-
+          const formData = new FormData(form);
-    await this.router.setPageContent(newEngineForm);
-
-    newEngineForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const formData = new FormData(newEngineForm);
 
           const name = formData.get("name") as string;
 
@@ -64,7 +60,9 @@ export class NewTransitEnginePage extends Page {
             const error = e as Error;
             setErrorText(error.message);
           }
-    });
+        },
+      ),
+    );
   }
   get name(): string {
     return i18next.t("new_transit_engine_title");

src/pages/Secrets/TOTP/NewTOTP.ts

@@ -1,3 +1,4 @@
+import { Form } from "../../../elements/Form";
 import { Margin } from "../../../elements/Margin";
 import { MarginInline } from "../../../elements/MarginInline";
 import { Page } from "../../../types/Page";
@@ -24,9 +25,9 @@ export class NewTOTPPage extends Page {
     await this.router.changePage("TOTP");
   }
   async render(): Promise<void> {
-    const totpForm = makeElement({
+    await this.router.setPageContent(
-      tag: "form",
+      Form(
-      children: [
+        [
           Margin(
             makeElement({
               tag: "input",
@@ -81,13 +82,8 @@ export class NewTOTPPage extends Page {
             }),
           ),
         ],
-    }) as HTMLFormElement;
+        async (form: HTMLFormElement) => {
-    await this.router.setPageContent(totpForm);
+          const formData = new FormData(form);
-
-    totpForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-
-      const formData = new FormData(totpForm);
 
           const parms = {
             url: formData.get("uri") as string,
@@ -103,7 +99,9 @@ export class NewTOTPPage extends Page {
             const error = e as Error;
             setErrorText(`API Error: ${error.message}`);
           }
-    });
+        },
+      ),
+    );
   }
 
   async getPageTitle(): Promise<Element | string> {

src/pages/Secrets/Transit/NewTransitKey.ts

@@ -1,3 +1,4 @@
+import { Form } from "../../../elements/Form";
 import { Margin } from "../../../elements/Margin";
 import { Option } from "../../../elements/Option";
 import { Page } from "../../../types/Page";
@@ -12,9 +13,9 @@ export class NewTransitKeyPage extends Page {
     super();
   }
   async render(): Promise<void> {
-    const newTransitKeyForm = makeElement({
+    await this.router.setPageContent(
-      tag: "form",
+      Form(
-      children: [
+        [
           Margin(
             makeElement({
               tag: "input",
@@ -62,13 +63,8 @@ export class NewTransitKeyPage extends Page {
             },
           }),
         ],
-    }) as HTMLFormElement;
+        async (form: HTMLFormElement) => {
-
+          const formData = new FormData(form);
-    await this.router.setPageContent(newTransitKeyForm);
-
-    newTransitKeyForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const formData = new FormData(newTransitKeyForm);
 
           const name = formData.get("name") as string;
           const type = formData.get("type") as string;
@@ -84,7 +80,9 @@ export class NewTransitKeyPage extends Page {
             const error = e as Error;
             setErrorText(error.message);
           }
-    });
+        },
+      ),
+    );
   }
 
   async getPageTitle(): Promise<Element | string> {

src/pages/Secrets/Transit/TransitDecrypt.ts

@@ -1,5 +1,6 @@
 import { CopyableModal } from "../../../elements/CopyableModal";
 import { FileUploadInput } from "../../../elements/FileUploadInput";
+import { Form } from "../../../elements/Form";
 import { Margin } from "../../../elements/Margin";
 import { Page } from "../../../types/Page";
 import { SecretTitleElement } from "../SecretTitleElement";
@@ -21,14 +22,8 @@ export class TransitDecryptPage extends Page {
   transitDecryptForm: HTMLFormElement;
 
   async render(): Promise<void> {
-    await this.router.setPageContent(
+    this.transitDecryptForm = Form(
-      makeElement({
+      [
-        tag: "div",
-      }),
-    );
-    this.transitDecryptForm = makeElement({
-      tag: "form",
-      children: [
         Margin(
           makeElement({
             tag: "textarea",
@@ -73,12 +68,9 @@ export class TransitDecryptPage extends Page {
           },
         }),
       ],
-    }) as HTMLFormElement;
+      async (_) => await this.transitDecryptFormHandler(),
+    );
     await this.router.setPageContent(this.transitDecryptForm);
-    this.transitDecryptForm.addEventListener("submit", async (e: Event) => {
-      e.preventDefault();
-      await this.transitDecryptFormHandler();
-    });
   }
 
   async transitDecryptFormHandler(): Promise<void> {

src/pages/Secrets/Transit/TransitEncrypt.ts

@@ -1,5 +1,6 @@
 import { CopyableModal } from "../../../elements/CopyableModal";
 import { FileUploadInput } from "../../../elements/FileUploadInput";
+import { Form } from "../../../elements/Form";
 import { Margin } from "../../../elements/Margin";
 import { Page } from "../../../types/Page";
 import { SecretTitleElement } from "../SecretTitleElement";
@@ -19,16 +20,9 @@ export class TransitEncryptPage extends Page {
   }
 
   transitEncryptForm: HTMLFormElement;
-
   async render(): Promise<void> {
-    await this.router.setPageContent(
+    this.transitEncryptForm = Form(
-      makeElement({
+      [
-        tag: "div",
-      }),
-    );
-    this.transitEncryptForm = makeElement({
-      tag: "form",
-      children: [
         Margin(
           makeElement({
             tag: "textarea",
@@ -73,13 +67,9 @@ export class TransitEncryptPage extends Page {
           },
         }),
       ],
-    }) as HTMLFormElement;
+      async (_) => await this.transitEncryptFormHandler(),
+    );
     await this.router.setPageContent(this.transitEncryptForm);
-
-    this.transitEncryptForm.addEventListener("submit", async (e: Event) => {
-      e.preventDefault();
-      await this.transitEncryptFormHandler();
-    });
   }
 
   async transitEncryptFormHandler(): Promise<void> {

src/pages/Secrets/Transit/TransitRewrap.ts

@@ -1,4 +1,5 @@
 import { CopyableModal } from "../../../elements/CopyableModal";
+import { Form } from "../../../elements/Form";
 import { Margin } from "../../../elements/Margin";
 import { Option } from "../../../elements/Option";
 import { Page } from "../../../types/Page";
@@ -47,9 +48,8 @@ export class TransitRewrapPage extends Page {
     });
 
     await this.router.setPageContent("");
-    this.transitRewrapForm = makeElement({
+    this.transitRewrapForm = Form(
-      tag: "form",
+      [
-      children: [
         makeElement({
           tag: "select",
           name: "version",
@@ -80,13 +80,9 @@ export class TransitRewrapPage extends Page {
           },
         }),
       ],
-    }) as HTMLFormElement;
+      async (_) => await this.transitRewrapFormHandler(),
+    );
     await this.router.setPageContent(this.transitRewrapForm);
-
-    this.transitRewrapForm.addEventListener("submit", async (e: Event) => {
-      e.preventDefault();
-      await this.transitRewrapFormHandler();
-    });
   }
 
   async transitRewrapFormHandler(): Promise<void> {

src/pages/SetLanguage.ts

@@ -1,3 +1,4 @@
+import { Form } from "../elements/Form";
 import { Margin } from "../elements/Margin";
 import { Page } from "../types/Page";
 import { makeElement } from "z-makeelement";
@@ -14,10 +15,9 @@ export class SetLanguagePage extends Page {
     super();
   }
   async render(): Promise<void> {
-    const setLanguageForm = makeElement({
+    await this.router.setPageContent(
-      tag: "form",
+      Form(
-      id: "setLanguageForm",
+        [
-      children: [
           Margin(
             makeElement({
               tag: "select",
@@ -48,11 +48,8 @@ export class SetLanguagePage extends Page {
             },
           }),
         ],
-    }) as HTMLFormElement;
+        async (form: HTMLFormElement) => {
-    await this.router.setPageContent(setLanguageForm);
+          const formData = new FormData(form);
-    setLanguageForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const formData = new FormData(setLanguageForm);
 
           const language = formData.get("language") as string;
           this.state.language = language;
@@ -61,7 +58,9 @@ export class SetLanguagePage extends Page {
           this.state.pageDirection = t("language_direction");
           reloadNavBar(this.router);
           await this.router.changePage("HOME");
-    });
+        },
+      ),
+    );
   }
   get name(): string {
     return i18next.t("set_language_title");

src/pages/SetVaultURL.ts

@@ -1,3 +1,4 @@
+import { Form } from "../elements/Form";
 import { Page } from "../types/Page";
 import { makeElement } from "z-makeelement";
 
@@ -7,10 +8,8 @@ export class SetVaultURLPage extends Page {
   }
   async render(): Promise<void> {
     await this.router.setPageContent(
-      makeElement({
+      Form(
-        tag: "form",
+        [
-        id: "setVaultURLForm",
-        children: [
           makeElement({
             tag: "div",
             class: "uk-margin",
@@ -39,14 +38,13 @@ export class SetVaultURLPage extends Page {
             },
           }),
         ],
-      }),
+        async (form: HTMLFormElement) => {
-    );
+          const formData = new FormData(form);
-    document.getElementById("setVaultURLForm").addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const formData = new FormData(document.querySelector("#setVaultURLForm"));
           this.state.apiURL = formData.get("vaultURL") as string;
           await this.router.changePage("HOME");
-    });
+        },
+      ),
+    );
   }
   get name(): string {
     return "Set Vault URL";

src/pages/Unseal.ts

@@ -1,3 +1,4 @@
+import { Form } from "../elements/Form";
 import { MarginInline } from "../elements/MarginInline";
 import { Page } from "../types/Page";
 import { QRScanner, QRScannerType } from "../elements/QRScanner";
@@ -118,9 +119,8 @@ export class UnsealPage extends Page {
   }
 
   makeUnsealForm(): void {
-    this.unsealKeyForm = makeElement({
+    this.unsealKeyForm = Form(
-      tag: "form",
+      [
-      children: [
         MarginInline(
           makeElement({
             tag: "input",
@@ -141,12 +141,11 @@ export class UnsealPage extends Page {
           }),
         ),
       ],
-    }) as HTMLFormElement;
+      async (_) => {
-    this.unsealInputContent.appendChild(this.unsealKeyForm);
-    this.unsealKeyForm.addEventListener("submit", async (e: Event) => {
-      e.preventDefault();
         await this.handleKeySubmit();
-    });
+      },
+    );
+    this.unsealInputContent.appendChild(this.unsealKeyForm);
   }
 
   async makeQRInput(): Promise<void> {