web/admin: only allow outpost providers matching outpost type

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-06-01 23:35:22 +02:00
parent f29344e91f
commit 85d349e776
3 changed files with 48 additions and 24 deletions

View File

@ -1979,7 +1979,6 @@ msgstr "Loading"
#: src/pages/groups/GroupForm.ts
#: src/pages/outposts/OutpostForm.ts
#: src/pages/outposts/OutpostForm.ts
#: src/pages/outposts/OutpostForm.ts
#: src/pages/outposts/ServiceConnectionDockerForm.ts
#: src/pages/outposts/ServiceConnectionDockerForm.ts
#: src/pages/policies/PolicyBindingForm.ts
@ -4397,6 +4396,10 @@ msgstr "X509 Subject"
msgid "Yes"
msgstr "Yes"
#: src/pages/outposts/OutpostForm.ts
msgid "You can only select providers that match the type of the outpost."
msgstr "You can only select providers that match the type of the outpost."
#: src/interfaces/Interface.ts
msgid "You're currently impersonating {0}."
msgstr "You're currently impersonating {0}."

View File

@ -2019,7 +2019,6 @@ msgstr ""
#:
#:
#:
#:
msgid "Loading..."
msgstr ""
@ -4383,6 +4382,10 @@ msgstr ""
msgid "Yes"
msgstr ""
#:
msgid "You can only select providers that match the type of the outpost."
msgstr ""
#:
msgid "You're currently impersonating {0}."
msgstr ""

View File

@ -1,6 +1,6 @@
import { Outpost, OutpostsApi, OutpostTypeEnum, ProvidersApi } from "authentik-api";
import { t } from "@lingui/macro";
import { customElement } from "lit-element";
import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../api/Config";
import { until } from "lit-html/directives/until";
@ -13,9 +13,15 @@ import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-outpost-form")
export class OutpostForm extends ModelForm<Outpost, string> {
@property()
type!: OutpostTypeEnum;
loadInstance(pk: string): Promise<Outpost> {
return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesRetrieve({
uuid: pk
}).then(o => {
this.type = o.type || OutpostTypeEnum.Proxy;
return o;
});
}
@ -40,6 +46,33 @@ export class OutpostForm extends ModelForm<Outpost, string> {
}
};
renderProviders(): Promise<TemplateResult[]> {
switch (this.type) {
case OutpostTypeEnum.Proxy:
return new ProvidersApi(DEFAULT_CONFIG).providersProxyList({
ordering: "pk"
}).then(providers => {
return providers.results.map(provider => {
const selected = Array.from(this.instance?.providers || []).some(sp => {
return sp == provider.pk;
});
return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>${provider.verboseName} ${provider.name}</option>`;
});
});
case OutpostTypeEnum.Ldap:
return new ProvidersApi(DEFAULT_CONFIG).providersLdapList({
ordering: "pk"
}).then(providers => {
return providers.results.map(provider => {
const selected = Array.from(this.instance?.providers || []).some(sp => {
return sp == provider.pk;
});
return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>${provider.verboseName} ${provider.name}</option>`;
});
});
}
}
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal
@ -52,7 +85,10 @@ export class OutpostForm extends ModelForm<Outpost, string> {
label=${t`Type`}
?required=${true}
name="type">
<select class="pf-c-form-control">
<select class="pf-c-form-control" @change=${(ev: Event) => {
const target = ev.target as HTMLSelectElement;
this.type = target.selectedOptions[0].value as OutpostTypeEnum;
}}>
<option value=${OutpostTypeEnum.Proxy} ?selected=${this.instance?.type === OutpostTypeEnum.Proxy}>${t`Proxy`}</option>
<option value=${OutpostTypeEnum.Ldap} ?selected=${this.instance?.type === OutpostTypeEnum.Ldap}>${t`LDAP (Technical preview)`}</option>
</select>
@ -82,27 +118,9 @@ export class OutpostForm extends ModelForm<Outpost, string> {
?required=${true}
name="providers">
<select class="pf-c-form-control" multiple>
${until(new ProvidersApi(DEFAULT_CONFIG).providersProxyList({
ordering: "pk"
}).then(providers => {
return providers.results.map(provider => {
const selected = Array.from(this.instance?.providers || []).some(sp => {
return sp == provider.pk;
});
return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>${provider.verboseName} ${provider.name}</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
${until(new ProvidersApi(DEFAULT_CONFIG).providersLdapList({
ordering: "pk"
}).then(providers => {
return providers.results.map(provider => {
const selected = Array.from(this.instance?.providers || []).some(sp => {
return sp == provider.pk;
});
return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>${provider.verboseName} ${provider.name}</option>`;
});
}), html`<option>${t`Loading...`}</option>`)}
${until(this.renderProviders(), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`You can only select providers that match the type of the outpost.`}</p>
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal