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

web/admin: replace more selects with search select 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-12-29 13:15:09 +01:00
parent 1149a61986
commit 5fba08c911
No known key found for this signature in database
13 changed files with 468 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/src/admin/applications/ApplicationForm.ts
View File

@ -1,6 +1,7 @@
import "@goauthentik/admin/providers/ProviderWizard"; import "@goauthentik/admin/providers/ProviderWizard";
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, 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 "@goauthentik/elements/forms/ModalForm"; import "@goauthentik/elements/forms/ModalForm";
@ -20,6 +21,7 @@ import {
CoreApi, CoreApi,
PolicyEngineMode, PolicyEngineMode,
Provider, Provider,
ProvidersAllListRequest,
ProvidersApi, ProvidersApi,
} from "@goauthentik/api"; } from "@goauthentik/api";
@ -78,29 +80,6 @@ export class ApplicationForm extends ModelForm<Application, string> {
return app; return app;
}; };
groupProviders(providers: Provider[]): TemplateResult {
const m = new Map<string, Provider[]>();
providers.forEach((p) => {
if (!m.has(p.verboseName || "")) {
m.set(p.verboseName || "", []);
}
const tProviders = m.get(p.verboseName || "") || [];
tProviders.push(p);
});
return html`
${Array.from(m).map(([group, providers]) => {
return html`<optgroup label=${group}>
${providers.map((p) => {
const selected = this.instance?.provider === p.pk || this.provider === p.pk;
return html`<option ?selected=${selected} value=${ifDefined(p.pk)}>
${p.name}
</option>`;
})}
</optgroup>`;
})}
`;
}
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name"> <ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
@ -132,17 +111,32 @@ export class ApplicationForm extends ModelForm<Application, string> {
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Provider`} name="provider"> <ak-form-element-horizontal label=${t`Provider`} name="provider">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.provider === undefined}> .fetchObjects=${async (query?: string): Promise<Provider[]> => {
--------- const args: ProvidersAllListRequest = {
</option> ordering: "name",
${until( };
new ProvidersApi(DEFAULT_CONFIG).providersAllList({}).then((providers) => { if (query !== undefined) {
return this.groupProviders(providers.results); args.search = query;
}), }
html`<option>${t`Loading...`}</option>`, const items = await new ProvidersApi(DEFAULT_CONFIG).providersAllList(args);
)} return items.results;
</select> }}
.renderElement=${(item: Provider): string => {
return item.name;
}}
.value=${(item: Provider | undefined): number | undefined => {
return item?.pk;
}}
.groupBy=${(items: Provider[]) => {
return groupBy(items, (item) => item.verboseName);
}}
.selected=${(item: Provider): boolean => {
return this.instance?.provider === item.pk;
}}
?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Select a provider that this application should use. Alternatively, create a new provider.`} ${t`Select a provider that this application should use. Alternatively, create a new provider.`}
</p> </p>

3
web/src/admin/applications/ApplicationListPage.ts
View File

@ -70,6 +70,9 @@ export class ApplicationListPage extends TablePage<Application> {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
margin-left: calc(var(--pf-c-sidebar__main--child--MarginLeft) / 2);
}
`, `,
); );
} }

2
web/src/admin/applications/wizard/oauth/TypeOAuthCodeApplicationWizardPage.ts
View File

@ -50,7 +50,7 @@ export class TypeOAuthCodeApplicationWizardPage extends WizardFormPage {
<ak-search-select <ak-search-select
.fetchObjects=${async (query?: string): Promise<Flow[]> => { .fetchObjects=${async (query?: string): Promise<Flow[]> => {
const args: FlowsInstancesListRequest = { const args: FlowsInstancesListRequest = {
ordering: "name", ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authorization, designation: FlowsInstancesListDesignationEnum.Authorization,
}; };
if (query !== undefined) { if (query !== undefined) {

51
web/src/admin/events/TransportForm.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/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -8,13 +9,14 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } 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 { import {
EventsApi, EventsApi,
NotificationTransport, NotificationTransport,
NotificationTransportModeEnum, NotificationTransportModeEnum,
NotificationWebhookMapping,
PropertymappingsApi, PropertymappingsApi,
PropertymappingsNotificationListRequest,
} from "@goauthentik/api"; } from "@goauthentik/api";
@customElement("ak-event-transport-form") @customElement("ak-event-transport-form")
@ -132,26 +134,33 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
label=${t`Webhook Mapping`} label=${t`Webhook Mapping`}
name="webhookMapping" name="webhookMapping"
> >
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.webhookMapping === undefined}> .fetchObjects=${async (
--------- query?: string,
</option> ): Promise<NotificationWebhookMapping[]> => {
${until( const args: PropertymappingsNotificationListRequest = {
new PropertymappingsApi(DEFAULT_CONFIG) ordering: "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?.webhookMapping === 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?.webhookMapping === item.pk;
}}
?blankable=${true}
>
</ak-search-select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="sendOnce"> <ak-form-element-horizontal name="sendOnce">
<div class="pf-c-check"> <div class="pf-c-check">

69
web/src/admin/outposts/OutpostForm.ts
View File

@ -1,6 +1,8 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import { groupBy } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import YAML from "yaml"; import YAML from "yaml";
@ -12,7 +14,14 @@ import { customElement, property } 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 { Outpost, OutpostTypeEnum, OutpostsApi, ProvidersApi } from "@goauthentik/api"; import {
Outpost,
OutpostTypeEnum,
OutpostsApi,
OutpostsServiceConnectionsAllListRequest,
ProvidersApi,
ServiceConnection,
} from "@goauthentik/api";
@customElement("ak-outpost-form") @customElement("ak-outpost-form")
export class OutpostForm extends ModelForm<Outpost, string> { export class OutpostForm extends ModelForm<Outpost, string> {
@ -134,32 +143,38 @@ export class OutpostForm extends ModelForm<Outpost, string> {
</select> </select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Integration`} name="serviceConnection"> <ak-form-element-horizontal label=${t`Integration`} name="serviceConnection">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.serviceConnection === undefined}> .fetchObjects=${async (query?: string): Promise<ServiceConnection[]> => {
--------- const args: OutpostsServiceConnectionsAllListRequest = {
</option> ordering: "name",
${until( };
new OutpostsApi(DEFAULT_CONFIG) if (query !== undefined) {
.outpostsServiceConnectionsAllList({ args.search = query;
ordering: "name", }
}) const items = await new OutpostsApi(
.then((scs) => { DEFAULT_CONFIG,
return scs.results.map((sc) => { ).outpostsServiceConnectionsAllList(args);
let selected = this.instance?.serviceConnection === sc.pk; return items.results;
if (scs.results.length === 1 && !this.instance) { }}
selected = true; .renderElement=${(item: ServiceConnection): string => {
} return item.name;
return html`<option }}
value=${ifDefined(sc.pk)} .value=${(item: ServiceConnection | undefined): string | undefined => {
?selected=${selected} return item?.pk;
> }}
${sc.name} (${sc.verboseName}) .groupBy=${(items: ServiceConnection[]) => {
</option>`; return groupBy(items, (item) => item.verboseName);
}); }}
}), .selected=${(item: ServiceConnection, items: ServiceConnection[]): boolean => {
html`<option>${t`Loading...`}</option>`, let selected = this.instance?.serviceConnection === sc.pk;
)} if (items.length === 1 && !this.instance) {
</select> selected = true;
}
return selected;
}}
?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Selecting an integration enables the management of the outpost by authentik.`} ${t`Selecting an integration enables the management of the outpost by authentik.`}
</p> </p>

120
web/src/admin/outposts/ServiceConnectionDockerForm.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/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -8,9 +9,14 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js"; 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 { CryptoApi, DockerServiceConnection, OutpostsApi } from "@goauthentik/api"; import {
CertificateKeyPair,
CryptoApi,
CryptoCertificatekeypairsListRequest,
DockerServiceConnection,
OutpostsApi,
} from "@goauthentik/api";
@customElement("ak-service-connection-docker-form") @customElement("ak-service-connection-docker-form")
export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnection, string> { export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnection, string> {
@ -79,34 +85,33 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
label=${t`TLS Verification Certificate`} label=${t`TLS Verification Certificate`}
name="tlsVerification" name="tlsVerification"
> >
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.tlsVerification === undefined}> .fetchObjects=${async (query?: string): Promise<CertificateKeyPair[]> => {
--------- const args: CryptoCertificatekeypairsListRequest = {
</option> ordering: "name",
${until( hasKey: true,
new CryptoApi(DEFAULT_CONFIG) includeDetails: false,
.cryptoCertificatekeypairsList({ };
ordering: "name", if (query !== undefined) {
includeDetails: false, args.search = query;
}) }
.then((certs) => { const certificates = await new CryptoApi(
return certs.results.map((cert) => { DEFAULT_CONFIG,
return html`<option ).cryptoCertificatekeypairsList(args);
value=${ifDefined(cert.pk)} return certificates.results;
?selected=${this.instance?.tlsVerification === cert.pk} }}
> .renderElement=${(item: CertificateKeyPair): string => {
${cert.name} return item.name;
</option>`; }}
}); .value=${(item: CertificateKeyPair | undefined): string | undefined => {
}), return item?.pk;
html`<option }}
value=${ifDefined(this.instance?.tlsVerification || undefined)} .selected=${(item: CertificateKeyPair): boolean => {
?selected=${this.instance?.tlsVerification !== undefined} return this.instance?.tlsVerification === item.pk;
> }}
${t`Loading...`} ?blankable=${true}
</option>`, >
)} </ak-search-select>
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`CA which the endpoint's Certificate is verified against. Can be left empty for no validation.`} ${t`CA which the endpoint's Certificate is verified against. Can be left empty for no validation.`}
</p> </p>
@ -115,34 +120,33 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
label=${t`TLS Authentication Certificate/SSH Keypair`} label=${t`TLS Authentication Certificate/SSH Keypair`}
name="tlsAuthentication" name="tlsAuthentication"
> >
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.tlsAuthentication === undefined}> .fetchObjects=${async (query?: string): Promise<CertificateKeyPair[]> => {
--------- const args: CryptoCertificatekeypairsListRequest = {
</option> ordering: "name",
${until( hasKey: true,
new CryptoApi(DEFAULT_CONFIG) includeDetails: false,
.cryptoCertificatekeypairsList({ };
ordering: "name", if (query !== undefined) {
includeDetails: false, args.search = query;
}) }
.then((certs) => { const certificates = await new CryptoApi(
return certs.results.map((cert) => { DEFAULT_CONFIG,
return html`<option ).cryptoCertificatekeypairsList(args);
value=${ifDefined(cert.pk)} return certificates.results;
?selected=${this.instance?.tlsAuthentication === cert.pk} }}
> .renderElement=${(item: CertificateKeyPair): string => {
${cert.name} return item.name;
</option>`; }}
}); .value=${(item: CertificateKeyPair | undefined): string | undefined => {
}), return item?.pk;
html`<option }}
value=${ifDefined(this.instance?.tlsAuthentication || undefined)} .selected=${(item: CertificateKeyPair): boolean => {
?selected=${this.instance?.tlsAuthentication !== undefined} return this.instance?.tlsAuthentication === item.pk;
> }}
${t`Loading...`} ?blankable=${true}
</option>`, >
)} </ak-search-select>
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Certificate/Key used for authentication. Can be left empty for no authentication.`} ${t`Certificate/Key used for authentication. Can be left empty for no authentication.`}
</p> </p>

5
web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
View File

@ -85,7 +85,7 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
<ak-search-select <ak-search-select
.fetchObjects=${async (query?: string): Promise<Flow[]> => { .fetchObjects=${async (query?: string): Promise<Flow[]> => {
const args: FlowsInstancesListRequest = { const args: FlowsInstancesListRequest = {
ordering: "name", ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authorization, designation: FlowsInstancesListDesignationEnum.Authorization,
}; };
if (query !== undefined) { if (query !== undefined) {
@ -103,6 +103,9 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
.value=${(flow: Flow | undefined): string | undefined => { .value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk; return flow?.pk;
}} }}
.selected=${(flow: Flow): boolean => {
return flow.pk === this.instance?.authorizationFlow;
}}
> >
</ak-search-select> </ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">

2
web/src/admin/providers/proxy/ProxyProviderForm.ts
View File

@ -301,7 +301,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
<ak-search-select <ak-search-select
.fetchObjects=${async (query?: string): Promise<Flow[]> => { .fetchObjects=${async (query?: string): Promise<Flow[]> => {
const args: FlowsInstancesListRequest = { const args: FlowsInstancesListRequest = {
ordering: "name", ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authorization, designation: FlowsInstancesListDesignationEnum.Authorization,
}; };
if (query !== undefined) { if (query !== undefined) {

2
web/src/admin/providers/saml/SAMLProviderForm.ts
View File

@ -75,7 +75,7 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
<ak-search-select <ak-search-select
.fetchObjects=${async (query?: string): Promise<Flow[]> => { .fetchObjects=${async (query?: string): Promise<Flow[]> => {
const args: FlowsInstancesListRequest = { const args: FlowsInstancesListRequest = {
ordering: "name", ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authorization, designation: FlowsInstancesListDesignationEnum.Authorization,
}; };
if (query !== undefined) { if (query !== undefined) {

2
web/src/admin/providers/saml/SAMLProviderImportForm.ts
View File

@ -50,7 +50,7 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
<ak-search-select <ak-search-select
.fetchObjects=${async (query?: string): Promise<Flow[]> => { .fetchObjects=${async (query?: string): Promise<Flow[]> => {
const args: FlowsInstancesListRequest = { const args: FlowsInstancesListRequest = {
ordering: "name", ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authorization, designation: FlowsInstancesListDesignationEnum.Authorization,
}; };
if (query !== undefined) { if (query !== undefined) {

221
web/src/admin/sources/saml/SAMLSourceForm.ts
View File

@ -20,8 +20,10 @@ import {
CryptoApi, CryptoApi,
CryptoCertificatekeypairsListRequest, CryptoCertificatekeypairsListRequest,
DigestAlgorithmEnum, DigestAlgorithmEnum,
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
NameIdPolicyEnum, NameIdPolicyEnum,
SAMLSource, SAMLSource,
SignatureAlgorithmEnum, SignatureAlgorithmEnum,
@ -478,42 +480,44 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
?required=${true} ?required=${true}
name="preAuthenticationFlow" name="preAuthenticationFlow"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.preAuthenticationFlow === undefined} ordering: "slug",
> designation:
--------- FlowsInstancesListDesignationEnum.StageConfiguration,
</option> };
${until( if (query !== undefined) {
new FlowsApi(DEFAULT_CONFIG) args.search = query;
.flowsInstancesList({ }
ordering: "slug", const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
designation: args,
FlowsInstancesListDesignationEnum.StageConfiguration, );
}) return flows.results;
.then((flows) => { }}
return flows.results.map((flow) => { .renderElement=${(flow: Flow): string => {
let selected = return flow.name;
this.instance?.preAuthenticationFlow === flow.pk; }}
if ( .renderDescription=${(flow: Flow): string => {
!this.instance?.pk && return flow.slug;
!this.instance?.preAuthenticationFlow && }}
flow.slug === "default-source-pre-authentication" .value=${(flow: Flow | undefined): string | undefined => {
) { return flow?.pk;
selected = true; }}
} .selected=${(flow: Flow): boolean => {
return html`<option let selected = this.instance?.preAuthenticationFlow === flow.pk;
value=${ifDefined(flow.pk)} if (
?selected=${selected} !this.instance?.pk &&
> !this.instance?.preAuthenticationFlow &&
${flow.name} (${flow.slug}) flow.slug === "default-source-pre-authentication"
</option>`; ) {
}); selected = true;
}), }
html`<option>${t`Loading...`}</option>`, return selected;
)} }}
</select> ?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text">${t`Flow used before authentication.`}</p> <p class="pf-c-form__helper-text">${t`Flow used before authentication.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
@ -521,42 +525,43 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, 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): string => {
if ( return 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>
@ -566,41 +571,43 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, 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): string => {
!this.instance?.pk && return 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>

2
web/src/admin/stages/invitation/InvitationForm.ts
View File

@ -78,7 +78,7 @@ export class InvitationForm extends ModelForm<Invitation, string> {
<ak-search-select <ak-search-select
.fetchObjects=${async (query?: string): Promise<Flow[]> => { .fetchObjects=${async (query?: string): Promise<Flow[]> => {
const args: FlowsInstancesListRequest = { const args: FlowsInstancesListRequest = {
ordering: "name", ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Enrollment, designation: FlowsInstancesListDesignationEnum.Enrollment,
}; };
if (query !== undefined) { if (query !== undefined) {

348
web/src/admin/tenants/TenantForm.ts
View File

@ -12,15 +12,16 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js"; import { customElement } from "lit/decorators.js";
import { until } from "lit/directives/until.js";
import { import {
CertificateKeyPair, CertificateKeyPair,
CoreApi, CoreApi,
CryptoApi, CryptoApi,
CryptoCertificatekeypairsListRequest, CryptoCertificatekeypairsListRequest,
Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
Tenant, Tenant,
} from "@goauthentik/api"; } from "@goauthentik/api";
@ -144,35 +145,35 @@ export class TenantForm extends ModelForm<Tenant, string> {
label=${t`Authentication flow`} label=${t`Authentication flow`}
name="flowAuthentication" name="flowAuthentication"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.flowAuthentication === 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?.flowAuthentication === flow.pk; .renderDescription=${(flow: Flow): string => {
return html`<option return flow.slug;
value=${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?.flowAuthentication === 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`Flow used to authenticate users. If left empty, the first applicable flow sorted by the slug is used.`} ${t`Flow used to authenticate users. If left empty, the first applicable flow sorted by the slug is used.`}
</p> </p>
@ -181,64 +182,70 @@ export class TenantForm extends ModelForm<Tenant, string> {
label=${t`Invalidation flow`} label=${t`Invalidation flow`}
name="flowInvalidation" name="flowInvalidation"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.flowInvalidation === undefined} ordering: "slug",
> designation: FlowsInstancesListDesignationEnum.Invalidation,
--------- };
</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.Invalidation, );
}) return flows.results;
.then((flows) => { }}
return flows.results.map((flow) => { .renderElement=${(flow: Flow): string => {
const selected = return flow.name;
this.instance?.flowInvalidation === flow.pk; }}
return html`<option .renderDescription=${(flow: Flow): string => {
value=${flow.pk} return 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?.flowInvalidation === 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`Flow used to logout. If left empty, the first applicable flow sorted by the slug is used.`} ${t`Flow used to logout. If left empty, the first applicable flow sorted by the slug is used.`}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Recovery flow`} name="flowRecovery"> <ak-form-element-horizontal label=${t`Recovery flow`} name="flowRecovery">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.flowRecovery === 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?.flowRecovery === flow.pk; }}
return html`<option .renderElement=${(flow: Flow): string => {
value=${flow.pk} return flow.name;
?selected=${selected} }}
> .renderDescription=${(flow: Flow): string => {
${flow.name} (${flow.slug}) return 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?.flowRecovery === flow.pk;
}}
?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Recovery flow. If left empty, the first applicable flow sorted by the slug is used.`} ${t`Recovery flow. If left empty, the first applicable flow sorted by the slug is used.`}
</p> </p>
@ -247,34 +254,35 @@ export class TenantForm extends ModelForm<Tenant, string> {
label=${t`Unenrollment flow`} label=${t`Unenrollment flow`}
name="flowUnenrollment" name="flowUnenrollment"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.flowUnenrollment === undefined} ordering: "slug",
> designation: FlowsInstancesListDesignationEnum.Unenrollment,
--------- };
</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.Unenrollment, );
}) return flows.results;
.then((flows) => { }}
return flows.results.map((flow) => { .renderElement=${(flow: Flow): string => {
const selected = return flow.name;
this.instance?.flowUnenrollment === flow.pk; }}
return html`<option .renderDescription=${(flow: Flow): string => {
value=${flow.pk} return 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?.flowUnenrollment === 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`If set, users are able to unenroll themselves using this flow. If no flow is set, option is not shown.`} ${t`If set, users are able to unenroll themselves using this flow. If no flow is set, option is not shown.`}
</p> </p>
@ -283,69 +291,71 @@ export class TenantForm extends ModelForm<Tenant, string> {
label=${t`User settings flow`} label=${t`User settings flow`}
name="flowUserSettings" name="flowUserSettings"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.flowUserSettings === undefined} ordering: "slug",
> designation:
--------- FlowsInstancesListDesignationEnum.StageConfiguration,
</option> };
${until( if (query !== undefined) {
new FlowsApi(DEFAULT_CONFIG) args.search = query;
.flowsInstancesList({ }
ordering: "slug", const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
designation: args,
FlowsInstancesListDesignationEnum.StageConfiguration, );
}) return flows.results;
.then((flows) => { }}
return flows.results.map((flow) => { .renderElement=${(flow: Flow): string => {
const selected = return flow.name;
this.instance?.flowUserSettings === flow.pk; }}
return html`<option .renderDescription=${(flow: Flow): string => {
value=${flow.pk} return 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?.flowUserSettings === 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`If set, users are able to configure details of their profile.`} ${t`If set, users are able to configure details of their profile.`}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Device code flow`} name="flowDeviceCode"> <ak-form-element-horizontal label=${t`Device code flow`} name="flowDeviceCode">
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (query?: string): Promise<Flow[]> => {
value="" const args: FlowsInstancesListRequest = {
?selected=${this.instance?.flowDeviceCode === undefined} ordering: "slug",
> designation:
--------- FlowsInstancesListDesignationEnum.StageConfiguration,
</option> };
${until( if (query !== undefined) {
new FlowsApi(DEFAULT_CONFIG) args.search = query;
.flowsInstancesList({ }
ordering: "slug", const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
designation: args,
FlowsInstancesListDesignationEnum.StageConfiguration, );
}) return flows.results;
.then((flows) => { }}
return flows.results.map((flow) => { .renderElement=${(flow: Flow): string => {
const selected = return flow.name;
this.instance?.flowDeviceCode === flow.pk; }}
return html`<option .renderDescription=${(flow: Flow): string => {
value=${flow.pk} return 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?.flowDeviceCode === 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`If set, the OAuth Device Code profile can be used, and the selected flow will be used to enter the code.`} ${t`If set, the OAuth Device Code profile can be used, and the selected flow will be used to enter the code.`}
</p> </p>