add UserPassUserViewPage.

src/PageState.ts

@@ -91,6 +91,21 @@ export class PageState {
   set secretMountType(value: string) {
     localStorage.setItem("secretMountType", value);
   }
+
+  get authPath(): string {
+    return localStorage.getItem("authPath") || "";
+  }
+  set authPath(value: string) {
+    localStorage.setItem("authPath", value);
+  }
+
+  get userPassUser(): string {
+    return localStorage.getItem("userPassUser") || "";
+  }
+  set userPassUser(value: string) {
+    localStorage.setItem("userPassUser", value);
+  }
+
   get currentPage(): string {
     const curPage = localStorage.getItem("currentPage") || "HOME";
     return curPage;

src/allPages.ts

@@ -33,6 +33,7 @@ import { TransitRewrapPage } from "./pages/Secrets/Transit/TransitRewrap";
 import { TransitViewPage } from "./pages/Secrets/Transit/TransitView";
 import { TransitViewSecretPage } from "./pages/Secrets/Transit/TransitViewSecret";
 import { UnsealPage } from "./pages/Unseal";
+import { UserPassUserViewPage } from "./pages/Access/Auth/userpass/UserPassUserView";
 import { UserPassUsersListPage } from "./pages/Access/Auth/userpass/UserPassUsersList";
 import { getObjectKeys } from "./utils";
 
@@ -47,6 +48,7 @@ export const allPages: pagesList = {
   AUTH_HOME: new AuthHomePage(),
   AUTH_VIEW_CONFIG: new AuthViewConfigPage(),
   USERPASS_USERS_LIST: new UserPassUsersListPage(),
+  USERPASS_USER_VIEW: new UserPassUserViewPage(),
   ME: new MePage(),
   TOTP: new TOTPViewPage(),
   NEW_TOTP: new NewTOTPPage(),

src/api/auth/userpass/getUserPassUser.ts

@@ -0,0 +1,11 @@
+import { UserType, UserTypeAPIResp } from "../../types/userpass/user";
+import { appendAPIURL, getHeaders } from "../../apiUtils";
+
+export async function getUserPassUser(path: string, username: string): Promise<UserType> {
+  const request = new Request(appendAPIURL(`/v1/auth/${path}/users/${username}`), {
+    headers: getHeaders(),
+  });
+  const resp = await fetch(request);
+  const data = (await resp.json()) as UserTypeAPIResp;
+  return data.data;
+}

src/api/types/userpass/user.ts

@@ -0,0 +1,15 @@
+export type UserType = {
+  token_bound_cidrs: string[];
+  token_explicit_max_ttl: number;
+  token_max_ttl: number;
+  token_no_default_policy: boolean;
+  token_num_uses: number;
+  token_period: number;
+  token_policies: string[];
+  token_ttl: number;
+  token_type: string;
+};
+
+export type UserTypeAPIResp = {
+  data: UserType;
+};

src/elements/HeaderAndContent.ts

@@ -0,0 +1,23 @@
+import { makeElement } from "z-makeelement";
+
+export function HeaderAndContent(title: string, content: string): HTMLElement {
+  return makeElement({
+    tag: "tr",
+    children: [
+      makeElement({
+        tag: "td",
+        children: makeElement({
+          tag: "h5",
+          text: title,
+        }),
+      }),
+      makeElement({
+        tag: "td",
+        children: makeElement({
+          tag: "p",
+          text: content,
+        }),
+      }),
+    ],
+  });
+}

src/pages/Access/Auth/AuthHome.ts

@@ -17,7 +17,7 @@ export function AuthListElement(page: Page, path: string, method: AuthMethod): H
         class: "uk-h4 uk-margin-bottom",
         text: path,
         onclick: async () => {
-          page.state.baseMount = path;
+          page.state.authPath = path;
           if (method.type == "userpass") {
             await page.router.changePage("USERPASS_USERS_LIST");
           }

src/pages/Access/Auth/AuthViewConfig.ts

@@ -1,32 +1,11 @@
 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 function HeaderAndContent(title: string, content: string): HTMLElement {
-  return makeElement({
-    tag: "tr",
-    children: [
-      makeElement({
-        tag: "td",
-        children: makeElement({
-          tag: "h5",
-          text: title,
-        }),
-      }),
-      makeElement({
-        tag: "td",
-        children: makeElement({
-          tag: "p",
-          text: content,
-        }),
-      }),
-    ],
-  });
-}
-
 export class AuthViewConfigPage extends Page {
   constructor() {
     super();

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

@@ -0,0 +1,75 @@
+import { HeaderAndContent } from "../../../../elements/HeaderAndContent";
+import { Page } from "../../../../types/Page";
+import { getUserPassUser } from "../../../../api/auth/userpass/getUserPassUser";
+import { makeElement } from "z-makeelement";
+import i18next from "i18next";
+
+export class UserPassUserViewPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("USERPASS_USERS_LIST");
+  }
+
+  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 user = await getUserPassUser(this.state.authPath, this.state.userPassUser);
+
+    contentElement.appendChild(
+      HeaderAndContent(i18next.t("userpass_user_view_cidrs"), user.token_bound_cidrs.join()),
+    );
+    contentElement.appendChild(
+      HeaderAndContent(
+        i18next.t("userpass_user_view_exp_max_ttl"),
+        String(user.token_explicit_max_ttl).toString(),
+      ),
+    );
+    contentElement.appendChild(
+      HeaderAndContent(
+        i18next.t("userpass_user_view_max_ttl"),
+        String(user.token_max_ttl).toString(),
+      ),
+    );
+    contentElement.appendChild(
+      HeaderAndContent(
+        i18next.t("userpass_user_view_default_policy_attached"),
+        String(user.token_no_default_policy).toString(),
+      ),
+    );
+    contentElement.appendChild(
+      HeaderAndContent(
+        i18next.t("userpass_user_view_max_token_uses"),
+        String(user.token_num_uses).toString(),
+      ),
+    );
+    contentElement.appendChild(
+      HeaderAndContent(
+        i18next.t("userpass_user_view_token_peroid"),
+        String(user.token_period).toString(),
+      ),
+    );
+    contentElement.appendChild(
+      HeaderAndContent(i18next.t("userpass_user_view_policies"), user.token_policies.join()),
+    );
+    contentElement.appendChild(
+      HeaderAndContent(
+        i18next.t("userpass_user_view_initial_ttl"),
+        String(user.token_ttl).toString(),
+      ),
+    );
+    contentElement.appendChild(
+      HeaderAndContent(i18next.t("userpass_user_view_type"), user.token_type),
+    );
+  }
+
+  get name(): string {
+    return i18next.t("userpass_user_view_title");
+  }
+}

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

@@ -1,7 +1,6 @@
 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 {
@@ -16,7 +15,7 @@ export class UserPassUsersListPage extends Page {
     const pageContent = makeElement({ tag: "div" });
     await this.router.setPageContent(pageContent);
 
-    const users = await listUserPassUsers(this.state.baseMount);
+    const users = await listUserPassUsers(this.state.authPath);
     pageContent.appendChild(
       makeElement({
         tag: "ul",
@@ -27,7 +26,10 @@ export class UserPassUsersListPage extends Page {
               children: makeElement({
                 tag: "a",
                 text: user,
-                onclick: notImplemented,
+                onclick: async () => {
+                  this.state.userPassUser = user;
+                  await this.router.changePage("USERPASS_USER_VIEW");
+                },
               }),
             });
           }),

src/translations/en.js

@@ -239,4 +239,16 @@ module.exports = {
 
   // userpass Users List
   userpass_users_list_title: "Users List",
+
+  // userpass User View
+  userpass_user_view_title: "User View",
+  userpass_user_view_cidrs: "Generated Token's Bound CIDRs",
+  userpass_user_view_exp_max_ttl: "Generated Token's Explicit Maximum TTL",
+  userpass_user_view_max_ttl: "Generated Token's Maximum TTL",
+  userpass_user_view_default_policy_attached: "Do Not Attach 'default' Policy To Generated Tokens",
+  userpass_user_view_max_token_uses: "Maximum Uses of Generated Tokens",
+  userpass_user_view_token_peroid: "Generated Token's Period",
+  userpass_user_view_policies: "Generated Token's Policies",
+  userpass_user_view_initial_ttl: "Generated Token's Initial TTL",
+  userpass_user_view_type: "Generated Token's Type",
 };