From ed26eba220cad44cd440563649a46bca2c86f49c Mon Sep 17 00:00:00 2001
From: Kitteh <kitteh@kitteh.pw>
Date: Mon, 24 May 2021 13:44:36 +0100
Subject: [PATCH] Add tsx syntax to SetVaultURL.

---
 src/pages/SetVaultURL.ts  | 52 ---------------------------------------
 src/pages/SetVaultURL.tsx | 42 +++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 52 deletions(-)
 delete mode 100644 src/pages/SetVaultURL.ts
 create mode 100644 src/pages/SetVaultURL.tsx

diff --git a/src/pages/SetVaultURL.ts b/src/pages/SetVaultURL.ts
deleted file mode 100644
index 0ae1d56..0000000
--- a/src/pages/SetVaultURL.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Form } from "../elements/Form";
-import { Page } from "../types/Page";
-import { makeElement } from "z-makeelement";
-
-export class SetVaultURLPage extends Page {
-  constructor() {
-    super();
-  }
-  async render(): Promise<void> {
-    await this.router.setPageContent(
-      Form(
-        [
-          makeElement({
-            tag: "div",
-            class: "uk-margin",
-            children: makeElement({
-              tag: "input",
-              class: ["uk-input", "uk-form-width-medium"],
-              attributes: {
-                required: "true",
-                type: "text",
-                placeholder: "Vault URL",
-                name: "vaultURL",
-              },
-            }),
-          }),
-          makeElement({
-            tag: "p",
-            id: "errorText",
-            class: "uk-text-danger",
-          }),
-          makeElement({
-            tag: "button",
-            class: ["uk-button", "uk-button-primary"],
-            text: "Set",
-            attributes: {
-              type: "submit",
-            },
-          }),
-        ],
-        async (form: HTMLFormElement) => {
-          const formData = new FormData(form);
-          this.state.apiURL = formData.get("vaultURL") as string;
-          await this.router.changePage("HOME");
-        },
-      ),
-    );
-  }
-  get name(): string {
-    return "Set Vault URL";
-  }
-}
diff --git a/src/pages/SetVaultURL.tsx b/src/pages/SetVaultURL.tsx
new file mode 100644
index 0000000..6384910
--- /dev/null
+++ b/src/pages/SetVaultURL.tsx
@@ -0,0 +1,42 @@
+import { Form } from "../elements/ReactForm";
+import { Margin } from "../elements/ReactMargin";
+import { Page } from "../types/Page";
+import { render } from "preact";
+
+export class SetVaultURLPage extends Page {
+  constructor() {
+    super();
+  }
+  async render(): Promise<void> {
+    render(
+      <Form onSubmit={(data) => this.onSubmit(data)}>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            name="vaultURL"
+            type="text"
+            placeholder="Vault URL"
+            required
+          />
+        </Margin>
+        <p id="errorText" class="uk-text-danger" />
+        <Margin>
+          <button class="uk-button uk-button-primary" type="submit">
+            Set
+          </button>
+        </Margin>
+      </Form>,
+
+      this.router.pageContentElement,
+    );
+  }
+
+  async onSubmit(data: FormData): Promise<void> {
+    this.state.apiURL = data.get("vaultURL") as string;
+    await this.router.changePage("HOME");
+  }
+
+  get name(): string {
+    return "Set Vault URL";
+  }
+}