From b88d0829477c5e539646cbf4c5f1ce99aac03731 Mon Sep 17 00:00:00 2001 From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com> Date: Wed, 25 Mar 2026 07:07:29 +0100 Subject: [PATCH] web/a11y: Modals, Command Palette (Merge branch) (#17812) * Use project relative paths. * Fix tests. * Fix types. * Clean up admin imports. * Move admin import. * Remove or replace references to admin. * Typo fix. * Flesh out ak-modal, about modal. * Flesh out lazy modal. * Fix portal elements not using dialog scope. * Fix url parameters, wizards. * Fix invokers, lazy load. * Fix theming. * Add placeholders, help. * Flesh out command palette. Flesh out styles, command invokers. Continue clean up. Allow slotted content. Flesh out. * Flesh out edit invoker. Prep groups. * Fix odd labeling, legacy situations. * Prepare deprecation of table modal. Clean up serialization. * Tidy types. * Port provider select modal. * Port member select form. * Flesh out role modal. Fix loading state. * Port user group form. * Fix spellcheck. * Fix dialog detection. * Revise types. * Port rac launch modal. * Remove deprecated table modal. * Consistent form action placement. * Consistent casing. * Consistent alignment. * Use more appropriate description. * Flesh out icon. Fix alignment, colors. * Flesh out user search. * Consistent save button. * Clean up labels. * Reduce warning noise. * Clean up label. * Use attribute e2e expects. * Use directive. Fix lifecycle * Fix frequent un-memoized entries. * Fix up closedBy detection. * Tidy alignment. * Fix types, composition. * Fix labels, tests. * Fix up impersonation, labels. * Flesh out. Fix refresh after submit. * Flesh out basic modal test. * Fix ARIA. * Flesh out roles test. * Revise selectors. * Clean up selectors. * Fix impersonation labels, form references. * Fix messages appearing under modals. * Ensure reason is parsed. * Flesh out impersonation test. * Flesh out impersonate test. * Flesh out application tests. Clean up toolbar header, ARIA. * Flesh out wizard test. * Refine weight, order. * Fix up initial values, selectors. * Fix tests. * Fix selector. --- web/e2e/fixtures/FormFixture.ts | 11 +- web/e2e/fixtures/PointerFixture.ts | 4 +- web/src/admin/AdminInterface/AboutModal.ts | 236 +++--- .../admin/AdminInterface/index.entrypoint.css | 6 + .../admin/AdminInterface/index.entrypoint.ts | 257 +++++-- web/src/admin/Routes.ts | 13 - .../admin/admin-overview/SystemTasksPage.ts | 1 + .../AdminSettingsFooterLinks.ts | 4 +- .../admin/admin-settings/AdminSettingsPage.ts | 2 +- .../stories/ak-array-input.stories.ts | 4 +- web/src/admin/applications/ApplicationForm.ts | 22 +- .../applications/ApplicationListPage.css | 15 + .../admin/applications/ApplicationListPage.ts | 150 ++-- .../admin/applications/ApplicationViewPage.ts | 6 +- .../admin/applications/ProviderSelectForm.ts | 57 ++ .../admin/applications/ProviderSelectModal.ts | 91 --- .../components/ak-backchannel-input.ts | 41 +- .../components/ak-provider-search-input.ts | 6 +- .../ApplicationEntitlementPage.ts | 5 +- .../ApplicationWizardFormStepStyles.styles.ts | 2 +- .../wizard/ApplicationWizardStep.ts | 54 +- .../wizard/ak-application-wizard-main.ts | 37 +- .../wizard/ak-application-wizard.ts | 37 +- .../steps/SubmitStepOverviewRenderers.ts | 137 ++-- .../ak-application-wizard-application-step.ts | 52 +- .../ak-application-wizard-bindings-step.ts | 14 +- ...ak-application-wizard-edit-binding-step.ts | 23 +- ...application-wizard-provider-choice-step.ts | 12 +- .../ak-application-wizard-provider-step.ts | 90 ++- .../ak-application-wizard-submit-step.ts | 80 +- .../ak-application-wizard-bindings-toolbar.ts | 2 +- .../ApplicationWizardProviderForm.ts | 45 +- ...ak-application-wizard-provider-for-ldap.ts | 17 +- ...k-application-wizard-provider-for-oauth.ts | 16 +- ...k-application-wizard-provider-for-proxy.ts | 12 +- .../ak-application-wizard-provider-for-rac.ts | 5 +- ...-application-wizard-provider-for-radius.ts | 12 +- ...ation-wizard-provider-for-saml-metadata.ts | 3 +- ...ak-application-wizard-provider-for-saml.ts | 5 +- ...ak-application-wizard-provider-for-scim.ts | 5 +- .../{types.ts => steps/providers/shared.ts} | 46 +- web/src/admin/blueprints/BlueprintListPage.ts | 2 +- web/src/admin/brands/BrandListPage.ts | 2 +- .../crypto/CertificateKeyPairListPage.ts | 2 +- .../endpoints/DeviceAccessGroupsListPage.ts | 2 +- .../endpoints/connectors/ConnectorWizard.ts | 2 +- .../connectors/ConnectorsListPage.ts | 2 +- .../agent/AgentConnectorViewPage.ts | 2 +- .../endpoints/connectors/agent/ConfigModal.ts | 29 +- .../agent/EnrollmentTokenListPage.ts | 2 +- .../fleet/FleetConnectorViewPage.ts | 3 +- .../gdtc/GoogleChromeConnectorViewPage.ts | 3 +- .../endpoints/devices/BoundDeviceUsersList.ts | 2 +- .../admin/endpoints/devices/DeviceAddHowTo.ts | 5 +- .../admin/endpoints/devices/DeviceListPage.ts | 2 +- .../devices/DeviceUserBindingForm.ts | 2 +- .../admin/endpoints/devices/DeviceViewPage.ts | 2 +- .../enterprise/EnterpriseLicenseListPage.ts | 2 +- .../events/ObjectChangelog.ts | 0 web/src/admin/events/RuleListPage.ts | 2 +- web/src/admin/events/TransportListPage.ts | 2 +- .../events/UserEvents.ts | 0 web/src/admin/flows/BoundStagesList.ts | 4 +- web/src/admin/flows/FlowListPage.ts | 20 +- web/src/admin/flows/FlowViewPage.ts | 6 +- web/src/admin/groups/GroupForm.ts | 5 +- web/src/admin/groups/GroupListPage.ts | 48 +- web/src/admin/groups/GroupViewPage.ts | 4 +- ...mberSelectModal.ts => MemberSelectForm.ts} | 61 +- web/src/admin/groups/RelatedGroupList.ts | 49 +- web/src/admin/groups/RelatedUserList.ts | 380 +++++----- web/src/admin/lifecycle/LifecycleRuleForm.ts | 6 +- .../admin/lifecycle/LifecycleRuleListPage.ts | 2 +- web/src/admin/lifecycle/ObjectReviewForm.ts | 6 +- .../admin/outposts/OutpostDeploymentModal.ts | 5 +- web/src/admin/outposts/OutpostListPage.ts | 2 +- .../outposts/ServiceConnectionListPage.ts | 2 +- web/src/admin/policies/BoundPoliciesList.ts | 30 +- web/src/admin/policies/PolicyBindingForm.ts | 9 +- web/src/admin/policies/PolicyListPage.ts | 4 +- .../PropertyMappingListPage.ts | 2 +- web/src/admin/providers/ProviderListPage.ts | 2 +- web/src/admin/providers/ProviderWizard.ts | 2 +- .../GoogleWorkspaceProviderGroupList.ts | 1 + .../GoogleWorkspaceProviderUserList.ts | 1 + .../GoogleWorkspaceProviderViewPage.ts | 5 +- .../providers/ldap/LDAPProviderViewPage.ts | 4 +- .../MicrosoftEntraProviderGroupList.ts | 1 + .../MicrosoftEntraProviderUserList.ts | 1 + .../MicrosoftEntraProviderViewPage.ts | 5 +- .../oauth2/OAuth2ProviderRedirectURI.ts | 4 +- .../oauth2/OAuth2ProviderViewPage.ts | 5 +- .../providers/proxy/ProxyProviderViewPage.ts | 4 +- web/src/admin/providers/rac/EndpointList.ts | 2 +- .../providers/rac/RACProviderViewPage.ts | 4 +- .../radius/RadiusProviderFormForm.ts | 2 +- .../radius/RadiusProviderViewPage.ts | 4 +- .../providers/saml/SAMLProviderViewPage.ts | 4 +- .../providers/scim/SCIMProviderFormForm.ts | 2 +- .../providers/scim/SCIMProviderGroupList.ts | 1 + .../providers/scim/SCIMProviderUserList.ts | 1 + .../providers/scim/SCIMProviderViewPage.ts | 5 +- .../providers/ssf/SSFProviderViewPage.ts | 5 +- .../wsfed/WSFederationProviderViewPage.ts | 4 +- .../admin/rbac/InitialPermissionsListPage.ts | 2 +- web/src/admin/rbac/PermissionSelectForm.ts | 52 ++ web/src/admin/rbac/PermissionSelectModal.ts | 94 --- web/src/admin/reports/ExportButton.ts | 2 +- web/src/admin/roles/RelatedRoleList.ts | 115 +-- web/src/admin/roles/RoleForm.ts | 23 +- web/src/admin/roles/RoleListPage.ts | 53 +- web/src/admin/roles/RolePermissionForm.ts | 38 +- web/src/admin/roles/RoleViewPage.ts | 6 +- web/src/admin/sources/SourceListPage.ts | 4 +- .../kerberos/KerberosSourceViewPage.ts | 4 +- .../admin/sources/ldap/LDAPSourceViewPage.ts | 4 +- .../sources/oauth/OAuthSourceViewPage.ts | 7 +- .../admin/sources/plex/PlexSourceViewPage.ts | 7 +- .../admin/sources/saml/SAMLSourceViewPage.ts | 7 +- .../admin/sources/scim/SCIMSourceViewPage.ts | 4 +- .../telegram/TelegramSourceViewPage.ts | 9 +- web/src/admin/stages/StageListPage.ts | 2 +- web/src/admin/stages/StageWizard.ts | 2 +- .../stages/invitation/InvitationListPage.ts | 2 +- web/src/admin/stages/prompt/PromptForm.ts | 2 +- web/src/admin/stages/prompt/PromptListPage.ts | 2 +- web/src/admin/tokens/TokenListPage.ts | 2 +- web/src/admin/users/GroupSelectModal.ts | 104 --- web/src/admin/users/RoleSelectModal.ts | 70 +- web/src/admin/users/ServiceAccountForm.ts | 9 +- web/src/admin/users/UserActiveForm.ts | 23 +- web/src/admin/users/UserApplicationTable.ts | 2 +- .../admin/users/UserBulkRevokeSessionsForm.ts | 23 +- web/src/admin/users/UserForm.ts | 5 +- web/src/admin/users/UserGroupSelectForm.ts | 74 ++ web/src/admin/users/UserImpersonateForm.ts | 23 +- web/src/admin/users/UserListPage.ts | 168 ++-- web/src/admin/users/UserPasswordForm.ts | 22 +- web/src/admin/users/UserViewPage.ts | 60 +- web/src/common/api/middleware.ts | 21 +- web/src/common/collections.ts | 13 + web/src/common/errors/network.ts | 8 +- web/src/common/objects.ts | 59 ++ web/src/{admin => common}/policies/utils.ts | 0 web/src/common/theme.ts | 17 - web/src/common/users.ts | 4 +- web/src/components/ak-multi-select.ts | 4 +- web/src/components/ak-nav-buttons.ts | 13 +- web/src/components/ak-page-navbar.css | 2 +- web/src/components/ak-page-navbar.ts | 1 + web/src/components/ak-search-ql/index.ts | 20 +- web/src/components/ak-slug-input.ts | 5 + .../components/ak-wizard/WizardContexts.ts | 2 +- web/src/components/ak-wizard/WizardStep.ts | 180 ++--- .../components/ak-wizard/ak-wizard-steps.ts | 71 +- web/src/components/ak-wizard/shared.ts | 54 ++ web/src/components/ak-wizard/types.ts | 22 - web/src/elements/Base.ts | 47 +- ...{AkControlElement.ts => ControlElement.ts} | 22 +- web/src/elements/Interface.ts | 31 +- .../LicenseNotice.ts} | 0 web/src/elements/Tabs.ts | 64 +- web/src/elements/ak-array-input.ts | 8 +- .../ak-checkbox-group/ak-checkbox-group.ts | 4 +- .../ak-dual-select/ak-dual-select-provider.ts | 4 +- .../commands/ak-command-palette-modal.css | 261 +++++++ .../commands/ak-command-palette-modal.ts | 715 ++++++++++++++++++ .../commands/ak-command-palette-user-modal.ts | 156 ++++ .../elements/commands/ak-command-palette.css | 17 + .../elements/commands/ak-command-palette.ts | 78 ++ web/src/elements/commands/events.ts | 28 + web/src/elements/commands/shared.ts | 165 ++++ .../controllers/SessionContextController.ts | 155 +++- web/src/elements/forms/ConfirmationForm.ts | 26 +- web/src/elements/forms/DeleteBulkForm.ts | 25 +- web/src/elements/forms/DeleteForm.ts | 24 +- web/src/elements/forms/Form.css | 14 + web/src/elements/forms/Form.ts | 512 +++++++------ .../elements/forms/HorizontalFormElement.ts | 6 +- web/src/elements/forms/ModalForm.ts | 6 +- web/src/elements/forms/ModelForm.ts | 38 +- .../forms/SearchSelect/SearchSelect.ts | 4 +- .../elements/forms/SearchSelect/ak-portal.ts | 9 +- .../SearchSelect/ak-search-select-view.ts | 8 +- web/src/elements/forms/errors.ts | 42 + .../elements/forms/form-associated-element.ts | 50 +- web/src/elements/forms/serialization.ts | 122 +++ web/src/elements/messages/MessageContainer.ts | 44 +- web/src/elements/messages/styles.css | 21 + web/src/elements/modals/ak-modal.ts | 587 ++++++++++++++ web/src/elements/modals/shared.ts | 40 + web/src/elements/modals/styles.css | 148 ++++ web/src/elements/modals/utils.ts | 332 ++++++++ web/src/elements/router/builders.ts | 12 + web/src/elements/sidebar/SidebarItem.ts | 7 +- web/src/elements/sidebar/SidebarVersion.ts | 69 +- web/src/{admin => elements}/sources/utils.ts | 2 +- web/src/elements/sync/SyncObjectForm.ts | 1 - web/src/elements/table/Table.ts | 52 +- web/src/elements/table/TableModal.ts | 128 ---- web/src/elements/table/TablePage.css | 16 + web/src/elements/table/TablePage.ts | 20 +- web/src/elements/table/TableSearch.ts | 1 + web/src/elements/tasks/ScheduleList.ts | 2 +- web/src/elements/tasks/TaskList.ts | 1 - web/src/elements/types.ts | 18 +- .../elements/user/sources/SourceSettings.ts | 3 +- web/src/elements/utils/eventEmitter.ts | 13 +- web/src/elements/utils/getRootStyle.ts | 5 - web/src/elements/utils/render-roots.ts | 18 + web/src/elements/utils/unsafe.ts | 4 +- .../elements/wizard/TypeCreateWizardPage.ts | 2 +- web/src/elements/wizard/Wizard.ts | 45 +- web/src/flow/stages/email/EmailStage.ts | 2 +- .../identification/IdentificationStage.ts | 10 +- web/src/styles/authentik/base.css | 2 +- web/src/styles/authentik/base/common.css | 42 + web/src/styles/authentik/base/modal.css | 249 ++++++ .../authentik/components/Button/button.css | 7 + .../styles/authentik/components/Card/card.css | 6 +- .../components/Dropdown/dropdown.css | 1 + .../styles/authentik/components/Form/form.css | 49 +- .../styles/authentik/components/Icon/icon.css | 20 + .../authentik/components/Modal/modal.css | 14 - .../authentik/components/Wizard/wizard.css | 33 +- web/src/styles/authentik/interface.global.css | 1 + .../RACLaunchEndpointModal.ts | 41 +- web/src/user/LibraryApplication/index.ts | 18 +- web/src/user/LibraryPage/ApplicationList.css | 2 +- web/src/user/LibraryPage/ApplicationList.ts | 3 +- web/src/user/index.entrypoint.ts | 10 +- .../user/user-settings/mfa/MFADevicesPage.ts | 2 +- .../user-settings/tokens/UserTokenList.ts | 2 +- web/test/browser/applications.test.ts | 190 +++++ web/test/browser/groups.test.ts | 53 +- web/test/browser/modals.test.ts | 55 ++ web/test/browser/providers.test.ts | 12 +- web/test/browser/roles.test.ts | 110 +++ web/test/browser/users.test.ts | 115 ++- web/types/dom.d.ts | 24 + 240 files changed, 6717 insertions(+), 2531 deletions(-) rename web/src/{elements => admin/admin-settings}/stories/ak-array-input.stories.ts (97%) create mode 100644 web/src/admin/applications/ApplicationListPage.css create mode 100644 web/src/admin/applications/ProviderSelectForm.ts delete mode 100644 web/src/admin/applications/ProviderSelectModal.ts rename web/src/admin/applications/wizard/{types.ts => steps/providers/shared.ts} (67%) rename web/src/{components => admin}/events/ObjectChangelog.ts (100%) rename web/src/{components => admin}/events/UserEvents.ts (100%) rename web/src/admin/groups/{MemberSelectModal.ts => MemberSelectForm.ts} (67%) create mode 100644 web/src/admin/rbac/PermissionSelectForm.ts delete mode 100644 web/src/admin/rbac/PermissionSelectModal.ts delete mode 100644 web/src/admin/users/GroupSelectModal.ts create mode 100644 web/src/admin/users/UserGroupSelectForm.ts create mode 100644 web/src/common/collections.ts create mode 100644 web/src/common/objects.ts rename web/src/{admin => common}/policies/utils.ts (100%) create mode 100644 web/src/components/ak-wizard/shared.ts delete mode 100644 web/src/components/ak-wizard/types.ts rename web/src/elements/{AkControlElement.ts => ControlElement.ts} (60%) rename web/src/{admin/common/ak-license-notice.ts => elements/LicenseNotice.ts} (100%) create mode 100644 web/src/elements/commands/ak-command-palette-modal.css create mode 100644 web/src/elements/commands/ak-command-palette-modal.ts create mode 100644 web/src/elements/commands/ak-command-palette-user-modal.ts create mode 100644 web/src/elements/commands/ak-command-palette.css create mode 100644 web/src/elements/commands/ak-command-palette.ts create mode 100644 web/src/elements/commands/events.ts create mode 100644 web/src/elements/commands/shared.ts create mode 100644 web/src/elements/forms/Form.css create mode 100644 web/src/elements/forms/errors.ts create mode 100644 web/src/elements/forms/serialization.ts create mode 100644 web/src/elements/messages/styles.css create mode 100644 web/src/elements/modals/ak-modal.ts create mode 100644 web/src/elements/modals/shared.ts create mode 100644 web/src/elements/modals/styles.css create mode 100644 web/src/elements/modals/utils.ts create mode 100644 web/src/elements/router/builders.ts rename web/src/{admin => elements}/sources/utils.ts (94%) delete mode 100644 web/src/elements/table/TableModal.ts create mode 100644 web/src/elements/table/TablePage.css delete mode 100644 web/src/elements/utils/getRootStyle.ts create mode 100644 web/src/elements/utils/render-roots.ts create mode 100644 web/src/styles/authentik/base/modal.css delete mode 100644 web/src/styles/authentik/components/Modal/modal.css create mode 100644 web/test/browser/applications.test.ts create mode 100644 web/test/browser/modals.test.ts create mode 100644 web/test/browser/roles.test.ts create mode 100644 web/types/dom.d.ts diff --git a/web/e2e/fixtures/FormFixture.ts b/web/e2e/fixtures/FormFixture.ts index 950150ea71..2b47d2aa85 100644 --- a/web/e2e/fixtures/FormFixture.ts +++ b/web/e2e/fixtures/FormFixture.ts @@ -27,6 +27,7 @@ export class FormFixture extends PageFixture { .filter({ hasNot: context.getByRole("presentation"), }) + .and(context.locator(":not(button)")) .or( context.getByRole("textbox", { name: fieldName, @@ -191,17 +192,17 @@ export class FormFixture extends PageFixture { // Find the search select input control and activate it. await control.click(); + if (typeof pattern === "string") { + this.fill(control, pattern, parent); + } + const button = this.page // --- .locator(`div[data-managed-for*="${fieldName}"] button`, { hasText: pattern, }); - if (!button) { - throw new Error( - `Unable to find an ak-search-select entry matching ${fieldLabel}:${pattern.toString()}`, - ); - } + await expect(button, `Search select entry (${pattern}) should be visible`).toBeVisible(); await button.click(); await this.page.keyboard.press("Tab"); diff --git a/web/e2e/fixtures/PointerFixture.ts b/web/e2e/fixtures/PointerFixture.ts index d37d1d2e59..18fc117dfa 100644 --- a/web/e2e/fixtures/PointerFixture.ts +++ b/web/e2e/fixtures/PointerFixture.ts @@ -26,7 +26,9 @@ export class PointerFixture extends PageFixture { context: LocatorContext = this.page, ): Promise => { if (typeof optionsOrRole === "string") { - return context.getByRole(optionsOrRole, { name }).first().click(); + const target = context.getByRole(optionsOrRole, { name }).first(); + + return target.click(); } const options = { diff --git a/web/src/admin/AdminInterface/AboutModal.ts b/web/src/admin/AdminInterface/AboutModal.ts index 3693c90c99..a3c671181b 100644 --- a/web/src/admin/AdminInterface/AboutModal.ts +++ b/web/src/admin/AdminInterface/AboutModal.ts @@ -3,137 +3,175 @@ import "#elements/EmptyState"; import { DEFAULT_CONFIG } from "#common/api/config"; import { globalAK } from "#common/global"; -import { ModalButton } from "#elements/buttons/ModalButton"; import { WithBrandConfig } from "#elements/mixins/branding"; import { WithLicenseSummary } from "#elements/mixins/license"; +import { AKModal } from "#elements/modals/ak-modal"; +import { asInvoker } from "#elements/modals/utils"; import { ThemedImage } from "#elements/utils/images"; import { AdminApi, CapabilitiesEnum, LicenseSummaryStatusEnum } from "@goauthentik/api"; import { msg } from "@lit/localize"; import { css, html, TemplateResult } from "lit"; -import { customElement } from "lit/decorators.js"; -import { createRef, ref } from "lit/directives/ref.js"; -import { until } from "lit/directives/until.js"; +import { ref } from "lit-html/directives/ref.js"; +import { styleMap } from "lit-html/directives/style-map.js"; +import { customElement, state } from "lit/decorators.js"; import PFAbout from "@patternfly/patternfly/components/AboutModalBox/about-modal-box.css"; -@customElement("ak-about-modal") -export class AboutModal extends WithLicenseSummary(WithBrandConfig(ModalButton)) { - static styles = [ - ...ModalButton.styles, - PFAbout, - css` - .pf-c-about-modal-box { - --pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-900); - } +const DEFAULT_BRAND_IMAGE = "/static/dist/assets/images/flow_background.jpg"; - .pf-c-about-modal-box__hero { - background-image: url("/static/dist/assets/images/flow_background.jpg"); - } - .pf-c-about-modal-box__brand { - --pf-c-about-modal-box__brand-image--Height: 6.25rem; - } - .pf-c-about-modal-box__brand i { - font-size: var(--pf-c-about-modal-box__brand-image--Height); +type AboutEntry = [label: string, content: string | TemplateResult]; + +async function fetchAboutDetails(): Promise { + const api = new AdminApi(DEFAULT_CONFIG); + + const [status, version] = await Promise.all([ + api.adminSystemRetrieve(), + api.adminVersionRetrieve(), + ]); + + let build: string | TemplateResult = msg("Release"); + + if (globalAK().config.capabilities.includes(CapabilitiesEnum.CanDebug)) { + build = msg("Development"); + } else if (version.buildHash) { + build = html`${version.buildHash}`; + } + + return [ + [msg("Version"), version.versionCurrent], + [msg("UI Version"), import.meta.env.AK_VERSION], + [msg("Build"), build], + [msg("Python version"), status.runtime.pythonVersion], + [msg("Platform"), status.runtime.platform], + [msg("Kernel"), status.runtime.uname], + [ + msg("OpenSSL"), + `${status.runtime.opensslVersion} ${status.runtime.opensslFipsEnabled ? "FIPS" : ""}`, + ], + ]; +} + +@customElement("ak-about-modal") +export class AboutModal extends WithLicenseSummary(WithBrandConfig(AKModal)) { + public static override formatARIALabel = () => msg("About authentik"); + + public static hostStyles = [ + css` + dialog.ak-c-modal:has(ak-about-modal) { + --ak-c-modal--BackgroundColor: var(--pf-global--palette--black-900); + --ak-c-modal--BorderColor: var(--pf-global--palette--black-600); } `, ]; - async getAboutEntries(): Promise<[string, string | TemplateResult][]> { - const status = await new AdminApi(DEFAULT_CONFIG).adminSystemRetrieve(); - const version = await new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve(); - let build: string | TemplateResult = msg("Release"); - if (globalAK().config.capabilities.includes(CapabilitiesEnum.CanDebug)) { - build = msg("Development"); - } else if (version.buildHash !== "") { - build = html`${version.buildHash}`; - } - return [ - [msg("Version"), version.versionCurrent], - [msg("UI Version"), import.meta.env.AK_VERSION], - [msg("Build"), build], - [msg("Python version"), status.runtime.pythonVersion], - [msg("Platform"), status.runtime.platform], - [msg("Kernel"), status.runtime.uname], - [ - msg("OpenSSL"), - `${status.runtime.opensslVersion} ${status.runtime.opensslFipsEnabled ? "FIPS" : ""}`, - ], - ]; + public static styles = [ + ...AKModal.styles, + PFAbout, + css` + :host { + height: 100%; + } + + .pf-c-about-modal-box { + --pf-c-about-modal-box--BackgroundColor: var(--ak-c-modal--BackgroundColor); + width: unset; + height: 100%; + max-height: unset; + max-width: unset; + z-index: unset; + position: unset; + box-shadow: unset; + } + `, + ]; + + public static ariaLabel = msg("About authentik"); + + public static open = asInvoker(AboutModal); + + @state() + protected entries: AboutEntry[] | null = null; + + public refresh() { + return fetchAboutDetails().then((entries) => { + this.entries = entries; + }); } - #contentRef = createRef(); + public connectedCallback(): void { + super.connectedCallback(); + this.refresh(); + } - #backdropListener = (event: PointerEvent) => { - // We only want to close the modal when the backdrop is clicked, not when it's children are clicked. + //#region Renderers - if (this.#contentRef.value?.contains(event.target as Node)) { - return; - } - this.close(); - }; + protected override renderCloseButton() { + return null; + } - protected override renderModal() { + protected override render() { let product = this.brandingTitle; if (this.licenseSummary?.status !== LicenseSummaryStatusEnum.Unlicensed) { product += ` ${msg("Enterprise")}`; } - return html`
-
- `; } + + //#endregion } declare global { diff --git a/web/src/admin/AdminInterface/index.entrypoint.css b/web/src/admin/AdminInterface/index.entrypoint.css index d5fb6420c2..783e80255b 100644 --- a/web/src/admin/AdminInterface/index.entrypoint.css +++ b/web/src/admin/AdminInterface/index.entrypoint.css @@ -34,3 +34,9 @@ ak-sidebar-item:active ak-sidebar-item::part(list-item) { .pf-c-drawer__panel { background-color: transparent !important; } + +.command-palette-trigger { + cursor: pointer; + + padding-inline-end: var(--pf-global--spacer--sm); +} diff --git a/web/src/admin/AdminInterface/index.entrypoint.ts b/web/src/admin/AdminInterface/index.entrypoint.ts index 651aedc7f3..ca73f280f4 100644 --- a/web/src/admin/AdminInterface/index.entrypoint.ts +++ b/web/src/admin/AdminInterface/index.entrypoint.ts @@ -1,15 +1,16 @@ -import "#admin/AdminInterface/AboutModal"; import "#elements/banner/EnterpriseStatusBanner"; import "#elements/banner/VersionBanner"; import "#elements/messages/MessageContainer"; import "#elements/router/RouterOutlet"; import "#elements/sidebar/Sidebar"; import "#elements/sidebar/SidebarItem"; +import "#elements/commands/ak-command-palette-user-modal"; import { createAdminSidebarEnterpriseEntries, createAdminSidebarEntries, renderSidebarItems, + SidebarEntry, } from "./AdminSidebar.js"; import { isAPIResultReady } from "#common/api/responses"; @@ -18,10 +19,16 @@ import { isGuest } from "#common/users"; import { WebsocketClient } from "#common/ws/WebSocketClient"; import { AuthenticatedInterface } from "#elements/AuthenticatedInterface"; +import { + CommandPrefix, + PaletteCommandDefinitionInit, + PaletteCommandNamespace, +} from "#elements/commands/shared"; import { listen } from "#elements/decorators/listen"; import { WithCapabilitiesConfig } from "#elements/mixins/capabilities"; import { WithNotifications } from "#elements/mixins/notifications"; import { canAccessAdmin, WithSession } from "#elements/mixins/session"; +import { renderDialog } from "#elements/modals/utils"; import { AKDrawerChangeEvent } from "#elements/notifications/events"; import { DrawerState, @@ -29,18 +36,19 @@ import { readDrawerParams, renderNotificationDrawerPanel, } from "#elements/notifications/utils"; +import { navigate } from "#elements/router/RouterOutlet"; -import type { AboutModal } from "#admin/AdminInterface/AboutModal"; import Styles from "#admin/AdminInterface/index.entrypoint.css"; import { ROUTES } from "#admin/Routes"; import { CapabilitiesEnum } from "@goauthentik/api"; -import { msg } from "@lit/localize"; +import { LOCALE_STATUS_EVENT, LocaleStatusEventDetail, msg } from "@lit/localize"; import { CSSResult, html, nothing, PropertyValues, TemplateResult } from "lit"; -import { customElement, eventOptions, property, query, state } from "lit/decorators.js"; +import { customElement, eventOptions, property, state } from "lit/decorators.js"; import { classMap } from "lit/directives/class-map.js"; +import PFBanner from "@patternfly/patternfly/components/Banner/banner.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css"; import PFNav from "@patternfly/patternfly/components/Nav/nav.css"; @@ -56,18 +64,25 @@ export class AdminInterface extends WithCapabilitiesConfig( ) { //#region Styles - public static readonly styles: CSSResult[] = [PFPage, PFButton, PFDrawer, PFNav, Styles]; + public static readonly styles: CSSResult[] = [ + PFPage, + PFButton, + PFDrawer, + PFNav, + PFBanner, + Styles, + ]; //#endregion - //#region Properties - - @query("ak-about-modal") - public aboutModal?: AboutModal; + //#region Public Properties @property({ type: Boolean, reflect: true, attribute: "sidebar" }) public sidebarOpen = false; + @property({ type: Array }) + public entries: readonly SidebarEntry[] = createAdminSidebarEntries(); + //#endregion //#region Public Methods @@ -76,9 +91,14 @@ export class AdminInterface extends WithCapabilitiesConfig( this.sidebarOpen = !this.sidebarOpen; }; + public synchronizeSidebarEntries = () => { + this.logger.debug("Synchronizing sidebar entries with current locale"); + this.entries = createAdminSidebarEntries(); + }; + //#endregion - //#region Lifecycle + //#region Event Listeners #sidebarMatcher: MediaQueryList; #sidebarMediaQueryListener = (event: MediaQueryListEvent) => { @@ -99,6 +119,17 @@ export class AdminInterface extends WithCapabilitiesConfig( persistDrawerParams(event.drawer); }; + @listen(LOCALE_STATUS_EVENT) + localeStatusListener = (event: CustomEvent) => { + if (event.detail.status === "ready") { + this.synchronizeSidebarEntries(); + } + }; + + //#endregion + + //#region Lifecycle + constructor() { configureSentry(); @@ -110,6 +141,66 @@ export class AdminInterface extends WithCapabilitiesConfig( this.sidebarOpen = this.#sidebarMatcher.matches; } + #refreshCommandsFrameID = -1; + + #refreshCommands = () => { + const commands: PaletteCommandDefinitionInit[] = [ + { + label: msg("Create a new application..."), + action: () => navigate("/core/applications", { createWizard: true }), + group: msg("Applications"), + }, + { + namespace: PaletteCommandNamespace.Navigation, + label: msg("Check the logs"), + action: () => navigate("/events/log"), + group: msg("Events"), + }, + { + namespace: PaletteCommandNamespace.Navigation, + label: msg("Manage users"), + action: () => navigate("/identity/users"), + group: msg("Users"), + }, + ...this.entries.flatMap(([, label, , children]) => [ + ...(children ?? []).map( + ([path, childLabel]): PaletteCommandDefinitionInit => ({ + namespace: PaletteCommandNamespace.Navigation, + label: childLabel, + group: label, + action: () => { + navigate(path!); + }, + }), + ), + ]), + { + namespace: PaletteCommandNamespace.Search, + label: msg("Username or email address..."), + prefix: CommandPrefix.SearchFor(), + group: msg("Users"), + keywords: [msg("search"), msg("find")], + action: async (data, event) => { + event?.stopPropagation(); + + const userPalette = this.ownerDocument.createElement( + "ak-command-palette-user-modal", + ); + + renderDialog(userPalette, { + parentElement: this, + }); + + userPalette.show(); + }, + }, + ]; + + this.commandPalette.modal.setCommands( + commands.map((command) => ({ namespace: PaletteCommandNamespace.Action, ...command })), + ); + }; + public connectedCallback() { super.connectedCallback(); @@ -121,11 +212,19 @@ export class AdminInterface extends WithCapabilitiesConfig( public disconnectedCallback(): void { super.disconnectedCallback(); + cancelAnimationFrame(this.#refreshCommandsFrameID); + this.#sidebarMatcher.removeEventListener("change", this.#sidebarMediaQueryListener); WebsocketClient.close(); } + public firstUpdated(changedProperties: PropertyValues): void { + super.firstUpdated(changedProperties); + + this.#refreshCommandsFrameID = requestAnimationFrame(this.#refreshCommands); + } + public override updated(changedProperties: PropertyValues): void { super.updated(changedProperties); @@ -158,62 +257,96 @@ export class AdminInterface extends WithCapabilitiesConfig( }; return html`
- - + + - - - - - ${renderSidebarItems(createAdminSidebarEntries())} - ${this.can(CapabilitiesEnum.IsEnterprise) - ? renderSidebarItems(createAdminSidebarEnterpriseEntries()) - : nothing} - - -
-
-
-
-
- - +
- ${renderNotificationDrawerPanel(this.drawer)} - -
-
-
+ + + + + + + + ${renderSidebarItems(this.entries)} + ${this.can(CapabilitiesEnum.IsEnterprise) + ? renderSidebarItems(createAdminSidebarEnterpriseEntries()) + : nothing} + + +
+
+
+
+
+ + +
+
+ ${renderNotificationDrawerPanel(this.drawer)} +
+
+ +
+
-
`; + ${this.commandPalette}`; } //#endregion diff --git a/web/src/admin/Routes.ts b/web/src/admin/Routes.ts index fd4bf49e17..21bc532f9b 100644 --- a/web/src/admin/Routes.ts +++ b/web/src/admin/Routes.ts @@ -1,7 +1,5 @@ import "#admin/admin-overview/AdminOverviewPage"; -import { globalAK } from "#common/global"; - import { ID_REGEX, Route, SLUG_REGEX, UUID_REGEX } from "#elements/router/Route"; import { html } from "lit"; @@ -198,14 +196,3 @@ export const ROUTES: Route[] = [ return html``; }), ]; - -/** - * Application route helpers. - * - * @TODO: This API isn't quite right yet. Revisit after the hash router is replaced. - */ -export const ApplicationRoute = { - EditURL(slug: string, base = globalAK().api.base) { - return `${base}if/admin/#/core/applications/${slug}`; - }, -} as const; diff --git a/web/src/admin/admin-overview/SystemTasksPage.ts b/web/src/admin/admin-overview/SystemTasksPage.ts index ef3b6ceb1a..82242eccd2 100644 --- a/web/src/admin/admin-overview/SystemTasksPage.ts +++ b/web/src/admin/admin-overview/SystemTasksPage.ts @@ -4,6 +4,7 @@ import "#elements/buttons/SpinnerButton/index"; import "#elements/events/LogViewer"; import "#elements/tasks/ScheduleList"; import "#elements/tasks/TaskList"; +import "#admin/rbac/ObjectPermissionModal"; import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; import { AKElement } from "#elements/Base"; diff --git a/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts b/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts index 0f036c32ab..5697abc246 100644 --- a/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts +++ b/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts @@ -1,4 +1,4 @@ -import { AkControlElement } from "#elements/AkControlElement"; +import { AKControlElement } from "#elements/ControlElement"; import { type Spread } from "#elements/types"; import { ifPresent } from "#elements/utils/attributes"; @@ -22,7 +22,7 @@ const hasLegalScheme = (url: string) => LEGAL_SCHEMES.some((scheme) => url.substr(0, scheme.length).toLowerCase() === scheme); @customElement("ak-admin-settings-footer-link") -export class FooterLinkInput extends AkControlElement { +export class FooterLinkInput extends AKControlElement { static styles = [ PFInputGroup, PFFormControl, diff --git a/web/src/admin/admin-settings/AdminSettingsPage.ts b/web/src/admin/admin-settings/AdminSettingsPage.ts index 556fdb9c22..2ddca9bd24 100644 --- a/web/src/admin/admin-settings/AdminSettingsPage.ts +++ b/web/src/admin/admin-settings/AdminSettingsPage.ts @@ -1,5 +1,5 @@ import "#admin/admin-settings/AdminSettingsForm"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; import "#elements/CodeMirror"; import "#elements/EmptyState"; import "#elements/Tabs"; diff --git a/web/src/elements/stories/ak-array-input.stories.ts b/web/src/admin/admin-settings/stories/ak-array-input.stories.ts similarity index 97% rename from web/src/elements/stories/ak-array-input.stories.ts rename to web/src/admin/admin-settings/stories/ak-array-input.stories.ts index f5f030c81f..416a387498 100644 --- a/web/src/elements/stories/ak-array-input.stories.ts +++ b/web/src/admin/admin-settings/stories/ak-array-input.stories.ts @@ -1,8 +1,8 @@ import "#admin/admin-settings/AdminSettingsFooterLinks"; import "#elements/messages/MessageContainer"; -import "../ak-array-input.js"; +import "#elements/ak-array-input"; -import { IArrayInput } from "../ak-array-input.js"; +import { IArrayInput } from "#elements/ak-array-input"; import { FooterLinkInput } from "#admin/admin-settings/AdminSettingsFooterLinks"; diff --git a/web/src/admin/applications/ApplicationForm.ts b/web/src/admin/applications/ApplicationForm.ts index e03470670f..0254e27123 100644 --- a/web/src/admin/applications/ApplicationForm.ts +++ b/web/src/admin/applications/ApplicationForm.ts @@ -1,4 +1,4 @@ -import "#admin/applications/ProviderSelectModal"; +import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; import "#components/ak-file-search-input"; import "#components/ak-radio-input"; import "#components/ak-slug-input"; @@ -11,9 +11,9 @@ import "#elements/forms/HorizontalFormElement"; import "#elements/forms/ModalForm"; import "#elements/forms/Radio"; import "#elements/forms/SearchSelect/ak-search-select"; -import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; -import "./components/ak-backchannel-input.js"; -import "./components/ak-provider-search-input.js"; +import "#admin/applications/ProviderSelectForm"; +import "#admin/applications/components/ak-backchannel-input"; +import "#admin/applications/components/ak-provider-search-input"; import { DEFAULT_CONFIG } from "#common/api/config"; @@ -40,6 +40,9 @@ import { ifDefined } from "lit/directives/if-defined.js"; export class ApplicationForm extends WithCapabilitiesConfig(ModelForm) { #api = new CoreApi(DEFAULT_CONFIG); + public override entitySingular = msg("Application"); + public override entityPlural = msg("Applications"); + protected override async loadInstance(pk: string): Promise { const app = await this.#api.coreApplicationsRetrieve({ slug: pk, @@ -104,6 +107,8 @@ export class ApplicationForm extends WithCapabilitiesConfig(ModelForm
`; } + + //#endregion } declare global { diff --git a/web/src/admin/applications/ApplicationListPage.css b/web/src/admin/applications/ApplicationListPage.css new file mode 100644 index 0000000000..98a6e4ea5d --- /dev/null +++ b/web/src/admin/applications/ApplicationListPage.css @@ -0,0 +1,15 @@ +/* Fix alignment issues with images in tables */ +.pf-c-table tbody > tr > * { + vertical-align: middle; +} + +tr td:first-child { + width: auto; + min-width: 0px; + text-align: center; + vertical-align: middle; +} + +.pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * { + margin-left: calc(var(--pf-c-sidebar__main--child--MarginLeft) / 2); +} diff --git a/web/src/admin/applications/ApplicationListPage.ts b/web/src/admin/applications/ApplicationListPage.ts index 5933ba19de..dc73c06e58 100644 --- a/web/src/admin/applications/ApplicationListPage.ts +++ b/web/src/admin/applications/ApplicationListPage.ts @@ -1,12 +1,13 @@ +import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; import "#elements/forms/ConfirmationForm"; -import "#admin/applications/ApplicationForm"; import "#elements/AppIcon"; import "#elements/ak-mdx/ak-mdx"; import "#elements/buttons/SpinnerButton/ak-spinner-button"; import "#elements/forms/DeleteBulkForm"; import "#elements/forms/ModalForm"; -import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; -import "./ApplicationWizardHint.js"; +import "#elements/modals/ak-modal"; +import "#admin/applications/ApplicationForm"; +import "#admin/applications/ApplicationWizardHint"; import { DEFAULT_CONFIG } from "#common/api/config"; @@ -17,34 +18,31 @@ import { TablePage } from "#elements/table/TablePage"; import { SlottedTemplateResult } from "#elements/types"; import { ifPresent } from "#elements/utils/attributes"; +import { ApplicationForm } from "#admin/applications/ApplicationForm"; +import Styles from "#admin/applications/ApplicationListPage.css"; +import { AkApplicationWizard } from "#admin/applications/wizard/ak-application-wizard"; + import { Application, CoreApi, PoliciesApi } from "@goauthentik/api"; import MDApplication from "~docs/add-secure-apps/applications/index.md"; import { msg, str } from "@lit/localize"; -import { css, CSSResult, html, nothing, TemplateResult } from "lit"; +import { css, CSSResult, html, nothing, PropertyValues, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators.js"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; -export const applicationListStyle = css` - /* Fix alignment issues with images in tables */ - .pf-c-table tbody > tr > * { - vertical-align: middle; - } - tr td:first-child { - width: auto; - min-width: 0px; - text-align: center; - vertical-align: middle; - } - .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * { - margin-left: calc(var(--pf-c-sidebar__main--child--MarginLeft) / 2); - } -`; +export const applicationListStyle = css``; @customElement("ak-application-list") export class ApplicationListPage extends WithBrandConfig(TablePage) { + public static styles: CSSResult[] = [ + // --- + ...TablePage.styles, + PFCard, + Styles, + ]; + protected override searchEnabled = true; public pageTitle = msg("Applications"); public get pageDescription() { @@ -54,11 +52,11 @@ export class ApplicationListPage extends WithBrandConfig(TablePage) } public pageIcon = "pf-icon pf-icon-applications"; - checkbox = true; - clearOnRefresh = true; + public override checkbox = true; + public override clearOnRefresh = true; @property() - order = "name"; + public order = "name"; async apiEndpoint(): Promise> { return new CoreApi(DEFAULT_CONFIG).coreApplicationsList({ @@ -67,7 +65,15 @@ export class ApplicationListPage extends WithBrandConfig(TablePage) }); } - static styles: CSSResult[] = [...TablePage.styles, PFCard, applicationListStyle]; + public override firstUpdated(changed: PropertyValues): void { + super.firstUpdated(changed); + + if (getURLParam("createWizard", false)) { + AkApplicationWizard.showModal(); + } else if (getURLParam("createForm", false)) { + ApplicationForm.showModal(); + } + } protected columns: TableColumn[] = [ ["", undefined, msg("Application Icon")], @@ -91,7 +97,7 @@ export class ApplicationListPage extends WithBrandConfig(TablePage) `; } - renderToolbarSelected(): TemplateResult { + protected override renderToolbarSelected(): TemplateResult { const disabled = this.selectedElements.length < 1; return html`) `; } - row(item: Application): SlottedTemplateResult[] { + protected row(item: Application): SlottedTemplateResult[] { return [ html`) : html`-`, html`${item.providerObj?.verboseName || msg("-")}`, html`
- - ${msg("Update")} - ${msg("Update Application")} - - - - + ${item.launchUrl ? html`) ]; } - renderObjectCreate(): TemplateResult { - return html` - - - - ${msg("Create")} - ${msg("Create Application")} - - - `; + protected override renderObjectCreate(): TemplateResult { + return html` + + + `; } - renderToolbar(): TemplateResult { - return html` ${super.renderToolbar()} + protected override renderToolbar(): TemplateResult { + return html`${super.renderToolbar()} { return new PoliciesApi(DEFAULT_CONFIG).policiesAllCacheClearCreate(); }} diff --git a/web/src/admin/applications/ApplicationViewPage.ts b/web/src/admin/applications/ApplicationViewPage.ts index d9d77a6a9b..c2b160ae6a 100644 --- a/web/src/admin/applications/ApplicationViewPage.ts +++ b/web/src/admin/applications/ApplicationViewPage.ts @@ -5,7 +5,7 @@ import "#admin/applications/entitlements/ApplicationEntitlementPage"; import "#admin/policies/BoundPoliciesList"; import "#admin/rbac/ObjectPermissionsPage"; import "#admin/lifecycle/ObjectLifecyclePage"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; import "#elements/AppIcon"; import "#elements/EmptyState"; import "#elements/Tabs"; @@ -238,7 +238,9 @@ export class ApplicationViewPage extends WithLicenseSummary(AKElement) {
- ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Application")} diff --git a/web/src/admin/applications/ProviderSelectForm.ts b/web/src/admin/applications/ProviderSelectForm.ts new file mode 100644 index 0000000000..1434c9d773 --- /dev/null +++ b/web/src/admin/applications/ProviderSelectForm.ts @@ -0,0 +1,57 @@ +import "#elements/buttons/SpinnerButton/index"; + +import { DEFAULT_CONFIG } from "#common/api/config"; + +import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table"; +import { SlottedTemplateResult } from "#elements/types"; + +import { Provider, ProvidersApi } from "@goauthentik/api"; + +import { msg } from "@lit/localize"; +import { html } from "lit"; +import { customElement, property } from "lit/decorators.js"; + +@customElement("ak-provider-select-form") +export class ProviderSelectForm extends Table { + public override checkbox = true; + public override checkboxChip = true; + + protected override searchEnabled = true; + + @property({ type: Boolean }) + public backchannel = false; + + public override order = "name"; + + protected async apiEndpoint(): Promise> { + return new ProvidersApi(DEFAULT_CONFIG).providersAllList({ + ...(await this.defaultEndpointConfig()), + backchannel: this.backchannel, + }); + } + + protected columns: TableColumn[] = [ + // --- + [msg("Name"), "username"], + [msg("Type")], + ]; + + protected row(item: Provider): SlottedTemplateResult[] { + return [ + html`
+
${item.name}
+
`, + html`${item.verboseName}`, + ]; + } + + protected renderSelectedChip(item: Provider): SlottedTemplateResult { + return item.name; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ak-provider-select-form": ProviderSelectForm; + } +} diff --git a/web/src/admin/applications/ProviderSelectModal.ts b/web/src/admin/applications/ProviderSelectModal.ts deleted file mode 100644 index d09b964087..0000000000 --- a/web/src/admin/applications/ProviderSelectModal.ts +++ /dev/null @@ -1,91 +0,0 @@ -import "#elements/buttons/SpinnerButton/index"; - -import { DEFAULT_CONFIG } from "#common/api/config"; - -import { PaginatedResponse, TableColumn } from "#elements/table/Table"; -import { TableModal } from "#elements/table/TableModal"; -import { SlottedTemplateResult } from "#elements/types"; - -import { Provider, ProvidersApi } from "@goauthentik/api"; - -import { msg } from "@lit/localize"; -import { html, TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators.js"; - -@customElement("ak-provider-select-table") -export class ProviderSelectModal extends TableModal { - public override checkbox = true; - public override checkboxChip = true; - - protected override searchEnabled = true; - - @property({ type: Boolean }) - public backchannel = false; - - @property({ attribute: false }) - public confirm!: (selectedItems: Provider[]) => Promise; - - public override order = "name"; - - async apiEndpoint(): Promise> { - return new ProvidersApi(DEFAULT_CONFIG).providersAllList({ - ...(await this.defaultEndpointConfig()), - backchannel: this.backchannel, - }); - } - - protected columns: TableColumn[] = [ - // --- - [msg("Name"), "username"], - [msg("Type")], - ]; - - row(item: Provider): SlottedTemplateResult[] { - return [ - html`
-
${item.name}
-
`, - html`${item.verboseName}`, - ]; - } - - renderSelectedChip(item: Provider): TemplateResult { - return html`${item.name}`; - } - - renderModalInner(): TemplateResult { - return html`
-
-

- ${msg("Select providers to add to application")} -

-
-
-
${this.renderTable()}
-
- { - await this.confirm(this.selectedElements); - this.open = false; - }} - class="pf-m-primary" - > - ${msg("Add")}   - { - this.open = false; - }} - class="pf-m-secondary" - > - ${msg("Cancel")} - -
`; - } -} - -declare global { - interface HTMLElementTagNameMap { - "ak-provider-select-table": ProviderSelectModal; - } -} diff --git a/web/src/admin/applications/components/ak-backchannel-input.ts b/web/src/admin/applications/components/ak-backchannel-input.ts index fbc1e369e5..cc1260973c 100644 --- a/web/src/admin/applications/components/ak-backchannel-input.ts +++ b/web/src/admin/applications/components/ak-backchannel-input.ts @@ -1,12 +1,17 @@ -import "#admin/applications/ProviderSelectModal"; +import "#admin/applications/ProviderSelectForm"; +import "#elements/forms/HorizontalFormElement"; import "#elements/chips/Chip"; import "#elements/chips/ChipGroup"; +import "#elements/forms/Form"; import { AKElement } from "#elements/Base"; +import { AKFormSubmitEvent } from "#elements/forms/Form"; +import { renderModal } from "#elements/modals/utils"; import { SlottedTemplateResult } from "#elements/types"; import { Provider } from "@goauthentik/api"; +import { msg } from "@lit/localize"; import { html, nothing } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -56,6 +61,24 @@ export class AkBackchannelProvidersInput extends AKElement { @property({ type: String }) public help = ""; + protected openSelectBackchannelProvidersModal = () => { + return renderModal(html` + ) => { + const providers = event.target.toJSON(); + + this.confirm(providers); + }} + > + ${this.help ? html`

${this.help}

` : nothing} + + + + `); + }; + render() { const renderOneChip = (provider: Provider) => html`
- - - +
- ${map(this.providers, renderOneChip)} + ${map(this.providers, renderOneChip)}
${this.help ? html`

${this.help}

` : nothing} diff --git a/web/src/admin/applications/components/ak-provider-search-input.ts b/web/src/admin/applications/components/ak-provider-search-input.ts index 120fe9cb99..24457d1f75 100644 --- a/web/src/admin/applications/components/ak-provider-search-input.ts +++ b/web/src/admin/applications/components/ak-provider-search-input.ts @@ -5,6 +5,7 @@ import { DEFAULT_CONFIG } from "#common/api/config"; import { groupBy } from "#common/utils"; import { AKElement } from "#elements/Base"; +import { ifPresent } from "#elements/utils/attributes"; import { AKLabel } from "#components/ak-label"; @@ -12,6 +13,7 @@ import { IDGenerator } from "#packages/core/id"; import { Provider, ProvidersAllListRequest, ProvidersApi } from "@goauthentik/api"; +import { msg } from "@lit/localize/init/install"; import { html, nothing } from "lit"; import { customElement, property } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -91,7 +93,7 @@ export class AkProviderInput extends AKElement { render() { const readOnlyValue = this.readOnly && typeof this.value === "number"; - return html` + return html` ${AKLabel( { slot: "label", @@ -105,6 +107,7 @@ export class AkProviderInput extends AKElement { ? html`` : nothing} ${this.help ? html`

${this.help}

` : nothing} diff --git a/web/src/admin/applications/entitlements/ApplicationEntitlementPage.ts b/web/src/admin/applications/entitlements/ApplicationEntitlementPage.ts index 20029517c8..a40d3e8658 100644 --- a/web/src/admin/applications/entitlements/ApplicationEntitlementPage.ts +++ b/web/src/admin/applications/entitlements/ApplicationEntitlementPage.ts @@ -8,12 +8,11 @@ import "#elements/forms/ModalForm"; import { DEFAULT_CONFIG } from "#common/api/config"; import { PFSize } from "#common/enums"; +import { PolicyBindingCheckTarget } from "#common/policies/utils"; import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table"; import { SlottedTemplateResult } from "#elements/types"; -import { PolicyBindingCheckTarget } from "#admin/policies/utils"; - import { ApplicationEntitlement, CoreApi, @@ -77,7 +76,7 @@ export class ApplicationEntitlementsPage extends Table { return [ html`${item.name}`, html` - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Entitlement")} > extends WizardStep { - static styles = [...WizardStep.styles, ...styles]; +/** + * Base class for application wizard steps. Provides common functionality such as form handling and wizard state management. + * + * @prop wizard - The current state of the application wizard, shared across all steps. + */ +export abstract class ApplicationWizardStep> extends WizardStep { + static styles = [...WizardStep.styles, ...ApplicationWizardStyles]; @property({ type: Object, attribute: false }) - wizard!: ApplicationWizardState; + public wizard!: ApplicationWizardState; - // As recommended in [WizardStep](../../../components/ak-wizard/WizardStep.ts), we override - // these fields and provide them to all the child classes. - protected wizardTitle = msg("New application"); - protected wizardDescription = msg("Create a new application and configure a provider for it."); + protected override wizardTitle = msg("New application"); + protected override wizardDescription = msg( + "Create a new application and configure a provider for it.", + ); public canCancel = true; // This should be overridden in the children for more precise targeting. @@ -73,25 +76,6 @@ export class ApplicationWizardStep> extends Wiza ]); } - protected removeErrors( - keyToDelete: keyof ApplicationTransactionValidationError, - ): ValidationError | undefined { - if (!this.wizard.errors) { - return undefined; - } - const empty = {}; - const errors = Object.entries(this.wizard.errors).reduce( - (acc, [key, value]) => - key === keyToDelete || - value === undefined || - (Array.isArray(this.wizard?.errors?.[key]) && this.wizard.errors[key].length === 0) - ? acc - : { ...acc, [key]: value }, - empty, - ); - return errors; - } - // This pattern became visible during development, and the order is important: wizard updating // and validation must complete before navigation is attempted. public handleUpdate( diff --git a/web/src/admin/applications/wizard/ak-application-wizard-main.ts b/web/src/admin/applications/wizard/ak-application-wizard-main.ts index 16389b7d6f..c521662370 100644 --- a/web/src/admin/applications/wizard/ak-application-wizard-main.ts +++ b/web/src/admin/applications/wizard/ak-application-wizard-main.ts @@ -1,13 +1,10 @@ import "#components/ak-wizard/ak-wizard-steps"; -import "./steps/ak-application-wizard-application-step.js"; -import "./steps/ak-application-wizard-bindings-step.js"; -import "./steps/ak-application-wizard-edit-binding-step.js"; -import "./steps/ak-application-wizard-provider-choice-step.js"; -import "./steps/ak-application-wizard-provider-step.js"; -import "./steps/ak-application-wizard-submit-step.js"; - -import { applicationWizardProvidersContext } from "./ContextIdentity.js"; -import { type ApplicationWizardState, type ApplicationWizardStateUpdate } from "./types.js"; +import "#admin/applications/wizard/steps/ak-application-wizard-application-step"; +import "#admin/applications/wizard/steps/ak-application-wizard-bindings-step"; +import "#admin/applications/wizard/steps/ak-application-wizard-edit-binding-step"; +import "#admin/applications/wizard/steps/ak-application-wizard-provider-choice-step"; +import "#admin/applications/wizard/steps/ak-application-wizard-provider-step"; +import "#admin/applications/wizard/steps/ak-application-wizard-submit-step"; import { DEFAULT_CONFIG } from "#common/api/config"; import { assertEveryPresent } from "#common/utils"; @@ -16,6 +13,12 @@ import { AKElement } from "#elements/Base"; import { WizardUpdateEvent } from "#components/ak-wizard/events"; +import { applicationWizardProvidersContext } from "#admin/applications/wizard/ContextIdentity"; +import { + type ApplicationWizardState, + type ApplicationWizardStateUpdate, +} from "#admin/applications/wizard/steps/providers/shared"; + import type { TypeCreate } from "@goauthentik/api"; import { ProviderModelEnum, ProvidersApi, ProxyMode } from "@goauthentik/api"; @@ -50,10 +53,14 @@ export const providerTypePriority: ProviderModelNameEnum[] = [ @customElement("ak-application-wizard-main") export class AkApplicationWizardMain extends AKElement { - @state() - wizard: ApplicationWizardState = freshWizardState(); + protected createRenderRoot(): HTMLElement | DocumentFragment { + return this; + } - wizardProviderProvider = new ContextProvider(this, { + @state() + protected wizard: ApplicationWizardState = freshWizardState(); + + protected wizardProviderProvider = new ContextProvider(this, { context: applicationWizardProvidersContext, initialValue: [], }); @@ -63,8 +70,9 @@ export class AkApplicationWizardMain extends AKElement { this.addEventListener(WizardUpdateEvent.eventName, this.handleUpdate); } - connectedCallback() { + public override connectedCallback() { super.connectedCallback(); + new ProvidersApi(DEFAULT_CONFIG).providersAllTypesList().then((providerTypes) => { const providerNameToProviderMap = new Map( providerTypes.map((providerType) => [providerType.modelName, providerType]), @@ -85,7 +93,8 @@ export class AkApplicationWizardMain extends AKElement { handleUpdate(ev: WizardUpdateEvent) { ev.stopPropagation(); const update = ev.content; - if (update !== undefined) { + + if (typeof update !== "undefined") { this.wizard = { ...this.wizard, ...update, diff --git a/web/src/admin/applications/wizard/ak-application-wizard.ts b/web/src/admin/applications/wizard/ak-application-wizard.ts index 7bf4e90523..003ed250c7 100644 --- a/web/src/admin/applications/wizard/ak-application-wizard.ts +++ b/web/src/admin/applications/wizard/ak-application-wizard.ts @@ -1,28 +1,41 @@ -import "./ak-application-wizard-main.js"; +import "#admin/applications/wizard/ak-application-wizard-main"; -import { ModalButton } from "#elements/buttons/ModalButton"; -import { bound } from "#elements/decorators/bound"; +import { AKModal } from "#elements/modals/ak-modal"; +import { SlottedTemplateResult } from "#elements/types"; import { WizardCloseEvent } from "#components/ak-wizard/events"; -import { html } from "lit"; +import { msg } from "@lit/localize"; +import { css, CSSResult, html } from "lit"; import { customElement } from "lit/decorators.js"; @customElement("ak-application-wizard") -export class AkApplicationWizard extends ModalButton { +export class AkApplicationWizard extends AKModal { + public static override formatARIALabel?(): string { + return msg("New Application Wizard"); + } + + public static override styles: CSSResult[] = [ + ...super.styles, + css` + [part="main"] { + display: block; + } + `, + ]; + constructor() { super(); - this.addEventListener(WizardCloseEvent.eventName, this.onCloseEvent); + + this.addEventListener(WizardCloseEvent.eventName, this.closeListener); } - @bound - onCloseEvent(ev: WizardCloseEvent) { - ev.stopPropagation(); - this.open = false; + protected renderCloseButton(): SlottedTemplateResult { + return null; } - renderModalInner() { - return html` `; + render() { + return html``; } } diff --git a/web/src/admin/applications/wizard/steps/SubmitStepOverviewRenderers.ts b/web/src/admin/applications/wizard/steps/SubmitStepOverviewRenderers.ts index 0680c6426c..2cb768db3c 100644 --- a/web/src/admin/applications/wizard/steps/SubmitStepOverviewRenderers.ts +++ b/web/src/admin/applications/wizard/steps/SubmitStepOverviewRenderers.ts @@ -1,9 +1,11 @@ import "#components/ak-status-label"; -import { OneOfProvider } from "../types.js"; +import { SlottedTemplateResult } from "#elements/types"; import { type DescriptionPair, renderDescriptionList } from "#components/DescriptionList"; +import { OneOfProvider } from "#admin/applications/wizard/steps/providers/shared"; + import { ClientTypeEnum, LDAPProvider, @@ -30,39 +32,38 @@ const renderSummary = (type: string, name: string, fields: DescriptionPair[]) => threecolumn: true, }); -function renderSAMLOverview(rawProvider: OneOfProvider) { - const provider = rawProvider as SAMLProvider; +export type ProviderOverview = ( + provider: T, +) => SlottedTemplateResult; +const renderSAMLOverview: ProviderOverview = (provider) => { return renderSummary("SAML", provider.name, [ [msg("ACS URL"), provider.acsUrl], [msg("Audience"), provider.audience || "-"], [msg("Issuer"), provider.issuer], ]); -} - -function renderSAMLImportOverview(rawProvider: OneOfProvider) { - const provider = rawProvider as ProvidersSamlImportMetadataCreateRequest; +}; +const renderSAMLImportOverview: ProviderOverview = ( + provider, +) => { return renderSummary("SAML", provider.name, [ [msg("Authorization flow"), provider.authorizationFlow ?? "-"], [msg("Invalidation flow"), provider.invalidationFlow ?? "-"], ]); -} +}; -function renderSCIMOverview(rawProvider: OneOfProvider) { - const provider = rawProvider as SCIMProvider; +const renderSCIMOverview: ProviderOverview = (provider) => { return renderSummary("SCIM", provider.name, [[msg("URL"), provider.url]]); -} +}; -function renderRadiusOverview(rawProvider: OneOfProvider) { - const provider = rawProvider as RadiusProvider; +const renderRadiusOverview: ProviderOverview = (provider) => { return renderSummary("Radius", provider.name, [ [msg("Client Networks"), provider.clientNetworks], ]); -} +}; -function renderRACOverview(rawProvider: OneOfProvider) { - const provider = rawProvider as RACProvider; +const renderRACOverview: ProviderOverview = (provider) => { return renderSummary("RAC", provider.name, [ [msg("Connection expiry"), provider.connectionExpiry ?? "-"], [ @@ -72,7 +73,7 @@ function renderRACOverview(rawProvider: OneOfProvider) { : msg("None"), ], ]); -} +}; function formatRedirectUris(uris: RedirectURI[] = []) { return uris.length > 0 @@ -90,76 +91,76 @@ function formatRedirectUris(uris: RedirectURI[] = []) { : "-"; } -const proxyModeToLabel = new Map([ - [ProxyMode.Proxy, msg("Proxy")], - [ProxyMode.ForwardSingle, msg("Forward auth (single application)")], - [ProxyMode.ForwardDomain, msg("Forward auth (domain-level)")], - [ProxyMode.UnknownDefaultOpenApi, msg("Unknown proxy mode")], -]); +const proxyModeToLabel = { + [ProxyMode.Proxy]: () => msg("Proxy"), + [ProxyMode.ForwardSingle]: () => msg("Forward auth (single application)"), + [ProxyMode.ForwardDomain]: () => msg("Forward auth (domain-level)"), + [ProxyMode.UnknownDefaultOpenApi]: () => msg("Unknown proxy mode"), +} as const satisfies Record string>; + +const renderProxyOverview: ProviderOverview = (provider) => { + const proxyHostMappings: DescriptionPair[] = match( + provider.mode, + ) + .with(ProxyMode.Proxy, () => { + return [ + [msg("Internal Host"), provider.internalHost], + [msg("External Host"), provider.externalHost], + ]; + }) + .with(ProxyMode.ForwardSingle, () => { + return [[msg("External Host"), provider.externalHost]]; + }) + .with(ProxyMode.ForwardDomain, () => { + return [ + [msg("Authentication URL"), provider.externalHost], + [msg("Cookie domain"), provider.cookieDomain], + ]; + }) + .otherwise(() => { + throw new Error( + `Unrecognized proxy mode: ${provider.mode?.toString() ?? "-- undefined __"}`, + ); + }); + + const label = proxyModeToLabel[provider.mode ?? ProxyMode.Proxy]; -function renderProxyOverview(rawProvider: OneOfProvider) { - const provider = rawProvider as ProxyProvider; return renderSummary("Proxy", provider.name, [ - [msg("Mode"), proxyModeToLabel.get(provider.mode ?? ProxyMode.Proxy)], - ...match(provider.mode) - .with( - ProxyMode.Proxy, - () => - [ - [msg("Internal Host"), provider.internalHost], - [msg("External Host"), provider.externalHost], - ] as DescriptionPair[], - ) - .with( - ProxyMode.ForwardSingle, - () => [[msg("External Host"), provider.externalHost]] as DescriptionPair[], - ) - .with( - ProxyMode.ForwardDomain, - () => - [ - [msg("Authentication URL"), provider.externalHost], - [msg("Cookie domain"), provider.cookieDomain], - ] as DescriptionPair[], - ) - .otherwise(() => { - throw new Error( - `Unrecognized proxy mode: ${provider.mode?.toString() ?? "-- undefined __"}`, - ); - }), + [msg("Mode"), label()], + ...proxyHostMappings, [ msg("Basic-Auth"), - html` `, ], ]); -} +}; -const clientTypeToLabel = new Map([ - [ClientTypeEnum.Confidential, msg("Confidential")], - [ClientTypeEnum.Public, msg("Public")], - [ClientTypeEnum.UnknownDefaultOpenApi, msg("Unknown type")], -]); +const clientTypeToLabel = { + [ClientTypeEnum.Confidential]: () => msg("Confidential"), + [ClientTypeEnum.Public]: () => msg("Public"), + [ClientTypeEnum.UnknownDefaultOpenApi]: () => msg("Unknown type"), +} as const satisfies Record string>; + +const renderOAuth2Overview: ProviderOverview = (provider) => { + const label = provider.clientType ? clientTypeToLabel[provider.clientType]() : ""; -function renderOAuth2Overview(rawProvider: OneOfProvider) { - const provider = rawProvider as OAuth2Provider; return renderSummary("OAuth2", provider.name, [ - [msg("Client type"), provider.clientType ? clientTypeToLabel.get(provider.clientType) : ""], + [msg("Client type"), label], [msg("Client ID"), provider.clientId], [msg("Redirect URIs"), formatRedirectUris(provider.redirectUris)], ]); -} +}; -function renderLDAPOverview(rawProvider: OneOfProvider) { - const provider = rawProvider as LDAPProvider; +const renderLDAPOverview: ProviderOverview = (provider) => { return renderSummary("Proxy", provider.name, [[msg("Base DN"), provider.baseDn]]); -} +}; const providerName = (p: ProviderModelEnum): string => p.toString().split(".")[1]; -export const providerRenderers = new Map([ +export const providerRenderers = new Map>([ [providerName(ProviderModelEnum.AuthentikProvidersSamlSamlprovider), renderSAMLOverview], ["samlproviderimportmodel", renderSAMLImportOverview], [providerName(ProviderModelEnum.AuthentikProvidersScimScimprovider), renderSCIMOverview], @@ -168,4 +169,4 @@ export const providerRenderers = new Map([ [providerName(ProviderModelEnum.AuthentikProvidersProxyProxyprovider), renderProxyOverview], [providerName(ProviderModelEnum.AuthentikProvidersOauth2Oauth2provider), renderOAuth2Overview], [providerName(ProviderModelEnum.AuthentikProvidersLdapLdapprovider), renderLDAPOverview], -]); +] satisfies [string, ProviderOverview][] as [string, ProviderOverview][]); diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts index b16ae97a8e..565f038527 100644 --- a/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts +++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-application-step.ts @@ -8,13 +8,17 @@ import "#components/ak-textarea-input"; import "#elements/forms/FormGroup"; import "#elements/forms/HorizontalFormElement"; -import { ApplicationWizardStateUpdate, ValidationRecord } from "../types.js"; +import { omitKeys, trimMany } from "#common/objects"; import { isSlug } from "#elements/router/utils"; -import { type NavigableButton, type WizardButton } from "#components/ak-wizard/types"; +import { type NavigableButton, type WizardButton } from "#components/ak-wizard/shared"; import { ApplicationWizardStep } from "#admin/applications/wizard/ApplicationWizardStep"; +import { + ApplicationWizardStateUpdate, + WizardValidationRecord, +} from "#admin/applications/wizard/steps/providers/shared"; import { policyEngineModes } from "#admin/policies/PolicyEngineModes"; import { AdminFileListUsageEnum, type ApplicationRequest } from "@goauthentik/api"; @@ -26,18 +30,14 @@ import { html } from "lit"; import { customElement, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -function trimMany(target: T, keys: K[]): Pick { - const output = {} as Record; - - for (const key of keys) { - const value = target[key]; - - output[key] = typeof value === "string" ? value.trim() : value; - } - - return output as Pick; -} - +/** + * The first step of the application wizard, responsible for collecting + * basic application information such as name, slug, group, and UI settings. + * + * This step performs validation on the form inputs and updates the wizard state accordingly when the "Next" button is clicked. + * + * @prop wizard - The current state of the application wizard, shared across all steps. + */ @customElement("ak-application-wizard-application-step") export class ApplicationWizardApplicationStep extends ApplicationWizardStep { label = msg("Application"); @@ -62,13 +62,17 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep { } get buttons(): WizardButton[] { - return [{ kind: "next", destination: "provider-choice" }, { kind: "cancel" }]; + return [ + // --- + { kind: "cancel" }, + { kind: "next", destination: "provider-choice" }, + ]; } get valid() { this.errors = new Map(); - const values = trimMany(this.formValues, ["metaLaunchUrl", "name", "slug"]); + const values = trimMany(this.formValues, "metaLaunchUrl", "name", "slug"); if (!values.name) { this.errors.set("name", msg("An application name is required")); @@ -85,7 +89,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep { return this.errors.size === 0; } - override handleButton(button: NavigableButton) { + public override handleButton(button: NavigableButton) { if (button.kind !== "next") { return super.handleButton(button); } @@ -102,7 +106,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep { const payload: ApplicationWizardStateUpdate = { app, - errors: this.removeErrors("app"), + errors: omitKeys(this.wizard.errors, "app"), }; if (!this.wizard.provider?.name?.trim() && app.name) { @@ -116,7 +120,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep { }); } - renderForm(app: Partial, errors: ValidationRecord) { + protected renderForm(app: Partial, errors: WizardValidationRecord = {}) { return html` ${msg("Configure the Application")}
@@ -214,10 +223,7 @@ export class ApplicationWizardApplicationStep extends ApplicationWizardStep { if (!(this.wizard.app && this.wizard.errors)) { throw new Error("Application Step received uninitialized wizard context."); } - return this.renderForm( - this.wizard.app as ApplicationRequest, - this.wizard.errors?.app ?? {}, - ); + return this.renderForm(this.wizard.app, this.wizard.errors?.app); } } diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts index 9afa985ac4..1e416bb896 100644 --- a/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts +++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts @@ -8,15 +8,14 @@ import "#components/ak-text-input"; import "#elements/ak-table/ak-select-table"; import "#elements/forms/FormGroup"; import "#elements/forms/HorizontalFormElement"; -import "./bindings/ak-application-wizard-bindings-toolbar.js"; - -import { makeEditButton } from "./bindings/ak-application-wizard-bindings-edit-button.js"; +import "#admin/applications/wizard/steps/bindings/ak-application-wizard-bindings-toolbar"; import { SelectTable } from "#elements/ak-table/ak-select-table"; -import { type WizardButton } from "#components/ak-wizard/types"; +import { type WizardButton } from "#components/ak-wizard/shared"; import { ApplicationWizardStep } from "#admin/applications/wizard/ApplicationWizardStep"; +import { makeEditButton } from "#admin/applications/wizard/steps/bindings/ak-application-wizard-bindings-edit-button"; import { match, P } from "ts-pattern"; @@ -34,15 +33,18 @@ const COLUMNS = [ [msg("Actions"), null, msg("Row Actions")], ]; +/** + * @prop wizard - The current state of the application wizard, shared across all steps. + */ @customElement("ak-application-wizard-bindings-step") export class ApplicationWizardBindingsStep extends ApplicationWizardStep { label = msg("Configure Bindings"); get buttons(): WizardButton[] { return [ - { kind: "next", destination: "submit" }, - { kind: "back", destination: "provider" }, { kind: "cancel" }, + { kind: "back", destination: "provider" }, + { kind: "next", destination: "submit" }, ]; } diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts index 502dd47bd2..180ef481ab 100644 --- a/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts +++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-edit-binding-step.ts @@ -10,19 +10,19 @@ import "#elements/forms/SearchSelect/ak-search-select-ez"; import "#elements/forms/SearchSelect/index"; import { DEFAULT_CONFIG } from "#common/api/config"; +import { + createPassFailOptions, + PolicyBindingCheckTarget, + PolicyObjectKeys, +} from "#common/policies/utils"; import { groupBy } from "#common/utils"; import { ISearchSelectConfig } from "#elements/forms/SearchSelect/ak-search-select-ez"; import { type SearchSelectBase } from "#elements/forms/SearchSelect/SearchSelect"; -import { type NavigableButton, type WizardButton } from "#components/ak-wizard/types"; +import { type NavigableButton, type WizardButton } from "#components/ak-wizard/shared"; import { ApplicationWizardStep } from "#admin/applications/wizard/ApplicationWizardStep"; -import { - createPassFailOptions, - PolicyBindingCheckTarget, - PolicyObjectKeys, -} from "#admin/policies/utils"; import { CoreApi, Group, PoliciesApi, Policy, PolicyBinding, User } from "@goauthentik/api"; @@ -32,8 +32,11 @@ import { customElement, query, state } from "lit/decorators.js"; const withQuery = (search: string | undefined, args: T) => (search ? { ...args, search } : args); +/** + * @prop wizard - The current state of the application wizard, shared across all steps. + */ @customElement("ak-application-wizard-edit-binding-step") -export class ApplicationWizardEditBindingStep extends ApplicationWizardStep { +export class ApplicationWizardEditBindingStep extends ApplicationWizardStep { label = msg("Edit Binding"); hide = true; @@ -54,13 +57,13 @@ export class ApplicationWizardEditBindingStep extends ApplicationWizardStep { get buttons(): WizardButton[] { return [ + { kind: "cancel" }, { kind: "next", label: msg("Save Binding"), destination: "bindings" }, { kind: "back", destination: "bindings" }, - { kind: "cancel" }, ]; } - override handleButton(button: NavigableButton) { + public override handleButton(button: NavigableButton) { if (button.kind === "next") { if (!this.form?.checkValidity()) { return; @@ -69,7 +72,7 @@ export class ApplicationWizardEditBindingStep extends ApplicationWizardStep { const policyObject = this.searchSelect.selectedObject; const policyKey = PolicyObjectKeys[this.policyGroupUser]; const newBinding: PolicyBinding = { - ...(this.formValues as unknown as PolicyBinding), + ...this.formValues, [policyKey]: policyObject, }; diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-choice-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-choice-step.ts index 06c15761b3..1fd5cc7975 100644 --- a/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-choice-step.ts +++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-choice-step.ts @@ -10,7 +10,7 @@ import { bound } from "#elements/decorators/bound"; import { WithLicenseSummary } from "#elements/mixins/license"; import { TypeCreateWizardPageLayouts } from "#elements/wizard/TypeCreateWizardPage"; -import type { NavigableButton, WizardButton } from "#components/ak-wizard/types"; +import type { NavigableButton, WizardButton } from "#components/ak-wizard/shared"; import { ApplicationWizardStep } from "#admin/applications/wizard/ApplicationWizardStep"; @@ -21,6 +21,10 @@ import { msg } from "@lit/localize"; import { html } from "lit"; import { customElement, state } from "lit/decorators.js"; +/** + * + * @prop wizard - The current state of the application wizard, shared across all steps. + */ @customElement("ak-application-wizard-provider-choice-step") export class ApplicationWizardProviderChoiceStep extends WithLicenseSummary(ApplicationWizardStep) { label = msg("Choose a Provider"); @@ -33,13 +37,13 @@ export class ApplicationWizardProviderChoiceStep extends WithLicenseSummary(Appl get buttons(): WizardButton[] { return [ - { kind: "next", destination: "provider" }, - { kind: "back", destination: "application" }, { kind: "cancel" }, + { kind: "back", destination: "application" }, + { kind: "next", destination: "provider" }, ]; } - override handleButton(button: NavigableButton) { + public override handleButton(button: NavigableButton) { this.failureMessage = ""; if (button.kind === "next") { if (!this.wizard.providerModel) { diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-step.ts index dc84178fdb..64b91dbed6 100644 --- a/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-step.ts +++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-provider-step.ts @@ -1,38 +1,46 @@ -import "./providers/ak-application-wizard-provider-for-ldap.js"; -import "./providers/ak-application-wizard-provider-for-oauth.js"; -import "./providers/ak-application-wizard-provider-for-proxy.js"; -import "./providers/ak-application-wizard-provider-for-rac.js"; -import "./providers/ak-application-wizard-provider-for-radius.js"; -import "./providers/ak-application-wizard-provider-for-saml.js"; -import "./providers/ak-application-wizard-provider-for-saml-metadata.js"; -import "./providers/ak-application-wizard-provider-for-scim.js"; +import "#admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-ldap"; +import "#admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth"; +import "#admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-proxy"; +import "#admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac"; +import "#admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-radius"; +import "#admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml"; +import "#admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml-metadata"; +import "#admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-scim"; -import { ApplicationWizardStep } from "../ApplicationWizardStep.js"; -import { OneOfProvider } from "../types.js"; -import { ApplicationWizardProviderForm } from "./providers/ApplicationWizardProviderForm.js"; +import { omitKeys } from "#common/objects"; -import { type NavigableButton, type WizardButton } from "#components/ak-wizard/types"; +import { StrictUnsafe } from "#elements/utils/unsafe"; + +import { type NavigableButton, type WizardButton } from "#components/ak-wizard/shared"; + +import { ApplicationWizardStep } from "#admin/applications/wizard/ApplicationWizardStep"; +import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm"; +import { OneOfProvider } from "#admin/applications/wizard/steps/providers/shared"; import { msg } from "@lit/localize"; import { nothing, PropertyValues } from "lit"; import { customElement, query, state } from "lit/decorators.js"; -import { html, unsafeStatic } from "lit/static-html.js"; -const providerToTag = new Map([ - ["ldapprovider", "ak-application-wizard-provider-for-ldap"], - ["oauth2provider", "ak-application-wizard-provider-for-oauth"], - ["proxyprovider", "ak-application-wizard-provider-for-proxy"], - ["racprovider", "ak-application-wizard-provider-for-rac"], - ["radiusprovider", "ak-application-wizard-provider-for-radius"], - ["samlprovider", "ak-application-wizard-provider-for-saml"], - ["samlproviderimportmodel", "ak-application-wizard-provider-for-saml-metadata"], - ["scimprovider", "ak-application-wizard-provider-for-scim"], -]); +const providerToTag = { + ldapprovider: "ak-application-wizard-provider-for-ldap", + oauth2provider: "ak-application-wizard-provider-for-oauth", + proxyprovider: "ak-application-wizard-provider-for-proxy", + racprovider: "ak-application-wizard-provider-for-rac", + radiusprovider: "ak-application-wizard-provider-for-radius", + samlprovider: "ak-application-wizard-provider-for-saml", + samlproviderimportmodel: "ak-application-wizard-provider-for-saml-metadata", + scimprovider: "ak-application-wizard-provider-for-scim", +} as const satisfies Record; +type ProviderModel = keyof typeof providerToTag; + +/** + * @prop wizard - The current state of the application wizard, shared across all steps. + */ @customElement("ak-application-wizard-provider-step") export class ApplicationWizardProviderStep extends ApplicationWizardStep { @state() - label = msg("Configure Provider"); + public override label = msg("Configure Provider"); @query("#providerform") protected element!: ApplicationWizardProviderForm; @@ -62,7 +70,7 @@ export class ApplicationWizardProviderStep extends ApplicationWizardStep { return this.element.formValues; } - override handleButton(button: NavigableButton) { + public override handleButton(button: NavigableButton) { if (button.kind === "next") { if (!this.valid) { this.handleEnabling({ @@ -75,7 +83,7 @@ export class ApplicationWizardProviderStep extends ApplicationWizardStep { ...this.formValues, mode: this.wizard.proxyMode, }, - errors: this.removeErrors("provider"), + errors: omitKeys(this.wizard.errors, "provider"), }; this.handleUpdate(payload, button.destination, { enable: ["bindings", "submit"], @@ -87,9 +95,9 @@ export class ApplicationWizardProviderStep extends ApplicationWizardStep { get buttons(): WizardButton[] { return [ - { kind: "next", destination: "bindings" }, - { kind: "back", destination: "provider-choice" }, { kind: "cancel" }, + { kind: "back", destination: "provider-choice" }, + { kind: "next", destination: "bindings" }, ]; } @@ -101,19 +109,21 @@ export class ApplicationWizardProviderStep extends ApplicationWizardStep { // This is, I'm afraid, some rather esoteric bit of Lit-ing, and it makes ESLint // sad. It does allow us to get away with specifying very little about the // provider here. - const tag = providerToTag.get(this.wizard.providerModel); - return tag - ? // eslint-disable-next-line lit/binding-positions,lit/no-invalid-html - html`<${unsafeStatic(tag)} - id="providerform" - .wizard=${this.wizard} - .errors=${this.wizard.errors?.provider ?? {}} + const tag = providerToTag[this.wizard.providerModel as ProviderModel]; - >` - : nothing; + if (!tag) { + this.logger.warn( + `No provider form found for provider model ${this.wizard.providerModel}`, + ); + + return nothing; + } + + return StrictUnsafe>(tag, { + wizard: this.wizard, + id: "providerform", + errors: this.wizard.errors?.provider ?? {}, + }); } updated(changed: PropertyValues) { diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts index b7548db7f8..89b0cfe528 100644 --- a/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts +++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts @@ -1,18 +1,22 @@ import "#admin/applications/wizard/ak-wizard-title"; -import { ApplicationWizardStep } from "../ApplicationWizardStep.js"; -import { isApplicationTransactionValidationError, OneOfProvider } from "../types.js"; -import { providerRenderers } from "./SubmitStepOverviewRenderers.js"; - import { DEFAULT_CONFIG } from "#common/api/config"; import { EVENT_REFRESH } from "#common/constants"; import { parseAPIResponseError } from "#common/errors/network"; import { showAPIErrorMessage } from "#elements/messages/MessageContainer"; +import { SlottedTemplateResult } from "#elements/types"; import { CustomEmitterElement } from "#elements/utils/eventEmitter"; import { WizardNavigationEvent } from "#components/ak-wizard/events"; -import { type WizardButton } from "#components/ak-wizard/types"; +import { type WizardButton } from "#components/ak-wizard/shared"; + +import { ApplicationWizardStep } from "#admin/applications/wizard/ApplicationWizardStep"; +import { + isApplicationTransactionValidationError, + OneOfProvider, +} from "#admin/applications/wizard/steps/providers/shared"; +import { providerRenderers } from "#admin/applications/wizard/steps/SubmitStepOverviewRenderers"; import { type ApplicationRequest, @@ -26,7 +30,6 @@ import { type ProvidersSamlImportMetadataCreateRequest, ProxyMode, type ProxyProviderRequest, - type SAMLProvider, type TransactionApplicationRequest, type TransactionApplicationResponse, type TransactionPolicyBindingRequest, @@ -35,11 +38,10 @@ import { import { match, P } from "ts-pattern"; import { msg } from "@lit/localize"; -import { css, html, nothing, TemplateResult } from "lit"; +import { css, html, nothing } from "lit"; import { customElement, state } from "lit/decorators.js"; import { classMap } from "lit/directives/class-map.js"; -// import { map } from "lit/directives/map.js"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css"; import PFProgressStepper from "@patternfly/patternfly/components/ProgressStepper/progress-stepper.css"; @@ -51,19 +53,22 @@ type SubmitStates = (typeof _submitStates)[number]; type StrictProviderModelEnum = Exclude; -const providerMap: Map = Object.values(ProviderModelEnum) - .filter((value) => /^authentik_providers_/.test(value) && /provider$/.test(value)) - .reduce((acc: Map, value) => { - acc.set(value.split(".")[1], value); +const providerMap: Map = Object.values(ProviderModelEnum) + .filter((value): value is StrictProviderModelEnum => { + return /^authentik_providers_/.test(value) && /provider$/.test(value); + }) + .reduce((acc: Map, value) => { + const key = value.split(".")[1]; + acc.set(key, value); + return acc; }, new Map()); type NonEmptyArray = [T, ...T[]]; -type MaybeTemplateResult = TemplateResult | typeof nothing; - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const isNotEmpty = (arr: any): arr is NonEmptyArray => Array.isArray(arr) && arr.length > 0; +function isNotEmpty(arr: T[] | undefined): arr is NonEmptyArray { + return Array.isArray(arr) && arr.length > 0; +} const cleanApplication = (app: Partial): ApplicationRequest => ({ name: "", @@ -99,10 +104,10 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio `, ]; - label = msg("Review and Submit Application"); + public override label = msg("Review and Submit Application"); @state() - state: SubmitStates = "reviewing"; + protected state: SubmitStates = "reviewing"; async sendSAMLMetadataImport() { const providerData = this.wizard.provider as ProvidersSamlImportMetadataCreateRequest; @@ -112,12 +117,12 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio try { // Step 1: Import SAML metadata to create the provider - const createdProvider = (await providersApi.providersSamlImportMetadataCreate({ + const createdProvider = await providersApi.providersSamlImportMetadataCreate({ file: providerData.file, name: providerData.name, authorizationFlow: providerData.authorizationFlow || "", invalidationFlow: providerData.invalidationFlow || "", - })) as unknown as SAMLProvider; + }); // Step 2: Create the application linked to the provider const appData = cleanApplication(this.wizard.app); @@ -158,12 +163,12 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio const app = this.wizard.app; const provider = this.wizard.provider as ModelRequest; - if (app === undefined) { - throw new Error("Reached the submit state with the app undefined"); + if (!app) { + throw new Error("Reached the submit state without the application initialized"); } - if (provider === undefined) { - throw new Error("Reached the submit state with the provider undefined"); + if (!provider) { + throw new Error("Reached the submit state without the provider initialized"); } this.state = "running"; @@ -176,14 +181,21 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio // Stringly-based API. Not the best, but it works. Just be aware that it is // stringly-based. - const providerModel = providerMap.get(this.wizard.providerModel) as StrictProviderModelEnum; + const providerModel = providerMap.get(this.wizard.providerModel); + + if (!providerModel) { + throw new TypeError("Unrecognized provider model: " + this.wizard.providerModel); + } + provider.providerModel = providerModel; // Special case for the Proxy provider. if (this.wizard.providerModel === "proxyprovider") { - (provider as ProxyProviderRequest).mode = this.wizard.proxyMode; - if ((provider as ProxyProviderRequest).mode !== ProxyMode.ForwardDomain) { - (provider as ProxyProviderRequest).cookieDomain = ""; + const proxyProviderRequest = provider as ProxyProviderRequest; + proxyProviderRequest.mode = this.wizard.proxyMode; + + if (proxyProviderRequest.mode !== ProxyMode.ForwardDomain) { + proxyProviderRequest.cookieDomain = ""; } } @@ -236,7 +248,7 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio }); } - override handleButton(button: WizardButton) { + public override handleButton(button: WizardButton) { match([button.kind, this.state]) .with([P.union("back", "cancel"), P._], () => { super.handleButton(button); @@ -259,9 +271,9 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio get buttons(): WizardButton[] { const forReview: WizardButton[] = [ - { kind: "next", label: msg("Submit"), destination: "here" }, - { kind: "back", destination: "bindings" }, { kind: "cancel" }, + { kind: "back", destination: "bindings" }, + { kind: "next", label: msg("Create Application"), destination: "here" }, ]; const forSubmit: WizardButton[] = [{ kind: "close" }]; @@ -277,7 +289,7 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio state: string, label: string, icons: string[], - extraInfo: MaybeTemplateResult = nothing, + extraInfo: SlottedTemplateResult = nothing, ) { const icon = classMap(icons.reduce((acc, icon) => ({ ...acc, [icon]: true }), {})); @@ -385,14 +397,14 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio
${metaLaunchUrl - ? html`
+ ? html`
${msg("Launch URL")}
${metaLaunchUrl}
` : nothing} ${renderer - ? html`

${msg("Provider")}

+ ? html`

${msg("Provider")}

${renderer(provider)}` : nothing}
diff --git a/web/src/admin/applications/wizard/steps/bindings/ak-application-wizard-bindings-toolbar.ts b/web/src/admin/applications/wizard/steps/bindings/ak-application-wizard-bindings-toolbar.ts index 47a078ae84..ea87a9c17d 100644 --- a/web/src/admin/applications/wizard/steps/bindings/ak-application-wizard-bindings-toolbar.ts +++ b/web/src/admin/applications/wizard/steps/bindings/ak-application-wizard-bindings-toolbar.ts @@ -17,7 +17,7 @@ export class ApplicationWizardBindingsToolbar extends AKElement { static styles = [PFButton, PFToolbar]; @property({ type: Boolean, attribute: "can-delete", reflect: true }) - canDelete = false; + public canDelete = false; notify(eventName: string) { this.dispatchEvent(new Event(eventName, { bubbles: true, composed: true })); diff --git a/web/src/admin/applications/wizard/steps/providers/ApplicationWizardProviderForm.ts b/web/src/admin/applications/wizard/steps/providers/ApplicationWizardProviderForm.ts index eb154bad1a..cacf3b3f1d 100644 --- a/web/src/admin/applications/wizard/steps/providers/ApplicationWizardProviderForm.ts +++ b/web/src/admin/applications/wizard/steps/providers/ApplicationWizardProviderForm.ts @@ -5,27 +5,35 @@ import "#components/ak-text-input"; import "#elements/forms/FormGroup"; import "#elements/forms/HorizontalFormElement"; -import { styles as ApplicationWizardStyles } from "../../ApplicationWizardFormStepStyles.styles.js"; -import { type ApplicationWizardState, type OneOfProvider } from "../../types.js"; - import { AKElement } from "#elements/Base"; -import { serializeForm } from "#elements/forms/Form"; +import { serializeForm } from "#elements/forms/serialization"; + +import { ApplicationWizardStyles } from "#admin/applications/wizard/ApplicationWizardFormStepStyles.styles"; +import { + ApplicationTransactionValidationError, + type ApplicationWizardState, + ApplicationWizardStateError, + type OneOfProvider, +} from "#admin/applications/wizard/steps/providers/shared"; import { snakeCase } from "change-case"; import { CSSResult } from "lit"; import { property, query } from "lit/decorators.js"; -export abstract class ApplicationWizardProviderForm extends AKElement { +export abstract class ApplicationWizardProviderForm< + P extends OneOfProvider, + E extends ApplicationWizardStateError = ApplicationTransactionValidationError, +> extends AKElement { static styles: CSSResult[] = [...ApplicationWizardStyles]; - label = ""; + public abstract label: string; @property({ type: Object, attribute: false }) - wizard!: ApplicationWizardState; + public wizard!: ApplicationWizardState; @property({ type: Object, attribute: false }) - errors: Record = {}; + public errors: E = {} as E; @query("form#providerform") public form!: HTMLFormElement | null; @@ -42,23 +50,20 @@ export abstract class ApplicationWizardProviderForm ext } get valid() { - this.errors = {}; + this.errors = {} as E; return !!this.form?.checkValidity(); } - errorMessages(name: string) { - return name in this.errors - ? [this.errors[name]] - : (this.wizard.errors?.provider?.[name] ?? - this.wizard.errors?.provider?.[snakeCase(name)] ?? - []); - } + errorMessages>(name: T): Array { + if (name in this.errors) { + return [this.errors[name]]; + } - isValid(name: keyof T) { - return !( - (this.wizard.errors?.provider?.[name as string] ?? []).length > 0 || - this.errors?.[name] !== undefined + return ( + this.wizard.errors?.provider?.[name] ?? + this.wizard.errors?.provider?.[snakeCase(name) as keyof E] ?? + [] ); } } diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-ldap.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-ldap.ts index bbca20e1e7..b0623f509a 100644 --- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-ldap.ts +++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-ldap.ts @@ -1,10 +1,12 @@ import "#admin/applications/wizard/ak-wizard-title"; -import { ApplicationWizardProviderForm } from "./ApplicationWizardProviderForm.js"; - import { WithBrandConfig } from "#elements/mixins/branding"; -import { ValidationRecord } from "#admin/applications/wizard/types"; +import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm"; +import { + ApplicationTransactionValidationError, + WizardValidationRecord, +} from "#admin/applications/wizard/steps/providers/shared"; import { renderForm } from "#admin/providers/ldap/LDAPProviderFormForm"; import type { LDAPProvider } from "@goauthentik/api"; @@ -15,11 +17,11 @@ import { customElement } from "lit/decorators.js"; @customElement("ak-application-wizard-provider-for-ldap") export class ApplicationWizardLdapProviderForm extends WithBrandConfig( - ApplicationWizardProviderForm, + ApplicationWizardProviderForm, ) { label = msg("Configure LDAP Provider"); - renderForm(provider: LDAPProvider, errors: ValidationRecord) { + renderForm(provider: LDAPProvider, errors: WizardValidationRecord) { return html` ${this.label} @@ -32,10 +34,7 @@ export class ApplicationWizardLdapProviderForm extends WithBrandConfig( if (!(this.wizard.provider && this.wizard.errors)) { throw new Error("LDAP Provider Step received uninitialized wizard context."); } - return this.renderForm( - this.wizard.provider as LDAPProvider, - this.wizard.errors.provider ?? {}, - ); + return this.renderForm(this.wizard.provider, this.wizard.errors.provider ?? {}); } } diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts index 58914d4fee..08b7e5509d 100644 --- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts +++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-oauth.ts @@ -1,25 +1,19 @@ import "#admin/applications/wizard/ak-wizard-title"; -import { ApplicationTransactionValidationError } from "../../types.js"; -import { ApplicationWizardProviderForm } from "./ApplicationWizardProviderForm.js"; - import { DEFAULT_CONFIG } from "#common/api/config"; +import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm"; +import { ApplicationTransactionValidationError } from "#admin/applications/wizard/steps/providers/shared"; import { renderForm } from "#admin/providers/oauth2/OAuth2ProviderFormForm"; -import { - type OAuth2Provider, - OAuth2ProviderRequest, - type PaginatedOAuthSourceList, - SourcesApi, -} from "@goauthentik/api"; +import { type OAuth2Provider, type PaginatedOAuthSourceList, SourcesApi } from "@goauthentik/api"; import { msg } from "@lit/localize"; import { html } from "lit"; import { customElement, state } from "lit/decorators.js"; @customElement("ak-application-wizard-provider-for-oauth") -export class ApplicationWizardOauth2ProviderForm extends ApplicationWizardProviderForm { +export class ApplicationWizardOauth2ProviderForm extends ApplicationWizardProviderForm { label = msg("Configure OAuth2 Provider"); @state() @@ -67,7 +61,7 @@ export class ApplicationWizardOauth2ProviderForm extends ApplicationWizardProvid if (!(this.wizard.provider && this.wizard.errors)) { throw new Error("Oauth2 Provider Step received uninitialized wizard context."); } - return this.renderForm(this.wizard.provider as OAuth2Provider, this.wizard.errors); + return this.renderForm(this.wizard.provider, this.wizard.errors); } } diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-proxy.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-proxy.ts index 625dede6d6..c5c35c0713 100644 --- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-proxy.ts +++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-proxy.ts @@ -1,10 +1,9 @@ import "#admin/applications/wizard/ak-wizard-title"; -import { ApplicationWizardProviderForm } from "./ApplicationWizardProviderForm.js"; - import { WizardUpdateEvent } from "#components/ak-wizard/events"; -import { ValidationRecord } from "#admin/applications/wizard/types"; +import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm"; +import { WizardValidationRecord } from "#admin/applications/wizard/steps/providers/shared"; import { ProxyModeValue, renderForm, @@ -25,7 +24,7 @@ export class ApplicationWizardProxyProviderForm extends ApplicationWizardProvide @state() showHttpBasic = true; - renderForm(provider: ProxyProvider, errors: ValidationRecord) { + protected renderForm(provider: ProxyProvider, errors: WizardValidationRecord = {}) { const onSetMode: SetMode = (ev: CustomEvent) => { this.dispatchEvent( new WizardUpdateEvent({ ...this.wizard, proxyMode: ev.detail.value }), @@ -59,10 +58,7 @@ export class ApplicationWizardProxyProviderForm extends ApplicationWizardProvide if (!(this.wizard.provider && this.wizard.errors)) { throw new Error("Proxy Provider Step received uninitialized wizard context."); } - return this.renderForm( - this.wizard.provider as ProxyProvider, - this.wizard.errors?.provider ?? {}, - ); + return this.renderForm(this.wizard.provider, this.wizard.errors?.provider); } } diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts index 46a149e5c7..21db048c98 100644 --- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts +++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-rac.ts @@ -5,8 +5,7 @@ import "#components/ak-text-input"; import "#elements/CodeMirror"; import "#elements/ak-dual-select/ak-dual-select-dynamic-selected-provider"; -import { ApplicationWizardProviderForm } from "./ApplicationWizardProviderForm.js"; - +import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm"; import { propertyMappingsProvider, propertyMappingsSelector, @@ -84,7 +83,7 @@ export class ApplicationWizardRACProviderForm extends ApplicationWizardProviderF if (!(this.wizard.provider && this.wizard.errors)) { throw new Error("RAC Provider Step received uninitialized wizard context."); } - return this.renderForm(this.wizard.provider as RACProvider); + return this.renderForm(this.wizard.provider); } } diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-radius.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-radius.ts index f6f0164b70..191f89ad10 100644 --- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-radius.ts +++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-radius.ts @@ -1,10 +1,9 @@ import "#admin/applications/wizard/ak-wizard-title"; -import { ApplicationWizardProviderForm } from "./ApplicationWizardProviderForm.js"; - import { WithBrandConfig } from "#elements/mixins/branding"; -import { ValidationRecord } from "#admin/applications/wizard/types"; +import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm"; +import { WizardValidationRecord } from "#admin/applications/wizard/steps/providers/shared"; import { renderForm } from "#admin/providers/radius/RadiusProviderFormForm"; import { RadiusProvider } from "@goauthentik/api"; @@ -19,7 +18,7 @@ export class ApplicationWizardRadiusProviderForm extends WithBrandConfig( ) { label = msg("Configure Radius Provider"); - renderForm(provider: RadiusProvider, errors: ValidationRecord) { + renderForm(provider: RadiusProvider, errors: WizardValidationRecord = {}) { return html` ${this.label} ${renderForm({ provider, errors, brand: this.brand })} @@ -30,10 +29,7 @@ export class ApplicationWizardRadiusProviderForm extends WithBrandConfig( if (!(this.wizard.provider && this.wizard.errors)) { throw new Error("RAC Provider Step received uninitialized wizard context."); } - return this.renderForm( - this.wizard.provider as RadiusProvider, - this.wizard.errors?.provider ?? {}, - ); + return this.renderForm(this.wizard.provider, this.wizard.errors?.provider); } } diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml-metadata.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml-metadata.ts index db031b5503..2072891410 100644 --- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml-metadata.ts +++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml-metadata.ts @@ -1,9 +1,8 @@ import "#admin/applications/wizard/ak-wizard-title"; -import { ApplicationWizardProviderForm } from "./ApplicationWizardProviderForm.js"; - import { createFileMap } from "#elements/utils/inputs"; +import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm"; import { renderForm } from "#admin/providers/saml/SAMLProviderImportFormForm"; import type { ProvidersSamlImportMetadataCreateRequest } from "@goauthentik/api"; diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml.ts index 474f4348af..bb0d2c757f 100644 --- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml.ts +++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-saml.ts @@ -1,8 +1,7 @@ import "#admin/applications/wizard/ak-wizard-title"; import "#elements/forms/FormGroup"; -import { ApplicationWizardProviderForm } from "./ApplicationWizardProviderForm.js"; - +import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm"; import { type AkCryptoCertificateSearch } from "#admin/common/ak-crypto-certificate-search"; import { renderForm } from "#admin/providers/saml/SAMLProviderFormForm"; @@ -84,7 +83,7 @@ export class ApplicationWizardProviderSamlForm extends ApplicationWizardProvider return html` ${this.label} ${renderForm({ - provider: this.wizard.provider as SAMLProvider, + provider: this.wizard.provider, errors: this.wizard.errors?.provider, setHasSigningKp, hasSigningKp: this.hasSigningKp, diff --git a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-scim.ts b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-scim.ts index 04e99d49b8..d0ef6f219b 100644 --- a/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-scim.ts +++ b/web/src/admin/applications/wizard/steps/providers/ak-application-wizard-provider-for-scim.ts @@ -1,8 +1,7 @@ import "#admin/applications/wizard/ak-wizard-title"; import "#elements/forms/FormGroup"; -import { ApplicationWizardProviderForm } from "./ApplicationWizardProviderForm.js"; - +import { ApplicationWizardProviderForm } from "#admin/applications/wizard/steps/providers/ApplicationWizardProviderForm"; import { renderForm } from "#admin/providers/scim/SCIMProviderFormForm"; import { PaginatedSCIMMappingList, type SCIMProvider } from "@goauthentik/api"; @@ -23,7 +22,7 @@ export class ApplicationWizardSCIMProvider extends ApplicationWizardProviderForm ${renderForm({ update: this.requestUpdate.bind(this), - provider: this.wizard.provider as SCIMProvider, + provider: this.wizard.provider, errors: this.wizard.errors.provider, })} `; diff --git a/web/src/admin/applications/wizard/types.ts b/web/src/admin/applications/wizard/steps/providers/shared.ts similarity index 67% rename from web/src/admin/applications/wizard/types.ts rename to web/src/admin/applications/wizard/steps/providers/shared.ts index 5e20ffe612..100a4c955a 100644 --- a/web/src/admin/applications/wizard/types.ts +++ b/web/src/admin/applications/wizard/steps/providers/shared.ts @@ -13,27 +13,34 @@ import { type ValidationError, } from "@goauthentik/api"; -export type OneOfProvider = - | Partial - | Partial - | Partial - | Partial - | Partial - | Partial - | Partial - | Partial; +export type OneOfProvider = Partial< + | SCIMProviderRequest + | SAMLProviderRequest + | ProvidersSamlImportMetadataCreateRequest + | RACProviderRequest + | RadiusProviderRequest + | ProxyProviderRequest + | OAuth2ProviderRequest + | LDAPProviderRequest +>; -export type ValidationRecord = { [key: string]: string[] }; +export type WizardValidationRecord = { + [key in K]: string[] | undefined; +}; /** * An error that occurs during the creation or modification of an application. * * @todo (Elf) Extend this type to include all possible errors that can occur during the creation or modification of an application. */ -export interface ApplicationTransactionValidationError extends ValidationError { - app?: ValidationRecord; - provider?: ValidationRecord; - bindings?: ValidationRecord; +export interface ApplicationTransactionValidationError extends Pick< + ValidationError, + "code" | "nonFieldErrors" +> { + app?: WizardValidationRecord; + name?: WizardValidationRecord; + provider?: WizardValidationRecord; + bindings?: WizardValidationRecord; detail?: unknown; } @@ -50,20 +57,25 @@ export function isApplicationTransactionValidationError( return false; } +export type ApplicationWizardStateError = ValidationError | ApplicationTransactionValidationError; + // We use the PolicyBinding instead of the PolicyBindingRequest here, because that gives us a slot // in which to preserve the retrieved policy, group, or user object from the SearchSelect used to // find it, which in turn allows us to create a user-friendly display of bindings on the "List of // configured bindings" page in the wizard. The PolicyBinding is converted into a // PolicyBindingRequest during the submission phase. -export interface ApplicationWizardState { +export interface ApplicationWizardState< + P extends OneOfProvider = OneOfProvider, + E = ApplicationTransactionValidationError, +> { app: Partial; providerModel: string; - provider: OneOfProvider; + provider: P; proxyMode: ProxyMode; bindings: PolicyBinding[]; currentBinding: number; - errors: ValidationError | ApplicationTransactionValidationError; + errors: E; } export interface ApplicationWizardStateUpdate { diff --git a/web/src/admin/blueprints/BlueprintListPage.ts b/web/src/admin/blueprints/BlueprintListPage.ts index a47318baee..818a99447f 100644 --- a/web/src/admin/blueprints/BlueprintListPage.ts +++ b/web/src/admin/blueprints/BlueprintListPage.ts @@ -156,7 +156,7 @@ export class BlueprintListPage extends TablePage { html``, html`
- ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Blueprint")} { @@ -107,16 +112,10 @@ export class ConfigModal extends ModalButton { > ${msg("Copy")} -   - - `; + + ${msg("Download")} + + `; } } diff --git a/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts b/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts index c28c40d5c8..6153d852dc 100644 --- a/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts +++ b/web/src/admin/endpoints/connectors/agent/EnrollmentTokenListPage.ts @@ -87,7 +87,7 @@ export class EnrollmentTokenListPage extends Table { Timestamp(item.expires && item.expiring ? item.expires : null), html`
- ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Enrollment Token")} `}
-
+
+ ${msg("Form actions")} -
`; + `; } } diff --git a/web/src/admin/endpoints/devices/DeviceListPage.ts b/web/src/admin/endpoints/devices/DeviceListPage.ts index f7becaf59f..d821755f28 100644 --- a/web/src/admin/endpoints/devices/DeviceListPage.ts +++ b/web/src/admin/endpoints/devices/DeviceListPage.ts @@ -132,7 +132,7 @@ export class DeviceListPage extends TablePage { html`${item.accessGroupObj?.name || "-"}`, item.facts.created ? Timestamp(item.facts.created) : html`-`, html` - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Device")} diff --git a/web/src/admin/endpoints/devices/DeviceUserBindingForm.ts b/web/src/admin/endpoints/devices/DeviceUserBindingForm.ts index eda0ae9aa5..413a928802 100644 --- a/web/src/admin/endpoints/devices/DeviceUserBindingForm.ts +++ b/web/src/admin/endpoints/devices/DeviceUserBindingForm.ts @@ -1,9 +1,9 @@ import "#components/ak-switch-input"; import { DEFAULT_CONFIG } from "#common/api/config"; +import { PolicyBindingCheckTarget } from "#common/policies/utils"; import { PolicyBindingForm } from "#admin/policies/PolicyBindingForm"; -import { PolicyBindingCheckTarget } from "#admin/policies/utils"; import { DeviceUserBinding, EndpointsApi, PolicyBinding } from "@goauthentik/api"; diff --git a/web/src/admin/endpoints/devices/DeviceViewPage.ts b/web/src/admin/endpoints/devices/DeviceViewPage.ts index 697e7bb9f6..2b3c1aae64 100644 --- a/web/src/admin/endpoints/devices/DeviceViewPage.ts +++ b/web/src/admin/endpoints/devices/DeviceViewPage.ts @@ -120,7 +120,7 @@ export class DeviceViewPage extends AKElement { [ msg("Actions"), html` - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Device")} { html` ${item.expiry?.toLocaleString()} `, html`
- ${msg("Update")} + ${msg("Save Changes")} ${msg("Update License")} diff --git a/web/src/components/events/ObjectChangelog.ts b/web/src/admin/events/ObjectChangelog.ts similarity index 100% rename from web/src/components/events/ObjectChangelog.ts rename to web/src/admin/events/ObjectChangelog.ts diff --git a/web/src/admin/events/RuleListPage.ts b/web/src/admin/events/RuleListPage.ts index efee4b211e..1d100b5971 100644 --- a/web/src/admin/events/RuleListPage.ts +++ b/web/src/admin/events/RuleListPage.ts @@ -89,7 +89,7 @@ export class RuleListPage extends TablePage { : msg("-")}`, html`
- ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Notification Rule")} - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Stage binding")} diff --git a/web/src/admin/flows/FlowListPage.ts b/web/src/admin/flows/FlowListPage.ts index 7c565dcc11..e524da7907 100644 --- a/web/src/admin/flows/FlowListPage.ts +++ b/web/src/admin/flows/FlowListPage.ts @@ -25,6 +25,8 @@ import PFBanner from "@patternfly/patternfly/components/Banner/banner.css"; @customElement("ak-flow-list") export class FlowListPage extends TablePage { + static styles = [...super.styles, PFBanner]; + protected override searchEnabled = true; public pageTitle = msg("Flows"); public pageDescription = msg( @@ -38,8 +40,6 @@ export class FlowListPage extends TablePage { @property() order = "slug"; - static styles = [...super.styles, PFBanner]; - async apiEndpoint(): Promise> { return new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(await this.defaultEndpointConfig()); } @@ -86,12 +86,12 @@ export class FlowListPage extends TablePage { ${item.slug} ${item.title}`, - html`${item.name}`, - html`${Array.from(item.stages || []).length}`, - html`${Array.from(item.policies || []).length}`, + item.name, + Array.from(item.stages || []).length, + Array.from(item.policies || []).length, html`
- ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Flow")} + ${msg("Import")} @@ -161,7 +161,7 @@ export class FlowListPage extends TablePage { { return new FlowsApi(DEFAULT_CONFIG).flowsInstancesCacheClearCreate(); }} diff --git a/web/src/admin/flows/FlowViewPage.ts b/web/src/admin/flows/FlowViewPage.ts index 508aa671b5..9ab3670a62 100644 --- a/web/src/admin/flows/FlowViewPage.ts +++ b/web/src/admin/flows/FlowViewPage.ts @@ -3,7 +3,7 @@ import "#admin/flows/FlowDiagram"; import "#admin/flows/FlowForm"; import "#admin/policies/BoundPoliciesList"; import "#admin/rbac/ObjectPermissionsPage"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; import "#elements/Tabs"; import "#elements/buttons/SpinnerButton/ak-spinner-button"; @@ -127,7 +127,9 @@ export class FlowViewPage extends AKElement {
- ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Flow")} diff --git a/web/src/admin/groups/GroupForm.ts b/web/src/admin/groups/GroupForm.ts index 17d73f40e0..9529a838ef 100644 --- a/web/src/admin/groups/GroupForm.ts +++ b/web/src/admin/groups/GroupForm.ts @@ -1,4 +1,4 @@ -import "#admin/groups/MemberSelectModal"; +import "#admin/groups/MemberSelectForm"; import "#elements/CodeMirror"; import "#elements/ak-dual-select/ak-dual-select-provider"; import "#elements/chips/Chip"; @@ -43,6 +43,9 @@ export class GroupForm extends ModelForm { `, ]; + public entitySingular = msg("Group"); + public entityPlural = msg("Groups"); + #fetchGroups = (page: number, search?: string): Promise => { return new CoreApi(DEFAULT_CONFIG) .coreGroupsList({ diff --git a/web/src/admin/groups/GroupListPage.ts b/web/src/admin/groups/GroupListPage.ts index ff6f4fd1f2..e086c579e0 100644 --- a/web/src/admin/groups/GroupListPage.ts +++ b/web/src/admin/groups/GroupListPage.ts @@ -11,6 +11,8 @@ import { PaginatedResponse, TableColumn } from "#elements/table/Table"; import { TablePage } from "#elements/table/TablePage"; import { SlottedTemplateResult } from "#elements/types"; +import { GroupForm } from "#admin/groups/GroupForm"; + import { CoreApi, Group } from "@goauthentik/api"; import { msg, str } from "@lit/localize"; @@ -19,9 +21,11 @@ import { customElement, property } from "lit/decorators.js"; @customElement("ak-group-list") export class GroupListPage extends TablePage { - checkbox = true; - clearOnRefresh = true; protected override searchEnabled = true; + + public override checkbox = true; + public override clearOnRefresh = true; + public searchPlaceholder = msg("Search for a group by name…"); public searchLabel = msg("Group Search"); public pageTitle = msg("Groups"); @@ -32,9 +36,9 @@ export class GroupListPage extends TablePage { public supportsQL = true; @property() - order = "name"; + public order = "name"; - async apiEndpoint(): Promise> { + protected async apiEndpoint(): Promise> { return new CoreApi(DEFAULT_CONFIG).coreGroupsList({ ...(await this.defaultEndpointConfig()), includeUsers: false, @@ -48,7 +52,7 @@ export class GroupListPage extends TablePage { [msg("Actions"), null, msg("Row Actions")], ]; - renderToolbarSelected(): TemplateResult { + protected renderToolbarSelected(): TemplateResult { const disabled = this.selectedElements.length < 1; return html` { `; } - row(item: Group): SlottedTemplateResult[] { + protected row(item: Group): SlottedTemplateResult[] { return [ html` { html`${Array.from(item.users || []).length}`, html``, html`
- - ${msg("Update")} - ${msg("Update Group")} - - - +
`, ]; } - renderObjectCreate(): TemplateResult { - return html` - - ${msg("Create Group")} - ${msg("New Group")} - - - - `; + protected renderObjectCreate(): TemplateResult { + return html``; } } diff --git a/web/src/admin/groups/GroupViewPage.ts b/web/src/admin/groups/GroupViewPage.ts index 3bfa30b401..0e21250351 100644 --- a/web/src/admin/groups/GroupViewPage.ts +++ b/web/src/admin/groups/GroupViewPage.ts @@ -5,7 +5,7 @@ import "#admin/roles/RelatedRoleList"; import "#components/ak-object-attributes-card"; import "#admin/lifecycle/ObjectLifecyclePage"; import "#components/ak-status-label"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; import "#elements/CodeMirror"; import "#elements/Tabs"; import "#elements/buttons/ActionButton/index"; @@ -181,7 +181,7 @@ export class GroupViewPage extends WithLicenseSummary(AKElement) {
- ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Group")} diff --git a/web/src/admin/groups/MemberSelectModal.ts b/web/src/admin/groups/MemberSelectForm.ts similarity index 67% rename from web/src/admin/groups/MemberSelectModal.ts rename to web/src/admin/groups/MemberSelectForm.ts index d3928f5434..cd9e52afe8 100644 --- a/web/src/admin/groups/MemberSelectModal.ts +++ b/web/src/admin/groups/MemberSelectForm.ts @@ -3,8 +3,7 @@ import "#elements/buttons/SpinnerButton/index"; import { DEFAULT_CONFIG } from "#common/api/config"; -import { PaginatedResponse, TableColumn, Timestamp } from "#elements/table/Table"; -import { TableModal } from "#elements/table/TableModal"; +import { PaginatedResponse, Table, TableColumn, Timestamp } from "#elements/table/Table"; import { SlottedTemplateResult } from "#elements/types"; import { CoreApi, CoreUsersListRequest, User } from "@goauthentik/api"; @@ -12,19 +11,16 @@ import { CoreApi, CoreUsersListRequest, User } from "@goauthentik/api"; import { match } from "ts-pattern"; import { msg } from "@lit/localize"; -import { css, html, TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators.js"; +import { css, html } from "lit"; +import { customElement } from "lit/decorators.js"; // Leaving room in the future for a multi-state control if someone somehow needs to filter inactive // users as well. type UserListFilter = "active" | "all"; type UserListRequestFilter = Partial>; -@customElement("ak-group-member-select-table") -export class MemberSelectTable extends TableModal { - public override searchPlaceholder = msg("Search for users by username or display name..."); - public override searchLabel = msg("Search Users"); - public override label = msg("Select Users"); +@customElement("ak-group-member-select-form") +export class MemberSelectForm extends Table { static styles = [ ...super.styles, css` @@ -37,16 +33,17 @@ export class MemberSelectTable extends TableModal { } `, ]; - public supportsQL = true; - checkbox = true; - checkboxChip = true; + public override searchPlaceholder = msg("Search for users by username or display name..."); + public override searchLabel = msg("Search Users"); + public override label = msg("Select Users"); + public overridesupportsQL = true; + + public override checkbox = true; + public override checkboxChip = true; protected override searchEnabled = true; - @property() - confirm!: (selectedItems: User[]) => Promise; - userListFilter: UserListFilter = "active"; order = "username"; @@ -115,41 +112,13 @@ export class MemberSelectTable extends TableModal { ]; } - renderSelectedChip(item: User): TemplateResult { - return html`${item.username}`; - } - - renderModalInner(): TemplateResult { - return html`
-
-

${msg("Select users")}

-
-
-
${this.renderTable()}
-
- ${msg("Form actions")} - { - return this.confirm(this.selectedElements).then(() => { - this.open = false; - }); - }} - class="pf-m-primary" - >${msg("Confirm")} - { - this.open = false; - }} - class="pf-m-secondary" - >${msg("Cancel")} -
`; + renderSelectedChip(item: User): SlottedTemplateResult { + return item.username; } } declare global { interface HTMLElementTagNameMap { - "ak-group-member-select-table": MemberSelectTable; + "ak-group-member-select-form": MemberSelectForm; } } diff --git a/web/src/admin/groups/RelatedGroupList.ts b/web/src/admin/groups/RelatedGroupList.ts index b0dd16b161..59410b5f50 100644 --- a/web/src/admin/groups/RelatedGroupList.ts +++ b/web/src/admin/groups/RelatedGroupList.ts @@ -1,5 +1,5 @@ import "#admin/groups/GroupForm"; -import "#admin/users/GroupSelectModal"; +import "#admin/users/UserGroupSelectForm"; import "#components/ak-status-label"; import "#elements/buttons/SpinnerButton/index"; import "#elements/forms/DeleteBulkForm"; @@ -9,7 +9,8 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; import { DEFAULT_CONFIG } from "#common/api/config"; -import { Form } from "#elements/forms/Form"; +import { AKFormSubmitEvent, Form } from "#elements/forms/Form"; +import { renderModal } from "#elements/modals/utils"; import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table"; import { SlottedTemplateResult } from "#elements/types"; @@ -23,16 +24,16 @@ import { ifDefined } from "lit/directives/if-defined.js"; @customElement("ak-group-related-add") export class RelatedGroupAdd extends Form<{ groups: string[] }> { @property({ attribute: false }) - user?: User; + public user?: User; @state() - groupsToAdd: Group[] = []; + public groupsToAdd: Group[] = []; - getSuccessMessage(): string { + public override getSuccessMessage(): string { return msg("Successfully added user to group(s)."); } - async send(data: { groups: string[] }): Promise { + protected async send(data: { groups: string[] }): Promise { await Promise.all( data.groups.map((group) => { return new CoreApi(DEFAULT_CONFIG).coreGroupsAddUserCreate({ @@ -43,25 +44,35 @@ export class RelatedGroupAdd extends Form<{ groups: string[] }> { }); }), ); + return data; } + protected openUserGroupSelectModal = () => { + return renderModal(html` + ) => { + this.groupsToAdd = event.target.toJSON(); + }} + > + + `); + }; + protected override renderForm(): TemplateResult { return html`
- { - this.groupsToAdd = items; - this.requestUpdate(); - return Promise.resolve(); - }} + - + + + +
${this.groupsToAdd.map((group) => { @@ -141,7 +152,7 @@ export class RelatedGroupList extends Table { html`${item.name}`, html``, html` - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Group")} - + + + +
@@ -140,31 +159,38 @@ export class RelatedUserAdd extends Form<{ users: number[] }> { @customElement("ak-user-related-list") export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Table)) { + public static styles: CSSResult[] = [...Table.styles, PFDescriptionList, PFAlert]; + public override searchPlaceholder = msg("Search for users by username or display name..."); public override searchLabel = msg("User Search"); public override label = msg("Users"); - expandable = true; - checkbox = true; - clearOnRefresh = true; + public override expandable = true; + public override checkbox = true; + public override clearOnRefresh = true; protected override searchEnabled = true; @property({ attribute: false }) - targetGroup?: Group; + public targetGroup: Group | null = null; @property({ attribute: false }) - targetRole?: Role; + public targetRole: Role | null = null; - @property() - order = "last_login"; + public override order = "last_login"; @property({ type: Boolean }) - hideServiceAccounts = getURLParam("hideServiceAccounts", true); + public hideServiceAccounts = getURLParam("hideServiceAccounts", true); - static styles: CSSResult[] = [...Table.styles, PFDescriptionList, PFAlert, PFBanner]; + protected canImpersonate = false; - async apiEndpoint(): Promise> { + public override connectedCallback(): void { + super.connectedCallback(); + + this.canImpersonate = this.can(CapabilitiesEnum.CanImpersonate); + } + + protected async apiEndpoint(): Promise> { const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList({ ...(await this.defaultEndpointConfig()), ...(this.targetGroup && { groupsByPk: [this.targetGroup.pk] }), @@ -190,9 +216,10 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl [msg("Actions"), null, msg("Row Actions")], ]; - renderToolbarSelected(): TemplateResult { + protected override renderToolbarSelected(): TemplateResult { const disabled = this.selectedElements.length < 1; const targetLabel = this.targetGroup?.name || this.targetRole?.name; + return html``; } - row(item: User): SlottedTemplateResult[] { - const canImpersonate = - this.can(CapabilitiesEnum.CanImpersonate) && item.pk !== this.currentUser?.pk; + protected override row(item: User): SlottedTemplateResult[] { + const showImpersonate = this.canImpersonate && item.pk !== this.currentUser?.pk; + return [ html`
${item.username}
@@ -245,41 +272,29 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl Timestamp(item.lastLogin), html`
- - ${msg("Update")} - ${msg("Update User")} - - - - ${canImpersonate - ? html` - - ${msg("Impersonate")} - ${msg("Impersonate")} ${item.username} - - - - ` - : nothing} + + ${showImpersonate + ? html`` + : null}
`, ]; } - renderExpanded(item: User): TemplateResult { + protected override renderExpanded(item: User): TemplateResult { return html`
@@ -335,39 +350,94 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl
`; } - renderToolbar(): TemplateResult { + protected openAddUserToTargetGroupModal = () => { + const banner = this.targetGroup?.isSuperuser + ? html`
+ ${msg( + "Warning: This group is configured with superuser access. Added users will have superuser access.", + )} +
` + : nothing; + + return renderModal( + html`${banner} + `, + ); + }; + + protected openAddUserToTargetRoleModal = () => { + return renderModal( + html` + `, + ); + }; + + protected openNewUserToTargetGroupModal = () => { + const banner = this.targetGroup + ? html`
+ ${msg(str`This user will be added to the group "${this.targetGroup.name}".`)} +
` + : nothing; + + return renderModal( + html`${banner}`, + ); + }; + + protected openNewUserToTargetRoleModal = () => { + const banner = this.targetRole + ? html`
+ ${msg(str`This user will be added to the role "${this.targetRole.name}".`)} +
` + : nothing; + + return renderModal( + html`${banner}`, + ); + }; + + protected openNewServiceUserToTargetGroupModal = () => { + const banner = this.targetGroup + ? html`
+ ${msg(str`This user will be added to the group "${this.targetGroup.name}".`)} +
` + : nothing; + + return renderModal( + html`${banner}`, + { + closedBy: "none", + }, + ); + }; + + protected override renderToolbar(): TemplateResult { return html` ${this.targetGroup - ? html` - ${msg("Assign")} - ${msg("Assign Additional Users")} - ${this.targetGroup.isSuperuser - ? html` -
- ${msg( - "Warning: This group is configured with superuser access. Added users will have superuser access.", - )} -
- ` - : nothing} - - - - ` - : nothing} + ? html`` + : null} ${this.targetRole - ? html` - ${msg("Assign")} - ${msg("Assign Additional Users")} - - - - ` - : nothing} + ? html`` + : null} + + ${this.targetGroup + ? html`
  • + +
    • ` + : null} + ${this.targetRole + ? html`
  • + +
    • ` + : null} +
  • - - ${msg("Create User")} - ${msg("New User")} - ${this.targetGroup - ? html` -
    - ${msg( - str`This user will be added to the group "${this.targetGroup.name}".`, - )} -
    - - - ` - : nothing} - ${this.targetRole - ? html` -
    - ${msg( - str`This user will be added to the role "${this.targetRole.name}".`, - )} -
    - - - ` - : nothing} -     - ${msg("New user...")} - - -
    • -
  • - - ${msg("Create Service Account")} - ${msg("New Service Account")} - ${this.targetGroup - ? html` -
    - ${msg( - str`This user will be added to the group "${this.targetGroup.name}".`, - )} -
    - - ` - : nothing} - ${this.targetRole - ? html` -
    - ${msg( - str`This user will be added to the role "${this.targetRole.name}".`, - )} -
    - - ` - : nothing} - - ${msg("New service account...")} - -     + ${msg("New Service Account...")} +
    • @@ -462,7 +498,7 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl `; } - renderToolbarAfter(): TemplateResult { + protected override renderToolbarAfter(): TemplateResult { return html`
    @@ -497,6 +533,6 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl declare global { interface HTMLElementTagNameMap { "ak-user-related-list": RelatedUserList; - "ak-user-related-add": RelatedUserAdd; + "ak-add-related-user-form": AddRelatedUserForm; } } diff --git a/web/src/admin/lifecycle/LifecycleRuleForm.ts b/web/src/admin/lifecycle/LifecycleRuleForm.ts index 388a71c480..70df4d3f44 100644 --- a/web/src/admin/lifecycle/LifecycleRuleForm.ts +++ b/web/src/admin/lifecycle/LifecycleRuleForm.ts @@ -83,7 +83,7 @@ function formatContentTypePlaceholder(contentType: ContentTypeEnum): string { } @customElement("ak-lifecycle-rule-form") -export class LifecycleRuleForm extends ModelForm { +export class LifecycleRuleForm extends ModelForm { #targetSelectRef = createRef>(); #reviewerGroupsSelectRef = createRef>(); #reviewerUsersSelectRef = createRef>(); @@ -146,8 +146,8 @@ export class LifecycleRuleForm extends ModelForm { }); } - protected override serialize(): LifecycleRule | null { - const result = super.serialize(); + public override toJSON(): LifecycleRule | null { + const result = super.toJSON(); if (!result) { return null; diff --git a/web/src/admin/lifecycle/LifecycleRuleListPage.ts b/web/src/admin/lifecycle/LifecycleRuleListPage.ts index fa721ce920..eecaf42224 100644 --- a/web/src/admin/lifecycle/LifecycleRuleListPage.ts +++ b/web/src/admin/lifecycle/LifecycleRuleListPage.ts @@ -87,7 +87,7 @@ export class LifecycleRuleListPage extends TablePage { html`${item.gracePeriod}`, html`
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Lifecycle Rule")} { +export class ObjectReviewForm extends ModelForm { @property({ attribute: false }) public iteration: LifecycleIteration | null = null; @@ -26,8 +26,8 @@ export class ObjectReviewForm extends ModelForm { }); } - protected override serialize(): Review | null { - const review = super.serialize(); + public override toJSON(): Review | null { + const review = super.toJSON(); if (!review || !this.iteration) return null; diff --git a/web/src/admin/outposts/OutpostDeploymentModal.ts b/web/src/admin/outposts/OutpostDeploymentModal.ts index f091e7577a..dee3b77e45 100644 --- a/web/src/admin/outposts/OutpostDeploymentModal.ts +++ b/web/src/admin/outposts/OutpostDeploymentModal.ts @@ -89,7 +89,8 @@ export class OutpostDeploymentModal extends ModalButton { : nothing}
    -
    +
    + ${msg("Form actions")} -
    `; + `; } } diff --git a/web/src/admin/outposts/OutpostListPage.ts b/web/src/admin/outposts/OutpostListPage.ts index 7dbc938af9..b314f6cba6 100644 --- a/web/src/admin/outposts/OutpostListPage.ts +++ b/web/src/admin/outposts/OutpostListPage.ts @@ -126,7 +126,7 @@ export class OutpostListPage extends TablePage { >`, html`
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Outpost")} (item.component, { slot: "form", instancePk: item.pk, - actionLabel: msg("Update"), + submitLabel: msg("Save Changes"), headline: msg(str`Update ${item.verboseName}`, { id: "form.headline.update", }), diff --git a/web/src/admin/policies/BoundPoliciesList.ts b/web/src/admin/policies/BoundPoliciesList.ts index 6dbd800fd4..562871ec69 100644 --- a/web/src/admin/policies/BoundPoliciesList.ts +++ b/web/src/admin/policies/BoundPoliciesList.ts @@ -10,6 +10,7 @@ import "#elements/forms/ModalForm"; import { DEFAULT_CONFIG } from "#common/api/config"; import { PFSize } from "#common/enums"; +import { PolicyBindingCheckTarget, PolicyBindingCheckTargetToLabel } from "#common/policies/utils"; import { CustomFormElementTagName } from "#elements/forms/unsafe"; import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table"; @@ -18,7 +19,7 @@ import { StrictUnsafe } from "#elements/utils/unsafe"; import { PolicyBindingForm, PolicyBindingNotice } from "#admin/policies/PolicyBindingForm"; import { policyEngineModes } from "#admin/policies/PolicyEngineModes"; -import { PolicyBindingCheckTarget, PolicyBindingCheckTargetToLabel } from "#admin/policies/utils"; +import { UserForm } from "#admin/users/UserForm"; import { PoliciesApi, @@ -113,7 +114,7 @@ export class BoundPoliciesList extends ${StrictUnsafe(item.policyObj?.component, { slot: "form", instancePk: item.policyObj?.pk, - actionLabel: msg("Update"), + submitLabel: msg("Save Changes"), headline: msg(str`Update ${item.policyObj?.name}`, { id: "form.headline.update", }), @@ -125,7 +126,7 @@ export class BoundPoliciesList extends `; } else if (item.group) { return html` - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Group")} `; } else if (item.user) { - return html` - ${msg("Update")} - ${msg("Update User")} - - - `; + return html``; } return nothing; } @@ -184,7 +184,7 @@ export class BoundPoliciesList extends html`${item.timeout}`, html` ${this.getObjectEditButton(item)} - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Binding")} ${StrictUnsafe(this.bindingEditForm, { slot: "form", @@ -193,7 +193,7 @@ export class BoundPoliciesList extends typeNotices: this.typeNotices, targetPk: this.target || "", - actionLabel: msg("Update"), + submitLabel: msg("Save Changes"), headline: msg("Update Binding"), })}
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Google Workspace Provider")}
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update LDAP Provider")} diff --git a/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderGroupList.ts b/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderGroupList.ts index 903d2be696..6618f38d6e 100644 --- a/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderGroupList.ts +++ b/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderGroupList.ts @@ -1,6 +1,7 @@ import "#elements/forms/DeleteBulkForm"; import "#elements/forms/ModalForm"; import "#elements/sync/SyncObjectForm"; +import "#admin/common/ak-flow-search/ak-flow-search-no-default"; import { DEFAULT_CONFIG } from "#common/api/config"; diff --git a/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderUserList.ts b/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderUserList.ts index b486c291b4..5253f0535d 100644 --- a/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderUserList.ts +++ b/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderUserList.ts @@ -1,6 +1,7 @@ import "#elements/forms/DeleteBulkForm"; import "#elements/forms/ModalForm"; import "#elements/sync/SyncObjectForm"; +import "#admin/common/ak-flow-search/ak-flow-search-no-default"; import { DEFAULT_CONFIG } from "#common/api/config"; diff --git a/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderViewPage.ts b/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderViewPage.ts index d6096b7162..6f8ba63ca9 100644 --- a/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderViewPage.ts +++ b/web/src/admin/providers/microsoft_entra/MicrosoftEntraProviderViewPage.ts @@ -2,7 +2,8 @@ import "#admin/providers/microsoft_entra/MicrosoftEntraProviderForm"; import "#admin/providers/microsoft_entra/MicrosoftEntraProviderGroupList"; import "#admin/providers/microsoft_entra/MicrosoftEntraProviderUserList"; import "#admin/rbac/ObjectPermissionsPage"; -import "#components/events/ObjectChangelog"; +import "#admin/rbac/ObjectPermissionModal"; +import "#admin/events/ObjectChangelog"; import "#elements/Tabs"; import "#elements/buttons/ActionButton/index"; import "#elements/buttons/ModalButton"; @@ -205,7 +206,7 @@ export class MicrosoftEntraProviderViewPage extends AKElement {
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Microsoft Entra Provider")} { +export class OAuth2ProviderRedirectURI extends AKControlElement { static styles = [ PFInputGroup, PFFormControl, diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts b/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts index 96e16fa38e..476e1f33a3 100644 --- a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts +++ b/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts @@ -1,7 +1,8 @@ import "#admin/providers/RelatedApplicationButton"; import "#admin/providers/oauth2/OAuth2ProviderForm"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; import "#admin/rbac/ObjectPermissionsPage"; +import "#admin/rbac/ObjectPermissionModal"; import "#elements/CodeMirror"; import "#elements/EmptyState"; import "#elements/Tabs"; @@ -298,7 +299,7 @@ export class OAuth2ProviderViewPage extends AKElement {
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update OAuth2 Provider")}
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Proxy Provider")} { html`${item.host}`, html`
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Endpoint")} diff --git a/web/src/admin/providers/rac/RACProviderViewPage.ts b/web/src/admin/providers/rac/RACProviderViewPage.ts index fdf5a40175..6c1a199039 100644 --- a/web/src/admin/providers/rac/RACProviderViewPage.ts +++ b/web/src/admin/providers/rac/RACProviderViewPage.ts @@ -5,7 +5,7 @@ import "#admin/providers/rac/EndpointList"; import "#admin/providers/rac/RACProviderForm"; import "#admin/rbac/ObjectPermissionsPage"; import "#components/ak-status-label"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; import "#elements/CodeMirror"; import "#elements/Tabs"; import "#elements/buttons/ModalButton"; @@ -188,7 +188,7 @@ export class RACProviderViewPage extends AKElement {
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update RAC Provider")} diff --git a/web/src/admin/providers/radius/RadiusProviderFormForm.ts b/web/src/admin/providers/radius/RadiusProviderFormForm.ts index cb6cfb1291..6f0bdc53a3 100644 --- a/web/src/admin/providers/radius/RadiusProviderFormForm.ts +++ b/web/src/admin/providers/radius/RadiusProviderFormForm.ts @@ -8,7 +8,7 @@ import "#components/ak-text-input"; import "#elements/forms/FormGroup"; import "#elements/forms/HorizontalFormElement"; import "#elements/forms/SearchSelect/index"; -import "#admin/common/ak-license-notice"; +import "#elements/LicenseNotice"; import { propertyMappingsProvider, propertyMappingsSelector } from "./RadiusProviderFormHelpers.js"; diff --git a/web/src/admin/providers/radius/RadiusProviderViewPage.ts b/web/src/admin/providers/radius/RadiusProviderViewPage.ts index 32f3722f07..55e0fd27d1 100644 --- a/web/src/admin/providers/radius/RadiusProviderViewPage.ts +++ b/web/src/admin/providers/radius/RadiusProviderViewPage.ts @@ -1,7 +1,7 @@ import "#admin/providers/RelatedApplicationButton"; import "#admin/providers/radius/RadiusProviderForm"; import "#admin/rbac/ObjectPermissionsPage"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; import "#elements/CodeMirror"; import "#elements/Tabs"; import "#elements/buttons/ModalButton"; @@ -137,7 +137,7 @@ export class RadiusProviderViewPage extends AKElement {
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Radius Provider")} diff --git a/web/src/admin/providers/saml/SAMLProviderViewPage.ts b/web/src/admin/providers/saml/SAMLProviderViewPage.ts index 43f5a88e78..682cd0e9bc 100644 --- a/web/src/admin/providers/saml/SAMLProviderViewPage.ts +++ b/web/src/admin/providers/saml/SAMLProviderViewPage.ts @@ -1,7 +1,7 @@ import "#admin/providers/RelatedApplicationButton"; import "#admin/providers/saml/SAMLProviderForm"; import "#admin/rbac/ObjectPermissionsPage"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; import "#elements/CodeMirror"; import "#elements/EmptyState"; import "#elements/Tabs"; @@ -361,7 +361,7 @@ export class SAMLProviderViewPage extends AKElement {
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update SAML Provider")} diff --git a/web/src/admin/providers/scim/SCIMProviderFormForm.ts b/web/src/admin/providers/scim/SCIMProviderFormForm.ts index 8341606721..c230f716bd 100644 --- a/web/src/admin/providers/scim/SCIMProviderFormForm.ts +++ b/web/src/admin/providers/scim/SCIMProviderFormForm.ts @@ -7,7 +7,7 @@ import "#elements/forms/HorizontalFormElement"; import "#elements/forms/Radio"; import "#elements/forms/SearchSelect/index"; import "#elements/CodeMirror"; -import "#admin/common/ak-license-notice"; +import "#elements/LicenseNotice"; import "#components/ak-number-input"; import "#elements/utils/TimeDeltaHelp"; import "#components/ak-text-input"; diff --git a/web/src/admin/providers/scim/SCIMProviderGroupList.ts b/web/src/admin/providers/scim/SCIMProviderGroupList.ts index 5629a7b053..566b8a9ad5 100644 --- a/web/src/admin/providers/scim/SCIMProviderGroupList.ts +++ b/web/src/admin/providers/scim/SCIMProviderGroupList.ts @@ -1,6 +1,7 @@ import "#elements/forms/DeleteBulkForm"; import "#elements/forms/ModalForm"; import "#elements/sync/SyncObjectForm"; +import "#admin/common/ak-flow-search/ak-flow-search-no-default"; import { DEFAULT_CONFIG } from "#common/api/config"; diff --git a/web/src/admin/providers/scim/SCIMProviderUserList.ts b/web/src/admin/providers/scim/SCIMProviderUserList.ts index 24d9aaa6dc..f8bd40444a 100644 --- a/web/src/admin/providers/scim/SCIMProviderUserList.ts +++ b/web/src/admin/providers/scim/SCIMProviderUserList.ts @@ -1,6 +1,7 @@ import "#elements/forms/DeleteBulkForm"; import "#elements/forms/ModalForm"; import "#elements/sync/SyncObjectForm"; +import "#admin/common/ak-flow-search/ak-flow-search-no-default"; import { DEFAULT_CONFIG } from "#common/api/config"; diff --git a/web/src/admin/providers/scim/SCIMProviderViewPage.ts b/web/src/admin/providers/scim/SCIMProviderViewPage.ts index 06fbef9b10..2aa0477941 100644 --- a/web/src/admin/providers/scim/SCIMProviderViewPage.ts +++ b/web/src/admin/providers/scim/SCIMProviderViewPage.ts @@ -3,8 +3,9 @@ import "#admin/providers/scim/SCIMProviderForm"; import "#admin/providers/scim/SCIMProviderGroupList"; import "#admin/providers/scim/SCIMProviderUserList"; import "#admin/rbac/ObjectPermissionsPage"; +import "#admin/rbac/ObjectPermissionModal"; import "#components/ak-status-label"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; import "#elements/Tabs"; import "#elements/ak-mdx/index"; import "#elements/buttons/ActionButton/index"; @@ -247,7 +248,7 @@ export class SCIMProviderViewPage extends AKElement {
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update SCIM Provider")} diff --git a/web/src/admin/providers/ssf/SSFProviderViewPage.ts b/web/src/admin/providers/ssf/SSFProviderViewPage.ts index bbffb98ad9..55a4f2d2a0 100644 --- a/web/src/admin/providers/ssf/SSFProviderViewPage.ts +++ b/web/src/admin/providers/ssf/SSFProviderViewPage.ts @@ -1,7 +1,8 @@ import "#admin/providers/RelatedApplicationButton"; import "#admin/providers/ssf/SSFProviderFormPage"; import "#admin/providers/ssf/StreamTable"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; +import "#admin/rbac/ObjectPermissionModal"; import "#elements/CodeMirror"; import "#elements/EmptyState"; import "#elements/Tabs"; @@ -168,7 +169,7 @@ export class SSFProviderViewPage extends AKElement {
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update SSF Provider")} diff --git a/web/src/admin/providers/wsfed/WSFederationProviderViewPage.ts b/web/src/admin/providers/wsfed/WSFederationProviderViewPage.ts index df07c25078..f3c76ae7ff 100644 --- a/web/src/admin/providers/wsfed/WSFederationProviderViewPage.ts +++ b/web/src/admin/providers/wsfed/WSFederationProviderViewPage.ts @@ -1,7 +1,7 @@ import "#admin/providers/RelatedApplicationButton"; import "#admin/providers/wsfed/WSFederationProviderForm"; import "#admin/rbac/ObjectPermissionsPage"; -import "#components/events/ObjectChangelog"; +import "#admin/events/ObjectChangelog"; import "#elements/CodeMirror"; import "#elements/EmptyState"; import "#elements/Tabs"; @@ -293,7 +293,7 @@ export class WSFederationProviderViewPage extends AKElement {
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update WS-Federation Provider")} diff --git a/web/src/admin/rbac/InitialPermissionsListPage.ts b/web/src/admin/rbac/InitialPermissionsListPage.ts index 875fdec262..4336d53d34 100644 --- a/web/src/admin/rbac/InitialPermissionsListPage.ts +++ b/web/src/admin/rbac/InitialPermissionsListPage.ts @@ -75,7 +75,7 @@ export class InitialPermissionsListPage extends TablePage { html`${item.name}`, html`
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Initial Permissions")} diff --git a/web/src/admin/rbac/PermissionSelectForm.ts b/web/src/admin/rbac/PermissionSelectForm.ts new file mode 100644 index 0000000000..0f546db506 --- /dev/null +++ b/web/src/admin/rbac/PermissionSelectForm.ts @@ -0,0 +1,52 @@ +import "#elements/buttons/SpinnerButton/index"; + +import { DEFAULT_CONFIG } from "#common/api/config"; +import { groupBy } from "#common/utils"; + +import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table"; +import { SlottedTemplateResult } from "#elements/types"; + +import { Permission, RbacApi } from "@goauthentik/api"; + +import { msg } from "@lit/localize"; +import { html } from "lit"; +import { customElement } from "lit/decorators.js"; + +@customElement("ak-rbac-permission-select-form") +export class PermissionSelectForm extends Table { + public override checkbox = true; + public override checkboxChip = true; + + protected override searchEnabled = true; + + public override order = "content_type__app_label,content_type__model"; + + async apiEndpoint(): Promise> { + return new RbacApi(DEFAULT_CONFIG).rbacPermissionsList(await this.defaultEndpointConfig()); + } + + groupBy(items: Permission[]): [string, Permission[]][] { + return groupBy(items, (perm) => { + return perm.appLabelVerbose; + }); + } + + protected columns: TableColumn[] = [ + [msg("Name"), "codename"], + [msg("Model"), ""], + ]; + + protected row(item: Permission): SlottedTemplateResult[] { + return [html`
    ${item.name}
    `, html`${item.modelVerbose}`]; + } + + protected renderSelectedChip(item: Permission): SlottedTemplateResult { + return item.name; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ak-rbac-permission-select-form": PermissionSelectForm; + } +} diff --git a/web/src/admin/rbac/PermissionSelectModal.ts b/web/src/admin/rbac/PermissionSelectModal.ts deleted file mode 100644 index b05e36ca43..0000000000 --- a/web/src/admin/rbac/PermissionSelectModal.ts +++ /dev/null @@ -1,94 +0,0 @@ -import "#elements/buttons/SpinnerButton/index"; - -import { DEFAULT_CONFIG } from "#common/api/config"; -import { groupBy } from "#common/utils"; - -import { PaginatedResponse, TableColumn } from "#elements/table/Table"; -import { TableModal } from "#elements/table/TableModal"; -import { SlottedTemplateResult } from "#elements/types"; - -import { Permission, RbacApi } from "@goauthentik/api"; - -import { msg } from "@lit/localize"; -import { CSSResult, html, TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators.js"; - -import PFBanner from "@patternfly/patternfly/components/Banner/banner.css"; - -@customElement("ak-rbac-permission-select-table") -export class PermissionSelectModal extends TableModal { - checkbox = true; - checkboxChip = true; - - protected override searchEnabled = true; - - @property() - confirm!: (selectedItems: Permission[]) => Promise; - - order = "content_type__app_label,content_type__model"; - - static styles: CSSResult[] = [...super.styles, PFBanner]; - - async apiEndpoint(): Promise> { - return new RbacApi(DEFAULT_CONFIG).rbacPermissionsList(await this.defaultEndpointConfig()); - } - - groupBy(items: Permission[]): [string, Permission[]][] { - return groupBy(items, (perm) => { - return perm.appLabelVerbose; - }); - } - - protected columns: TableColumn[] = [ - [msg("Name"), "codename"], - [msg("Model"), ""], - ]; - - row(item: Permission): SlottedTemplateResult[] { - return [ - html`
    -
    ${item.name}
    -
    `, - html`${item.modelVerbose}`, - ]; - } - - renderSelectedChip(item: Permission): TemplateResult { - return html`${item.name}`; - } - - renderModalInner(): TemplateResult { - return html`
    -
    -

    ${msg("Select permissions to assign")}

    -
    -
    -
    ${this.renderTable()}
    -
    - { - return this.confirm(this.selectedElements).then(() => { - this.open = false; - }); - }} - class="pf-m-primary" - > - ${msg("Add")}   - { - this.open = false; - }} - class="pf-m-secondary" - > - ${msg("Cancel")} - -
    `; - } -} - -declare global { - interface HTMLElementTagNameMap { - "ak-rbac-permission-select-table": PermissionSelectModal; - } -} diff --git a/web/src/admin/reports/ExportButton.ts b/web/src/admin/reports/ExportButton.ts index 1e48118142..ef0648c430 100644 --- a/web/src/admin/reports/ExportButton.ts +++ b/web/src/admin/reports/ExportButton.ts @@ -110,7 +110,7 @@ export class ExportButton extends WithCapabilitiesConfig( this.params = params; }); }} - action=${msg("Start export")} + action=${msg("Start Export")} actionLevel="pf-m-primary" ?non-submittable=${!this.can(CapabilitiesEnum.CanSaveReports)} > diff --git a/web/src/admin/roles/RelatedRoleList.ts b/web/src/admin/roles/RelatedRoleList.ts index 9d241ee0a9..1e45dd6459 100644 --- a/web/src/admin/roles/RelatedRoleList.ts +++ b/web/src/admin/roles/RelatedRoleList.ts @@ -9,11 +9,14 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js"; import { DEFAULT_CONFIG } from "#common/api/config"; -import { Form } from "#elements/forms/Form"; +import { AKFormSubmitEvent, Form } from "#elements/forms/Form"; +import { renderModal } from "#elements/modals/utils"; import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table"; import { SlottedTemplateResult } from "#elements/types"; import { ifPresent } from "#elements/utils/attributes"; +import { RoleForm } from "#admin/roles/RoleForm"; + import { Group, RbacApi, Role, User } from "@goauthentik/api"; import { msg, str } from "@lit/localize"; @@ -22,6 +25,9 @@ import { customElement, property, state } from "lit/decorators.js"; @customElement("ak-role-related-add") export class RelatedRoleAdd extends Form<{ roles: string[] }> { + public override entitySingular = msg("Role"); + public override entityPlural = msg("Roles"); + #api = new RbacApi(DEFAULT_CONFIG); @property({ attribute: false }) @@ -49,21 +55,31 @@ export class RelatedRoleAdd extends Form<{ roles: string[] }> { return data; } + protected openRolesSelectionModal = () => { + return renderModal(html` + ) => { + this.rolesToAdd = event.target.toJSON(); + }} + > + + `); + }; + protected override renderForm(): TemplateResult { return html`
    - { - this.rolesToAdd = items; - return Promise.resolve(); - }} + - + + + +
    ${this.rolesToAdd.map((role) => { @@ -143,6 +159,14 @@ export class RelatedRoleList extends Table { ]; } + protected openAddExistingRoleModal = () => { + if (!this.targetUser) return; + + return renderModal( + html``, + ); + }; + renderToolbarSelected(): SlottedTemplateResult { // Don't render Remove button in showInherited mode (view-only) if (this.showInherited) { @@ -192,7 +216,7 @@ export class RelatedRoleList extends Table { return false; } - row(item: Role): SlottedTemplateResult[] { + protected row(item: Role): SlottedTemplateResult[] { const inherited = this.showInherited && this.isInherited(item); const inheritedTooltip = this.targetGroup ? msg("Inherited from parent group") @@ -212,46 +236,43 @@ export class RelatedRoleList extends Table { return [ nameCell, - html` - ${msg("Update")} - ${msg("Update Role")} - - - `, + html``, ]; } - renderToolbar(): TemplateResult { + renderToolbar(): SlottedTemplateResult { // Hide add buttons in showInherited mode (view-only) if (this.showInherited || this.targetGroup) { - return html`${super.renderToolbar()}`; + return super.renderToolbar(); } - return html` - ${this.targetUser - ? html` - ${msg("Add")} - ${msg("Add Role")} - - - - ` - : nothing} - - ${msg("Create")} - ${msg("Create Role")} - - - - ${super.renderToolbar()} - `; + + return [ + this.targetUser + ? html`` + : nothing, + html` `, + super.renderToolbar(), + ]; } } diff --git a/web/src/admin/roles/RoleForm.ts b/web/src/admin/roles/RoleForm.ts index 4084902360..dc0f72b129 100644 --- a/web/src/admin/roles/RoleForm.ts +++ b/web/src/admin/roles/RoleForm.ts @@ -2,6 +2,7 @@ import "#elements/chips/Chip"; import "#elements/chips/ChipGroup"; import "#elements/forms/HorizontalFormElement"; import "#elements/forms/SearchSelect/index"; +import "#components/ak-text-input"; import { DEFAULT_CONFIG } from "#common/api/config"; @@ -16,6 +17,9 @@ import { ifDefined } from "lit/directives/if-defined.js"; @customElement("ak-role-form") export class RoleForm extends ModelForm { + public override entitySingular = msg("Role"); + public override entityPlural = msg("Roles"); + loadInstance(pk: string): Promise { return new RbacApi(DEFAULT_CONFIG).rbacRolesRetrieve({ uuid: pk, @@ -41,14 +45,17 @@ export class RoleForm extends ModelForm { } protected override renderForm(): TemplateResult { - return html` - - `; + return html``; } } diff --git a/web/src/admin/roles/RoleListPage.ts b/web/src/admin/roles/RoleListPage.ts index f07d0b605b..de5b3cc154 100644 --- a/web/src/admin/roles/RoleListPage.ts +++ b/web/src/admin/roles/RoleListPage.ts @@ -13,30 +13,33 @@ import { SlottedTemplateResult } from "#elements/types"; import { setPageDetails } from "#components/ak-page-navbar"; +import { RoleForm } from "#admin/roles/RoleForm"; + import { RbacApi, Role } from "@goauthentik/api"; import { msg } from "@lit/localize"; -import { html, HTMLTemplateResult, PropertyValues, TemplateResult } from "lit"; +import { html, PropertyValues, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators.js"; @customElement("ak-role-list") export class RoleListPage extends TablePage { - checkbox = true; - clearOnRefresh = true; protected override searchEnabled = true; - public pageTitle = msg("Roles"); - public pageDescription = msg( + + public override checkbox = true; + public override clearOnRefresh = true; + public override pageTitle = msg("Roles"); + public override pageDescription = msg( "Manage roles which grant permissions to objects within authentik.", ); - public pageIcon = "fa fa-lock"; + public override pageIcon = "fa fa-lock"; - @property() - order = "name"; + @property({ type: String }) + public order = "name"; @state() - hideManaged = getURLParam("hideManaged", true); + protected hideManaged = getURLParam("hideManaged", true); - async apiEndpoint(): Promise> { + protected async apiEndpoint(): Promise> { return new RbacApi(DEFAULT_CONFIG).rbacRolesList({ ...(await this.defaultEndpointConfig()), managedIsnull: this.hideManaged ? true : undefined, @@ -49,7 +52,7 @@ export class RoleListPage extends TablePage { [msg("Actions"), null, msg("Row Actions")], ]; - renderToolbarSelected(): TemplateResult { + protected override renderToolbarSelected(): SlottedTemplateResult { const disabled = this.selectedElements.length < 1; return html` { `; } - render(): HTMLTemplateResult { + protected override render(): SlottedTemplateResult { return html`
    ${this.renderTable()}
    `; @@ -81,29 +84,19 @@ export class RoleListPage extends TablePage { return [ html`${item.name}`, html`
    - - ${msg("Update")} - ${msg("Update Role")} - - - +
    `, ]; } renderObjectCreate(): TemplateResult { - return html` - - ${msg("Create")} - ${msg("Create Role")} - - - - `; + return html``; } renderToolbarAfter(): TemplateResult { diff --git a/web/src/admin/roles/RolePermissionForm.ts b/web/src/admin/roles/RolePermissionForm.ts index 4b288ebfc2..c29411d8ff 100644 --- a/web/src/admin/roles/RolePermissionForm.ts +++ b/web/src/admin/roles/RolePermissionForm.ts @@ -1,4 +1,4 @@ -import "#admin/rbac/PermissionSelectModal"; +import "#admin/rbac/PermissionSelectForm"; import "#components/ak-toggle-group"; import "#elements/chips/Chip"; import "#elements/chips/ChipGroup"; @@ -8,7 +8,9 @@ import "#elements/forms/SearchSelect/index"; import { DEFAULT_CONFIG } from "#common/api/config"; +import { AKFormSubmitEvent } from "#elements/forms/Form"; import { ModelForm } from "#elements/forms/ModelForm"; +import { renderModal } from "#elements/modals/utils"; import { Permission, RbacApi } from "@goauthentik/api"; @@ -55,23 +57,33 @@ export class RolePermissionForm extends ModelForm this.permissionsToAdd = []; } + protected openSelectPermissionsModal = () => { + return renderModal(html` + ) => { + this.permissionsToAdd = event.target.toJSON(); + }} + > + + `); + }; + protected override renderForm(): TemplateResult { return html`
    - { - this.permissionsToAdd = items; - this.requestUpdate(); - return Promise.resolve(); - }} + - + + + + +
    ${this.permissionsToAdd.map((permission) => { diff --git a/web/src/admin/roles/RoleViewPage.ts b/web/src/admin/roles/RoleViewPage.ts index 25cbee10fc..00f34c3ae3 100644 --- a/web/src/admin/roles/RoleViewPage.ts +++ b/web/src/admin/roles/RoleViewPage.ts @@ -3,8 +3,8 @@ import "#admin/groups/RelatedUserList"; import "#admin/rbac/ObjectPermissionsPage"; import "#admin/lifecycle/ObjectLifecyclePage"; import "#admin/roles/RoleForm"; -import "#components/events/ObjectChangelog"; -import "#components/events/UserEvents"; +import "#admin/events/ObjectChangelog"; +import "#admin/events/UserEvents"; import "#elements/Tabs"; import "#elements/forms/ModalForm"; @@ -82,7 +82,7 @@ export class RoleViewPage extends WithLicenseSummary(AKElement) { renderUpdateControl(role: Role) { return html`
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Role")} diff --git a/web/src/admin/sources/SourceListPage.ts b/web/src/admin/sources/SourceListPage.ts index 7a60b63223..962f9d56b1 100644 --- a/web/src/admin/sources/SourceListPage.ts +++ b/web/src/admin/sources/SourceListPage.ts @@ -93,12 +93,12 @@ export class SourceListPage extends TablePage { ${StrictUnsafe(item.component, { slot: "form", instancePk: item.slug, - actionLabel: msg("Update"), + submitLabel: msg("Save Changes"), headline: msg(str`Update ${item.verboseName}`, { id: "form.headline.update", }), })} - ${msg("Update")} + ${msg("Save Changes")}
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Kerberos Source")}
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update LDAP Source")}
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update OAuth Source")}
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Plex Source")}
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update SAML Source")}
    - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update SCIM Source")}
    - ${msg("Update")} - ${msg("Update Telegram Source")} + ${msg("Save Changes")} + ${msg("Update Telegram Source")} { ${StrictUnsafe(item.component, { slot: "form", instancePk: item.pk, - actionLabel: msg("Update"), + submitLabel: msg("Save Changes"), headline: msg(str`Update ${item.verboseName}`, { id: "form.headline.update", }), diff --git a/web/src/admin/stages/StageWizard.ts b/web/src/admin/stages/StageWizard.ts index 13de703c9e..61d1a3bc5d 100644 --- a/web/src/admin/stages/StageWizard.ts +++ b/web/src/admin/stages/StageWizard.ts @@ -1,5 +1,5 @@ import "#admin/stages/register"; -import "#admin/common/ak-license-notice"; +import "#elements/LicenseNotice"; import "#elements/wizard/FormWizardPage"; import "#elements/wizard/TypeCreateWizardPage"; import "#elements/wizard/Wizard"; diff --git a/web/src/admin/stages/invitation/InvitationListPage.ts b/web/src/admin/stages/invitation/InvitationListPage.ts index a962fd2f81..b544fdf3fc 100644 --- a/web/src/admin/stages/invitation/InvitationListPage.ts +++ b/web/src/admin/stages/invitation/InvitationListPage.ts @@ -125,7 +125,7 @@ export class InvitationListPage extends TablePage { ${item.createdBy.name}`, html`${item.expires?.toLocaleString() || msg("-")}`, html` - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Invitation")} - +}) => { + return html` ${brandHasRecoveryFlow ? html` @@ -88,6 +92,7 @@ export const renderRecoveryButtons = ({ : html`

    ${msg("To create a recovery link, set a recovery flow for the current brand.")}

    `}`; +}; const recoveryButtonStyles = css` #recovery-request-buttons { @@ -106,10 +111,18 @@ const recoveryButtonStyles = css` export class UserListPage extends WithBrandConfig( WithCapabilitiesConfig(WithSession(TablePage)), ) { - expandable = true; - checkbox = true; - clearOnRefresh = true; - supportsQL = true; + static styles: CSSResult[] = [ + ...TablePage.styles, + PFDescriptionList, + PFCard, + PFAlert, + recoveryButtonStyles, + ]; + + public override expandable = true; + public override checkbox = true; + public override clearOnRefresh = true; + public override supportsQL = true; protected override searchEnabled = true; public override searchPlaceholder = msg("Search by username, email, etc..."); @@ -131,14 +144,6 @@ export class UserListPage extends WithBrandConfig( @state() userPaths?: UserPath; - static styles: CSSResult[] = [ - ...TablePage.styles, - PFDescriptionList, - PFCard, - PFAlert, - recoveryButtonStyles, - ]; - constructor() { super(); const defaultPath = DefaultUIConfig.defaults.userPath; @@ -148,6 +153,14 @@ export class UserListPage extends WithBrandConfig( } } + protected canImpersonate = false; + + public override connectedCallback(): void { + super.connectedCallback(); + + this.canImpersonate = this.can(CapabilitiesEnum.CanImpersonate); + } + async apiEndpoint(): Promise> { const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList({ ...(await this.defaultEndpointConfig()), @@ -177,7 +190,7 @@ export class UserListPage extends WithBrandConfig( [msg("Actions"), null, msg("Row Actions")], ]; - renderToolbarSelected(): TemplateResult { + protected override renderToolbarSelected(): TemplateResult { const disabled = this.selectedElements.length < 1; const { currentUser, originalUser } = this; @@ -230,7 +243,7 @@ export class UserListPage extends WithBrandConfig( `; } - renderToolbarAfter(): TemplateResult { + protected override renderToolbarAfter(): TemplateResult { return html`
    @@ -267,11 +280,12 @@ export class UserListPage extends WithBrandConfig(
    `; } - row(item: User): SlottedTemplateResult[] { + protected row(item: User): SlottedTemplateResult[] { const { currentUser } = this; - const impersonationVisible = - this.can(CapabilitiesEnum.CanImpersonate) && currentUser && item.pk !== currentUser.pk; + const showImpersonation = this.canImpersonate && currentUser && item.pk !== currentUser.pk; + + const displayName = formatUserDisplayName(item); return [ html` @@ -282,36 +296,29 @@ export class UserListPage extends WithBrandConfig( Timestamp(item.lastLogin), html`${userTypeToLabel(item.type)}`, html`
    - - ${msg("Update")} - ${msg("Update User")} - - - - ${impersonationVisible - ? html` - - ${msg("Impersonate")} - ${msg("Impersonate")} ${item.username} - - - - ` - : nothing} + + ${showImpersonation + ? html`` + : null}
    `, ]; } @@ -372,22 +379,27 @@ export class UserListPage extends WithBrandConfig( `; } + protected openNewUserModal = () => { + const form = new UserForm(); + + form.defaultPath = this.activePath; + + form.showModal(); + }; + renderObjectCreate(): TemplateResult { return html` - - ${msg("Create User")} - ${msg("New User")} - - - - - ${msg("Create Service Account")} - ${msg("New Service Account")} - - - + + { return new CoreApi(DEFAULT_CONFIG).coreUsersExportCreate(params); diff --git a/web/src/admin/users/UserPasswordForm.ts b/web/src/admin/users/UserPasswordForm.ts index 69c58eabff..cc1b670ea5 100644 --- a/web/src/admin/users/UserPasswordForm.ts +++ b/web/src/admin/users/UserPasswordForm.ts @@ -4,6 +4,7 @@ import "#elements/forms/HorizontalFormElement"; import { DEFAULT_CONFIG } from "#common/api/config"; import { Form } from "#elements/forms/Form"; +import { FocusTarget } from "#elements/utils/focus"; import { CoreApi, UserPasswordSetRequest } from "@goauthentik/api"; @@ -14,6 +15,12 @@ import { ifDefined } from "lit/directives/if-defined.js"; @customElement("ak-user-password-form") export class UserPasswordForm extends Form { + public override submitLabel = msg("Set Password"); + + protected autofocusTarget = new FocusTarget(); + + public override focus = this.autofocusTarget.focus; + //#region Properties @property({ type: Number }) @@ -47,7 +54,16 @@ export class UserPasswordForm extends Form { return msg("Successfully updated password."); } - public override async send(data: UserPasswordSetRequest): Promise { + public override connectedCallback(): void { + super.connectedCallback(); + this.addEventListener("focus", this.autofocusTarget.toEventListener()); + } + + public override firstUpdated(): void { + this.focus(); + } + + protected override async send(data: UserPasswordSetRequest): Promise { return new CoreApi(DEFAULT_CONFIG).coreUsersSetPasswordCreate({ id: this.instancePk || 0, userPasswordSetRequest: data, @@ -57,7 +73,7 @@ export class UserPasswordForm extends Form { //#region Render protected override renderForm(): TemplateResult { - return html` ${this.username + return html`${this.username ? html` { - - ${msg("Update")} - ${msg("Update User")} - - - + - ${canImpersonate - ? html` - - ${msg("Impersonate")} - ${msg("Impersonate")} ${user.username} - - - - ` - : nothing} + ${showImpersonate + ? html`` + : null}
    `; } diff --git a/web/src/common/api/middleware.ts b/web/src/common/api/middleware.ts index 3e9e014fe8..feb7061d1b 100644 --- a/web/src/common/api/middleware.ts +++ b/web/src/common/api/middleware.ts @@ -1,4 +1,5 @@ import { AKRequestPostEvent, APIRequestInfo } from "#common/api/events"; +import { AKEnterpriseRefreshEvent, AKRefreshEvent } from "#common/events"; import { MessageLevel } from "#common/messages"; import { formatAcceptLanguageHeader } from "#common/ui/locale/utils"; import { getCookie } from "#common/utils"; @@ -104,19 +105,24 @@ export class LocaleMiddleware implements Middleware, Disposable { export class DevRepeatedRequestsMiddleware implements Middleware, Disposable { #requests: string[] = []; #counts = new Map(); + #warnings = new Set(); #logger = ConsoleLogger.prefix("repeated-requests-middleware"); - #navigationHandler = () => { + clear = () => { + this.#logger.debug("Clearing count"); this.#requests = []; this.#counts.clear(); + this.#warnings.clear(); }; constructor(protected readonly maxRequests: number = 10) { - window.addEventListener("hashchange", this.#navigationHandler); + window.addEventListener("hashchange", this.clear); + window.addEventListener(AKRefreshEvent.eventName, this.clear); + window.addEventListener(AKEnterpriseRefreshEvent.eventName, this.clear); } public [Symbol.dispose]() { - window.removeEventListener("hashchange", this.#navigationHandler); + window.removeEventListener("hashchange", this.clear); } public async pre(context: RequestContext): Promise { @@ -130,13 +136,17 @@ export class DevRepeatedRequestsMiddleware implements Middleware, Disposable { this.#counts.set(reqSig, count); this.#requests.push(reqSig); - if (count > 2) { + if (count > 2 && !this.#warnings.has(reqSig)) { + this.#warnings.add(reqSig); + + const formattedURL = URL.canParse(reqSig) ? new URL(reqSig).pathname : reqSig; + showMessage( { level: MessageLevel.warning, message: "[Dev] Consecutive requests detected", description: html`${count} identical requests to - 
    ${reqSig}
    `, + 
    ${formattedURL}
    `, }, true, ); @@ -150,6 +160,7 @@ export class DevRepeatedRequestsMiddleware implements Middleware, Disposable { if (removedCount === 1) { this.#counts.delete(removed); + this.#warnings.delete(removed); } else { this.#counts.set(removed, removedCount - 1); } diff --git a/web/src/common/collections.ts b/web/src/common/collections.ts new file mode 100644 index 0000000000..1f5971a359 --- /dev/null +++ b/web/src/common/collections.ts @@ -0,0 +1,13 @@ +/** + * Given an array or length, return logical index of the element at the given delta. + * This is effectively a modulo loop, allowing for positive and negative deltas. + */ +export function torusIndex(lengthLike: number | ArrayLike, delta: number): number { + const length = typeof lengthLike === "number" ? lengthLike : lengthLike.length; + + if (delta < 0) { + return (length + delta) % length; + } + + return ((delta % length) + length) % length; +} diff --git a/web/src/common/errors/network.ts b/web/src/common/errors/network.ts index 60715a174b..e8631b7ee5 100644 --- a/web/src/common/errors/network.ts +++ b/web/src/common/errors/network.ts @@ -283,13 +283,19 @@ export async function parseAPIResponseError( * We can still show the error message, to at least give the user some feedback. */ export function pluckFallbackFieldErrors(parsedError: APIError): string[] { + let fallback: string[] = []; + for (const [fieldName, fieldErrors] of Object.entries(parsedError)) { if (Array.isArray(fieldErrors)) { return [`${sentenceCase(fieldName)}: ${fieldErrors.join(", ")}`]; } + + if (typeof fieldErrors === "string") { + fallback = [`${sentenceCase(fieldName)}: ${fieldErrors}`]; + } } - return []; + return fallback; } //#endregion diff --git a/web/src/common/objects.ts b/web/src/common/objects.ts new file mode 100644 index 0000000000..8d826011c5 --- /dev/null +++ b/web/src/common/objects.ts @@ -0,0 +1,59 @@ +/** + * @file Object utilities. + */ + +/** + * Utility to remove a key from an object, returning a new object. This is used to remove error keys when a form is updated. + * + * @param input The object to remove the key from. + * @param keyToDelete The key to remove from the object. + * @returns A new object with the key removed, or undefined if the input is falsy. + */ +export function omitKeys( + input: T, + ...omittedKeys: K[] +): Omit | undefined { + if (!input) { + return undefined; + } + + const result: Partial = {}; + const omittedKeysSet = new Set(omittedKeys); + + for (const [key, value] of Object.entries(input)) { + if (omittedKeysSet.has(key as K)) { + continue; + } + + // Skip if value is undefined or empty array. + const empty = typeof value === "undefined" || (Array.isArray(value) && value.length === 0); + + if (empty) { + continue; + } + + result[key as keyof T] = value; + } + + return result as Omit; +} + +/** + * Given an object and a list of keys, trim the string values of those keys + * in the object and return a new object with the trimmed values. Non-string values are returned as-is. + * + * @param target The object to trim values from. + * @param keys The keys of the object to trim. + * @returns A new object with the specified keys trimmed. + */ +export function trimMany(target: T, ...keys: K[]): Pick { + const output = {} as Record; + + for (const key of keys) { + const value = target[key]; + + output[key] = typeof value === "string" ? value.trim() : value; + } + + return output as Pick; +} diff --git a/web/src/admin/policies/utils.ts b/web/src/common/policies/utils.ts similarity index 100% rename from web/src/admin/policies/utils.ts rename to web/src/common/policies/utils.ts diff --git a/web/src/common/theme.ts b/web/src/common/theme.ts index 30b6962b05..6bc5717d79 100644 --- a/web/src/common/theme.ts +++ b/web/src/common/theme.ts @@ -371,21 +371,4 @@ export function applyBackgroundImageProperty( target.style.setProperty(AKBackgroundImageProperty, `url("${nextURL.href}")`); } -/** - * Returns the root interface element of the page. - * - * @deprecated Use context controllers to access the interface root instead. - */ -export function rootInterface(): T { - const element = document.body.querySelector("[data-test-id=interface-root]"); - - if (!element) { - throw new Error( - `Could not find root interface element. Was this element added before the parent interface element?`, - ); - } - - return element; -} - //#endregion diff --git a/web/src/common/users.ts b/web/src/common/users.ts index 7c9a260a02..9c020f2197 100644 --- a/web/src/common/users.ts +++ b/web/src/common/users.ts @@ -11,10 +11,12 @@ export interface ClientSessionPermissions { accessAdmin: boolean; } +export type UserLike = Pick; + /** * The display name of the current user, according to their UI config settings. */ -export function formatUserDisplayName(user: UserSelf | null, uiConfig?: UIConfig): string { +export function formatUserDisplayName(user: UserLike | null, uiConfig?: UIConfig): string { if (!user) return ""; const label = match(uiConfig?.navbar.userDisplay) diff --git a/web/src/components/ak-multi-select.ts b/web/src/components/ak-multi-select.ts index 1beb3ed440..c854812024 100644 --- a/web/src/components/ak-multi-select.ts +++ b/web/src/components/ak-multi-select.ts @@ -1,6 +1,6 @@ import "#elements/forms/HorizontalFormElement"; -import { AkControlElement } from "#elements/AkControlElement"; +import { AKControlElement } from "#elements/ControlElement"; import { css, html, nothing, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators.js"; @@ -25,7 +25,7 @@ const selectStyles = css` * @part select - The select itself, to override the height specified above. */ @customElement("ak-multi-select") -export class AkMultiSelect extends AkControlElement { +export class AkMultiSelect extends AKControlElement { static styles = [PFForm, PFFormControl, selectStyles]; /** diff --git a/web/src/components/ak-nav-buttons.ts b/web/src/components/ak-nav-buttons.ts index a094a130e8..43c2a91cf3 100644 --- a/web/src/components/ak-nav-buttons.ts +++ b/web/src/components/ak-nav-buttons.ts @@ -74,7 +74,17 @@ export class NavigationButtons extends WithNotifications(WithSession(AKElement)) content=${msg("API Drawer")} trigger="api-drawer-toggle-button" > - +
    `; @@ -214,6 +224,7 @@ export class NavigationButtons extends WithNotifications(WithSession(AKElement))
    ` : nothing} ${this.renderAvatar()} +
    `; } } diff --git a/web/src/components/ak-page-navbar.css b/web/src/components/ak-page-navbar.css index 8d90e69ba0..613dda4ee0 100644 --- a/web/src/components/ak-page-navbar.css +++ b/web/src/components/ak-page-navbar.css @@ -120,7 +120,7 @@ @media (width >= 769px) { align-content: center; padding-block: var(--pf-global--spacer--md); - padding-inline-end: var(--pf-global--spacer--xl); + padding-inline-end: var(--pf-global--spacer--lg); } } } diff --git a/web/src/components/ak-page-navbar.ts b/web/src/components/ak-page-navbar.ts index ea99024c23..945093a9f3 100644 --- a/web/src/components/ak-page-navbar.ts +++ b/web/src/components/ak-page-navbar.ts @@ -221,6 +221,7 @@ export class AKPageNavbar > ${msg("User interface")} +
    diff --git a/web/src/components/ak-search-ql/index.ts b/web/src/components/ak-search-ql/index.ts index 64c9a610e6..87e7a744dc 100644 --- a/web/src/components/ak-search-ql/index.ts +++ b/web/src/components/ak-search-ql/index.ts @@ -1,11 +1,12 @@ import "#elements/buttons/Dropdown"; +import { torusIndex } from "#common/collections"; import { StripHTMLTrustPolicy } from "#common/purify"; -import { rootInterface } from "#common/theme"; import { FormAssociated, FormAssociatedElement } from "#elements/forms/form-associated-element"; import { PaginatedResponse } from "#elements/table/Table"; import { ifPresent } from "#elements/utils/attributes"; +import { resolveInterface } from "#elements/utils/render-roots"; import Styles from "#components/ak-search-ql/styles.css"; @@ -33,20 +34,6 @@ export class QL extends DjangoQL { } } -/** - * Given an array or length, return logical index of the element at the given delta. - * This is effectively a modulo loop, allowing for positive and negative deltas. - */ -function torusIndex(lengthLike: number | ArrayLike, delta: number): number { - const length = typeof lengthLike === "number" ? lengthLike : lengthLike.length; - - if (delta < 0) { - return (length + delta) % length; - } - - return ((delta % length) + length) % length; -} - @customElement("ak-search-ql") export class QLSearch extends FormAssociatedElement implements FormAssociated { static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; @@ -143,8 +130,7 @@ export class QLSearch extends FormAssociatedElement implements FormAssoc public override connectedCallback() { super.connectedCallback(); - this.#scrollContainer = - rootInterface().renderRoot.querySelector("#main-content"); + this.#scrollContainer = resolveInterface().renderRoot.querySelector("#main-content"); this.#scrollContainer?.addEventListener("scroll", this.#updateDropdownPosition, { passive: true, diff --git a/web/src/components/ak-slug-input.ts b/web/src/components/ak-slug-input.ts index e26b01b8dd..f39434a673 100644 --- a/web/src/components/ak-slug-input.ts +++ b/web/src/components/ak-slug-input.ts @@ -1,6 +1,7 @@ import { HorizontalLightComponent } from "./HorizontalLightComponent.js"; import { bound } from "#elements/decorators/bound"; +import { ifPresent } from "#elements/utils/attributes"; import { kebabCase } from "change-case"; @@ -50,6 +51,9 @@ export class AkSlugInput extends HorizontalLightComponent { @query("input") private input!: HTMLInputElement; + @property({ type: String }) + public placeholder: string | null = null; + #origin?: HTMLInputElement | null; #touched: boolean = false; @@ -131,6 +135,7 @@ export class AkSlugInput extends HorizontalLightComponent { value=${ifDefined(this.value)} class="pf-c-form-control" ?required=${this.required} + placeholder=${ifPresent(this.placeholder)} />`; } diff --git a/web/src/components/ak-wizard/WizardContexts.ts b/web/src/components/ak-wizard/WizardContexts.ts index 51ae845d86..af3050c1dc 100644 --- a/web/src/components/ak-wizard/WizardContexts.ts +++ b/web/src/components/ak-wizard/WizardContexts.ts @@ -1,4 +1,4 @@ -import type { WizardStepState } from "./types.js"; +import type { WizardStepState } from "./shared.js"; import { createContext } from "@lit/context"; diff --git a/web/src/components/ak-wizard/WizardStep.ts b/web/src/components/ak-wizard/WizardStep.ts index 76050ea87d..db78b2c43c 100644 --- a/web/src/components/ak-wizard/WizardStep.ts +++ b/web/src/components/ak-wizard/WizardStep.ts @@ -1,15 +1,19 @@ import { NavigationEventInit, WizardCloseEvent, WizardNavigationEvent } from "./events.js"; import { - type ButtonKind, - type NavigableButton, + ButtonKindClassnameRecord, + ButtonKindLabelRecord, + isNavigable, type WizardButton, WizardStepLabel, WizardStepState, -} from "./types.js"; +} from "./shared.js"; import { wizardStepContext } from "./WizardContexts.js"; import { AKElement } from "#elements/Base"; import { bound } from "#elements/decorators/bound"; +import { SlottedTemplateResult } from "#elements/types"; + +import { ConsoleLogger, Logger } from "#logger/browser"; import { match, P } from "ts-pattern"; @@ -24,23 +28,6 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFWizard from "@patternfly/patternfly/components/Wizard/wizard.css"; -const isNavigable = (b: WizardButton): b is NavigableButton => - "destination" in b && typeof b.destination === "string" && b.destination.length > 0; - -const BUTTON_KIND_TO_CLASS: Record = { - next: "pf-m-primary", - back: "pf-m-secondary", - close: "pf-m-link", - cancel: "pf-m-link", -}; - -const BUTTON_KIND_TO_LABEL: Record = { - next: msg("Next"), - back: msg("Back"), - cancel: msg("Cancel"), - close: msg("Close"), -}; - /** * @class WizardStep * @@ -63,7 +50,7 @@ const BUTTON_KIND_TO_LABEL: Record = { export abstract class WizardStep extends AKElement { // These additions are necessary because we don't want to inherit *all* of the modal box // modifiers, just the ones related to managing the height of the display box. - static styles = [ + public static styles = [ PFWizard, PFContent, PFTitle, @@ -79,17 +66,22 @@ export abstract class WizardStep extends AKElement { `, ]; + /** + * A prefixed logger for this component. + */ + protected logger: Logger; + @property({ type: Boolean, attribute: true, reflect: true }) - enabled = false; + public enabled = false; /** * The name. Should match the slot. Reflected if not present. */ @property({ type: String, attribute: true, reflect: true }) - name?: string; + public name?: string; @consume({ context: wizardStepContext, subscribe: true }) - wizardStepState: WizardStepState = { currentStep: undefined, stepLabels: [] }; + protected wizardStepState: WizardStepState = { currentStep: undefined, stepLabels: [] }; /** * What appears in the titlebar of the Wizard. Usually, but not necessarily, the same for all @@ -125,17 +117,17 @@ export abstract class WizardStep extends AKElement { /** * The ID of the current step. */ - id = ""; + declare public id: string; /** *The label of the current step. Displayed in the navigation bar. */ - label: string = "--unset--"; + public label: string = "--unset--"; /** * If true, this step's label will not be shown in the navigation bar */ - hide = false; + public hide = false; // ___ _ _ _ _ ___ ___ // | _ \_ _| |__| (_)__ /_\ | _ \_ _| @@ -143,6 +135,8 @@ export abstract class WizardStep extends AKElement { // |_| \_,_|_.__/_|_\__| /_/ \_\_| |___| // + //#region Public API + // Override this and provide the buttons for this step. The button type is documented in the // [types](./types.ts) file, but in short, there are four "kinds": "next", "back", "cancel", and // "close." @@ -150,10 +144,12 @@ export abstract class WizardStep extends AKElement { return []; } - // Override this to provide the form. - public renderMain() { - throw new Error("This must be overridden in client classes"); - } + /** + * Render the main content of the step. This is where the form or other content for the step should be rendered. + * + * @abstract + */ + protected abstract renderMain(): SlottedTemplateResult; // Override this to intercept 'next' and 'back' events, perform validation, and include enabling // before allowing navigation to continue. @@ -175,21 +171,33 @@ export abstract class WizardStep extends AKElement { this.dispatchEvent(new WizardNavigationEvent(undefined, details)); } - // END Public API + //#endregion - connectedCallback() { + //#region Lifecycle + + public constructor() { + super(); + this.logger = ConsoleLogger.prefix(this.tagName.toLowerCase()); + } + + public override connectedCallback() { super.connectedCallback(); + if (!this.name) { const name = this.getAttribute("slot"); + if (!name) { throw new Error("Steps must have a unique slot attribute."); } + this.name = name; } } + //#endregion + @bound - onWizardNavigationEvent(ev: Event, button: WizardButton) { + protected onWizardNavigationEvent(ev: Event, button: WizardButton) { ev.stopPropagation(); if (!isNavigable(button)) { @@ -204,24 +212,26 @@ export abstract class WizardStep extends AKElement { } @bound - onWizardCloseEvent(ev: Event) { + protected onWizardCloseEvent(ev: Event) { ev.stopPropagation(); this.dispatchEvent(new WizardCloseEvent()); } - getButtonLabel(button: WizardButton) { - return button.label ?? BUTTON_KIND_TO_LABEL[button.kind]; + protected getButtonLabel(button: WizardButton): SlottedTemplateResult { + return button.label ?? ButtonKindLabelRecord[button.kind](); } - getButtonClasses(button: WizardButton) { + protected getButtonClasses(button: WizardButton) { return { "pf-c-button": true, - [BUTTON_KIND_TO_CLASS[button.kind]]: true, + [ButtonKindClassnameRecord[button.kind]]: true, }; } + //#region Rendering + @bound - renderCloseButton(button: WizardButton) { + protected renderCloseButton(button: WizardButton) { return html`
    `; } @bound - renderNavigableButton(button: WizardButton) { + protected renderNavigableButton(button: WizardButton) { return html`
    ` - : nothing; + return html`
    +
    +
    + ${this.canCancel ? this.renderHeaderCancelIcon() : nothing} +

    + ${this.wizardTitle} +

    +

    ${this.wizardDescription}

    +
    + +
    +
    + +
    +
    + ${this.renderMain()} +
    +
    +
    + +
    +
    +
    `; } + + //#endregion } declare global { diff --git a/web/src/components/ak-wizard/ak-wizard-steps.ts b/web/src/components/ak-wizard/ak-wizard-steps.ts index c62c71b93d..9bb3b2a783 100644 --- a/web/src/components/ak-wizard/ak-wizard-steps.ts +++ b/web/src/components/ak-wizard/ak-wizard-steps.ts @@ -1,5 +1,5 @@ import { NavigationEventInit, WizardNavigationEvent } from "./events.js"; -import { WizardStepLabel, WizardStepState } from "./types.js"; +import { WizardStepLabel, WizardStepState } from "./shared.js"; import { wizardStepContext } from "./WizardContexts.js"; import { type WizardStep } from "./WizardStep.js"; @@ -7,7 +7,7 @@ import { AKElement } from "#elements/Base"; import { bound } from "#elements/decorators/bound"; import { Context, ContextProvider } from "@lit/context"; -import { html, nothing } from "lit"; +import { css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators.js"; /** @@ -25,6 +25,14 @@ import { customElement, property } from "lit/decorators.js"; @customElement("ak-wizard-steps") export class WizardStepsManager extends AKElement { + public static styles = [ + css` + :host { + display: block; + } + `, + ]; + @property({ type: String, attribute: true }) public currentStep?: string; @@ -34,6 +42,7 @@ export class WizardStepsManager extends AKElement { constructor() { super(); + this.wizardStepContext = new ContextProvider(this, { context: wizardStepContext, initialValue: { @@ -45,11 +54,11 @@ export class WizardStepsManager extends AKElement { this.addEventListener("slotchange", this.onSlotchange); } - findSlots() { + protected refreshSlots() { this.slots = Array.from(this.querySelectorAll("[slot]")) as WizardStep[]; } - findSlot(name?: string) { + protected findSlot(name?: string) { const target = this.slots.find((slot) => slot.slot === name); if (!target) { throw new Error(`Request for wizard panel that does not exist: ${name}`); @@ -67,18 +76,18 @@ export class WizardStepsManager extends AKElement { })); } - findStepLabels() { + protected refreshStepLabels() { this.wizardStepContext.setValue({ ...this.wizardStepContext.value, stepLabels: this.stepLabels, }); } - connectedCallback() { + public override connectedCallback() { super.connectedCallback(); - this.findSlots(); - this.findStepLabels(); + this.refreshSlots(); + this.refreshStepLabels(); if (!this.currentStep && this.slots.length > 0) { const currentStep = this.slots[0].getAttribute("slot"); @@ -95,23 +104,29 @@ export class WizardStepsManager extends AKElement { } } - @bound - onSlotchange(ev: Event) { - ev.stopPropagation(); - this.findSlots(); - this.findSlot(this.currentStep); - this.findStepLabels(); + public override firstUpdated() { + this.refreshStepLabels(); } - // This event sequence handles the following possibilities: - // - The user on a step validated and wants to move forward. We want to make sure the *next* - // step in enabled. - // - The user went *back* and changed a step and it is no longer valid. We want to disable all - // future steps until that is corrected. Yes, in this case the flow is "Now you have to go - // through the entire wizard," but since the user invalidated a prior, that shouldn't be - // unexpected. None of the data will have been lost. + @bound + protected onSlotchange(ev: Event) { + ev.stopPropagation(); + this.refreshSlots(); + this.findSlot(this.currentStep); + this.refreshStepLabels(); + } - updateStepAvailability(details: NavigationEventInit) { + /** + * This event sequence handles the following possibilities: + * + * - The user on a step validated and wants to move forward. We want to make sure the *next* + * step in enabled. + * - The user went *back* and changed a step and it is no longer valid. We want to disable all + * future steps until that is corrected. Yes, in this case the flow is "Now you have to go + * through the entire wizard," but since the user invalidated a prior, that shouldn't be + * unexpected. None of the data will have been lost. + */ + protected updateStepAvailability(details: NavigationEventInit) { const asArr = (v?: string[] | string) => v === undefined ? [] : Array.isArray(v) ? v : [v]; const enabled = asArr(details.enable); @@ -133,7 +148,7 @@ export class WizardStepsManager extends AKElement { } @bound - onNavigation(ev: WizardNavigationEvent) { + protected onNavigation(ev: WizardNavigationEvent) { ev.stopPropagation(); const { destination, details } = ev; @@ -146,15 +161,19 @@ export class WizardStepsManager extends AKElement { } const target = this.slots.find((slot) => slot.slot === destination); + if (!target) { throw new Error(`Attempted to navigate to unknown step: ${destination}`); } + if (!target.enabled) { throw new Error(`Attempted to navigate to disabled step: ${destination}`); } + if (target.slot === this.currentStep) { return; } + this.currentStep = target.slot; this.wizardStepContext.setValue({ stepLabels: this.stepLabels, @@ -162,13 +181,9 @@ export class WizardStepsManager extends AKElement { }); } - render() { + protected override render() { return this.currentStep ? html`` : nothing; } - - firstUpdated() { - this.findStepLabels(); - } } declare global { diff --git a/web/src/components/ak-wizard/shared.ts b/web/src/components/ak-wizard/shared.ts new file mode 100644 index 0000000000..acb5274582 --- /dev/null +++ b/web/src/components/ak-wizard/shared.ts @@ -0,0 +1,54 @@ +import { SlottedTemplateResult } from "#elements/types"; + +import { msg } from "@lit/localize"; +import { html } from "lit-html"; + +export type EnabledWizardButton = + | { kind: "back"; label?: string; destination: string } + | { kind: "cancel"; label?: string } + | { kind: "close"; label?: string } + | { kind: "next"; label?: string; destination: string }; + +export type WizardButton = EnabledWizardButton; + +export type NavigableButton = Extract; + +export type ButtonKind = Extract; + +export interface WizardStepLabel { + label: string; + id: string; + enabled?: boolean; +} + +export type WizardStepState = { + currentStep?: string; + stepLabels: WizardStepLabel[]; +}; + +export const isNavigable = (b: WizardButton): b is NavigableButton => + "destination" in b && typeof b.destination === "string" && b.destination.length > 0; + +export const ButtonKindClassnameRecord = { + next: "pf-m-primary", + back: "pf-m-secondary", + close: "pf-m-link", + cancel: "pf-m-plain", +} as const satisfies Record; + +export const ButtonKindLabelRecord = { + next: () => { + return html`${msg("Next")} + + + `; + }, + back: () => { + return html` + + + ${msg("Back")}`; + }, + cancel: () => msg("Cancel"), + close: () => msg("Close"), +} as const satisfies Record SlottedTemplateResult>; diff --git a/web/src/components/ak-wizard/types.ts b/web/src/components/ak-wizard/types.ts deleted file mode 100644 index 6bb6c510af..0000000000 --- a/web/src/components/ak-wizard/types.ts +++ /dev/null @@ -1,22 +0,0 @@ -export type EnabledWizardButton = - | { kind: "back"; label?: string; destination: string } - | { kind: "cancel"; label?: string } - | { kind: "close"; label?: string } - | { kind: "next"; label?: string; destination: string }; - -export type WizardButton = EnabledWizardButton; - -export type NavigableButton = Extract; - -export type ButtonKind = Extract; - -export interface WizardStepLabel { - label: string; - id: string; - enabled?: boolean; -} - -export type WizardStepState = { - currentStep?: string; - stepLabels: WizardStepLabel[]; -}; diff --git a/web/src/elements/Base.ts b/web/src/elements/Base.ts index cd9c078374..d6690e6996 100644 --- a/web/src/elements/Base.ts +++ b/web/src/elements/Base.ts @@ -1,5 +1,10 @@ import { globalAK } from "#common/global"; -import { createCSSResult, createStyleSheetUnsafe, StyleRoot } from "#common/stylesheets"; +import { + createCSSResult, + createStyleSheetUnsafe, + setAdoptedStyleSheets, + StyleRoot, +} from "#common/stylesheets"; import { applyUITheme, ResolvedUITheme, resolveUITheme, ThemeChangeEvent } from "#common/theme"; import AKBase from "#styles/authentik/base.css" with { type: "bundled-text" }; @@ -34,7 +39,22 @@ export class AKElement extends LitElement implements AKElementProps { public static styles?: Array; + /** + * Host styles are styles that are applied to the element's render root, + * but are not scoped to the element itself. + * + * @remarks + * + * This is useful if the element is a wrapper around a third-party component + * that requires styles to be applied to the host, such as Patternfly's modals. + */ + public static hostStyles?: Array; + + private static hostStyleSheets: CSSStyleSheet[] | null = null; + protected static override finalizeStyles(styles: CSSResultGroup = []): CSSResultOrNative[] { + this.hostStyleSheets = this.hostStyles ? this.hostStyles.map(createStyleSheetUnsafe) : null; + const elementStyles = [ $PFBase, // Route around TSC`s known-to-fail typechecking of `.flat(Infinity)`. Removes types. @@ -102,10 +122,35 @@ export class AKElement extends LitElement implements AKElementProps { this.activeTheme = preferredColorScheme; } + + const rootNode = this.getRootNode(); + + if (rootNode instanceof ShadowRoot) { + const { hostStyleSheets } = this.constructor as typeof AKElement; + + if (hostStyleSheets) { + setAdoptedStyleSheets(rootNode, (currentStyleSheets) => { + return [...currentStyleSheets, ...hostStyleSheets]; + }); + } + } } public override disconnectedCallback(): void { this.#themeAbortController?.abort(); + + const rootNode = this.getRootNode(); + + if (rootNode instanceof ShadowRoot) { + const { hostStyleSheets } = this.constructor as typeof AKElement; + + if (hostStyleSheets) { + setAdoptedStyleSheets(rootNode, (currentStyleSheets) => { + return currentStyleSheets.filter((sheet) => !hostStyleSheets.includes(sheet)); + }); + } + } + super.disconnectedCallback(); } diff --git a/web/src/elements/AkControlElement.ts b/web/src/elements/ControlElement.ts similarity index 60% rename from web/src/elements/AkControlElement.ts rename to web/src/elements/ControlElement.ts index 424ada4822..6ace8ddec1 100644 --- a/web/src/elements/AkControlElement.ts +++ b/web/src/elements/ControlElement.ts @@ -8,35 +8,41 @@ import { AKElement } from "#elements/Base"; * extracting the value. * */ -export class AkControlElement extends AKElement { +export class AKControlElement extends AKElement { constructor() { super(); this.dataset.akControl = "true"; } - json(): T { + /** + * @deprecated Rename to `toJSON` + */ + public json(): T { throw new Error("Controllers using this protocol must override this method"); } - get toJson(): T { + /** + * Convert the value of the control to a JSON-serializable format. + */ + public toJSON(): T { return this.json(); } - get isValid(): boolean { + public get isValid(): boolean { return true; } } -export function isControlElement(element: Element | HTMLElement): element is AkControlElement { +export function isControlElement(element: Element | HTMLElement): element is AKControlElement { if (!(element instanceof HTMLElement)) return false; - if (element instanceof AkControlElement) return true; + if (element instanceof AKControlElement) return true; - return "dataset" in element && element.dataset.akControl === "true"; + return element.hasAttribute("data-ak-control"); } declare global { interface HTMLElementTagNameMap { - "[data-ak-control]": AkControlElement; + "[data-ak-control]": AKControlElement; } } diff --git a/web/src/elements/Interface.ts b/web/src/elements/Interface.ts index fcf5f17686..d74e0ca94f 100644 --- a/web/src/elements/Interface.ts +++ b/web/src/elements/Interface.ts @@ -1,7 +1,11 @@ +import "#elements/commands/ak-command-palette"; + import { globalAK } from "#common/global"; import { applyDocumentTheme, createUIThemeEffect } from "#common/theme"; import { AKElement } from "#elements/Base"; +import { AKCommandPalette } from "#elements/commands/ak-command-palette"; +import { createCommonCommands, PaletteCommandNamespace } from "#elements/commands/shared"; import { BrandingContextController } from "#elements/controllers/BrandContextController"; import { ConfigContextController } from "#elements/controllers/ConfigContextController"; import { ContextControllerRegistry } from "#elements/controllers/ContextControllerRegistry"; @@ -11,6 +15,8 @@ import { ReactiveContextController } from "#elements/controllers/ReactiveContext import { BrandingContext } from "#elements/mixins/branding"; import { AuthentikConfigContext } from "#elements/mixins/config"; +import { ConsoleLogger, Logger } from "#logger/browser"; + import { Context, ContextType } from "@lit/context"; import { ReactiveController } from "lit"; @@ -18,6 +24,8 @@ import { ReactiveController } from "lit"; * The base interface element for the application. */ export abstract class Interface extends AKElement { + protected logger: Logger; + /** * Private map of controllers to their registry keys. * @@ -26,9 +34,17 @@ export abstract class Interface extends AKElement { */ #registryKeys = new WeakMap>>(); + /** + * The command palette instance. This must be inserted by the extending class, + * as the palette may depend on a context that is not available at the time of this class's construction. + */ + public readonly commandPalette: AKCommandPalette; + constructor() { super(); + this.logger = ConsoleLogger.prefix(this.tagName.toLowerCase()); + const { config, brand, locale } = globalAK(); createUIThemeEffect(applyDocumentTheme); @@ -38,7 +54,20 @@ export abstract class Interface extends AKElement { this.addController(new BrandingContextController(this, brand), BrandingContext); this.addController(new ModalOrchestrationController()); - this.dataset.testId = "interface-root"; + this.id = "interface-root"; + this.commandPalette = this.ownerDocument.createElement("ak-command-palette"); + } + + public override connectedCallback(): void { + super.connectedCallback(); + requestAnimationFrame(() => { + this.commandPalette.modal.setCommands( + createCommonCommands().map((command) => ({ + namespace: PaletteCommandNamespace.Action, + ...command, + })), + ); + }); } public override addController( diff --git a/web/src/admin/common/ak-license-notice.ts b/web/src/elements/LicenseNotice.ts similarity index 100% rename from web/src/admin/common/ak-license-notice.ts rename to web/src/elements/LicenseNotice.ts diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts index d55627f9d3..f6fcbbd79b 100644 --- a/web/src/elements/Tabs.ts +++ b/web/src/elements/Tabs.ts @@ -1,13 +1,21 @@ import { CURRENT_CLASS, EVENT_REFRESH } from "#common/constants"; import { AKElement } from "#elements/Base"; +import { + CommandPaletteState, + PaletteCommandAction, + PaletteCommandDefinitionInit, +} from "#elements/commands/shared"; +import { intersectionObserver } from "#elements/decorators/intersection-observer"; import { getURLParams, updateURLParams } from "#elements/router/RouteMatch"; import Styles from "#elements/Tabs.css" with { type: "bundled-text" }; import { ifPresent } from "#elements/utils/attributes"; import { isFocusable } from "#elements/utils/focus"; -import { msg } from "@lit/localize"; -import { CSSResult, html, LitElement, TemplateResult } from "lit"; +import { capitalCase } from "change-case"; + +import { msg, str } from "@lit/localize"; +import { CSSResult, html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import { createRef, ref } from "lit/directives/ref.js"; @@ -30,16 +38,59 @@ export class Tabs extends AKElement { @state() protected tabs: ReadonlyMap = new Map(); + /** + * Whether the tab is visible in the viewport. + */ + @intersectionObserver() + public visible = false; #focusTargetRef = createRef(); #observer: MutationObserver | null = null; + #commands = new CommandPaletteState(); + #updateTabs = (): void => { this.tabs = new Map( Array.from(this.querySelectorAll(":scope > [slot^='page-']"), (element) => { return [element.getAttribute("slot") || "", element]; }), ); + + requestAnimationFrame(this.#updateCommands); + }; + + #updateCommands = (): void => { + const commands: PaletteCommandDefinitionInit[] = []; + + if (!this.visible) { + this.#commands.clear(); + return; + } + + const group = msg(str`Landmark: ${capitalCase(this.pageIdentifier)}`); + const prefix = msg("Switch to tab", { id: "command-palette.switch-to-tab" }); + + const action: PaletteCommandAction = (slotName) => { + this.activateTab(slotName); + }; + + for (const [slotName, tabPanel] of this.tabs) { + if (this.activeTabName === slotName) { + continue; + } + + const label = tabPanel.getAttribute("aria-label") || slotName; + + commands.push({ + label, + action, + group, + prefix, + details: slotName, + }); + } + + this.#commands.set(commands); }; public override connectedCallback(): void { @@ -78,9 +129,18 @@ export class Tabs extends AKElement { public override disconnectedCallback(): void { this.#observer?.disconnect(); + this.#commands.clear(); super.disconnectedCallback(); } + public override updated(changedProperties: PropertyValues): void { + super.updated(changedProperties); + + if (changedProperties.has("visible")) { + this.#updateCommands(); + } + } + public findActiveTabPanel(): Element | null { return this.querySelector(`[slot='${this.activeTabName}']`); } diff --git a/web/src/elements/ak-array-input.ts b/web/src/elements/ak-array-input.ts index a6292dc6e1..dca260e24f 100644 --- a/web/src/elements/ak-array-input.ts +++ b/web/src/elements/ak-array-input.ts @@ -1,4 +1,4 @@ -import { AkControlElement } from "#elements/AkControlElement"; +import { AKControlElement } from "#elements/ControlElement"; import { bound } from "#elements/decorators/bound"; import { type Spread } from "#elements/types"; import { randomId } from "#elements/utils/randomId"; @@ -27,7 +27,7 @@ export interface IArrayInput { type Keyed = { key: string; item: T }; @customElement("ak-array-input") -export class ArrayInput extends AkControlElement implements IArrayInput { +export class ArrayInput extends AKControlElement implements IArrayInput { static styles = [ PFButton, PFInputGroup, @@ -100,7 +100,7 @@ export class ArrayInput extends AkControlElement implements IArrayInput< } const oneIsValid = (g: HTMLDivElement) => - g.querySelector>("[name]")?.isValid ?? true; + g.querySelector>("[name]")?.isValid ?? true; const allAreValid = Array.from(this.inputGroups ?? []).every(oneIsValid); return allAreValid && (this.validator ? this.validator(this.items) : true); } @@ -109,7 +109,7 @@ export class ArrayInput extends AkControlElement implements IArrayInput< return Array.from(this.inputGroups ?? []) .map( (group) => - group.querySelector>("[name]")?.json() ?? + group.querySelector>("[name]")?.json() ?? null, ) .filter((i) => i !== null); diff --git a/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts b/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts index 5e540ebbd7..a32d5d128f 100644 --- a/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts +++ b/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts @@ -1,4 +1,4 @@ -import { AkControlElement } from "#elements/AkControlElement"; +import { AKControlElement } from "#elements/ControlElement"; import { CustomEmitterElement } from "#elements/utils/eventEmitter"; import { msg } from "@lit/localize"; @@ -22,7 +22,7 @@ function* kvToPairs(items: CheckboxPair[]): Iterable { } } -const AkElementWithCustomEvents = CustomEmitterElement(AkControlElement); +const AkElementWithCustomEvents = CustomEmitterElement(AKControlElement); /** * @element ak-checkbox-group diff --git a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts index 7137cffc06..67abf79e55 100644 --- a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts +++ b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts @@ -3,7 +3,7 @@ import "./ak-dual-select.js"; import { AkDualSelect } from "./ak-dual-select.js"; import { type DataProvider, DualSelectEventType, type DualSelectPair } from "./types.js"; -import { AkControlElement } from "#elements/AkControlElement"; +import { AKControlElement } from "#elements/ControlElement"; import { CustomListenerElement } from "#elements/utils/eventEmitter"; import type { Pagination } from "@goauthentik/api"; @@ -23,7 +23,7 @@ import { createRef, ref } from "lit/directives/ref.js"; * about authentik at all and could be dropped into Gravity unchanged.) */ @customElement("ak-dual-select-provider") -export class AkDualSelectProvider extends CustomListenerElement(AkControlElement) { +export class AkDualSelectProvider extends CustomListenerElement(AKControlElement) { //#region Properties /** diff --git a/web/src/elements/commands/ak-command-palette-modal.css b/web/src/elements/commands/ak-command-palette-modal.css new file mode 100644 index 0000000000..84e5d6abc2 --- /dev/null +++ b/web/src/elements/commands/ak-command-palette-modal.css @@ -0,0 +1,261 @@ +:host { + --pf-global--Color--100: var(--pf-global--palette--purple-50); + --pf-global--Color--200: var(--pf-global--palette--purple-100); + + --ak-c-command-palette--PaddingBlock: calc(1em * var(--pf-global--LineHeight--sm)); + --ak-c-command-palette--PaddingInline: calc( + 2 * var(--pf-global--spacer--form-element) + var(--pf-global--spacer--sm) + ); + --ak-c-command-palette--Translucency: 25%; + + --ak-c-command-palette__group--BorderColor: var( + --pf-global--BackgroundColor--dark-transparent-200 + ); + --ak-c-command-palette__group--Color: var(--pf-global--palette--purple-200); + + --ak-fieldset--BorderColor: transparent; + + --ak-c-command-palette__item--BackgroundColor: var(--pf-global--palette--purple-700); + + --ak-c-command-palette__item--Color: var(--pf-global--palette--purple-700); + + --ak-c-command-palette__item--Color: var(--pf-global--palette--blue-50); + --ak-c-command-palette__item--selected--BackgroundColor: var(--pf-global--palette--blue-400); + --ak-c-command-palette__item--hover--BackgroundColor: color-mix( + var(--pf-global--palette--purple-600), + var(--pf-global--palette--purple-700) 80% + ); + --ak-c-command-palette__item--hover-selected--BackgroundColor: var( + --pf-global--palette--blue-300 + ); + + --ak-c-command-palette__item--AccentColor: var(--pf-global--palette--purple-600); + --ak-c-command-palette__item--AccentWidth: 0.5px; + + @media (prefers-reduced-transparency: reduce) { + --ak-c-command-palette--Translucency: 0%; + } + will-change: opacity, text-decoration-color, background-color, color; + transform: translate3d(0, 0, 0); /* Fixes rendering artifacts. */ + + @media (prefers-contrast: more) { + --ak-fieldset--BorderColor: var(--pf-global--palette--purple-500); + } +} + +:host { + display: block; + min-height: min(10rem, 20dvh); + padding: 0; + padding-block-end: var(--pf-global--spacer--md); + color: var(--pf-global--Color--100); +} + +[part="empty-state"]::part(body) { + color: var(--pf-global--Color--200); +} + +[part="empty-state"]::part(icon) { + --pf-c-empty-state__icon--Color: var(--pf-global--Color--100); +} + +[part="command-field"] { + border-bottom: 0.5px solid var(--pf-global--palette--black-600); + padding-block: var(--pf-global--spacer--sm); + margin-inline: var(--pf-global--spacer--sm); + padding-inline-start: var(--pf-global--spacer--sm); +} + +#command-input { + background: transparent; + display: block; + width: 100%; + font-size: var(--pf-global--FontSize--2xl); + padding-block: var(--pf-global--spacer--form-element); + padding-inline-start: calc(var(--ak-c-command-palette--PaddingInline) * 2); + padding-inline-end: var(--ak-c-command-palette--PaddingInline); + border: none; + + outline: none; + + &::placeholder { + color: var(--pf-global--palette--purple-100); + font-weight: 100; + font-family: var(--pf-global--FontFamily--heading--sans-serif); + } +} + +[part="results-group"] { + user-select: none; + border-width: 0; + padding-inline: 0 !important; + padding-block-end: 0 !important; + + transition-property: border-color; + transition-timing-function: cubic-bezier(0.08, 0.52, 0.52, 1); + transition-duration: 0.2s; + + legend { + --ak-fieldset__legend--PaddingInlineBase: var(--pf-global--spacer--md); + + cursor: pointer; + color: var(--ak-c-command-palette__group--Color); + padding-block: var(--pf-global--spacer--sm) !important; + margin-inline: 0 !important; + width: 100%; + text-align: end; + position: sticky; + inset-block-start: 0; + z-index: 2; + + background: var(--pf-global--palette--purple-700); + } + + &:has(.selected), + &:hover { + --ak-c-command-palette__group--Color: var(--pf-global--palette--purple-50); + --ak-c-command-palette__item--AccentColor: var(--pf-global--palette--purple-500); + } +} + +[part="results"] { + overflow-y: auto; + max-height: calc(100dvh - (1.75 * var(--ak-c-modal--MarginBlockStart))); + + @supports (scrollbar-width: thin) { + scrollbar-width: none; + + @media (pointer: coarse) { + /** + * Avoids issues on touch devices where thin scrollbars + * are difficult to interact with. + */ + scrollbar-width: auto; + } + } +} + +[part="results-list"] { + margin-block-start: calc(var(--pf-global--spacer--sm) * -1); + + &:has(.selected) { + --ak-c-command-palette__item--AccentColor: var(--pf-global--palette--purple-500); + } +} + +[part="command-item-label"] { + grid-row: label; + font-family: var(--pf-global--FontFamily--heading--sans-serif); +} + +[part="command-item-prefix"] { + grid-row: icon / prefix; + grid-column: icon / prefix; + font-variant: all-small-caps; + line-height: calc(var(--ak-c-modal__title--LineHeight) + 0.05); + font-weight: bold; + color: var(--pf-global--palette--gold-200); +} + +[part="command-item-suffix"] { + grid-area: suffix; + font-variant: all-small-caps; + line-height: calc(var(--ak-c-modal__title--LineHeight) + 0.05); + font-weight: bold; + display: flex; + color: var(--pf-global--palette--gold-200); + justify-content: end; + align-items: center; +} + +[part="command-item-description"] { + grid-area: description; +} + +[part="group-heading"] { + margin-block: var(--pf-global--spacer--sm); + margin-inline: var(--pf-global--spacer--sm); +} + +[part="command-button"] { + display: grid; + grid-template-areas: + "icon prefix label suffix" + "icon description description suffix"; + background: transparent; + + padding: var(--pf-global--spacer--md); + border: none; + column-gap: var(--pf-global--spacer--sm); + + background-color: var(--ak-c-command-palette__item--BackgroundColor); + + width: 100%; + border-radius: 0; + text-align: start; + color: var(--ak-c-command-palette__item--Color); + grid-template-columns: [icon] auto [prefix] auto [label] 1fr [suffix] auto; + transition-property: border-color; + transition-timing-function: cubic-bezier(0.08, 0.52, 0.52, 1); + transition-duration: 0.2s; + + position: relative; + padding-inline-start: var(--pf-global--spacer--md); + padding-inline-end: var(--pf-global--spacer--lg); + + &::before { + inset-block: 0; + inset-inline-start: -1px; + content: ""; + position: absolute; + background-color: var(--ak-c-command-palette__item--AccentColor); + width: var(--ak-c-command-palette__item--AccentWidth); + } + + &:hover { + background-color: color-mix( + var(--ak-c-command-palette__item--hover--BackgroundColor), + transparent var(--ak-c-command-palette--Translucency) + ); + } +} +[part="command-item"] { + padding-inline-start: var(--pf-global--spacer--md); +} + +[part="command-item"]:hover { + --ak-c-command-palette__item--AccentWidth: 1px; + --ak-c-command-palette__item--AccentColor: var(--ak-accent); +} + +[part="command-item"].selected { + --ak-c-command-palette__item--AccentWidth: 3px; + --ak-c-command-palette__item--AccentColor: var(--ak-accent); + + --ak-c-command-palette__item--BackgroundColor: var( + --ak-c-command-palette__item--selected--BackgroundColor + ); + --ak-c-command-palette__item--hover--BackgroundColor: var( + --ak-c-command-palette__item--hover-selected--BackgroundColor + ); + + &:hover { + --ak-c-command-palette__item--AccentWidth: 3px; + } +} + +[part="input-label"] { + cursor: pointer; + position: absolute; + inset-block-start: var(--ak-c-command-palette--PaddingBlock); + inset-inline-start: var(--ak-c-command-palette--PaddingInline); + z-index: 1; + pointer-events: none; + + .icon { + display: block; + height: var(--pf-global--icon--FontSize--lg); + fill: currentColor; + stroke: currentColor; + } +} diff --git a/web/src/elements/commands/ak-command-palette-modal.ts b/web/src/elements/commands/ak-command-palette-modal.ts new file mode 100644 index 0000000000..ac676487df --- /dev/null +++ b/web/src/elements/commands/ak-command-palette-modal.ts @@ -0,0 +1,715 @@ +import "#elements/EmptyState"; + +import { torusIndex } from "#common/collections"; +import { PFSize } from "#common/enums"; + +import Styles from "#elements/commands/ak-command-palette-modal.css"; +import { AKCommandChangeEvent } from "#elements/commands/events"; +import { + CommandNamespaceSymbol, + CommandNamespaceSymbolIndex, + CommandPrefix, + CommandSuffix, + formatNamespacePrefix, + PaletteCommandDefinition, + PaletteCommandNamespace, + resolveCommandNamespace, +} from "#elements/commands/shared"; +import { listen } from "#elements/decorators/listen"; +import { AKModal } from "#elements/modals/ak-modal"; +import { TransclusionElement } from "#elements/modals/shared"; +import { asInvoker, renderDialog } from "#elements/modals/utils"; +import { SlottedTemplateResult } from "#elements/types"; +import { ifPresent } from "#elements/utils/attributes"; +import { FocusTarget } from "#elements/utils/focus"; + +import Fuse, { Expression } from "fuse.js"; + +import { msg, str } from "@lit/localize"; +import { html, PropertyValues } from "lit"; +import { guard } from "lit-html/directives/guard.js"; +import { createRef, ref } from "lit-html/directives/ref.js"; +import { customElement, property, state } from "lit/decorators.js"; +import { repeat } from "lit/directives/repeat.js"; + +function openDocsSearch(query: string) { + const url = new URL("/search", import.meta.env.AK_DOCS_URL); + url.searchParams.set("q", query); + + window.open(url, "_ak_docs", "noopener,noreferrer"); +} + +@customElement("ak-command-palette-modal") +export class AKCommandPaletteModal extends AKModal { + public static openOnConnect = false; + + public static styles = [...AKModal.styles, Styles]; + + public static open = asInvoker(AKCommandPaletteModal); + + protected autofocusTarget = new FocusTarget(); + protected formRef = createRef(); + + public readonly actionNamespaceSymbol = CommandNamespaceSymbol[PaletteCommandNamespace.Action]; + public readonly navigationNamespaceSymbol = + CommandNamespaceSymbol[PaletteCommandNamespace.Navigation]; + public readonly searchNamespaceSymbol = CommandNamespaceSymbol[PaletteCommandNamespace.Search]; + + #scrollCommandFrameID = -1; + #autoFocusFrameID = -1; + + public get value() { + return this.autofocusTarget.target?.value.trim() || ""; + } + + public set value(nextValue: string) { + if (!this.autofocusTarget.target) { + this.initialValue = nextValue; + return; + } + + this.autofocusTarget.target.value = nextValue; + this.synchronizeFilteredCommands(); + } + + protected fuse = new Fuse([], { + findAllMatches: true, + includeScore: true, + shouldSort: true, + ignoreFieldNorm: true, + useExtendedSearch: true, + isCaseSensitive: false, + keys: [ + { name: "namespace", weight: 2 }, + + { + name: "label", + weight: 2, + getFn: ({ prefix, label }) => { + if (prefix) { + return [`${prefix}:${label}`, label]; + } + + return label; + }, + }, + "description", + { name: "group", weight: 1 }, + + { name: "prefix", weight: 0.7 }, + { name: "suffix", weight: 0.25 }, + { + name: "keywords", + getFn: ({ keywords }) => keywords?.join(" ") || "", + weight: 2, + }, + ], + }); + + //#region Public Properties + + @property({ type: Number, attribute: false, useDefault: true }) + public selectionIndex = 0; + + public get selectedCommand(): PaletteCommandDefinition | null { + if (this.selectionIndex === -1) { + return null; + } + + return this.filteredCommands[this.selectionIndex] || null; + } + + @property({ type: String, attribute: "initial-value", useDefault: true }) + public initialValue = ""; + + @property({ type: Number, attribute: false, useDefault: true }) + public maxCount = 50; + + @property({ type: Array, attribute: false, useDefault: true }) + public filteredCommands: readonly PaletteCommandDefinition[] = []; + + @property({ type: String, useDefault: true }) + public placeholder = msg("What are you looking for?", { + id: "command-palette-placeholder-extended", + desc: "Placeholder for the command palette input", + }); + + /** + * A flattened array of all commands in the command palette, used for filtering and selection. + */ + #flattenedCommands: PaletteCommandDefinition[] = []; + + /** + * Commands ordered by their grouped render order, so that selectionIndex + * maps correctly to the visually displayed list. + */ + #renderOrderedCommands: readonly PaletteCommandDefinition[] = []; + + @state() + public commands = new Set[]>(); + + public override size = PFSize.Medium; + + public override focus = this.autofocusTarget.focus; + + //#region Public Methods + + public setCommands = ( + commands?: readonly PaletteCommandDefinition[] | null, + previousCommands?: readonly PaletteCommandDefinition[] | null, + nextInputValue: string = "", + ) => { + const changed = commands || previousCommands; + const { target } = this.autofocusTarget; + + if (previousCommands) { + this.commands.delete(previousCommands); + } + + if (commands && commands.length) { + this.commands.add(commands); + this.#flattenedCommands = Array.from(this.commands).reverse().flat(); + } + + if (target) { + target.value = nextInputValue; + } + + if (changed) { + this.fuse.setCollection(this.#flattenedCommands); + this.selectionIndex = 0; + this.synchronizeFilteredCommands(); + } + + if (this.open && changed) { + this.requestUpdate("commands"); + } + }; + + public scrollCommandIntoView = () => { + const id = `command-${this.selectionIndex}`; + + const element = this.renderRoot.querySelector(`#${id}`); + + if (!element) { + return; + } + + const fieldset = element.closest("fieldset"); + + fieldset?.scrollIntoView({ + behavior: "auto", + block: "nearest", + }); + + element.scrollIntoView({ + behavior: "auto", + block: "nearest", + }); + }; + + //#region Lifecycle + + public override connectedCallback(): void { + super.connectedCallback(); + this.setAttribute("data-is", "command-palette-modal"); + this.addEventListener("focus", this.autofocusTarget.toEventListener()); + } + + public override updated(changedProperties: PropertyValues): void { + super.updated(changedProperties); + + if (changedProperties.has("open") && this.open) { + if (this.#deferredCommandSyncAt) { + this.synchronizeFilteredCommands(); + } + + cancelAnimationFrame(this.#autoFocusFrameID); + + this.#autoFocusFrameID = requestAnimationFrame(() => { + this.autofocusTarget.focus(); + const { target } = this.autofocusTarget; + + if (!target) return; + + const startsWithNamespaceSymbol = CommandNamespaceSymbolIndex.has(this.value[0]); + + if (startsWithNamespaceSymbol) { + target.selectionStart = target.selectionEnd = this.value.length; + } else { + target.select(); + } + }); + } + + if (changedProperties.has("selectionIndex")) { + cancelAnimationFrame(this.#scrollCommandFrameID); + this.#scrollCommandFrameID = requestAnimationFrame(this.scrollCommandIntoView); + } + } + + //#endregion + + protected createFallbackSearchCommands(query: string): PaletteCommandDefinition[] { + return [ + { + label: msg(str`User "${query}"`), + suffix: CommandSuffix.Peek(), + namespace: PaletteCommandNamespace.Search, + prefix: CommandPrefix.SearchFor(), + group: msg("Users"), + keywords: [msg("search"), msg("find")], + action: async (data, event) => { + event?.stopPropagation(); + + const userPalette = this.ownerDocument.createElement( + "ak-command-palette-user-modal", + ); + + userPalette.initialValue = query; + + renderDialog(userPalette, { + parentElement: this.parentElement?.parentElement, + }); + + userPalette.show(); + }, + }, + ]; + } + + protected createFallbackCommands( + query: string, + namespace?: PaletteCommandNamespace, + ): [prepended?: PaletteCommandDefinition[], appended?: PaletteCommandDefinition[]] { + query = query.trim(); + + if (!query) { + return []; + } + + const prepended: PaletteCommandDefinition[] = []; + + if (namespace === PaletteCommandNamespace.Search) { + prepended.push(...this.createFallbackSearchCommands(query)); + } + + const appended: PaletteCommandDefinition[] = [ + { + group: msg("Documentation"), + namespace: PaletteCommandNamespace.Search, + label: msg(str`Search the docs for "${query}"`), + prefix: msg("Open", { id: "command-palette.prefix.open" }), + suffix: msg("New Tab", { id: "command-palette.suffix.view-docs" }), + action: () => openDocsSearch(query), + }, + ]; + + return [prepended, appended]; + } + + protected collectFilteredCommands(): PaletteCommandDefinition[] { + const { value } = this; + + if (!value) { + const filtered = this.#flattenedCommands + .filter((command) => !command.weight || command.weight > 1) + .slice(0, this.maxCount); + + return filtered; + } + + const [query, namespace] = resolveCommandNamespace(value); + + let pattern: string | Expression; + + if (namespace) { + const $and: Expression[] = [ + { + namespace: `=${namespace}`, + }, + ]; + + if (query) { + $and.push({ + label: query, + }); + } + + pattern = { + $and, + }; + } else { + pattern = value; + } + + const filteredCommands = this.fuse + .search(pattern, { + limit: this.maxCount, + }) + .map((result) => result.item); + + const [prepended = [], appended = []] = this.createFallbackCommands(query, namespace); + + return [...prepended, ...filteredCommands, ...appended]; + } + + #deferredCommandSyncAt: null | Date = null; + + public synchronizeFilteredCommands = () => { + if (!this.open) { + this.#deferredCommandSyncAt = new Date(); + + return; + } + + cancelAnimationFrame(this.#scrollCommandFrameID); + + this.selectionIndex = 0; + + const filteredCommands = this.collectFilteredCommands(); + + // Build render-ordered list that matches the grouped display order. + const grouped = Object.groupBy(filteredCommands, (command) => command.group || ""); + this.#renderOrderedCommands = Object.values( + grouped, + ).flat() as PaletteCommandDefinition[]; + + this.filteredCommands = filteredCommands; + + this.#scrollCommandFrameID = requestAnimationFrame(this.scrollCommandIntoView); + + this.#deferredCommandSyncAt = null; + }; + + public dispatchSubmit(event?: Event) { + const form = this.formRef.value; + + if (!form) return; + + const submitter = event?.currentTarget instanceof HTMLElement ? event.currentTarget : this; + + const submitEvent = new SubmitEvent("submit", { + submitter, + bubbles: true, + composed: true, + cancelable: true, + }); + + form.dispatchEvent(submitEvent); + } + + protected resolveSelectedCommandIndex(event: SubmitEvent): number { + if (event.submitter instanceof HTMLElement && event.submitter.dataset.commandIndex) { + return parseInt(event.submitter.dataset.commandIndex, 10); + } + + if (this.selectionIndex !== -1) { + return this.selectionIndex; + } + + return 0; + } + + public submitListener = async (event: SubmitEvent) => { + event.preventDefault(); + event.stopPropagation(); + + const commandIndex = this.resolveSelectedCommandIndex(event); + + const command = this.#renderOrderedCommands[commandIndex]; + + if (!command) { + this.logger.warn("No command found for index:", commandIndex); + return; + } + + const result = await command.action.call(this, command.details || null, event); + + if (typeof result === "boolean" && !result) { + this.logger.debug("Command action returned false, keeping palette open"); + + return; + } + + this.open = false; + }; + + protected commandClickListener = (event: MouseEvent) => { + const target = event.currentTarget as HTMLElement; + const index = parseInt(target.dataset.commandIndex!, 10); + + if (isNaN(index)) return; + + this.selectionIndex = index; + }; + + //#region Event Listeners + + @listen(AKCommandChangeEvent, { + target: this, + }) + protected commandChangeListener = (event: AKCommandChangeEvent) => { + this.setCommands(event.commands, event.previousCommands); + }; + + #keydownListener = (event: KeyboardEvent) => { + const visibleCommandsCount = this.filteredCommands.length; + + if (!this.open) return; + if (!visibleCommandsCount) return; + if (event.shiftKey || event.altKey) return; + + switch (event.key) { + case "ArrowDown": + event.preventDefault(); + + this.selectionIndex = torusIndex(visibleCommandsCount, this.selectionIndex + 1); + + return; + + case "ArrowUp": + event.preventDefault(); + this.selectionIndex = torusIndex(visibleCommandsCount, this.selectionIndex - 1); + + return; + + case "Enter": + event.preventDefault(); + this.dispatchSubmit(event); + + return; + } + }; + + protected inputListener = () => { + this.synchronizeFilteredCommands(); + }; + + protected focusListener = () => { + if (this.selectionIndex === -1 && this.filteredCommands.length) { + this.selectionIndex = 0; + } + }; + + protected legendClickListener = (event: MouseEvent) => { + const target = event.currentTarget as HTMLElement; + + const label = target.dataset.label; + + if (!label) return; + + this.value = `${label}:`; + this.autofocusTarget.focus(); + }; + + //#region Rendering + + protected override renderCloseButton(): SlottedTemplateResult { + return null; + } + + protected renderCommands(): SlottedTemplateResult { + const { selectionIndex, value, filteredCommands } = this; + + return guard([filteredCommands, selectionIndex, value], () => { + const grouped = Object.groupBy(filteredCommands, (command) => command.group || ""); + + let globalIndex = 0; + + return html`
    + ${repeat( + Object.entries(grouped), + (_group, groupIdx) => `group-${groupIdx}`, + ([groupLabel, commands], groupIdx) => html` +
    + +

    + ${groupLabel || msg("Ungrouped")} +

    +     + +
      + ${repeat( + commands!, + (_, commandIdx) => `group-${groupIdx}-command-${commandIdx}`, + (command) => { + const { label, suffix, description, prefix, namespace } = + command; + + const formattedPrefix = + prefix || formatNamespacePrefix(namespace); + + const currentIndex = globalIndex++; + const selected = selectionIndex === currentIndex; + + return html``; + }, + )} +
    +
    + `, + )} +
    `; + }); + } + + protected override render(): SlottedTemplateResult { + return html`
    +
    +
    + + + +
    +
    + ${this.renderCommands()} ${this.renderEmpty()} +
    `; + } + + protected renderEmpty(): SlottedTemplateResult { + const { filteredCommands, value } = this; + + if (filteredCommands.length) { + return null; + } + + if (value.startsWith(this.actionNamespaceSymbol)) { + return html`${msg("No commands")} +
    + ${msg("No matching commands.", { + id: "command-palette.no-matching-commands", + })} +
    +     `; + } + + return html`${msg("No commands")} +
    + ${msg("No commands are currently available.", { + id: "command-palette.no-commands", + })} +
    +     `; + } + + //#endregion +} + +declare global { + interface HTMLElementTagNameMap { + "ak-command-palette-modal": AKCommandPaletteModal; + } +} diff --git a/web/src/elements/commands/ak-command-palette-user-modal.ts b/web/src/elements/commands/ak-command-palette-user-modal.ts new file mode 100644 index 0000000000..3fcd94c3cc --- /dev/null +++ b/web/src/elements/commands/ak-command-palette-user-modal.ts @@ -0,0 +1,156 @@ +import "#elements/LoadingOverlay"; + +import { DEFAULT_CONFIG } from "#common/api/config"; +import { isCausedByAbortError } from "#common/errors/network"; + +import { AKCommandPaletteModal } from "#elements/commands/ak-command-palette-modal"; +import { PaletteCommandDefinition, PaletteCommandNamespace } from "#elements/commands/shared"; +import { navigate } from "#elements/router/RouterOutlet"; +import { SlottedTemplateResult } from "#elements/types"; + +import { CoreApi } from "@goauthentik/api"; + +import { msg } from "@lit/localize"; +import { PropertyValues } from "lit"; +import { html } from "lit-html"; +import { customElement, state } from "lit/decorators.js"; + +@customElement("ak-command-palette-user-modal") +export class AKCommandPaletteUserModal extends AKCommandPaletteModal { + #api = new CoreApi(DEFAULT_CONFIG); + protected loadingOverlay = this.ownerDocument.createElement("ak-loading-overlay"); + + public override placeholder = msg("Type a username or email address...", { + id: "command-palette-placeholder-user-search", + desc: "Placeholder for the user search command in the admin interface", + }); + + @state() + protected loading = false; + + #abortController: AbortController | null = null; + + /** + * A helper function to gracefully handle aborted requests. + * + * @see {@linkcode isCausedByAbortError} for the underlying implementation. + */ + protected suppressAbortError = (error: unknown) => { + if (isCausedByAbortError(error)) { + this.logger.info(`Aborted: ${error.message}`); + + return; + } + + throw error; + }; + + public async refreshUsers(): Promise { + this.loading = true; + this.#abortController?.abort(); + + this.#abortController = new AbortController(); + + return this.#api + .coreUsersList( + { + isActive: true, + includeGroups: true, + search: this.value, + }, + { + signal: this.#abortController.signal, + }, + ) + .then((users) => { + this.commands = new Set(); + const currentValue = this.value; + + const commands = users.results.map((user): PaletteCommandDefinition => { + const label = user.email ? `${user.username} (${user.email})` : user.username; + + return { + namespace: PaletteCommandNamespace.Action, + keywords: user.groups, + label, + action: () => navigate(`/identity/users/${user.pk}`), + group: msg("Users"), + }; + }); + this.setCommands(commands, [], currentValue); + }) + .catch(this.suppressAbortError) + .catch((error) => { + this.logger.error("Failed to fetch users", error); + this.setCommands([]); + }) + .finally(() => { + this.loading = false; + }); + } + + #refreshTimeout = -1; + + protected override inputListener = () => { + clearTimeout(this.#refreshTimeout); + + this.#refreshTimeout = window.setTimeout(() => { + this.refreshUsers().then(() => { + this.synchronizeFilteredCommands(); + }); + }, 250); + }; + + protected override resolveSelectedCommandIndex(event: SubmitEvent): number { + if (this.loading) { + return -1; + } + + return super.resolveSelectedCommandIndex(event); + } + + protected override createFallbackCommands(): [] { + return []; + } + + protected override renderCommands(): SlottedTemplateResult { + if (this.loading) { + return [this.loadingOverlay, super.renderCommands()]; + } + + return super.renderCommands(); + } + + protected override renderEmpty(): SlottedTemplateResult { + if (this.loading && !this.filteredCommands) { + return html`${msg("Fetching users...")} + `; + } + + if (this.filteredCommands.length) { + return null; + } + + return html`${msg("No matching users")} +
    + ${msg("No matching users.", { + id: "command-palette.no-matching-users", + })} +
    +     `; + } + + public override firstUpdated(changedProperties: PropertyValues): void { + super.firstUpdated(changedProperties); + + this.refreshUsers(); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ak-command-palette-user-modal": AKCommandPaletteUserModal; + } +} diff --git a/web/src/elements/commands/ak-command-palette.css b/web/src/elements/commands/ak-command-palette.css new file mode 100644 index 0000000000..a7a4161293 --- /dev/null +++ b/web/src/elements/commands/ak-command-palette.css @@ -0,0 +1,17 @@ +[data-is="command-palette-modal"] { + display: block; +} + +.ak-c-modal:has([data-is="command-palette-modal"]) { + overflow: visible; + --ak-c-modal--MarginBlockStart: 25dvh; + --ak-c-modal--BackgroundColor: var(--pf-global--palette--purple-700); + --ak-c-modal--BorderColor: var(--pf-global--palette--purple-700); + --ak-c-modal__backdrop--active--BackdropFilter: blur(1px); + --ak-c-modal__backdrop--active--BackgroundColor: hsla(0, 0%, 0%, 0.25); + + --ak-c-command-palette--BackdropFilter: blur(4px); + + border-radius: var(--pf-global--BorderRadius--sm); + backdrop-filter: var(--ak-c-command-palette--BackdropFilter); +} diff --git a/web/src/elements/commands/ak-command-palette.ts b/web/src/elements/commands/ak-command-palette.ts new file mode 100644 index 0000000000..8c3eb8eef3 --- /dev/null +++ b/web/src/elements/commands/ak-command-palette.ts @@ -0,0 +1,78 @@ +import "#elements/commands/ak-command-palette-modal"; + +import HostStyles from "./ak-command-palette.css"; + +import { AKElement } from "#elements/Base"; +import { AKCommandPaletteModal } from "#elements/commands/ak-command-palette-modal"; +import { listen } from "#elements/decorators/listen"; + +import { ConsoleLogger, Logger } from "#logger/browser"; + +import { customElement } from "lit/decorators.js"; + +@customElement("ak-command-palette") +export class AKCommandPalette extends AKElement { + public static hostStyles = [HostStyles]; + + protected createRenderRoot(): HTMLElement | DocumentFragment { + return this; + } + + protected logger: Logger; + + public readonly dialog: HTMLDialogElement; + public readonly modal: AKCommandPaletteModal; + public readonly defaultSlot: HTMLSlotElement; + + protected activationKeys = new Set(["k", "/"]); + + constructor() { + super(); + + this.logger = ConsoleLogger.prefix(this.tagName.toLowerCase()); + + this.dialog = this.ownerDocument.createElement("dialog"); + this.modal = this.ownerDocument.createElement("ak-command-palette-modal"); + this.defaultSlot = this.ownerDocument.createElement("slot"); + + this.dialog.appendChild(this.modal); + this.dialog.appendChild(this.defaultSlot); + } + + @listen("keydown", { passive: false, capture: true }) + protected keydownListener = (event: KeyboardEvent) => { + if (!this.activationKeys.has(event.key) || (!event.metaKey && !event.ctrlKey)) { + return; + } + + event.preventDefault(); + + this.logger.info("Toggling command palette"); + + const open = this.modal.open; + + if (!open) { + if (event.shiftKey) { + this.modal.value = this.modal.actionNamespaceSymbol; + } else if (event.key === "/") { + this.modal.value = this.modal.searchNamespaceSymbol; + } + } + + this.modal.open = !open; + }; + + public showListener = (): void => { + this.modal.open = true; + }; + + protected override render() { + return this.dialog; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ak-command-palette": AKCommandPalette; + } +} diff --git a/web/src/elements/commands/events.ts b/web/src/elements/commands/events.ts new file mode 100644 index 0000000000..531cadebc5 --- /dev/null +++ b/web/src/elements/commands/events.ts @@ -0,0 +1,28 @@ +import type { PaletteCommandDefinition } from "#elements/commands/shared"; + +/** + * Event dispatched when the available commands in the command palette change. + * This is used by the command palette to update the list of available commands. + */ +export class AKCommandChangeEvent extends Event { + public static readonly eventName = "ak-command-change"; + + public readonly commands: readonly PaletteCommandDefinition[]; + public readonly previousCommands: readonly PaletteCommandDefinition[] | null; + + constructor( + commands: PaletteCommandDefinition[], + previousCommands?: PaletteCommandDefinition[] | null, + ) { + super(AKCommandChangeEvent.eventName, { bubbles: true, composed: true }); + + this.commands = commands; + this.previousCommands = previousCommands ?? null; + } +} + +declare global { + interface WindowEventMap { + [AKCommandChangeEvent.eventName]: AKCommandChangeEvent; + } +} diff --git a/web/src/elements/commands/shared.ts b/web/src/elements/commands/shared.ts new file mode 100644 index 0000000000..da3b791702 --- /dev/null +++ b/web/src/elements/commands/shared.ts @@ -0,0 +1,165 @@ +import { AKCommandChangeEvent } from "#elements/commands/events"; +import { AKModal } from "#elements/modals/ak-modal"; +import { SlottedTemplateResult } from "#elements/types"; + +import { AboutModal } from "#admin/AdminInterface/AboutModal"; + +import { msg, str } from "@lit/localize"; + +export const PaletteCommandNamespace = { + Action: "action", + Navigation: "navigation", + Search: "search", +} as const; + +export type PaletteCommandNamespace = + (typeof PaletteCommandNamespace)[keyof typeof PaletteCommandNamespace]; + +/** + * A symbol used to namespace commands in the command palette. + * This is used to separate different types of commands, such as actions, navigation, etc. + */ +export const CommandNamespaceSymbol = { + [PaletteCommandNamespace.Action]: ">", + [PaletteCommandNamespace.Navigation]: ":", + [PaletteCommandNamespace.Search]: "/", +} satisfies Record; + +/** + * A set of all command namespace symbols, used to quickly check if a user input contains a namespace symbol. + */ +export const CommandNamespaceSymbolIndex = new Set(Object.values(CommandNamespaceSymbol)); + +/** + * Given a user input, attempt to resolve it to a command namespace. + * This is used to determine which commands to show in the command palette based on the user's input. + */ +export function resolveCommandNamespace( + value: string, +): [query: string, namespace?: PaletteCommandNamespace] { + for (const [namespace, symbol] of Object.entries(CommandNamespaceSymbol)) { + const index = value.indexOf(symbol); + + if (index === -1) { + continue; + } + + return [value.slice(index + symbol.length), namespace as PaletteCommandNamespace]; + } + + return [value]; +} + +/** + * Common human-readable prefixes for commands in the command palette. + */ +export const CommandPrefix = { + JumpTo: () => msg("Jump to", { id: "command-palette.prefix.jump-to" }), + SearchFor: () => msg("Search for", { id: "command-palette.prefix.search-for" }), + Open: () => msg("Open", { id: "command-palette.prefix.open" }), + View: () => msg("View", { id: "command-palette.prefix.view" }), +} as const; + +export function formatNamespacePrefix(namespace: PaletteCommandNamespace): string | null { + switch (namespace) { + case PaletteCommandNamespace.Navigation: + return CommandPrefix.JumpTo(); + } + + return null; +} + +/** + * Common human-readable suffixes for commands in the command palette. + */ +export const CommandSuffix = { + NewTab: () => msg("New Tab", { id: "command-palette.suffix.new-tab" }), + Peek: () => msg("Peek", { id: "command-palette.suffix.peek" }), +} as const; + +export type PaletteCommandAction = ( + this: AKModal, + data: D, + event?: Event, +) => unknown | Promise; + +export interface PaletteCommandDefinitionInit { + namespace?: PaletteCommandNamespace; + label: string; + keywords?: string[]; + prefix?: string; + suffix?: string; + description?: SlottedTemplateResult; + group?: string; + details?: D; + weight?: number; + action: PaletteCommandAction; +} + +export interface PaletteCommandDefinition extends PaletteCommandDefinitionInit { + namespace: PaletteCommandNamespace; +} + +export interface CommandPaletteStateInit { + commands?: PaletteCommandDefinition[] | null; + target?: EventTarget; +} + +export class CommandPaletteState { + #commands: PaletteCommandDefinition[] | null = null; + #target: EventTarget; + + declare parentElement: HTMLDialogElement | null; + + constructor({ commands = null, target = window }: CommandPaletteStateInit = {}) { + this.#commands = commands; + this.#target = target ?? window; + } + + public set(nextCommandsInit: PaletteCommandDefinitionInit[] | null): void { + const previousCommands = this.#commands; + const nextCommands: PaletteCommandDefinition[] = (nextCommandsInit ?? []).map( + (command) => ({ + namespace: command.namespace ?? PaletteCommandNamespace.Action, + ...command, + }), + ); + + this.#commands = nextCommands; + + this.#target.dispatchEvent(new AKCommandChangeEvent(nextCommands, previousCommands)); + } + + public clear(): void { + this.set(null); + } +} + +export function createCommonCommands(): PaletteCommandDefinitionInit[] { + return [ + { + label: msg("Integrations"), + prefix: msg("View", { id: "command-palette.prefix.view" }), + suffix: CommandSuffix.NewTab(), + action: () => window.open("https://integrations.goauthentik.io/", "_blank"), + group: msg("Documentation"), + }, + { + label: msg("Release notes"), + action: () => window.open(import.meta.env.AK_DOCS_RELEASE_NOTES_URL, "_blank"), + prefix: msg("View", { id: "command-palette.prefix.view" }), + suffix: msg(str`New in ${import.meta.env.AK_VERSION}`, { + id: "command-palette.suffix.new-in", + }), + group: msg("authentik"), + }, + { + label: msg("About authentik", { + id: "command-palette.about-authentik", + }), + action: AboutModal.open, + prefix: msg("View", { id: "command-palette.prefix.view" }), + group: msg("authentik"), + }, + ]; +} diff --git a/web/src/elements/controllers/SessionContextController.ts b/web/src/elements/controllers/SessionContextController.ts index 3f192334f7..8a72c47365 100644 --- a/web/src/elements/controllers/SessionContextController.ts +++ b/web/src/elements/controllers/SessionContextController.ts @@ -1,20 +1,34 @@ +import { DEFAULT_CONFIG } from "#common/api/config"; import { type APIResult, isAPIResultReady } from "#common/api/responses"; +import { globalAK } from "#common/global"; import { applyThemeChoice, formatColorScheme } from "#common/theme"; import { createUIConfig, DefaultUIConfig } from "#common/ui/config"; import { autoDetectLanguage } from "#common/ui/locale/utils"; import { me } from "#common/users"; +import { + CommandPaletteState, + PaletteCommandDefinitionInit, + PaletteCommandNamespace, +} from "#elements/commands/shared"; import { ReactiveContextController } from "#elements/controllers/ReactiveContextController"; import { AKConfigMixin, kAKConfig } from "#elements/mixins/config"; import { kAKLocale, type LocaleMixin } from "#elements/mixins/locale"; -import { SessionContext, SessionMixin, UIConfigContext } from "#elements/mixins/session"; +import { + canAccessAdmin, + SessionContext, + SessionMixin, + UIConfigContext, +} from "#elements/mixins/session"; +import { AKDrawerChangeEvent } from "#elements/notifications/events"; import type { ReactiveElementHost } from "#elements/types"; -import { SessionUser } from "@goauthentik/api"; +import { CoreApi, SessionUser } from "@goauthentik/api"; import { setUser } from "@sentry/browser"; import { ContextProvider } from "@lit/context"; +import { msg } from "@lit/localize"; /** * A controller that provides the session information to the element. @@ -52,38 +66,128 @@ export class SessionContextController extends ReactiveContextController): void { this.context.setValue(session); this.host.session = session; - if (isAPIResultReady(session)) { - const localeHint: string | undefined = session.user.settings.locale; + if (!isAPIResultReady(session)) return; - if (localeHint) { - const locale = autoDetectLanguage(localeHint); - this.logger.info(`Activating user's configured locale '${locale}'`); - this.host[kAKLocale]?.setLocale(locale); - } + const localeHint: string | undefined = session.user.settings.locale; - const { settings = {} } = session.user || {}; - - const nextUIConfig = createUIConfig(settings); - this.uiConfigContext.setValue(nextUIConfig); - this.host.uiConfig = nextUIConfig; - const colorScheme = formatColorScheme(nextUIConfig.theme.base); - - applyThemeChoice(colorScheme, this.host.ownerDocument); - - const config = this.host[kAKConfig]; - - if (config?.errorReporting.sendPii) { - this.logger.info("Sentry with PII enabled."); - - setUser({ email: session.user.email }); - } + if (localeHint) { + const locale = autoDetectLanguage(localeHint); + this.logger.info(`Activating user's configured locale '${locale}'`); + this.host[kAKLocale]?.setLocale(locale); } + + const { settings = {} } = session.user || {}; + + const nextUIConfig = createUIConfig(settings); + this.uiConfigContext.setValue(nextUIConfig); + this.host.uiConfig = nextUIConfig; + const colorScheme = formatColorScheme(nextUIConfig.theme.base); + + applyThemeChoice(colorScheme, this.host.ownerDocument); + + const config = this.host[kAKConfig]; + + if (config?.errorReporting.sendPii) { + this.logger.info("Sentry with PII enabled."); + + setUser({ email: session.user.email }); + } + + this.#refreshCommandsFrameID = requestAnimationFrame(this.#refreshCommands); } + #refreshCommands = (): void => { + const session = this.context.value; + + if (!isAPIResultReady(session)) { + this.#commands.clear(); + return; + } + + const base = globalAK().api.base; + const group = msg("Session"); + const weight = 0.5; + + const commands: PaletteCommandDefinitionInit[] = [ + { + namespace: PaletteCommandNamespace.Navigation, + + label: msg("User settings"), + prefix: msg("Navigate to", { id: "command-palette.prefix.navigate" }), + group, + weight, + action: () => { + window.location.assign(`${base}if/user/#/settings`); + }, + }, + ]; + + const { notificationDrawer, apiDrawer } = this.host.uiConfig?.enabledFeatures ?? {}; + const drawerGroup = msg("Interface"); + + if (apiDrawer) { + commands.push({ + label: msg("API requests drawer", { + id: "command-palette.label.api-requests-drawer", + }), + prefix: msg("Toggle", { id: "command-palette.prefix.toggle" }), + group: drawerGroup, + weight, + action: AKDrawerChangeEvent.dispatchAPIToggle, + }); + } + + if (notificationDrawer) { + commands.push({ + label: msg("Notifications drawer", { + id: "command-palette.label.notifications-drawer", + }), + prefix: msg("Toggle", { id: "command-palette.prefix.toggle" }), + group: drawerGroup, + weight, + + action: AKDrawerChangeEvent.dispatchNotificationsToggle, + }); + } + + if (canAccessAdmin(session.user)) { + commands.push({ + label: msg("Admin interface"), + prefix: msg("Navigate to", { id: "command-palette.prefix.navigate" }), + group, + weight, + action: () => { + window.location.assign(`${base}if/admin/`); + }, + }); + } + + if (session.original) { + commands.push({ + label: msg("Stop impersonation"), + suffix: msg("Reloads page", { id: "command-palette.prefix.reloads-page" }), + group, + weight, + action: async () => { + await new CoreApi(DEFAULT_CONFIG).coreUsersImpersonateEndRetrieve(); + window.location.reload(); + }, + }); + } + + this.#commands.set(commands); + }; + public override hostConnected() { this.logger.debug("Host connected, refreshing session"); this.refresh(); @@ -91,6 +195,7 @@ export class SessionContextController extends ReactiveContextController -
    - ${this.nonSubmittable - ? nothing - : html` { - return this.confirm(); - }} - class=${this.actionLevel} - > - ${this.action}  `} +
    + ${msg("Form actions")} { this.open = false; }} - class="pf-m-secondary" + class="pf-m-plain" > ${msg("Cancel")} -
    `; + ${this.nonSubmittable + ? nothing + : html` { + return this.confirm(); + }} + class=${this.actionLevel} + >${this.action}`} + `; } } diff --git a/web/src/elements/forms/DeleteBulkForm.ts b/web/src/elements/forms/DeleteBulkForm.ts index a7e8cf94e6..a109fed6f9 100644 --- a/web/src/elements/forms/DeleteBulkForm.ts +++ b/web/src/elements/forms/DeleteBulkForm.ts @@ -135,7 +135,7 @@ export class DeleteBulkForm extends ModalButton { public objectLabel: string | null = null; @property({ type: String, attribute: "action-label" }) - public actionLabel: string | null = null; + public submitLabel: string | null = null; @property({ type: String, attribute: "action-subtext" }) public actionSubtext: string | null = null; @@ -207,8 +207,8 @@ export class DeleteBulkForm extends ModalButton { return html`

    - ${this.actionLabel - ? this.actionLabel + ${this.submitLabel + ? this.submitLabel : msg(str`Delete ${this.objectLabel}`)}

    @@ -233,24 +233,21 @@ export class DeleteBulkForm extends ModalButton { >
    -
    - { - return this.confirm(); - }} - class="pf-m-danger" - > - ${this.buttonLabel}   +
    + ${msg("Form actions")} { this.open = false; }} - class="pf-m-secondary" + class="pf-m-plain" > ${msg("Cancel")} -
    `; + + this.confirm()} class="pf-m-danger"> + ${this.buttonLabel} + + `; } } diff --git a/web/src/elements/forms/DeleteForm.ts b/web/src/elements/forms/DeleteForm.ts index b3f69a520c..a630190267 100644 --- a/web/src/elements/forms/DeleteForm.ts +++ b/web/src/elements/forms/DeleteForm.ts @@ -146,24 +146,26 @@ export class DeleteForm extends ModalButton { }), ) : nothing} -
    +
    + ${msg("Form actions")} + + { + this.open = false; + }} + class="pf-m-plain" + > + ${msg("Cancel")} + { return this.confirm(); }} class="pf-m-danger" > - ${msg("Delete")}   - { - this.open = false; - }} - class="pf-m-secondary" - > - ${msg("Cancel")} + ${msg("Delete")} -
    `; + `; } } diff --git a/web/src/elements/forms/Form.css b/web/src/elements/forms/Form.css new file mode 100644 index 0000000000..0822f83d89 --- /dev/null +++ b/web/src/elements/forms/Form.css @@ -0,0 +1,14 @@ +:host { + display: block; +} + +select[multiple] { + height: 15em; +} + +[part="form-wrapper"] { + display: flex; + flex-flow: column; + gap: var(--pf-global--spacer--md); + min-height: 3rem; +} diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts index 89d12e05df..d8bcce6bfc 100644 --- a/web/src/elements/forms/Form.ts +++ b/web/src/elements/forms/Form.ts @@ -1,3 +1,7 @@ +import "#elements/LoadingOverlay"; + +import { isFormField } from "./form-associated-element"; + import { EVENT_REFRESH } from "#common/constants"; import { APIError, @@ -6,27 +10,34 @@ import { pluckFallbackFieldErrors, } from "#common/errors/network"; import { APIMessage, MessageLevel } from "#common/messages"; -import { dateToUTC } from "#common/temporal"; -import { isControlElement } from "#elements/AkControlElement"; import { AKElement } from "#elements/Base"; -import { AKFormSubmittedEvent } from "#elements/forms/events"; +import { reportInvalidFields } from "#elements/forms/errors"; +import Styles from "#elements/forms/Form.css"; import { reportValidityDeep } from "#elements/forms/FormGroup"; import { PreventFormSubmit } from "#elements/forms/helpers"; import { HorizontalFormElement } from "#elements/forms/HorizontalFormElement"; +import { serializeForm } from "#elements/forms/serialization"; import { showMessage } from "#elements/messages/MessageContainer"; +import { TransclusionElement } from "#elements/modals/shared"; +import { + DialogInit, + modalInvoker, + ModalInvokerDirectiveResult, + ModalInvokerInit, + renderModal, +} from "#elements/modals/utils"; import { SlottedTemplateResult } from "#elements/types"; -import { createFileMap, isNamedElement, NamedElement } from "#elements/utils/inputs"; +import { createFileMap } from "#elements/utils/inputs"; -import { ErrorProp } from "#components/ak-field-errors"; +import { ConsoleLogger } from "#logger/browser"; -import { instanceOfValidationError, ValidationError } from "@goauthentik/api"; +import { instanceOfValidationError } from "@goauthentik/api"; -import { snakeCase } from "change-case"; - -import { msg } from "@lit/localize"; -import { css, CSSResult, html, nothing, TemplateResult } from "lit"; -import { property, state } from "lit/decorators.js"; +import { msg, str } from "@lit/localize"; +import { CSSResult, html, nothing } from "lit"; +import { createRef, ref } from "lit-html/directives/ref.js"; +import { customElement, property, state } from "lit/decorators.js"; import { guard } from "lit/directives/guard.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -39,158 +50,15 @@ import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-gro import PFSwitch from "@patternfly/patternfly/components/Switch/switch.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css"; -function isIgnored(element: T) { - if (!(element instanceof HTMLElement)) return false; - - return element.dataset.formIgnore === "true"; -} - -/** - * Recursively assign `value` into `json` while interpreting the dot-path of `element.name` - */ -function assignValue( - element: NamedElement, - value: unknown, - destination: Record, -): void { - let parent = destination; - - if (!element.name?.includes(".")) { - parent[element.name] = value; - return; - } - - const nameElements = element.name.split("."); - - for (let index = 0; index < nameElements.length - 1; index++) { - const nameEl = nameElements[index]; - // Ensure all nested structures exist - if (!(nameEl in parent)) { - parent[nameEl] = {}; - } - parent = parent[nameEl] as { [key: string]: unknown }; - } - - parent[nameElements[nameElements.length - 1]] = value; -} - -/** - * Convert the elements of the form to JSON.[4] - * - */ -export function serializeForm>(elements: Iterable): T { - const json: Record = {}; - - Array.from(elements).forEach((element) => { - element.requestUpdate(); - - if (element.hidden) return; - - if (isNamedElement(element) && isControlElement(element)) { - return assignValue(element, element.json(), json); - } - - const inputElement = element.querySelector("[name]"); - - if (element.hidden || !inputElement || isIgnored(inputElement)) { - return; - } - - if (isNamedElement(element) && isControlElement(inputElement)) { - return assignValue(element, inputElement.json(), json); - } - - if (inputElement instanceof HTMLSelectElement && inputElement.multiple) { - const selectElement = inputElement as unknown as HTMLSelectElement; - - return assignValue( - inputElement, - Array.from(selectElement.selectedOptions, (v) => v.value), - json, - ); - } - - if (inputElement instanceof HTMLInputElement) { - if (inputElement.type === "date") { - return assignValue(inputElement, inputElement.valueAsDate, json); - } - - if (inputElement.type === "datetime-local") { - const valueAsNumber = inputElement.valueAsNumber; - return assignValue( - inputElement, - isNaN(valueAsNumber) ? undefined : dateToUTC(new Date(valueAsNumber)), - json, - ); - } - - if ("type" in inputElement.dataset && inputElement.dataset.type === "datetime-local") { - // Workaround for Firefox <93, since 92 and older don't support - // datetime-local fields - const date = new Date(inputElement.value); - return assignValue( - inputElement, - isNaN(date.getTime()) ? undefined : dateToUTC(date), - json, - ); - } - - if (inputElement.type === "checkbox") { - return assignValue(inputElement, inputElement.checked, json); - } - } - - if (isNamedElement(inputElement) && "value" in inputElement) { - return assignValue(inputElement, inputElement.value, json); - } - - console.error(`authentik/forms: Could not find value for element`, { - element, - inputElement, - json, - }); - - throw new Error(`Could not find value for element ${inputElement.tagName}`); - }); - - return json as unknown as T; -} - -//#region Validation Reporting - -/** - * Assign all input-related errors to their respective elements. - */ -function reportInvalidFields( - parsedError: ValidationError, - elements: Iterable, -): HorizontalFormElement[] { - const invalidFields: HorizontalFormElement[] = []; - - for (const element of elements) { - element.requestUpdate(); - - const elementName = element.name; - - if (!elementName) continue; - - const snakeProperty = snakeCase(elementName); - const errorMessages: ErrorProp[] = parsedError[snakeProperty] ?? []; - - element.errorMessages = errorMessages; - - if (Array.isArray(errorMessages) && errorMessages.length) { - invalidFields.push(element); - } - } - - return invalidFields; -} - -//#endregion - //#region Form +/** + * A helper type, used for typing the submit event of forms that extends this base class. + */ +export interface AKFormSubmitEvent extends SubmitEvent { + target: Form; +} + /** * Form * @@ -205,10 +73,15 @@ function reportInvalidFields( * @slot - Where the form goes if `renderForm()` returns undefined. * @fires ak-refresh - Dispatched when the form has been successfully submitted and data has changed. * @fires ak-submitted - Dispatched when the form is submitted. - * + * @fires submit - The native submit event, re-dispatched after a successful submission for parent components to listen for. * @csspart partname - description * - * @todo + * + * @template T - The type of the form data to be sent. Must be serializable by `serializeForm()`. + * @template D - The type of the data returned by the `send()` method. Defaults to the same as `T`. * + * + * @remarks + * TODO: * * 1. Specialization: Separate this component into three different classes: * - The base class @@ -219,7 +92,57 @@ function reportInvalidFields( * the input types, rather than here. (i.e. "Polymorphism is better than * switch.") */ -export abstract class Form> extends AKElement { +@customElement("ak-form") +export class Form, D = T> + extends AKElement + implements TransclusionElement +{ + public static styles: CSSResult[] = [ + PFCard, + PFButton, + PFForm, + PFAlert, + PFInputGroup, + PFFormControl, + PFSwitch, + PFTitle, + Styles, + ]; + + /** + * A helper method to create an invoker for a modal containing this form. + * + * @see {@linkcode modalInvoker} for the underlying implementation. + */ + public static asModalInvoker(init?: ModalInvokerInit): ModalInvokerDirectiveResult { + return modalInvoker(this, init); + } + + /** + * Show a modal containing this form. + * + * @see {@linkcode renderModal} for the underlying implementation. + * @returns A promise that resolves when the modal is closed. + */ + public static showModal(init?: DialogInit): Promise { + return renderModal(new this(), init); + } + + /** + * Show this form in a modal dialog. + * + * This is useful when working with a form instance directly, rather than + * in a Lit HTML template. + * + * @see {@linkcode Form.showModal} for the static version. + * @see {@linkcode renderModal} for the underlying implementation. + */ + public showModal(init?: DialogInit): Promise { + return renderModal(this, init); + } + + protected logger = ConsoleLogger.prefix(`form/${this.tagName.toLowerCase()}`); + /** * Send the serialized form to its destination. * @@ -227,7 +150,7 @@ export abstract class Form> extends AKElement { * @returns A promise that resolves when the data has been sent. * @abstract */ - protected send?(data: T): Promise; + protected send?(data: NonNullable): Promise; viewportCheck = true; @@ -239,36 +162,58 @@ export abstract class Form> extends AKElement { @property({ type: String }) public autocomplete?: Exclude; - @property({ type: String }) - public headline?: string; + @property({ type: String, useDefault: true }) + public headline?: string | null = null; - @property({ type: String, attribute: "action-label" }) - public actionLabel?: string; + @property({ type: String, attribute: "action-label", useDefault: true }) + public submitLabel: string | null = null; + + @property({ type: String, attribute: "cancel-label", useDefault: true }) + public cancelButtonLabel: string | null = null; //#endregion + /** + * A reference to the form element. + */ + protected formRef = createRef(); + + /** + * A live reference to the form element, either rendered in-line or slotted. + */ public get form(): HTMLFormElement | null { - return this.renderRoot?.querySelector("form") || null; + if (this.formRef.value) { + return this.formRef.value; + } + + const slottedForm = + this.defaultSlot + .assignedElements({ flatten: true }) + .find((element): element is HTMLFormElement => { + return element instanceof HTMLFormElement; + }) || null; + + return slottedForm || this.renderRoot.querySelector("form") || null; } + @state() + protected loading = false; + + protected loadingOverlay = this.ownerDocument.createElement("ak-loading-overlay"); + @state() protected nonFieldErrors: readonly string[] | null = null; - static styles: CSSResult[] = [ - PFCard, - PFButton, - PFForm, - PFAlert, - PFInputGroup, - PFFormControl, - PFSwitch, - PFTitle, - css` - select[multiple] { - height: 15em; - } - `, - ]; + /** + * Optiona singular label for the type of entity this form creates/edits, used in success messages and the like. + */ + @property({ type: String }) + public entitySingular: string | null = null; + /** + * Optiona plural label for the type of entity this form creates/edits, used in success messages and the like. + */ + @property({ type: String }) + public entityPlural: string | null = null; /** * Called by the render function. @@ -283,6 +228,8 @@ export abstract class Form> extends AKElement { return rect.x + rect.y + rect.width + rect.height !== 0; } + protected defaultSlot: HTMLSlotElement = this.ownerDocument.createElement("slot"); + /** * An overridable method for returning a success message after a successful submission. * @@ -310,13 +257,55 @@ export abstract class Form> extends AKElement { * An overridable method for returning a formatted error message after a failed submission. */ protected formatAPIErrorMessage(error: APIError): APIMessage | null { + const fallback = pluckFallbackFieldErrors(error); + return { message: msg("There was an error submitting the form."), - description: pluckErrorDetail(error, pluckFallbackFieldErrors(error)[0]), + description: pluckErrorDetail(error, fallback[0]), level: MessageLevel.error, }; } + /** + * An overridable method for formatting the form headline. + */ + protected formatHeadline(headline = this.headline, modifier?: string | null): string { + if (headline) { + return headline; + } + + const noun = this.entitySingular; + modifier ||= msg("New", { + id: "model-form.headline.modifier.new", + }); + + if (!noun) { + return modifier; + } + + return msg(str`${modifier} ${noun}`, { + id: "model-form.headline", + desc: "The headline for a form that creates or updates a model instance.", + }); + } + + /** + * An overridable method for formatting the submit button label. + */ + protected formatSubmitLabel(submitLabel = this.submitLabel): string { + if (submitLabel) { + return submitLabel; + } + + return this.entitySingular + ? msg(str`Create ${this.entitySingular}`, { + id: "model-form.create-submit", + }) + : msg("Create", { + id: "model-form.create-submit-no-entity", + }); + } + //#region Public methods public reset(): void { @@ -339,11 +328,11 @@ export abstract class Form> extends AKElement { } public reportValidity(): boolean { - const form = this.form; + const { form } = this; if (!form) { - console.warn("authentik/forms: unable to check validity, no form found", this); - return false; + this.logger.warn("Unable to check validity, no form found", this); + return true; } return reportValidityDeep(form); @@ -356,14 +345,30 @@ export abstract class Form> extends AKElement { /** * Convert the elements of the form to JSON.[4] */ - protected serialize(): T | null { - const elements = this.shadowRoot?.querySelectorAll("ak-form-element-horizontal"); + public toJSON(): D { + const elements = this.renderRoot.querySelectorAll("ak-form-element-horizontal"); - if (!elements) { - return {} as T; + if (elements.length) { + return serializeForm(elements); } - return serializeForm(elements); + const assignedElements = this.defaultSlot.assignedElements({ flatten: true }); + + const [firstAssignedElement] = assignedElements; + + if (assignedElements.length === 1 && isFormField(firstAssignedElement)) { + return firstAssignedElement.toJSON() as D; + } + + const namedElements = assignedElements.filter((element): element is AKElement => { + return element.hasAttribute("name"); + }); + + if (namedElements.length) { + return serializeForm(namedElements); + } + + return {} as D; } /** @@ -371,15 +376,19 @@ export abstract class Form> extends AKElement { * this to work. If processing the data results in an error, we catch the error, distribute * field-levels errors to the fields, and send the rest of them to the Notifications. */ - public submit = (event: SubmitEvent): Promise => { - event.preventDefault(); + public submit = (submitEvent: SubmitEvent): Promise => { + submitEvent.preventDefault(); - let data: T | null; + if (!this.reportValidity()) { + return Promise.resolve(false); + } + + let data: D; try { - data = this.serialize(); + data = this.toJSON(); } catch (error) { - console.error("authentik/forms: An error occurred while serializing the form.", error); + this.logger.error("An error occurred while serializing the form.", error); showMessage({ level: MessageLevel.error, @@ -393,9 +402,9 @@ export abstract class Form> extends AKElement { if (!data) return Promise.resolve(false); if (!this.send) { - throw new TypeError( - `authentik/forms: No send() method implemented on form ${this.tagName}`, - ); + this.logger.info("No send() method implemented on form, dispatching submit event"); + this.dispatchEvent(submitEvent); + return Promise.resolve(false); } return this.send(data) @@ -409,7 +418,8 @@ export abstract class Form> extends AKElement { }), ); - this.dispatchEvent(new AKFormSubmittedEvent(response)); + // Re-dispatch the submit event so that parent components can listen for it. + this.dispatchEvent(submitEvent); return response; }) @@ -440,8 +450,8 @@ export abstract class Form> extends AKElement { } else { this.nonFieldErrors = pluckFallbackFieldErrors(parsedError); - console.error( - "authentik/forms: API rejected the form submission due to an invalid field that doesn't appear to be in the form. This is likely a bug in authentik.", + this.logger.error( + "API rejected the form submission due to an invalid field that doesn't appear to be in the form. This is likely a bug in authentik.", parsedError, ); } @@ -454,28 +464,44 @@ export abstract class Form> extends AKElement { }); }; + protected doSubmit = (event: SubmitEvent): void => { + if (this.loading) { + this.logger.info("Skipping submit. Already submitting!"); + } + + this.loading = true; + + this.submit(event).finally(() => { + this.loading = false; + }); + }; + //#endregion //#endregion //#region Render - protected renderFormWrapper(): TemplateResult { + protected renderFormWrapper(): SlottedTemplateResult { const inline = this.renderForm(); if (!inline) { - return html``; + return this.defaultSlot; } - return html`
    - ${inline} -
    `; + return html`
    + +
    + ${inline} +
    +
    `; } /** @@ -512,21 +538,21 @@ export abstract class Form> extends AKElement { } /** - * An overridable method for rendering the form heading. + * An overridable method for rendering the form header. * * @remarks * If this form is slotted, such as in a modal, this method will not render anything, - * allowing the slot parent to provide the heading in a more visually appropriate manner. + * allowing the slot parent to provide the header in a more visually appropriate manner. */ - protected renderHeading(): SlottedTemplateResult { - return guard([this.assignedSlot, this.headline], () => { - if (this.assignedSlot) { + public renderHeader(force?: boolean): SlottedTemplateResult { + const { assignedSlot, headline } = this; + + return guard([force, assignedSlot, headline], () => { + if (!force && assignedSlot && (!assignedSlot.name || assignedSlot.name === "form")) { return nothing; } - return html`
    -

    ${this.headline}

    -
    `; + return this.formatHeadline(headline); }); } @@ -537,25 +563,34 @@ export abstract class Form> extends AKElement { * If this form is slotted, such as in a modal, this method will not render anything, * allowing the slot parent to provide the actions in a more visually appropriate manner. */ - protected renderActions(): SlottedTemplateResult { - return guard([this.assignedSlot], () => { - if (this.assignedSlot) { + public renderActions(force?: boolean): SlottedTemplateResult { + const { assignedSlot, submitLabel } = this; + + return guard([force, assignedSlot, submitLabel], () => { + if (!force && assignedSlot && (!assignedSlot.name || assignedSlot.name === "form")) { return nothing; } - return html`
    - ${msg("Form actions")} + return html`
    -
    `; +
    `; }); } @@ -563,8 +598,13 @@ export abstract class Form> extends AKElement { * An overridable method for rendering the form when it is visible. */ protected renderVisible(): SlottedTemplateResult { - return html`${this.renderHeading()}${this.renderNonFieldErrors()} - ${this.renderFormWrapper()}${this.renderActions()}`; + return [ + this.loading ? this.loadingOverlay : nothing, + this.renderHeader(), + this.renderNonFieldErrors(), + this.renderFormWrapper(), + this.renderActions(), + ]; } protected override render(): SlottedTemplateResult { diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts index 34df3ab512..3452628c84 100644 --- a/web/src/elements/forms/HorizontalFormElement.ts +++ b/web/src/elements/forms/HorizontalFormElement.ts @@ -1,5 +1,5 @@ -import { AkControlElement, isControlElement } from "#elements/AkControlElement"; import { AKElement } from "#elements/Base"; +import { AKControlElement, isControlElement } from "#elements/ControlElement"; import { isNameableElement, NamedElement } from "#elements/utils/inputs"; import { AKFormErrors, ErrorProp } from "#components/ak-field-errors"; @@ -68,12 +68,12 @@ export class HorizontalFormElement extends AKElement { //#endregion - #controlledElement: AkControlElement | NamedElement | null = null; + #controlledElement: AKControlElement | NamedElement | null = null; /** * The element that should be focused when the form is submitted. */ - public get focusTarget(): AkControlElement | NamedElement | null { + public get focusTarget(): AKControlElement | NamedElement | null { if (!(this.#controlledElement instanceof HTMLElement)) { return null; } diff --git a/web/src/elements/forms/ModalForm.ts b/web/src/elements/forms/ModalForm.ts index a37a492704..ad84651d39 100644 --- a/web/src/elements/forms/ModalForm.ts +++ b/web/src/elements/forms/ModalForm.ts @@ -169,7 +169,7 @@ export class ModalForm extends ModalButton { : findSlottedInstance(Form, this.formSlot); this.headingContent = slottedForm?.headline || null; - this.submitButtonContent = slottedForm?.actionLabel || null; + this.submitButtonContent = slottedForm?.submitLabel || null; }); this.addEventListener(EVENT_REFRESH, this.#refreshListener); @@ -209,15 +209,15 @@ export class ModalForm extends ModalButton { protected renderActions(): SlottedTemplateResult { return html`
    ${msg("Form actions")} - ${this.renderSubmitButton()} + ${this.renderSubmitButton()}
    `; } diff --git a/web/src/elements/forms/ModelForm.ts b/web/src/elements/forms/ModelForm.ts index f7e56ebbc0..18892b0122 100644 --- a/web/src/elements/forms/ModelForm.ts +++ b/web/src/elements/forms/ModelForm.ts @@ -4,10 +4,12 @@ import { AKRefreshEvent } from "#common/events"; import { listen } from "#elements/decorators/listen"; import { Form } from "#elements/forms/Form"; +import { asEditModalInvoker } from "#elements/modals/utils"; import { SlottedTemplateResult } from "#elements/types"; import { ConsoleLogger } from "#logger/browser"; +import { msg, str } from "@lit/localize"; import { html } from "lit"; import { property } from "lit/decorators.js"; @@ -17,6 +19,7 @@ import { property } from "lit/decorators.js"; * * @template T The type of the model instance. * @template PKT The type of the primary key of the model instance. + * @template D The result of `toJSON()`, which is the data sent to the server on submit. * * @prop {T} instance - The current instance being edited or viewed. * @prop {PKT} instancePk - The primary key of the instance to load. @@ -24,7 +27,18 @@ import { property } from "lit/decorators.js"; export abstract class ModelForm< T extends object = object, PKT extends string | number = string | number, -> extends Form { + D = T, +> extends Form { + /** + * A helper method to create an invoker for editing an instance of this form. + * + * The invoker will look for a `data-pk` attribute on the clicked element to determine which instance to load. + * + * @see {@linkcode Form.asModalInvoker} for opening a blank form in a modal. + * @see {@linkcode asInvoker} for the underlying implementation. + */ + public static asEditModalInvoker = asEditModalInvoker; + protected logger = ConsoleLogger.prefix(`model-form/${this.tagName.toLowerCase()}`); /** @@ -109,6 +123,22 @@ export abstract class ModelForm< }); }; + protected override formatSubmitLabel(): string { + if (this.#instancePk) { + return msg(str`Save Changes`, { + id: "model-form.apply-submit", + }); + } + + return super.formatSubmitLabel(); + } + + protected override formatHeadline(): string { + return super.formatHeadline(this.headline, this.#instancePk ? msg("Edit") : null); + } + + //#region Public methods + public override reset(): void { super.reset(); @@ -119,6 +149,10 @@ export abstract class ModelForm< this.requestUpdate(); } + //#endregion + + //#region Rendering + protected override renderVisible(): SlottedTemplateResult { if ((this.#instancePk && !this.instance) || !this.#initialDataLoad) { return html``; @@ -146,4 +180,6 @@ export abstract class ModelForm< return super.render(); } + + //#endregion } diff --git a/web/src/elements/forms/SearchSelect/SearchSelect.ts b/web/src/elements/forms/SearchSelect/SearchSelect.ts index acf0441370..dc869ad5cb 100644 --- a/web/src/elements/forms/SearchSelect/SearchSelect.ts +++ b/web/src/elements/forms/SearchSelect/SearchSelect.ts @@ -7,7 +7,7 @@ import { EVENT_REFRESH } from "#common/constants"; import { APIError, parseAPIResponseError, pluckErrorDetail } from "#common/errors/network"; import { groupBy } from "#common/utils"; -import { AkControlElement } from "#elements/AkControlElement"; +import { AKControlElement } from "#elements/ControlElement"; import { PreventFormSubmit } from "#elements/forms/helpers"; import type { GroupedOptions, @@ -36,7 +36,7 @@ export interface ISearchSelectBase { } export abstract class SearchSelectBase - extends AkControlElement + extends AKControlElement implements ISearchSelectBase { static styles = []; diff --git a/web/src/elements/forms/SearchSelect/ak-portal.ts b/web/src/elements/forms/SearchSelect/ak-portal.ts index 85af7dcdcb..4acadfe4c6 100644 --- a/web/src/elements/forms/SearchSelect/ak-portal.ts +++ b/web/src/elements/forms/SearchSelect/ak-portal.ts @@ -1,4 +1,5 @@ import { randomId } from "#elements/utils/randomId"; +import { resolveInterface } from "#elements/utils/render-roots"; import { autoUpdate, computePosition, flip, hide } from "@floating-ui/dom"; @@ -68,13 +69,17 @@ export class Portal extends LitElement implements IPortal { this.setAttribute("data-ouia-component-type", "ak-portal"); this.setAttribute("data-ouia-component-id", this.getAttribute("id") || randomId()); - this.dropdownContainer = document.createElement("div"); + this.dropdownContainer = this.ownerDocument.createElement("div"); this.dropdownContainer.dataset.managedBy = "ak-portal"; if (this.name) { this.dropdownContainer.dataset.managedFor = this.name; } - document.body.append(this.dropdownContainer); + const interfaceElement = resolveInterface(); + const container = + interfaceElement.renderRoot.querySelector("dialog:open") || this.ownerDocument.body; + + container.append(this.dropdownContainer); if (!this.anchor) { throw new Error("Tether entrance initialized incorrectly: missing anchor"); diff --git a/web/src/elements/forms/SearchSelect/ak-search-select-view.ts b/web/src/elements/forms/SearchSelect/ak-search-select-view.ts index eb4cec3fe8..5718d886f0 100644 --- a/web/src/elements/forms/SearchSelect/ak-search-select-view.ts +++ b/web/src/elements/forms/SearchSelect/ak-search-select-view.ts @@ -229,11 +229,13 @@ export class SearchSelectView extends AKElement implements ISearchSelectView { this.setAttribute("data-ouia-component-safe", "true"); } - public override firstUpdated() { + public override firstUpdated(changed: PropertyValues) { + super.firstUpdated(changed); + // Route around Lit's scheduling algorithm complaining about re-renders - window.setTimeout(() => { + requestAnimationFrame(() => { this.inputRefIsAvailable = Boolean(this.#inputRef?.value); - }, 0); + }); } connectedCallback() { diff --git a/web/src/elements/forms/errors.ts b/web/src/elements/forms/errors.ts new file mode 100644 index 0000000000..0cad5479ba --- /dev/null +++ b/web/src/elements/forms/errors.ts @@ -0,0 +1,42 @@ +import { HorizontalFormElement } from "#elements/forms/HorizontalFormElement"; + +import { ErrorProp } from "#components/ak-field-errors"; + +import { ValidationError } from "@goauthentik/api"; + +import { snakeCase } from "change-case"; + +//#region Validation Reporting + +/** + * Assign all input-related errors to their respective elements. + */ +export function reportInvalidFields( + parsedError: ValidationError, + elements: Iterable, +): HorizontalFormElement[] { + const invalidFields: HorizontalFormElement[] = []; + + for (const element of elements) { + element.requestUpdate(); + + const elementName = element.name; + + if (!elementName) continue; + + const snakeProperty = snakeCase(elementName); + const propLike: ErrorProp | ErrorProp[] = parsedError[snakeProperty] ?? []; + + const errorMessages = Array.isArray(propLike) ? propLike : [propLike]; + + element.errorMessages = errorMessages; + + if (Array.isArray(errorMessages) && errorMessages.length) { + invalidFields.push(element); + } + } + + return invalidFields; +} + +//#endregion diff --git a/web/src/elements/forms/form-associated-element.ts b/web/src/elements/forms/form-associated-element.ts index 898a0c67ca..0bbef650a1 100644 --- a/web/src/elements/forms/form-associated-element.ts +++ b/web/src/elements/forms/form-associated-element.ts @@ -8,25 +8,44 @@ import { property } from "lit/decorators.js"; import { createRef, Ref } from "lit/directives/ref.js"; /** - * A subset of form associated {@linkcode ElementInternals} properties. - * - * @see {@linkcode FormAssociatedElement} for usage. + * Properties common to elements which represent a form field. */ -export interface FormAssociated extends Pick< - ElementInternals, - | "form" - | "validity" - | "validationMessage" - | "willValidate" - | "labels" - | "checkValidity" - | "reportValidity" -> { +export interface FormField { /** * The name of the input, provided to the form. */ name: string | null; + /** + * A JSON representation of the value. + */ + toJSON(): Jsonifiable; +} + +export function isFormField(element: object): element is FormField { + if (!("toJSON" in element)) return false; + + return typeof element.toJSON === "function"; +} + +/** + * A subset of form associated {@linkcode ElementInternals} properties. + * + * @see {@linkcode FormAssociatedElement} for usage. + */ +export interface FormAssociated + extends + FormField, + Pick< + ElementInternals, + | "form" + | "validity" + | "validationMessage" + | "willValidate" + | "labels" + | "checkValidity" + | "reportValidity" + > { /** * The type of the input, provided to the form. */ @@ -41,11 +60,6 @@ export interface FormAssociated extends Pick< * Whether or not the input is read-only. */ readonly?: boolean; - - /** - * A JSON representation of the value. - */ - toJSON(): Jsonifiable; } export type FormValue = File | string | FormData | null; diff --git a/web/src/elements/forms/serialization.ts b/web/src/elements/forms/serialization.ts new file mode 100644 index 0000000000..9c3a9f9da2 --- /dev/null +++ b/web/src/elements/forms/serialization.ts @@ -0,0 +1,122 @@ +import { dateToUTC } from "#common/temporal"; + +import { AKElement } from "#elements/Base"; +import { isControlElement } from "#elements/ControlElement"; +import { isNamedElement, NamedElement } from "#elements/utils/inputs"; + +function isIgnored(element: T) { + if (!(element instanceof HTMLElement)) return false; + + return element.dataset.formIgnore === "true"; +} + +/** + * Recursively assign `value` into `json` while interpreting the dot-path of `element.name` + */ +function assignValue( + element: NamedElement, + value: unknown, + destination: Record, +): void { + let parent = destination; + + if (!element.name?.includes(".")) { + parent[element.name] = value; + return; + } + + const nameElements = element.name.split("."); + + for (let index = 0; index < nameElements.length - 1; index++) { + const nameEl = nameElements[index]; + // Ensure all nested structures exist + if (!(nameEl in parent)) { + parent[nameEl] = {}; + } + parent = parent[nameEl] as { [key: string]: unknown }; + } + + parent[nameElements[nameElements.length - 1]] = value; +} + +/** + * Convert the elements of the form to JSON. + * + */ +export function serializeForm>(elements: Iterable): T { + const json: Record = {}; + + Array.from(elements).forEach((element) => { + element.requestUpdate(); + + if (element.hidden) return; + + if (isNamedElement(element) && isControlElement(element)) { + return assignValue(element, element.toJSON(), json); + } + + const inputElement = element.querySelector("[name]"); + + if (element.hidden || !inputElement || isIgnored(inputElement)) { + return; + } + + if (isNamedElement(element) && isControlElement(inputElement)) { + return assignValue(element, inputElement.toJSON(), json); + } + + if (inputElement instanceof HTMLSelectElement && inputElement.multiple) { + const selectElement = inputElement as unknown as HTMLSelectElement; + + return assignValue( + inputElement, + Array.from(selectElement.selectedOptions, (v) => v.value), + json, + ); + } + + if (inputElement instanceof HTMLInputElement) { + if (inputElement.type === "date") { + return assignValue(inputElement, inputElement.valueAsDate, json); + } + + if (inputElement.type === "datetime-local") { + const valueAsNumber = inputElement.valueAsNumber; + return assignValue( + inputElement, + isNaN(valueAsNumber) ? undefined : dateToUTC(new Date(valueAsNumber)), + json, + ); + } + + if ("type" in inputElement.dataset && inputElement.dataset.type === "datetime-local") { + // Workaround for Firefox <93, since 92 and older don't support + // datetime-local fields + const date = new Date(inputElement.value); + return assignValue( + inputElement, + isNaN(date.getTime()) ? undefined : dateToUTC(date), + json, + ); + } + + if (inputElement.type === "checkbox") { + return assignValue(inputElement, inputElement.checked, json); + } + } + + if (isNamedElement(inputElement) && "value" in inputElement) { + return assignValue(inputElement, inputElement.value, json); + } + + console.error(`authentik/forms: Could not find value for element`, { + element, + inputElement, + json, + }); + + throw new Error(`Could not find value for element ${inputElement.tagName}`); + }); + + return json as unknown as T; +} diff --git a/web/src/elements/messages/MessageContainer.ts b/web/src/elements/messages/MessageContainer.ts index d47ea0af3c..c39ab5053b 100644 --- a/web/src/elements/messages/MessageContainer.ts +++ b/web/src/elements/messages/MessageContainer.ts @@ -4,6 +4,7 @@ import { APIError, pluckErrorDetail } from "#common/errors/network"; import { APIMessage, MessageLevel } from "#common/messages"; import { AKElement } from "#elements/Base"; +import Styles from "#elements/messages/styles.css"; import { ifPresent } from "#elements/utils/attributes"; import { ConsoleLogger } from "#logger/browser"; @@ -11,8 +12,8 @@ import { ConsoleLogger } from "#logger/browser"; import { instanceOfValidationError } from "@goauthentik/api"; import { msg } from "@lit/localize"; -import { css, CSSResult, html } from "lit"; -import { customElement, property, state } from "lit/decorators.js"; +import { CSSResult, html, PropertyValues } from "lit"; +import { customElement, property } from "lit/decorators.js"; import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css"; @@ -88,25 +89,13 @@ export function showAPIErrorMessage(error: APIError, unique = false): void { @customElement("ak-message-container") export class MessageContainer extends AKElement { - @state() - protected messages: APIMessage[] = []; + @property({ attribute: false }) + public messages: APIMessage[] = []; @property() alignment: "top" | "bottom" = "top"; - static styles: CSSResult[] = [ - PFAlertGroup, - css` - /* Fix spacing between messages */ - ak-message { - display: block; - } - :host([alignment="bottom"]) .pf-c-alert-group.pf-m-toast { - bottom: var(--pf-c-alert-group--m-toast--Top); - top: unset; - } - `, - ]; + static styles: CSSResult[] = [PFAlertGroup, Styles]; constructor() { super(); @@ -119,6 +108,22 @@ export class MessageContainer extends AKElement { }); } + public override connectedCallback(): void { + super.connectedCallback(); + + this.popover = "manual"; + } + + public updated(changedProperties: PropertyValues) { + super.updated(changedProperties); + + if (changedProperties.has("messages") && this.messages.length) { + // Invoking the popover is only needed for browsers that support dialogs + // that support HTMLDialogElement.showModal() + this.showPopover?.(); + } + } + public addMessage(message: APIMessage, unique = false): void { if (unique) { const match = this.messages.some((m) => m.message === message.message); @@ -131,6 +136,11 @@ export class MessageContainer extends AKElement { #removeMessage = (message: APIMessage) => { this.messages = this.messages.filter((v) => v !== message); + + if (this.messages.length === 0) { + // Just the same, hide the popover for browsers that support native dialogs. + this.hidePopover?.(); + } }; render() { diff --git a/web/src/elements/messages/styles.css b/web/src/elements/messages/styles.css new file mode 100644 index 0000000000..36c029d3f5 --- /dev/null +++ b/web/src/elements/messages/styles.css @@ -0,0 +1,21 @@ +:host(:popover-open) { + border: none; + padding: 0; + margin: 0; + background-color: transparent; + color: currentColor; +} + +:host(:popover-open)::backdrop { + display: none; +} + +/* Fix spacing between messages */ +ak-message { + display: block; +} + +:host([alignment="bottom"]) .pf-c-alert-group.pf-m-toast { + bottom: var(--pf-c-alert-group--m-toast--Top); + top: unset; +} diff --git a/web/src/elements/modals/ak-modal.ts b/web/src/elements/modals/ak-modal.ts new file mode 100644 index 0000000000..41bd53b9b9 --- /dev/null +++ b/web/src/elements/modals/ak-modal.ts @@ -0,0 +1,587 @@ +import { PFSize } from "#common/enums"; + +import { AKElement } from "#elements/Base"; +import { isTransclusionElement, TransclusionElement } from "#elements/modals/shared"; +import Styles from "#elements/modals/styles.css"; +import { + DialogInit, + modalInvoker, + ModalInvokerDirectiveResult, + ModalInvokerInit, + renderDialog, +} from "#elements/modals/utils"; +import { SlottedTemplateResult } from "#elements/types"; + +import { ConsoleLogger, Logger } from "#logger/browser"; + +import { msg } from "@lit/localize"; +import { CSSResult, html, PropertyValues } from "lit"; +import { createRef, ref } from "lit-html/directives/ref.js"; +import { customElement, property, state } from "lit/decorators.js"; +import { guard } from "lit/directives/guard.js"; + +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 PFForm from "@patternfly/patternfly/components/Form/form.css"; +import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css"; +import PFPage from "@patternfly/patternfly/components/Page/page.css"; +import PFTitle from "@patternfly/patternfly/components/Title/title.css"; + +@customElement("ak-modal") +export class AKModal extends AKElement { + public static shadowRootOptions: ShadowRootInit = { + ...AKElement.shadowRootOptions, + delegatesFocus: true, + }; + + /** + * An optional aria-label for the modal dialog, used for accessibility purposes. + */ + public static formatARIALabel?(): string; + + /** + * Whether the modal should open the parent dialog element when it is connected to the DOM. + */ + public static openOnConnect = true; + + /** + * Show a modal containing this element. + * + * @see {@linkcode renderDialog} for the underlying implementation. + * @returns A promise that resolves when the modal is closed. + */ + public static showModal(init?: DialogInit) { + return renderDialog(new this(), init); + } + + /** + * A helper method to create an invoker for a modal containing this form. + * + * @see {@linkcode modalInvoker} for the underlying implementation. + */ + public static asModalInvoker(init?: ModalInvokerInit): ModalInvokerDirectiveResult { + return modalInvoker(this, init); + } + + public static styles: CSSResult[] = [ + PFButton, + PFForm, + PFTitle, + PFFormControl, + PFPage, + PFCard, + PFContent, + Styles, + ]; + + #hostResizeObserver: ResizeObserver; + + //#region Protected Properties + + protected logger: Logger; + + /** + * An optional Lit ref which can automatically synchronize the modal's height with the element's height. + */ + protected scrollContainerRef = createRef(); + + /** + * A ref to the modal title element, used for accessibility purposes (e.g., setting `aria-labelledby` on the dialog). + */ + protected modalTitleRef = createRef(); + + declare parentElement: HTMLDialogElement | null; + + //#region Public Properties + + @property({ type: String, useDefault: true }) + public headline: string | null = null; + + /** + * Whether the parent dialog element is currently open. + */ + public get open(): boolean { + return this.parentElement?.open ?? false; + } + + @property({ type: Boolean, attribute: false, reflect: false }) + public set open(value: boolean) { + if (value) { + this.show(); + } else { + this.close(); + } + } + + @property({ type: String }) + public size: PFSize = PFSize.Large; + + @property({ type: String }) + public cancelButtonLabel: string | null = null; + + protected defaultSlot: HTMLSlotElement; + protected beforeBodySlot: HTMLSlotElement; + + @state() + protected slottedElement: TransclusionElement | null = null; + + //#endregion + + //#region Public methods + + /** + * Show the modal, rendering its contents. + */ + public show() { + const dialogElement = this.parentElement; + + if (!dialogElement) { + this.logger.debug("No parentElement, cannot show modal", this); + + return; + } + + dialogElement.addEventListener("transitionend", this.fadeInListener, { + once: true, + passive: true, + }); + + dialogElement.showModal(); + + dialogElement.classList.add("fade-in"); + } + + /** + * Close the modal, fading it out and then removing it from the DOM, + * optionally with a return value. + * + * @param returnValue The return value for the dialog, if any. + */ + public close(returnValue?: string) { + const dialogElement = this.parentElement; + + if (!dialogElement) { + this.logger.debug("No parentElement, cannot close modal", this); + return; + } + + dialogElement.addEventListener( + "transitionend", + (event) => this.delegateClose(event, returnValue), + { once: true, passive: true }, + ); + + dialogElement.classList.remove("fade-in", "fade-in-complete"); + } + + //#endregion + + //#region Event listeners + + /** + * A stable reference to the dialog's open event listener. + * + * This is useful for simplifying adding and removing event listeners. + */ + public showListener = () => { + this.requestUpdate(); + this.show(); + }; + + #heightSyncFrameID = -1; + /** + * A map of observed elements to their expected sizes, + * used to prevent unnecessary height synchronizations. + */ + #expectedSizes = new WeakMap(); + + protected lastScrollHeight = 0; + + protected synchronizeHeight: ResizeObserverCallback = ([entry]) => { + this.#heightSyncFrameID = requestAnimationFrame(() => { + const dialogElement = this.parentElement; + + if (!dialogElement || !dialogElement.open) { + return; + } + + const expectedSize = this.#expectedSizes.get(entry.target); + const blockSize = Math.ceil(entry.borderBoxSize[0].blockSize); + const desiredSize = Math.max(entry.target.scrollHeight, blockSize); + + if (desiredSize === expectedSize) { + return; + } + + dialogElement.style.height = desiredSize + "px"; + + this.#expectedSizes.set(entry.target, desiredSize); + }); + }; + + #heightResetAnimationFrameID = -1; + + protected resetHeight = () => { + cancelAnimationFrame(this.#heightResetAnimationFrameID); + cancelAnimationFrame(this.#heightSyncFrameID); + + this.#heightResetAnimationFrameID = requestAnimationFrame(() => { + if (this.parentElement) { + this.parentElement.style.height = ""; + } + + this.#heightResetAnimationFrameID = requestAnimationFrame(() => { + const scrollContainer = this.scrollContainerRef.value || this; + const scrollHeight = scrollContainer.scrollHeight; + + this.lastScrollHeight = scrollHeight; + }); + }); + }; + + protected fadeInListener = async (event: TransitionEvent) => { + this.logger.debug("fade-in complete", event); + + this.removeEventListener("transitionend", this.fadeInListener); + + const dialogElement = this.parentElement; + + if (!dialogElement) { + this.logger.debug("Skipping height synchronization, no dialog element", this); + return; + } + + dialogElement.classList.add("fade-in-complete"); + + dialogElement.style.height = dialogElement.clientHeight + "px"; + + const scrollContainer = this.scrollContainerRef.value || this; + + this.#hostResizeObserver.observe(scrollContainer); + + window.addEventListener("resize", this.resetHeight, { + passive: true, + }); + }; + + #closing = false; + + /** + * Delegate the close action to the parent dialog element, + * ensuring that the correct event listeners are triggered and the modal is properly closed. + */ + protected delegateClose(event: TransitionEvent, returnValue?: string) { + if (this.#closing) { + return; + } + + this.#closing = true; + + this.parentElement?.close(returnValue); + + requestAnimationFrame(() => { + this.#closing = false; + this.#hostResizeObserver.unobserve(this); + window.removeEventListener("resize", this.resetHeight); + this.resetHeight(); + }); + } + + /** + * A stable reference to the dialog's submit event listener, which + * depending on the parent {@linkcode HTMLDialogElement.closedBy} property, + * may close the dialog when a form inside the modal is submitted. + */ + public submitListener = (_event: SubmitEvent) => { + if (this.parentElement?.closedBy === "none") { + return; + } + + this.close(); + }; + + /** + * A stable reference to the dialog's close event listener. + * + * This is useful for simplifying adding and removing event listeners. + */ + public closeListener = (_event?: Event) => { + this.close(); + }; + + /** + * A stable reference to the dialog's backdrop click event listener. + * + * @remarks + * Note that if the browser supports {@linkcode HTMLDialogElement}'s `closeBy` property, + * the backdrop click may trigger a "cancel" event instead of a "click" event. + */ + protected backdropClickListener = (event: Event) => { + if (event.target === this.parentElement) { + this.close(); + } + }; + + /** + * A stable reference to the dialog's cancel event listener. + * + * This is useful for simplifying adding and removing event listeners. + */ + protected cancelListener = (event: Event) => { + if (!this.parentElement) { + return; + } + + event.preventDefault(); + + this.close(); + }; + + //#endregion + + //#region Lifecycle + + /** + * A bound render method that can be safely passed as a callback without losing the correct `this` context. + * + * @remarks + * This allows the implementing class to use `render`, reducing the mental + * overhead of which method should be used for rendering content. + */ + protected renderContent: () => unknown; + + public constructor() { + super(); + + this.logger = ConsoleLogger.prefix(this.tagName.toLowerCase()); + + this.renderContent = this.render.bind(this); + this.render = this.renderInternal; + + this.#hostResizeObserver = new ResizeObserver(this.synchronizeHeight); + + this.defaultSlot = this.ownerDocument.createElement("slot"); + + this.beforeBodySlot = this.ownerDocument.createElement("slot"); + this.beforeBodySlot.name = "before-body"; + } + + public override connectedCallback(): void { + super.connectedCallback(); + + const dialogElement = this.parentElement; + + if (!dialogElement) { + this.logger.debug("Skipping connectedCallback, no parentElement", this); + return; + } + + if (!(dialogElement instanceof HTMLDialogElement)) { + throw new TypeError( + `authentik/modal: ${this.tagName.toLowerCase()} must be placed inside a element.`, + ); + } + + const tagName = this.tagName.toLowerCase(); + + dialogElement.dataset.akModal = tagName; + dialogElement.classList.add("ak-c-modal", this.size); + + // eslint-disable-next-line wc/no-self-class + this.classList.add("ak-c-modal__content"); + + dialogElement.addEventListener("cancel", this.cancelListener); + dialogElement.addEventListener("click", this.backdropClickListener, { passive: true }); + + this.addEventListener("submit", this.submitListener); + + const { openOnConnect } = this.constructor as typeof AKModal; + + if (openOnConnect) { + this.show(); + } + } + + public override disconnectedCallback(): void { + super.disconnectedCallback(); + + this.#hostResizeObserver.disconnect(); + window.removeEventListener("resize", this.resetHeight); + } + + public override updated(changedProperties: PropertyValues): void { + super.updated(changedProperties); + + const assignedElements = this.defaultSlot.assignedElements({ flatten: true }); + + const form = assignedElements.find(isTransclusionElement) ?? null; + + if (form && form !== this.slottedElement) { + this.slottedElement = form; + this.slottedElement.viewportCheck = false; + } + + const dialogElement = this.parentElement; + + if (dialogElement && dialogElement.open) { + requestAnimationFrame(() => { + const scrollContainer = this.scrollContainerRef.value || this; + const scrollHeight = scrollContainer.scrollHeight; + + if (scrollHeight !== this.lastScrollHeight) { + this.resetHeight(); + } + }); + } + + requestAnimationFrame(this.synchronizeARIA); + } + + /** + * Synchronize the modal's ARIA attributes with its content for accessibility purposes. + * + * @remarks + * The preferred order for determining the modal's accessible name is: + * 1. The text content of the element referenced by {@linkcode modalTitleRef}, if it exists and has non-empty text. + * 2. The static {@linkcode AKModal.formatARIALabel} property of the modal class, if it is defined. + * 3. Otherwise, no accessible name is set on the dialog. + */ + protected synchronizeARIA = (): void => { + const dialogElement = this.parentElement; + + if (!dialogElement) return; + + const ariaLabel = (this.constructor as typeof AKModal).formatARIALabel?.(); + + const modalTitleElement = this.modalTitleRef.value; + + const label = modalTitleElement?.textContent?.trim() ?? ariaLabel ?? null; + + dialogElement.ariaLabel = label; + }; + + //#endregion + + //#region Render + + /** + * An overridable method that determines whether the modal content should be rendered. + * + * By default, the modal content is only rendered when the modal is open, + * to avoid unnecessary rendering and potential issues with elements that + * require being in the DOM to function properly (e.g., autofocus). + */ + protected shouldRenderModalContent(): boolean { + return this.open; + } + + /** + * The internal render method, including the close button and header, which are common to all modals. + */ + protected renderInternal() { + if (!this.shouldRenderModalContent()) { + return super.render(); + } + + return [ + this.renderCloseButton(), + this.renderHeader(), + this.renderContent(), + this.renderActions(), + ]; + } + + protected renderCloseButton(): SlottedTemplateResult { + return html``; + } + + /** + * Render the modal header. + * + * This method may be overridden to customize the modal header. + * + * @protected + * @abstract + */ + protected renderHeader(): SlottedTemplateResult { + const { headline, slottedElement } = this; + const hasHeaderSlot = this.hasSlotted("header"); + + return guard([headline, hasHeaderSlot, slottedElement], () => { + if (!headline && !hasHeaderSlot && !slottedElement) { + return null; + } + + const content = slottedElement ? slottedElement.renderHeader?.(true) : null; + + return html`
    +
    +

    + ${this.headline} + + ${content} +

    +
    +
    `; + }); + } + + /** + * Render the modal actions. + * + * This method may be overridden to customize the modal actions. + * + * @protected + * @abstract + */ + protected renderActions(): SlottedTemplateResult { + const { slottedElement } = this; + const hasActionsSlot = this.hasSlotted("actions"); + return guard([hasActionsSlot, slottedElement], () => { + if (!hasActionsSlot && !slottedElement) { + return null; + } + + return html`
    + + + ${slottedElement ? slottedElement.renderActions?.(true) : null} +
    `; + }); + } + + /** + * Render the modal content. + * + * Note that this method is only called when the modal is open. + * + * @protected + * @abstract + */ + protected render(): unknown { + return html`${this.beforeBodySlot} +
    ${this.defaultSlot}
    `; + } + + //#endregion +} + +declare global { + interface HTMLElementTagNameMap { + "ak-modal": AKModal; + } +} diff --git a/web/src/elements/modals/shared.ts b/web/src/elements/modals/shared.ts new file mode 100644 index 0000000000..f763b7bf0c --- /dev/null +++ b/web/src/elements/modals/shared.ts @@ -0,0 +1,40 @@ +import { SlottedTemplateResult } from "#elements/types"; + +/** + * An element that is designed to included in a dialog or other container that supports transclusion. + */ +export interface TransclusionElement extends Element { + /** + * An optional method to render a header for the element, which can be used + * when the element is transcluded into a dialog or other container that supports headers. + * + * @param force Whether to force the contents to render. + */ + renderHeader?(force?: boolean): SlottedTemplateResult; + + /** + * An optional method to render action buttons for the element, which can be used + * when the element is transcluded into a dialog or other container that supports action buttons. + * + * @param force Whether to force the contents to render. + */ + renderActions?(force?: boolean): SlottedTemplateResult; + + cancelButtonLabel?: string | null; + + /** + * Whether the element should perform a viewport check before rendering. + * + * @deprecated Remove this after all modals are migrated to use the new dialog system, which handles this automatically. + */ + viewportCheck?: boolean; +} + +/** + * Type predicate to determine if an element is a {@linkcode TransclusionElement}. + * + * @param element The element to check. + */ +export function isTransclusionElement(element: Element): element is TransclusionElement { + return "renderHeader" in element || "renderActions" in element; +} diff --git a/web/src/elements/modals/styles.css b/web/src/elements/modals/styles.css new file mode 100644 index 0000000000..8063d567eb --- /dev/null +++ b/web/src/elements/modals/styles.css @@ -0,0 +1,148 @@ +:host { + display: block; +} + +/* #region Buttons */ + +:host > .pf-c-button { + position: absolute; + top: var(--ak-c-modal--c-button--Top); + right: var(--ak-c-modal--c-button--Right); +} + +:host > .pf-c-button + .ak-c-modal__header { + margin-right: var(--ak-c-modal--c-button--sibling--MarginRight); +} + +/* #endregion */ + +/* #region Header */ + +.ak-c-modal__header { + display: flex; + flex-direction: column; + flex-shrink: 0; + padding-top: var(--ak-c-modal__header--PaddingTop); + padding-bottom: var(--ak-c-modal__header--PaddingBottom); + padding-right: var(--ak-c-modal__header--PaddingRight); + padding-left: var(--ak-c-modal__header--PaddingLeft); +} + +.ak-c-modal__header.pf-m-help { + display: flex; + flex-direction: row; +} + +.ak-c-modal__header:last-child { + padding-bottom: var(--ak-c-modal__header--last-child--PaddingBottom); +} + +.ak-c-modal__header + .ak-c-modal__body, +.ak-c-modal__header + slot + .ak-c-modal__body { + --ak-c-modal__body--PaddingTop: 0; +} + +.ak-c-modal__header-main { + flex-grow: 1; + min-width: 0; +} + +/* #endregion */ + +/* #region Title */ + +.ak-c-modal__title, +.ak-c-modal__title-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ak-c-modal__title { + flex: 0 0 auto; + font-family: var(--ak-c-modal__title--FontFamily); + font-size: var(--ak-c-modal__title--FontSize); + line-height: var(--ak-c-modal__title--LineHeight); +} + +.ak-c-modal__title.pf-m-icon { + display: flex; +} + +.ak-c-modal__title-icon { + margin-right: var(--ak-c-modal__title-icon--MarginRight); + color: var(--ak-c-modal__title-icon--Color); +} + +.ak-c-modal__description { + padding-top: var(--ak-c-modal__description--PaddingTop); +} + +/* #endregion */ + +/* #region Body */ + +.ak-c-modal__body { + flex: 1 1 auto; + + max-height: var(--ak-c-modal__body--MaxHeight); + min-height: var(--ak-c-modal__body--MinHeight); + padding-top: var(--ak-c-modal__body--PaddingTop); + padding-right: var(--ak-c-modal__body--PaddingRight); + padding-left: var(--ak-c-modal__body--PaddingLeft); + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + word-break: break-word; + -webkit-overflow-scrolling: touch; + max-height: calc( + 75dvh - 2rem - var(--ak-c-modal__header--PaddingTop) - + var(--ak-c-modal__footer--PaddingBottom) + ); +} + +.ak-c-modal__body:last-child { + padding-bottom: var(--ak-c-modal__body--last-child--PaddingBottom); +} + +.ak-c-modal__footer { + display: flex; + flex: 0 0 auto; + align-items: center; + justify-content: end; + padding-top: var(--ak-c-modal__footer--PaddingTop); + padding-right: var(--ak-c-modal__footer--PaddingRight); + padding-bottom: var(--ak-c-modal__footer--PaddingBottom); + padding-left: var(--ak-c-modal__footer--PaddingLeft); + + gap: var(--pf-global--spacer--xs); + + @media screen and (min-width: 576px) { + gap: var(--pf-global--spacer--sm); + } +} + +/* #endregion */ + +/* #region Footer */ + +fieldset.ak-c-modal__footer { + --ak-fieldset__legend--PaddingInlineBase: var(--pf-global--spacer--md); + padding-block: calc(var(--ak-fieldset__legend--PaddingInlineBase) / 2); + border-inline: none; + border-block-end: none; + + --ak-c-modal__footer--c-button--sm--MarginRight: var( + --ak-c-modal__footer--c-button--MarginRight + ); + + & > ak-spinner-button:not(:last-child) { + margin-right: var(--ak-c-modal__footer--c-button--MarginRight); + } +} + +/* #endregion */ + +/* slot[name="before-body"]:has-slotted + [part="body"] { + margin-block-start: var(--pf-global--spacer--lg); +} */ diff --git a/web/src/elements/modals/utils.ts b/web/src/elements/modals/utils.ts new file mode 100644 index 0000000000..51af4618e3 --- /dev/null +++ b/web/src/elements/modals/utils.ts @@ -0,0 +1,332 @@ +/** + * @file Modal and dialog rendering utilities. + */ + +import "#elements/modals/ak-modal"; + +import { AKModal } from "#elements/modals/ak-modal"; +import { SlottedTemplateResult } from "#elements/types"; +import { isAKElementConstructor } from "#elements/utils/unsafe"; + +import { ElementPart, html, noChange, render } from "lit"; +import { + directive, + Directive, + DirectiveResult, + PartInfo, + PartType, +} from "lit-html/async-directive.js"; + +//#region Rendering + +/** + * Resolves the container element for a dialog, given an optional parent element or selector. + * + * If the parent element is not provided or cannot be resolved, the document body is returned. + * + * @param ownerDocument The document to query for the parent element. Defaults to the global document. + * @param parentElement An optional HTMLElement or selector string to use as the dialog container. + * + * @returns The resolved container HTMLElement for the dialog. + */ +export function resolveDialogContainer( + ownerDocument: Document = document, + parentElement?: HTMLElement | string | null, +): HTMLElement { + if (parentElement instanceof HTMLElement) { + return parentElement; + } + + if (typeof parentElement === "string") { + const resolvedElement = ownerDocument.querySelector(parentElement); + + if (resolvedElement instanceof HTMLElement) { + return resolvedElement; + } + } + + return ownerDocument.body; +} + +/** + * Initialization options for dialog and modal rendering functions. + */ +export interface DialogInit { + ownerDocument?: Document; + parentElement?: HTMLElement | string | null; + closedBy?: ClosedBy; + classList?: string[]; + signal?: AbortSignal; +} + +/** + * Renders a dialog with the given template. + * + * @param renderable The template to render inside the dialog. + * @param init Initialization options for the dialog. + * + * @returns A promise that resolves when the dialog is closed. + * + * @remarks + * In the context of the {@link HTMLDialogElement}, we distinguish between __modal__ + * dialogs, which are shown using the `showModal()` method and block interaction with the rest of the page, + * and __non-modal__ dialogs, which are shown using the `show()` method and allow interaction with the rest of the page. + * + * For almost all use cases in authentik, dialogs are modal. However, {@linkcode AKModal} + * (and its implementors) are what a developer would typically consider to be the modal itself. + * + * Here be dragons! The delination between "dialog" and "modal" is not based on + * the presence of a backdrop or blocking behavior, but rather on the underlying HTML elements + * and method used to display it. + * + * **Incorrect usage can impact accessibility significantly.** + */ +export function renderDialog( + renderable: unknown, + { + ownerDocument = document, + signal, + parentElement = ownerDocument.getElementById("interface-root"), + closedBy = "any", + classList = [], + }: DialogInit = {}, +): Promise { + const dialog = ownerDocument.createElement("dialog"); + dialog.classList.add("ak-c-modal", ...classList); + dialog.closedBy = closedBy; + + const resolvers = Promise.withResolvers(); + + const container = resolveDialogContainer(ownerDocument, parentElement); + const shadowRoot = container.shadowRoot ?? container; + + shadowRoot.appendChild(dialog); + + const dispose = () => { + dialog.close(); + dialog.remove(); + resolvers.resolve(); + }; + + dialog.addEventListener("close", dispose, { + passive: true, + once: true, + }); + + signal?.addEventListener("abort", dispose, { + passive: true, + once: true, + }); + + render(renderable, dialog); + + return resolvers.promise; +} + +/** + * Renders a modal dialog with the given template. + * + * @param renderable The template to render inside the modal. + * @param init Initialization options for the modal. + * @returns A promise that resolves when the modal is closed. + */ +export function renderModal(renderable: unknown, init?: DialogInit): Promise { + return renderDialog(html`${renderable}`, init); +} + +export type ModalTemplate = (event: Event) => SlottedTemplateResult; +export type InvokerListener = (event: Event) => Promise | void; + +//#endregion + +//#region Invokers + +/** + * A utility function that takes a {@linkcode ModalTemplate} and returns + * a function that renders the corresponding modal dialog when invoked. + * + * @param renderer A function that returns a template result to render inside the modal dialog. + * @param init Initialization options for the modal dialog. + */ +export function asInvoker(renderer: ModalTemplate, init?: DialogInit): InvokerListener; +/** + * A utility function that takes a {@linkcode CustomElementConstructor} and returns + * a function that renders the corresponding modal dialog when invoked. + * + * @param Constructor A custom element constructor or a function that returns a template result. + * @param init Initialization options for the modal dialog. + */ +export function asInvoker( + Constructor: CustomElementConstructor, + init?: DialogInit, +): () => Promise; +/** + * A utility function that takes either a {@linkcode CustomElementConstructor} + * or a {@linkcode ModalTemplate} and returns a function that renders the corresponding modal dialog. + * + * @param input The input to render as a modal dialog, either a custom element constructor or a function that returns a template result. + * @param init Initialization options for the modal dialog. + */ +export function asInvoker( + input: ModalTemplate | CustomElementConstructor, + init?: DialogInit, +): (event?: Event) => Promise; +export function asInvoker( + input: ModalTemplate | CustomElementConstructor, + init?: DialogInit, +): (event?: Event) => Promise { + return (event?: Event) => { + const child = isAKElementConstructor(input) + ? new input() + : (input as ModalTemplate)(event!); + + if (child instanceof AKModal) { + return renderDialog(child, init); + } + + return renderModal(child, init); + }; +} + +//#endregion + +//#region Directives + +type ModalDirectiveParameters = [ + factory: ModalTemplate | CustomElementConstructor, + options?: ModalInvokerInit, +]; + +/** + * Initialization options for the {@linkcode modalInvoker} directive. + * + * @see {@linkcode DialogInit} for the underlying dialog options. + */ +export interface ModalInvokerInit extends DialogInit { + /** + * Dependencies array for memoization. The directive will only rebind + * the event listener when one of these values changes (shallow comparison). + * If not provided, the listener rebinds on every update. + */ + deps?: unknown[]; +} + +/** + * A directive that manages the event listener for an invoker function created by {@linkcode asInvoker}. + * + * Supports memoization via an optional `deps` array in the options object. When `deps` is provided, + * the directive will skip rebinding the event listener if all dep values are shallowly equal to the + * previous render. If `deps` is omitted, the listener rebinds on every update (safe default). + * + * @see {@linkcode asInvoker} for the underlying invoker. + * @see {@linkcode modalInvoker} for the Lit HTML variation. + */ +class ModalInvokerDirective extends Directive { + constructor(partInfo: PartInfo) { + super(partInfo); + if (partInfo.type !== PartType.ELEMENT) { + throw new Error("modalOpener() can only be used on an element"); + } + } + + #cleanup: (() => void) | null = null; + #prevDeps: unknown[] | null = null; + + /** + * Shallow-compare new deps against the previously stored deps. + * + * Returns `true` if deps match (i.e. we should skip rebinding). + * Returns `false` if deps are absent, previously unset, or any value differs. + */ + #depsMatch(newDeps: unknown[] | undefined): boolean { + if (!newDeps || !this.#prevDeps) return false; + if (this.#prevDeps.length !== newDeps.length) return false; + return this.#prevDeps.every((prev, i) => prev === newDeps[i]); + } + + update(part: ElementPart, [factory, options]: ModalDirectiveParameters): void { + const deps = options?.deps; + + // Deps provided and unchanged — skip rebind + if (this.#depsMatch(deps)) { + return; + } + + // Tear down old listener before rebinding + if (this.#cleanup) { + this.#cleanup(); + this.#cleanup = null; + } + + const listener = asInvoker(factory, options); + part.element.addEventListener("click", listener); + + const cleanup = () => { + part.element.removeEventListener("click", listener); + // Null out prevDeps so that the next render cycle always rebinds. + // This handles the case where an AbortSignal fires between renders. + this.#prevDeps = null; + }; + + if (options?.signal) { + options.signal.addEventListener("abort", cleanup, { once: true }); + } + + this.#cleanup = cleanup; + this.#prevDeps = deps ?? null; + } + + render(..._args: ModalDirectiveParameters) { + return noChange; + } +} + +/** + * A Lit HTML directive that can be used to attach a modal invoker to an element. + * + * @example Basic usage (rebinds every render): + * ```ts + * html`` + * ``` + * + * @example With memoized deps (only rebinds when deps change): + * ```ts + * html`` + * ``` + */ +export const modalInvoker = directive(ModalInvokerDirective); + +export type ModalInvokerDirectiveResult = DirectiveResult; + +export interface ModelFormLike { + instancePk?: string | number | null; +} + +export interface ModelFormLikeConstructor { + new (): ModelFormLike; +} + +/** + * A helper function to create a modal invoker for editing an instance of a form-like element. + * + * @remarks + * This is defined externally from the form itself to allow existing forms to + * easily add edit invokers without needing to extend a specific base class. + */ +export function asEditModalInvoker( + this: ModelFormLikeConstructor, + instancePk?: string | number | null, + init?: ModalInvokerInit, +): ModalInvokerDirectiveResult { + return modalInvoker( + (_event) => { + const FormConstructor = this as unknown as ModelFormLikeConstructor; + + const formElement = new FormConstructor(); + formElement.instancePk = instancePk; + + return formElement; + }, + { ...init, deps: [instancePk] }, + ); +} diff --git a/web/src/elements/router/builders.ts b/web/src/elements/router/builders.ts new file mode 100644 index 0000000000..979b474ecf --- /dev/null +++ b/web/src/elements/router/builders.ts @@ -0,0 +1,12 @@ +import { globalAK } from "#common/global"; + +/** + * Application route helpers. + * + * @TODO: This API isn't quite right yet. Revisit after the hash router is replaced. + */ +export const ApplicationRoute = { + EditURL(slug: string, base = globalAK().api.base) { + return `${base}if/admin/#/core/applications/${slug}`; + }, +} as const; diff --git a/web/src/elements/sidebar/SidebarItem.ts b/web/src/elements/sidebar/SidebarItem.ts index 2bb82f2c64..85511d626e 100644 --- a/web/src/elements/sidebar/SidebarItem.ts +++ b/web/src/elements/sidebar/SidebarItem.ts @@ -1,12 +1,9 @@ -import "#admin/common/ak-license-notice"; - -import { WithCapabilitiesConfig } from "../mixins/capabilities"; -import { WithLicenseSummary } from "../mixins/license"; - import { ROUTE_SEPARATOR } from "#common/constants"; import { AKElement } from "#elements/Base"; import { listen } from "#elements/decorators/listen"; +import { WithCapabilitiesConfig } from "#elements/mixins/capabilities"; +import { WithLicenseSummary } from "#elements/mixins/license"; import Styles from "#elements/sidebar/SidebarItem.css"; import { ifPresent } from "#elements/utils/attributes"; diff --git a/web/src/elements/sidebar/SidebarVersion.ts b/web/src/elements/sidebar/SidebarVersion.ts index fa739001db..74314e7068 100644 --- a/web/src/elements/sidebar/SidebarVersion.ts +++ b/web/src/elements/sidebar/SidebarVersion.ts @@ -1,12 +1,11 @@ import { globalAK } from "#common/global"; -import { rootInterface } from "#common/theme"; import { DefaultBrand } from "#common/ui/config"; import { AKElement } from "#elements/Base"; import { WithLicenseSummary } from "#elements/mixins/license"; import { WithVersion } from "#elements/mixins/version"; -import type { AdminInterface } from "#admin/AdminInterface/index.entrypoint"; +import { AboutModal } from "#admin/AdminInterface/AboutModal"; import { LicenseSummaryStatusEnum } from "@goauthentik/api"; @@ -26,6 +25,9 @@ export class SidebarVersion extends WithLicenseSummary(WithVersion(AKElement)) { PFButton, css` :host { + display: block; + } + footer { display: flex; width: 100%; flex-direction: column; @@ -48,37 +50,38 @@ export class SidebarVersion extends WithLicenseSummary(WithVersion(AKElement)) { if (this.licenseSummary.status !== LicenseSummaryStatusEnum.Unlicensed) { product += ` ${msg("Enterprise")}`; } - return html``; + + return html` +
    + +
    + `; } } diff --git a/web/src/admin/sources/utils.ts b/web/src/elements/sources/utils.ts similarity index 94% rename from web/src/admin/sources/utils.ts rename to web/src/elements/sources/utils.ts index d968d09495..a534caf78e 100644 --- a/web/src/admin/sources/utils.ts +++ b/web/src/elements/sources/utils.ts @@ -1,4 +1,4 @@ -import { PolicyBindingCheckTarget } from "#admin/policies/utils"; +import { PolicyBindingCheckTarget } from "#common/policies/utils"; import { msg } from "@lit/localize"; import { html, TemplateResult } from "lit"; diff --git a/web/src/elements/sync/SyncObjectForm.ts b/web/src/elements/sync/SyncObjectForm.ts index 76ead793f6..393cfa4e01 100644 --- a/web/src/elements/sync/SyncObjectForm.ts +++ b/web/src/elements/sync/SyncObjectForm.ts @@ -1,5 +1,4 @@ import "#elements/events/LogViewer"; -import "#admin/common/ak-flow-search/ak-flow-search-no-default"; import "#elements/forms/HorizontalFormElement"; import "#elements/forms/SearchSelect/index"; import "#components/ak-switch-input"; diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts index cef31ef738..168b9c91d6 100644 --- a/web/src/elements/table/Table.ts +++ b/web/src/elements/table/Table.ts @@ -19,6 +19,7 @@ import { AKElement } from "#elements/Base"; import { intersectionObserver } from "#elements/decorators/intersection-observer"; import { WithLicenseSummary } from "#elements/mixins/license"; import { WithSession } from "#elements/mixins/session"; +import { type TransclusionElement } from "#elements/modals/shared"; import { getURLParam, updateURLParams } from "#elements/router/RouteMatch"; import Styles from "#elements/table/Table.css"; import { SlottedTemplateResult } from "#elements/types"; @@ -67,9 +68,15 @@ export type TableInstance = InstanceType & { columns: TableColumn[]; }; -export abstract class Table +/** + * A base table component that handles fetching, pagination, selection, and grouping of data. + * + * @template T The type of the items to display in the table. + * @template D An optional `toJSON()` result type. + */ +export abstract class Table extends WithLicenseSummary(WithSession(AKElement)) - implements TableLike + implements TableLike, TransclusionElement { static styles: CSSResult[] = [ PFTable, @@ -152,7 +159,8 @@ export abstract class Table /** * The total number of defined and additional columns in the table. */ - #columnCount = 0; + @state() + protected columnCount = 0; #columnIDs = new WeakMap(); @@ -162,7 +170,7 @@ export abstract class Table if (this.checkbox) nextColumnCount += 1; if (this.expandable) nextColumnCount += 1; - this.#columnCount = nextColumnCount; + this.columnCount = nextColumnCount; for (const column of this.columns) { const [label] = column; @@ -216,6 +224,12 @@ export abstract class Table @property({ type: String }) public label: string | null = null; + /** + * The name of the form, used for JSON serialization. + */ + @property({ type: String, useDefault: true }) + public name: string | null = null; + @property({ attribute: false }) public data: PaginatedResponse | null = null; @@ -279,6 +293,18 @@ export abstract class Table //#endregion + //#region Public methods + + /** + * An overridable method to convert selected items to a custom JSON format, + * for example when used in a modal with a confirm button. + * + * By default, it returns the selected elements as an array, but it can be customized to return any data structure needed. + */ + public toJSON(): D[] { + return this.selectedElements as unknown as D[]; + } + //#region Lifecycle #selectAllCheckboxRef = createRef(); @@ -301,6 +327,7 @@ export abstract class Table public override connectedCallback(): void { super.connectedCallback(); this.addEventListener(EVENT_REFRESH, this.#refreshListener); + window.addEventListener("submit", this.#refreshListener); if (this.searchEnabled) { this.search = getURLParam(this.#searchParam, ""); @@ -310,9 +337,12 @@ export abstract class Table public override disconnectedCallback(): void { super.disconnectedCallback(); this.removeEventListener(EVENT_REFRESH, this.#refreshListener); + window.removeEventListener("submit", this.#refreshListener); } - protected willUpdate(changedProperties: PropertyValues): void { + protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + const interactive = isInteractiveElement(this); if (!interactive) { @@ -333,6 +363,8 @@ export abstract class Table } protected override updated(changedProperties: PropertyValues): void { + super.updated(changedProperties); + if ( (changedProperties as PropertyValues).has("columns") || changedProperties.has("checkbox") || @@ -441,10 +473,10 @@ export abstract class Table protected renderLoading(): SlottedTemplateResult { return guard( - [this.loading, this.#columnCount], + [this.loading, this.columnCount], () => html` - +
    @@ -456,7 +488,7 @@ export abstract class Table protected renderEmpty(inner?: SlottedTemplateResult): TemplateResult { return html` - +
    ${inner ?? html` return html` - + ${groupName} @@ -713,7 +745,7 @@ export abstract class Table })}" > - +
    ${this.renderExpanded(item)}
    diff --git a/web/src/elements/table/TableModal.ts b/web/src/elements/table/TableModal.ts deleted file mode 100644 index f4cabccfa6..0000000000 --- a/web/src/elements/table/TableModal.ts +++ /dev/null @@ -1,128 +0,0 @@ -import { SlottedTemplateResult } from "../types.js"; - -import { PFSize } from "#common/enums"; - -import { AKElement } from "#elements/Base"; -import { MODAL_BUTTON_STYLES } from "#elements/buttons/ModalButton"; -import { ModalShowEvent } from "#elements/controllers/ModalOrchestrationController"; -import type { Form } from "#elements/forms/Form"; -import { Table } from "#elements/table/Table"; - -import { msg } from "@lit/localize"; -import { CSSResult, html, nothing, TemplateResult } from "lit"; -import { property } from "lit/decorators.js"; - -import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css"; -import PFContent from "@patternfly/patternfly/components/Content/content.css"; -import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css"; -import PFPage from "@patternfly/patternfly/components/Page/page.css"; -import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css"; -import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css"; - -export abstract class TableModal extends Table { - @property() - public size: PFSize = PFSize.Large; - - @property({ type: Boolean }) - set open(nextValue: boolean) { - this.#open = nextValue; - - if (nextValue) { - this.fetch(); - } - } - - get open(): boolean { - return this.#open; - } - - #open = false; - - static styles: CSSResult[] = [ - ...super.styles, - PFModalBox, - PFBullseye, - PFContent, - PFBackdrop, - PFPage, - PFStack, - MODAL_BUTTON_STYLES, - ]; - - public override async fetch(): Promise { - if (!this.open) { - return; - } - - return super.fetch(); - } - - public close = () => { - this.resetForms(); - this.open = false; - }; - - resetForms(): void { - for (const form of this.querySelectorAll
    ("[slot=form]")) { - form.reset?.(); - } - } - - public show = () => { - this.open = true; - this.dispatchEvent(new ModalShowEvent(this)); - - this.querySelectorAll("*").forEach((child) => { - if ("requestUpdate" in child) { - (child as AKElement).requestUpdate(); - } - }); - }; - - #closeListener = () => { - this.open = false; - }; - - #backdropListener(event: PointerEvent) { - event.stopPropagation(); - } - - /** - * @abstract - */ - protected renderModalInner(): SlottedTemplateResult { - return this.renderTable(); - } - - /** - * @abstract - */ - protected renderModal(): SlottedTemplateResult { - return html`
    -
    - -
    -
    `; - } - - render(): TemplateResult { - return html` - ${this.open ? this.renderModal() : nothing}`; - } -} diff --git a/web/src/elements/table/TablePage.css b/web/src/elements/table/TablePage.css new file mode 100644 index 0000000000..91c2490463 --- /dev/null +++ b/web/src/elements/table/TablePage.css @@ -0,0 +1,16 @@ +:host { + display: flex; +} + +.pf-c-sidebar__panel { + --pf-c-sidebar__panel--Position: static; + flex: 0 1 25%; +} +.pf-c-sidebar__content { + flex: 1 1 75%; + min-width: 0; +} + +.pf-c-dropdown { + --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--md); +} diff --git a/web/src/elements/table/TablePage.ts b/web/src/elements/table/TablePage.ts index edcd2af3e8..31d8a4cb72 100644 --- a/web/src/elements/table/TablePage.ts +++ b/web/src/elements/table/TablePage.ts @@ -2,12 +2,13 @@ import "#elements/EmptyState"; import { updateURLParams } from "#elements/router/RouteMatch"; import { Table } from "#elements/table/Table"; +import Styles from "#elements/table/TablePage.css"; import { SlottedTemplateResult } from "#elements/types"; import { setPageDetails } from "#components/ak-page-navbar"; import { msg } from "@lit/localize"; -import { css, CSSResult, html, nothing, PropertyValues, TemplateResult } from "lit"; +import { CSSResult, html, nothing, PropertyValues, TemplateResult } from "lit"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; @@ -20,20 +21,7 @@ export abstract class TablePage extends Table { PFPage, PFContent, PFSidebar, - css` - :host { - display: flex; - } - - .pf-c-sidebar__panel { - --pf-c-sidebar__panel--Position: static; - flex: 0 1 25%; - } - .pf-c-sidebar__content { - flex: 1 1 75%; - min-width: 0; - } - `, + Styles, ]; //#region Abstract properties @@ -148,7 +136,7 @@ export abstract class TablePage extends Table { `; } - render() { + protected override render(): SlottedTemplateResult { return html` ${this.renderSectionBefore?.()}
    diff --git a/web/src/elements/table/TableSearch.ts b/web/src/elements/table/TableSearch.ts index 58b7efae8c..ef92f9204b 100644 --- a/web/src/elements/table/TableSearch.ts +++ b/web/src/elements/table/TableSearch.ts @@ -95,6 +95,7 @@ export class TableSearchForm extends WithLicenseSummary(AKElement) { #submitListener = (event: SubmitEvent) => { event.preventDefault(); + event.stopPropagation(); const form = this.#formRef.value; diff --git a/web/src/elements/tasks/ScheduleList.ts b/web/src/elements/tasks/ScheduleList.ts index dfeae94029..0e9d0d7adc 100644 --- a/web/src/elements/tasks/ScheduleList.ts +++ b/web/src/elements/tasks/ScheduleList.ts @@ -138,7 +138,7 @@ export class ScheduleList extends Table { - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Schedule")} - ${(this.activeStepElement - ? this.steps.indexOf(this.activeStepElement.slot) - : 0) > 0 && this.canBack - ? html` - - ` - : nothing} ${this.canCancel ? html`
    ` : nothing} + ${activeStepIndex > 0 && this.canBack + ? html` + + ` + : nothing} +
    `; diff --git a/web/src/flow/stages/email/EmailStage.ts b/web/src/flow/stages/email/EmailStage.ts index 6b7f0d76f3..f85b3902cd 100644 --- a/web/src/flow/stages/email/EmailStage.ts +++ b/web/src/flow/stages/email/EmailStage.ts @@ -32,7 +32,7 @@ export class EmailStage extends BaseStage - ${msg("Send Email again.")} + ${msg("Resend Email")} diff --git a/web/src/flow/stages/identification/IdentificationStage.ts b/web/src/flow/stages/identification/IdentificationStage.ts index 2eb5b4c230..21d3789b9f 100644 --- a/web/src/flow/stages/identification/IdentificationStage.ts +++ b/web/src/flow/stages/identification/IdentificationStage.ts @@ -4,11 +4,11 @@ import "#flow/components/ak-flow-card"; import "#flow/components/ak-flow-password-input"; import "#flow/stages/captcha/CaptchaStage"; +import { renderSourceIcon } from "#elements/sources/utils"; + import { AKFormErrors } from "#components/ak-field-errors"; import { AKLabel } from "#components/ak-label"; -import { renderSourceIcon } from "#admin/sources/utils"; - import { BaseStage } from "#flow/stages/base"; import AutoRedirect from "#flow/stages/identification/controllers/AutoRedirectController"; import CaptchaDisplayController from "#flow/stages/identification/controllers/CaptchaDisplayController"; @@ -41,10 +41,6 @@ import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-gro import PFLogin from "@patternfly/patternfly/components/Login/login.css"; import PFTitle from "@patternfly/patternfly/components/Title/title.css"; -type PasskeyChallenge = Omit & { - passkeyChallenge?: PublicKeyCredentialRequestOptions; -}; - type IdentificationFooter = Partial>; export type IdentificationHost = IdentificationStage & ReactiveControllerHost; @@ -307,7 +303,7 @@ export class IdentificationStage extends BaseStage< ${AKFormErrors({ errors: challenge.responseErrors?.uid_field })}
    ${passwordFields ? this.renderPasswordFields(challenge) : nothing} - ${this.renderNonFieldErrors()} + ${this.renderNonFieldErrors()} ${this.#captcha.render()}
    - ${rac - ? html`` - : nothing}
    `; }; diff --git a/web/src/user/LibraryPage/ApplicationList.css b/web/src/user/LibraryPage/ApplicationList.css index 4a2437571f..bf7802d7cf 100644 --- a/web/src/user/LibraryPage/ApplicationList.css +++ b/web/src/user/LibraryPage/ApplicationList.css @@ -132,7 +132,7 @@ ak-app-icon { [part="app-group-header"] { @media not (prefers-contrast: more) { - --ak-legend-padding-inline-base: 1rem; + --ak-fieldset__legend--PaddingInlineBase: 1rem; padding-block-start: 0 !important; padding-inline: 0 !important; margin-inline: 0 !important; diff --git a/web/src/user/LibraryPage/ApplicationList.ts b/web/src/user/LibraryPage/ApplicationList.ts index c2e068d9c6..3487b3c85c 100644 --- a/web/src/user/LibraryPage/ApplicationList.ts +++ b/web/src/user/LibraryPage/ApplicationList.ts @@ -2,14 +2,13 @@ import type { AppGroupEntry } from "./types.js"; import { LayoutType } from "#common/ui/config"; +import { ApplicationRoute } from "#elements/router/builders"; import { LitFC } from "#elements/types"; import { ifPresent } from "#elements/utils/attributes"; import { AnchorPositionSupported } from "#user/LibraryApplication/CardMenu"; import { AKLibraryApp } from "#user/LibraryApplication/index"; -import { ApplicationRoute } from "#admin/Routes"; - import { Application } from "@goauthentik/api"; import { spread } from "@open-wc/lit-helpers"; diff --git a/web/src/user/index.entrypoint.ts b/web/src/user/index.entrypoint.ts index 407b498daa..a5fa6e3164 100644 --- a/web/src/user/index.entrypoint.ts +++ b/web/src/user/index.entrypoint.ts @@ -145,7 +145,12 @@ class UserInterface extends WithBrandConfig(WithSession(AuthenticatedInterface)) ? html`
    ` : nothing}
    -
    +
    -
    `; +
    + ${this.commandPalette}`; } } diff --git a/web/src/user/user-settings/mfa/MFADevicesPage.ts b/web/src/user/user-settings/mfa/MFADevicesPage.ts index 447f4edaf1..f7ad43821a 100644 --- a/web/src/user/user-settings/mfa/MFADevicesPage.ts +++ b/web/src/user/user-settings/mfa/MFADevicesPage.ts @@ -166,7 +166,7 @@ export class MFADevicesPage extends Table { Timestamp(item.lastUsed), html` - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Device")} diff --git a/web/src/user/user-settings/tokens/UserTokenList.ts b/web/src/user/user-settings/tokens/UserTokenList.ts index 8bdea594c5..c58da41f8c 100644 --- a/web/src/user/user-settings/tokens/UserTokenList.ts +++ b/web/src/user/user-settings/tokens/UserTokenList.ts @@ -160,7 +160,7 @@ export class UserTokenList extends Table { html`${item.identifier}`, html` - ${msg("Update")} + ${msg("Save Changes")} ${msg("Update Token")} { + const providerNames = new Map(); + + //#region Lifecycle + + test.beforeEach("Configure Providers", async ({ page: _page }, { testId }) => { + const seed = IDGenerator.randomID(6); + const providerName = `${randomName(seed)} (${seed})`; + + providerNames.set(testId, providerName); + }); + + test("Create application with existing provider", async ({ + session, + navigator, + form, + pointer, + page, + }, testInfo) => { + const providerName = providerNames.get(testInfo.testId)!; + const appName = `${providerName} App`; + + const { fill, search, selectSearchValue } = form; + const { click } = pointer; + + await test.step("Authenticate", async () => { + await session.login({ + to: "/if/admin/#/core/providers", + }); + }); + + //#region Create provider + + const providerDialog = page.getByRole("dialog", { name: "New provider" }); + + await test.step("Create OAuth2 provider", async () => { + await expect(providerDialog, "Provider dialog is initially closed").toBeHidden(); + + await page.getByRole("button", { name: "New Provider" }).click(); + + await expect(providerDialog, "Provider dialog opens").toBeVisible(); + + await series( + [click, "OAuth2/OpenID", "option"], + [click, "Next"], + [fill, "Provider name", providerName], + [ + selectSearchValue, + "Authorization flow", + /default-provider-authorization-explicit-consent/, + ], + [click, "Finish"], + ); + + await expect(providerDialog, "Provider dialog closes after creation").toBeHidden(); + }); + + await test.step("Verify provider creation", async () => { + const $provider = await search(providerName); + + await expect($provider, "Provider is visible").toBeVisible(); + }); + + //#endregion + + //#region Create application + + await test.step("Navigate to applications", async () => { + await navigator.navigate("/if/admin/#/core/applications"); + }); + + const appDialog = page.getByRole("dialog", { name: "New Application" }); + + // await test.step("Create application", async () => { + await expect(appDialog, "Application dialog is initially closed").toBeHidden(); + + await click("New Application", "button"); + await click("With Existing Provider...", "menuitem"); + + await expect(appDialog, "Application dialog opens").toBeVisible(); + + await series( + [fill, /^Application Name/, appName, appDialog], + [selectSearchValue, "Provider", providerName, appDialog], + ); + + await appDialog.getByRole("button", { name: "Create Application" }).click(); + + await expect(appDialog, "Application dialog closes after creation").toBeHidden(); + // }); + + await test.step("Verify application creation", async () => { + const $app = await search(appName); + + await expect($app, "Application is visible in the table").toBeVisible(); + }); + + //#endregion + }); + + test("Create application with new provider via wizard", async ({ + session, + form, + pointer, + page, + }, testInfo) => { + const providerName = providerNames.get(testInfo.testId)!; + const appName = `${providerName} App`; + + const { fill, search, selectSearchValue } = form; + const { click } = pointer; + + await test.step("Authenticate", async () => { + await session.login({ + to: "/if/admin/#/core/applications", + }); + }); + + const wizardDialog = page.getByRole("dialog", { name: "New Application Wizard" }); + + await test.step("Open wizard", async () => { + await expect(wizardDialog, "Wizard is initially closed").toBeHidden(); + + await click("New Application", "button"); + await click("With New Provider...", "menuitem"); + + await expect(wizardDialog, "Wizard opens").toBeVisible(); + }); + + await test.step("Step 1: Configure Application", async () => { + await fill(/^Application Name/, appName, wizardDialog); + + await click("Next", "button", wizardDialog); + }); + + await test.step("Step 2: Choose a Provider", async () => { + await click("OAuth2/OpenID Provider", "option", wizardDialog); + + await click("Next", "button", wizardDialog); + }); + + await test.step("Step 3: Configure Provider", async () => { + // Provider Name is auto-filled as "Provider for {appName}" + const providerNameInput = wizardDialog.getByRole("textbox", { + name: /Provider Name/, + }); + + await expect(providerNameInput, "Provider name is pre-filled").toHaveValue( + `Provider for ${appName}`, + ); + + await series([ + selectSearchValue, + "Authorization flow", + /default-provider-authorization-explicit-consent/, + wizardDialog, + ]); + + await click("Next", "button", wizardDialog); + }); + + await test.step("Step 4: Configure Bindings (skip)", async () => { + await click("Next", "button", wizardDialog); + }); + + await test.step("Step 5: Review and Submit", async () => { + await click("Create Application", "button", wizardDialog); + + await expect( + wizardDialog.getByRole("heading", { name: "Your application has been saved" }), + ).toBeVisible(); + + await click("Close", "button", wizardDialog); + }); + + await test.step("Verify application creation", async () => { + await expect(wizardDialog, "Wizard closes after submission").toBeHidden(); + + const $app = await search(appName); + + await expect($app, "Application is visible in the table").toBeVisible(); + }); + }); +}); diff --git a/web/test/browser/groups.test.ts b/web/test/browser/groups.test.ts index 8dcd11c138..5c96319be3 100644 --- a/web/test/browser/groups.test.ts +++ b/web/test/browser/groups.test.ts @@ -32,10 +32,6 @@ test.describe("Groups", () => { //#region Tests - // TODO: The use of `force: true` is a temporary workaround for - // buttons with slotted content, which are not considered visible by - // Playwright. This should be removed after native dialog modals are implemented. - test("Creating a user within the admin group", async ({ navigator, form, @@ -66,29 +62,35 @@ test.describe("Groups", () => { await test.step("User creation", async () => { await click("Users", "tab"); - const wizard = page.getByRole("dialog", { name: "New User" }); + const dialog = page.getByRole("dialog", { name: "New Group User" }); - await expect(wizard, "Wizard is initially closed").toBeHidden(); + await expect(dialog, "Dialog is initially closed").toBeHidden(); - await click("Add new user", "button"); + await click("Add New User", "button"); - await click("New user...", "menuitem"); + await click("New Group User...", "menuitem"); - await expect(wizard, "Wizard opens").toBeVisible(); + await expect(dialog, "Dialog opens").toBeVisible(); await series( - [fill, /^Username/, username], - [fill, /^Display Name/, displayName], - [fill, /^Email Address/, `${username}@example.com`], + [fill, /^Username/, username, dialog], + [fill, /^Display Name/, displayName, dialog], + [fill, /^Email Address/, `${username}@example.com`, dialog], ); - await page.getByRole("button", { name: "Create User" }).click({ force: true }); + await dialog.getByRole("button", { name: "Create User" }).click(); - await expect(wizard, "Wizard closes after creating user").toBeHidden(); + await dialog.waitFor({ state: "hidden" }); + + await expect(dialog, "Dialog closes after creating user").toBeHidden(); }); await test.step("Verify user creation", async () => { - const $user = await test.step("Find user via search", () => search(username)); + const $user = await test.step("Find user via search", () => { + const context = page.getByRole("tabpanel", { name: "Users" }); + + return search(username, context); + }); await expect($user, "User is visible").toBeVisible(); }); @@ -100,28 +102,26 @@ test.describe("Groups", () => { const { fill, search } = form; const { click } = pointer; - const newGroupModal = page.getByRole("dialog", { name: "New Group" }); + const dialog = page.getByRole("dialog", { name: "New Group" }); await test.step("Group Creation", async () => { - await expect(newGroupModal, "Wizard is initially closed").toBeHidden(); + await expect(dialog, "Dialog is initially closed").toBeHidden(); await click("New Group", "button"); - await expect(newGroupModal, "Wizard opens").toBeVisible(); + await expect(dialog, "Dialog opens").toBeVisible(); await series( // --- - [fill, /^Group Name/, groupName], + [fill, /^Group Name/, groupName, dialog], ); - const createButton = page - .getByRole("group", { name: "Form actions" }) - .getByRole("button", { name: "Create Group" }); + const createButton = dialog.getByRole("button", { name: "Create Group" }); await expect(createButton, "Create button is visible").toBeVisible(); await createButton.evaluate((element: HTMLButtonElement) => element.click()); - await expect(newGroupModal, "Wizard closes after creating group").toBeHidden(); + await expect(dialog, "Dialog closes after creating group").toBeHidden(); }); await test.step("Verify group creation", async () => { @@ -164,8 +164,11 @@ test.describe("Groups", () => { await test.step("Verify admin user assignment", async () => { // eslint-disable-next-line max-nested-callbacks - const groupRow = await test.step("Find group via search", () => - search(adminUsername)); + const groupRow = await test.step("Find group via search", () => { + const context = page.getByRole("tabpanel", { name: "Users" }); + + return search(adminUsername, context); + }); await expect(groupRow, "Group is visible").toBeVisible(); }); diff --git a/web/test/browser/modals.test.ts b/web/test/browser/modals.test.ts new file mode 100644 index 0000000000..0153da043d --- /dev/null +++ b/web/test/browser/modals.test.ts @@ -0,0 +1,55 @@ +import { expect, test } from "#e2e"; + +test.describe("Modals", () => { + test.beforeEach("Authenticate", async ({ session }) => { + await session.login({ + to: "/if/admin/", + }); + }); + + test("About authentik modal", async ({ page }) => { + const aboutButton = page + .getByRole("contentinfo", { name: "authentik information" }) + .getByRole("button", { name: "Open about dialog" }); + + await expect(aboutButton, "About button is visible").toBeVisible(); + + const aboutDialog = page.getByRole("dialog", { name: "About authentik" }); + + await expect(aboutDialog, "About dialog is initially closed").toBeHidden(); + + await aboutButton.click(); + + await expect(aboutDialog, "About dialog opens").toBeVisible(); + + await test.step("Verify content loads", async () => { + const definitionList = aboutDialog.getByRole("definition"); + + // Wait for the API data to load (replaces the loading spinner) + await definitionList.first().waitFor({ state: "visible" }); + + // Verify key entries are present + await expect( + aboutDialog.getByText("UI Version"), + "Version label is visible", + ).toBeVisible(); + }); + + await test.step("Close dialog", async () => { + const closeButton = aboutDialog.getByRole("button", { name: "Close dialog" }); + + await closeButton.click(); + + await expect(aboutDialog, "About dialog closes").toBeHidden(); + }); + + await test.step("Dialog removed from DOM", async () => { + const dialogElement = page.locator("dialog:has(ak-about-modal)"); + + await expect( + dialogElement, + "Dialog element is removed from the DOM after close", + ).toHaveCount(0); + }); + }); +}); diff --git a/web/test/browser/providers.test.ts b/web/test/browser/providers.test.ts index 9864bc6ca1..3ae92ccb5b 100644 --- a/web/test/browser/providers.test.ts +++ b/web/test/browser/providers.test.ts @@ -15,7 +15,7 @@ test.describe("Provider Wizard", () => { providerNames.set(testId, providerName); - const wizard = page.getByRole("dialog", { name: "New provider" }); + const dialog = page.getByRole("dialog", { name: "New provider" }); await test.step("Authenticate", async () => { await session.login({ @@ -24,22 +24,22 @@ test.describe("Provider Wizard", () => { }); await test.step("Navigate to provider wizard", async () => { - await expect(wizard, "Wizard is initially closed").toBeHidden(); + await expect(dialog, "Dialog is initially closed").toBeHidden(); await page.getByRole("button", { name: "New Provider" }).click(); - await expect(wizard, "Wizard opens after clicking on New Provider").toBeVisible(); + await expect(dialog, "Dialog opens after clicking on New Provider").toBeVisible(); await expect( page.getByRole("listbox", { name: "Select a provider type" }), - "Wizard opens with a list of provider types", + "Dialog opens with a list of provider types", ).toBeVisible(); await expect( - wizard.getByRole("navigation").getByRole("button", { + dialog.getByRole("navigation").getByRole("button", { name: /next|finish/i, }), - "Wizard can't be navigated to next step", + "Dialog can't be navigated to next step", ).toBeDisabled(); }); }); diff --git a/web/test/browser/roles.test.ts b/web/test/browser/roles.test.ts new file mode 100644 index 0000000000..84a93fe3d9 --- /dev/null +++ b/web/test/browser/roles.test.ts @@ -0,0 +1,110 @@ +import { expect, test } from "#e2e"; +import { randomName } from "#e2e/utils/generators"; + +import { IDGenerator } from "@goauthentik/core/id"; + +test.describe("Roles", () => { + const roleNames = new Map(); + + //#region Lifecycle + + test.beforeEach("Prepare role", async ({ session }, { testId }) => { + const seed = IDGenerator.randomID(6); + const roleName = `${randomName(seed)} (${seed})`; + + roleNames.set(testId, roleName); + + await test.step("Authenticate", async () => { + await session.login({ + to: "/if/admin/#/identity/roles", + }); + }); + }); + + //#endregion + + //#region Tests + + test("Simple role", async ({ form, pointer, page }, testInfo) => { + const roleName = roleNames.get(testInfo.testId)!; + + const { fill, search } = form; + const { click } = pointer; + + const dialog = page.getByRole("dialog", { name: "New Role" }); + + await test.step("Create role", async () => { + await expect(dialog, "Dialog is initially closed").toBeHidden(); + + await click("New Role", "button"); + + await expect(dialog, "Dialog opens").toBeVisible(); + + await fill(/^Role Name/, roleName, dialog); + + await dialog.getByRole("button", { name: "Create Role" }).click(); + + await expect(dialog, "Dialog closes after creating role").toBeHidden(); + }); + + await test.step("Verify role creation", async () => { + const $role = await search(roleName); + + await expect($role, "Role is visible in the table").toBeVisible(); + }); + }); + + test("Edit role", async ({ form, pointer, page }, testInfo) => { + const roleName = roleNames.get(testInfo.testId)!; + + const { fill, search } = form; + const { click } = pointer; + + const newRoleDialog = page.getByRole("dialog", { name: "New Role" }); + const editRoleDialog = page.getByRole("dialog", { name: "Edit Role" }); + + await test.step("Create role", async () => { + await click("New Role", "button"); + + await expect(newRoleDialog, "Dialog opens").toBeVisible(); + + await fill(/^Role Name/, roleName, newRoleDialog); + + await newRoleDialog.getByRole("button", { name: "Create Role" }).click(); + + await expect(newRoleDialog, "Dialog closes after creating role").toBeHidden(); + }); + + const updatedName = `${roleName} Edited`; + + await test.step("Edit role via row action", async () => { + const $role = await search(roleName); + + await expect($role, "Role is visible").toBeVisible(); + + await $role.getByRole("button", { name: "Edit" }).click(); + + await expect(editRoleDialog, "Edit dialog opens").toBeVisible(); + + const nameInput = editRoleDialog.getByRole("textbox", { name: /Role Name/ }); + + await expect(nameInput, "Name input is visible").toBeVisible(); + + await expect(nameInput, "Name is pre-filled").toHaveValue(roleName); + + await nameInput.fill(updatedName); + + await editRoleDialog.getByRole("button", { name: "Save Changes" }).click(); + + await expect(editRoleDialog, "Edit dialog closes after saving").toBeHidden(); + }); + + await test.step("Verify role was updated", async () => { + const $updatedRole = await search(updatedName); + + await expect($updatedRole, "Updated role is visible in the table").toBeVisible(); + }); + }); + + //#endregion +}); diff --git a/web/test/browser/users.test.ts b/web/test/browser/users.test.ts index 05a5711156..d02d01fe8d 100644 --- a/web/test/browser/users.test.ts +++ b/web/test/browser/users.test.ts @@ -54,23 +54,23 @@ test.describe("Users", () => { const { fill } = form; const { click } = pointer; - const wizard = page.getByRole("dialog", { name: "New User" }); + const dialog = page.getByRole("dialog", { name: "New User" }); - await expect(wizard, "Wizard is initially closed").toBeHidden(); + await expect(dialog, "Dialog is initially closed").toBeHidden(); await click("New User", "button"); - await expect(wizard, "Wizard opens").toBeVisible(); + await expect(dialog, "Dialog opens").toBeVisible(); await series( - [fill, /^Username/, username], - [fill, /^Display Name/, displayName], - [fill, /^Email Address/, `${username}@example.com`], + [fill, /^Username/, username, dialog], + [fill, /^Display Name/, displayName, dialog], + [fill, /^Email Address/, `${username}@example.com`, dialog], ); - await page.getByRole("button", { name: "Create User" }).click({ force: true }); + await dialog.getByRole("button", { name: "Create User" }).click(); - await expect(wizard, "Wizard closes after creating user").toBeHidden(); + await expect(dialog, "Dialog closes after creating user").toBeHidden(); }); test("Service user", async ({ form, pointer, page }, testInfo) => { @@ -79,24 +79,24 @@ test.describe("Users", () => { const { fill } = form; const { click } = pointer; - const wizard = page.getByRole("dialog", { name: "New Service Account" }); + const dialog = page.getByRole("dialog", { name: "New Service Account" }); - await expect(wizard, "Wizard is initially closed").toBeHidden(); + await expect(dialog, "Dialog is initially closed").toBeHidden(); await click("New Service Account", "button"); - await expect(wizard, "Wizard opens").toBeVisible(); + await expect(dialog, "Dialog opens").toBeVisible(); await series( // --- - [fill, /^Username/, username], + [fill, /^Username/, username, dialog], ); - await page.getByRole("button", { name: "Create Service Account" }).click({ force: true }); + await dialog.getByRole("button", { name: "Create Service Account" }).click(); - await expect(wizard, "Wizard is open after creating service account").toBeVisible(); + await expect(dialog, "Dialog is open after creating service account").toBeVisible(); - await click("Close", "button"); + await click("Close", "button", dialog); const userPathsTree = page.getByRole("tree", { name: "User paths" }); await expect(userPathsTree, "User paths tree is visible").toBeVisible(); @@ -106,3 +106,88 @@ test.describe("Users", () => { //#endregion }); + +test.describe("Impersonation", () => { + const usernames = new Map(); + const displayNames = new Map(); + + test.beforeEach("Prepare user", async ({ session }, { testId }) => { + const seed = IDGenerator.randomID(6); + const displayName = `${randomName(seed)} (${seed})`; + + displayNames.set(testId, displayName); + usernames.set(testId, snakeCase(displayName)); + + await test.step("Authenticate", async () => { + await session.login({ + to: "/if/admin/#/identity/users", + }); + }); + }); + + test("Impersonate user", async ({ form, pointer, page, navigator }, testInfo) => { + const displayName = displayNames.get(testInfo.testId)!; + const username = usernames.get(testInfo.testId)!; + + const { fill, search } = form; + const { click } = pointer; + + const createDialog = page.getByRole("dialog", { name: "New User" }); + const impersonateDialog = page.getByRole("dialog", { name: "Impersonate User" }); + + await test.step("Create user", async () => { + await click("New User", "button"); + + await expect(createDialog, "Create dialog opens").toBeVisible(); + + await series( + [fill, /^Username/, username, createDialog], + [fill, /^Display Name/, displayName, createDialog], + [fill, /^Email Address/, `${username}@example.com`, createDialog], + ); + + await createDialog.getByRole("button", { name: "Create User" }).click(); + + await createDialog.waitFor({ state: "hidden" }); + await expect(createDialog, "Create dialog closes").toBeHidden(); + }); + + await test.step("Open impersonate dialog", async () => { + const $user = await search(username); + + await expect($user, "User is visible").toBeVisible(); + + const impersonateButton = $user.getByRole("button", { name: "Impersonate" }); + await expect(impersonateButton, "Impersonate button is visible").toBeVisible(); + + await impersonateButton.click(); + + await expect(impersonateDialog, "Impersonate dialog opens").toBeVisible(); + + const reasonInput = impersonateDialog.getByRole("textbox", { name: /Reason/ }); + await fill(reasonInput, "Testing impersonation"); + + await impersonateDialog.getByRole("button", { name: "Impersonate" }).click(); + + await navigator.waitForPathname("if/user/#/library"); + }); + + await test.step("Confirm impersonation", async () => { + const banner = page.getByRole("banner", { name: "Main" }); + + await expect( + banner, + "User library banner is visible after impersonation", + ).toBeVisible(); + + const stopImpersonationButton = banner.getByRole("button", { + name: "Stop impersonation", + }); + + await expect( + stopImpersonationButton, + "Stop impersonation button is visible", + ).toBeVisible(); + }); + }); +}); diff --git a/web/types/dom.d.ts b/web/types/dom.d.ts new file mode 100644 index 0000000000..2967ea9872 --- /dev/null +++ b/web/types/dom.d.ts @@ -0,0 +1,24 @@ +/** + * @file Global DOM-related types. + */ + +/* spellchecker:ignore closedBy */ + +export {}; + +declare global { + /** + * The possible values for the `closedBy` property of {@linkcode HTMLDialogElement}. + */ + type ClosedBy = "any" | "closerequest" | "none"; + + interface HTMLDialogElement { + /** + * Indicates the types of user actions that can be used to close the associated element. + * + * @attr closedby + * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/closedBy MDN} + */ + closedBy: ClosedBy; + } +}