diff --git a/web/src/admin/users/UserViewPage.ts b/web/src/admin/users/UserViewPage.ts index 7b5b35d29..9f0dd1731 100644 --- a/web/src/admin/users/UserViewPage.ts +++ b/web/src/admin/users/UserViewPage.ts @@ -23,7 +23,7 @@ import "@goauthentik/elements/user/SessionList"; import "@goauthentik/elements/user/UserConsentList"; import { msg, str } from "@lit/localize"; -import { CSSResult, TemplateResult, html } from "lit"; +import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; @@ -69,6 +69,15 @@ export class UserViewPage extends AKElement { PFCard, PFDescriptionList, PFSizing, + css` + .pf-c-description-list__description ak-action-button { + margin-right: 6px; + margin-bottom: 6px; + } + .ak-button-collection { + max-width: 12em; + } + `, ]; } @@ -90,6 +99,221 @@ export class UserViewPage extends AKElement { ${this.renderBody()}`; } + renderUserCard(): TemplateResult { + if (!this.user) { + return html``; + } + return html` +
${msg("User Info")}
+
+
+
+
+ ${msg("Username")} +
+
+
${this.user.username}
+
+
+
+
+ ${msg("Name")} +
+
+
${this.user.name}
+
+
+
+
+ ${msg("Email")} +
+
+
${this.user.email || "-"}
+
+
+
+
+ ${msg("Last login")} +
+
+
+ ${this.user.lastLogin?.toLocaleString()} +
+
+
+
+
+ ${msg("Active")} +
+
+
+ +
+
+
+
+
+ ${msg("Superuser")} +
+
+
+ +
+
+
+
+
+ ${msg("Actions")} +
+
+
+ + ${msg("Update")} + ${msg("Update User")} + + + + + { + return new CoreApi(DEFAULT_CONFIG).coreUsersPartialUpdate({ + id: this.user?.pk || 0, + patchedUserRequest: { + isActive: !this.user?.isActive, + }, + }); + }} + > + + + ${rootInterface()?.config?.capabilities.includes( + CapabilitiesEnum.CanImpersonate, + ) + ? html` + { + return new CoreApi(DEFAULT_CONFIG) + .coreUsersImpersonateCreate({ + id: this.user?.pk || 0, + }) + .then(() => { + window.location.href = "/"; + }); + }} + > + + ${msg("Impersonate")} + + + ` + : html``} +
+
+
+
+
+ ${msg("Recovery")} +
+
+
+ + ${msg("Update password")} + ${msg("Update password")} + + + + { + return new CoreApi(DEFAULT_CONFIG) + .coreUsersRecoveryRetrieve({ + id: this.user?.pk || 0, + }) + .then((rec) => { + showMessage({ + level: MessageLevel.success, + message: msg( + "Successfully generated recovery link", + ), + description: rec.link, + }); + }) + .catch(() => { + showMessage({ + level: MessageLevel.error, + message: msg( + "To create a recovery link, the current tenant needs to have a recovery flow configured.", + ), + description: "", + }); + }); + }} + > + + ${msg("Reset Password")} + + +
+
+
+
+
+ `; + } + renderBody(): TemplateResult { if (!this.user) { return html``; @@ -104,186 +328,7 @@ export class UserViewPage extends AKElement {
-
${msg("User Info")}
-
-
-
-
- ${msg("Username")} -
-
-
- ${this.user.username} -
-
-
-
-
- ${msg("Name")} -
-
-
- ${this.user.name} -
-
-
-
-
- ${msg("Email")} -
-
-
- ${this.user.email || "-"} -
-
-
-
-
- ${msg("Last login")} -
-
-
- ${this.user.lastLogin?.toLocaleString()} -
-
-
-
-
- ${msg("Active")} -
-
-
- -
-
-
-
-
- ${msg("Superuser")} -
-
-
- -
-
-
-
-
-
- - ${msg("Update")} - ${msg("Update User")} - - - - -
- ${rootInterface()?.config?.capabilities.includes( - CapabilitiesEnum.CanImpersonate, - ) - ? html` -
- { - return new CoreApi(DEFAULT_CONFIG) - .coreUsersImpersonateCreate({ - id: this.user?.pk || 0, - }) - .then(() => { - window.location.href = "/"; - }); - }} - > - ${msg("Impersonate")} - -
- ` - : html``} -
- { - return new CoreApi(DEFAULT_CONFIG).coreUsersPartialUpdate({ - id: this.user?.pk || 0, - patchedUserRequest: { - isActive: !this.user?.isActive, - }, - }); - }} - > - - -
-
- { - return new CoreApi(DEFAULT_CONFIG) - .coreUsersRecoveryRetrieve({ - id: this.user?.pk || 0, - }) - .then((rec) => { - showMessage({ - level: MessageLevel.success, - message: msg( - "Successfully generated recovery link", - ), - description: rec.link, - }); - }) - .catch(() => { - showMessage({ - level: MessageLevel.error, - message: msg( - "To create a recovery link, the current tenant needs to have a recovery flow configured.", - ), - description: "", - }); - }); - }} - > - ${msg("Reset Password")} - -
-
- - ${msg("Update password")} - ${msg("Update password")} - - - -
+ ${this.renderUserCard()}