From c86b5f9f61025f6ccf1b125f18ee9f3bde5620d8 Mon Sep 17 00:00:00 2001
From: Kitteh <kitteh@kitteh.pw>
Date: Sun, 23 May 2021 13:43:08 +0100
Subject: [PATCH] Add tsx syntax to AuthViewConfig.

---
 src/pages/Access/Auth/AuthViewConfig.ts  | 79 ------------------------
 src/pages/Access/Auth/AuthViewConfig.tsx | 70 +++++++++++++++++++++
 2 files changed, 70 insertions(+), 79 deletions(-)
 delete mode 100644 src/pages/Access/Auth/AuthViewConfig.ts
 create mode 100644 src/pages/Access/Auth/AuthViewConfig.tsx

diff --git a/src/pages/Access/Auth/AuthViewConfig.ts b/src/pages/Access/Auth/AuthViewConfig.ts
deleted file mode 100644
index 8d67f34..0000000
--- a/src/pages/Access/Auth/AuthViewConfig.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { AuthMethod } from "../../../api/types/auth";
-import { HeaderAndContent } from "../../../elements/HeaderAndContent";
-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 class AuthViewConfigPage extends Page {
-  constructor() {
-    super();
-  }
-  async goBack(): Promise<void> {
-    await this.router.changePage("AUTH_HOME");
-  }
-
-  async render(): Promise<void> {
-    const tableElement = makeElement({
-      tag: "table",
-      class: "uk-table",
-    });
-    await this.router.setPageContent(tableElement);
-    const contentElement = makeElement({ tag: "tbody" });
-    tableElement.appendChild(contentElement);
-
-    const authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
-    const authMethod = authList.get(this.state.baseMount);
-
-    contentElement.appendChild(
-      HeaderAndContent(i18next.t("auth_view_config_type"), authMethod.type),
-    );
-    contentElement.appendChild(
-      HeaderAndContent(i18next.t("auth_view_config_path"), this.state.baseMount),
-    );
-    contentElement.appendChild(
-      HeaderAndContent(i18next.t("auth_view_config_description"), authMethod.description),
-    );
-    contentElement.appendChild(
-      HeaderAndContent(i18next.t("auth_view_config_accessor"), authMethod.accessor),
-    );
-    contentElement.appendChild(
-      HeaderAndContent(i18next.t("auth_view_config_local"), String(authMethod.local).toString()),
-    );
-    contentElement.appendChild(
-      HeaderAndContent(
-        i18next.t("auth_view_config_seal_wrap"),
-        String(authMethod.seal_wrap).toString(),
-      ),
-    );
-    contentElement.appendChild(
-      HeaderAndContent(
-        i18next.t("auth_view_config_list_when_unauth"),
-        String(authMethod.config.listing_visibility).toString(),
-      ),
-    );
-    contentElement.appendChild(
-      HeaderAndContent(
-        i18next.t("auth_view_config_default_lease_ttl"),
-        String(authMethod.config.default_lease_ttl).toString(),
-      ),
-    );
-    contentElement.appendChild(
-      HeaderAndContent(
-        i18next.t("auth_view_config_max_lease_ttl"),
-        String(authMethod.config.max_lease_ttl).toString(),
-      ),
-    );
-    contentElement.appendChild(
-      HeaderAndContent(
-        i18next.t("auth_view_config_token_type"),
-        authMethod.config.token_type as string,
-      ),
-    );
-  }
-
-  get name(): string {
-    return i18next.t("auth_view_config_title");
-  }
-}
diff --git a/src/pages/Access/Auth/AuthViewConfig.tsx b/src/pages/Access/Auth/AuthViewConfig.tsx
new file mode 100644
index 0000000..2472a1a
--- /dev/null
+++ b/src/pages/Access/Auth/AuthViewConfig.tsx
@@ -0,0 +1,70 @@
+import { AuthMethod } from "../../../api/types/auth";
+import { HeaderAndContent } from "../../../elements/ReactHeaderAndContent";
+import { Page } from "../../../types/Page";
+import { listAuth } from "../../../api/auth/listAuth";
+import { objectToMap, toStr } from "../../../utils";
+import { render } from "preact";
+import i18next from "i18next";
+
+export class AuthViewConfigPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("AUTH_HOME");
+  }
+
+  async render(): Promise<void> {
+    const authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
+    const authMethod = authList.get(this.state.baseMount);
+
+    render(
+      <table class="uk-table">
+        <tbody>
+          <HeaderAndContent title={i18next.t("auth_view_config_type")} content={authMethod.type} />
+          <HeaderAndContent
+            title={i18next.t("auth_view_config_path")}
+            content={this.state.baseMount}
+          />
+          <HeaderAndContent
+            title={i18next.t("auth_view_config_description")}
+            content={authMethod.description}
+          />
+          <HeaderAndContent
+            title={i18next.t("auth_view_config_accessor")}
+            content={authMethod.accessor}
+          />
+          <HeaderAndContent
+            title={i18next.t("auth_view_config_local")}
+            content={toStr(authMethod.local)}
+          />
+          <HeaderAndContent
+            title={i18next.t("auth_view_config_seal_wrap")}
+            content={toStr(authMethod.seal_wrap)}
+          />
+          <HeaderAndContent
+            title={i18next.t("auth_view_config_list_when_unauth")}
+            content={toStr(authMethod.config.listing_visibility)}
+          />
+          <HeaderAndContent
+            title={i18next.t("auth_view_config_default_lease_ttl")}
+            content={toStr(authMethod.config.default_lease_ttl)}
+          />
+          <HeaderAndContent
+            title={i18next.t("auth_view_config_max_lease_ttl")}
+            content={toStr(authMethod.config.max_lease_ttl)}
+          />
+          <HeaderAndContent
+            title={i18next.t("auth_view_config_token_type")}
+            content={toStr(authMethod.config.token_type)}
+          />
+        </tbody>
+      </table>,
+      this.router.pageContentElement,
+    );
+  }
+
+  get name(): string {
+    return i18next.t("auth_view_config_title");
+  }
+}