diff --git a/web/src/admin/users/UserActiveForm.ts b/web/src/admin/users/UserActiveForm.ts index d8525215b1..e06278e0db 100644 --- a/web/src/admin/users/UserActiveForm.ts +++ b/web/src/admin/users/UserActiveForm.ts @@ -3,18 +3,20 @@ import "#elements/buttons/SpinnerButton/index"; import { parseAPIResponseError, pluckErrorDetail } from "#common/errors/network"; import { MessageLevel } from "#common/messages"; -import { DeleteForm } from "#elements/forms/DeleteForm"; import { showMessage } from "#elements/messages/MessageContainer"; +import { UserDeleteForm } from "#elements/user/utils"; import { msg, str } from "@lit/localize"; import { html, TemplateResult } from "lit"; import { customElement } from "lit/decorators.js"; @customElement("ak-user-active-form") -export class UserActiveForm extends DeleteForm { +export class UserActiveForm extends UserDeleteForm { onSuccess(): void { showMessage({ - message: msg(str`Successfully updated ${this.objectLabel} ${this.obj?.name}`), + message: msg( + str`Successfully updated ${this.objectLabel} ${this.getObjectDisplayName()}`, + ), level: MessageLevel.success, }); } @@ -30,7 +32,8 @@ export class UserActiveForm extends DeleteForm { }); } - renderModalInner(): TemplateResult { + override renderModalInner(): TemplateResult { + const objName = this.getFormattedObjectName(); return html`

${msg(str`Update ${this.objectLabel}`)}

@@ -39,9 +42,7 @@ export class UserActiveForm extends DeleteForm {

- ${msg( - str`Are you sure you want to update ${this.objectLabel} "${this.obj?.name}"?`, - )} + ${msg(str`Are you sure you want to update ${this.objectLabel}${objName}?`)}

diff --git a/web/src/elements/forms/DeleteForm.ts b/web/src/elements/forms/DeleteForm.ts index cf1e400c7f..f8432eb6d7 100644 --- a/web/src/elements/forms/DeleteForm.ts +++ b/web/src/elements/forms/DeleteForm.ts @@ -32,6 +32,22 @@ export class DeleteForm extends ModalButton { @property({ attribute: false }) delete!: () => Promise; + /** + * Get the display name for the object being deleted/updated. + */ + protected getObjectDisplayName(): string | undefined { + return this.obj?.name as string | undefined; + } + + /** + * Get the formatted object name for display in messages. + * Returns ` "displayName"` with quotes if display name exists, empty string otherwise. + */ + protected getFormattedObjectName(): string { + const displayName = this.getObjectDisplayName(); + return displayName ? ` "${displayName}"` : ""; + } + confirm(): Promise { return this.delete() .then(() => { @@ -54,7 +70,9 @@ export class DeleteForm extends ModalButton { onSuccess(): void { showMessage({ - message: msg(str`Successfully deleted ${this.objectLabel} ${this.obj?.name}`), + message: msg( + str`Successfully deleted ${this.objectLabel} ${this.getObjectDisplayName()}`, + ), level: MessageLevel.success, }); } @@ -71,12 +89,7 @@ export class DeleteForm extends ModalButton { } renderModalInner(): TemplateResult { - let objName = this.obj?.name; - if (objName) { - objName = ` "${objName}"`; - } else { - objName = ""; - } + const objName = this.getFormattedObjectName(); return html`

${msg(str`Delete ${this.objectLabel}`)}

@@ -85,7 +98,7 @@ export class DeleteForm extends ModalButton {

- ${msg(str`Are you sure you want to delete ${this.objectLabel} ${objName}?`)} + ${msg(str`Are you sure you want to delete ${this.objectLabel}${objName}?`)}

diff --git a/web/src/elements/user/utils.ts b/web/src/elements/user/utils.ts index 99dfa49271..c32c5a69f4 100644 --- a/web/src/elements/user/utils.ts +++ b/web/src/elements/user/utils.ts @@ -1,3 +1,5 @@ +import { DeleteForm } from "#elements/forms/DeleteForm"; + import { User } from "@goauthentik/api"; export function UserOption(user: User): string { @@ -17,3 +19,24 @@ export function UserOption(user: User): string { } return finalString; } + +/** + * Get a display-friendly name for a user object. + * Falls back to username if no display name (name field) is set. + * + * @param user - The user object + * @returns The user's display name or username + */ +export function getUserDisplayName(user: User): string { + return user.name || user.username; +} + +/** + * Base class for delete/update forms that work with User objects. + * Automatically uses username as fallback when user has no display name. + */ +export class UserDeleteForm extends DeleteForm { + protected override getObjectDisplayName(): string | undefined { + return this.obj ? getUserDisplayName(this.obj as unknown as User) : undefined; + } +}