Add userpass user deletion.

src/allPages.ts

@@ -33,11 +33,12 @@ 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 { UserPassUserDeletePage } from "./pages/Access/Auth/userpass/UserPassUserDelete";
 import { UserPassUserEditPage } from "./pages/Access/Auth/userpass/UserPassUserEdit";
+import { UserPassUserNewPage } from "./pages/Access/Auth/userpass/UserPassUserNew";
 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;
@@ -53,6 +54,7 @@ export const allPages: pagesList = {
   USERPASS_USER_VIEW: new UserPassUserViewPage(),
   USERPASS_USER_EDIT: new UserPassUserEditPage(),
   USERPASS_USER_NEW: new UserPassUserNewPage(),
+  USERPASS_USER_DELETE: new UserPassUserDeletePage(),
   ME: new MePage(),
   TOTP: new TOTPViewPage(),
   NEW_TOTP: new NewTOTPPage(),

src/api/auth/userpass/deleteUserPassUser.ts

@@ -0,0 +1,17 @@
+import { appendAPIURL, getHeaders } from "../../apiUtils";
+import { removeDoubleSlash } from "../../../utils";
+
+export async function deleteUserPassUser(path: string, username: string): Promise<void> {
+  const request = new Request(
+    appendAPIURL(removeDoubleSlash(`/v1/auth/${path}/users/${username}`)),
+    {
+      method: "DELETE",
+      headers: getHeaders(),
+    },
+  );
+  const response = await fetch(request);
+  if (!response.ok) {
+    const json = (await response.json()) as { errors: string[] };
+    throw new Error(json.errors[0]);
+  }
+}

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

@@ -0,0 +1,39 @@
+import { Page } from "../../../../types/Page";
+import { deleteUserPassUser } from "../../../../api/auth/userpass/deleteUserPassUser";
+import { makeElement } from "z-makeelement";
+import i18next from "i18next";
+
+export class UserPassUserDeletePage extends Page {
+  constructor() {
+    super();
+  }
+  async goBack(): Promise<void> {
+    await this.router.changePage("USERPASS_USERS_LIST");
+  }
+  async render(): Promise<void> {
+    await this.router.setPageContent(
+      makeElement({
+        tag: "div",
+        children: [
+          makeElement({
+            tag: "h5",
+            text: i18next.t("userpass_user_delete_text"),
+          }),
+          makeElement({
+            tag: "button",
+            class: ["uk-button", "uk-button-danger"],
+            text: i18next.t("userpass_user_delete_btn"),
+            onclick: async () => {
+              await deleteUserPassUser(this.state.authPath, this.state.userPassUser);
+              await this.goBack();
+            },
+          }),
+        ],
+      }),
+    );
+  }
+
+  get name(): string {
+    return i18next.t("userpass_user_delete_title");
+  }
+}

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

@@ -1,11 +1,11 @@
 import { Form } from "../../../../elements/Form";
+import { Margin } from "../../../../elements/Margin";
 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() {
@@ -19,23 +19,27 @@ export class UserPassUserNewPage extends Page {
     await this.router.setPageContent(
       Form(
         [
-          Margin(makeElement({
+          Margin(
-            tag: "input",
+            makeElement({
-            class: "uk-input uk-form-width-large",
+              tag: "input",
-            attributes: {
+              class: "uk-input uk-form-width-large",
-              name: "username",
+              attributes: {
-              placeholder: i18next.t("userpass_common_username"),
+                name: "username",
-            },
+                placeholder: i18next.t("userpass_common_username"),
-          })),
+              },
-          Margin(makeElement({
+            }),
-            tag: "input",
+          ),
-            class: "uk-input uk-form-width-large",
+          Margin(
-            attributes: {
+            makeElement({
-              type: "password",
+              tag: "input",
-              name: "password",
+              class: "uk-input uk-form-width-large",
-              placeholder: i18next.t("userpass_common_password"),
+              attributes: {
-            },
+                type: "password",
-          })),
+                name: "password",
+                placeholder: i18next.t("userpass_common_password"),
+              },
+            }),
+          ),
           makeElement({
             tag: "p",
             id: "errorText",
@@ -56,7 +60,11 @@ export class UserPassUserNewPage extends Page {
             password: data.get("password") as string,
           };
           try {
-            await createOrUpdateUserPassUser(this.state.authPath, data.get("username") as string, apiData);
+            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;

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

@@ -14,19 +14,38 @@ export class UserPassUserViewPage extends Page {
   }
 
   async render(): Promise<void> {
-    const contentElement = makeElement({ tag: "div" });
+    const pageContent = makeElement({
-    await this.router.setPageContent(contentElement);
+      tag: "div",
+    });
+    await this.router.setPageContent(pageContent);
 
-    contentElement.appendChild(
+    const buttonBoxElement = makeElement({
-      makeElement({
+      tag: "p",
-        tag: "button",
+      children: [
-        class: ["uk-button", "uk-margin", "uk-button-primary"],
+        makeElement({
-        onclick: async () => {
+          tag: "button",
-          await this.router.changePage("USERPASS_USER_EDIT");
+          class: ["uk-button", "uk-button-danger"],
-        },
+          onclick: async () => {
-        text: i18next.t("userpass_user_view_edit_btn"),
+            await this.router.changePage("USERPASS_USER_DELETE");
-      }),
+          },
-    );
+          text: i18next.t("userpass_user_view_delete_btn"),
+        }),
+        makeElement({
+          tag: "button",
+          class: ["uk-button", "uk-button-primary"],
+          onclick: async () => {
+            await this.router.changePage("USERPASS_USER_EDIT");
+          },
+          text: i18next.t("userpass_user_view_edit_btn"),
+        }),
+      ],
+    });
+    pageContent.appendChild(buttonBoxElement);
+
+    const contentElement = makeElement({
+      tag: "div",
+    });
+    pageContent.appendChild(contentElement);
 
     const tableElement = makeElement({
       tag: "table",

src/translations/en.js

@@ -257,6 +257,7 @@ module.exports = {
   // userpass User View
   userpass_user_view_title: "User View",
   userpass_user_view_edit_btn: "Edit",
+  userpass_user_view_delete_btn: "Delete",
 
   // userpass user edit
   userpass_user_edit_title: "User Edit",
@@ -264,5 +265,10 @@ module.exports = {
 
   // userpass user new
   userpass_user_new_title: "New User",
-  userpass_user_new_create_btn: "Create", 
+  userpass_user_new_create_btn: "Create",
+
+  userpass_user_delete_title: "Delete User",
+  userpass_user_delete_text:
+    "Are you sure you want to delete this user? This action can't be reversed.",
+  userpass_user_delete_btn: "Delete User",
 };