From ae66297196b05fd8e1ce4ab0e9220931ce66091b Mon Sep 17 00:00:00 2001 From: Ken Sternberg Date: Tue, 8 Aug 2023 10:47:07 -0700 Subject: [PATCH] web: SAML Manual Configuration Added a 'design document' that just kinda describes what I'm trying to do, in case I don't get this done by Friday Aug 11, 2023. I had two tables doing the same thing, so I merged them and then wrote a few map/filters to specialize them for those two use cases. Along the way I had to fiddle with the ESLint settings so that underscore-prefixed unused variables would be ignored. I cleaned up the visual appeal of the forms in the LDAP application. I was copy/pasting the "handleProviderEvent" function, so I pulled it out into ApplicationWizardProviderPageBase. Not so much a matter of abstraction as just disliking that kind of duplication; it served no purpose. --- .../ApplicationWizardProviderPageBase.ts | 20 ++ ...rd-authentication-method-choice.choices.ts | 63 ++++- ...pplication-wizard-authentication-method.ts | 13 +- web/src/admin/applications/wizard/design.md | 20 ++ .../wizard/ldap/LDAPOptionsAndHelp.ts | 64 +++++ .../ldap/TypeLDAPApplicationWizardPage.ts | 73 ----- ...plication-wizard-authentication-by-ldap.ts | 101 ++----- ...lication-wizard-authentication-by-oauth.ts | 51 ++-- .../wizard/proxy/AuthenticationByProxyPage.ts | 23 +- .../wizard/saml/SamlProviderOptions.ts | 59 +++++ ...rd-authentication-by-saml-configuration.ts | 250 ++++++++++++++++++ .../saml/saml-property-mappings-search.ts | 112 ++++++++ 12 files changed, 621 insertions(+), 228 deletions(-) create mode 100644 web/src/admin/applications/wizard/ApplicationWizardProviderPageBase.ts create mode 100644 web/src/admin/applications/wizard/design.md create mode 100644 web/src/admin/applications/wizard/ldap/LDAPOptionsAndHelp.ts delete mode 100644 web/src/admin/applications/wizard/ldap/TypeLDAPApplicationWizardPage.ts create mode 100644 web/src/admin/applications/wizard/saml/SamlProviderOptions.ts create mode 100644 web/src/admin/applications/wizard/saml/ak-application-wizard-authentication-by-saml-configuration.ts create mode 100644 web/src/admin/applications/wizard/saml/saml-property-mappings-search.ts diff --git a/web/src/admin/applications/wizard/ApplicationWizardProviderPageBase.ts b/web/src/admin/applications/wizard/ApplicationWizardProviderPageBase.ts new file mode 100644 index 000000000..b5db2e215 --- /dev/null +++ b/web/src/admin/applications/wizard/ApplicationWizardProviderPageBase.ts @@ -0,0 +1,20 @@ +import ApplicationWizardPageBase from "./ApplicationWizardPageBase"; + +export class ApplicationWizardProviderPageBase extends ApplicationWizardPageBase { + handleChange(ev: InputEvent) { + if (!ev.target) { + console.warn(`Received event with no target: ${ev}`); + return; + } + const target = ev.target as HTMLInputElement; + const value = target.type === "checkbox" ? target.checked : target.value; + this.dispatchWizardUpdate({ + provider: { + ...this.wizard.provider, + [target.name]: value, + }, + }); + } +} + +export default ApplicationWizardProviderPageBase; diff --git a/web/src/admin/applications/wizard/ak-application-wizard-authentication-method-choice.choices.ts b/web/src/admin/applications/wizard/ak-application-wizard-authentication-method-choice.choices.ts index 46e33aab8..c3d8669ee 100644 --- a/web/src/admin/applications/wizard/ak-application-wizard-authentication-method-choice.choices.ts +++ b/web/src/admin/applications/wizard/ak-application-wizard-authentication-method-choice.choices.ts @@ -1,35 +1,70 @@ import { msg } from "@lit/localize"; +import { TemplateResult, html } from "lit"; import type { TypeCreate } from "@goauthentik/api"; -type ProviderType = [string, string, string] | [string, string, string, ProviderType[]]; +type ProviderRenderer = () => TemplateResult; -type ProviderOption = TypeCreate & { - children?: TypeCreate[]; -}; +type ProviderType = [string, string, string, ProviderRenderer]; // prettier-ignore const _providerTypesTable: ProviderType[] = [ - ["oauth2provider", msg("OAuth2/OpenID"), msg("Modern applications, APIs and Single-page applications.")], - ["ldapprovider", msg("LDAP"), msg("Provide an LDAP interface for applications and users to authenticate against.")], - ["proxyprovider-proxy", msg("Transparent Reverse Proxy"), msg("For transparent reverse proxies with required authentication")], - ["proxyprovider-forwardsingle", msg("Forward Single Proxy"), msg("For nginx's auth_request or traefix's forwardAuth")], - ["radiusprovider", msg("Radius"), msg("Allow applications to authenticate against authentik's users using Radius.")], - ["samlprovider-manual", msg("SAML Manual configuration"), msg("Configure SAML provider manually")], - ["samlprovider-import", msg("SAML Import Configuration"), msg("Create a SAML provider by importing its metadata")], - ["scimprovider", msg("SCIM Provider"), msg("SCIM 2.0 provider to create users and groups in external applications")] + [ + "oauth2provider", + msg("OAuth2/OpenID"), + msg("Modern applications, APIs and Single-page applications."), + () => html`` + ], + + [ + "ldapprovider", + msg("LDAP"), + msg("Provide an LDAP interface for applications and users to authenticate against."), + () => html`` + ], + + [ + "proxyprovider-proxy", + msg("Transparent Reverse Proxy"), + msg("For transparent reverse proxies with required authentication"), + () => html`` + ], + + [ + "proxyprovider-forwardsingle", + msg("Forward Single Proxy"), + msg("For nginx's auth_request or traefix's forwardAuth"), + () => html`` + ], + + [ + "samlprovider-manual", + msg("SAML Manual configuration"), + msg("Configure SAML provider manually"), + () => html`

Under construction

` + ], + + [ + "samlprovider-import", + msg("SAML Import Configuration"), + msg("Create a SAML provider by importing its metadata"), + () => html`

Under construction

` + ], ]; -function mapProviders([modelName, name, description, children]: ProviderType): ProviderOption { +function mapProviders([modelName, name, description]: ProviderType): TypeCreate { return { modelName, name, description, component: "", - ...(children ? { children: children.map(mapProviders) } : {}), }; } export const providerTypesList = _providerTypesTable.map(mapProviders); +export const providerRendererList = new Map( + _providerTypesTable.map(([modelName, _0, _1, renderer]) => [modelName, renderer]), +); + export default providerTypesList; diff --git a/web/src/admin/applications/wizard/ak-application-wizard-authentication-method.ts b/web/src/admin/applications/wizard/ak-application-wizard-authentication-method.ts index 51a5cb140..ff6db0417 100644 --- a/web/src/admin/applications/wizard/ak-application-wizard-authentication-method.ts +++ b/web/src/admin/applications/wizard/ak-application-wizard-authentication-method.ts @@ -1,27 +1,18 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.js"; -import { TemplateResult, html } from "lit"; import ApplicationWizardPageBase from "./ApplicationWizardPageBase"; +import { providerRendererList } from "./ak-application-wizard-authentication-method-choice.choices"; import "./ldap/ak-application-wizard-authentication-by-ldap"; import "./oauth/ak-application-wizard-authentication-by-oauth"; import "./proxy/ak-application-wizard-authentication-for-reverse-proxy"; import "./proxy/ak-application-wizard-authentication-for-single-forward-proxy"; // prettier-ignore -const handlers = new Map TemplateResult>([ - ["ldapprovider`", () => html``], - ["oauth2provider", () => html``], - ["proxyprovider-proxy", () => html``], - ["proxyprovider-forwardsingle", () => html``], - ["radiusprovider", () => html`

Under construction

`], - ["samlprovider", () => html`

Under construction

`], - ["scimprovider", () => html`

Under construction

`], -]); @customElement("ak-application-wizard-authentication-method") export class ApplicationWizardApplicationDetails extends ApplicationWizardPageBase { render() { - const handler = handlers.get(this.wizard.providerType); + const handler = providerRendererList.get(this.wizard.providerType); if (!handler) { throw new Error( "Unrecognized authentication method in ak-application-wizard-authentication-method", diff --git a/web/src/admin/applications/wizard/design.md b/web/src/admin/applications/wizard/design.md new file mode 100644 index 000000000..17d44e025 --- /dev/null +++ b/web/src/admin/applications/wizard/design.md @@ -0,0 +1,20 @@ +The design of the wizard is actually very simple. There is an orchestrator in the Context object; +it takes messages from the current page and grants permissions to proceed based on the content of +the Context object after a message. + +The fields of the Context object are: + +```Javascript +{ + step: number // The page currently being visited + providerType: The provider type chosen in step 2. Dictates which view to show in step 3 + application: // The data collected from the ApplicationDetails page + provider: // the data collected from the ProviderDetails page. + + +``` + +The orchestrator leans on the per-page forms to tell it when a page is "valid enough to proceed". + +When it reaches the last page, the transaction is triggered. If there are errors, the user is +invited to "go back to the page where the error occurred" and try again. diff --git a/web/src/admin/applications/wizard/ldap/LDAPOptionsAndHelp.ts b/web/src/admin/applications/wizard/ldap/LDAPOptionsAndHelp.ts new file mode 100644 index 000000000..5b2f1f483 --- /dev/null +++ b/web/src/admin/applications/wizard/ldap/LDAPOptionsAndHelp.ts @@ -0,0 +1,64 @@ +import { msg } from "@lit/localize"; +import { html } from "lit"; + +import { LDAPAPIAccessMode } from "@goauthentik/api"; + +export const bindModeOptions = [ + { + label: msg("Cached binding"), + value: LDAPAPIAccessMode.Cached, + default: true, + description: html`${msg( + "Flow is executed and session is cached in memory. Flow is executed when session expires", + )}`, + }, + { + label: msg("Direct binding"), + value: LDAPAPIAccessMode.Direct, + description: html`${msg( + "Always execute the configured bind flow to authenticate the user", + )}`, + }, +]; + +export const searchModeOptions = [ + { + label: msg("Cached querying"), + value: LDAPAPIAccessMode.Cached, + default: true, + description: html`${msg( + "The outpost holds all users and groups in-memory and will refresh every 5 Minutes", + )}`, + }, + { + label: msg("Direct querying"), + value: LDAPAPIAccessMode.Direct, + description: html`${msg( + "Always returns the latest data, but slower than cached querying", + )}`, + }, +]; + +export const mfaSupportHelp = msg( + "When enabled, code-based multi-factor authentication can be used by appending a semicolon and the TOTP code to the password. This should only be enabled if all users that will bind to this provider have a TOTP device configured, as otherwise a password may incorrectly be rejected if it contains a semicolon.", +); + +export const groupHelp = msg( + "The start for gidNumbers, this number is added to a number generated from the group.Pk to make sure that the numbers aren't too low for POSIX groups. Default is 4000 to ensure that we don't collide with local groups or users primary groups gidNumber", +); + +export const cryptoCertificateHelp = msg( + "The certificate for the above configured Base DN. As a fallback, the provider uses a self-signed certificate.", +); + +export const tlsServerNameHelp = msg( + "DNS name for which the above configured certificate should be used. The certificate cannot be detected based on the base DN, as the SSL/TLS negotiation happens before such data is exchanged.", +); + +export const uidStartNumberHelp = msg( + "The start for uidNumbers, this number is added to the user.Pk to make sure that the numbers aren't too low for POSIX users. Default is 2000 to ensure that we don't collide with local users uidNumber", +); + +export const gidStartNumberHelp = msg( + "The start for gidNumbers, this number is added to a number generated from the group.Pk to make sure that the numbers aren't too low for POSIX groups. Default is 4000 to ensure that we don't collide with local groups or users primary groups gidNumber", +); diff --git a/web/src/admin/applications/wizard/ldap/TypeLDAPApplicationWizardPage.ts b/web/src/admin/applications/wizard/ldap/TypeLDAPApplicationWizardPage.ts deleted file mode 100644 index 89c4a5ec8..000000000 --- a/web/src/admin/applications/wizard/ldap/TypeLDAPApplicationWizardPage.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; -import { KeyUnknown } from "@goauthentik/elements/forms/Form"; -import "@goauthentik/elements/forms/HorizontalFormElement"; -import { WizardFormPage } from "@goauthentik/elements/wizard/WizardFormPage"; - -import { msg } from "@lit/localize"; -import { customElement } from "@lit/reactive-element/decorators/custom-element.js"; -import { TemplateResult, html } from "lit"; - -import { - CoreApi, - FlowDesignationEnum, - FlowsApi, - LDAPProviderRequest, - ProvidersApi, - UserServiceAccountResponse, -} from "@goauthentik/api"; - -@customElement("ak-application-wizard-type-ldap") -export class TypeLDAPApplicationWizardPage extends WizardFormPage { - sidebarLabel = () => msg("LDAP details"); - - nextDataCallback = async (data: KeyUnknown): Promise => { - let name = this.host.state["name"] as string; - // Check if a provider with the name already exists - const providers = await new ProvidersApi(DEFAULT_CONFIG).providersAllList({ - search: name, - }); - if (providers.results.filter((provider) => provider.name == name)) { - name += "-1"; - } - this.host.addActionBefore(msg("Create service account"), async (): Promise => { - const serviceAccount = await new CoreApi(DEFAULT_CONFIG).coreUsersServiceAccountCreate({ - userServiceAccountRequest: { - name: name, - createGroup: true, - }, - }); - this.host.state["serviceAccount"] = serviceAccount; - return true; - }); - this.host.addActionBefore(msg("Create provider"), async (): Promise => { - // Get all flows and default to the implicit authorization - const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({ - designation: FlowDesignationEnum.Authorization, - ordering: "slug", - }); - const serviceAccount = this.host.state["serviceAccount"] as UserServiceAccountResponse; - const req: LDAPProviderRequest = { - name: name, - authorizationFlow: flows.results[0].pk, - baseDn: data.baseDN as string, - searchGroup: serviceAccount.groupPk, - }; - const provider = await new ProvidersApi(DEFAULT_CONFIG).providersLdapCreate({ - lDAPProviderRequest: req, - }); - this.host.state["provider"] = provider; - return true; - }); - return true; - }; - - renderForm(): TemplateResult { - const domainParts = window.location.hostname.split("."); - const defaultBaseDN = domainParts.map((part) => `dc=${part}`).join(","); - return html`
- - - -
`; - } -} diff --git a/web/src/admin/applications/wizard/ldap/ak-application-wizard-authentication-by-ldap.ts b/web/src/admin/applications/wizard/ldap/ak-application-wizard-authentication-by-ldap.ts index 5ec73a65d..c9e0d8d0a 100644 --- a/web/src/admin/applications/wizard/ldap/ak-application-wizard-authentication-by-ldap.ts +++ b/web/src/admin/applications/wizard/ldap/ak-application-wizard-authentication-by-ldap.ts @@ -15,76 +15,26 @@ import { customElement } from "@lit/reactive-element/decorators/custom-element.j import { html, nothing } from "lit"; import { ifDefined } from "lit/directives/if-defined.js"; -import { FlowsInstancesListDesignationEnum, LDAPAPIAccessMode } from "@goauthentik/api"; +import { FlowsInstancesListDesignationEnum } from "@goauthentik/api"; import type { LDAPProvider } from "@goauthentik/api"; -import ApplicationWizardPageBase from "../ApplicationWizardPageBase"; - -const bindModeOptions = [ - { - label: msg("Cached binding"), - value: LDAPAPIAccessMode.Cached, - default: true, - description: html`${msg( - "Flow is executed and session is cached in memory. Flow is executed when session expires", - )}`, - }, - { - label: msg("Direct binding"), - value: LDAPAPIAccessMode.Direct, - description: html`${msg( - "Always execute the configured bind flow to authenticate the user", - )}`, - }, -]; - -const searchModeOptions = [ - { - label: msg("Cached querying"), - value: LDAPAPIAccessMode.Cached, - default: true, - description: html`${msg( - "The outpost holds all users and groups in-memory and will refresh every 5 Minutes", - )}`, - }, - { - label: msg("Direct querying"), - value: LDAPAPIAccessMode.Direct, - description: html`${msg( - "Always returns the latest data, but slower than cached querying", - )}`, - }, -]; - -const groupHelp = msg( - "Users in the selected group can do search queries. If no group is selected, no LDAP Searches are allowed.", -); - -const mfaSupportHelp = msg( - "When enabled, code-based multi-factor authentication can be used by appending a semicolon and the TOTP code to the password. This should only be enabled if all users that will bind to this provider have a TOTP device configured, as otherwise a password may incorrectly be rejected if it contains a semicolon.", -); +import ApplicationWizardProviderPageBase from "../ApplicationWizardProviderPageBase"; +import { + bindModeOptions, + cryptoCertificateHelp, + gidStartNumberHelp, + groupHelp, + mfaSupportHelp, + searchModeOptions, + tlsServerNameHelp, + uidStartNumberHelp, +} from "./LDAPOptionsAndHelp"; @customElement("ak-application-wizard-authentication-by-ldap") -export class ApplicationWizardApplicationDetails extends ApplicationWizardPageBase { - handleChange(ev: InputEvent) { - if (!ev.target) { - console.warn(`Received event with no target: ${ev}`); - return; - } - const target = ev.target as HTMLInputElement; - const value = target.type === "checkbox" ? target.checked : target.value; - this.dispatchWizardUpdate({ - provider: { - ...this.wizard.provider, - [target.name]: value, - }, - }); - } - +export class ApplicationWizardApplicationDetails extends ApplicationWizardProviderPageBase { render() { const provider = this.wizard.provider as LDAPProvider | undefined; - // prettier-ignore return html`
@@ -165,11 +112,7 @@ export class ApplicationWizardApplicationDetails extends ApplicationWizardPageBa name="certificate" > -

- ${msg( - "The certificate for the above configured Base DN. As a fallback, the provider uses a self-signed certificate." - )} -

+

${cryptoCertificateHelp}

diff --git a/web/src/admin/applications/wizard/oauth/ak-application-wizard-authentication-by-oauth.ts b/web/src/admin/applications/wizard/oauth/ak-application-wizard-authentication-by-oauth.ts index a4cb35ac9..02bd54ac5 100644 --- a/web/src/admin/applications/wizard/oauth/ak-application-wizard-authentication-by-oauth.ts +++ b/web/src/admin/applications/wizard/oauth/ak-application-wizard-authentication-by-oauth.ts @@ -33,10 +33,10 @@ import type { PaginatedScopeMappingList, } from "@goauthentik/api"; -import ApplicationWizardPageBase from "../ApplicationWizardPageBase"; +import ApplicationWizardProviderPageBase from "../ApplicationWizardProviderPageBase"; @customElement("ak-application-wizard-authentication-by-oauth") -export class ApplicationWizardAuthenticationByOauth extends ApplicationWizardPageBase { +export class ApplicationWizardAuthenticationByOauth extends ApplicationWizardProviderPageBase { @state() showClientSecret = false; @@ -66,25 +66,9 @@ export class ApplicationWizardAuthenticationByOauth extends ApplicationWizardPag }); } - handleChange(ev: InputEvent) { - if (!ev.target) { - console.warn(`Received event with no target: ${ev}`); - return; - } - const target = ev.target as HTMLInputElement; - const value = target.type === "checkbox" ? target.checked : target.value; - this.dispatchWizardUpdate({ - provider: { - ...this.wizard.provider, - [target.name]: value, - }, - }); - } - render() { const provider = this.wizard.provider as OAuth2Provider | undefined; - // prettier-ignore return html` + + + + `} > + `} > +

${msg( - "JWTs signed by certificates configured in the selected sources can be used to authenticate to this provider." + "JWTs signed by certificates configured in the selected sources can be used to authenticate to this provider.", )}

diff --git a/web/src/admin/applications/wizard/proxy/AuthenticationByProxyPage.ts b/web/src/admin/applications/wizard/proxy/AuthenticationByProxyPage.ts index 00d82b25a..1f7ecdf2e 100644 --- a/web/src/admin/applications/wizard/proxy/AuthenticationByProxyPage.ts +++ b/web/src/admin/applications/wizard/proxy/AuthenticationByProxyPage.ts @@ -21,11 +21,11 @@ import { SourcesApi, } from "@goauthentik/api"; -import ApplicationWizardPageBase from "../ApplicationWizardPageBase"; +import ApplicationWizardProviderPageBase from "../ApplicationWizardProviderPageBase"; type MaybeTemplateResult = TemplateResult | typeof nothing; -export class AkTypeProxyApplicationWizardPage extends ApplicationWizardPageBase { +export class AkTypeProxyApplicationWizardPage extends ApplicationWizardProviderPageBase { constructor() { super(); new PropertymappingsApi(DEFAULT_CONFIG) @@ -44,21 +44,6 @@ export class AkTypeProxyApplicationWizardPage extends ApplicationWizardPageBase }); } - handleChange(ev: InputEvent) { - if (!ev.target) { - console.warn(`Received event with no target: ${ev}`); - return; - } - const target = ev.target as HTMLInputElement; - const value = target.type === "checkbox" ? target.checked : target.value; - this.dispatchWizardUpdate({ - provider: { - ...this.wizard.provider, - [target.name]: value, - }, - }); - } - propertyMappings?: PaginatedScopeMappingList; oauthSources?: PaginatedOAuthSourceList; @@ -111,6 +96,7 @@ export class AkTypeProxyApplicationWizardPage extends ApplicationWizardPageBase required label=${msg("Name")} > + + + + { + this.propertyMappings = propertyMappings; + }); + } + + render() { + const provider = this.wizard.provider as SAMLProvider | undefined; + + return html` + + + + +

+ ${msg("Flow used when a user access this provider and is not authenticated.")} +

+ + + + +

+ ${msg("Flow used when authorizing this provider.")} +

+ + + + ${msg("Protocol settings")} +
+ + + + + + + + +
+ + + + ${msg("Advanced protocol settings")} +
+ + +

+ ${msg( + "Certificate used to sign outgoing Responses going to the Service Provider.", + )} +

+ + + + +

+ ${msg( + "When selected, incoming assertion's Signatures will be validated against this certificate. To allow unsigned Requests, leave on default.", + )} +

+ + + + +

+ ${msg("Hold control/command to select multiple items.")} +

+ + + + +

+ ${msg( + "Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.", + )} +

+ + + + + + + + + + + + + +
+ +
`; + } +} + +export default ApplicationWizardProviderSamlConfiguration; diff --git a/web/src/admin/applications/wizard/saml/saml-property-mappings-search.ts b/web/src/admin/applications/wizard/saml/saml-property-mappings-search.ts new file mode 100644 index 000000000..27b1d53ab --- /dev/null +++ b/web/src/admin/applications/wizard/saml/saml-property-mappings-search.ts @@ -0,0 +1,112 @@ +import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; +import { AKElement } from "@goauthentik/elements/Base"; +import { SearchSelect } from "@goauthentik/elements/forms/SearchSelect"; +import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter"; + +import { html } from "lit"; +import { customElement } from "lit/decorators.js"; +import { property, query } from "lit/decorators.js"; + +import { + PropertymappingsApi, + PropertymappingsSamlListRequest, + SAMLPropertyMapping, +} from "@goauthentik/api"; + +async function fetchObjects(query?: string): Promise { + const args: PropertymappingsSamlListRequest = { + ordering: "saml_name", + }; + if (query !== undefined) { + args.search = query; + } + const items = await new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsSamlList(args); + return items.results; +} + +function renderElement(item: SAMLPropertyMapping): string { + return item.name; +} + +function renderValue(item: SAMLPropertyMapping | undefined): string | undefined { + return item?.pk; +} + +/** + * SAML Property Mapping Search + * + * @element ak-saml-property-mapping-search + * + * A wrapper around SearchSelect for the SAML Property Search. It's a unique search, but for the + * purpose of the form all you need to know is that it is being searched and selected. Let's put the + * how somewhere else. + * + */ + +@customElement("ak-saml-property-mapping-search") +export class SAMLPropertyMappingSearch extends CustomListenerElement(AKElement) { + /** + * The current property mapping known to the caller. + * + * @attr + */ + @property({ type: String, reflect: true, attribute: "propertymapping" }) + propertyMapping?: string; + + @query("ak-search-select") + search!: SearchSelect; + + @property({ type: String }) + name: string | null | undefined; + + selectedPropertyMapping?: SAMLPropertyMapping; + + constructor() { + super(); + this.selected = this.selected.bind(this); + this.handleSearchUpdate = this.handleSearchUpdate.bind(this); + this.addCustomListener("ak-change", this.handleSearchUpdate); + } + + get value() { + return this.selectedPropertyMapping ? renderValue(this.selectedPropertyMapping) : undefined; + } + + connectedCallback() { + super.connectedCallback(); + const horizontalContainer = this.closest("ak-form-element-horizontal[name]"); + if (!horizontalContainer) { + throw new Error("This search can only be used in a named ak-form-element-horizontal"); + } + const name = horizontalContainer.getAttribute("name"); + const myName = this.getAttribute("name"); + if (name !== null && name !== myName) { + this.setAttribute("name", name); + } + } + + handleSearchUpdate(ev: CustomEvent) { + ev.stopPropagation(); + this.selectedPropertyMapping = ev.detail.value; + this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true })); + } + + selected(item: SAMLPropertyMapping): boolean { + return this.propertyMapping === item.pk; + } + + render() { + return html` + + + `; + } +} + +export default SAMLPropertyMappingSearch;