Add tsx syntax to KeyValueNew.

src/elements/ReactForm.tsx

@@ -0,0 +1,25 @@
+import { Component, JSX, createRef } from "preact";
+
+export type FormProps = {
+  onSubmit: (form: FormData) => unknown;
+  children?: JSX.Element|JSX.Element[];
+};
+
+export class Form extends Component<FormProps, unknown> {
+  ref = createRef();
+
+  render(): JSX.Element {
+    return (
+      <form
+        onSubmit={(e: Event) => {
+          e.preventDefault();
+          console.log(this.ref.current)
+          this.props.onSubmit(new FormData(this.ref.current));
+        }}
+        ref={this.ref}
+      >
+        {this.props.children}
+      </form>
+    );
+  }
+}

src/elements/ReactMargin.tsx

@@ -0,0 +1,14 @@
+
+import { JSX } from "preact";
+
+export type MarginProps = {
+  children?: JSX.Element|JSX.Element[];
+};
+
+export function Margin(props: MarginProps): JSX.Element {
+  return (
+    <div class="uk-margin">
+      {props.children}
+    </div>
+  )
+}

src/pages/Secrets/KeyValue/KeyValueNew.tsx

@@ -1,10 +1,11 @@
-import { Form } from "../../../elements/Form";
+import { Form } from "../../../elements/ReactForm";
+import { Margin } from "../../../elements/ReactMargin";
 import { Page } from "../../../types/Page";
 import { SecretTitleElement } from "../SecretTitleElement";
 import { createOrUpdateSecret } from "../../../api/kv/createOrUpdateSecret";
-import { makeElement } from "z-makeelement";
 import { setErrorText } from "../../../pageUtils";
 import i18next from "i18next";
+import { render } from "preact";
 
 export class KeyValueNewPage extends Page {
   constructor() {
@@ -16,44 +17,29 @@ export class KeyValueNewPage extends Page {
   }
 
   async render(): Promise<void> {
-    await this.router.setPageContent(
+    render((
-      Form(
+      <div>
-        [
+        <Form onSubmit={
-          makeElement({
+          async (formData) => await this.newKVSecretHandleForm(formData)
-            tag: "div",
+        }>
-            class: "uk-margin",
+          <Margin>
-            children: makeElement({
+            <input
-              tag: "input",
+              class="uk-input uk-form-width-medium"
-              class: ["uk-input", "uk-form-width-medium"],
+              name="path"
-              attributes: {
+              placeholder={i18next.t("kv_new_path")}
-                required: "true",
+              required
-                type: "text",
+            />
-                placeholder: i18next.t("kv_new_path"),
+          </Margin>
-                name: "path",
+          <p class="uk-text-danger" id="errorText" />
-              },
+          <button class="uk-button uk-button-primary" type="submit">
-            }),
+            {i18next.t("kv_new_create_btn")}
-          }),
+          </button>
-          makeElement({
+        </Form>
-            tag: "p",
+      </div>
-            id: "errorText",
+    ), this.router.pageContentElement);
-            class: "uk-text-danger",
-          }),
-          makeElement({
-            tag: "button",
-            class: ["uk-button", "uk-button-primary"],
-            text: i18next.t("kv_new_create_btn"),
-            attributes: {
-              type: "submit",
-            },
-          }),
-        ],
-        async (form: HTMLFormElement) => await this.newKVSecretHandleForm(form),
-      ),
-    );
   }
 
-  async newKVSecretHandleForm(form: HTMLFormElement): Promise<void> {
+  async newKVSecretHandleForm(formData: FormData): Promise<void> {
-    const formData = new FormData(form);
     const path = formData.get("path") as string;
     let keyData = {};