habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: replace more selects with search select

Browse Source 
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
13 changed files with 468 additions and 423 deletions
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>