web/admin: migrate outposts to web

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

authentik/admin/urls.py

@@ -2,7 +2,6 @@
 from django.urls import path
 
 from authentik.admin.views import (
-    outposts,
     outposts_service_connections,
     policies,
     policies_bindings,
@@ -114,17 +113,6 @@ urlpatterns = [
         property_mappings.PropertyMappingTestView.as_view(),
         name="property-mapping-test",
     ),
-    # Outposts
-    path(
-        "outposts/create/",
-        outposts.OutpostCreateView.as_view(),
-        name="outpost-create",
-    ),
-    path(
-        "outposts/<uuid:pk>/update/",
-        outposts.OutpostUpdateView.as_view(),
-        name="outpost-update",
-    ),
     # Outpost Service Connections
     path(
         "outpost_service_connections/create/",

authentik/admin/views/outposts.py

@@ -1,55 +0,0 @@
-"""authentik Outpost administration"""
-from dataclasses import asdict
-from typing import Any
-
-from django.contrib.auth.mixins import LoginRequiredMixin
-from django.contrib.auth.mixins import (
-    PermissionRequiredMixin as DjangoPermissionRequiredMixin,
-)
-from django.contrib.messages.views import SuccessMessageMixin
-from django.utils.translation import gettext as _
-from django.views.generic import UpdateView
-from guardian.mixins import PermissionRequiredMixin
-
-from authentik.lib.views import CreateAssignPermView
-from authentik.outposts.forms import OutpostForm
-from authentik.outposts.models import Outpost, OutpostConfig
-
-
-class OutpostCreateView(
-    SuccessMessageMixin,
-    LoginRequiredMixin,
-    DjangoPermissionRequiredMixin,
-    CreateAssignPermView,
-):
-    """Create new Outpost"""
-
-    model = Outpost
-    form_class = OutpostForm
-    permission_required = "authentik_outposts.add_outpost"
-    success_url = "/"
-    template_name = "generic/create.html"
-    success_message = _("Successfully created Outpost")
-
-    def get_initial(self) -> dict[str, Any]:
-        return {
-            "_config": asdict(
-                OutpostConfig(authentik_host=self.request.build_absolute_uri("/"))
-            )
-        }
-
-
-class OutpostUpdateView(
-    SuccessMessageMixin,
-    LoginRequiredMixin,
-    PermissionRequiredMixin,
-    UpdateView,
-):
-    """Update outpost"""
-
-    model = Outpost
-    form_class = OutpostForm
-    permission_required = "authentik_outposts.change_outpost"
-    success_url = "/"
-    template_name = "generic/update.html"
-    success_message = _("Successfully updated Outpost")

authentik/outposts/api/outposts.py

@@ -95,4 +95,5 @@ class OutpostViewSet(ModelViewSet):
     @action(detail=False, methods=["GET"])
     def default_settings(self, request: Request) -> Response:
         """Global default outpost config"""
-        return Response({"config": default_outpost_config(request._request.get_host())})
+        host = self.request.build_absolute_uri("/")
+        return Response({"config": default_outpost_config(host)})

web/src/api/legacy.ts

@@ -16,10 +16,6 @@ export class AdminURLManager {
         return `/administration/property-mappings/${rest}`;
     }
 
-    static outposts(rest: string): string {
-        return `/administration/outposts/${rest}`;
-    }
-
     static outpostServiceConnections(rest: string): string {
         return `/administration/outpost_service_connections/${rest}`;
     }

web/src/pages/flows/FlowViewPage.ts

@@ -84,7 +84,7 @@ export class FlowViewPage extends LitElement {
                                                     class="pf-c-button pf-m-secondary"
                                                     @click=${() => {
                                                     new FlowsApi(DEFAULT_CONFIG).flowsInstancesExecute({
-                                                        slug: flow.slug
+                                                        slug: this.flow.slug
                                                     }).then(link => {
                                                         window.location.assign(`${link.link}?next=/%23${window.location.href}`);
                                                     });

web/src/pages/outposts/OutpostForm.ts

@@ -0,0 +1,102 @@
+import { CoreApi, Outpost, OutpostsApi, ProvidersApi } from "authentik-api";
+import { gettext } from "django";
+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/CodeMirror";
+import YAML from "yaml";
+
+@customElement("ak-outpost-form")
+export class OutpostForm extends Form<Outpost> {
+
+    @property({attribute: false})
+    outpost?: Outpost;
+
+    getSuccessMessage(): string {
+        if (this.outpost) {
+            return gettext("Successfully updated outpost.");
+        } else {
+            return gettext("Successfully created outpost.");
+        }
+    }
+
+    send = (data: Outpost): Promise<Outpost> => {
+        if (this.outpost) {
+            return new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsUpdate({
+                uuid: this.outpost.pk || "",
+                data: data
+            });
+        } else {
+            return new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsCreate({
+                data: data
+            });
+        }
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal
+                label=${gettext("Name")}
+                ?required=${true}
+                name="name">
+                <input type="text" value="${ifDefined(this.outpost?.name)}" class="pf-c-form-control" required>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Type")}
+                ?required=${true}
+                name="type">
+                <select class="pf-c-form-control">
+                    <option value="proxy" ?selected=${true}>${gettext("Proxy")}</option>s
+                </select>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Service connection")}
+                name="serviceConnection">
+                <select class="pf-c-form-control">
+                    <option value="" ?selected=${this.outpost?.serviceConnection === undefined}>---------</option>
+                    ${until(new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllList({
+                        ordering: "pk"
+                    }).then(scs => {
+                        return scs.results.map(sc => {
+                            return html`<option value=${ifDefined(sc.pk)} ?selected=${this.outpost?.serviceConnection === sc.pk}>${sc.name}</option>`;
+                        });
+                    }), html``)}
+                </select>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Providers")}
+                ?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.outpost?.providers || []).some(sp => {
+                                return sp == provider.pk;
+                            });
+                            return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>${provider.verboseName} ${provider.name}</option>`;
+                        });
+                    }))}
+                </select>
+                <p class="pf-c-form__helper-text">${gettext("Hold control/command to select multiple items.")}</p>
+            </ak-form-element-horizontal>
+            ${until(new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsDefaultSettings({}).then(config => {
+                let fc = config.config;
+                if (this.outpost) {
+                    fc = this.outpost.config;
+                }
+                return html`<ak-form-element-horizontal
+                    label=${gettext("Configuration")}
+                    name="config">
+                    <ak-codemirror mode="yaml" value="${YAML.stringify(fc)}"></ak-codemirror>
+                </ak-form-element-horizontal>`;
+            }))}
+        </form>`;
+    }
+
+}

web/src/pages/outposts/OutpostListPage.ts

@@ -6,14 +6,13 @@ import { TableColumn } from "../../elements/table/Table";
 import { TablePage } from "../../elements/table/TablePage";
 
 import "./OutpostHealth";
+import "./OutpostForm";
 import "../../elements/buttons/SpinnerButton";
-import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/TokenCopyButton";
 import "../../elements/forms/DeleteForm";
 import { PAGE_SIZE } from "../../constants";
 import { Outpost, OutpostsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { AdminURLManager } from "../../api/legacy";
 import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ak-outpost-list")
@@ -58,12 +57,19 @@ export class OutpostListPage extends TablePage<Outpost> {
             })}</ul>`,
             html`<ak-outpost-health outpostId=${ifDefined(item.pk)}></ak-outpost-health>`,
             html`
-            <ak-modal-button href="${AdminURLManager.outposts(`${item.pk}/update/`)}">
+            <ak-forms-modal>
-                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+                <span slot="submit">
+                    ${gettext("Update")}
+                </span>
+                <span slot="header">
+                    ${gettext("Update Outpost")}
+                </span>
+                <ak-outpost-form slot="form" .outpost=${item}>
+                </ak-outpost-form>
+                <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${gettext("Edit")}
-                </ak-spinner-button>
+                </button>
-                <div slot="modal"></div>
+            </ak-forms-modal>
-            </ak-modal-button>&nbsp;
             <ak-forms-delete
                 .obj=${item}
                 objectLabel=${gettext("Outpost")}
@@ -122,12 +128,19 @@ export class OutpostListPage extends TablePage<Outpost> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${AdminURLManager.outposts("create/")}>
+        <ak-forms-modal>
-            <ak-spinner-button slot="trigger" class="pf-m-primary">
+            <span slot="submit">
                 ${gettext("Create")}
-            </ak-spinner-button>
+            </span>
-            <div slot="modal"></div>
+            <span slot="header">
-        </ak-modal-button>
+                ${gettext("Create Outpost")}
+            </span>
+            <ak-outpost-form slot="form">
+            </ak-outpost-form>
+            <button slot="trigger" class="pf-c-button pf-m-primary">
+                ${gettext("Create")}
+            </button>
+        </ak-forms-modal>
         ${super.renderToolbar()}
         `;
     }