From fadc14eddca2e3b2b314696a17097a38a9688bab Mon Sep 17 00:00:00 2001 From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com> Date: Tue, 16 Jun 2026 20:58:23 +0200 Subject: [PATCH] web: Fix stale clipboard tokens, untranslated labels (#23063) * web: Fix stale clipboard tokens, untranslated labels. * Fix tooltip. * Fix type error. * Update types. * Fix types. Clean up composite. * Fix label names. * Fix broken HTML. * Fix labels, formatters. * Clean up properties, lifecyle. --- web/packages/lex/index.d.ts | 23 ++ web/packages/lex/index.js | 9 +- web/packages/lex/package.json | 2 + .../connectors/ConnectorsListPage.ts | 3 + .../agent/EnrollmentTokenListPage.ts | 3 + .../admin/endpoints/devices/DeviceListPage.ts | 2 +- .../admin/lifecycle/ObjectReviewIteration.ts | 2 +- .../providers/rac/ConnectionTokenList.ts | 3 + .../invitation/wizard/InvitationWizard.ts | 2 +- web/src/admin/tokens/TokenForm.ts | 16 +- web/src/admin/tokens/TokenListPage.ts | 6 +- web/src/admin/users/UserDevicesTable.ts | 3 + web/src/admin/users/UserTokenList.ts | 172 +++++++++++ web/src/admin/users/UserViewPage.ts | 277 +++++++++--------- .../admin/users/oauth/UserAccessTokenList.ts | 3 + .../admin/users/oauth/UserRefreshTokenList.ts | 3 + web/src/common/clipboard.ts | 3 +- web/src/common/labels.ts | 141 +++++---- web/src/common/messages.ts | 4 +- web/src/common/ui/locale/format.ts | 10 +- web/src/elements/ak-table/ak-simple-table.ts | 4 +- web/src/elements/buttons/IconCopyButton.ts | 7 +- .../elements/buttons/IconTokenCopyButton.ts | 36 ++- web/src/elements/forms/Form.ts | 4 +- web/src/elements/table/Table.ts | 122 ++++++-- web/src/elements/table/TablePage.ts | 2 +- web/src/elements/user/SessionList.ts | 3 + web/src/elements/user/UserConsentList.ts | 3 + web/src/elements/user/UserReputationList.ts | 3 + web/src/elements/wizard/CreateWizard.ts | 8 +- web/src/elements/wizard/Wizard.ts | 8 +- .../user-settings/tokens/UserTokenList.ts | 6 +- web/tsconfig.json | 8 +- 33 files changed, 640 insertions(+), 261 deletions(-) create mode 100644 web/packages/lex/index.d.ts create mode 100644 web/src/admin/users/UserTokenList.ts diff --git a/web/packages/lex/index.d.ts b/web/packages/lex/index.d.ts new file mode 100644 index 0000000000..9931fa55b4 --- /dev/null +++ b/web/packages/lex/index.d.ts @@ -0,0 +1,23 @@ +export type Token = unknown; + +export type LexerAction = ( + this: Lexer, + match: string, + ...captures: string[] +) => Token | Token[] | null | void; + +export type DefunctHandler = (this: Lexer, chr: string) => Token | Token[] | null | void; + +export class Lexer { + state: number; + index: number; + input: string; + reject: boolean; + + constructor(defunct?: DefunctHandler); + addRule(pattern: RegExp, action: LexerAction, start?: number[]): this; + setInput(input: string): this; + lex(): Token | null; +} + +export default Lexer; diff --git a/web/packages/lex/index.js b/web/packages/lex/index.js index 6a92a377c0..4f99524459 100644 --- a/web/packages/lex/index.js +++ b/web/packages/lex/index.js @@ -174,10 +174,11 @@ export class Lexer { this.reject = false; this.#remove++; - let token = match.action.apply( - this, - /** @type {string[]} */ (/** @type {unknown} */ (result)), - ); + // TypeScript Native's assessment is correct. + // but TypeScript Node can't make the connection between regex and the array. + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore - Remove after TypeScript Native is mainline. + let token = match.action.apply(this, result); if (this.reject) { this.index = result.index; diff --git a/web/packages/lex/package.json b/web/packages/lex/package.json index 8aae13859b..2e151e2434 100644 --- a/web/packages/lex/package.json +++ b/web/packages/lex/package.json @@ -5,8 +5,10 @@ "license": "MIT", "private": true, "type": "module", + "types": "./index.d.ts", "exports": { ".": { + "types": "./index.d.ts", "import": "./index.js" } } diff --git a/web/src/admin/endpoints/connectors/ConnectorsListPage.ts b/web/src/admin/endpoints/connectors/ConnectorsListPage.ts index d057ce9d0c..65b5ac4bea 100644 --- a/web/src/admin/endpoints/connectors/ConnectorsListPage.ts +++ b/web/src/admin/endpoints/connectors/ConnectorsListPage.ts @@ -22,6 +22,9 @@ import { customElement } from "lit/decorators.js"; @customElement("ak-endpoints-connectors-list") export class ConnectorsListPage extends TablePage { + public static override verboseName = msg("Connector"); + public static override verboseNamePlural = msg("Connectors"); + public override searchPlaceholder = msg("Search connectors by name or type..."); public override pageIcon = "pf-icon pf-icon-data-source"; public override pageTitle = msg("Connectors"); diff --git a/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts b/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts index f14daaf1e0..b2f72b6906 100644 --- a/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts +++ b/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts @@ -26,6 +26,9 @@ import { customElement, property } from "lit/decorators.js"; export class EnrollmentTokenListPage extends Table { #api = aki(EndpointsApi); + public static override verboseName = msg("Enrollment Token"); + public static override verboseNamePlural = msg("Enrollment Tokens"); + protected override searchEnabled = true; protected emptyStateMessage = msg("No enrollment tokens found for this connector."); diff --git a/web/src/admin/endpoints/devices/DeviceListPage.ts b/web/src/admin/endpoints/devices/DeviceListPage.ts index d07fadd83e..170cf4b722 100644 --- a/web/src/admin/endpoints/devices/DeviceListPage.ts +++ b/web/src/admin/endpoints/devices/DeviceListPage.ts @@ -64,7 +64,7 @@ export class DeviceListPage extends TablePage { ${inner ? inner : html`${msg("No objects found.")} + >${this.formatEmptyStateMessage()}
${this.search ? this.renderEmptyClearSearch() : nothing}

diff --git a/web/src/admin/lifecycle/ObjectReviewIteration.ts b/web/src/admin/lifecycle/ObjectReviewIteration.ts index e1316c5a00..3c2d6b4518 100644 --- a/web/src/admin/lifecycle/ObjectReviewIteration.ts +++ b/web/src/admin/lifecycle/ObjectReviewIteration.ts @@ -244,7 +244,7 @@ export class ObjectReviewIteration extends Table { protected override renderEmpty(): SlottedTemplateResult { return super.renderEmpty( html` ${this.emptyStateMessage}${this.formatEmptyStateMessage()}`, ); } diff --git a/web/src/admin/providers/rac/ConnectionTokenList.ts b/web/src/admin/providers/rac/ConnectionTokenList.ts index d4ea90885c..ea661933d5 100644 --- a/web/src/admin/providers/rac/ConnectionTokenList.ts +++ b/web/src/admin/providers/rac/ConnectionTokenList.ts @@ -18,6 +18,9 @@ import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList @customElement("ak-rac-connection-token-list") export class ConnectionTokenListPage extends Table { + public static override verboseName = msg("Connection Token"); + public static override verboseNamePlural = msg("Connection Tokens"); + checkbox = true; clearOnRefresh = true; diff --git a/web/src/admin/stages/invitation/wizard/InvitationWizard.ts b/web/src/admin/stages/invitation/wizard/InvitationWizard.ts index 1757921ad8..ac5694a198 100644 --- a/web/src/admin/stages/invitation/wizard/InvitationWizard.ts +++ b/web/src/admin/stages/invitation/wizard/InvitationWizard.ts @@ -30,7 +30,7 @@ export class InvitationWizard extends AKElement implements TransclusionChildElem protected override render(): SlottedTemplateResult { return html` diff --git a/web/src/admin/tokens/TokenForm.ts b/web/src/admin/tokens/TokenForm.ts index 3e44b12251..ef9d771885 100644 --- a/web/src/admin/tokens/TokenForm.ts +++ b/web/src/admin/tokens/TokenForm.ts @@ -16,7 +16,7 @@ import { CoreApi, CoreUsersListRequest, IntentEnum, Token, User } from "@goauthe import { msg } from "@lit/localize"; import { html, TemplateResult } from "lit"; -import { customElement, state } from "lit/decorators.js"; +import { customElement, property, state } from "lit/decorators.js"; const EXPIRATION_DURATION = 30 * 60 * 1000; // 30 minutes @@ -25,6 +25,12 @@ export class TokenForm extends ModelForm { public static override verboseName = msg("Token"); public static override verboseNamePlural = msg("Tokens"); + /** + * Pre-selected user for new tokens, e.g. when creating a token from a user's detail page. + */ + @property({ attribute: false }) + public defaultUser: User | null = null; + protected expirationMinimumDate = new Date(); @state() @@ -114,7 +120,7 @@ export class TokenForm extends ModelForm { } const users = await aki(CoreApi).coreUsersList(args); - const instanceUser = this.instance?.userObj; + const instanceUser = this.instance?.userObj ?? this.defaultUser; if (!instanceUser) { return users.results; @@ -136,7 +142,11 @@ export class TokenForm extends ModelForm { return user?.pk; }} .selected=${(user: User): boolean => { - return this.instance?.user === user.pk; + if (this.instance) { + return this.instance.user === user.pk; + } + + return this.defaultUser?.pk === user.pk; }} > diff --git a/web/src/admin/tokens/TokenListPage.ts b/web/src/admin/tokens/TokenListPage.ts index e3a032f756..db4dfa46b0 100644 --- a/web/src/admin/tokens/TokenListPage.ts +++ b/web/src/admin/tokens/TokenListPage.ts @@ -8,7 +8,7 @@ import "#elements/forms/ModalForm"; import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; import { aki } from "#common/api/client"; -import { intentToLabel } from "#common/labels"; +import { formatIntentLabel } from "#common/labels"; import { IconTokenCopyButton } from "#elements/buttons/IconTokenCopyButton"; import { IconEditButton, ModalInvokerButton } from "#elements/dialogs"; @@ -94,7 +94,7 @@ export class TokenListPage extends TablePage { html`${item.userObj?.username}`, html``, Timestamp(item.expires && item.expiring ? item.expires : null), - html`${intentToLabel(item.intent ?? IntentEnum.Api)}`, + html`${formatIntentLabel(item.intent ?? IntentEnum.Api)}`, html`

${!item.managed ? IconEditButton(TokenForm, item.identifier, item.identifier) @@ -110,7 +110,7 @@ export class TokenListPage extends TablePage { model: ModelEnum.AuthentikCoreToken, objectPk: item.pk, })} - ${IconTokenCopyButton(item.identifier)} + ${IconTokenCopyButton(item)}
`, ]; } diff --git a/web/src/admin/users/UserDevicesTable.ts b/web/src/admin/users/UserDevicesTable.ts index 4dcd2907a8..7cb9200f6e 100644 --- a/web/src/admin/users/UserDevicesTable.ts +++ b/web/src/admin/users/UserDevicesTable.ts @@ -16,6 +16,9 @@ import { customElement, property } from "lit/decorators.js"; @customElement("ak-user-device-table") export class UserDeviceTable extends Table { + public static override verboseName = msg("Device"); + public static override verboseNamePlural = msg("Devices"); + @property({ type: Number }) userId?: number; diff --git a/web/src/admin/users/UserTokenList.ts b/web/src/admin/users/UserTokenList.ts new file mode 100644 index 0000000000..dc455e42c7 --- /dev/null +++ b/web/src/admin/users/UserTokenList.ts @@ -0,0 +1,172 @@ +import "#admin/rbac/ObjectPermissionModal"; +import "#admin/tokens/TokenForm"; +import "#components/ak-status-label"; +import "#elements/buttons/Dropdown"; +import "#elements/buttons/TokenCopyButton/index"; +import "#elements/forms/DeleteBulkForm"; +import "#elements/forms/ModalForm"; +import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; + +import { aki } from "#common/api/client"; +import { formatIntentLabel } from "#common/labels"; + +import { IconTokenCopyButton } from "#elements/buttons/IconTokenCopyButton"; +import { IconEditButton, ModalInvokerButton } from "#elements/dialogs"; +import { IconPermissionButton } from "#elements/dialogs/components/IconPermissionButton"; +import { showAPIErrorMessage } from "#elements/messages/MessageContainer"; +import { PaginatedResponse, Table, TableColumn, Timestamp } from "#elements/table/Table"; +import { SlottedTemplateResult } from "#elements/types"; + +import { TokenForm } from "#admin/tokens/TokenForm"; + +import { CoreApi, IntentEnum, ModelEnum, Token, User } from "@goauthentik/api"; + +import { msg } from "@lit/localize"; +import { html, nothing, PropertyValues } from "lit"; +import { customElement, property } from "lit/decorators.js"; + +@customElement("ak-admin-user-token-list") +export class AdminUserTokenList extends Table { + public static override verboseName = msg("Token"); + public static override verboseNamePlural = msg("Tokens"); + + @property({ type: Number, attribute: "user-id", useDefault: true }) + public userID: number | null = null; + + @property({ attribute: false, useDefault: true }) + public user: User | null = null; + + protected override searchEnabled = true; + + protected override rowLabel(item: Token): string | null { + return item.identifier; + } + + public override checkbox = true; + public override clearOnRefresh = true; + public override order = "expires"; + + //#region Lifecycle + + protected override async apiEndpoint(): Promise> { + if (!this.user) { + await this.refresh(); + } + + if (!this.user) { + throw new TypeError("User is not set, cannot fetch tokens."); + } + + return aki(CoreApi).coreTokensList({ + ...(await this.defaultEndpointConfig()), + userUsername: this.user.username, + }); + } + + public refresh = () => { + if (!this.userID) { + return; + } + + return aki(CoreApi) + .coreUsersRetrieve({ + id: this.userID!, + }) + .then((user) => { + this.user = user; + }) + .catch(showAPIErrorMessage); + }; + + protected override updated(changed: PropertyValues) { + super.updated(changed); + + if (changed.has("userID") && this.userID !== null) { + this.refresh(); + } + } + + //#region + + //#endregion + + //#region Rendering + + protected override renderObjectCreate(): SlottedTemplateResult { + if (!this.user) { + return null; + } + + return ModalInvokerButton(TokenForm, { defaultUser: this.user }); + } + + protected columns: TableColumn[] = [ + [msg("Identifier"), "identifier"], + [msg("Expires?"), "expiring"], + [msg("Expiry date"), "expires"], + [msg("Intent"), "intent"], + [msg("Actions"), null, msg("Row Actions")], + ]; + + protected override renderToolbarSelected(): SlottedTemplateResult { + const disabled = this.selectedElements.length < 1; + return html` { + return [{ key: msg("Identifier"), value: item.identifier }]; + }} + .usedBy=${(item: Token) => { + return aki(CoreApi).coreTokensUsedByList({ + identifier: item.identifier, + }); + }} + .delete=${(item: Token) => { + return aki(CoreApi).coreTokensDestroy({ + identifier: item.identifier, + }); + }} + > + + `; + } + + protected override row(item: Token): SlottedTemplateResult[] { + return [ + html`
${item.identifier}
+ ${item.managed + ? html`${msg("Token is managed by authentik.")}` + : nothing}`, + html``, + Timestamp(item.expires && item.expiring ? item.expires : null), + html`${formatIntentLabel(item.intent ?? IntentEnum.Api)}`, + html`
+ ${!item.managed + ? IconEditButton(TokenForm, item.identifier, item.identifier) + : html``} + ${IconPermissionButton(item.identifier, { + model: ModelEnum.AuthentikCoreToken, + objectPk: item.pk, + })} + ${IconTokenCopyButton(item)} +
`, + ]; + } + + //#endregion +} + +declare global { + interface HTMLElementTagNameMap { + "ak-admin-user-token-list": AdminUserTokenList; + } +} diff --git a/web/src/admin/users/UserViewPage.ts b/web/src/admin/users/UserViewPage.ts index 24873cec9d..a5c02f6012 100644 --- a/web/src/admin/users/UserViewPage.ts +++ b/web/src/admin/users/UserViewPage.ts @@ -8,6 +8,7 @@ import "#admin/users/UserChart"; import "#admin/users/UserForm"; import "#admin/users/UserImpersonateForm"; import "#admin/users/UserPasswordForm"; +import "#admin/users/UserTokenList"; import "#admin/users/oauth/UserAccessTokenList"; import "#admin/users/oauth/UserRefreshTokenList"; import "#components/DescriptionList"; @@ -245,116 +246,123 @@ export class UserViewPage extends WithLicenseSummary( } protected renderTabCredentialsToken(user: User): TemplateResult { - return html` - -
-
- - -
+ return html` +
+
+
-
-
- - -
+
+
+
+
-
-
- -
+
+
+
+
-
-
- - -
+
+
+
+
-
-
- - -
+
+
+
+
-
-
- -
+
+
+
+
-
-
- - -
+
+
+
+
-
-
- - -
+
+
+
+
- - - `; +
+
+
+ +
+
+ `; } protected renderTabApplications(user: User): TemplateResult { @@ -364,37 +372,35 @@ export class UserViewPage extends WithLicenseSummary( } protected renderTabRoles(user: User): TemplateResult { - return html` - -
-
- -
+ return html` +
+
+
-
-
- -
+
+
+
+
- - `; +
+ `; } protected override render() { @@ -425,7 +431,7 @@ export class UserViewPage extends WithLicenseSummary( ${msg("Actions over the last week (per 8 hours)")}
- +
- + >
- +
- +
{ + public static override verboseName = msg("Access Token"); + public static override verboseNamePlural = msg("Access Tokens"); + expandable = true; @property({ type: Number }) diff --git a/web/src/admin/users/oauth/UserRefreshTokenList.ts b/web/src/admin/users/oauth/UserRefreshTokenList.ts index 27b12643c3..d432336346 100644 --- a/web/src/admin/users/oauth/UserRefreshTokenList.ts +++ b/web/src/admin/users/oauth/UserRefreshTokenList.ts @@ -18,6 +18,9 @@ import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css"; @customElement("ak-user-oauth-refresh-token-list") export class UserOAuthRefreshTokenList extends Table { + public static override verboseName = msg("Refresh Token"); + public static override verboseNamePlural = msg("Refresh Tokens"); + expandable = true; @property({ type: Number }) diff --git a/web/src/common/clipboard.ts b/web/src/common/clipboard.ts index 6fb02eb6aa..37bb7a56c6 100644 --- a/web/src/common/clipboard.ts +++ b/web/src/common/clipboard.ts @@ -2,6 +2,7 @@ import { MessageLevel } from "#common/messages"; import { isPromiseLike } from "#common/promises"; import { showMessage } from "#elements/messages/MessageContainer"; +import { SlottedTemplateResult } from "#elements/types"; import { msg, str } from "@lit/localize"; @@ -47,7 +48,7 @@ export async function doWriteToClipboard(...data: ClipboardItemSource[]): Promis export function writeToClipboard( data?: ClipboardItemSource | ClipboardItemSource[] | null, entityLabel?: string, - description?: string, + description?: SlottedTemplateResult, ): Promise { if (!data || (Array.isArray(data) && data.length === 0)) { console.warn("Cannot write empty data to clipboard"); diff --git a/web/src/common/labels.ts b/web/src/common/labels.ts index be5b8d917a..83443231a8 100644 --- a/web/src/common/labels.ts +++ b/web/src/common/labels.ts @@ -1,3 +1,9 @@ +/** + * @file Contains various label maps for API enums and other values that we want to display in the UI. + */ + +import { MessageFormatter } from "#common/ui/locale/format"; + import { Device, DeviceChallenge, @@ -10,66 +16,75 @@ import { import { msg, str } from "@lit/localize"; -/* Various tables in the API for which we need to supply labels */ +const IntentLabelRecord: Record> = { + [IntentEnum.Api]: () => msg("API Access"), + [IntentEnum.AppPassword]: () => msg("App password"), + [IntentEnum.Recovery]: () => msg("Recovery"), + [IntentEnum.Verification]: () => msg("Verification"), + [IntentEnum.UnknownDefaultOpenApi]: () => msg("Unknown intent"), +}; -export const intentEnumToLabel = new Map([ - [IntentEnum.Api, msg("API Access")], - [IntentEnum.AppPassword, msg("App password")], - [IntentEnum.Recovery, msg("Recovery")], - [IntentEnum.Verification, msg("Verification")], - [IntentEnum.UnknownDefaultOpenApi, msg("Unknown intent")], -]); +export function formatIntentLabel(intent: IntentEnum = IntentEnum.Api): string { + return IntentLabelRecord[intent](); +} -export const intentToLabel = (intent: IntentEnum) => intentEnumToLabel.get(intent); - -export const eventActionToLabel = new Map([ - [EventActions.Login, msg("Login")], - [EventActions.LoginFailed, msg("Failed login")], - [EventActions.Logout, msg("Logout")], - [EventActions.UserWrite, msg("User was written to")], - [EventActions.SuspiciousRequest, msg("Suspicious request")], - [EventActions.PasswordSet, msg("Password set")], - [EventActions.SecretView, msg("Secret was viewed")], - [EventActions.SecretRotate, msg("Secret was rotated")], - [EventActions.InvitationUsed, msg("Invitation used")], - [EventActions.AuthorizeApplication, msg("Application authorized")], - [EventActions.SourceLinked, msg("Source linked")], - [EventActions.ImpersonationStarted, msg("Impersonation started")], - [EventActions.ImpersonationEnded, msg("Impersonation ended")], - [EventActions.FlowExecution, msg("Flow execution")], +export const EventActionLabelRecord: Record> = { + [EventActions.Login]: () => msg("Login"), + [EventActions.LoginFailed]: () => msg("Failed login"), + [EventActions.Logout]: () => msg("Logout"), + [EventActions.UserWrite]: () => msg("User was written to"), + [EventActions.SuspiciousRequest]: () => msg("Suspicious request"), + [EventActions.PasswordSet]: () => msg("Password set"), + [EventActions.SecretView]: () => msg("Secret was viewed"), + [EventActions.SecretRotate]: () => msg("Secret was rotated"), + [EventActions.InvitationUsed]: () => msg("Invitation used"), + [EventActions.AuthorizeApplication]: () => msg("Application authorized"), + [EventActions.SourceLinked]: () => msg("Source linked"), + [EventActions.ImpersonationStarted]: () => msg("Impersonation started"), + [EventActions.ImpersonationEnded]: () => msg("Impersonation ended"), + [EventActions.FlowExecution]: () => msg("Flow execution"), // These are different: look closely. - [EventActions.PolicyExecution, msg("Policy execution")], - [EventActions.PolicyException, msg("Policy exception")], - [EventActions.PropertyMappingException, msg("Property Mapping exception")], + [EventActions.PolicyExecution]: () => msg("Policy execution"), + [EventActions.PolicyException]: () => msg("Policy exception"), + [EventActions.PropertyMappingException]: () => msg("Property Mapping exception"), // These are different: look closely. - [EventActions.SystemTaskExecution, msg("System task execution")], - [EventActions.SystemTaskException, msg("System task exception")], - [EventActions.SystemException, msg("General system exception")], - [EventActions.ConfigurationError, msg("Configuration error")], - [EventActions.ConfigurationWarning, msg("Configuration warning")], - [EventActions.ModelCreated, msg("Model created")], - [EventActions.ModelUpdated, msg("Model updated")], - [EventActions.ModelDeleted, msg("Model deleted")], - [EventActions.EmailSent, msg("Email sent")], - [EventActions.UpdateAvailable, msg("Update available")], - [EventActions.ExportReady, msg("Data export ready")], - [EventActions.ReviewInitiated, msg("Review initiated")], - [EventActions.ReviewOverdue, msg("Review overdue")], - [EventActions.ReviewAttested, msg("Review attested")], - [EventActions.ReviewCompleted, msg("Review completed")], -]); + [EventActions.SystemTaskExecution]: () => msg("System task execution"), + [EventActions.SystemTaskException]: () => msg("System task exception"), + [EventActions.SystemException]: () => msg("General system exception"), + [EventActions.ConfigurationError]: () => msg("Configuration error"), + [EventActions.ConfigurationWarning]: () => msg("Configuration warning"), + [EventActions.ModelCreated]: () => msg("Model created"), + [EventActions.ModelUpdated]: () => msg("Model updated"), + [EventActions.ModelDeleted]: () => msg("Model deleted"), + [EventActions.EmailSent]: () => msg("Email sent"), + [EventActions.UpdateAvailable]: () => msg("Update available"), + [EventActions.ExportReady]: () => msg("Data export ready"), + [EventActions.ReviewInitiated]: () => msg("Review initiated"), + [EventActions.ReviewOverdue]: () => msg("Review overdue"), + [EventActions.ReviewAttested]: () => msg("Review attested"), + [EventActions.ReviewCompleted]: () => msg("Review completed"), + [EventActions.UnknownDefaultOpenApi]: () => msg("Unknown action"), + [EventActions.Custom]: () => msg("Custom action"), +}; -export const actionToLabel = (action?: EventActions): string => - eventActionToLabel.get(action) ?? action ?? ""; +export function actionToLabel(action?: EventActions): string { + const formatter = action ? EventActionLabelRecord[action] : null; -export const severityEnumToLabel = new Map([ - [SeverityEnum.Alert, msg("Alert")], - [SeverityEnum.Notice, msg("Notice")], - [SeverityEnum.Warning, msg("Warning")], -]); + return formatter?.() || ""; +} -export const severityToLabel = (severity: SeverityEnum | null | undefined) => - severityEnumToLabel.get(severity) ?? msg("Unknown severity"); +const SeverityEnumLabelRecord: Record> = { + [SeverityEnum.Alert]: () => msg("Alert"), + [SeverityEnum.Notice]: () => msg("Notice"), + [SeverityEnum.Warning]: () => msg("Warning"), + [SeverityEnum.UnknownDefaultOpenApi]: () => msg("Unknown severity"), +}; + +export function severityToLabel(severity: SeverityEnum | null | undefined): string { + const formatter = SeverityEnumLabelRecord[severity ?? SeverityEnum.UnknownDefaultOpenApi]; + + return formatter(); +} export function severityToLevel(severity?: SeverityEnum | null): string { switch (severity) { @@ -113,12 +128,16 @@ export function formatDeviceChallengeMessage(deviceChallenge?: DeviceChallenge | return msg("Enter the code from your authenticator device."); } -const _userTypeToLabel = new Map([ - [UserTypeEnum.Internal, msg("Internal")], - [UserTypeEnum.External, msg("External")], - [UserTypeEnum.ServiceAccount, msg("Service account")], - [UserTypeEnum.InternalServiceAccount, msg("Service account (internal)")], -]); +const UserTypeLabelRecord: Record> = { + [UserTypeEnum.Internal]: () => msg("Internal"), + [UserTypeEnum.External]: () => msg("External"), + [UserTypeEnum.ServiceAccount]: () => msg("Service account"), + [UserTypeEnum.InternalServiceAccount]: () => msg("Service account (internal)"), + [UserTypeEnum.UnknownDefaultOpenApi]: () => msg("Unknown user type"), +}; -export const userTypeToLabel = (type?: UserTypeEnum): string => - _userTypeToLabel.get(type) ?? type ?? ""; +export function userTypeToLabel(type?: UserTypeEnum): string { + const formatter = type ? UserTypeLabelRecord[type] : null; + + return formatter?.() || ""; +} diff --git a/web/src/common/messages.ts b/web/src/common/messages.ts index d9153202b2..6f56d89a8e 100644 --- a/web/src/common/messages.ts +++ b/web/src/common/messages.ts @@ -1,4 +1,4 @@ -import type { TemplateResult } from "lit"; +import { SlottedTemplateResult } from "#elements/types"; export enum MessageLevel { error = "error", @@ -18,7 +18,7 @@ export enum MessageLevel { export interface APIMessage { level: MessageLevel; message: string; - description?: string | TemplateResult; + description?: SlottedTemplateResult; icon?: string; /** * An optional key to determine uniqueness of the message. diff --git a/web/src/common/ui/locale/format.ts b/web/src/common/ui/locale/format.ts index 5e2ab44608..07b9d20568 100644 --- a/web/src/common/ui/locale/format.ts +++ b/web/src/common/ui/locale/format.ts @@ -8,7 +8,15 @@ import { } from "#common/ui/locale/definitions"; import { safeParseLocale } from "#common/ui/locale/utils"; -import { msg, str } from "@lit/localize"; +import { msg, str, TemplateLike } from "@lit/localize"; + +/** + * A Lit Localize callback function which returns a translated result. + */ +export type MessageFormatter< + R extends TemplateLike = TemplateLike, + Args extends unknown[] = never[], +> = (...args: Args) => R; /** * Safely get a minimized locale ID, with fallback for older browsers. diff --git a/web/src/elements/ak-table/ak-simple-table.ts b/web/src/elements/ak-table/ak-simple-table.ts index c0fd3e9bc2..2d5055ba14 100644 --- a/web/src/elements/ak-table/ak-simple-table.ts +++ b/web/src/elements/ak-table/ak-simple-table.ts @@ -115,7 +115,7 @@ export class SimpleTable * * Overrides the static `verboseName` property for this instance. */ - @property({ type: String, attribute: "entity-singular" }) + @property({ type: String, attribute: "verbose-name" }) public set verboseName(value: string | null) { this.#verboseName = value; @@ -135,7 +135,7 @@ export class SimpleTable * * Overrides the static `verboseNamePlural` property for this instance. */ - @property({ type: String, attribute: "entity-plural" }) + @property({ type: String, attribute: "verbose-name-plural" }) public set verboseNamePlural(value: string | null) { this.#verboseNamePlural = value; diff --git a/web/src/elements/buttons/IconCopyButton.ts b/web/src/elements/buttons/IconCopyButton.ts index 6948da3c4d..8224e217a4 100644 --- a/web/src/elements/buttons/IconCopyButton.ts +++ b/web/src/elements/buttons/IconCopyButton.ts @@ -14,7 +14,7 @@ export interface IconCopyButtonProps { buttonLabel?: string; tooltipLabel?: string; entityLabel?: string; - description?: string; + description?: SlottedTemplateResult; } export function IconCopyButton({ @@ -52,7 +52,8 @@ export function IconCopyButton({ @click=${doCopy} aria-label=${buttonLabel} > - - + + + `; } diff --git a/web/src/elements/buttons/IconTokenCopyButton.ts b/web/src/elements/buttons/IconTokenCopyButton.ts index 78becec75c..5b95d3c376 100644 --- a/web/src/elements/buttons/IconTokenCopyButton.ts +++ b/web/src/elements/buttons/IconTokenCopyButton.ts @@ -1,15 +1,32 @@ import { aki } from "#common/api/client"; +import { formatIntentLabel } from "#common/labels"; import { IconCopyButton } from "#elements/buttons/IconCopyButton"; import { SlottedTemplateResult } from "#elements/types"; -import { CoreApi } from "@goauthentik/api"; +import { CoreApi, Token } from "@goauthentik/api"; -import { msg } from "@lit/localize"; +import { msg, str } from "@lit/localize"; import { guard } from "lit-html/directives/guard.js"; -export function IconTokenCopyButton(identifier?: string | null): SlottedTemplateResult { - return guard([], () => { +export function IconTokenCopyButton(tokenLike?: Token | string | null): SlottedTemplateResult { + return guard([tokenLike], () => { + if (!tokenLike) { + return null; + } + + const { identifier, userObj, intent } = + typeof tokenLike === "string" + ? { identifier: tokenLike, userObj: null, intent: null } + : tokenLike; + + const description = userObj?.username + ? msg(str`${formatIntentLabel(intent)} token for ${userObj.username}`, { + id: "tokens.clipboard-copy.description", + desc: "Description for a clipboard copy action for tokens, with the token intent and username as variables.", + }) + : undefined; + const fetchTokenViewKey = (): Promise => { if (!identifier) { console.warn("No identifier provided for IconTokenCopyButton"); @@ -23,8 +40,15 @@ export function IconTokenCopyButton(identifier?: string | null): SlottedTemplate return IconCopyButton({ source: fetchTokenViewKey, - buttonLabel: msg("Copy token"), - entityLabel: msg("Token"), + buttonLabel: msg("Copy token", { + id: "tokens.copy-button.label", + desc: "Label for a button that copies a token to the clipboard.", + }), + entityLabel: msg("Token", { + id: "tokens.copy-button.entity-label", + desc: "Label for a token entity, used in clipboard copy success messages.", + }), + description, }); }); } diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts index 96633c2609..76be6d0a0a 100644 --- a/web/src/elements/forms/Form.ts +++ b/web/src/elements/forms/Form.ts @@ -289,7 +289,7 @@ export class Form, D = T> * * Overrides the static `verboseName` property for this instance. */ - @property({ type: String, attribute: "entity-singular" }) + @property({ type: String, attribute: "verbose-name" }) public set verboseName(value: string | null) { this.#verboseName = value; @@ -309,7 +309,7 @@ export class Form, D = T> * * Overrides the static `verboseNamePlural` property for this instance. */ - @property({ type: String, attribute: "entity-plural" }) + @property({ type: String, attribute: "verbose-name-plural" }) public set verboseNamePlural(value: string | null) { this.#verboseNamePlural = value; diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts index 4e5e4666d1..999876a775 100644 --- a/web/src/elements/table/Table.ts +++ b/web/src/elements/table/Table.ts @@ -14,11 +14,17 @@ import { type PaginatedResponse } from "#common/api/responses"; import { EVENT_REFRESH } from "#common/constants"; import { APIError, parseAPIResponseError, pluckErrorDetail } from "#common/errors/network"; import { AKRefreshEvent } from "#common/events"; +import { truncateWords } from "#common/strings"; import { GroupResult } from "#common/utils"; import { AKElement } from "#elements/Base"; import { intersectionObserver } from "#elements/decorators/intersection-observer"; -import { type TransclusionChildElement, TransclusionChildSymbol } from "#elements/dialogs/shared"; +import { + EntityDescriptorElement, + isTransclusionParentElement, + type TransclusionChildElement, + TransclusionChildSymbol, +} from "#elements/dialogs/shared"; import { WithSession } from "#elements/mixins/session"; import { getURLParam, updateURLParams } from "#elements/router/RouteMatch"; import Styles from "#elements/table/Table.css"; @@ -84,6 +90,8 @@ export abstract class Table extends WithSession(AKElement) implements TableLike, TransclusionChildElement { + declare ["constructor"]: EntityDescriptorElement; + static styles: CSSResult[] = [ PFTable, PFBullseye, @@ -95,6 +103,9 @@ export abstract class Table Styles, ]; + public static verboseName: string = msg("Object"); + public static verboseNamePlural: string = msg("Objects"); + public [TransclusionChildSymbol] = true; //#region Abstract members @@ -124,10 +135,51 @@ export abstract class Table //#region Protected Properties + #verboseName: string | null = null; + /** - * Customize the "No objects found" message. + * Optional singular label for the type of entity this form creates/edits. + * + * Overrides the static `verboseName` property for this instance. */ - protected emptyStateMessage = msg("No objects found."); + @property({ type: String, attribute: "verbose-name" }) + public set verboseName(value: string | null) { + this.#verboseName = value; + + if (isTransclusionParentElement(this.parentElement)) { + this.parentElement.slottedElementUpdatedAt = new Date(); + } + } + + public get verboseName(): string | null { + return this.#verboseName || this.constructor.verboseName || null; + } + + #verboseNamePlural: string | null = null; + + /** + * Optional plural label for the type of entity this form creates/edits. + * + * Overrides the static `verboseNamePlural` property for this instance. + */ + @property({ type: String, attribute: "verbose-name-plural" }) + public set verboseNamePlural(value: string | null) { + this.#verboseNamePlural = value; + + if (isTransclusionParentElement(this.parentElement)) { + this.parentElement.slottedElementUpdatedAt = new Date(); + } + } + + public get verboseNamePlural(): string | null { + return this.#verboseNamePlural || this.constructor.verboseNamePlural || null; + } + + /** + * An optional message to display when the table is empty and no search is applied. + * If not provided, a default message will be used. + */ + protected emptyStateMessage: string | null = null; /** * Whether the table is currently fetching data. @@ -324,6 +376,44 @@ export abstract class Table return this.fetch(); }; + /** + * An overridable method for formatting the empty state message when no objects are found. + */ + public formatEmptyStateMessage(): string { + if (this.searchEnabled && this.search) { + const singularNoun = this.verboseName?.toLocaleLowerCase() || msg("object"); + + return msg(str`No ${singularNoun} matches "${truncateWords(this.search, 50)}"`, { + id: "table.emptyState.search", + desc: "Empty state message when no objects match the search query, where the entity singular is interpolated, followed by the search query truncated to 50 characters.", + }); + } + + if (this.emptyStateMessage) { + return this.emptyStateMessage; + } + + const pluralNoun = this.verboseNamePlural?.toLocaleLowerCase() || msg("objects"); + + return msg(str`No ${pluralNoun} found.`, { + id: "table.emptyState.default", + desc: "Empty state message when no objects are found, where the entity plural is interpolated.", + }); + } + + public formatSearchPlaceholder(): string { + if (this.searchPlaceholder) { + return this.searchPlaceholder; + } + + const pluralNoun = this.verboseNamePlural?.toLocaleLowerCase() || msg("objects"); + + return msg(str`Search for ${pluralNoun}...`, { + id: "table.search.placeholder", + desc: "Placeholder text for the search input, where the entity plural is interpolated.", + }); + } + //#endregion //#region Lifecycle @@ -512,19 +602,17 @@ export abstract class Table } protected renderEmpty(inner?: SlottedTemplateResult): SlottedTemplateResult { - return html` - - -
- ${inner ?? - html`${this.emptyStateMessage} -
${this.renderObjectCreate()}
- `} -
- - - `; + return html` + +
+ ${inner ?? + html`${this.formatEmptyStateMessage()} +
${this.renderObjectCreate()}
+ `} +
+ + `; } /** @@ -902,7 +990,7 @@ export abstract class Table part="toolbar-search" .defaultValue=${this.search} label=${ifPresent(this.searchLabel)} - placeholder=${ifPresent(this.searchPlaceholder)} + placeholder=${ifPresent(this.formatSearchPlaceholder())} .onSearch=${this.#searchListener} .supportsQL=${this.supportsQL} .apiResponse=${this.data} diff --git a/web/src/elements/table/TablePage.ts b/web/src/elements/table/TablePage.ts index 855f6dd2dc..9ba8d598cd 100644 --- a/web/src/elements/table/TablePage.ts +++ b/web/src/elements/table/TablePage.ts @@ -93,7 +93,7 @@ export abstract class TablePage extends Table { ${inner ? inner : html`${this.emptyStateMessage} + >${this.formatEmptyStateMessage()}
${this.searchEnabled ? this.renderEmptyClearSearch() : nothing}
diff --git a/web/src/elements/user/SessionList.ts b/web/src/elements/user/SessionList.ts index 41ce9f5cf1..b87884f7c6 100644 --- a/web/src/elements/user/SessionList.ts +++ b/web/src/elements/user/SessionList.ts @@ -15,6 +15,9 @@ import { customElement, property } from "lit/decorators.js"; @customElement("ak-user-session-list") export class AuthenticatedSessionList extends Table { + public static override verboseName = msg("Session"); + public static override verboseNamePlural = msg("Sessions"); + @property() targetUser!: string; diff --git a/web/src/elements/user/UserConsentList.ts b/web/src/elements/user/UserConsentList.ts index df8202c26d..37679027ae 100644 --- a/web/src/elements/user/UserConsentList.ts +++ b/web/src/elements/user/UserConsentList.ts @@ -15,6 +15,9 @@ import { customElement, property } from "lit/decorators.js"; @customElement("ak-user-consent-list") export class UserConsentList extends Table { + public static override verboseName = msg("Consent"); + public static override verboseNamePlural = msg("Consents"); + @property({ type: Number }) userId?: number; diff --git a/web/src/elements/user/UserReputationList.ts b/web/src/elements/user/UserReputationList.ts index 9f20fdc771..e1a987b7eb 100644 --- a/web/src/elements/user/UserReputationList.ts +++ b/web/src/elements/user/UserReputationList.ts @@ -15,6 +15,9 @@ import { customElement, property } from "lit/decorators.js"; @customElement("ak-user-reputation-list") export class UserReputationList extends Table { + public static override verboseName = msg("Reputation score"); + public static override verboseNamePlural = msg("Reputation scores"); + @property() targetUsername!: string; diff --git a/web/src/elements/wizard/CreateWizard.ts b/web/src/elements/wizard/CreateWizard.ts index ec82137e57..7a9d7c20d6 100644 --- a/web/src/elements/wizard/CreateWizard.ts +++ b/web/src/elements/wizard/CreateWizard.ts @@ -101,7 +101,7 @@ export class CreateWizard extends AKElement implements TransclusionChildElement * * Overrides the static `verboseName` property for this instance. */ - @property({ type: String, attribute: "entity-singular" }) + @property({ type: String, attribute: "verbose-name" }) public set verboseName(value: string | null) { this.#verboseName = value; @@ -121,7 +121,7 @@ export class CreateWizard extends AKElement implements TransclusionChildElement * * Overrides the static `verboseNamePlural` property for this instance. */ - @property({ type: String, attribute: "entity-plural" }) + @property({ type: String, attribute: "verbose-name-plural" }) public set verboseNamePlural(value: string | null) { this.#verboseNamePlural = value; @@ -309,8 +309,8 @@ export class CreateWizard extends AKElement implements TransclusionChildElement return html`> extends AKElement { public formatARIALabel(verboseName = this.verboseName): string { return verboseName ? msg(str`New ${verboseName} Wizard`, { - id: "wizard.ariaLabel.entity-singular", + id: "wizard.ariaLabel.verbose-name.one", desc: "ARIA label for the creation wizard, where the entity singular is interpolated.", }) : msg("Wizard", { @@ -92,7 +92,7 @@ export class AKWizard> extends AKElement { public formatHeader(verboseName = this.verboseName): string { if (verboseName) { return msg(str`Create New ${verboseName}`, { - id: "wizard.header.entity-singular", + id: "wizard.header.verbose-name.one", desc: "Header for the creation wizard, where the entity singular is interpolated.", }); } @@ -130,7 +130,7 @@ export class AKWizard> extends AKElement { * * Overrides the static `verboseName` property for this instance. */ - @property({ type: String, attribute: "entity-singular" }) + @property({ type: String, attribute: "verbose-name" }) public set verboseName(value: string | null) { this.#verboseName = value; @@ -146,7 +146,7 @@ export class AKWizard> extends AKElement { /** * Optional plural label for the type of entity this wizard creates, used in messages and the like. */ - @property({ type: String, attribute: "entity-plural" }) + @property({ type: String, attribute: "verbose-name-plural" }) public verboseNamePlural: string | null = null; /** diff --git a/web/src/user/user-settings/tokens/UserTokenList.ts b/web/src/user/user-settings/tokens/UserTokenList.ts index 59c743304a..164b9edcdc 100644 --- a/web/src/user/user-settings/tokens/UserTokenList.ts +++ b/web/src/user/user-settings/tokens/UserTokenList.ts @@ -8,7 +8,7 @@ import "#user/user-settings/tokens/UserTokenForm"; import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; import { aki } from "#common/api/client"; -import { intentToLabel } from "#common/labels"; +import { formatIntentLabel } from "#common/labels"; import { formatElapsedTime } from "#common/temporal"; import { IconTokenCopyButton } from "#elements/buttons/IconTokenCopyButton"; @@ -132,7 +132,7 @@ export class UserTokenList extends Table {
- ${intentToLabel(item.intent ?? IntentEnum.Api)} + ${formatIntentLabel(item.intent ?? IntentEnum.Api)}
@@ -175,7 +175,7 @@ export class UserTokenList extends Table { - ${IconTokenCopyButton(item.identifier)} + ${IconTokenCopyButton(item)} `, ]; } diff --git a/web/tsconfig.json b/web/tsconfig.json index a157c07433..b60dd34ad2 100644 --- a/web/tsconfig.json +++ b/web/tsconfig.json @@ -3,10 +3,7 @@ "extends": "@goauthentik/tsconfig", "compilerOptions": { "ignoreDeprecations": "6.0", - // Nothing references the web package, so it does not need to act as a - // composite project. Disabling composite lets us exclude `packages/` - // (each subpackage owns its own tsconfig + build) without TS6307. - "composite": false, + "composite": true, "types": ["node"], "checkJs": true, "allowJs": true, @@ -75,7 +72,8 @@ // Workspace subpackages each own their tsconfig and build. Including // them here pulls ~1k files (notably the OpenAPI client in // packages/client-ts) into every `tsc -p .` for no benefit. - "packages", + "packages/client-ts", + "packages/sfe", // TODO: @lit/localize-tools v0.8.0 has a nullish coalescing typing error. // Remove when we upgrade past that. "scripts/pseudolocalize.mjs",