web/admin: add UI for LDAP Provider

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

authentik/providers/ldap/models.py

@@ -1,5 +1,5 @@
 """LDAP Provider"""
-from typing import Optional, Type
+from typing import Iterable, Optional, Type
 
 from django.db import models
 from django.utils.translation import gettext_lazy as _
@@ -7,10 +7,11 @@ from rest_framework.serializers import Serializer
 
 from authentik.core.models import Provider
 from authentik.flows.models import Flow
+from authentik.outposts.models import OutpostModel
 
 
-class LDAPProvider(Provider):
-    """LDAP Provider"""
+class LDAPProvider(OutpostModel, Provider):
+    """Allow applications to authenticate against authentik's users using LDAP."""
 
     base_dn = models.TextField(
         default="DC=ldap,DC=goauthentik,DC=io",
@@ -45,6 +46,9 @@ class LDAPProvider(Provider):
     def __str__(self):
         return f"LDAP Provider {self.name}"
 
+    def get_required_objects(self) -> Iterable[models.Model]:
+        return [self]
+
     class Meta:
 
         verbose_name = _("LDAP Provider")

web/src/pages/providers/ProviderListPage.ts

@@ -8,6 +8,7 @@ import "../../elements/buttons/Dropdown";
 import "../../elements/forms/DeleteForm";
 import "../../elements/forms/ModalForm";
 import "../../elements/forms/ProxyForm";
+import "./ldap/LDAPProviderForm";
 import "./oauth2/OAuth2ProviderForm";
 import "./proxy/ProxyProviderForm";
 import "./saml/SAMLProviderForm";

web/src/pages/providers/ldap/LDAPProviderForm.ts

@@ -0,0 +1,90 @@
+import { CryptoApi, FlowDesignationEnum, FlowsApi, ProvidersApi, LDAPProvider } from "authentik-api";
+import { t } from "@lingui/macro";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import { Form } from "../../../elements/forms/Form";
+import { until } from "lit-html/directives/until";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "../../../elements/forms/HorizontalFormElement";
+import "../../../elements/forms/FormGroup";
+import { first } from "../../../utils";
+
+@customElement("ak-provider-ldap-form")
+export class LDAPProviderFormPage extends Form<LDAPProvider> {
+
+    set providerUUID(value: number) {
+        new ProvidersApi(DEFAULT_CONFIG).providersLdapRead({
+            id: value,
+        }).then(provider => {
+            this.provider = provider;
+        });
+    }
+
+    @property({attribute: false})
+    provider?: LDAPProvider;
+
+    getSuccessMessage(): string {
+        if (this.provider) {
+            return t`Successfully updated provider.`;
+        } else {
+            return t`Successfully created provider.`;
+        }
+    }
+
+    send = (data: LDAPProvider): Promise<LDAPProvider> => {
+        if (this.provider) {
+            return new ProvidersApi(DEFAULT_CONFIG).providersLdapUpdate({
+                id: this.provider.pk || 0,
+                data: data
+            });
+        } else {
+            return new ProvidersApi(DEFAULT_CONFIG).providersLdapCreate({
+                data: data
+            });
+        }
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal
+                label=${t`Name`}
+                ?required=${true}
+                name="name">
+                <input type="text" value="${ifDefined(this.provider?.name)}" class="pf-c-form-control" required>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${t`Bind flow`}
+                ?required=${true}
+                name="bindFlow">
+                <select class="pf-c-form-control">
+                    ${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
+                        ordering: "pk",
+                        designation: FlowDesignationEnum.Authentication,
+                    }).then(flows => {
+                        return flows.results.map(flow => {
+                            return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.bindFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
+                        });
+                    }), html`<option>${t`Loading...`}</option>`)}
+                </select>
+                <p class="pf-c-form__helper-text">${t`Flow used for users to authenticate. Currently only identification and password stages are supported.`}</p>
+            </ak-form-element-horizontal>
+
+            <ak-form-group .expanded=${true}>
+                <span slot="header">
+                    ${t`Protocol settings`}
+                </span>
+                <div slot="body" class="pf-c-form">
+                    <ak-form-element-horizontal
+                        label=${t`Base DN`}
+                        ?required=${true}
+                        name="baseDn">
+                        <input type="text" value="${first(this.provider?.baseDn, "DC=ldap,DC=goauthentik,DC=io")}" class="pf-c-form-control" required>
+                        <p class="pf-c-form__helper-text">${t`LDAP DN under which bind requests and search requests can be made.`}</p>
+                    </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
+        </form>`;
+    }
+
+}

web/src/pages/providers/ldap/LDAPProviderViewPage.ts

@@ -0,0 +1,129 @@
+import { t } from "@lingui/macro";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../../../authentik.css";
+
+import "../../../elements/buttons/ModalButton";
+import "../../../elements/buttons/SpinnerButton";
+import "../../../elements/CodeMirror";
+import "../../../elements/Tabs";
+import "../../../elements/events/ObjectChangelog";
+import "../RelatedApplicationButton";
+import "./LDAPProviderForm";
+import { ProvidersApi, LDAPProvider } from "authentik-api";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import { EVENT_REFRESH } from "../../../constants";
+
+@customElement("ak-provider-ldap-view")
+export class LDAPProviderViewPage extends LitElement {
+
+    @property()
+    set args(value: { [key: string]: number }) {
+        this.providerID = value.id;
+    }
+
+    @property({type: Number})
+    set providerID(value: number) {
+        new ProvidersApi(DEFAULT_CONFIG).providersLdapRead({
+            id: value,
+        }).then((prov) => (this.provider = prov));
+    }
+
+    @property({ attribute: false })
+    provider?: LDAPProvider;
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFButton, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, AKGlobal];
+    }
+
+    constructor() {
+        super();
+        this.addEventListener(EVENT_REFRESH, () => {
+            if (!this.provider?.pk) return;
+            this.providerID = this.provider?.pk;
+        });
+    }
+
+    render(): TemplateResult {
+        if (!this.provider) {
+            return html``;
+        }
+        return html`<ak-tabs>
+                <section slot="page-overview" data-tab-title="${t`Overview`}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-u-display-flex pf-u-justify-content-center">
+                        <div class="pf-u-w-75">
+                            <div class="pf-c-card">
+                                <div class="pf-c-card__body">
+                                    <dl class="pf-c-description-list pf-m-3-col-on-lg">
+                                        <div class="pf-c-description-list__group">
+                                            <dt class="pf-c-description-list__term">
+                                                <span class="pf-c-description-list__text">${t`Name`}</span>
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">${this.provider.name}</div>
+                                            </dd>
+                                        </div>
+                                        <div class="pf-c-description-list__group">
+                                            <dt class="pf-c-description-list__term">
+                                                <span class="pf-c-description-list__text">${t`Assigned to application`}</span>
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">
+                                                    <ak-provider-related-application .provider=${this.provider}></ak-provider-related-application>
+                                                </div>
+                                            </dd>
+                                        </div>
+                                        <div class="pf-c-description-list__group">
+                                            <dt class="pf-c-description-list__term">
+                                                <span class="pf-c-description-list__text">${t`Base DN`}</span>
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">${this.provider.baseDn}</div>
+                                            </dd>
+                                        </div>
+                                    </dl>
+                                </div>
+                                <div class="pf-c-card__footer">
+                                    <ak-forms-modal>
+                                        <span slot="submit">
+                                            ${t`Update`}
+                                        </span>
+                                        <span slot="header">
+                                            ${t`Update LDAP Provider`}
+                                        </span>
+                                        <ak-provider-ldap-form
+                                            slot="form"
+                                            .providerUUID=${this.provider.pk || 0}>
+                                        </ak-provider-ldap-form>
+                                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                                            ${t`Edit`}
+                                        </button>
+                                    </ak-forms-modal>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+                <section slot="page-changelog" data-tab-title="${t`Changelog`}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <ak-object-changelog
+                                targetModelPk=${this.provider.pk || ""}
+                                targetModelApp="authentik_providers_ldap"
+                                targetModelName="LDAPProvider">
+                            </ak-object-changelog>
+                        </div>
+                    </div>
+                </section>
+            </ak-tabs>`;
+    }
+}