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,52 +15,45 @@ 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({
-        makeElement({
+            tag: "div",
-          tag: "div",
+            class: "uk-margin",
-          class: "uk-margin",
+            children: makeElement({
-          children: makeElement({
+              tag: "input",
-            tag: "input",
+              class: ["uk-input", "uk-form-width-medium"],
-            class: ["uk-input", "uk-form-width-medium"],
+              attributes: {
+                required: "true",
+                type: "text",
+                placeholder: i18next.t("kv_new_path"),
+                name: "path",
+              },
+            }),
+          }),
+          makeElement({
+            tag: "p",
+            id: "errorText",
+            class: "uk-text-danger",
+          }),
+          makeElement({
+            tag: "button",
+            class: ["uk-button", "uk-button-primary"],
+            text: i18next.t("kv_new_create_btn"),
             attributes: {
-              required: "true",
+              type: "submit",
-              type: "text",
-              placeholder: i18next.t("kv_new_path"),
-              name: "path",
             },
           }),
-        }),
+        ],
-        makeElement({
+        async (form: HTMLFormElement) => await this.newKVSecretHandleForm(form),
-          tag: "p",
+      ),
-          id: "errorText",
+    );
-          class: "uk-text-danger",
-        }),
-        makeElement({
-          tag: "button",
-          class: ["uk-button", "uk-button-primary"],
-          text: i18next.t("kv_new_create_btn"),
-          attributes: {
-            type: "submit",
-          },
-        }),
-      ],
-    }) as HTMLFormElement;
-    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,75 +15,72 @@ 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(
+          Margin(
+            makeElement({
+              tag: "input",
+              class: ["uk-input", "uk-form-width-medium"],
+              attributes: {
+                required: "true",
+                type: "text",
+                placeholder: i18next.t("new_kv_engine_name_input"),
+                name: "name",
+              },
+            }),
+          ),
+          Margin(
+            makeElement({
+              tag: "select",
+              class: ["uk-select", "uk-form-width-medium"],
+              attributes: {
+                name: "version",
+              },
+              children: [
+                Option(i18next.t("new_kv_engine_version_2"), "2"),
+                Option(i18next.t("new_kv_engine_version_1"), "1"),
+              ],
+            }),
+          ),
           makeElement({
-            tag: "input",
+            tag: "p",
-            class: ["uk-input", "uk-form-width-medium"],
+            id: "errorText",
+            class: "uk-text-danger",
+          }),
+          makeElement({
+            tag: "button",
+            class: ["uk-button", "uk-button-primary"],
+            text: i18next.t("new_kv_engine_create_btn"),
             attributes: {
-              required: "true",
+              type: "submit",
-              type: "text",
-              placeholder: i18next.t("new_kv_engine_name_input"),
-              name: "name",
             },
           }),
-        ),
+        ],
-        Margin(
+        async (form: HTMLFormElement) => {
-          makeElement({
+          const formData = new FormData(form);
-            tag: "select",
-            class: ["uk-select", "uk-form-width-medium"],
-            attributes: {
-              name: "version",
-            },
-            children: [
-              Option(i18next.t("new_kv_engine_version_2"), "2"),
-              Option(i18next.t("new_kv_engine_version_1"), "1"),
-            ],
-          }),
-        ),
-        makeElement({
-          tag: "p",
-          id: "errorText",
-          class: "uk-text-danger",
-        }),
-        makeElement({
-          tag: "button",
-          class: ["uk-button", "uk-button-primary"],
-          text: i18next.t("new_kv_engine_create_btn"),
-          attributes: {
-            type: "submit",
-          },
-        }),
-      ],
-    }) as HTMLFormElement;
 
-    await this.router.setPageContent(newEngineForm);
+          const name = formData.get("name") as string;
+          const version = formData.get("version") as string;
 
-    newEngineForm.addEventListener("submit", async (e) => {
+          try {
-      e.preventDefault();
+            await newMount({
-      const formData = new FormData(newEngineForm);
+              name: name,
-
+              type: "kv",
-      const name = formData.get("name") as string;
+              options: {
-      const version = formData.get("version") as string;
+                version: version,
-
+              },
-      try {
+            });
-        await newMount({
+            this.state.secretMountType = "kv-v" + version;
-          name: name,
+            this.state.baseMount = name + "/";
-          type: "kv",
+            await this.router.changePage("KEY_VALUE_VIEW");
-          options: {
+          } catch (e) {
-            version: version,
+            const error = e as Error;
-          },
+            setErrorText(error.message);
-        });
+          }
-        this.state.secretMountType = "kv-v" + version;
+        },
-        this.state.baseMount = name + "/";
+      ),
-        await this.router.changePage("KEY_VALUE_VIEW");
+    );
-      } catch (e) {
-        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,58 +14,55 @@ 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(
+          Margin(
+            makeElement({
+              tag: "input",
+              class: ["uk-input", "uk-form-width-medium"],
+              attributes: {
+                required: "true",
+                type: "text",
+                placeholder: i18next.t("new_totp_engine_name_input"),
+                name: "name",
+              },
+            }),
+          ),
           makeElement({
-            tag: "input",
+            tag: "p",
-            class: ["uk-input", "uk-form-width-medium"],
+            id: "errorText",
+            class: "uk-text-danger",
+          }),
+          makeElement({
+            tag: "button",
+            class: ["uk-button", "uk-button-primary"],
+            text: i18next.t("new_totp_engine_create_btn"),
             attributes: {
-              required: "true",
+              type: "submit",
-              type: "text",
-              placeholder: i18next.t("new_totp_engine_name_input"),
-              name: "name",
             },
           }),
-        ),
+        ],
-        makeElement({
+        async (form: HTMLFormElement) => {
-          tag: "p",
+          const formData = new FormData(form);
-          id: "errorText",
-          class: "uk-text-danger",
-        }),
-        makeElement({
-          tag: "button",
-          class: ["uk-button", "uk-button-primary"],
-          text: i18next.t("new_totp_engine_create_btn"),
-          attributes: {
-            type: "submit",
-          },
-        }),
-      ],
-    }) as HTMLFormElement;
 
-    await this.router.setPageContent(newEngineForm);
+          const name = formData.get("name") as string;
 
-    newEngineForm.addEventListener("submit", async (e) => {
+          try {
-      e.preventDefault();
+            await newMount({
-      const formData = new FormData(newEngineForm);
+              name: name,
-
+              type: "totp",
-      const name = formData.get("name") as string;
+            });
-
+            this.state.secretMountType = "totp";
-      try {
+            this.state.baseMount = name + "/";
-        await newMount({
+            await this.router.changePage("TOTP");
-          name: name,
+          } catch (e) {
-          type: "totp",
+            const error = e as Error;
-        });
+            setErrorText(error.message);
-        this.state.secretMountType = "totp";
+          }
-        this.state.baseMount = name + "/";
+        },
-        await this.router.changePage("TOTP");
+      ),
-      } catch (e) {
+    );
-        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,58 +14,55 @@ 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(
+          Margin(
+            makeElement({
+              tag: "input",
+              class: ["uk-input", "uk-form-width-medium"],
+              attributes: {
+                required: "true",
+                type: "text",
+                placeholder: i18next.t("new_transit_engine_name_input"),
+                name: "name",
+              },
+            }),
+          ),
           makeElement({
-            tag: "input",
+            tag: "p",
-            class: ["uk-input", "uk-form-width-medium"],
+            id: "errorText",
+            class: "uk-text-danger",
+          }),
+          makeElement({
+            tag: "button",
+            class: ["uk-button", "uk-button-primary"],
+            text: i18next.t("new_transit_engine_create_btn"),
             attributes: {
-              required: "true",
+              type: "submit",
-              type: "text",
-              placeholder: i18next.t("new_transit_engine_name_input"),
-              name: "name",
             },
           }),
-        ),
+        ],
-        makeElement({
+        async (form: HTMLFormElement) => {
-          tag: "p",
+          const formData = new FormData(form);
-          id: "errorText",
-          class: "uk-text-danger",
-        }),
-        makeElement({
-          tag: "button",
-          class: ["uk-button", "uk-button-primary"],
-          text: i18next.t("new_transit_engine_create_btn"),
-          attributes: {
-            type: "submit",
-          },
-        }),
-      ],
-    }) as HTMLFormElement;
 
-    await this.router.setPageContent(newEngineForm);
+          const name = formData.get("name") as string;
 
-    newEngineForm.addEventListener("submit", async (e) => {
+          try {
-      e.preventDefault();
+            await newMount({
-      const formData = new FormData(newEngineForm);
+              name: name,
-
+              type: "transit",
-      const name = formData.get("name") as string;
+            });
-
+            this.state.secretMountType = "transit";
-      try {
+            this.state.baseMount = name + "/";
-        await newMount({
+            await this.router.changePage("TRANSIT_VIEW");
-          name: name,
+          } catch (e) {
-          type: "transit",
+            const error = e as Error;
-        });
+            setErrorText(error.message);
-        this.state.secretMountType = "transit";
+          }
-        this.state.baseMount = name + "/";
+        },
-        await this.router.changePage("TRANSIT_VIEW");
+      ),
-      } catch (e) {
+    );
-        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,86 +25,83 @@ 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(
+          Margin(
+            makeElement({
+              tag: "input",
+              class: ["uk-input", "uk-form-width-medium"],
+              attributes: {
+                required: "true",
+                type: "text",
+                placeholder: i18next.t("totp_new_name_text"),
+                name: "name",
+              },
+            }),
+          ),
           makeElement({
-            tag: "input",
+            tag: "p",
-            class: ["uk-input", "uk-form-width-medium"],
+            text: i18next.t("totp_new_info"),
-            attributes: {
-              required: "true",
-              type: "text",
-              placeholder: i18next.t("totp_new_name_text"),
-              name: "name",
-            },
           }),
-        ),
+          Margin(
-        makeElement({
+            makeElement({
-          tag: "p",
+              tag: "input",
-          text: i18next.t("totp_new_info"),
+              class: ["uk-input", "uk-form-width-medium"],
-        }),
+              attributes: {
-        Margin(
+                type: "text",
+                placeholder: i18next.t("totp_new_uri_input"),
+                name: "uri",
+              },
+            }),
+          ),
+          Margin(
+            makeElement({
+              tag: "input",
+              class: ["uk-input", "uk-form-width-medium"],
+              attributes: {
+                type: "text",
+                placeholder: i18next.t("totp_new_key_input"),
+                name: "key",
+              },
+            }),
+          ),
           makeElement({
-            tag: "input",
+            tag: "p",
-            class: ["uk-input", "uk-form-width-medium"],
+            id: "errorText",
-            attributes: {
+            class: "uk-text-danger",
-              type: "text",
-              placeholder: i18next.t("totp_new_uri_input"),
-              name: "uri",
-            },
           }),
-        ),
+          MarginInline(
-        Margin(
+            makeElement({
-          makeElement({
+              tag: "button",
-            tag: "input",
+              class: ["uk-button", "uk-button-primary"],
-            class: ["uk-input", "uk-form-width-medium"],
+              text: i18next.t("totp_new_add_btn"),
-            attributes: {
+              attributes: {
-              type: "text",
+                type: "submit",
-              placeholder: i18next.t("totp_new_key_input"),
+              },
-              name: "key",
+            }),
-            },
+          ),
-          }),
+        ],
-        ),
+        async (form: HTMLFormElement) => {
-        makeElement({
+          const formData = new FormData(form);
-          tag: "p",
-          id: "errorText",
-          class: "uk-text-danger",
-        }),
-        MarginInline(
-          makeElement({
-            tag: "button",
-            class: ["uk-button", "uk-button-primary"],
-            text: i18next.t("totp_new_add_btn"),
-            attributes: {
-              type: "submit",
-            },
-          }),
-        ),
-      ],
-    }) as HTMLFormElement;
-    await this.router.setPageContent(totpForm);
 
-    totpForm.addEventListener("submit", async (e) => {
+          const parms = {
-      e.preventDefault();
+            url: formData.get("uri") as string,
+            key: removeDashSpaces(formData.get("key") as string).toUpperCase(),
+            name: formData.get("name") as string,
+            generate: false,
+          };
 
-      const formData = new FormData(totpForm);
+          try {
-
+            await addNewTOTP(this.state.baseMount, parms);
-      const parms = {
+            await this.router.changePage("TOTP");
-        url: formData.get("uri") as string,
+          } catch (e: unknown) {
-        key: removeDashSpaces(formData.get("key") as string).toUpperCase(),
+            const error = e as Error;
-        name: formData.get("name") as string,
+            setErrorText(`API Error: ${error.message}`);
-        generate: false,
+          }
-      };
+        },
-
+      ),
-      try {
+    );
-        await addNewTOTP(this.state.baseMount, parms);
-        await this.router.changePage("TOTP");
-      } catch (e: unknown) {
-        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,79 +13,76 @@ export class NewTransitKeyPage extends Page {
     super();
   }
   async render(): Promise<void> {
-    const newTransitKeyForm = makeElement({
+    await this.router.setPageContent(
-      tag: "form",
+      Form(
-      children: [
+        [
-        Margin(
+          Margin(
+            makeElement({
+              tag: "input",
+              class: ["uk-input", "uk-form-width-medium"],
+              attributes: {
+                required: "true",
+                type: "text",
+                placeholder: i18next.t("transit_new_key_name_input"),
+                name: "name",
+              },
+            }),
+          ),
+          Margin(
+            makeElement({
+              tag: "select",
+              class: ["uk-select", "uk-form-width-medium"],
+              attributes: {
+                name: "type",
+              },
+              children: [
+                "aes128-gcm96",
+                "aes256-gcm96",
+                "chacha20-poly1305",
+                "ed25519",
+                "ecdsa-p256",
+                "ecdsa-p384",
+                "ecdsa-p521",
+                "rsa-2048",
+                "rsa-3072",
+                "rsa-4096",
+              ].map((type): HTMLElement => Option(type, type)),
+            }),
+          ),
           makeElement({
-            tag: "input",
+            tag: "p",
-            class: ["uk-input", "uk-form-width-medium"],
+            id: "errorText",
+            class: "uk-text-danger",
+          }),
+          makeElement({
+            tag: "button",
+            class: ["uk-button", "uk-button-primary"],
+            text: i18next.t("transit_new_key_create_btn"),
             attributes: {
-              required: "true",
+              type: "submit",
-              type: "text",
-              placeholder: i18next.t("transit_new_key_name_input"),
-              name: "name",
             },
           }),
-        ),
+        ],
-        Margin(
+        async (form: HTMLFormElement) => {
-          makeElement({
+          const formData = new FormData(form);
-            tag: "select",
-            class: ["uk-select", "uk-form-width-medium"],
-            attributes: {
-              name: "type",
-            },
-            children: [
-              "aes128-gcm96",
-              "aes256-gcm96",
-              "chacha20-poly1305",
-              "ed25519",
-              "ecdsa-p256",
-              "ecdsa-p384",
-              "ecdsa-p521",
-              "rsa-2048",
-              "rsa-3072",
-              "rsa-4096",
-            ].map((type): HTMLElement => Option(type, type)),
-          }),
-        ),
-        makeElement({
-          tag: "p",
-          id: "errorText",
-          class: "uk-text-danger",
-        }),
-        makeElement({
-          tag: "button",
-          class: ["uk-button", "uk-button-primary"],
-          text: i18next.t("transit_new_key_create_btn"),
-          attributes: {
-            type: "submit",
-          },
-        }),
-      ],
-    }) as HTMLFormElement;
 
-    await this.router.setPageContent(newTransitKeyForm);
+          const name = formData.get("name") as string;
+          const type = formData.get("type") as string;
 
-    newTransitKeyForm.addEventListener("submit", async (e) => {
+          try {
-      e.preventDefault();
+            await newTransitKey(this.state.baseMount, {
-      const formData = new FormData(newTransitKeyForm);
+              name: name,
-
+              type: type,
-      const name = formData.get("name") as string;
+            });
-      const type = formData.get("type") as string;
+            this.state.secretItem = name;
-
+            await this.router.changePage("TRANSIT_VIEW_SECRET");
-      try {
+          } catch (e) {
-        await newTransitKey(this.state.baseMount, {
+            const error = e as Error;
-          name: name,
+            setErrorText(error.message);
-          type: type,
+          }
-        });
+        },
-        this.state.secretItem = name;
+      ),
-        await this.router.changePage("TRANSIT_VIEW_SECRET");
+    );
-      } catch (e) {
-        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,54 +15,52 @@ export class SetLanguagePage extends Page {
     super();
   }
   async render(): Promise<void> {
-    const setLanguageForm = makeElement({
+    await this.router.setPageContent(
-      tag: "form",
+      Form(
-      id: "setLanguageForm",
+        [
-      children: [
+          Margin(
-        Margin(
+            makeElement({
-          makeElement({
+              tag: "select",
-            tag: "select",
+              class: ["uk-select", "uk-form-width-large"],
-            class: ["uk-select", "uk-form-width-large"],
+              attributes: {
-            attributes: {
+                name: "language",
-              name: "language",
+              },
-            },
+              children: languageIDs.map(function (languageID) {
-            children: languageIDs.map(function (languageID) {
+                return makeElement({
-              return makeElement({
+                  tag: "option",
-                tag: "option",
+                  text: i18next.getFixedT(languageID, null)("language_name"),
-                text: i18next.getFixedT(languageID, null)("language_name"),
+                  attributes: { value: languageID },
-                attributes: { value: languageID },
+                });
-              });
+              }),
             }),
+          ),
+          makeElement({
+            tag: "p",
+            id: "errorText",
+            class: "uk-text-danger",
           }),
-        ),
+          makeElement({
-        makeElement({
+            tag: "button",
-          tag: "p",
+            class: ["uk-button", "uk-button-primary"],
-          id: "errorText",
+            text: i18next.t("set_language_btn"),
-          class: "uk-text-danger",
+            attributes: {
-        }),
+              type: "submit",
-        makeElement({
+            },
-          tag: "button",
+          }),
-          class: ["uk-button", "uk-button-primary"],
+        ],
-          text: i18next.t("set_language_btn"),
+        async (form: HTMLFormElement) => {
-          attributes: {
+          const formData = new FormData(form);
-            type: "submit",
-          },
-        }),
-      ],
-    }) as HTMLFormElement;
-    await this.router.setPageContent(setLanguageForm);
-    setLanguageForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const formData = new FormData(setLanguageForm);
 
-      const language = formData.get("language") as string;
+          const language = formData.get("language") as string;
-      this.state.language = language;
+          this.state.language = language;
 
-      const t = await i18next.changeLanguage(language);
+          const t = await i18next.changeLanguage(language);
-      this.state.pageDirection = t("language_direction");
+          this.state.pageDirection = t("language_direction");
-      reloadNavBar(this.router);
+          reloadNavBar(this.router);
-      await this.router.changePage("HOME");
+          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);
+          this.state.apiURL = formData.get("vaultURL") as string;
+          await this.router.changePage("HOME");
+        },
+      ),
     );
-    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 (_) => {
+        await this.handleKeySubmit();
+      },
+    );
     this.unsealInputContent.appendChild(this.unsealKeyForm);
-    this.unsealKeyForm.addEventListener("submit", async (e: Event) => {
-      e.preventDefault();
-      await this.handleKeySubmit();
-    });
   }
 
   async makeQRInput(): Promise<void> {