web/admin: only allow outpost providers matching outpost type

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/locales/en.po

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

web/src/locales/pseudo-LOCALE.po

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

web/src/pages/outposts/OutpostForm.ts

@@ -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({
+                    ${until(this.renderProviders(), html`<option>${t`Loading...`}</option>`)}
-                        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>`)}
                 </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