web/admin: finish migration to search-select

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2022-12-29 22:28:54 +01:00
parent 68b58fb73c
commit c46b2d5573
20 changed files with 475 additions and 414 deletions

View File

@ -18,8 +18,10 @@ import {
CoreGroupsListRequest,
CryptoApi,
CryptoCertificatekeypairsListRequest,
Flow,
FlowsApi,
FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
Group,
LDAPAPIAccessMode,
LDAPProvider,
@ -71,32 +73,47 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
?required=${true}
name="authorizationFlow"
>
<select class="pf-c-form-control">
${until(
tenant().then((t) => {
return new FlowsApi(DEFAULT_CONFIG)
.flowsInstancesList({
ordering: "slug",
designation: FlowsInstancesListDesignationEnum.Authentication,
})
.then((flows) => {
return flows.results.map((flow) => {
let selected = flow.pk === t.flowAuthentication;
if (this.instance?.authorizationFlow === flow.pk) {
selected = true;
}
return html`<option
value=${ifDefined(flow.pk)}
?selected=${selected}
>
${flow.name} (${flow.slug})
</option>`;
});
});
}),
html`<option>${t`Loading...`}</option>`,
)}
</select>
${until(
tenant().then((t) => {
return html`
<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): TemplateResult => {
return html`${flow.slug}`;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;
}}
.selected=${(flow: Flow): boolean => {
let selected = flow.pk === t.flowAuthentication;
if (this.instance?.authorizationFlow === flow.pk) {
selected = true;
}
return selected;
}}
?blankable=${true}
>
</ak-search-select>
`;
}),
html`<option>${t`Loading...`}</option>`,
)}
<p class="pf-c-form__helper-text">
${t`Flow used for users to authenticate. Currently only identification and password stages are supported.`}
</p>

View File

@ -97,8 +97,8 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
.renderElement=${(flow: Flow): string => {
return flow.name;
}}
.renderDescription=${(flow: Flow): string => {
return flow.slug;
.renderDescription=${(flow: Flow): TemplateResult => {
return html`${flow.slug}`;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;

View File

@ -313,8 +313,8 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
.renderElement=${(flow: Flow): string => {
return flow.name;
}}
.renderDescription=${(flow: Flow): string => {
return flow.slug;
.renderDescription=${(flow: Flow): TemplateResult => {
return html`${flow.slug}`;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;

View File

@ -22,7 +22,9 @@ import {
FlowsInstancesListDesignationEnum,
FlowsInstancesListRequest,
PropertymappingsApi,
PropertymappingsSamlListRequest,
ProvidersApi,
SAMLPropertyMapping,
SAMLProvider,
SignatureAlgorithmEnum,
SpBindingEnum,
@ -87,8 +89,8 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
.renderElement=${(flow: Flow): string => {
return flow.name;
}}
.renderDescription=${(flow: Flow): string => {
return flow.slug;
.renderDescription=${(flow: Flow): TemplateResult => {
return html`${flow.slug}`;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;
@ -276,32 +278,35 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
label=${t`NameID Property Mapping`}
name="nameIdMapping"
>
<select class="pf-c-form-control">
<option
value=""
?selected=${this.instance?.nameIdMapping === undefined}
>
---------
</option>
${until(
new PropertymappingsApi(DEFAULT_CONFIG)
.propertymappingsSamlList({
ordering: "saml_name",
})
.then((mappings) => {
return mappings.results.map((mapping) => {
return html`<option
value=${ifDefined(mapping.pk)}
?selected=${this.instance?.nameIdMapping ===
mapping.pk}
>
${mapping.name}
</option>`;
});
}),
html`<option>${t`Loading...`}</option>`,
)}
</select>
<ak-search-select
.fetchObjects=${async (
query?: string,
): Promise<SAMLPropertyMapping[]> => {
const args: PropertymappingsSamlListRequest = {
ordering: "saml_name",
};
if (query !== undefined) {
args.search = query;
}
const items = await new PropertymappingsApi(
DEFAULT_CONFIG,
).propertymappingsSamlList(args);
return items.results;
}}
.renderElement=${(item: SAMLPropertyMapping): string => {
return item.name;
}}
.value=${(
item: SAMLPropertyMapping | undefined,
): string | undefined => {
return item?.pk;
}}
.selected=${(item: SAMLPropertyMapping): boolean => {
return this.instance?.nameIdMapping === item.pk;
}}
?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.`}
</p>

View File

@ -62,8 +62,8 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
.renderElement=${(flow: Flow): string => {
return flow.name;
}}
.renderDescription=${(flow: Flow): string => {
return flow.slug;
.renderDescription=${(flow: Flow): TemplateResult => {
return html`${flow.slug}`;
}}
.value=${(flow: Flow | undefined): string | undefined => {
return flow?.pk;