split unseal page into seporate form and qr files

src/ui/pages/Unseal.tsx

@@ -1,47 +1,19 @@
 import { Button } from "../elements/Button";
 import { Component, JSX } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
-import { Form } from "../elements/Form";
-import { MarginInline } from "../elements/MarginInline";
 import { PageTitle } from "../elements/PageTitle";
-import { QRScanner } from "../elements/QRScanner";
 import { route } from "preact-router";
 import { setErrorText } from "../../pageUtils";
 import { toStr } from "../../utils";
 import i18next from "i18next";
+import { UnsealForm } from "./Unseal_Form";
+import { UnsealQR } from "./Unseal_QR";
 
 const UnsealInputModes = {
   FORM_INPUT: "FORM_INPUT",
   QR_INPUT: "QR_INPUT",
 };
 
-export type UnsealFormInputProps = {
-  onSubmit: (code: string) => void;
-};
-
-export function UnsealFormInput(props: UnsealFormInputProps): JSX.Element {
-  return (
-    <Form
-      onSubmit={(data: FormData) => {
-        props.onSubmit(data.get("unsealKey") as string);
-      }}
-    >
-      <MarginInline>
-        <input
-          class="uk-input uk-form-width-medium"
-          name="unsealKey"
-          type="password"
-          placeholder={i18next.t("unseal_key_input_placeholder")}
-          required
-        />
-      </MarginInline>
-      <MarginInline>
-        <Button text={i18next.t("unseal_submit_key_btn")} color="primary" type="submit" />
-      </MarginInline>
-    </Form>
-  );
-}
-
 type UnsealPageState = {
   mode: string;
   keys_submitted: number;
@@ -115,11 +87,11 @@ export class Unseal extends Component<DefaultPageProps, UnsealPageState> {
           </p>
 
           {this.state.mode == UnsealInputModes.FORM_INPUT && (
-            <UnsealFormInput onSubmit={(code) => this.submitKey(code)} />
+            <UnsealForm onKeySubmit={(code) => this.submitKey(code)} />
           )}
 
           {this.state.mode == UnsealInputModes.QR_INPUT && (
-            <QRScanner onScan={(code) => this.submitKey(code)} />
+            <UnsealQR onKeySubmit={(code) => this.submitKey(code)} />
           )}
 
           <Button

src/ui/pages/Unseal_Form.tsx

@@ -0,0 +1,33 @@
+import i18next from "i18next";
+import { JSX } from "preact/jsx-runtime";
+import { Button } from "../elements/Button";
+import { Form } from "../elements/Form";
+import { MarginInline } from "../elements/MarginInline";
+
+type FormUnsealProps = {
+  onKeySubmit: (key: string) => void;
+}
+
+export function UnsealForm(props: FormUnsealProps): JSX.Element {
+  return (
+    <Form
+      onSubmit={(data: FormData) => {
+        props.onKeySubmit(data.get("unsealKey") as string);
+      }}
+    >
+      <MarginInline>
+        <input
+          class="uk-input uk-form-width-medium"
+          name="unsealKey"
+          type="password"
+          placeholder={i18next.t("unseal_key_input_placeholder")}
+          required
+        />
+      </MarginInline>
+
+      <MarginInline>
+        <Button text={i18next.t("unseal_submit_key_btn")} color="primary" type="submit" />
+      </MarginInline>
+    </Form>
+  );
+}

src/ui/pages/Unseal_QR.tsx

@@ -0,0 +1,9 @@
+import { QRScanner } from "../elements/QRScanner"
+
+type QRUnsealProps = {
+    onKeySubmit: (key: string) => void;
+}
+
+export function UnsealQR(props: QRUnsealProps) {
+    return <QRScanner onScan={(code: string) => props.onKeySubmit(code)} />
+}