From 351ad5bbfe9f5c75da40348d1c21ef685d2d939c Mon Sep 17 00:00:00 2001
From: Kitteh <kitteh@kitteh.pw>
Date: Sun, 23 May 2021 12:28:31 +0100
Subject: [PATCH] Add tsx syntax to all engine creation screens.

---
 src/pages/Secrets/NewEngines/NewKVEngine.ts   | 88 -------------------
 src/pages/Secrets/NewEngines/NewKVEngine.tsx  | 74 ++++++++++++++++
 src/pages/Secrets/NewEngines/NewTOTPEngine.ts | 70 ---------------
 .../Secrets/NewEngines/NewTOTPEngine.tsx      | 60 +++++++++++++
 .../Secrets/NewEngines/NewTransitEngine.ts    | 70 ---------------
 .../Secrets/NewEngines/NewTransitEngine.tsx   | 60 +++++++++++++
 6 files changed, 194 insertions(+), 228 deletions(-)
 delete mode 100644 src/pages/Secrets/NewEngines/NewKVEngine.ts
 create mode 100644 src/pages/Secrets/NewEngines/NewKVEngine.tsx
 delete mode 100644 src/pages/Secrets/NewEngines/NewTOTPEngine.ts
 create mode 100644 src/pages/Secrets/NewEngines/NewTOTPEngine.tsx
 delete mode 100644 src/pages/Secrets/NewEngines/NewTransitEngine.ts
 create mode 100644 src/pages/Secrets/NewEngines/NewTransitEngine.tsx

diff --git a/src/pages/Secrets/NewEngines/NewKVEngine.ts b/src/pages/Secrets/NewEngines/NewKVEngine.ts
deleted file mode 100644
index 652dae4..0000000
--- a/src/pages/Secrets/NewEngines/NewKVEngine.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Form } from "../../../elements/Form";
-import { Margin } from "../../../elements/Margin";
-import { Option } from "../../../elements/Option";
-import { Page } from "../../../types/Page";
-import { makeElement } from "z-makeelement";
-import { newMount } from "../../../api/sys/newMount";
-import { setErrorText } from "../../../pageUtils";
-import i18next from "i18next";
-
-export class NewKVEnginePage extends Page {
-  constructor() {
-    super();
-  }
-  async goBack(): Promise<void> {
-    await this.router.changePage("SECRETS_HOME");
-  }
-  async render(): Promise<void> {
-    await this.router.setPageContent(
-      Form(
-        [
-          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: "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",
-            },
-          }),
-        ],
-        async (form: HTMLFormElement) => {
-          const formData = new FormData(form);
-
-          const name = formData.get("name") as string;
-          const version = formData.get("version") as string;
-
-          try {
-            await newMount({
-              name: name,
-              type: "kv",
-              options: {
-                version: version,
-              },
-            });
-            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");
-  }
-}
diff --git a/src/pages/Secrets/NewEngines/NewKVEngine.tsx b/src/pages/Secrets/NewEngines/NewKVEngine.tsx
new file mode 100644
index 0000000..e75ffc8
--- /dev/null
+++ b/src/pages/Secrets/NewEngines/NewKVEngine.tsx
@@ -0,0 +1,74 @@
+import { Form } from "../../../elements/ReactForm";
+import { Margin } from "../../../elements/ReactMargin";
+import { MarginInline } from "../../../elements/ReactMarginInline";
+import { Page } from "../../../types/Page";
+import { newMount } from "../../../api/sys/newMount";
+import { render } from "preact";
+import { setErrorText } from "../../../pageUtils";
+import i18next from "i18next";
+
+export class NewKVEnginePage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("SECRETS_HOME");
+  }
+  async render(): Promise<void> {
+    render(
+      <Form onSubmit={(data) => this.submit(data)}>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            name="name"
+            type="text"
+            placeholder={i18next.t("new_kv_engine_name_input")}
+            required
+          />
+        </Margin>
+        <Margin>
+          <select class="uk-input uk-form-width-medium" name="version">
+            <option label={i18next.t("new_kv_engine_version_2")} value="2">
+              {i18next.t("new_kv_engine_version_2")}
+            </option>
+            <option label={i18next.t("new_kv_engine_version_1")} value="1">
+              {i18next.t("new_kv_engine_version_1")}
+            </option>
+          </select>
+        </Margin>
+        <p class="uk-text-danger" id="errorText" />
+        <MarginInline>
+          <button class="uk-button uk-button-primary" type="submit">
+            {i18next.t("new_kv_engine_create_btn")}
+          </button>
+        </MarginInline>
+      </Form>,
+      this.router.pageContentElement,
+    );
+  }
+
+  async submit(data: FormData): Promise<void> {
+    const name = data.get("name") as string;
+    const version = data.get("version") as string;
+
+    try {
+      await newMount({
+        name: name,
+        type: "kv",
+        options: {
+          version: version,
+        },
+      });
+      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");
+  }
+}
diff --git a/src/pages/Secrets/NewEngines/NewTOTPEngine.ts b/src/pages/Secrets/NewEngines/NewTOTPEngine.ts
deleted file mode 100644
index 29c5920..0000000
--- a/src/pages/Secrets/NewEngines/NewTOTPEngine.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Form } from "../../../elements/Form";
-import { Margin } from "../../../elements/Margin";
-import { Page } from "../../../types/Page";
-import { makeElement } from "z-makeelement";
-import { newMount } from "../../../api/sys/newMount";
-import { setErrorText } from "../../../pageUtils";
-import i18next from "i18next";
-
-export class NewTOTPEnginePage extends Page {
-  constructor() {
-    super();
-  }
-  async goBack(): Promise<void> {
-    await this.router.changePage("SECRETS_HOME");
-  }
-  async render(): Promise<void> {
-    await this.router.setPageContent(
-      Form(
-        [
-          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: "p",
-            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",
-            },
-          }),
-        ],
-        async (form: HTMLFormElement) => {
-          const formData = new FormData(form);
-
-          const name = formData.get("name") as string;
-
-          try {
-            await newMount({
-              name: name,
-              type: "totp",
-            });
-            this.state.secretMountType = "totp";
-            this.state.baseMount = name + "/";
-            await this.router.changePage("TOTP_VIEW");
-          } catch (e) {
-            const error = e as Error;
-            setErrorText(error.message);
-          }
-        },
-      ),
-    );
-  }
-  get name(): string {
-    return i18next.t("new_totp_engine_title");
-  }
-}
diff --git a/src/pages/Secrets/NewEngines/NewTOTPEngine.tsx b/src/pages/Secrets/NewEngines/NewTOTPEngine.tsx
new file mode 100644
index 0000000..70c25dd
--- /dev/null
+++ b/src/pages/Secrets/NewEngines/NewTOTPEngine.tsx
@@ -0,0 +1,60 @@
+import { Form } from "../../../elements/ReactForm";
+import { Margin } from "../../../elements/ReactMargin";
+import { MarginInline } from "../../../elements/ReactMarginInline";
+import { Page } from "../../../types/Page";
+import { newMount } from "../../../api/sys/newMount";
+import { render } from "preact";
+import { setErrorText } from "../../../pageUtils";
+import i18next from "i18next";
+
+export class NewTOTPEnginePage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("SECRETS_HOME");
+  }
+  async render(): Promise<void> {
+    render(
+      <Form onSubmit={(data) => this.submit(data)}>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            name="name"
+            type="text"
+            placeholder={i18next.t("new_totp_engine_name_input")}
+            required
+          />
+        </Margin>
+        <p class="uk-text-danger" id="errorText" />
+        <MarginInline>
+          <button class="uk-button uk-button-primary" type="submit">
+            {i18next.t("new_totp_engine_create_btn")}
+          </button>
+        </MarginInline>
+      </Form>,
+      this.router.pageContentElement,
+    );
+  }
+
+  async submit(data: FormData): Promise<void> {
+    const name = data.get("name") as string;
+
+    try {
+      await newMount({
+        name: name,
+        type: "totp",
+      });
+      this.state.secretMountType = "totp";
+      this.state.baseMount = name + "/";
+      await this.router.changePage("TOTP_VIEW");
+    } catch (e) {
+      const error = e as Error;
+      setErrorText(error.message);
+    }
+  }
+
+  get name(): string {
+    return i18next.t("new_totp_engine_title");
+  }
+}
diff --git a/src/pages/Secrets/NewEngines/NewTransitEngine.ts b/src/pages/Secrets/NewEngines/NewTransitEngine.ts
deleted file mode 100644
index 3f269e5..0000000
--- a/src/pages/Secrets/NewEngines/NewTransitEngine.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Form } from "../../../elements/Form";
-import { Margin } from "../../../elements/Margin";
-import { Page } from "../../../types/Page";
-import { makeElement } from "z-makeelement";
-import { newMount } from "../../../api/sys/newMount";
-import { setErrorText } from "../../../pageUtils";
-import i18next from "i18next";
-
-export class NewTransitEnginePage extends Page {
-  constructor() {
-    super();
-  }
-  async goBack(): Promise<void> {
-    await this.router.changePage("SECRETS_HOME");
-  }
-  async render(): Promise<void> {
-    await this.router.setPageContent(
-      Form(
-        [
-          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: "p",
-            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",
-            },
-          }),
-        ],
-        async (form: HTMLFormElement) => {
-          const formData = new FormData(form);
-
-          const name = formData.get("name") as string;
-
-          try {
-            await newMount({
-              name: name,
-              type: "transit",
-            });
-            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");
-  }
-}
diff --git a/src/pages/Secrets/NewEngines/NewTransitEngine.tsx b/src/pages/Secrets/NewEngines/NewTransitEngine.tsx
new file mode 100644
index 0000000..464e898
--- /dev/null
+++ b/src/pages/Secrets/NewEngines/NewTransitEngine.tsx
@@ -0,0 +1,60 @@
+import { Form } from "../../../elements/ReactForm";
+import { Margin } from "../../../elements/ReactMargin";
+import { MarginInline } from "../../../elements/ReactMarginInline";
+import { Page } from "../../../types/Page";
+import { newMount } from "../../../api/sys/newMount";
+import { render } from "preact";
+import { setErrorText } from "../../../pageUtils";
+import i18next from "i18next";
+
+export class NewTransitEnginePage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("SECRETS_HOME");
+  }
+  async render(): Promise<void> {
+    render(
+      <Form onSubmit={(data) => this.submit(data)}>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            name="name"
+            type="text"
+            placeholder={i18next.t("new_transit_engine_name_input")}
+            required
+          />
+        </Margin>
+        <p class="uk-text-danger" id="errorText" />
+        <MarginInline>
+          <button class="uk-button uk-button-primary" type="submit">
+            {i18next.t("new_transit_engine_create_btn")}
+          </button>
+        </MarginInline>
+      </Form>,
+      this.router.pageContentElement,
+    );
+  }
+
+  async submit(data: FormData): Promise<void> {
+    const name = data.get("name") as string;
+
+    try {
+      await newMount({
+        name: name,
+        type: "transit",
+      });
+      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");
+  }
+}