Add list to auth home page.

src/api/auth/listAuth.ts

@@ -0,0 +1,11 @@
+import { appendAPIURL, getHeaders } from "../apiUtils";
+import { AuthListAPIType, AuthListType } from "../types/auth";
+
+export async function listAuth(): Promise<AuthListType> {
+  const request = new Request(appendAPIURL(`/v1/sys/auth`), {
+    headers: getHeaders(),
+  });
+  const resp = await fetch(request);
+  const data = (await resp.json()) as AuthListAPIType;
+  return data.data;
+}

src/api/types/auth.ts

@@ -0,0 +1,19 @@
+export type AuthMethod = {
+  type: string;
+  accessor: string;
+  config: Record<string, unknown>;
+  description: string;
+  external_entropy_access: Boolean;
+  local: Boolean;
+  options: Record<string, unknown>;
+  seal_wrap: Boolean;
+  uuid: string;
+}
+
+export type AuthListAPIType = {
+  data: AuthListType;
+}
+
+export type AuthListType = {
+  [path: string]: AuthMethod;
+}

src/elements/Tile.ts

@@ -1,7 +1,8 @@
 import { makeElement } from "z-makeelement";
 
-type TileParams = {
+export type TileParams = {
   condition?: boolean;
+  color?: string;
   title: string;
   description: string;
   icon?: string;
@@ -17,7 +18,7 @@ export function Tile(params: TileParams): HTMLElement {
     onclick: params.onclick,
     children: makeElement({
       tag: "div",
-      class: ["uk-padding-small", "uk-background-primary"],
+      class: ["uk-padding-small", "uk-background-" + (params.color || "primary")],
       children: [
         makeElement({
           tag: "p",

src/pages/Access/Auth/AuthHome.ts

@@ -1,6 +1,49 @@
 import { Page } from "../../../types/Page";
 import i18next from "i18next";
 import { setErrorText } from "../../../pageUtils";
+import { listAuth } from "../../../api/auth/listAuth";
+import { objectToMap } from "../../../utils";
+import { AuthMethod } from "../../../api/types/auth";
+import { makeElement } from "z-makeelement";
+
+
+export function AuthListElement(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,
+      }),
+      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: "View Config",
+          }),
+          makeElement({
+            tag: "button",
+            class: "uk-button uk-button-small uk-button-primary",
+            text: "Edit Config",
+          }),
+        ]
+      }),
+
+    ],
+  });
+}
 
 export class AuthHomePage extends Page {
   constructor() {
@@ -10,7 +53,12 @@ export class AuthHomePage extends Page {
     await this.router.changePage("ACCESS_HOME");
   }
   async render(): Promise<void> {
-    setErrorText(i18next.t("not_implemented"));
+    let authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
+    const contentElement = makeElement({ tag: "div" });
+    this.router.setPageContent(contentElement);
+    for (const [path, details] of authList) {
+      contentElement.appendChild(AuthListElement(path, details))
+    }
   }
   get name(): string {
     return i18next.t("auth_home_title");

src/translations/en.js

@@ -220,4 +220,6 @@ module.exports = {
 
   // Auth Home Page
   auth_home_title: "Auth",
+  auth_home_view_config: "View Config",
+  auth_home_edit_config: "Edit Config",
 };