From c46b2d5573c22a819e06eebd7c2b4642b66779d8 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Thu, 29 Dec 2022 22:28:54 +0100 Subject: [PATCH] web/admin: finish migration to search-select Signed-off-by: Jens Langhammer --- .../TypeOAuthCodeApplicationWizardPage.ts | 4 +- web/src/admin/blueprints/BlueprintForm.ts | 58 +++-- .../event_matcher/EventMatcherPolicyForm.ts | 45 ++-- .../admin/providers/ldap/LDAPProviderForm.ts | 69 ++++-- .../providers/oauth2/OAuth2ProviderForm.ts | 4 +- .../providers/proxy/ProxyProviderForm.ts | 4 +- .../admin/providers/saml/SAMLProviderForm.ts | 61 ++--- .../providers/saml/SAMLProviderImportForm.ts | 4 +- .../admin/sources/oauth/OAuthSourceForm.ts | 148 +++++------ web/src/admin/sources/plex/PlexSourceForm.ts | 148 +++++------ web/src/admin/sources/saml/SAMLSourceForm.ts | 12 +- .../AuthenticatorDuoStageForm.ts | 4 +- .../AuthenticatorSMSStageForm.ts | 53 ++-- .../AuthenticatorStaticStageForm.ts | 4 +- .../AuthenticatorTOTPStageForm.ts | 4 +- .../AuthenticateWebAuthnStageForm.ts | 4 +- .../identification/IdentificationStageForm.ts | 231 +++++++++--------- .../admin/stages/invitation/InvitationForm.ts | 4 +- .../stages/password/PasswordStageForm.ts | 4 +- web/src/admin/tenants/TenantForm.ts | 24 +- 20 files changed, 475 insertions(+), 414 deletions(-) diff --git a/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts b/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts index 15ded0e83..9ba7bcf8b 100644 --- a/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts +++ b/web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts @@ -62,8 +62,8 @@ export class TypeOAuthCodeApplicationWizardPage extends WizardFormPage { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/blueprints/BlueprintForm.ts b/web/src/admin/blueprints/BlueprintForm.ts index 3c9520cdb..867458631 100644 --- a/web/src/admin/blueprints/BlueprintForm.ts +++ b/web/src/admin/blueprints/BlueprintForm.ts @@ -2,6 +2,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { docLink } from "@goauthentik/common/global"; import { first } from "@goauthentik/common/utils"; import "@goauthentik/elements/CodeMirror"; +import "@goauthentik/elements/SearchSelect"; import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/HorizontalFormElement"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; @@ -12,12 +13,11 @@ import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import { until } from "lit/directives/until.js"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css"; -import { BlueprintInstance, ManagedApi } from "@goauthentik/api"; +import { BlueprintFile, BlueprintInstance, ManagedApi } from "@goauthentik/api"; enum blueprintSource { local, @@ -133,30 +133,36 @@ export class BlueprintForm extends ModelForm {
${this.source === blueprintSource.local ? html` - ` + => { + const items = await new ManagedApi( + DEFAULT_CONFIG, + ).managedBlueprintsAvailableList(); + return items.filter((item) => + query ? item.path.includes(query) : true, + ); + }} + .renderElement=${(item: BlueprintFile): string => { + const name = item.path; + if (item.meta && item.meta.name) { + return `${name} (${item.meta.name})`; + } + return name; + }} + .value=${( + item: BlueprintFile | undefined, + ): string | undefined => { + return item?.path; + }} + .selected=${(item: BlueprintFile): boolean => { + return this.instance?.path === item.path; + }} + ?blankable=${true} + > + + ` : html``} ${this.source === blueprintSource.oci ? html` diff --git a/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts b/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts index 120a2a8b2..83f883a02 100644 --- a/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts +++ b/web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts @@ -1,5 +1,6 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { first } from "@goauthentik/common/utils"; +import "@goauthentik/elements/SearchSelect"; import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/HorizontalFormElement"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; @@ -11,7 +12,7 @@ import { customElement } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { until } from "lit/directives/until.js"; -import { AdminApi, EventMatcherPolicy, EventsApi, PoliciesApi } from "@goauthentik/api"; +import { AdminApi, EventMatcherPolicy, EventsApi, PoliciesApi, TypeCreate } from "@goauthentik/api"; @customElement("ak-policy-event-matcher-form") export class EventMatcherPolicyForm extends ModelForm { @@ -72,27 +73,27 @@ export class EventMatcherPolicyForm extends ModelForm ${t`Policy-specific settings`}
- + => { + const items = await new EventsApi( + DEFAULT_CONFIG, + ).eventsEventsActionsList(); + return items.filter((item) => + query ? item.name.includes(query) : true, + ); + }} + .renderElement=${(item: TypeCreate): string => { + return item.name; + }} + .value=${(item: TypeCreate | undefined): string | undefined => { + return item?.component; + }} + .selected=${(item: TypeCreate): boolean => { + return this.instance?.action === item.component; + }} + ?blankable=${true} + > +

${t`Match created events with this action type. When left empty, all action types will be matched.`}

diff --git a/web/src/admin/providers/ldap/LDAPProviderForm.ts b/web/src/admin/providers/ldap/LDAPProviderForm.ts index 945eb9dec..da9c7fd6b 100644 --- a/web/src/admin/providers/ldap/LDAPProviderForm.ts +++ b/web/src/admin/providers/ldap/LDAPProviderForm.ts @@ -18,8 +18,10 @@ import { CoreGroupsListRequest, CryptoApi, CryptoCertificatekeypairsListRequest, + Flow, FlowsApi, FlowsInstancesListDesignationEnum, + FlowsInstancesListRequest, Group, LDAPAPIAccessMode, LDAPProvider, @@ -71,32 +73,47 @@ export class LDAPProviderFormPage extends ModelForm { ?required=${true} name="authorizationFlow" > - + ${until( + tenant().then((t) => { + return html` + => { + const args: FlowsInstancesListRequest = { + ordering: "slug", + designation: + FlowsInstancesListDesignationEnum.Authentication, + }; + if (query !== undefined) { + args.search = query; + } + const flows = await new FlowsApi( + DEFAULT_CONFIG, + ).flowsInstancesList(args); + return flows.results; + }} + .renderElement=${(flow: Flow): string => { + return flow.name; + }} + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; + }} + .value=${(flow: Flow | undefined): string | undefined => { + return flow?.pk; + }} + .selected=${(flow: Flow): boolean => { + let selected = flow.pk === t.flowAuthentication; + if (this.instance?.authorizationFlow === flow.pk) { + selected = true; + } + return selected; + }} + ?blankable=${true} + > + + `; + }), + html``, + )}

${t`Flow used for users to authenticate. Currently only identification and password stages are supported.`}

diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts b/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts index 0d565067e..af2e790c8 100644 --- a/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts +++ b/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts @@ -97,8 +97,8 @@ export class OAuth2ProviderFormPage extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/providers/proxy/ProxyProviderForm.ts b/web/src/admin/providers/proxy/ProxyProviderForm.ts index 830b60cc8..ab584cd09 100644 --- a/web/src/admin/providers/proxy/ProxyProviderForm.ts +++ b/web/src/admin/providers/proxy/ProxyProviderForm.ts @@ -313,8 +313,8 @@ export class ProxyProviderFormPage extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/providers/saml/SAMLProviderForm.ts b/web/src/admin/providers/saml/SAMLProviderForm.ts index 05b75e83c..b4c9aa81c 100644 --- a/web/src/admin/providers/saml/SAMLProviderForm.ts +++ b/web/src/admin/providers/saml/SAMLProviderForm.ts @@ -22,7 +22,9 @@ import { FlowsInstancesListDesignationEnum, FlowsInstancesListRequest, PropertymappingsApi, + PropertymappingsSamlListRequest, ProvidersApi, + SAMLPropertyMapping, SAMLProvider, SignatureAlgorithmEnum, SpBindingEnum, @@ -87,8 +89,8 @@ export class SAMLProviderFormPage extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; @@ -276,32 +278,35 @@ export class SAMLProviderFormPage extends ModelForm { label=${t`NameID Property Mapping`} name="nameIdMapping" > - + => { + const args: PropertymappingsSamlListRequest = { + ordering: "saml_name", + }; + if (query !== undefined) { + args.search = query; + } + const items = await new PropertymappingsApi( + DEFAULT_CONFIG, + ).propertymappingsSamlList(args); + return items.results; + }} + .renderElement=${(item: SAMLPropertyMapping): string => { + return item.name; + }} + .value=${( + item: SAMLPropertyMapping | undefined, + ): string | undefined => { + return item?.pk; + }} + .selected=${(item: SAMLPropertyMapping): boolean => { + return this.instance?.nameIdMapping === item.pk; + }} + ?blankable=${true} + > +

${t`Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.`}

diff --git a/web/src/admin/providers/saml/SAMLProviderImportForm.ts b/web/src/admin/providers/saml/SAMLProviderImportForm.ts index d8a948d43..4996d3e2b 100644 --- a/web/src/admin/providers/saml/SAMLProviderImportForm.ts +++ b/web/src/admin/providers/saml/SAMLProviderImportForm.ts @@ -62,8 +62,8 @@ export class SAMLProviderImportForm extends Form { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/sources/oauth/OAuthSourceForm.ts b/web/src/admin/sources/oauth/OAuthSourceForm.ts index ae12a151b..b18cfcb72 100644 --- a/web/src/admin/sources/oauth/OAuthSourceForm.ts +++ b/web/src/admin/sources/oauth/OAuthSourceForm.ts @@ -2,6 +2,7 @@ import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils" import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config"; import { first } from "@goauthentik/common/utils"; import "@goauthentik/elements/CodeMirror"; +import "@goauthentik/elements/SearchSelect"; import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/HorizontalFormElement"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; @@ -15,8 +16,10 @@ import { until } from "lit/directives/until.js"; import { CapabilitiesEnum, + Flow, FlowsApi, FlowsInstancesListDesignationEnum, + FlowsInstancesListRequest, OAuthSource, OAuthSourceRequest, ProviderTypeEnum, @@ -399,42 +402,43 @@ export class OAuthSourceForm extends ModelForm { ?required=${true} name="authenticationFlow" > - + => { + const args: FlowsInstancesListRequest = { + ordering: "slug", + designation: FlowsInstancesListDesignationEnum.Authentication, + }; + if (query !== undefined) { + args.search = query; + } + const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList( + args, + ); + return flows.results; + }} + .renderElement=${(flow: Flow): string => { + return flow.name; + }} + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; + }} + .value=${(flow: Flow | undefined): string | undefined => { + return flow?.pk; + }} + .selected=${(flow: Flow): boolean => { + let selected = this.instance?.authenticationFlow === flow.pk; + if ( + !this.instance?.pk && + !this.instance?.authenticationFlow && + flow.slug === "default-source-authentication" + ) { + selected = true; + } + return selected; + }} + ?blankable=${true} + > +

${t`Flow to use when authenticating existing users.`}

@@ -444,41 +448,43 @@ export class OAuthSourceForm extends ModelForm { ?required=${true} name="enrollmentFlow" > - + => { + const args: FlowsInstancesListRequest = { + ordering: "slug", + designation: FlowsInstancesListDesignationEnum.Enrollment, + }; + if (query !== undefined) { + args.search = query; + } + const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList( + args, + ); + return flows.results; + }} + .renderElement=${(flow: Flow): string => { + return flow.name; + }} + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; + }} + .value=${(flow: Flow | undefined): string | undefined => { + return flow?.pk; + }} + .selected=${(flow: Flow): boolean => { + let selected = this.instance?.enrollmentFlow === flow.pk; + if ( + !this.instance?.pk && + !this.instance?.enrollmentFlow && + flow.slug === "default-source-enrollment" + ) { + selected = true; + } + return selected; + }} + ?blankable=${true} + > +

${t`Flow to use when enrolling new users.`}

diff --git a/web/src/admin/sources/plex/PlexSourceForm.ts b/web/src/admin/sources/plex/PlexSourceForm.ts index 6a04ea262..5b83aeb9a 100644 --- a/web/src/admin/sources/plex/PlexSourceForm.ts +++ b/web/src/admin/sources/plex/PlexSourceForm.ts @@ -2,6 +2,7 @@ import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils" import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config"; import { PlexAPIClient, PlexResource, popupCenterScreen } from "@goauthentik/common/helpers/plex"; import { first, randomString } from "@goauthentik/common/utils"; +import "@goauthentik/elements/SearchSelect"; import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/HorizontalFormElement"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; @@ -15,8 +16,10 @@ import { until } from "lit/directives/until.js"; import { CapabilitiesEnum, + Flow, FlowsApi, FlowsInstancesListDesignationEnum, + FlowsInstancesListRequest, PlexSource, SourcesApi, UserMatchingModeEnum, @@ -328,42 +331,43 @@ export class PlexSourceForm extends ModelForm { ?required=${true} name="authenticationFlow" > - + => { + const args: FlowsInstancesListRequest = { + ordering: "slug", + designation: FlowsInstancesListDesignationEnum.Authentication, + }; + if (query !== undefined) { + args.search = query; + } + const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList( + args, + ); + return flows.results; + }} + .renderElement=${(flow: Flow): string => { + return flow.name; + }} + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; + }} + .value=${(flow: Flow | undefined): string | undefined => { + return flow?.pk; + }} + .selected=${(flow: Flow): boolean => { + let selected = this.instance?.enrollmentFlow === flow.pk; + if ( + !this.instance?.pk && + !this.instance?.enrollmentFlow && + flow.slug === "default-source-authentication" + ) { + selected = true; + } + return selected; + }} + ?blankable=${true} + > +

${t`Flow to use when authenticating existing users.`}

@@ -373,41 +377,43 @@ export class PlexSourceForm extends ModelForm { ?required=${true} name="enrollmentFlow" > - + => { + const args: FlowsInstancesListRequest = { + ordering: "slug", + designation: FlowsInstancesListDesignationEnum.Enrollment, + }; + if (query !== undefined) { + args.search = query; + } + const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList( + args, + ); + return flows.results; + }} + .renderElement=${(flow: Flow): string => { + return flow.name; + }} + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; + }} + .value=${(flow: Flow | undefined): string | undefined => { + return flow?.pk; + }} + .selected=${(flow: Flow): boolean => { + let selected = this.instance?.enrollmentFlow === flow.pk; + if ( + !this.instance?.pk && + !this.instance?.enrollmentFlow && + flow.slug === "default-source-enrollment" + ) { + selected = true; + } + return selected; + }} + ?blankable=${true} + > +

${t`Flow to use when enrolling new users.`}

diff --git a/web/src/admin/sources/saml/SAMLSourceForm.ts b/web/src/admin/sources/saml/SAMLSourceForm.ts index cf41a1313..3447f3e46 100644 --- a/web/src/admin/sources/saml/SAMLSourceForm.ts +++ b/web/src/admin/sources/saml/SAMLSourceForm.ts @@ -498,8 +498,8 @@ export class SAMLSourceForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; @@ -542,8 +542,8 @@ export class SAMLSourceForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; @@ -588,8 +588,8 @@ export class SAMLSourceForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts b/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts index 9f2d76919..114e4256e 100644 --- a/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts +++ b/web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts @@ -148,8 +148,8 @@ export class AuthenticatorDuoStageForm extends ModelForm { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts b/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts index 7c2b86b80..c43741018 100644 --- a/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts +++ b/web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts @@ -19,7 +19,9 @@ import { FlowsApi, FlowsInstancesListDesignationEnum, FlowsInstancesListRequest, + NotificationWebhookMapping, PropertymappingsApi, + PropertymappingsNotificationListRequest, ProviderEnum, StagesApi, } from "@goauthentik/api"; @@ -160,26 +162,33 @@ export class AuthenticatorSMSStageForm extends ModelForm - + => { + const args: PropertymappingsNotificationListRequest = { + ordering: "saml_name", + }; + if (query !== undefined) { + args.search = query; + } + const items = await new PropertymappingsApi( + DEFAULT_CONFIG, + ).propertymappingsNotificationList(args); + return items.results; + }} + .renderElement=${(item: NotificationWebhookMapping): string => { + return item.name; + }} + .value=${(item: NotificationWebhookMapping | undefined): string | undefined => { + return item?.pk; + }} + .selected=${(item: NotificationWebhookMapping): boolean => { + return this.instance?.mapping === item.pk; + }} + ?blankable=${true} + > +

${t`Modify the payload sent to the custom provider.`}

@@ -279,8 +288,8 @@ export class AuthenticatorSMSStageForm extends ModelForm { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts b/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts index b766f5362..271825585 100644 --- a/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts +++ b/web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts @@ -95,8 +95,8 @@ export class AuthenticatorStaticStageForm extends ModelForm { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts b/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts index d5ea967fc..0f129fd0e 100644 --- a/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts +++ b/web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts @@ -100,8 +100,8 @@ export class AuthenticatorTOTPStageForm extends ModelForm { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts b/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts index f07dbc849..cc8d9c3cd 100644 --- a/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts +++ b/web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts @@ -174,8 +174,8 @@ export class AuthenticateWebAuthnStageForm extends ModelForm { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/stages/identification/IdentificationStageForm.ts b/web/src/admin/stages/identification/IdentificationStageForm.ts index cc9748f78..7110dc304 100644 --- a/web/src/admin/stages/identification/IdentificationStageForm.ts +++ b/web/src/admin/stages/identification/IdentificationStageForm.ts @@ -1,5 +1,6 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; -import { first } from "@goauthentik/common/utils"; +import { first, groupBy } from "@goauthentik/common/utils"; +import "@goauthentik/elements/SearchSelect"; import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/HorizontalFormElement"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; @@ -12,11 +13,15 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { until } from "lit/directives/until.js"; import { + Flow, FlowsApi, FlowsInstancesListDesignationEnum, + FlowsInstancesListRequest, IdentificationStage, SourcesApi, + Stage, StagesApi, + StagesPasswordListRequest, UserFieldsEnum, } from "@goauthentik/api"; @@ -102,33 +107,34 @@ export class IdentificationStageForm extends ModelForm - + => { + const args: StagesPasswordListRequest = { + ordering: "name", + }; + if (query !== undefined) { + args.search = query; + } + const stages = await new StagesApi( + DEFAULT_CONFIG, + ).stagesPasswordList(args); + return stages.results; + }} + .groupBy=${(items: Stage[]) => { + return groupBy(items, (stage) => stage.verboseNamePlural); + }} + .renderElement=${(stage: Stage): string => { + return stage.name; + }} + .value=${(stage: Stage | undefined): string | undefined => { + return stage?.pk; + }} + .selected=${(stage: Stage): boolean => { + return stage.pk === this.instance?.passwordStage; + }} + ?blankable=${true} + > +

${t`When selected, a password field is shown on the same page instead of a separate page. This prevents username enumeration attacks.`}

@@ -226,98 +232,103 @@ export class IdentificationStageForm extends ModelForm - + => { + const args: FlowsInstancesListRequest = { + ordering: "slug", + designation: FlowsInstancesListDesignationEnum.Authentication, + }; + if (query !== undefined) { + args.search = query; + } + const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList( + args, + ); + return flows.results; + }} + .renderElement=${(flow: Flow): string => { + return flow.name; + }} + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; + }} + .value=${(flow: Flow | undefined): string | undefined => { + return flow?.pk; + }} + .selected=${(flow: Flow): boolean => { + return this.instance?.passwordlessFlow == flow.pk; + }} + ?blankable=${true} + > +

${t`Optional passwordless flow, which is linked at the bottom of the page. When configured, users can use this flow to authenticate with a WebAuthn authenticator, without entering any details.`}

- + => { + const args: FlowsInstancesListRequest = { + ordering: "slug", + designation: FlowsInstancesListDesignationEnum.Enrollment, + }; + if (query !== undefined) { + args.search = query; + } + const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList( + args, + ); + return flows.results; + }} + .renderElement=${(flow: Flow): string => { + return flow.name; + }} + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; + }} + .value=${(flow: Flow | undefined): string | undefined => { + return flow?.pk; + }} + .selected=${(flow: Flow): boolean => { + return this.instance?.enrollmentFlow == flow.pk; + }} + ?blankable=${true} + > +

${t`Optional enrollment flow, which is linked at the bottom of the page.`}

- + => { + const args: FlowsInstancesListRequest = { + ordering: "slug", + designation: FlowsInstancesListDesignationEnum.Recovery, + }; + if (query !== undefined) { + args.search = query; + } + const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList( + args, + ); + return flows.results; + }} + .renderElement=${(flow: Flow): string => { + return flow.name; + }} + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; + }} + .value=${(flow: Flow | undefined): string | undefined => { + return flow?.pk; + }} + .selected=${(flow: Flow): boolean => { + return this.instance?.recoveryFlow == flow.pk; + }} + ?blankable=${true} + > +

${t`Optional recovery flow, which is linked at the bottom of the page.`}

diff --git a/web/src/admin/stages/invitation/InvitationForm.ts b/web/src/admin/stages/invitation/InvitationForm.ts index 045ecf12c..b594cc233 100644 --- a/web/src/admin/stages/invitation/InvitationForm.ts +++ b/web/src/admin/stages/invitation/InvitationForm.ts @@ -90,8 +90,8 @@ export class InvitationForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/stages/password/PasswordStageForm.ts b/web/src/admin/stages/password/PasswordStageForm.ts index d9a1f5917..b248f75dd 100644 --- a/web/src/admin/stages/password/PasswordStageForm.ts +++ b/web/src/admin/stages/password/PasswordStageForm.ts @@ -138,8 +138,8 @@ export class PasswordStageForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; diff --git a/web/src/admin/tenants/TenantForm.ts b/web/src/admin/tenants/TenantForm.ts index 905b5eae5..9677cc5a4 100644 --- a/web/src/admin/tenants/TenantForm.ts +++ b/web/src/admin/tenants/TenantForm.ts @@ -162,8 +162,8 @@ export class TenantForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; @@ -199,8 +199,8 @@ export class TenantForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; @@ -234,8 +234,8 @@ export class TenantForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; @@ -271,8 +271,8 @@ export class TenantForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; @@ -309,8 +309,8 @@ export class TenantForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk; @@ -344,8 +344,8 @@ export class TenantForm extends ModelForm { .renderElement=${(flow: Flow): string => { return flow.name; }} - .renderDescription=${(flow: Flow): string => { - return flow.slug; + .renderDescription=${(flow: Flow): TemplateResult => { + return html`${flow.slug}`; }} .value=${(flow: Flow | undefined): string | undefined => { return flow?.pk;