web: migrate User list to web

web/src/api/Users.ts

@@ -1,4 +1,4 @@
-import { DefaultClient, AKResponse } from "./Client";
+import { DefaultClient, AKResponse, QueryArguments } from "./Client";
 
 let _globalMePromise: Promise<User>;
 
@@ -9,11 +9,25 @@ export class User {
     is_superuser: boolean;
     email: boolean;
     avatar: string;
+    is_active: boolean;
+    last_login: number;
 
     constructor() {
         throw Error();
     }
 
+    static get(pk: string): Promise<User> {
+        return DefaultClient.fetch<User>(["core", "users", pk]);
+    }
+
+    static list(filter?: QueryArguments): Promise<AKResponse<User>> {
+        return DefaultClient.fetch<AKResponse<User>>(["core", "users"], filter);
+    }
+
+    static adminUrl(rest: string): string {
+        return `/administration/users/${rest}`;
+    }
+
     static me(): Promise<User> {
         if (!_globalMePromise) {
             _globalMePromise = DefaultClient.fetch<User>(["core", "users", "me"]);

web/src/elements/buttons/SpinnerButton.ts

@@ -70,18 +70,18 @@ export class SpinnerButton extends LitElement {
             @click=${() => this.callAction()}
         >
             ${this.isRunning
-        ? html` <span class="pf-c-button__progress">
-                      <span
-                          class="pf-c-spinner pf-m-md"
-                          role="progressbar"
-                          aria-valuetext="Loading..."
-                      >
-                          <span class="pf-c-spinner__clipper"></span>
-                          <span class="pf-c-spinner__lead-ball"></span>
-                          <span class="pf-c-spinner__tail-ball"></span>
-                      </span>
-                  </span>`
-        : ""}
+                ? html` <span class="pf-c-button__progress">
+                            <span
+                                class="pf-c-spinner pf-m-md"
+                                role="progressbar"
+                                aria-valuetext="Loading..."
+                            >
+                                <span class="pf-c-spinner__clipper"></span>
+                                <span class="pf-c-spinner__lead-ball"></span>
+                                <span class="pf-c-spinner__tail-ball"></span>
+                            </span>
+                        </span>`
+                : ""}
             <slot></slot>
         </button>`;
     }

web/src/interfaces/AdminInterface.ts

@@ -47,7 +47,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         return User.me().then(u => u.is_superuser);
     }),
     new SidebarItem("Identity & Cryptography").children(
-        new SidebarItem("User", "/administration/users/"),
+        new SidebarItem("User", "/users"),
         new SidebarItem("Groups", "/groups"),
         new SidebarItem("Certificates", "/crypto/certificates"),
         new SidebarItem("Tokens", "/administration/tokens/"),

web/src/pages/users/UserListPage.ts

@@ -0,0 +1,113 @@
+import { gettext } from "django";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { AKResponse } from "../../api/Client";
+import { TablePage } from "../../elements/table/TablePage";
+
+import "../../elements/buttons/ModalButton";
+import "../../elements/buttons/Dropdown";
+import { TableColumn } from "../../elements/table/Table";
+import { User } from "../../api/Users";
+
+@customElement("ak-user-list")
+export class UserListPage extends TablePage<User> {
+    searchEnabled(): boolean {
+        return true;
+    }
+    pageTitle(): string {
+        return gettext("Users");
+    }
+    pageDescription(): string {
+        return "";
+    }
+    pageIcon(): string {
+        return gettext("pf-icon pf-icon-user");
+    }
+
+    @property()
+    order = "username";
+
+    apiEndpoint(page: number): Promise<AKResponse<User>> {
+        return User.list({
+            ordering: this.order,
+            page: page,
+            search: this.search || "",
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("Name", "username"),
+            new TableColumn("Active", "active"),
+            new TableColumn("Last login", "last_login"),
+            new TableColumn(""),
+        ];
+    }
+
+    row(item: User): TemplateResult[] {
+        return [
+            html`<div>
+                <div>${item.username}</div>
+                <small>${item.name}</small>
+            </div>`,
+            html`${item.is_active ? "Yes" : "No"}`,
+            html`${new Date(item.last_login * 1000).toLocaleString()}`,
+            html`
+            <ak-modal-button href="${User.adminUrl(`${item.pk}/update/`)}">
+                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+                    ${gettext("Edit")}
+                </ak-spinner-button>
+                <div slot="modal"></div>
+            </ak-modal-button>
+            <ak-dropdown class="pf-c-dropdown">
+                <button class="pf-c-dropdown__toggle pf-m-primary" type="button">
+                    <span class="pf-c-dropdown__toggle-text">${gettext(item.is_active ? "Disable" : "Enable")}</span>
+                    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
+                </button>
+                <ul class="pf-c-dropdown__menu" hidden>
+                    <li>
+                        ${item.is_active ?
+                            html`<ak-modal-button href="${User.adminUrl(`${item.pk}/disable/`)}">
+                                <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                    ${gettext("Disable")}
+                                </button>
+                                <div slot="modal"></div>
+                            </ak-modal-button>`:
+                            html`<ak-modal-button href="${User.adminUrl(`${item.pk}/enable/`)}">
+                                <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                    ${gettext("Enable")}
+                                </button>
+                                <div slot="modal"></div>
+                            </ak-modal-button>`}
+                    </li>
+                    <li class="pf-c-divider" role="separator"></li>
+                    <li>
+                        <ak-modal-button href="${User.adminUrl(`${item.pk}/delete/`)}">
+                            <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                ${gettext("Delete")}
+                            </button>
+                            <div slot="modal"></div>
+                        </ak-modal-button>
+                    </li>
+                </ul>
+            </ak-dropdown>
+            <a class="pf-c-button pf-m-tertiary" href="${User.adminUrl(`${item.pk}/reset/`)}">
+                ${gettext("Reset Password")}
+            </a>
+            <a class="pf-c-button pf-m-tertiary" href="${`-/impersonation/${item.pk}/`}">
+                ${gettext("Impersonate")}
+            </a>`,
+        ];
+    }
+
+    renderToolbar(): TemplateResult {
+        return html`
+        <ak-modal-button href=${User.adminUrl("create/")}>
+            <ak-spinner-button slot="trigger" class="pf-m-primary">
+                ${gettext("Create")}
+            </ak-spinner-button>
+            <div slot="modal"></div>
+        </ak-modal-button>
+        ${super.renderToolbar()}
+        `;
+    }
+}

web/src/routes.ts

@@ -21,6 +21,7 @@ import "./pages/providers/ProviderViewPage";
 import "./pages/sources/SourcesListPage";
 import "./pages/sources/SourceViewPage";
 import "./pages/groups/GroupListPage";
+import "./pages/users/UserListPage";
 import "./pages/system-tasks/SystemTaskListPage";
 
 export const ROUTES: Route[] = [
@@ -44,6 +45,7 @@ export const ROUTES: Route[] = [
     }),
     new Route(new RegExp("^/policies$"), html`<ak-policy-list></ak-policy-list>`),
     new Route(new RegExp("^/groups$"), html`<ak-group-list></ak-group-list>`),
+    new Route(new RegExp("^/users$"), html`<ak-user-list></ak-user-list>`),
     new Route(new RegExp("^/flows$"), html`<ak-flow-list></ak-flow-list>`),
     new Route(new RegExp(`^/flows/(?<slug>${SLUG_REGEX})$`)).then((args) => {
         return html`<ak-flow-view .flowSlug=${args.slug}></ak-flow-view>`;