Add the ability to create new users.

src/allPages.ts

@@ -37,6 +37,7 @@ import { UserPassUserEditPage } from "./pages/Access/Auth/userpass/UserPassUserE
 import { UserPassUserViewPage } from "./pages/Access/Auth/userpass/UserPassUserView";
 import { UserPassUsersListPage } from "./pages/Access/Auth/userpass/UserPassUsersList";
 import { getObjectKeys } from "./utils";
+import { UserPassUserNewPage } from "./pages/Access/Auth/userpass/UserPassUserNew";
 
 type pagesList = {
   [key: string]: Page;
@@ -51,6 +52,7 @@ export const allPages: pagesList = {
   USERPASS_USERS_LIST: new UserPassUsersListPage(),
   USERPASS_USER_VIEW: new UserPassUserViewPage(),
   USERPASS_USER_EDIT: new UserPassUserEditPage(),
+  USERPASS_USER_NEW: new UserPassUserNewPage(),
   ME: new MePage(),
   TOTP: new TOTPViewPage(),
   NEW_TOTP: new NewTOTPPage(),

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

@@ -0,0 +1,73 @@
+import { Form } from "../../../../elements/Form";
+import { Page } from "../../../../types/Page";
+import { UserType } from "../../../../api/types/userpass/user";
+import { createOrUpdateUserPassUser } from "../../../../api/auth/userpass/createOrUpdateUserPassUser";
+import { makeElement } from "z-makeelement";
+import { setErrorText } from "../../../../pageUtils";
+import i18next from "i18next";
+import { Margin } from "../../../../elements/Margin";
+
+export class UserPassUserNewPage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("USERPASS_USERS_LIST");
+  }
+
+  async render(): Promise<void> {
+    await this.router.setPageContent(
+      Form(
+        [
+          Margin(makeElement({
+            tag: "input",
+            class: "uk-input uk-form-width-large",
+            attributes: {
+              name: "username",
+              placeholder: i18next.t("userpass_common_username"),
+            },
+          })),
+          Margin(makeElement({
+            tag: "input",
+            class: "uk-input uk-form-width-large",
+            attributes: {
+              type: "password",
+              name: "password",
+              placeholder: i18next.t("userpass_common_password"),
+            },
+          })),
+          makeElement({
+            tag: "p",
+            id: "errorText",
+            class: "uk-text-danger",
+          }),
+          makeElement({
+            tag: "button",
+            class: ["uk-button", "uk-button-primary"],
+            text: i18next.t("userpass_user_new_create_btn"),
+            attributes: {
+              type: "submit",
+            },
+          }),
+        ],
+        async (form: HTMLFormElement) => {
+          const data = new FormData(form);
+          const apiData: Partial<UserType> = {
+            password: data.get("password") as string,
+          };
+          try {
+            await createOrUpdateUserPassUser(this.state.authPath, data.get("username") as string, apiData);
+            await this.router.changePage("USERPASS_USERS_LIST");
+          } catch (e: unknown) {
+            const error = e as Error;
+            setErrorText(error.message);
+          }
+        },
+      ),
+    );
+  }
+
+  get name(): string {
+    return i18next.t("userpass_user_new_title");
+  }
+}

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

@@ -14,6 +14,16 @@ export class UserPassUsersListPage extends Page {
   async render(): Promise<void> {
     const pageContent = makeElement({ tag: "div" });
     await this.router.setPageContent(pageContent);
+    pageContent.appendChild(
+      makeElement({
+        tag: "button",
+        class: ["uk-button", "uk-margin", "uk-button-primary"],
+        onclick: async () => {
+          await this.router.changePage("USERPASS_USER_NEW");
+        },
+        text: i18next.t("userpass_user_list_new_btn"),
+      }),
+    );
 
     const users = await listUserPassUsers(this.state.authPath);
     pageContent.appendChild(

src/translations/en.js

@@ -238,6 +238,7 @@ module.exports = {
   auth_view_config_token_type: "Token Type",
 
   // UserPass Common
+  userpass_common_username: "Username",
   userpass_common_password: "Password",
   userpass_common_cidrs: "Generated Token's Bound CIDRs",
   userpass_common_exp_max_ttl: "Generated Token's Explicit Maximum TTL",
@@ -251,6 +252,7 @@ module.exports = {
 
   // userpass Users List
   userpass_users_list_title: "Users List",
+  userpass_user_list_new_btn: "New",
 
   // userpass User View
   userpass_user_view_title: "User View",
@@ -259,4 +261,8 @@ module.exports = {
   // userpass user edit
   userpass_user_edit_title: "User Edit",
   userpass_user_edit_submit_btn: "Submit",
+
+  // userpass user new
+  userpass_user_new_title: "New User",
+  userpass_user_new_create_btn: "Create", 
 };