Add UserPassUsersListPage.

src/allPages.ts

@@ -1,3 +1,4 @@
+import { AccessHomePage } from "./pages/Access/AccessHome";
 import { HomePage } from "./pages/Home";
 import { KeyValueDeletePage } from "./pages/Secrets/KeyValue/KeyValueDelete";
 import { KeyValueNewPage } from "./pages/Secrets/KeyValue/KeyValueNew";
@@ -26,13 +27,12 @@ import { TransitViewPage } from "./pages/Secrets/Transit/TransitView";
 import { TransitViewSecretPage } from "./pages/Secrets/Transit/TransitViewSecret";
 import { UnsealPage } from "./pages/Unseal";
 import { getObjectKeys } from "./utils";
-import { AccessHomePage } from "./pages/Access/AccessHome";
-
 
 /* eslint-disable */
-import { PageType } from "z-pagerouter";
 import { AuthHomePage } from "./pages/Access/Auth/AuthHome";
 import { AuthViewConfigPage } from "./pages/Access/Auth/AuthViewConfig";
+import { PageType } from "z-pagerouter";
+import { UserPassUsersListPage } from "./pages/Access/Auth/userpass/UserPassUsersList";
 /* eslint-enable */
 
 type pagesList = {
@@ -45,6 +45,7 @@ export const allPages: pagesList = {
   ACCESS_HOME: new AccessHomePage(),
   AUTH_HOME: new AuthHomePage(),
   AUTH_VIEW_CONFIG: new AuthViewConfigPage(),
+  USERPASS_USERS_LIST: new UserPassUsersListPage(),
   ME: new MePage(),
   TOTP: new TOTPViewPage(),
   NEW_TOTP: new NewTOTPPage(),

src/api/auth/listAuth.ts

@@ -1,5 +1,5 @@
-import { appendAPIURL, getHeaders } from "../apiUtils";
 import { AuthListAPIType, AuthListType } from "../types/auth";
+import { appendAPIURL, getHeaders } from "../apiUtils";
 
 export async function listAuth(): Promise<AuthListType> {
   const request = new Request(appendAPIURL(`/v1/sys/auth`), {

src/api/auth/userpass/listUserPassUsers.ts

@@ -0,0 +1,10 @@
+import { appendAPIURL, getHeaders } from "../../apiUtils";
+
+export async function listUserPassUsers(path: string): Promise<string[]> {
+  const request = new Request(appendAPIURL(`/v1/auth/${path}/users?list=true`), {
+    headers: getHeaders(),
+  });
+  const resp = await fetch(request);
+  const data = (await resp.json()) as { data: { keys: string[] } };
+  return data.data.keys;
+}

src/api/types/auth.ts

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

src/pageUtils.ts

@@ -76,3 +76,7 @@ export function setErrorText(text: string): void {
     timeout: 2000,
   });
 }
+
+export function notImplemented(): void {
+  setErrorText(i18next.t("not_implemented"));
+}

src/pages/Access/AccessHome.ts

@@ -1,8 +1,8 @@
 import { Page } from "../../types/Page";
+import { Tile } from "../../elements/Tile";
 import { makeElement } from "z-makeelement";
 import { prePageChecks, setErrorText } from "../../pageUtils";
 import i18next from "i18next";
-import { Tile } from "../../elements/Tile";
 
 export class AccessHomePage extends Page {
   constructor() {
@@ -15,7 +15,7 @@ export class AccessHomePage extends Page {
     await this.router.setPageContent("");
     if (!(await prePageChecks(this.router))) return;
 
-    this.router.setPageContent(
+    await this.router.setPageContent(
       makeElement({
         tag: "div",
         class: "uk-child-width-1-1@s uk-child-width-1-2@m uk-grid-small uk-grid-match",

src/pages/Access/Auth/AuthHome.ts

@@ -1,9 +1,9 @@
-import { Page } from "../../../types/Page";
-import i18next from "i18next";
-import { listAuth } from "../../../api/auth/listAuth";
-import { objectToMap } from "../../../utils";
 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";
@@ -16,11 +16,17 @@ export function AuthListElement(page: Page, path: string, method: AuthMethod): H
         tag: isClickable ? "a" : "span",
         class: "uk-h4 uk-margin-bottom",
         text: path,
+        onclick: async () => {
+          page.state.currentBaseMount = path;
+          if (method.type == "userpass") {
+            await page.router.changePage("USERPASS_USERS_LIST");
+          }
+        },
       }),
       makeElement({
         tag: "span",
         class: "uk-text-muted",
-        text: ` (${method.accessor})`
+        text: ` (${method.accessor})`,
       }),
       makeElement({
         tag: "div",
@@ -40,7 +46,7 @@ export function AuthListElement(page: Page, path: string, method: AuthMethod): H
             class: "uk-button uk-button-small uk-button-primary",
             text: i18next.t("auth_home_edit_config"),
           }),
-        ]
+        ],
       }),
     ],
   });
@@ -56,11 +62,11 @@ export class AuthHomePage extends Page {
   async render(): Promise<void> {
     this.state.currentSecretPath = [];
 
-    let authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
+    const authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
     const contentElement = makeElement({ tag: "div" });
-    this.router.setPageContent(contentElement);
+    await this.router.setPageContent(contentElement);
     for (const [path, details] of authList) {
-      contentElement.appendChild(AuthListElement(this, path, details))
+      contentElement.appendChild(AuthListElement(this, path, details));
     }
   }
   get name(): string {

src/pages/Access/Auth/AuthViewConfig.ts

@@ -1,9 +1,9 @@
-import { Page } from "../../../types/Page";
-import i18next from "i18next";
-import { listAuth } from "../../../api/auth/listAuth";
-import { objectToMap } from "../../../utils";
 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 HeaderAndContent(title: string, content: string): HTMLElement {
   return makeElement({
@@ -14,7 +14,7 @@ export function HeaderAndContent(title: string, content: string): HTMLElement {
         children: makeElement({
           tag: "h5",
           text: title,
-        })
+        }),
       }),
       makeElement({
         tag: "td",
@@ -23,11 +23,10 @@ export function HeaderAndContent(title: string, content: string): HTMLElement {
           text: content,
         }),
       }),
-    ]
+    ],
-  })
+  });
 }
 
-
 export class AuthViewConfigPage extends Page {
   constructor() {
     super();
@@ -41,42 +40,35 @@ export class AuthViewConfigPage extends Page {
       tag: "table",
       class: "uk-table",
     });
-    this.router.setPageContent(tableElement);
+    await this.router.setPageContent(tableElement);
     const contentElement = makeElement({ tag: "tbody" });
     tableElement.appendChild(contentElement);
 
-    let authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
+    const authList = objectToMap(await listAuth()) as Map<string, AuthMethod>;
-    let authMethod = authList.get(this.state.currentBaseMount);
+    const authMethod = authList.get(this.state.currentBaseMount);
 
+    contentElement.appendChild(HeaderAndContent("Type", authMethod.type));
+    contentElement.appendChild(HeaderAndContent("Path", this.state.currentBaseMount));
+    contentElement.appendChild(HeaderAndContent("Description", authMethod.description));
+    contentElement.appendChild(HeaderAndContent("Accessor", authMethod.accessor));
+    contentElement.appendChild(HeaderAndContent("Local", String(authMethod.local).toString()));
     contentElement.appendChild(
-      HeaderAndContent("Type", authMethod.type)
+      HeaderAndContent("Seal Wrap", String(authMethod.seal_wrap).toString()),
     );
     contentElement.appendChild(
-      HeaderAndContent("Path", this.state.currentBaseMount)
+      HeaderAndContent(
+        "List when unauthenticated?",
+        String(authMethod.config.listing_visibility).toString(),
+      ),
     );
     contentElement.appendChild(
-      HeaderAndContent("Description", authMethod.description)
+      HeaderAndContent("Default Lease TTL", String(authMethod.config.default_lease_ttl).toString()),
     );
     contentElement.appendChild(
-      HeaderAndContent("Accessor", authMethod.accessor)
+      HeaderAndContent("Max Lease TTL", String(authMethod.config.max_lease_ttl).toString()),
     );
     contentElement.appendChild(
-      HeaderAndContent("Local", String(authMethod.local).toString())
+      HeaderAndContent("Token Type", authMethod.config.token_type as string),
-    );
-    contentElement.appendChild(
-      HeaderAndContent("Seal Wrap", String(authMethod.seal_wrap).toString())
-    );
-    contentElement.appendChild(
-      HeaderAndContent("List when unauthenticated?", String(authMethod.config.listing_visibility).toString())
-    );
-    contentElement.appendChild(
-      HeaderAndContent("Default Lease TTL", String(authMethod.config.default_lease_ttl).toString())
-    );
-    contentElement.appendChild(
-      HeaderAndContent("Max Lease TTL", String(authMethod.config.max_lease_ttl).toString())
-    );
-    contentElement.appendChild(
-      HeaderAndContent("Token Type", authMethod.config.token_type as string)
     );
   }
 

src/pages/Access/Auth/userpass/UserPassUsersList.ts

@@ -0,0 +1,42 @@
+import { Page } from "../../../../types/Page";
+import { listUserPassUsers } from "../../../../api/auth/userpass/listUserPassUsers";
+import { makeElement } from "z-makeelement";
+import { notImplemented } from "../../../../pageUtils";
+import i18next from "i18next";
+
+export class UserPassUsersListPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("AUTH_HOME");
+  }
+
+  async render(): Promise<void> {
+    const pageContent = makeElement({ tag: "div" });
+    await this.router.setPageContent(pageContent);
+
+    const users = await listUserPassUsers(this.state.currentBaseMount);
+    pageContent.appendChild(
+      makeElement({
+        tag: "ul",
+        children: [
+          ...users.map((user) => {
+            return makeElement({
+              tag: "li",
+              children: makeElement({
+                tag: "a",
+                text: user,
+                onclick: notImplemented,
+              }),
+            });
+          }),
+        ],
+      }),
+    );
+  }
+
+  get name(): string {
+    return i18next.t("userpass_users_list_title");
+  }
+}

src/translations/en.js

@@ -226,4 +226,7 @@ module.exports = {
   // Auth View Conig Page
   auth_view_config_title: "Auth View Config",
   auth_view_config_suffix: " (view config)",
+
+  // userpass Users List
+  userpass_users_list_title: "Users List",
 };