web/admin: improve user and group management by showing related objects

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

#2391

web/src/elements/oauth/UserCodeList.ts

@@ -1,68 +0,0 @@
-import { t } from "@lingui/macro";
-
-import { TemplateResult, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-import { ExpiringBaseGrantModel, Oauth2Api } from "@goauthentik/api";
-
-import { AKResponse } from "../../api/Client";
-import { DEFAULT_CONFIG } from "../../api/Config";
-import { uiConfig } from "../../common/config";
-import "../forms/DeleteBulkForm";
-import { Table, TableColumn } from "../table/Table";
-
-@customElement("ak-user-oauth-code-list")
-export class UserOAuthCodeList extends Table<ExpiringBaseGrantModel> {
-    @property({ type: Number })
-    userId?: number;
-
-    async apiEndpoint(page: number): Promise<AKResponse<ExpiringBaseGrantModel>> {
-        return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesList({
-            user: this.userId,
-            ordering: "expires",
-            page: page,
-            pageSize: (await uiConfig()).pagination.perPage,
-        });
-    }
-
-    checkbox = true;
-    order = "-expires";
-
-    columns(): TableColumn[] {
-        return [
-            new TableColumn(t`Provider`, "provider"),
-            new TableColumn(t`Expires`, "expires"),
-            new TableColumn(t`Scopes`, "scope"),
-        ];
-    }
-
-    renderToolbarSelected(): TemplateResult {
-        const disabled = this.selectedElements.length < 1;
-        return html`<ak-forms-delete-bulk
-            objectLabel=${t`Authorization Code(s)`}
-            .objects=${this.selectedElements}
-            .usedBy=${(item: ExpiringBaseGrantModel) => {
-                return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesUsedByList({
-                    id: item.pk,
-                });
-            }}
-            .delete=${(item: ExpiringBaseGrantModel) => {
-                return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesDestroy({
-                    id: item.pk,
-                });
-            }}
-        >
-            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
-                ${t`Delete`}
-            </button>
-        </ak-forms-delete-bulk>`;
-    }
-
-    row(item: ExpiringBaseGrantModel): TemplateResult[] {
-        return [
-            html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
-            html`${item.expires?.toLocaleString()}`,
-            html`${item.scope.join(", ")}`,
-        ];
-    }
-}

web/src/pages/groups/GroupListPage.ts

@@ -33,7 +33,7 @@ export class GroupListPage extends TablePage<Group> {
     }
 
     @property()
-    order = "slug";
+    order = "name";
 
     async apiEndpoint(page: number): Promise<AKResponse<Group>> {
         return new CoreApi(DEFAULT_CONFIG).coreGroupsList({
@@ -78,7 +78,7 @@ export class GroupListPage extends TablePage<Group> {
 
     row(item: Group): TemplateResult[] {
         return [
-            html`${item.name}`,
+            html`<a href="#/identity/groups/${item.pk}">${item.name}</a>`,
             html`${item.parentName || t`-`}`,
             html`${Array.from(item.users || []).length}`,
             html` <ak-label color=${item.isSuperuser ? PFColor.Green : PFColor.Grey}>

web/src/pages/groups/GroupViewPage.ts

@@ -0,0 +1,168 @@
+import { t } from "@lingui/macro";
+
+import { CSSResult, LitElement, TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import AKGlobal from "../../authentik.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+
+import { CoreApi, Group } from "@goauthentik/api";
+
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { EVENT_REFRESH } from "../../constants";
+import "../../elements/CodeMirror";
+import { PFColor } from "../../elements/Label";
+import "../../elements/PageHeader";
+import "../../elements/Tabs";
+import "../../elements/buttons/ActionButton";
+import "../../elements/buttons/SpinnerButton";
+import "../../elements/events/ObjectChangelog";
+import "../../elements/forms/ModalForm";
+import "../users/RelatedUserList";
+import "./GroupForm";
+
+@customElement("ak-group-view")
+export class GroupViewPage extends LitElement {
+    @property({ type: String })
+    set groupId(id: string) {
+        new CoreApi(DEFAULT_CONFIG)
+            .coreGroupsRetrieve({
+                groupUuid: id,
+            })
+            .then((group) => {
+                this.group = group;
+            });
+    }
+
+    @property({ attribute: false })
+    group?: Group;
+
+    static get styles(): CSSResult[] {
+        return [
+            PFBase,
+            PFPage,
+            PFFlex,
+            PFButton,
+            PFDisplay,
+            PFGrid,
+            PFContent,
+            PFCard,
+            PFDescriptionList,
+            PFSizing,
+            AKGlobal,
+        ];
+    }
+
+    constructor() {
+        super();
+        this.addEventListener(EVENT_REFRESH, () => {
+            if (!this.group?.pk) return;
+            this.groupId = this.group?.pk;
+        });
+    }
+
+    render(): TemplateResult {
+        return html`<ak-page-header
+                icon="pf-icon pf-icon-users"
+                header=${t`Group ${this.group?.name || ""}`}
+                description=${this.group?.name || ""}
+            >
+            </ak-page-header>
+            ${this.renderBody()}`;
+    }
+
+    renderBody(): TemplateResult {
+        if (!this.group) {
+            return html``;
+        }
+        return html`<ak-tabs>
+            <section
+                slot="page-overview"
+                data-tab-title="${t`Overview`}"
+                class="pf-c-page__main-section pf-m-no-padding-mobile"
+            >
+                <div class="pf-l-grid pf-m-gutter">
+                    <div
+                        class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
+                    >
+                        <div class="pf-c-card__title">${t`Group Info`}</div>
+                        <div class="pf-c-card__body">
+                            <dl class="pf-c-description-list pf-m-2-col">
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text">${t`Name`}</span>
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${this.group.name}
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text"
+                                            >${t`Superuser`}</span
+                                        >
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            <ak-label
+                                                color=${this.group.isSuperuser
+                                                    ? PFColor.Green
+                                                    : PFColor.Orange}
+                                            ></ak-label>
+                                        </div>
+                                    </dd>
+                                </div>
+                            </dl>
+                        </div>
+                        <div class="pf-c-card__footer">
+                            <ak-forms-modal>
+                                <span slot="submit"> ${t`Update`} </span>
+                                <span slot="header"> ${t`Update Group`} </span>
+                                <ak-group-form slot="form" .instancePk=${this.group.pk}>
+                                </ak-group-form>
+                                <button slot="trigger" class="pf-m-primary pf-c-button">
+                                    ${t`Edit`}
+                                </button>
+                            </ak-forms-modal>
+                        </div>
+                    </div>
+                    <div
+                        class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
+                    >
+                        <div class="pf-c-card__title">${t`Changelog`}</div>
+                        <div class="pf-c-card__body">
+                            <ak-object-changelog
+                                targetModelPk=${this.group.pk}
+                                targetModelApp="authentik_core"
+                                targetModelName="group"
+                            >
+                            </ak-object-changelog>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section
+                slot="page-users"
+                data-tab-title="${t`Users`}"
+                class="pf-c-page__main-section pf-m-no-padding-mobile"
+            >
+                <div class="pf-c-card">
+                    <div class="pf-c-card__body">
+                        <ak-user-related-list groupUuid=${this.group.pk}> </ak-user-related-list>
+                    </div>
+                </div>
+            </section>
+        </ak-tabs>`;
+    }
+}

web/src/pages/groups/RelatedGroupList.ts

@@ -0,0 +1,93 @@
+import { t } from "@lingui/macro";
+
+import { TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { CoreApi, Group } from "@goauthentik/api";
+
+import { AKResponse } from "../../api/Client";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { uiConfig } from "../../common/config";
+import { PFColor } from "../../elements/Label";
+import "../../elements/buttons/SpinnerButton";
+import "../../elements/forms/DeleteBulkForm";
+import "../../elements/forms/ModalForm";
+import { Table, TableColumn } from "../../elements/table/Table";
+import "./GroupForm";
+
+@customElement("ak-group-related-list")
+export class RelatedGroupList extends Table<Group> {
+    checkbox = true;
+    searchEnabled(): boolean {
+        return true;
+    }
+
+    @property()
+    order = "name";
+
+    @property({ type: Number })
+    targetUser?: number;
+
+    async apiEndpoint(page: number): Promise<AKResponse<Group>> {
+        return new CoreApi(DEFAULT_CONFIG).coreGroupsList({
+            ordering: this.order,
+            page: page,
+            pageSize: (await uiConfig()).pagination.perPage,
+            search: this.search || "",
+            membersByPk: this.targetUser ? [this.targetUser] : [],
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn(t`Name`, "name"),
+            new TableColumn(t`Parent`, "parent"),
+            new TableColumn(t`Superuser privileges?`),
+            new TableColumn(t`Actions`),
+        ];
+    }
+
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length < 1;
+        return html`<ak-forms-delete-bulk
+            objectLabel=${t`Group(s)`}
+            .objects=${this.selectedElements}
+            .usedBy=${(item: Group) => {
+                return new CoreApi(DEFAULT_CONFIG).coreGroupsUsedByList({
+                    groupUuid: item.pk,
+                });
+            }}
+            .delete=${(item: Group) => {
+                return new CoreApi(DEFAULT_CONFIG).coreGroupsDestroy({
+                    groupUuid: item.pk,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete-bulk>`;
+    }
+
+    row(item: Group): TemplateResult[] {
+        return [
+            html`<a href="#/identity/groups/${item.pk}">${item.name}</a>`,
+            html`${item.parentName || t`-`}`,
+            html`<ak-label color=${item.isSuperuser ? PFColor.Green : PFColor.Grey}>
+                ${item.isSuperuser ? t`Yes` : t`No`}
+            </ak-label>`,
+            html` <ak-forms-modal>
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update Group`} </span>
+                <ak-group-form slot="form" .instancePk=${item.pk}> </ak-group-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
+        ];
+    }
+
+    renderToolbar(): TemplateResult {
+        return html` ${super.renderToolbar()} `;
+    }
+}

web/src/pages/users/RelatedUserList.ts

@@ -0,0 +1,336 @@
+import { t } from "@lingui/macro";
+
+import { CSSResult, TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { until } from "lit/directives/until.js";
+
+import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+
+import { CoreApi, User } from "@goauthentik/api";
+
+import { AKResponse } from "../../api/Client";
+import { DEFAULT_CONFIG, tenant } from "../../api/Config";
+import { me } from "../../api/Users";
+import { uiConfig } from "../../common/config";
+import { PFColor } from "../../elements/Label";
+import "../../elements/buttons/ActionButton";
+import "../../elements/forms/DeleteBulkForm";
+import "../../elements/forms/ModalForm";
+import { MessageLevel } from "../../elements/messages/Message";
+import { showMessage } from "../../elements/messages/MessageContainer";
+import { getURLParam, updateURLParams } from "../../elements/router/RouteMatch";
+import { Table, TableColumn } from "../../elements/table/Table";
+import { first } from "../../utils";
+import "./ServiceAccountForm";
+import "./UserActiveForm";
+import "./UserForm";
+import "./UserPasswordForm";
+import "./UserResetEmailForm";
+
+@customElement("ak-user-related-list")
+export class RelatedUserList extends Table<User> {
+    expandable = true;
+    checkbox = true;
+
+    searchEnabled(): boolean {
+        return true;
+    }
+
+    @property()
+    groupUuid?: string;
+
+    @property()
+    order = "last_login";
+
+    @property({ type: Boolean })
+    hideServiceAccounts = getURLParam<boolean>("hideServiceAccounts", true);
+
+    static get styles(): CSSResult[] {
+        return super.styles.concat(PFDescriptionList, PFAlert);
+    }
+
+    async apiEndpoint(page: number): Promise<AKResponse<User>> {
+        return new CoreApi(DEFAULT_CONFIG).coreUsersList({
+            ordering: this.order,
+            page: page,
+            pageSize: (await uiConfig()).pagination.perPage,
+            search: this.search || "",
+            groupsByPk: this.groupUuid ? [this.groupUuid] : [],
+            attributes: this.hideServiceAccounts
+                ? JSON.stringify({
+                      "goauthentik.io/user/service-account__isnull": true,
+                  })
+                : undefined,
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn(t`Name`, "username"),
+            new TableColumn(t`Active`, "active"),
+            new TableColumn(t`Last login`, "last_login"),
+            new TableColumn(t`Actions`),
+        ];
+    }
+
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length < 1;
+        return html`<ak-forms-delete-bulk
+            objectLabel=${t`User(s)`}
+            .objects=${this.selectedElements}
+            .metadata=${(item: User) => {
+                return [
+                    { key: t`Username`, value: item.username },
+                    { key: t`ID`, value: item.pk.toString() },
+                    { key: t`UID`, value: item.uid },
+                ];
+            }}
+            .usedBy=${(item: User) => {
+                return new CoreApi(DEFAULT_CONFIG).coreUsersUsedByList({
+                    id: item.pk,
+                });
+            }}
+            .delete=${(item: User) => {
+                return new CoreApi(DEFAULT_CONFIG).coreUsersDestroy({
+                    id: item.pk,
+                });
+            }}
+        >
+            ${until(
+                me().then((user) => {
+                    const shouldShowWarning = this.selectedElements.find((el) => {
+                        return el.pk === user.user.pk || el.pk == user.original?.pk;
+                    });
+                    if (shouldShowWarning) {
+                        return html`
+                            <div slot="notice" class="pf-c-form__alert">
+                                <div class="pf-c-alert pf-m-inline pf-m-warning">
+                                    <div class="pf-c-alert__icon">
+                                        <i class="fas fa-exclamation-circle"></i>
+                                    </div>
+                                    <h4 class="pf-c-alert__title">
+                                        ${t`Warning: You're about to delete the user you're logged in as (${shouldShowWarning.username}). Proceed at your own risk.`}
+                                    </h4>
+                                </div>
+                            </div>
+                        `;
+                    }
+                    return html``;
+                }),
+            )}
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete-bulk>`;
+    }
+
+    row(item: User): TemplateResult[] {
+        return [
+            html`<a href="#/identity/users/${item.pk}">
+                <div>${item.username}</div>
+                <small>${item.name}</small>
+            </a>`,
+            html`<ak-label color=${item.isActive ? PFColor.Green : PFColor.Red}>
+                ${item.isActive ? t`Yes` : t`No`}
+            </ak-label>`,
+            html`${first(item.lastLogin?.toLocaleString(), t`-`)}`,
+            html`<ak-forms-modal>
+                    <span slot="submit"> ${t`Update`} </span>
+                    <span slot="header"> ${t`Update User`} </span>
+                    <ak-user-form slot="form" .instancePk=${item.pk}> </ak-user-form>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <i class="fas fa-edit"></i>
+                    </button>
+                </ak-forms-modal>
+                <a class="pf-c-button pf-m-tertiary" href="${`/-/impersonation/${item.pk}/`}">
+                    ${t`Impersonate`}
+                </a>`,
+        ];
+    }
+
+    renderExpanded(item: User): TemplateResult {
+        return html`<td role="cell" colspan="3">
+                <div class="pf-c-table__expandable-row-content">
+                    <dl class="pf-c-description-list pf-m-horizontal">
+                        <div class="pf-c-description-list__group">
+                            <dt class="pf-c-description-list__term">
+                                <span class="pf-c-description-list__text">${t`User status`}</span>
+                            </dt>
+                            <dd class="pf-c-description-list__description">
+                                <div class="pf-c-description-list__text">
+                                    ${item.isActive ? t`Active` : t`Inactive`}
+                                </div>
+                                <div class="pf-c-description-list__text">
+                                    ${item.isSuperuser ? t`Superuser` : t`Regular user`}
+                                </div>
+                            </dd>
+                        </div>
+                        <div class="pf-c-description-list__group">
+                            <dt class="pf-c-description-list__term">
+                                <span class="pf-c-description-list__text">${t`Change status`}</span>
+                            </dt>
+                            <dd class="pf-c-description-list__description">
+                                <div class="pf-c-description-list__text">
+                                    <ak-user-active-form
+                                        .obj=${item}
+                                        objectLabel=${t`User`}
+                                        .delete=${() => {
+                                            return new CoreApi(
+                                                DEFAULT_CONFIG,
+                                            ).coreUsersPartialUpdate({
+                                                id: item.pk || 0,
+                                                patchedUserRequest: {
+                                                    isActive: !item.isActive,
+                                                },
+                                            });
+                                        }}
+                                    >
+                                        <button slot="trigger" class="pf-c-button pf-m-warning">
+                                            ${item.isActive ? t`Deactivate` : t`Activate`}
+                                        </button>
+                                    </ak-user-active-form>
+                                </div>
+                            </dd>
+                        </div>
+                        <div class="pf-c-description-list__group">
+                            <dt class="pf-c-description-list__term">
+                                <span class="pf-c-description-list__text">${t`Recovery`}</span>
+                            </dt>
+                            <dd class="pf-c-description-list__description">
+                                <div class="pf-c-description-list__text">
+                                    <ak-forms-modal>
+                                        <span slot="submit">${t`Update password`}</span>
+                                        <span slot="header">${t`Update password`}</span>
+                                        <ak-user-password-form
+                                            slot="form"
+                                            .instancePk=${item.pk}
+                                        ></ak-user-password-form>
+                                        <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                            ${t`Set password`}
+                                        </button>
+                                    </ak-forms-modal>
+                                    ${until(
+                                        tenant().then((tenant) => {
+                                            if (!tenant.flowRecovery) {
+                                                return html`
+                                                    <p>
+                                                        ${t`To let a user directly reset a their password, configure a recovery flow on the currently active tenant.`}
+                                                    </p>
+                                                `;
+                                            }
+                                            return html`
+                                                <ak-action-button
+                                                    class="pf-m-secondary"
+                                                    .apiRequest=${() => {
+                                                        return new CoreApi(DEFAULT_CONFIG)
+                                                            .coreUsersRecoveryRetrieve({
+                                                                id: item.pk || 0,
+                                                            })
+                                                            .then((rec) => {
+                                                                showMessage({
+                                                                    level: MessageLevel.success,
+                                                                    message: t`Successfully generated recovery link`,
+                                                                    description: rec.link,
+                                                                });
+                                                            })
+                                                            .catch((ex: Response) => {
+                                                                ex.json().then(() => {
+                                                                    showMessage({
+                                                                        level: MessageLevel.error,
+                                                                        message: t`No recovery flow is configured.`,
+                                                                    });
+                                                                });
+                                                            });
+                                                    }}
+                                                >
+                                                    ${t`Copy recovery link`}
+                                                </ak-action-button>
+                                                ${item.email
+                                                    ? html`<ak-forms-modal
+                                                          .closeAfterSuccessfulSubmit=${false}
+                                                      >
+                                                          <span slot="submit">
+                                                              ${t`Send link`}
+                                                          </span>
+                                                          <span slot="header">
+                                                              ${t`Send recovery link to user`}
+                                                          </span>
+                                                          <ak-user-reset-email-form
+                                                              slot="form"
+                                                              .user=${item}
+                                                          >
+                                                          </ak-user-reset-email-form>
+                                                          <button
+                                                              slot="trigger"
+                                                              class="pf-c-button pf-m-secondary"
+                                                          >
+                                                              ${t`Email recovery link`}
+                                                          </button>
+                                                      </ak-forms-modal>`
+                                                    : html`<span
+                                                          >${t`Recovery link cannot be emailed, user has no email address saved.`}</span
+                                                      >`}
+                                            `;
+                                        }),
+                                    )}
+                                </div>
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </td>
+            <td></td>
+            <td></td>`;
+    }
+
+    renderToolbar(): TemplateResult {
+        return html`
+            <ak-forms-modal>
+                <span slot="submit"> ${t`Create`} </span>
+                <span slot="header"> ${t`Create User`} </span>
+                <ak-user-form slot="form"> </ak-user-form>
+                <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
+            </ak-forms-modal>
+            <ak-forms-modal .closeAfterSuccessfulSubmit=${false} .cancelText=${t`Close`}>
+                <span slot="submit"> ${t`Create`} </span>
+                <span slot="header"> ${t`Create Service account`} </span>
+                <ak-user-service-account slot="form"> </ak-user-service-account>
+                <button slot="trigger" class="pf-c-button pf-m-secondary">
+                    ${t`Create Service account`}
+                </button>
+            </ak-forms-modal>
+            ${super.renderToolbar()}
+        `;
+    }
+
+    renderToolbarAfter(): TemplateResult {
+        return html`&nbsp;
+            <div class="pf-c-toolbar__group pf-m-filter-group">
+                <div class="pf-c-toolbar__item pf-m-search-filter">
+                    <div class="pf-c-input-group">
+                        <div class="pf-c-check">
+                            <input
+                                class="pf-c-check__input"
+                                type="checkbox"
+                                id="hide-service-accounts"
+                                name="hide-service-accounts"
+                                ?checked=${this.hideServiceAccounts}
+                                @change=${() => {
+                                    this.hideServiceAccounts = !this.hideServiceAccounts;
+                                    this.page = 1;
+                                    this.fetch();
+                                    updateURLParams({
+                                        hideServiceAccounts: this.hideServiceAccounts,
+                                    });
+                                }}
+                            />
+                            <label class="pf-c-check__label" for="hide-service-accounts">
+                                ${t`Hide service-accounts`}
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>`;
+    }
+}

web/src/pages/users/UserViewPage.ts

@@ -31,10 +31,10 @@ import "../../elements/events/UserEvents";
 import "../../elements/forms/ModalForm";
 import { MessageLevel } from "../../elements/messages/Message";
 import { showMessage } from "../../elements/messages/MessageContainer";
-import "../../elements/oauth/UserCodeList";
 import "../../elements/oauth/UserRefreshList";
 import "../../elements/user/SessionList";
 import "../../elements/user/UserConsentList";
+import "../groups/RelatedGroupList";
 import "./UserActiveForm";
 import "./UserForm";
 
@@ -283,6 +283,17 @@ export class UserViewPage extends LitElement {
                     </div>
                 </div>
             </section>
+            <section
+                slot="page-groups"
+                data-tab-title="${t`Groups`}"
+                class="pf-c-page__main-section pf-m-no-padding-mobile"
+            >
+                <div class="pf-c-card">
+                    <div class="pf-c-card__body">
+                        <ak-group-related-list targetUser=${this.user.pk}> </ak-group-related-list>
+                    </div>
+                </div>
+            </section>
             <section
                 slot="page-events"
                 data-tab-title="${t`User events`}"
@@ -305,17 +316,6 @@ export class UserViewPage extends LitElement {
                     </div>
                 </div>
             </section>
-            <section
-                slot="page-oauth-code"
-                data-tab-title="${t`OAuth Authorization Codes`}"
-                class="pf-c-page__main-section pf-m-no-padding-mobile"
-            >
-                <div class="pf-c-card">
-                    <div class="pf-c-card__body">
-                        <ak-user-oauth-code-list userId=${this.user.pk}> </ak-user-oauth-code-list>
-                    </div>
-                </div>
-            </section>
             <section
                 slot="page-oauth-refresh"
                 data-tab-title="${t`OAuth Refresh Codes`}"

web/src/routesAdmin.ts

@@ -13,6 +13,7 @@ import "./pages/events/TransportListPage";
 import "./pages/flows/FlowListPage";
 import "./pages/flows/FlowViewPage";
 import "./pages/groups/GroupListPage";
+import "./pages/groups/GroupViewPage";
 import "./pages/outposts/OutpostListPage";
 import "./pages/outposts/ServiceConnectionListPage";
 import "./pages/policies/PolicyListPage";
@@ -75,6 +76,9 @@ export const ROUTES: Route[] = [
         html`<ak-policy-reputation-list></ak-policy-reputation-list>`,
     ),
     new Route(new RegExp("^/identity/groups$"), html`<ak-group-list></ak-group-list>`),
+    new Route(new RegExp(`^/identity/groups/(?<uuid>${UUID_REGEX})$`)).then((args) => {
+        return html`<ak-group-view .groupId=${args.uuid}></ak-group-view>`;
+    }),
     new Route(new RegExp("^/identity/users$"), html`<ak-user-list></ak-user-list>`),
     new Route(new RegExp(`^/identity/users/(?<id>${ID_REGEX})$`)).then((args) => {
         return html`<ak-user-view .userId=${parseInt(args.id, 10)}></ak-user-view>`;