Add non-working userpass edit screen.

package.json

@@ -40,7 +40,7 @@
     "webpack": "^5.37.0",
     "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2",
-    "z-makeelement": "^1.0.2",
+    "z-makeelement": "^1.0.3",
     "z-pagerouter": "^1.0.1"
   }
 }

runLinter.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-npx eslint -c .eslintrc.json "$@" --ext .js,.ts
+npx eslint --cache -c .eslintrc.json "$@" --ext .js,.ts

src/allPages.ts

@@ -36,6 +36,7 @@ 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";
+import { UserPassUserEditPage } from "./pages/Access/Auth/userpass/UserPassUserEdit";
 
 type pagesList = {
   [key: string]: Page;
@@ -49,6 +50,7 @@ export const allPages: pagesList = {
   AUTH_VIEW_CONFIG: new AuthViewConfigPage(),
   USERPASS_USERS_LIST: new UserPassUsersListPage(),
   USERPASS_USER_VIEW: new UserPassUserViewPage(),
+  USERPASS_USER_EDIT: new UserPassUserEditPage(),
   ME: new MePage(),
   TOTP: new TOTPViewPage(),
   NEW_TOTP: new NewTOTPPage(),

src/elements/Form.ts

@@ -1,12 +1,14 @@
-import { makeElement } from "z-makeelement";
+import { makeElement, ElementInfo } from "z-makeelement";
 
 export function Form(
   children: Element[],
   submit: (form: HTMLFormElement) => unknown,
+  options: Partial<ElementInfo> = {}
 ): HTMLFormElement {
   const form = makeElement({
     tag: "form",
     children: children,
+    ...options,
   }) as HTMLFormElement;
 
   form.addEventListener("submit", (e: Event) => {

src/elements/InputWithTitle.ts

@@ -0,0 +1,23 @@
+import { makeElement } from "z-makeelement";
+import { Margin } from "./Margin";
+
+export function InputWithTitle(
+  title: string,
+  children: Element | Element[],
+): Element {
+  return Margin([
+    makeElement({
+      tag: "label",
+      class: "uk-form-label",
+      children: makeElement({
+        tag: "span",
+        text: title
+      })
+    }),
+    makeElement({
+      tag: "div",
+      class: "uk-form-controls uk-form-controls-text uk-margin-small-top",
+      children: children
+    })
+  ]);
+}

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

@@ -0,0 +1,157 @@
+import { HeaderAndContent } from "../../../../elements/HeaderAndContent";
+import { Page } from "../../../../types/Page";
+import { getUserPassUser } from "../../../../api/auth/userpass/getUserPassUser";
+import { makeElement } from "z-makeelement";
+import { toStr } from "../../../../utils";
+import i18next from "i18next";
+import { notImplemented } from "../../../../pageUtils";
+import { Margin } from "../../../../elements/Margin";
+import { Form } from "../../../../elements/Form";
+import { InputWithTitle } from "../../../../elements/InputWithTitle";
+
+export class UserPassUserEditPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("USERPASS_USER_VIEW");
+  }
+
+  async render(): Promise<void> {
+    const user = await getUserPassUser(this.state.authPath, this.state.userPassUser);
+
+    await this.router.setPageContent(
+      Form(
+        [
+          makeElement({
+            tag: "input",
+            class: "uk-input uk-form-width-large",
+            attributes: {
+              type: "password",
+              name: "password",
+              placeholder: i18next.t("userpass_common_password")
+            },
+          }),
+
+          InputWithTitle(
+            i18next.t("userpass_common_cidrs"),
+            makeElement({
+              tag: "input",
+              class: "uk-input uk-form-width-large",
+              attributes: {
+                name: "cidrs",
+                value: user.token_bound_cidrs.join()
+              },
+            }),
+          ),
+          InputWithTitle(
+            i18next.t("userpass_common_exp_max_ttl"),
+            makeElement({
+              tag: "input",
+              class: "uk-input uk-form-width-large",
+              attributes: {
+                name: "exp_max_ttl",
+                type: "number",
+                value: toStr(user.token_explicit_max_ttl)
+              },
+            }),
+          ),
+          InputWithTitle(
+            i18next.t("userpass_common_max_ttl"),
+            makeElement({
+              tag: "input",
+              class: "uk-input uk-form-width-large",
+              attributes: {
+                name: "max_ttl",
+                type: "number",
+                value: toStr(user.token_max_ttl)
+              },
+            }),
+          ),     
+          InputWithTitle(
+            i18next.t("userpass_common_default_policy_attached"),
+            makeElement({
+              tag: "input",
+              class: "uk-checkbox",
+              attributes: {
+                name: "def_pol_attached",
+                type: "checkbox",
+                value: toStr(user.token_no_default_policy)
+              },
+            }),
+          ),   
+          InputWithTitle(
+            i18next.t("userpass_common_max_token_uses"),
+            makeElement({
+              tag: "input",
+              class: "uk-input uk-form-width-large",
+              attributes: {
+                name: "max_uses",
+                type: "number",
+                value: toStr(user.token_num_uses)
+              },
+            }),
+          ),
+          InputWithTitle(
+            i18next.t("userpass_common_token_peroid"),
+            makeElement({
+              tag: "input",
+              class: "uk-input uk-form-width-large",
+              attributes: {
+                name: "period",
+                type: "number",
+                value: toStr(user.token_period)
+              },
+            }),
+          ),
+          InputWithTitle(
+            i18next.t("userpass_common_policies"),
+            makeElement({
+              tag: "input",
+              class: "uk-input uk-form-width-large",
+              attributes: {
+                name: "policies",
+                value: user.token_policies.join()
+              },
+            }),
+          ),         
+          InputWithTitle(
+            i18next.t("userpass_common_initial_ttl"),
+            makeElement({
+              tag: "input",
+              class: "uk-input uk-form-width-large",
+              attributes: {
+                name: "initial_ttl",
+                type: "number",
+                value: toStr(user.token_ttl)
+              },
+            }),
+          ),   
+          
+          makeElement({
+            tag: "p",
+            id: "errorText",
+            class: "uk-text-danger",
+          }),
+          makeElement({
+            tag: "button",
+            class: ["uk-button", "uk-button-primary"],
+            text: i18next.t("userpass_user_edit_submit_btn"),
+            attributes: {
+              type: "submit",
+            },
+          }),
+        ],
+        async (form: HTMLFormElement) => {
+          const formData = new FormData(form);
+          notImplemented();
+        },
+      ),
+    );
+
+  }
+
+  get name(): string {
+    return i18next.t("userpass_user_edit_title");
+  }
+}

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

@@ -2,7 +2,9 @@ import { HeaderAndContent } from "../../../../elements/HeaderAndContent";
 import { Page } from "../../../../types/Page";
 import { getUserPassUser } from "../../../../api/auth/userpass/getUserPassUser";
 import { makeElement } from "z-makeelement";
+import { toStr } from "../../../../utils";
 import i18next from "i18next";
+import { notImplemented } from "../../../../pageUtils";
 
 export class UserPassUserViewPage extends Page {
   constructor() {
@@ -13,60 +15,62 @@ export class UserPassUserViewPage extends Page {
   }
 
   async render(): Promise<void> {
+    const contentElement = makeElement({ tag: "div" });
+    await this.router.setPageContent(contentElement);
+
+    contentElement.appendChild(
+      makeElement({
+        tag: "button",
+        class: ["uk-button", "uk-margin", "uk-button-primary"],
+        onclick: async () => {
+          await this.router.changePage("USERPASS_USER_EDIT");
+        },
+        text: i18next.t("userpass_user_view_edit_btn"),
+      }),
+    );
+
     const tableElement = makeElement({
       tag: "table",
       class: "uk-table",
     });
-    await this.router.setPageContent(tableElement);
+    contentElement.appendChild(tableElement);
-    const contentElement = makeElement({ tag: "tbody" });
+
-    tableElement.appendChild(contentElement);
+    const tableBody = makeElement({ tag: "tbody" });
+    tableElement.appendChild(tableBody);
+
     const user = await getUserPassUser(this.state.authPath, this.state.userPassUser);
 
-    contentElement.appendChild(
+    tableBody.appendChild(
-      HeaderAndContent(i18next.t("userpass_user_view_cidrs"), user.token_bound_cidrs.join()),
+      HeaderAndContent(i18next.t("userpass_common_cidrs"), user.token_bound_cidrs.join()),
     );
-    contentElement.appendChild(
+    tableBody.appendChild(
       HeaderAndContent(
-        i18next.t("userpass_user_view_exp_max_ttl"),
+        i18next.t("userpass_common_exp_max_ttl"),
-        String(user.token_explicit_max_ttl).toString(),
+        toStr(user.token_explicit_max_ttl),
       ),
     );
-    contentElement.appendChild(
+    tableBody.appendChild(
+      HeaderAndContent(i18next.t("userpass_common_max_ttl"), toStr(user.token_max_ttl)),
+    );
+    tableBody.appendChild(
       HeaderAndContent(
-        i18next.t("userpass_user_view_max_ttl"),
+        i18next.t("userpass_common_default_policy_attached"),
-        String(user.token_max_ttl).toString(),
+        toStr(user.token_no_default_policy),
       ),
     );
-    contentElement.appendChild(
+    tableBody.appendChild(
-      HeaderAndContent(
+      HeaderAndContent(i18next.t("userpass_common_max_token_uses"), toStr(user.token_num_uses)),
-        i18next.t("userpass_user_view_default_policy_attached"),
-        String(user.token_no_default_policy).toString(),
-      ),
     );
-    contentElement.appendChild(
+    tableBody.appendChild(
-      HeaderAndContent(
+      HeaderAndContent(i18next.t("userpass_common_token_peroid"), toStr(user.token_period)),
-        i18next.t("userpass_user_view_max_token_uses"),
-        String(user.token_num_uses).toString(),
-      ),
     );
-    contentElement.appendChild(
+    tableBody.appendChild(
-      HeaderAndContent(
+      HeaderAndContent(i18next.t("userpass_common_policies"), user.token_policies.join()),
-        i18next.t("userpass_user_view_token_peroid"),
-        String(user.token_period).toString(),
-      ),
     );
-    contentElement.appendChild(
+    tableBody.appendChild(
-      HeaderAndContent(i18next.t("userpass_user_view_policies"), user.token_policies.join()),
+      HeaderAndContent(i18next.t("userpass_common_initial_ttl"), toStr(user.token_ttl)),
-    );
-    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),
     );
+    tableBody.appendChild(HeaderAndContent(i18next.t("userpass_common_type"), user.token_type));
   }
 
   get name(): string {

src/scss/uikit.scss

@@ -45,6 +45,7 @@ $form-select-option-color: $global-muted-color;
 // Common
 @import "uikit/src/scss/components/spinner.scss";
 @import "uikit/src/scss/components/alert.scss";
+@import "uikit/src/scss/components/label.scss";
 
 // JavaScript
 @import "uikit/src/scss/components/modal.scss";

src/translations/en.js

@@ -237,18 +237,27 @@ module.exports = {
   auth_view_config_max_lease_ttl: "Max Lease TTL",
   auth_view_config_token_type: "Token Type",
 
+  // UserPass Common
+  userpass_common_password: "Password",
+  userpass_common_cidrs: "Generated Token's Bound CIDRs",
+  userpass_common_exp_max_ttl: "Generated Token's Explicit Maximum TTL",
+  userpass_common_max_ttl: "Generated Token's Maximum TTL",
+  userpass_common_default_policy_attached: "Do Not Attach 'default' Policy To Generated Tokens",
+  userpass_common_max_token_uses: "Maximum Uses of Generated Tokens",
+  userpass_common_token_peroid: "Generated Token's Period",
+  userpass_common_policies: "Generated Token's Policies",
+  userpass_common_initial_ttl: "Generated Token's Initial TTL",
+  userpass_common_type: "Generated Token's Type",
+
   // 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_edit_btn: "Edit",
-  userpass_user_view_exp_max_ttl: "Generated Token's Explicit Maximum TTL",
+
-  userpass_user_view_max_ttl: "Generated Token's Maximum TTL",
+  // userpass user edit
-  userpass_user_view_default_policy_attached: "Do Not Attach 'default' Policy To Generated Tokens",
+  userpass_user_edit_title: "User Edit",
-  userpass_user_view_max_token_uses: "Maximum Uses of Generated Tokens",
+  userpass_user_edit_submit_btn: "Submit",
-  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",
 };

src/utils.ts

@@ -2,6 +2,8 @@ export function removeDoubleSlash(str: string): string {
   return str.replace(/\/\/+/g, "/");
 }
 
+export const toStr = (item: unknown): string => String(item).toString();
+
 export const getObjectKeys = (obj: Record<string, unknown>): string[] =>
   Object.getOwnPropertyNames(obj);
 export const objectToMap = (obj: Record<string, unknown>): Map<string, unknown> =>