split login forms into own files

src/ui/pages/Login.tsx

@@ -1,110 +1,10 @@
-import { Button } from "../elements/Button";
 import { Component, JSX } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
-import { Form } from "../elements/Form";
-import { Margin } from "../elements/Margin";
-import { MarginInline } from "../elements/MarginInline";
 import { PageTitle } from "../elements/PageTitle";
-import { route } from "preact-router";
+import { TokenLoginForm } from "./Login_Token";
-import { setErrorText } from "../../pageUtils";
+import { UsernameLoginForm } from "./Login_Username";
 import i18next from "i18next";
 
-export class TokenLoginForm extends Component<DefaultPageProps> {
-  constructor() {
-    super();
-  }
-
-  render(): JSX.Element {
-    return (
-      <Form onSubmit={(data) => this.onSubmit(data)}>
-        <Margin>
-          <input
-            class="uk-input uk-form-width-medium"
-            id="tokenInput"
-            name="token"
-            type="password"
-            placeholder={i18next.t("log_in_token_input")}
-            required
-          />
-        </Margin>
-        <MarginInline>
-          <Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
-        </MarginInline>
-      </Form>
-    );
-  }
-
-  async onSubmit(data: FormData): Promise<void> {
-    const token = data.get("token");
-    this.props.settings.token = token as string;
-
-    try {
-      await this.props.api.lookupSelf();
-      route("/");
-    } catch (e: unknown) {
-      const error = e as Error;
-      document.querySelector("#tokenInput").classList.add("uk-form-danger");
-      if (error.message == "permission denied") {
-        setErrorText(i18next.t("log_in_token_login_error"));
-      } else {
-        setErrorText(error.message);
-      }
-    }
-  }
-}
-
-export class UsernameLoginForm extends Component<DefaultPageProps> {
-  constructor() {
-    super();
-  }
-
-  render(): JSX.Element {
-    return (
-      <Form onSubmit={(data) => this.onSubmit(data)}>
-        <Margin>
-          <input
-            class="uk-input uk-form-width-medium"
-            id="usernameInput"
-            name="username"
-            type="text"
-            placeholder={i18next.t("log_in_username_input")}
-            required
-          />
-        </Margin>
-        <Margin>
-          <input
-            class="uk-input uk-form-width-medium"
-            id="passwordInput"
-            name="password"
-            type="password"
-            placeholder={i18next.t("log_in_password_input")}
-            required
-          />
-        </Margin>
-        <MarginInline>
-          <Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
-        </MarginInline>
-      </Form>
-    );
-  }
-
-  async onSubmit(data: FormData): Promise<void> {
-    try {
-      const res = await this.props.api.usernameLogin(
-        data.get("username") as string,
-        data.get("password") as string,
-      );
-      this.props.settings.token = res;
-      route("/");
-    } catch (e: unknown) {
-      const error = e as Error;
-      document.querySelector("#usernameInput").classList.add("uk-form-danger");
-      document.querySelector("#passwordInput").classList.add("uk-form-danger");
-      setErrorText(error.message);
-    }
-  }
-}
-
 export class Login extends Component<DefaultPageProps> {
   render(): JSX.Element {
     return (
@@ -122,10 +22,10 @@ export class Login extends Component<DefaultPageProps> {
           <p id="errorText" class="uk-text-danger" />
           <ul class="uk-switcher uk-margin switcher-container">
             <li>
-              <TokenLoginForm settings={this.props.settings} api={this.props.api} />
+              <TokenLoginForm {...this.props} />
             </li>
             <li>
-              <UsernameLoginForm settings={this.props.settings} api={this.props.api} />
+              <UsernameLoginForm {...this.props} />
             </li>
           </ul>
         </div>

src/ui/pages/Login_Token.tsx

@@ -0,0 +1,49 @@
+import { Button } from "../elements/Button";
+import { Component, JSX } from "preact";
+import { DefaultPageProps } from "../../types/DefaultPageProps";
+import { Form } from "../elements/Form";
+import { Margin } from "../elements/Margin";
+import { MarginInline } from "../elements/MarginInline";
+import { route } from "preact-router";
+import { setErrorText } from "../../pageUtils";
+import i18next from "i18next";
+
+export class TokenLoginForm extends Component<DefaultPageProps> {
+  render(): JSX.Element {
+    return (
+      <Form onSubmit={(data) => this.onSubmit(data)}>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            id="tokenInput"
+            name="token"
+            type="password"
+            placeholder={i18next.t("log_in_token_input")}
+            required
+          />
+        </Margin>
+        <MarginInline>
+          <Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
+        </MarginInline>
+      </Form>
+    );
+  }
+
+  async onSubmit(data: FormData): Promise<void> {
+    const token = data.get("token");
+    this.props.settings.token = token as string;
+
+    try {
+      await this.props.api.lookupSelf();
+      route("/");
+    } catch (e: unknown) {
+      const error = e as Error;
+      document.querySelector("#tokenInput").classList.add("uk-form-danger");
+      if (error.message == "permission denied") {
+        setErrorText(i18next.t("log_in_token_login_error"));
+      } else {
+        setErrorText(error.message);
+      }
+    }
+  }
+}

src/ui/pages/Login_Username.tsx

@@ -0,0 +1,57 @@
+import { Button } from "../elements/Button";
+import { Component, JSX } from "preact";
+import { DefaultPageProps } from "../../types/DefaultPageProps";
+import { Form } from "../elements/Form";
+import { Margin } from "../elements/Margin";
+import { MarginInline } from "../elements/MarginInline";
+import { route } from "preact-router";
+import { setErrorText } from "../../pageUtils";
+import i18next from "i18next";
+
+export class UsernameLoginForm extends Component<DefaultPageProps> {
+  render(): JSX.Element {
+    return (
+      <Form onSubmit={(data) => this.onSubmit(data)}>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            id="usernameInput"
+            name="username"
+            type="text"
+            placeholder={i18next.t("log_in_username_input")}
+            required
+          />
+        </Margin>
+        <Margin>
+          <input
+            class="uk-input uk-form-width-medium"
+            id="passwordInput"
+            name="password"
+            type="password"
+            placeholder={i18next.t("log_in_password_input")}
+            required
+          />
+        </Margin>
+        <MarginInline>
+          <Button text={i18next.t("log_in_btn")} color="primary" type="submit" />
+        </MarginInline>
+      </Form>
+    );
+  }
+
+  async onSubmit(data: FormData): Promise<void> {
+    try {
+      const res = await this.props.api.usernameLogin(
+        data.get("username") as string,
+        data.get("password") as string,
+      );
+      this.props.settings.token = res;
+      route("/");
+    } catch (e: unknown) {
+      const error = e as Error;
+      document.querySelector("#usernameInput").classList.add("uk-form-danger");
+      document.querySelector("#passwordInput").classList.add("uk-form-danger");
+      setErrorText(error.message);
+    }
+  }
+}

src/ui/pages/Unseal.tsx

@@ -2,12 +2,12 @@ import { Button } from "../elements/Button";
 import { Component, JSX } from "preact";
 import { DefaultPageProps } from "../../types/DefaultPageProps";
 import { PageTitle } from "../elements/PageTitle";
+import { UnsealForm } from "./Unseal_Form";
+import { UnsealQR } from "./Unseal_QR";
 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",

src/ui/pages/Unseal_Form.tsx

@@ -1,12 +1,12 @@
-import i18next from "i18next";
-import { JSX } from "preact/jsx-runtime";
 import { Button } from "../elements/Button";
 import { Form } from "../elements/Form";
+import { JSX } from "preact/jsx-runtime";
 import { MarginInline } from "../elements/MarginInline";
+import i18next from "i18next";
 
 type FormUnsealProps = {
   onKeySubmit: (key: string) => void;
-}
+};
 
 export function UnsealForm(props: FormUnsealProps): JSX.Element {
   return (
@@ -30,4 +30,4 @@ export function UnsealForm(props: FormUnsealProps): JSX.Element {
       </MarginInline>
     </Form>
   );
-}
+}

src/ui/pages/Unseal_QR.tsx

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