web/admin: finish migration to search-select

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-12-29 22:28:54 +01:00
parent 68b58fb73c
commit c46b2d5573
No known key found for this signature in database
20 changed files with 475 additions and 414 deletions

View File

@ -62,8 +62,8 @@ export class TypeOAuthCodeApplicationWizardPage extends WizardFormPage {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -2,6 +2,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -12,12 +13,11 @@ import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, css, html } from "lit"; import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, state } from "lit/decorators.js"; import { customElement, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.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 PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.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 { enum blueprintSource {
local, local,
@ -133,30 +133,36 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
<div class="pf-c-card__footer"> <div class="pf-c-card__footer">
${this.source === blueprintSource.local ${this.source === blueprintSource.local
? html`<ak-form-element-horizontal label=${t`Path`} name="path"> ? html`<ak-form-element-horizontal label=${t`Path`} name="path">
<select class="pf-c-form-control"> <ak-search-select
${until( .fetchObjects=${async (
new ManagedApi(DEFAULT_CONFIG) query?: string,
.managedBlueprintsAvailableList() ): Promise<BlueprintFile[]> => {
.then((files) => { const items = await new ManagedApi(
return files.map((file) => { DEFAULT_CONFIG,
let name = file.path; ).managedBlueprintsAvailableList();
if (file.meta && file.meta.name) { return items.filter((item) =>
name = `${name} (${file.meta.name})`; query ? item.path.includes(query) : true,
} );
const selected = }}
file.path === this.instance?.path; .renderElement=${(item: BlueprintFile): string => {
return html`<option const name = item.path;
?selected=${selected} if (item.meta && item.meta.name) {
value=${file.path} return `${name} (${item.meta.name})`;
> }
${name} return name;
</option>`; }}
}); .value=${(
}), item: BlueprintFile | undefined,
html`<option>${t`Loading...`}</option>`, ): string | undefined => {
)} return item?.path;
</select></ak-form-element-horizontal }}
>` .selected=${(item: BlueprintFile): boolean => {
return this.instance?.path === item.path;
}}
?blankable=${true}
>
</ak-search-select>
</ak-form-element-horizontal>`
: html``} : html``}
${this.source === blueprintSource.oci ${this.source === blueprintSource.oci
? html`<ak-form-element-horizontal label=${t`URL`} name="path"> ? html`<ak-form-element-horizontal label=${t`URL`} name="path">

View File

@ -1,5 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; 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 { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.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") @customElement("ak-policy-event-matcher-form")
export class EventMatcherPolicyForm extends ModelForm<EventMatcherPolicy, string> { export class EventMatcherPolicyForm extends ModelForm<EventMatcherPolicy, string> {
@ -72,27 +73,27 @@ export class EventMatcherPolicyForm extends ModelForm<EventMatcherPolicy, string
<span slot="header"> ${t`Policy-specific settings`} </span> <span slot="header"> ${t`Policy-specific settings`} </span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`Action`} name="action"> <ak-form-element-horizontal label=${t`Action`} name="action">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.action === undefined}> .fetchObjects=${async (query?: string): Promise<TypeCreate[]> => {
--------- const items = await new EventsApi(
</option> DEFAULT_CONFIG,
${until( ).eventsEventsActionsList();
new EventsApi(DEFAULT_CONFIG) return items.filter((item) =>
.eventsEventsActionsList() query ? item.name.includes(query) : true,
.then((actions) => { );
return actions.map((action) => { }}
return html`<option .renderElement=${(item: TypeCreate): string => {
value=${action.component} return item.name;
?selected=${this.instance?.action === }}
action.component} .value=${(item: TypeCreate | undefined): string | undefined => {
> return item?.component;
${action.name} }}
</option>`; .selected=${(item: TypeCreate): boolean => {
}); return this.instance?.action === item.component;
}), }}
html`<option>${t`Loading...`}</option>`, ?blankable=${true}
)} >
</select> </ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Match created events with this action type. When left empty, all action types will be matched.`} ${t`Match created events with this action type. When left empty, all action types will be matched.`}
</p> </p>

View File

@ -18,8 +18,10 @@ import {
CoreGroupsListRequest, CoreGroupsListRequest,
CryptoApi, CryptoApi,
CryptoCertificatekeypairsListRequest, CryptoCertificatekeypairsListRequest,
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
Group, Group,
LDAPAPIAccessMode, LDAPAPIAccessMode,
LDAPProvider, LDAPProvider,
@ -71,32 +73,47 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
?required=${true} ?required=${true}
name="authorizationFlow" name="authorizationFlow"
> >
<select class="pf-c-form-control"> ${until(
${until( tenant().then((t) => {
tenant().then((t) => { return html`
return new FlowsApi(DEFAULT_CONFIG) <ak-search-select
.flowsInstancesList({ .fetchObjects=${async (query?: string): Promise<Flow[]> => {
ordering: "slug", const args: FlowsInstancesListRequest = {
designation: FlowsInstancesListDesignationEnum.Authentication, ordering: "slug",
}) designation:
.then((flows) => { FlowsInstancesListDesignationEnum.Authentication,
return flows.results.map((flow) => { };
let selected = flow.pk === t.flowAuthentication; if (query !== undefined) {
if (this.instance?.authorizationFlow === flow.pk) { args.search = query;
selected = true; }
} const flows = await new FlowsApi(
return html`<option DEFAULT_CONFIG,
value=${ifDefined(flow.pk)} ).flowsInstancesList(args);
?selected=${selected} return flows.results;
> }}
${flow.name} (${flow.slug}) .renderElement=${(flow: Flow): string => {
</option>`; return flow.name;
}); }}
}); .renderDescription=${(flow: Flow): TemplateResult => {
}), return html`${flow.slug}`;
html`<option>${t`Loading...`}</option>`, }}
)} .value=${(flow: Flow | undefined): string | undefined => {
</select> 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}
>
</ak-search-select>
`;
}),
html`<option>${t`Loading...`}</option>`,
)}
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Flow used for users to authenticate. Currently only identification and password stages are supported.`} ${t`Flow used for users to authenticate. Currently only identification and password stages are supported.`}
</p> </p>

View File

@ -97,8 +97,8 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -313,8 +313,8 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -22,7 +22,9 @@ import {
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest, FlowsInstancesListRequest,
PropertymappingsApi, PropertymappingsApi,
PropertymappingsSamlListRequest,
ProvidersApi, ProvidersApi,
SAMLPropertyMapping,
SAMLProvider, SAMLProvider,
SignatureAlgorithmEnum, SignatureAlgorithmEnum,
SpBindingEnum, SpBindingEnum,
@ -87,8 +89,8 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;
@ -276,32 +278,35 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
label=${t`NameID Property Mapping`} label=${t`NameID Property Mapping`}
name="nameIdMapping" name="nameIdMapping"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (
value="" query?: string,
?selected=${this.instance?.nameIdMapping === undefined} ): Promise<SAMLPropertyMapping[]> => {
> const args: PropertymappingsSamlListRequest = {
--------- ordering: "saml_name",
</option> };
${until( if (query !== undefined) {
new PropertymappingsApi(DEFAULT_CONFIG) args.search = query;
.propertymappingsSamlList({ }
ordering: "saml_name", const items = await new PropertymappingsApi(
}) DEFAULT_CONFIG,
.then((mappings) => { ).propertymappingsSamlList(args);
return mappings.results.map((mapping) => { return items.results;
return html`<option }}
value=${ifDefined(mapping.pk)} .renderElement=${(item: SAMLPropertyMapping): string => {
?selected=${this.instance?.nameIdMapping === return item.name;
mapping.pk} }}
> .value=${(
${mapping.name} item: SAMLPropertyMapping | undefined,
</option>`; ): string | undefined => {
}); return item?.pk;
}), }}
html`<option>${t`Loading...`}</option>`, .selected=${(item: SAMLPropertyMapping): boolean => {
)} return this.instance?.nameIdMapping === item.pk;
</select> }}
?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.`} ${t`Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.`}
</p> </p>

View File

@ -62,8 +62,8 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -2,6 +2,7 @@ import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils"
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -15,8 +16,10 @@ import { until } from "lit/directives/until.js";
import { import {
CapabilitiesEnum, CapabilitiesEnum,
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
OAuthSource, OAuthSource,
OAuthSourceRequest, OAuthSourceRequest,
ProviderTypeEnum, ProviderTypeEnum,
@ -399,42 +402,43 @@ export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
?required=${true} ?required=${true}
name="authenticationFlow" name="authenticationFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.authenticationFlow === undefined} ordering: "slug",
> designation: FlowsInstancesListDesignationEnum.Authentication,
--------- };
</option> if (query !== undefined) {
${until( args.search = query;
new FlowsApi(DEFAULT_CONFIG) }
.flowsInstancesList({ const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
ordering: "slug", args,
designation: );
FlowsInstancesListDesignationEnum.Authentication, return flows.results;
}) }}
.then((flows) => { .renderElement=${(flow: Flow): string => {
return flows.results.map((flow) => { return flow.name;
let selected = }}
this.instance?.authenticationFlow === flow.pk; .renderDescription=${(flow: Flow): TemplateResult => {
if ( return html`${flow.slug}`;
!this.instance?.pk && }}
!this.instance?.authenticationFlow && .value=${(flow: Flow | undefined): string | undefined => {
flow.slug === "default-source-authentication" return flow?.pk;
) { }}
selected = true; .selected=${(flow: Flow): boolean => {
} let selected = this.instance?.authenticationFlow === flow.pk;
return html`<option if (
value=${ifDefined(flow.pk)} !this.instance?.pk &&
?selected=${selected} !this.instance?.authenticationFlow &&
> flow.slug === "default-source-authentication"
${flow.name} (${flow.slug}) ) {
</option>`; selected = true;
}); }
}), return selected;
html`<option>${t`Loading...`}</option>`, }}
)} ?blankable=${true}
</select> >
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Flow to use when authenticating existing users.`} ${t`Flow to use when authenticating existing users.`}
</p> </p>
@ -444,41 +448,43 @@ export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
?required=${true} ?required=${true}
name="enrollmentFlow" name="enrollmentFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.enrollmentFlow === undefined} ordering: "slug",
> designation: FlowsInstancesListDesignationEnum.Enrollment,
--------- };
</option> if (query !== undefined) {
${until( args.search = query;
new FlowsApi(DEFAULT_CONFIG) }
.flowsInstancesList({ const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
ordering: "slug", args,
designation: FlowsInstancesListDesignationEnum.Enrollment, );
}) return flows.results;
.then((flows) => { }}
return flows.results.map((flow) => { .renderElement=${(flow: Flow): string => {
let selected = return flow.name;
this.instance?.enrollmentFlow === flow.pk; }}
if ( .renderDescription=${(flow: Flow): TemplateResult => {
!this.instance?.pk && return html`${flow.slug}`;
!this.instance?.enrollmentFlow && }}
flow.slug === "default-source-enrollment" .value=${(flow: Flow | undefined): string | undefined => {
) { return flow?.pk;
selected = true; }}
} .selected=${(flow: Flow): boolean => {
return html`<option let selected = this.instance?.enrollmentFlow === flow.pk;
value=${ifDefined(flow.pk)} if (
?selected=${selected} !this.instance?.pk &&
> !this.instance?.enrollmentFlow &&
${flow.name} (${flow.slug}) flow.slug === "default-source-enrollment"
</option>`; ) {
}); selected = true;
}), }
html`<option>${t`Loading...`}</option>`, return selected;
)} }}
</select> ?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Flow to use when enrolling new users.`} ${t`Flow to use when enrolling new users.`}
</p> </p>

View File

@ -2,6 +2,7 @@ import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils"
import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
import { PlexAPIClient, PlexResource, popupCenterScreen } from "@goauthentik/common/helpers/plex"; import { PlexAPIClient, PlexResource, popupCenterScreen } from "@goauthentik/common/helpers/plex";
import { first, randomString } from "@goauthentik/common/utils"; import { first, randomString } from "@goauthentik/common/utils";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -15,8 +16,10 @@ import { until } from "lit/directives/until.js";
import { import {
CapabilitiesEnum, CapabilitiesEnum,
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
PlexSource, PlexSource,
SourcesApi, SourcesApi,
UserMatchingModeEnum, UserMatchingModeEnum,
@ -328,42 +331,43 @@ export class PlexSourceForm extends ModelForm<PlexSource, string> {
?required=${true} ?required=${true}
name="authenticationFlow" name="authenticationFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.authenticationFlow === undefined} ordering: "slug",
> designation: FlowsInstancesListDesignationEnum.Authentication,
--------- };
</option> if (query !== undefined) {
${until( args.search = query;
new FlowsApi(DEFAULT_CONFIG) }
.flowsInstancesList({ const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
ordering: "slug", args,
designation: );
FlowsInstancesListDesignationEnum.Authentication, return flows.results;
}) }}
.then((flows) => { .renderElement=${(flow: Flow): string => {
return flows.results.map((flow) => { return flow.name;
let selected = }}
this.instance?.authenticationFlow === flow.pk; .renderDescription=${(flow: Flow): TemplateResult => {
if ( return html`${flow.slug}`;
!this.instance?.pk && }}
!this.instance?.authenticationFlow && .value=${(flow: Flow | undefined): string | undefined => {
flow.slug === "default-source-authentication" return flow?.pk;
) { }}
selected = true; .selected=${(flow: Flow): boolean => {
} let selected = this.instance?.enrollmentFlow === flow.pk;
return html`<option if (
value=${ifDefined(flow.pk)} !this.instance?.pk &&
?selected=${selected} !this.instance?.enrollmentFlow &&
> flow.slug === "default-source-authentication"
${flow.name} (${flow.slug}) ) {
</option>`; selected = true;
}); }
}), return selected;
html`<option>${t`Loading...`}</option>`, }}
)} ?blankable=${true}
</select> >
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Flow to use when authenticating existing users.`} ${t`Flow to use when authenticating existing users.`}
</p> </p>
@ -373,41 +377,43 @@ export class PlexSourceForm extends ModelForm<PlexSource, string> {
?required=${true} ?required=${true}
name="enrollmentFlow" name="enrollmentFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.enrollmentFlow === undefined} ordering: "slug",
> designation: FlowsInstancesListDesignationEnum.Enrollment,
--------- };
</option> if (query !== undefined) {
${until( args.search = query;
new FlowsApi(DEFAULT_CONFIG) }
.flowsInstancesList({ const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
ordering: "slug", args,
designation: FlowsInstancesListDesignationEnum.Enrollment, );
}) return flows.results;
.then((flows) => { }}
return flows.results.map((flow) => { .renderElement=${(flow: Flow): string => {
let selected = return flow.name;
this.instance?.enrollmentFlow === flow.pk; }}
if ( .renderDescription=${(flow: Flow): TemplateResult => {
!this.instance?.pk && return html`${flow.slug}`;
!this.instance?.enrollmentFlow && }}
flow.slug === "default-source-enrollment" .value=${(flow: Flow | undefined): string | undefined => {
) { return flow?.pk;
selected = true; }}
} .selected=${(flow: Flow): boolean => {
return html`<option let selected = this.instance?.enrollmentFlow === flow.pk;
value=${ifDefined(flow.pk)} if (
?selected=${selected} !this.instance?.pk &&
> !this.instance?.enrollmentFlow &&
${flow.name} (${flow.slug}) flow.slug === "default-source-enrollment"
</option>`; ) {
}); selected = true;
}), }
html`<option>${t`Loading...`}</option>`, return selected;
)} }}
</select> ?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Flow to use when enrolling new users.`} ${t`Flow to use when enrolling new users.`}
</p> </p>

View File

@ -498,8 +498,8 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;
@ -542,8 +542,8 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;
@ -588,8 +588,8 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -148,8 +148,8 @@ export class AuthenticatorDuoStageForm extends ModelForm<AuthenticatorDuoStage,
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -19,7 +19,9 @@ import {
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest, FlowsInstancesListRequest,
NotificationWebhookMapping,
PropertymappingsApi, PropertymappingsApi,
PropertymappingsNotificationListRequest,
ProviderEnum, ProviderEnum,
StagesApi, StagesApi,
} from "@goauthentik/api"; } from "@goauthentik/api";
@ -160,26 +162,33 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Mapping`} name="mapping"> <ak-form-element-horizontal label=${t`Mapping`} name="mapping">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.mapping === undefined}> .fetchObjects=${async (
--------- query?: string,
</option> ): Promise<NotificationWebhookMapping[]> => {
${until( const args: PropertymappingsNotificationListRequest = {
new PropertymappingsApi(DEFAULT_CONFIG) ordering: "saml_name",
.propertymappingsNotificationList({}) };
.then((mappings) => { if (query !== undefined) {
return mappings.results.map((mapping) => { args.search = query;
return html`<option }
value=${ifDefined(mapping.pk)} const items = await new PropertymappingsApi(
?selected=${this.instance?.mapping === mapping.pk} DEFAULT_CONFIG,
> ).propertymappingsNotificationList(args);
${mapping.name} return items.results;
</option>`; }}
}); .renderElement=${(item: NotificationWebhookMapping): string => {
}), return item.name;
html`<option>${t`Loading...`}</option>`, }}
)} .value=${(item: NotificationWebhookMapping | undefined): string | undefined => {
</select> return item?.pk;
}}
.selected=${(item: NotificationWebhookMapping): boolean => {
return this.instance?.mapping === item.pk;
}}
?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Modify the payload sent to the custom provider.`} ${t`Modify the payload sent to the custom provider.`}
</p> </p>
@ -279,8 +288,8 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -95,8 +95,8 @@ export class AuthenticatorStaticStageForm extends ModelForm<AuthenticatorStaticS
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -100,8 +100,8 @@ export class AuthenticatorTOTPStageForm extends ModelForm<AuthenticatorTOTPStage
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -174,8 +174,8 @@ export class AuthenticateWebAuthnStageForm extends ModelForm<AuthenticateWebAuth
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -1,5 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; 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/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; 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 { until } from "lit/directives/until.js";
import { import {
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
IdentificationStage, IdentificationStage,
SourcesApi, SourcesApi,
Stage,
StagesApi, StagesApi,
StagesPasswordListRequest,
UserFieldsEnum, UserFieldsEnum,
} from "@goauthentik/api"; } from "@goauthentik/api";
@ -102,33 +107,34 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Password stage`} name="passwordStage"> <ak-form-element-horizontal label=${t`Password stage`} name="passwordStage">
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Stage[]> => {
value="" const args: StagesPasswordListRequest = {
?selected=${this.instance?.passwordStage === undefined} ordering: "name",
> };
--------- if (query !== undefined) {
</option> args.search = query;
${until( }
new StagesApi(DEFAULT_CONFIG) const stages = await new StagesApi(
.stagesPasswordList({ DEFAULT_CONFIG,
ordering: "name", ).stagesPasswordList(args);
}) return stages.results;
.then((stages) => { }}
return stages.results.map((stage) => { .groupBy=${(items: Stage[]) => {
const selected = return groupBy(items, (stage) => stage.verboseNamePlural);
this.instance?.passwordStage === stage.pk; }}
return html`<option .renderElement=${(stage: Stage): string => {
value=${ifDefined(stage.pk)} return stage.name;
?selected=${selected} }}
> .value=${(stage: Stage | undefined): string | undefined => {
${stage.name} return stage?.pk;
</option>`; }}
}); .selected=${(stage: Stage): boolean => {
}), return stage.pk === this.instance?.passwordStage;
html`<option>${t`Loading...`}</option>`, }}
)} ?blankable=${true}
</select> >
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`When selected, a password field is shown on the same page instead of a separate page. This prevents username enumeration attacks.`} ${t`When selected, a password field is shown on the same page instead of a separate page. This prevents username enumeration attacks.`}
</p> </p>
@ -226,98 +232,103 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
label=${t`Passwordless flow`} label=${t`Passwordless flow`}
name="passwordlessFlow" name="passwordlessFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.passwordlessFlow === undefined} ordering: "slug",
> designation: FlowsInstancesListDesignationEnum.Authentication,
--------- };
</option> if (query !== undefined) {
${until( args.search = query;
new FlowsApi(DEFAULT_CONFIG) }
.flowsInstancesList({ const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
ordering: "slug", args,
designation: );
FlowsInstancesListDesignationEnum.Authentication, return flows.results;
}) }}
.then((flows) => { .renderElement=${(flow: Flow): string => {
return flows.results.map((flow) => { return flow.name;
const selected = }}
this.instance?.passwordlessFlow === flow.pk; .renderDescription=${(flow: Flow): TemplateResult => {
return html`<option return html`${flow.slug}`;
value=${ifDefined(flow.pk)} }}
?selected=${selected} .value=${(flow: Flow | undefined): string | undefined => {
> return flow?.pk;
${flow.name} (${flow.slug}) }}
</option>`; .selected=${(flow: Flow): boolean => {
}); return this.instance?.passwordlessFlow == flow.pk;
}), }}
html`<option>${t`Loading...`}</option>`, ?blankable=${true}
)} >
</select> </ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${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.`} ${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.`}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Enrollment flow`} name="enrollmentFlow"> <ak-form-element-horizontal label=${t`Enrollment flow`} name="enrollmentFlow">
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.enrollmentFlow === undefined} ordering: "slug",
> designation: FlowsInstancesListDesignationEnum.Enrollment,
--------- };
</option> if (query !== undefined) {
${until( args.search = query;
new FlowsApi(DEFAULT_CONFIG) }
.flowsInstancesList({ const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
ordering: "slug", args,
designation: FlowsInstancesListDesignationEnum.Enrollment, );
}) return flows.results;
.then((flows) => { }}
return flows.results.map((flow) => { .renderElement=${(flow: Flow): string => {
const selected = return flow.name;
this.instance?.enrollmentFlow === flow.pk; }}
return html`<option .renderDescription=${(flow: Flow): TemplateResult => {
value=${ifDefined(flow.pk)} return html`${flow.slug}`;
?selected=${selected} }}
> .value=${(flow: Flow | undefined): string | undefined => {
${flow.name} (${flow.slug}) return flow?.pk;
</option>`; }}
}); .selected=${(flow: Flow): boolean => {
}), return this.instance?.enrollmentFlow == flow.pk;
html`<option>${t`Loading...`}</option>`, }}
)} ?blankable=${true}
</select> >
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Optional enrollment flow, which is linked at the bottom of the page.`} ${t`Optional enrollment flow, which is linked at the bottom of the page.`}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Recovery flow`} name="recoveryFlow"> <ak-form-element-horizontal label=${t`Recovery flow`} name="recoveryFlow">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.recoveryFlow === undefined}> .fetchObjects=${async (query?: string): Promise<Flow[]> => {
--------- const args: FlowsInstancesListRequest = {
</option> ordering: "slug",
${until( designation: FlowsInstancesListDesignationEnum.Recovery,
new FlowsApi(DEFAULT_CONFIG) };
.flowsInstancesList({ if (query !== undefined) {
ordering: "slug", args.search = query;
designation: FlowsInstancesListDesignationEnum.Recovery, }
}) const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
.then((flows) => { args,
return flows.results.map((flow) => { );
const selected = return flows.results;
this.instance?.recoveryFlow === flow.pk; }}
return html`<option .renderElement=${(flow: Flow): string => {
value=${ifDefined(flow.pk)} return flow.name;
?selected=${selected} }}
> .renderDescription=${(flow: Flow): TemplateResult => {
${flow.name} (${flow.slug}) return html`${flow.slug}`;
</option>`; }}
}); .value=${(flow: Flow | undefined): string | undefined => {
}), return flow?.pk;
html`<option>${t`Loading...`}</option>`, }}
)} .selected=${(flow: Flow): boolean => {
</select> return this.instance?.recoveryFlow == flow.pk;
}}
?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Optional recovery flow, which is linked at the bottom of the page.`} ${t`Optional recovery flow, which is linked at the bottom of the page.`}
</p> </p>

View File

@ -90,8 +90,8 @@ export class InvitationForm extends ModelForm<Invitation, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -138,8 +138,8 @@ export class PasswordStageForm extends ModelForm<PasswordStage, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;

View File

@ -162,8 +162,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;
@ -199,8 +199,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;
@ -234,8 +234,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;
@ -271,8 +271,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;
@ -309,8 +309,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;
@ -344,8 +344,8 @@ export class TenantForm extends ModelForm<Tenant, string> {
.renderElement=${(flow: Flow): string => { .renderElement=${(flow: Flow): string => {
return flow.name; return flow.name;
}} }}
.renderDescription=${(flow: Flow): string => { .renderDescription=${(flow: Flow): TemplateResult => {
return flow.slug; return html`${flow.slug}`;
}} }}
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;