web/admin: replace more selects with search select
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
parent
1149a61986
commit
5fba08c911
|
|
@ -1,6 +1,7 @@
|
|||
import "@goauthentik/admin/providers/ProviderWizard";
|
||||
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/HorizontalFormElement";
|
||||
import "@goauthentik/elements/forms/ModalForm";
|
||||
|
|
@ -20,6 +21,7 @@ import {
|
|||
CoreApi,
|
||||
PolicyEngineMode,
|
||||
Provider,
|
||||
ProvidersAllListRequest,
|
||||
ProvidersApi,
|
||||
} from "@goauthentik/api";
|
||||
|
||||
|
|
@ -78,29 +80,6 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
|||
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 {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
|
||||
|
|
@ -132,17 +111,32 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
|||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Provider`} name="provider">
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.instance?.provider === undefined}>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new ProvidersApi(DEFAULT_CONFIG).providersAllList({}).then((providers) => {
|
||||
return this.groupProviders(providers.results);
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Provider[]> => {
|
||||
const args: ProvidersAllListRequest = {
|
||||
ordering: "name",
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const items = await new ProvidersApi(DEFAULT_CONFIG).providersAllList(args);
|
||||
return items.results;
|
||||
}}
|
||||
.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">
|
||||
${t`Select a provider that this application should use. Alternatively, create a new provider.`}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -70,6 +70,9 @@ export class ApplicationListPage extends TablePage<Application> {
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
|
||||
margin-left: calc(var(--pf-c-sidebar__main--child--MarginLeft) / 2);
|
||||
}
|
||||
`,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export class TypeOAuthCodeApplicationWizardPage extends WizardFormPage {
|
|||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "name",
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Authorization,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
|
||||
|
|
@ -8,13 +9,14 @@ import { t } from "@lingui/macro";
|
|||
import { TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
import { until } from "lit/directives/until.js";
|
||||
|
||||
import {
|
||||
EventsApi,
|
||||
NotificationTransport,
|
||||
NotificationTransportModeEnum,
|
||||
NotificationWebhookMapping,
|
||||
PropertymappingsApi,
|
||||
PropertymappingsNotificationListRequest,
|
||||
} from "@goauthentik/api";
|
||||
|
||||
@customElement("ak-event-transport-form")
|
||||
|
|
@ -132,26 +134,33 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
|
|||
label=${t`Webhook Mapping`}
|
||||
name="webhookMapping"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.instance?.webhookMapping === undefined}>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new PropertymappingsApi(DEFAULT_CONFIG)
|
||||
.propertymappingsNotificationList({})
|
||||
.then((mappings) => {
|
||||
return mappings.results.map((mapping) => {
|
||||
return html`<option
|
||||
value=${ifDefined(mapping.pk)}
|
||||
?selected=${this.instance?.webhookMapping === mapping.pk}
|
||||
>
|
||||
${mapping.name}
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (
|
||||
query?: string,
|
||||
): Promise<NotificationWebhookMapping[]> => {
|
||||
const args: PropertymappingsNotificationListRequest = {
|
||||
ordering: "name",
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const items = await new PropertymappingsApi(
|
||||
DEFAULT_CONFIG,
|
||||
).propertymappingsNotificationList(args);
|
||||
return items.results;
|
||||
}}
|
||||
.renderElement=${(item: NotificationWebhookMapping): string => {
|
||||
return item.name;
|
||||
}}
|
||||
.value=${(item: NotificationWebhookMapping | undefined): string | undefined => {
|
||||
return item?.pk;
|
||||
}}
|
||||
.selected=${(item: NotificationWebhookMapping): boolean => {
|
||||
return this.instance?.webhookMapping === item.pk;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="sendOnce">
|
||||
<div class="pf-c-check">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { docLink } from "@goauthentik/common/global";
|
||||
import { groupBy } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/CodeMirror";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import YAML from "yaml";
|
||||
|
|
@ -12,7 +14,14 @@ import { customElement, property } from "lit/decorators.js";
|
|||
import { ifDefined } from "lit/directives/if-defined.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")
|
||||
export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
|
|
@ -134,32 +143,38 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
|||
</select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Integration`} name="serviceConnection">
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.instance?.serviceConnection === undefined}>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new OutpostsApi(DEFAULT_CONFIG)
|
||||
.outpostsServiceConnectionsAllList({
|
||||
ordering: "name",
|
||||
})
|
||||
.then((scs) => {
|
||||
return scs.results.map((sc) => {
|
||||
let selected = this.instance?.serviceConnection === sc.pk;
|
||||
if (scs.results.length === 1 && !this.instance) {
|
||||
selected = true;
|
||||
}
|
||||
return html`<option
|
||||
value=${ifDefined(sc.pk)}
|
||||
?selected=${selected}
|
||||
>
|
||||
${sc.name} (${sc.verboseName})
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<ServiceConnection[]> => {
|
||||
const args: OutpostsServiceConnectionsAllListRequest = {
|
||||
ordering: "name",
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const items = await new OutpostsApi(
|
||||
DEFAULT_CONFIG,
|
||||
).outpostsServiceConnectionsAllList(args);
|
||||
return items.results;
|
||||
}}
|
||||
.renderElement=${(item: ServiceConnection): string => {
|
||||
return item.name;
|
||||
}}
|
||||
.value=${(item: ServiceConnection | undefined): string | undefined => {
|
||||
return item?.pk;
|
||||
}}
|
||||
.groupBy=${(items: ServiceConnection[]) => {
|
||||
return groupBy(items, (item) => item.verboseName);
|
||||
}}
|
||||
.selected=${(item: ServiceConnection, items: ServiceConnection[]): boolean => {
|
||||
let selected = this.instance?.serviceConnection === sc.pk;
|
||||
if (items.length === 1 && !this.instance) {
|
||||
selected = true;
|
||||
}
|
||||
return selected;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Selecting an integration enables the management of the outpost by authentik.`}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/elements/SearchSelect";
|
||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
|
||||
|
|
@ -8,9 +9,14 @@ import { t } from "@lingui/macro";
|
|||
import { TemplateResult, html } from "lit";
|
||||
import { customElement } from "lit/decorators.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")
|
||||
export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnection, string> {
|
||||
|
|
@ -79,34 +85,33 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
|
|||
label=${t`TLS Verification Certificate`}
|
||||
name="tlsVerification"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.instance?.tlsVerification === undefined}>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new CryptoApi(DEFAULT_CONFIG)
|
||||
.cryptoCertificatekeypairsList({
|
||||
ordering: "name",
|
||||
includeDetails: false,
|
||||
})
|
||||
.then((certs) => {
|
||||
return certs.results.map((cert) => {
|
||||
return html`<option
|
||||
value=${ifDefined(cert.pk)}
|
||||
?selected=${this.instance?.tlsVerification === cert.pk}
|
||||
>
|
||||
${cert.name}
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option
|
||||
value=${ifDefined(this.instance?.tlsVerification || undefined)}
|
||||
?selected=${this.instance?.tlsVerification !== undefined}
|
||||
>
|
||||
${t`Loading...`}
|
||||
</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<CertificateKeyPair[]> => {
|
||||
const args: CryptoCertificatekeypairsListRequest = {
|
||||
ordering: "name",
|
||||
hasKey: true,
|
||||
includeDetails: false,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const certificates = await new CryptoApi(
|
||||
DEFAULT_CONFIG,
|
||||
).cryptoCertificatekeypairsList(args);
|
||||
return certificates.results;
|
||||
}}
|
||||
.renderElement=${(item: CertificateKeyPair): string => {
|
||||
return item.name;
|
||||
}}
|
||||
.value=${(item: CertificateKeyPair | undefined): string | undefined => {
|
||||
return item?.pk;
|
||||
}}
|
||||
.selected=${(item: CertificateKeyPair): boolean => {
|
||||
return this.instance?.tlsVerification === item.pk;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`CA which the endpoint's Certificate is verified against. Can be left empty for no validation.`}
|
||||
</p>
|
||||
|
|
@ -115,34 +120,33 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
|
|||
label=${t`TLS Authentication Certificate/SSH Keypair`}
|
||||
name="tlsAuthentication"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.instance?.tlsAuthentication === undefined}>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new CryptoApi(DEFAULT_CONFIG)
|
||||
.cryptoCertificatekeypairsList({
|
||||
ordering: "name",
|
||||
includeDetails: false,
|
||||
})
|
||||
.then((certs) => {
|
||||
return certs.results.map((cert) => {
|
||||
return html`<option
|
||||
value=${ifDefined(cert.pk)}
|
||||
?selected=${this.instance?.tlsAuthentication === cert.pk}
|
||||
>
|
||||
${cert.name}
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option
|
||||
value=${ifDefined(this.instance?.tlsAuthentication || undefined)}
|
||||
?selected=${this.instance?.tlsAuthentication !== undefined}
|
||||
>
|
||||
${t`Loading...`}
|
||||
</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<CertificateKeyPair[]> => {
|
||||
const args: CryptoCertificatekeypairsListRequest = {
|
||||
ordering: "name",
|
||||
hasKey: true,
|
||||
includeDetails: false,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const certificates = await new CryptoApi(
|
||||
DEFAULT_CONFIG,
|
||||
).cryptoCertificatekeypairsList(args);
|
||||
return certificates.results;
|
||||
}}
|
||||
.renderElement=${(item: CertificateKeyPair): string => {
|
||||
return item.name;
|
||||
}}
|
||||
.value=${(item: CertificateKeyPair | undefined): string | undefined => {
|
||||
return item?.pk;
|
||||
}}
|
||||
.selected=${(item: CertificateKeyPair): boolean => {
|
||||
return this.instance?.tlsAuthentication === item.pk;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Certificate/Key used for authentication. Can be left empty for no authentication.`}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
|
|||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "name",
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Authorization,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
|
|
@ -103,6 +103,9 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
|
|||
.value=${(flow: Flow | undefined): string | undefined => {
|
||||
return flow?.pk;
|
||||
}}
|
||||
.selected=${(flow: Flow): boolean => {
|
||||
return flow.pk === this.instance?.authorizationFlow;
|
||||
}}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
|
|
|
|||
|
|
@ -301,7 +301,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
|
|||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "name",
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Authorization,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
|
|||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "name",
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Authorization,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
|
|||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "name",
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Authorization,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
|
|
|
|||
|
|
@ -20,8 +20,10 @@ import {
|
|||
CryptoApi,
|
||||
CryptoCertificatekeypairsListRequest,
|
||||
DigestAlgorithmEnum,
|
||||
Flow,
|
||||
FlowsApi,
|
||||
FlowsInstancesListDesignationEnum,
|
||||
FlowsInstancesListRequest,
|
||||
NameIdPolicyEnum,
|
||||
SAMLSource,
|
||||
SignatureAlgorithmEnum,
|
||||
|
|
@ -478,42 +480,44 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
|
|||
?required=${true}
|
||||
name="preAuthenticationFlow"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=""
|
||||
?selected=${this.instance?.preAuthenticationFlow === undefined}
|
||||
>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesList({
|
||||
ordering: "slug",
|
||||
designation:
|
||||
FlowsInstancesListDesignationEnum.StageConfiguration,
|
||||
})
|
||||
.then((flows) => {
|
||||
return flows.results.map((flow) => {
|
||||
let selected =
|
||||
this.instance?.preAuthenticationFlow === flow.pk;
|
||||
if (
|
||||
!this.instance?.pk &&
|
||||
!this.instance?.preAuthenticationFlow &&
|
||||
flow.slug === "default-source-pre-authentication"
|
||||
) {
|
||||
selected = true;
|
||||
}
|
||||
return html`<option
|
||||
value=${ifDefined(flow.pk)}
|
||||
?selected=${selected}
|
||||
>
|
||||
${flow.name} (${flow.slug})
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "slug",
|
||||
designation:
|
||||
FlowsInstancesListDesignationEnum.StageConfiguration,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
|
||||
args,
|
||||
);
|
||||
return flows.results;
|
||||
}}
|
||||
.renderElement=${(flow: Flow): string => {
|
||||
return flow.name;
|
||||
}}
|
||||
.renderDescription=${(flow: Flow): string => {
|
||||
return flow.slug;
|
||||
}}
|
||||
.value=${(flow: Flow | undefined): string | undefined => {
|
||||
return flow?.pk;
|
||||
}}
|
||||
.selected=${(flow: Flow): boolean => {
|
||||
let selected = this.instance?.preAuthenticationFlow === flow.pk;
|
||||
if (
|
||||
!this.instance?.pk &&
|
||||
!this.instance?.preAuthenticationFlow &&
|
||||
flow.slug === "default-source-pre-authentication"
|
||||
) {
|
||||
selected = true;
|
||||
}
|
||||
return selected;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">${t`Flow used before authentication.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
|
|
@ -521,42 +525,43 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
|
|||
?required=${true}
|
||||
name="authenticationFlow"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=""
|
||||
?selected=${this.instance?.authenticationFlow === undefined}
|
||||
>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesList({
|
||||
ordering: "slug",
|
||||
designation:
|
||||
FlowsInstancesListDesignationEnum.Authentication,
|
||||
})
|
||||
.then((flows) => {
|
||||
return flows.results.map((flow) => {
|
||||
let selected =
|
||||
this.instance?.authenticationFlow === flow.pk;
|
||||
if (
|
||||
!this.instance?.pk &&
|
||||
!this.instance?.authenticationFlow &&
|
||||
flow.slug === "default-source-authentication"
|
||||
) {
|
||||
selected = true;
|
||||
}
|
||||
return html`<option
|
||||
value=${ifDefined(flow.pk)}
|
||||
?selected=${selected}
|
||||
>
|
||||
${flow.name} (${flow.slug})
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Authentication,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
|
||||
args,
|
||||
);
|
||||
return flows.results;
|
||||
}}
|
||||
.renderElement=${(flow: Flow): string => {
|
||||
return flow.name;
|
||||
}}
|
||||
.renderDescription=${(flow: Flow): string => {
|
||||
return flow.slug;
|
||||
}}
|
||||
.value=${(flow: Flow | undefined): string | undefined => {
|
||||
return flow?.pk;
|
||||
}}
|
||||
.selected=${(flow: Flow): boolean => {
|
||||
let selected = this.instance?.authenticationFlow === flow.pk;
|
||||
if (
|
||||
!this.instance?.pk &&
|
||||
!this.instance?.authenticationFlow &&
|
||||
flow.slug === "default-source-authentication"
|
||||
) {
|
||||
selected = true;
|
||||
}
|
||||
return selected;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Flow to use when authenticating existing users.`}
|
||||
</p>
|
||||
|
|
@ -566,41 +571,43 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
|
|||
?required=${true}
|
||||
name="enrollmentFlow"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=""
|
||||
?selected=${this.instance?.enrollmentFlow === undefined}
|
||||
>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesList({
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Enrollment,
|
||||
})
|
||||
.then((flows) => {
|
||||
return flows.results.map((flow) => {
|
||||
let selected =
|
||||
this.instance?.enrollmentFlow === flow.pk;
|
||||
if (
|
||||
!this.instance?.pk &&
|
||||
!this.instance?.enrollmentFlow &&
|
||||
flow.slug === "default-source-enrollment"
|
||||
) {
|
||||
selected = true;
|
||||
}
|
||||
return html`<option
|
||||
value=${ifDefined(flow.pk)}
|
||||
?selected=${selected}
|
||||
>
|
||||
${flow.name} (${flow.slug})
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Enrollment,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
|
||||
args,
|
||||
);
|
||||
return flows.results;
|
||||
}}
|
||||
.renderElement=${(flow: Flow): string => {
|
||||
return flow.name;
|
||||
}}
|
||||
.renderDescription=${(flow: Flow): string => {
|
||||
return flow.slug;
|
||||
}}
|
||||
.value=${(flow: Flow | undefined): string | undefined => {
|
||||
return flow?.pk;
|
||||
}}
|
||||
.selected=${(flow: Flow): boolean => {
|
||||
let selected = this.instance?.enrollmentFlow === flow.pk;
|
||||
if (
|
||||
!this.instance?.pk &&
|
||||
!this.instance?.enrollmentFlow &&
|
||||
flow.slug === "default-source-enrollment"
|
||||
) {
|
||||
selected = true;
|
||||
}
|
||||
return selected;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Flow to use when enrolling new users.`}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export class InvitationForm extends ModelForm<Invitation, string> {
|
|||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "name",
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Enrollment,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
|
|
|
|||
|
|
@ -12,15 +12,16 @@ import { t } from "@lingui/macro";
|
|||
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
import { until } from "lit/directives/until.js";
|
||||
|
||||
import {
|
||||
CertificateKeyPair,
|
||||
CoreApi,
|
||||
CryptoApi,
|
||||
CryptoCertificatekeypairsListRequest,
|
||||
Flow,
|
||||
FlowsApi,
|
||||
FlowsInstancesListDesignationEnum,
|
||||
FlowsInstancesListRequest,
|
||||
Tenant,
|
||||
} from "@goauthentik/api";
|
||||
|
||||
|
|
@ -144,35 +145,35 @@ export class TenantForm extends ModelForm<Tenant, string> {
|
|||
label=${t`Authentication flow`}
|
||||
name="flowAuthentication"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=""
|
||||
?selected=${this.instance?.flowAuthentication === undefined}
|
||||
>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesList({
|
||||
ordering: "slug",
|
||||
designation:
|
||||
FlowsInstancesListDesignationEnum.Authentication,
|
||||
})
|
||||
.then((flows) => {
|
||||
return flows.results.map((flow) => {
|
||||
const selected =
|
||||
this.instance?.flowAuthentication === flow.pk;
|
||||
return html`<option
|
||||
value=${flow.pk}
|
||||
?selected=${selected}
|
||||
>
|
||||
${flow.name} (${flow.slug})
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Authentication,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
|
||||
args,
|
||||
);
|
||||
return flows.results;
|
||||
}}
|
||||
.renderElement=${(flow: Flow): string => {
|
||||
return flow.name;
|
||||
}}
|
||||
.renderDescription=${(flow: Flow): string => {
|
||||
return flow.slug;
|
||||
}}
|
||||
.value=${(flow: Flow | undefined): string | undefined => {
|
||||
return flow?.pk;
|
||||
}}
|
||||
.selected=${(flow: Flow): boolean => {
|
||||
return this.instance?.flowAuthentication === flow.pk;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<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.`}
|
||||
</p>
|
||||
|
|
@ -181,64 +182,70 @@ export class TenantForm extends ModelForm<Tenant, string> {
|
|||
label=${t`Invalidation flow`}
|
||||
name="flowInvalidation"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=""
|
||||
?selected=${this.instance?.flowInvalidation === undefined}
|
||||
>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesList({
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Invalidation,
|
||||
})
|
||||
.then((flows) => {
|
||||
return flows.results.map((flow) => {
|
||||
const selected =
|
||||
this.instance?.flowInvalidation === flow.pk;
|
||||
return html`<option
|
||||
value=${flow.pk}
|
||||
?selected=${selected}
|
||||
>
|
||||
${flow.name} (${flow.slug})
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Invalidation,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
|
||||
args,
|
||||
);
|
||||
return flows.results;
|
||||
}}
|
||||
.renderElement=${(flow: Flow): string => {
|
||||
return flow.name;
|
||||
}}
|
||||
.renderDescription=${(flow: Flow): string => {
|
||||
return flow.slug;
|
||||
}}
|
||||
.value=${(flow: Flow | undefined): string | undefined => {
|
||||
return flow?.pk;
|
||||
}}
|
||||
.selected=${(flow: Flow): boolean => {
|
||||
return this.instance?.flowInvalidation === flow.pk;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
|
||||
<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.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Recovery flow`} name="flowRecovery">
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.instance?.flowRecovery === undefined}>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesList({
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Recovery,
|
||||
})
|
||||
.then((flows) => {
|
||||
return flows.results.map((flow) => {
|
||||
const selected =
|
||||
this.instance?.flowRecovery === flow.pk;
|
||||
return html`<option
|
||||
value=${flow.pk}
|
||||
?selected=${selected}
|
||||
>
|
||||
${flow.name} (${flow.slug})
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Recovery,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
|
||||
args,
|
||||
);
|
||||
return flows.results;
|
||||
}}
|
||||
.renderElement=${(flow: Flow): string => {
|
||||
return flow.name;
|
||||
}}
|
||||
.renderDescription=${(flow: Flow): string => {
|
||||
return flow.slug;
|
||||
}}
|
||||
.value=${(flow: Flow | undefined): string | undefined => {
|
||||
return flow?.pk;
|
||||
}}
|
||||
.selected=${(flow: Flow): boolean => {
|
||||
return this.instance?.flowRecovery === flow.pk;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Recovery flow. If left empty, the first applicable flow sorted by the slug is used.`}
|
||||
</p>
|
||||
|
|
@ -247,34 +254,35 @@ export class TenantForm extends ModelForm<Tenant, string> {
|
|||
label=${t`Unenrollment flow`}
|
||||
name="flowUnenrollment"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=""
|
||||
?selected=${this.instance?.flowUnenrollment === undefined}
|
||||
>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesList({
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Unenrollment,
|
||||
})
|
||||
.then((flows) => {
|
||||
return flows.results.map((flow) => {
|
||||
const selected =
|
||||
this.instance?.flowUnenrollment === flow.pk;
|
||||
return html`<option
|
||||
value=${flow.pk}
|
||||
?selected=${selected}
|
||||
>
|
||||
${flow.name} (${flow.slug})
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "slug",
|
||||
designation: FlowsInstancesListDesignationEnum.Unenrollment,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
|
||||
args,
|
||||
);
|
||||
return flows.results;
|
||||
}}
|
||||
.renderElement=${(flow: Flow): string => {
|
||||
return flow.name;
|
||||
}}
|
||||
.renderDescription=${(flow: Flow): string => {
|
||||
return flow.slug;
|
||||
}}
|
||||
.value=${(flow: Flow | undefined): string | undefined => {
|
||||
return flow?.pk;
|
||||
}}
|
||||
.selected=${(flow: Flow): boolean => {
|
||||
return this.instance?.flowUnenrollment === flow.pk;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<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.`}
|
||||
</p>
|
||||
|
|
@ -283,69 +291,71 @@ export class TenantForm extends ModelForm<Tenant, string> {
|
|||
label=${t`User settings flow`}
|
||||
name="flowUserSettings"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=""
|
||||
?selected=${this.instance?.flowUserSettings === undefined}
|
||||
>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesList({
|
||||
ordering: "slug",
|
||||
designation:
|
||||
FlowsInstancesListDesignationEnum.StageConfiguration,
|
||||
})
|
||||
.then((flows) => {
|
||||
return flows.results.map((flow) => {
|
||||
const selected =
|
||||
this.instance?.flowUserSettings === flow.pk;
|
||||
return html`<option
|
||||
value=${flow.pk}
|
||||
?selected=${selected}
|
||||
>
|
||||
${flow.name} (${flow.slug})
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "slug",
|
||||
designation:
|
||||
FlowsInstancesListDesignationEnum.StageConfiguration,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
|
||||
args,
|
||||
);
|
||||
return flows.results;
|
||||
}}
|
||||
.renderElement=${(flow: Flow): string => {
|
||||
return flow.name;
|
||||
}}
|
||||
.renderDescription=${(flow: Flow): string => {
|
||||
return flow.slug;
|
||||
}}
|
||||
.value=${(flow: Flow | undefined): string | undefined => {
|
||||
return flow?.pk;
|
||||
}}
|
||||
.selected=${(flow: Flow): boolean => {
|
||||
return this.instance?.flowUserSettings === flow.pk;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`If set, users are able to configure details of their profile.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Device code flow`} name="flowDeviceCode">
|
||||
<select class="pf-c-form-control">
|
||||
<option
|
||||
value=""
|
||||
?selected=${this.instance?.flowDeviceCode === undefined}
|
||||
>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesList({
|
||||
ordering: "slug",
|
||||
designation:
|
||||
FlowsInstancesListDesignationEnum.StageConfiguration,
|
||||
})
|
||||
.then((flows) => {
|
||||
return flows.results.map((flow) => {
|
||||
const selected =
|
||||
this.instance?.flowDeviceCode === flow.pk;
|
||||
return html`<option
|
||||
value=${flow.pk}
|
||||
?selected=${selected}
|
||||
>
|
||||
${flow.name} (${flow.slug})
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
|
||||
const args: FlowsInstancesListRequest = {
|
||||
ordering: "slug",
|
||||
designation:
|
||||
FlowsInstancesListDesignationEnum.StageConfiguration,
|
||||
};
|
||||
if (query !== undefined) {
|
||||
args.search = query;
|
||||
}
|
||||
const flows = await new FlowsApi(DEFAULT_CONFIG).flowsInstancesList(
|
||||
args,
|
||||
);
|
||||
return flows.results;
|
||||
}}
|
||||
.renderElement=${(flow: Flow): string => {
|
||||
return flow.name;
|
||||
}}
|
||||
.renderDescription=${(flow: Flow): string => {
|
||||
return flow.slug;
|
||||
}}
|
||||
.value=${(flow: Flow | undefined): string | undefined => {
|
||||
return flow?.pk;
|
||||
}}
|
||||
.selected=${(flow: Flow): boolean => {
|
||||
return this.instance?.flowDeviceCode === flow.pk;
|
||||
}}
|
||||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<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.`}
|
||||
</p>
|
||||
|
|
|
|||
Reference in a new issue