From f002004c795b88f4115294d4b0e9bef526d484d4 Mon Sep 17 00:00:00 2001
From: Kitteh <kitteh@kitteh.pw>
Date: Sun, 23 May 2021 14:04:19 +0100
Subject: [PATCH] Add tsx syntax to NewTransitKey.

---
 src/pages/Secrets/Transit/NewTransitKey.ts  | 95 ---------------------
 src/pages/Secrets/Transit/NewTransitKey.tsx | 86 +++++++++++++++++++
 2 files changed, 86 insertions(+), 95 deletions(-)
 delete mode 100644 src/pages/Secrets/Transit/NewTransitKey.ts
 create mode 100644 src/pages/Secrets/Transit/NewTransitKey.tsx

diff --git a/src/pages/Secrets/Transit/NewTransitKey.ts b/src/pages/Secrets/Transit/NewTransitKey.ts
deleted file mode 100644
index bb86006..0000000
--- a/src/pages/Secrets/Transit/NewTransitKey.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Form } from "../../../elements/Form";
-import { Margin } from "../../../elements/Margin";
-import { Option } from "../../../elements/Option";
-import { Page } from "../../../types/Page";
-import { SecretTitleElement } from "../SecretTitleElement";
-import { makeElement } from "z-makeelement";
-import { newTransitKey } from "../../../api/transit/newTransitKey";
-import { setErrorText } from "../../../pageUtils";
-import i18next from "i18next";
-
-export class NewTransitKeyPage extends Page {
-  constructor() {
-    super();
-  }
-  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("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: "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",
-            },
-          }),
-        ],
-        async (form: HTMLFormElement) => {
-          const formData = new FormData(form);
-
-          const name = formData.get("name") as string;
-          const type = formData.get("type") as string;
-
-          try {
-            await newTransitKey(this.state.baseMount, {
-              name: name,
-              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> {
-    return await SecretTitleElement(this.router, i18next.t("transit_new_key_suffix"));
-  }
-
-  get name(): string {
-    return i18next.t("transit_new_key_title");
-  }
-}
diff --git a/src/pages/Secrets/Transit/NewTransitKey.tsx b/src/pages/Secrets/Transit/NewTransitKey.tsx
new file mode 100644
index 0000000..bec49ee
--- /dev/null
+++ b/src/pages/Secrets/Transit/NewTransitKey.tsx
@@ -0,0 +1,86 @@
+import { Form } from "../../../elements/ReactForm";
+import { Margin } from "../../../elements/ReactMargin";
+import { MarginInline } from "../../../elements/ReactMarginInline";
+import { Page } from "../../../types/Page";
+import { SecretTitleElement } from "../SecretTitleElement";
+import { newTransitKey } from "../../../api/transit/newTransitKey";
+import { render } from "preact";
+import { setErrorText } from "../../../pageUtils";
+import i18next from "i18next";
+
+export class NewTransitKeyPage extends Page {
+  constructor() {
+    super();
+  }
+  async render(): Promise<void> {
+    render(
+      <Form
+        onSubmit={async (data) => {
+          await this.onSubmit(data);
+        }}
+      >
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            name="name"
+            placeholder={i18next.t("transit_new_key_name_input")}
+            type="text"
+            required
+          />
+        </Margin>
+        <Margin>
+          <select class="uk-select uk-form-width-medium" name="type">
+            {[
+              "aes128-gcm96",
+              "aes256-gcm96",
+              "chacha20-poly1305",
+              "ed25519",
+              "ecdsa-p256",
+              "ecdsa-p384",
+              "ecdsa-p521",
+              "rsa-2048",
+              "rsa-3072",
+              "rsa-4096",
+            ].map((type) => (
+              <option label={type} value={type}>
+                {type}
+              </option>
+            ))}
+          </select>
+        </Margin>
+        <p class="uk-text-danger" id="errorText" />
+        <MarginInline>
+          <button class="uk-button uk-button-primary" type="submit">
+            {i18next.t("transit_new_key_create_btn")}
+          </button>
+        </MarginInline>
+      </Form>,
+      this.router.pageContentElement,
+    );
+  }
+
+  async onSubmit(data: FormData): Promise<void> {
+    const name = data.get("name") as string;
+    const type = data.get("type") as string;
+
+    try {
+      await newTransitKey(this.state.baseMount, {
+        name: name,
+        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> {
+    return await SecretTitleElement(this.router, i18next.t("transit_new_key_suffix"));
+  }
+
+  get name(): string {
+    return i18next.t("transit_new_key_title");
+  }
+}