Add tsx syntax to TransitDecrypt.

src/elements/ReactCopyableModal.tsx

@@ -6,6 +6,7 @@ import UIkit from "uikit";
 import i18next from "i18next";
 
 export type CopyableModalProps = {
+  id: string;
   name: string;
   contentString: string;
 };
@@ -29,7 +30,7 @@ export class CopyableModal extends Component<CopyableModalProps, unknown> {
 
   render(): JSX.Element {
     return (
-      <div ref={this.ref} class="modal-section" uk-modal>
+      <div id={this.props.id} ref={this.ref} class="modal-section" uk-modal>
         <div class="uk-modal-dialog">
           <button class="uk-modal-close-default" type="button" uk-close />
           <div class="uk-modal-header">

src/pages/Secrets/Transit/TransitDecrypt.ts

@@ -1,117 +0,0 @@
-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";
-import { fileToBase64 } from "../../../htmlUtils";
-import { makeElement } from "z-makeelement";
-import { setErrorText } from "../../../pageUtils";
-import { transitDecrypt } from "../../../api/transit/transitDecrypt";
-import i18next from "i18next";
-
-export class TransitDecryptPage extends Page {
-  constructor() {
-    super();
-  }
-
-  async goBack(): Promise<void> {
-    await this.router.changePage("TRANSIT_VIEW_SECRET");
-  }
-
-  transitDecryptForm: HTMLFormElement;
-
-  async render(): Promise<void> {
-    this.transitDecryptForm = Form(
-      [
-        Margin(
-          makeElement({
-            tag: "textarea",
-            class: ["uk-textarea", "uk-form-width-medium"],
-            attributes: {
-              placeholder: i18next.t("transit_decrypt_input_placeholder"),
-              name: "ciphertext",
-            },
-          }),
-        ),
-        Margin(FileUploadInput("ciphertext_file")),
-        Margin([
-          makeElement({
-            tag: "div",
-            class: "uk-form-label",
-            text: i18next.t("transit_decrypt_decode_checkbox"),
-          }),
-          makeElement({
-            tag: "div",
-            class: ["uk-form-controls", "uk-form-controls-text"],
-            children: makeElement({
-              tag: "input",
-              class: "uk-checkbox",
-              attributes: {
-                type: "checkbox",
-                name: "decodeBase64Checkbox",
-              },
-            }),
-          }),
-        ]),
-        makeElement({
-          tag: "p",
-          id: "errorText",
-          class: "uk-text-danger",
-        }),
-        makeElement({
-          tag: "button",
-          class: ["uk-button", "uk-button-primary"],
-          text: i18next.t("transit_decrypt_decrypt_btn"),
-          attributes: {
-            type: "submit",
-          },
-        }),
-      ],
-      async (_) => await this.transitDecryptFormHandler(),
-    );
-    await this.router.setPageContent(this.transitDecryptForm);
-  }
-
-  async transitDecryptFormHandler(): Promise<void> {
-    const formData = new FormData(this.transitDecryptForm);
-
-    const decodeBase64 = formData.get("decodeBase64Checkbox") as string;
-
-    let ciphertext = formData.get("ciphertext") as string;
-
-    const ciphertext_file = formData.get("ciphertext_file") as File;
-    if (ciphertext_file.size > 0) {
-      ciphertext = atob(
-        (await fileToBase64(ciphertext_file)).replace("data:text/plain;base64,", ""),
-      );
-    }
-
-    try {
-      const res = await transitDecrypt(this.state.baseMount, this.state.secretItem, {
-        ciphertext: ciphertext,
-      });
-      let plaintext = res.plaintext;
-      if (decodeBase64 == "on") {
-        plaintext = atob(plaintext);
-      }
-      const modal = CopyableModal(
-        i18next.t("transit_decrypt_decryption_result_modal_title"),
-        plaintext,
-      );
-      this.router.pageContentElement.appendChild(modal);
-      modal.show();
-    } catch (e: unknown) {
-      const error = e as Error;
-      setErrorText(`API Error: ${error.message}`);
-    }
-  }
-
-  async getPageTitle(): Promise<Element | string> {
-    return await SecretTitleElement(this.router, i18next.t("transit_decrypt_suffix"));
-  }
-
-  get name(): string {
-    return i18next.t("transit_decrypt_title");
-  }
-}

src/pages/Secrets/Transit/TransitDecrypt.tsx

@@ -0,0 +1,92 @@
+import { CopyableModal } from "../../../elements/ReactCopyableModal";
+import { FileUploadInput } from "../../../elements/ReactFileUploadInput";
+import { Form } from "../../../elements/ReactForm";
+import { InputWithTitle } from "../../../elements/ReactInputWithTitle";
+import { Margin } from "../../../elements/ReactMargin";
+import { Page } from "../../../types/Page";
+import { SecretTitleElement } from "../SecretTitleElement";
+import { fileToBase64 } from "../../../htmlUtils";
+import { render } from "preact";
+import { setErrorText } from "../../../pageUtils";
+import { transitDecrypt } from "../../../api/transit/transitDecrypt";
+import UIkit from "uikit";
+import i18next from "i18next";
+
+export class TransitDecryptPage extends Page {
+  constructor() {
+    super();
+  }
+
+  async goBack(): Promise<void> {
+    await this.router.changePage("TRANSIT_VIEW_SECRET");
+  }
+
+  async render(): Promise<void> {
+    render(
+      <Form onSubmit={async (data) => await this.onSubmit(data)}>
+        <Margin>
+          <textarea
+            class="uk-textarea uk-form-width-medium"
+            name="ciphertext"
+            placeholder={i18next.t("transit_decrypt_input_placeholder")}
+          />
+        </Margin>
+        <Margin>
+          <FileUploadInput name="ciphertext_file" />
+        </Margin>
+        <InputWithTitle title={i18next.t("transit_decrypt_decode_checkbox")}>
+          <input class="uk-checkbox" name="decodeBase64Checkbox" type="checkbox" />
+        </InputWithTitle>
+        <p class="uk-text-danger" id="errorText" />
+        <button class="uk-button uk-button-primary" type="submit">
+          {i18next.t("transit_decrypt_decrypt_btn")}
+        </button>
+        <div id="modalAttachmentPoint" />
+      </Form>,
+      this.router.pageContentElement,
+    );
+  }
+
+  async onSubmit(data: FormData): Promise<void> {
+    const decodeBase64 = data.get("decodeBase64Checkbox") as string;
+
+    let ciphertext = data.get("ciphertext") as string;
+
+    const ciphertext_file = data.get("ciphertext_file") as File;
+    if (ciphertext_file.size > 0) {
+      ciphertext = atob(
+        (await fileToBase64(ciphertext_file)).replace("data:text/plain;base64,", ""),
+      );
+    }
+
+    try {
+      const res = await transitDecrypt(this.state.baseMount, this.state.secretItem, {
+        ciphertext: ciphertext,
+      });
+      let plaintext = res.plaintext;
+      if (decodeBase64 == "on") {
+        plaintext = atob(plaintext);
+      }
+      render(
+        <CopyableModal
+          id="transitDecryptModal"
+          name={i18next.t("transit_decrypt_decryption_result_modal_title")}
+          contentString={plaintext}
+        />,
+        document.querySelector("#modalAttachmentPoint"),
+      );
+      UIkit.modal(document.querySelector("#transitDecryptModal")).show();
+    } catch (e: unknown) {
+      const error = e as Error;
+      setErrorText(`API Error: ${error.message}`);
+    }
+  }
+
+  async getPageTitle(): Promise<Element | string> {
+    return await SecretTitleElement(this.router, i18next.t("transit_decrypt_suffix"));
+  }
+
+  get name(): string {
+    return i18next.t("transit_decrypt_title");
+  }
+}