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

web/admin: replace certificate selection with ak-search-select 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-12-29 11:56:54 +01:00
parent 7a10872854
commit 1149a61986
No known key found for this signature in database
8 changed files with 258 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/admin/providers/ldap/LDAPProviderForm.ts
View File

@ -13,9 +13,11 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js"; import { until } from "lit/directives/until.js";
import { import {
CertificateKeyPair,
CoreApi, CoreApi,
CoreGroupsListRequest, CoreGroupsListRequest,
CryptoApi, CryptoApi,
CryptoCertificatekeypairsListRequest,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
Group, Group,
@ -181,37 +183,37 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Certificate`} name="certificate"> <ak-form-element-horizontal label=${t`Certificate`} name="certificate">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.certificate === undefined}> .fetchObjects=${async (
--------- query?: string,
</option> ): Promise<CertificateKeyPair[]> => {
${until( const args: CryptoCertificatekeypairsListRequest = {
new CryptoApi(DEFAULT_CONFIG)
.cryptoCertificatekeypairsList({
ordering: "name", ordering: "name",
hasKey: true, hasKey: true,
includeDetails: false, includeDetails: false,
}) };
.then((keys) => { if (query !== undefined) {
return keys.results.map((key) => { args.search = query;
return html`<option }
value=${ifDefined(key.pk)} const certificates = await new CryptoApi(
?selected=${this.instance?.certificate === key.pk} 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 item.pk === this.instance?.certificate;
}}
?blankable=${true}
> >
${key.name} </ak-search-select>
</option>`;
});
}),
html`<option
value=${ifDefined(this.instance?.certificate || undefined)}
?selected=${this.instance?.certificate !== undefined}
>
${t`Loading...`}
</option>`,
)}
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Due to protocol limitations, this certificate is only used when the outpost has a single provider.`} ${t`Due to protocol limitations, this certificate is only used when the outpost has a single provider, or all providers use the same certificate.`}
</p> </p>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`If multiple providers share an outpost, a self-signed certificate is used.`} ${t`If multiple providers share an outpost, a self-signed certificate is used.`}

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

@ -14,8 +14,10 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js"; import { until } from "lit/directives/until.js";
import { import {
CertificateKeyPair,
ClientTypeEnum, ClientTypeEnum,
CryptoApi, CryptoApi,
CryptoCertificatekeypairsListRequest,
Flow, Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
@ -186,39 +188,42 @@ ${this.instance?.redirectUris}</textarea
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Signing Key`} name="signingKey"> <ak-form-element-horizontal label=${t`Signing Key`} name="signingKey">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.signingKey === undefined}> .fetchObjects=${async (
--------- query?: string,
</option> ): Promise<CertificateKeyPair[]> => {
${until( const args: CryptoCertificatekeypairsListRequest = {
new CryptoApi(DEFAULT_CONFIG)
.cryptoCertificatekeypairsList({
ordering: "name", ordering: "name",
hasKey: true, hasKey: true,
includeDetails: false, includeDetails: false,
}) };
.then((keys) => { if (query !== undefined) {
return keys.results.map((key) => { args.search = query;
let selected = this.instance?.signingKey === key.pk; }
if (!this.instance && keys.results.length === 1) { 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,
items: CertificateKeyPair[],
): boolean => {
let selected = this.instance?.signingKey === item.pk;
if (!this.instance && items.length === 1) {
selected = true; selected = true;
} }
return html`<option return selected;
value=${ifDefined(key.pk)} }}
?selected=${selected} ?blankable=${true}
> >
${key.name} </ak-search-select>
</option>`;
});
}),
html`<option
value=${ifDefined(this.instance?.signingKey || undefined)}
?selected=${this.instance?.signingKey !== undefined}
>
${t`Loading...`}
</option>`,
)}
</select>
<p class="pf-c-form__helper-text">${t`Key used to sign the tokens.`}</p> <p class="pf-c-form__helper-text">${t`Key used to sign the tokens.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>

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

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/SearchSelect"; import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -20,7 +21,9 @@ import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-
import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css"; import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";
import { import {
CertificateKeyPair,
CryptoApi, CryptoApi,
CryptoCertificatekeypairsListRequest,
Flow, Flow,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
@ -346,35 +349,35 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
<span slot="header">${t`Advanced protocol settings`}</span> <span slot="header">${t`Advanced protocol settings`}</span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`Certificate`} name="certificate"> <ak-form-element-horizontal label=${t`Certificate`} name="certificate">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.certificate === undefined}> .fetchObjects=${async (
--------- query?: string,
</option> ): Promise<CertificateKeyPair[]> => {
${until( const args: CryptoCertificatekeypairsListRequest = {
new CryptoApi(DEFAULT_CONFIG)
.cryptoCertificatekeypairsList({
ordering: "name", ordering: "name",
hasKey: true, hasKey: true,
includeDetails: false, includeDetails: false,
}) };
.then((keys) => { if (query !== undefined) {
return keys.results.map((key) => { args.search = query;
return html`<option }
value=${ifDefined(key.pk)} const certificates = await new CryptoApi(
?selected=${this.instance?.certificate === key.pk} 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 item.pk === this.instance?.certificate;
}}
?blankable=${true}
> >
${key.name} </ak-search-select>
</option>`;
});
}),
html`<option
value=${ifDefined(this.instance?.certificate || undefined)}
?selected=${this.instance?.certificate !== undefined}
>
${t`Loading...`}
</option>`,
)}
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Scopes`} name="propertyMappings"> <ak-form-element-horizontal label=${t`Scopes`} name="propertyMappings">
<select class="pf-c-form-control" multiple> <select class="pf-c-form-control" multiple>

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

@ -13,7 +13,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js"; import { until } from "lit/directives/until.js";
import { import {
CertificateKeyPair,
CryptoApi, CryptoApi,
CryptoCertificatekeypairsListRequest,
DigestAlgorithmEnum, DigestAlgorithmEnum,
Flow, Flow,
FlowsApi, FlowsApi,
@ -158,35 +160,35 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
<span slot="header"> ${t`Advanced protocol settings`} </span> <span slot="header"> ${t`Advanced protocol settings`} </span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`Signing Certificate`} name="signingKp"> <ak-form-element-horizontal label=${t`Signing Certificate`} name="signingKp">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.signingKp === undefined}> .fetchObjects=${async (
--------- query?: string,
</option> ): Promise<CertificateKeyPair[]> => {
${until( const args: CryptoCertificatekeypairsListRequest = {
new CryptoApi(DEFAULT_CONFIG)
.cryptoCertificatekeypairsList({
ordering: "name", ordering: "name",
hasKey: true, hasKey: true,
includeDetails: false, includeDetails: false,
}) };
.then((keys) => { if (query !== undefined) {
return keys.results.map((key) => { args.search = query;
return html`<option }
value=${ifDefined(key.pk)} const certificates = await new CryptoApi(
?selected=${this.instance?.signingKp === key.pk} 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 item.pk === this.instance?.signingKp;
}}
?blankable=${true}
> >
${key.name} </ak-search-select>
</option>`;
});
}),
html`<option
value=${ifDefined(this.instance?.signingKp || undefined)}
?selected=${this.instance?.signingKp !== undefined}
>
${t`Loading...`}
</option>`,
)}
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Certificate used to sign outgoing Responses going to the Service Provider.`} ${t`Certificate used to sign outgoing Responses going to the Service Provider.`}
</p> </p>
@ -195,38 +197,35 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
label=${t`Verification Certificate`} label=${t`Verification Certificate`}
name="verificationKp" name="verificationKp"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (
value="" query?: string,
?selected=${this.instance?.verificationKp === undefined} ): Promise<CertificateKeyPair[]> => {
> const args: CryptoCertificatekeypairsListRequest = {
---------
</option>
${until(
new CryptoApi(DEFAULT_CONFIG)
.cryptoCertificatekeypairsList({
ordering: "name", ordering: "name",
hasKey: true,
includeDetails: false, includeDetails: false,
}) };
.then((keys) => { if (query !== undefined) {
return keys.results.map((key) => { args.search = query;
return html`<option }
value=${ifDefined(key.pk)} const certificates = await new CryptoApi(
?selected=${this.instance?.verificationKp === DEFAULT_CONFIG,
key.pk} ).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 item.pk === this.instance?.verificationKp;
}}
?blankable=${true}
> >
${key.name} </ak-search-select>
</option>`;
});
}),
html`<option
value=${ifDefined(this.instance?.verificationKp || undefined)}
?selected=${this.instance?.verificationKp !== undefined}
>
${t`Loading...`}
</option>`,
)}
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`When selected, incoming assertion's Signatures will be validated against this certificate. To allow unsigned Requests, leave on default.`} ${t`When selected, incoming assertion's Signatures will be validated against this certificate. To allow unsigned Requests, leave on default.`}
</p> </p>

58
web/src/admin/sources/ldap/LDAPSourceForm.ts
View File

@ -13,9 +13,11 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js"; import { until } from "lit/directives/until.js";
import { import {
CertificateKeyPair,
CoreApi, CoreApi,
CoreGroupsListRequest, CoreGroupsListRequest,
CryptoApi, CryptoApi,
CryptoCertificatekeypairsListRequest,
Group, Group,
LDAPSource, LDAPSource,
LDAPSourceRequest, LDAPSourceRequest,
@ -149,39 +151,35 @@ export class LDAPSourceForm extends ModelForm<LDAPSource, string> {
label=${t`TLS Verification Certificate`} label=${t`TLS Verification Certificate`}
name="peerCertificate" name="peerCertificate"
> >
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (
value="" query?: string,
?selected=${this.instance?.peerCertificate === undefined} ): Promise<CertificateKeyPair[]> => {
> const args: CryptoCertificatekeypairsListRequest = {
---------
</option>
${until(
new CryptoApi(DEFAULT_CONFIG)
.cryptoCertificatekeypairsList({
ordering: "name", ordering: "name",
hasKey: true,
includeDetails: false, includeDetails: false,
}) };
.then((keys) => { if (query !== undefined) {
return keys.results.map((key) => { args.search = query;
const selected = }
this.instance?.peerCertificate === key.pk; const certificates = await new CryptoApi(
return html`<option DEFAULT_CONFIG,
value=${ifDefined(key.pk)} ).cryptoCertificatekeypairsList(args);
?selected=${selected} return certificates.results;
}}
.renderElement=${(item: CertificateKeyPair): string => {
return item.name;
}}
.value=${(item: CertificateKeyPair | undefined): string | undefined => {
return item?.pk;
}}
.selected=${(item: CertificateKeyPair): boolean => {
return item.pk === this.instance?.peerCertificate;
}}
?blankable=${true}
> >
${key.name} </ak-search-select>
</option>`;
});
}),
html`<option
value=${ifDefined(this.instance?.peerCertificate || undefined)}
?selected=${this.instance?.peerCertificate !== undefined}
>
${t`Loading...`}
</option>`,
)}
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`When connecting to an LDAP Server with TLS, certificates are not checked by default. Specify a keypair to validate the remote certificate.`} ${t`When connecting to an LDAP Server with TLS, certificates are not checked by default. Specify a keypair to validate the remote certificate.`}
</p> </p>

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

@ -16,7 +16,9 @@ import { until } from "lit/directives/until.js";
import { import {
BindingTypeEnum, BindingTypeEnum,
CapabilitiesEnum, CapabilitiesEnum,
CertificateKeyPair,
CryptoApi, CryptoApi,
CryptoCertificatekeypairsListRequest,
DigestAlgorithmEnum, DigestAlgorithmEnum,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
@ -260,34 +262,35 @@ export class SAMLSourceForm extends ModelForm<SAMLSource, string> {
</select> </select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Signing keypair`} name="signingKp"> <ak-form-element-horizontal label=${t`Signing keypair`} name="signingKp">
<select class="pf-c-form-control"> <ak-search-select
<option value="" ?selected=${this.instance?.signingKp === undefined}> .fetchObjects=${async (
--------- query?: string,
</option> ): Promise<CertificateKeyPair[]> => {
${until( const args: CryptoCertificatekeypairsListRequest = {
new CryptoApi(DEFAULT_CONFIG)
.cryptoCertificatekeypairsList({
ordering: "name", ordering: "name",
hasKey: true,
includeDetails: false, includeDetails: false,
}) };
.then((keys) => { if (query !== undefined) {
return keys.results.map((key) => { args.search = query;
return html`<option }
value=${ifDefined(key.pk)} const certificates = await new CryptoApi(
?selected=${this.instance?.signingKp === key.pk} 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 item.pk === this.instance?.signingKp;
}}
?blankable=${true}
> >
${key.name} </ak-search-select>
</option>`;
});
}),
html`<option
value=${ifDefined(this.instance?.signingKp || undefined)}
?selected=${this.instance?.signingKp !== undefined}
>
${t`Loading...`}
</option>`,
)}
</select>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${t`Keypair which is used to sign outgoing requests. Leave empty to disable signing.`} ${t`Keypair which is used to sign outgoing requests. Leave empty to disable signing.`}
</p> </p>

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

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -11,12 +12,13 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js"; import { customElement } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { until } from "lit/directives/until.js"; import { until } from "lit/directives/until.js";
import { import {
CertificateKeyPair,
CoreApi, CoreApi,
CryptoApi, CryptoApi,
CryptoCertificatekeypairsListRequest,
FlowsApi, FlowsApi,
FlowsInstancesListDesignationEnum, FlowsInstancesListDesignationEnum,
Tenant, Tenant,
@ -388,39 +390,35 @@ export class TenantForm extends ModelForm<Tenant, string> {
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Web Certificate`} name="webCertificate"> <ak-form-element-horizontal label=${t`Web Certificate`} name="webCertificate">
<select class="pf-c-form-control"> <ak-search-select
<option .fetchObjects=${async (
value="" query?: string,
?selected=${this.instance?.webCertificate === undefined} ): Promise<CertificateKeyPair[]> => {
> const args: CryptoCertificatekeypairsListRequest = {
---------
</option>
${until(
new CryptoApi(DEFAULT_CONFIG)
.cryptoCertificatekeypairsList({
ordering: "name", ordering: "name",
hasKey: true, hasKey: true,
includeDetails: false, includeDetails: false,
}) };
.then((keys) => { if (query !== undefined) {
return keys.results.map((key) => { args.search = query;
return html`<option }
value=${ifDefined(key.pk)} const certificates = await new CryptoApi(
?selected=${this.instance?.webCertificate === DEFAULT_CONFIG,
key.pk} ).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 item.pk === this.instance?.webCertificate;
}}
?blankable=${true}
> >
${key.name} </ak-search-select>
</option>`;
});
}),
html`<option
value=${ifDefined(this.instance?.webCertificate || undefined)}
?selected=${this.instance?.webCertificate !== undefined}
>
${t`Loading...`}
</option>`,
)}
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>
</ak-form-group> </ak-form-group>

4
web/src/elements/SearchSelect.ts
View File

@ -52,13 +52,13 @@ export class SearchSelect<T> extends AKElement {
value!: (element: T | undefined) => unknown; value!: (element: T | undefined) => unknown;
@property({ attribute: false }) @property({ attribute: false })
selected?: (element: T) => boolean; selected?: (element: T, elements: T[]) => boolean;
firstUpdated(): void { firstUpdated(): void {
this.fetchObjects(this.query).then((objects) => { this.fetchObjects(this.query).then((objects) => {
this.objects = objects; this.objects = objects;
this.objects.forEach((obj) => { this.objects.forEach((obj) => {
if (this.selected && this.selected(obj)) { if (this.selected && this.selected(obj, this.objects)) {
this.selectedObject = obj; this.selectedObject = obj;
} }
}); });