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 { 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>

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

@ -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);
}
`,
);
}

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

@ -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) {

51
web/src/admin/events/TransportForm.ts
View File

@ -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">

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

@ -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>

120
web/src/admin/outposts/ServiceConnectionDockerForm.ts
View File

@ -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>

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

@ -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">

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

@ -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) {

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

@ -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) {

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

@ -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) {

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

@ -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>

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

@ -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) {

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

@ -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>