Add tsx syntax to AuthHome.

src/pages/Access/Auth/AuthHome.ts

@@ -1,75 +0,0 @@
-import { AuthMethod } from "../../../api/types/auth";
-import { Page } from "../../../types/Page";
-import { listAuth } from "../../../api/auth/listAuth";
-import { makeElement } from "z-makeelement";
-import { objectToMap } from "../../../utils";
-import i18next from "i18next";
-
-export function AuthListElement(page: Page, path: string, method: AuthMethod): HTMLElement {
-  const isClickable = method.type != "token";
-
-  return makeElement({
-    tag: "div",
-    class: ["uk-padding-small", "uk-background-secondary"],
-    children: [
-      makeElement({
-        tag: isClickable ? "a" : "span",
-        class: "uk-h4 uk-margin-bottom",
-        text: path,
-        onclick: async () => {
-          page.state.authPath = path;
-          if (method.type == "userpass") {
-            await page.router.changePage("USERPASS_USERS_LIST");
-          }
-        },
-      }),
-      makeElement({
-        tag: "span",
-        class: "uk-text-muted",
-        text: ` (${method.accessor})`,
-      }),
-      makeElement({
-        tag: "div",
-        class: "uk-margin-top",
-        children: [
-          makeElement({
-            tag: "button",
-            class: "uk-button uk-button-small uk-button-primary",
-            text: i18next.t("auth_home_view_config"),
-            onclick: async () => {
-              page.state.baseMount = path;
-              await page.router.changePage("AUTH_VIEW_CONFIG");
-            },
-          }),
-          makeElement({
-            tag: "button",
-            class: "uk-button uk-button-small uk-button-primary",
-            text: i18next.t("auth_home_edit_config"),
-          }),
-        ],
-      }),
-    ],
-  });
-}
-
-export class AuthHomePage extends Page {
-  constructor() {
-    super();
-  }
-  async goBack(): Promise<void> {
-    await this.router.changePage("ACCESS_HOME");
-  }
-  async render(): Promise<void> {
-    this.state.secretPath = [];
-
-    const authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
-    const contentElement = makeElement({ tag: "div" });
-    await this.router.setPageContent(contentElement);
-    for (const [path, details] of authList) {
-      contentElement.appendChild(AuthListElement(this, path, details));
-    }
-  }
-  get name(): string {
-    return i18next.t("auth_home_title");
-  }
-}

src/pages/Access/Auth/AuthHome.tsx

@@ -0,0 +1,76 @@
+import { AuthMethod } from "../../../api/types/auth";
+import { JSX, render } from "preact";
+import { Page } from "../../../types/Page";
+import { listAuth } from "../../../api/auth/listAuth";
+import { notImplemented } from "../../../pageUtils";
+import { objectToMap } from "../../../utils";
+import i18next from "i18next";
+
+export type AuthListElementProps = {
+  page: Page;
+  path: string;
+  method: AuthMethod;
+};
+
+export function AuthListElement(props: AuthListElementProps): JSX.Element {
+  const isClickable = props.method.type != "token";
+
+  const onHeaderLinkClick = async (props: AuthListElementProps) => {
+    props.page.state.authPath = props.path;
+    if (props.method.type == "userpass") {
+      await props.page.router.changePage("USERPASS_USERS_LIST");
+    }
+  };
+
+  return (
+    <div class="uk-padding-small uk-background-secondary">
+      {isClickable ? (
+        <a class="uk-h4 uk-margin-bottom" onClick={() => onHeaderLinkClick(props)}>
+          {props.path}
+        </a>
+      ) : (
+        <span class="uk-h4 uk-margin-bottom">{props.path}</span>
+      )}
+      <span class="uk-text-muted">{` (${props.method.accessor})`}</span>
+      <div class="uk-margin-top">
+        <button
+          class="uk-button uk-button-small uk-button-primary"
+          onClick={async () => {
+            props.page.state.baseMount = props.path;
+            await props.page.router.changePage("AUTH_VIEW_CONFIG");
+          }}
+        >
+          {i18next.t("auth_home_view_config")}
+        </button>
+        <button class="uk-button uk-button-small uk-button-primary" onClick={notImplemented}>
+          {i18next.t("auth_home_edit_config")}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export class AuthHomePage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("ACCESS_HOME");
+  }
+  async render(): Promise<void> {
+    this.state.secretPath = [];
+    const authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
+
+    render(
+      <div>
+        {Array.from(authList).map((values: [string, AuthMethod]) => (
+          <AuthListElement page={this} path={values[0]} method={values[1]} />
+        ))}
+      </div>,
+      this.router.pageContentElement,
+    );
+  }
+  get name(): string {
+    return i18next.t("auth_home_title");
+  }
+}