trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
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;

58
web/src/admin/blueprints/BlueprintForm.ts
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">

45
web/src/admin/policies/event_matcher/EventMatcherPolicyForm.ts
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>

69
web/src/admin/providers/ldap/LDAPProviderForm.ts
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>

4
web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
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;

4
web/src/admin/providers/proxy/ProxyProviderForm.ts
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;

61
web/src/admin/providers/saml/SAMLProviderForm.ts
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>

4
web/src/admin/providers/saml/SAMLProviderImportForm.ts
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;

148
web/src/admin/sources/oauth/OAuthSourceForm.ts
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>

148
web/src/admin/sources/plex/PlexSourceForm.ts
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>

12
web/src/admin/sources/saml/SAMLSourceForm.ts
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;

4
web/src/admin/stages/authenticator_duo/AuthenticatorDuoStageForm.ts
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;

53
web/src/admin/stages/authenticator_sms/AuthenticatorSMSStageForm.ts
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;

4
web/src/admin/stages/authenticator_static/AuthenticatorStaticStageForm.ts
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;

4
web/src/admin/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
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;

4
web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts
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;

231
web/src/admin/stages/identification/IdentificationStageForm.ts
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>

4
web/src/admin/stages/invitation/InvitationForm.ts
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;

4
web/src/admin/stages/password/PasswordStageForm.ts
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;

24
web/src/admin/tenants/TenantForm.ts
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;