web/admin: migrate Event Transport to web

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

authentik/admin/urls.py

@@ -4,7 +4,6 @@ from django.urls import path
 from authentik.admin.views import (
     applications,
     events_notifications_rules,
-    events_notifications_transports,
     flows,
     outposts,
     outposts_service_connections,
@@ -172,17 +171,6 @@ urlpatterns = [
         outposts_service_connections.OutpostServiceConnectionUpdateView.as_view(),
         name="outpost-service-connection-update",
     ),
-    # Event Notification Transpots
-    path(
-        "events/transports/create/",
-        events_notifications_transports.NotificationTransportCreateView.as_view(),
-        name="notification-transport-create",
-    ),
-    path(
-        "events/transports/<uuid:pk>/update/",
-        events_notifications_transports.NotificationTransportUpdateView.as_view(),
-        name="notification-transport-update",
-    ),
     # Event Notification Rules
     path(
         "events/rules/create/",

authentik/admin/views/events_notifications_transports.py

@@ -1,45 +0,0 @@
-"""authentik NotificationTransport administration"""
-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.events.forms import NotificationTransportForm
-from authentik.events.models import NotificationTransport
-from authentik.lib.views import CreateAssignPermView
-
-
-class NotificationTransportCreateView(
-    SuccessMessageMixin,
-    LoginRequiredMixin,
-    DjangoPermissionRequiredMixin,
-    CreateAssignPermView,
-):
-    """Create new NotificationTransport"""
-
-    model = NotificationTransport
-    form_class = NotificationTransportForm
-    permission_required = "authentik_events.add_notificationtransport"
-    success_url = "/"
-    template_name = "generic/create.html"
-    success_message = _("Successfully created Notification Transport")
-
-
-class NotificationTransportUpdateView(
-    SuccessMessageMixin,
-    LoginRequiredMixin,
-    PermissionRequiredMixin,
-    UpdateView,
-):
-    """Update application"""
-
-    model = NotificationTransport
-    form_class = NotificationTransportForm
-    permission_required = "authentik_events.change_notificationtransport"
-    success_url = "/"
-    template_name = "generic/update.html"
-    success_message = _("Successfully updated Notification Transport")

authentik/events/forms.py

@@ -1,34 +1,7 @@
 """authentik events NotificationTransport forms"""
 from django import forms
-from django.utils.translation import gettext_lazy as _
 
-from authentik.events.models import NotificationRule, NotificationTransport
-
-
-class NotificationTransportForm(forms.ModelForm):
-    """NotificationTransport Form"""
-
-    class Meta:
-
-        model = NotificationTransport
-        fields = [
-            "name",
-            "mode",
-            "webhook_url",
-            "send_once",
-        ]
-        widgets = {
-            "name": forms.TextInput(),
-            "webhook_url": forms.TextInput(),
-        }
-        labels = {
-            "webhook_url": _("Webhook URL"),
-        }
-        help_texts = {
-            "webhook_url": _(
-                ("Only required when the Generic or Slack Webhook is used.")
-            ),
-        }
+from authentik.events.models import NotificationRule
 
 
 class NotificationRuleForm(forms.ModelForm):

web/src/api/legacy.ts

@@ -60,10 +60,6 @@ export class AdminURLManager {
         return `/administration/events/rules/${rest}`;
     }
 
-    static eventTransports(rest: string): string {
-        return `/administration/events/transports/${rest}`;
-    }
-
 }
 
 export class UserURLManager {

web/src/pages/events/TransportForm.ts

@@ -0,0 +1,105 @@
+import { EventsApi, NotificationTransport, NotificationTransportModeEnum } 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 { ifDefined } from "lit-html/directives/if-defined";
+import "../../elements/forms/HorizontalFormElement";
+
+@customElement("ak-event-transport-form")
+export class TransportForm extends Form<NotificationTransport> {
+
+    @property({attribute: false})
+    transport?: NotificationTransport;
+
+    @property({type: Boolean})
+    showWebhook = false;
+
+    getSuccessMessage(): string {
+        if (this.transport) {
+            return gettext("Successfully updated transport.");
+        } else {
+            return gettext("Successfully created transport.");
+        }
+    }
+
+    send = (data: NotificationTransport): Promise<NotificationTransport> => {
+        if (this.transport) {
+            return new EventsApi(DEFAULT_CONFIG).eventsTransportsUpdate({
+                uuid: this.transport.pk || "",
+                data: data
+            });
+        } else {
+            return new EventsApi(DEFAULT_CONFIG).eventsTransportsCreate({
+                data: data
+            });
+        }
+    };
+
+    renderTransportModes(): TemplateResult {
+        return html`
+            <option value=${NotificationTransportModeEnum.Email} ?selected=${this.transport?.mode === NotificationTransportModeEnum.Email}>
+                ${gettext("Email")}
+            </option>
+            <option value=${NotificationTransportModeEnum.Webhook} ?selected=${this.transport?.mode === NotificationTransportModeEnum.Webhook}>
+                ${gettext("Webhook (generic)")}
+            </option>
+            <option value=${NotificationTransportModeEnum.WebhookSlack} ?selected=${this.transport?.mode === NotificationTransportModeEnum.WebhookSlack}>
+                ${gettext("Webhook (Slack/Discord)")}
+            </option>
+        `;
+    }
+
+    firstUpdated(): void {
+        if (this.transport) {
+            this.onModeChange(this.transport.mode);
+        }
+    }
+
+    onModeChange(mode: string): void {
+        if (mode === NotificationTransportModeEnum.Webhook || mode === NotificationTransportModeEnum.WebhookSlack) {
+            this.showWebhook = true;
+        } else {
+            this.showWebhook = false;
+        }
+    }
+
+    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.transport?.name)}" class="pf-c-form-control" required>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Mode")}
+                ?required=${true}
+                name="mode">
+                <select class="pf-c-form-control" @change=${(ev: Event) => {
+                    const current = (ev.target as HTMLInputElement).value;
+                    this.onModeChange(current);
+                }}>
+                    ${this.renderTransportModes()}
+                </select>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                ?hidden=${!this.showWebhook}
+                label=${gettext("Webhook URL")}
+                name="webhookUrl">
+                <input type="text" value="${ifDefined(this.transport?.webhookUrl)}" class="pf-c-form-control">
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal name="sendOnce">
+                <div class="pf-c-check">
+                    <input type="checkbox" class="pf-c-check__input" ?checked=${this.transport?.sendOnce || false}>
+                    <label class="pf-c-check__label">
+                        ${gettext("Send once")}
+                    </label>
+                </div>
+                <p class="pf-c-form__helper-text">${gettext("Only send notification once, for example when sending a webhook into a chat channel.")}</p>
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+
+}

web/src/pages/events/TransportListPage.ts

@@ -4,14 +4,14 @@ import { AKResponse } from "../../api/Client";
 import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/buttons/ActionButton";
-import "../../elements/buttons/ModalButton";
+import "../../elements/forms/ModalForm";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
 import { EventsApi, NotificationTransport } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { AdminURLManager } from "../../api/legacy";
 import "../../elements/forms/DeleteForm";
+import "./TransportForm";
 
 @customElement("ak-event-transport-list")
 export class TransportListPage extends TablePage<NotificationTransport> {
@@ -61,12 +61,19 @@ export class TransportListPage extends TablePage<NotificationTransport> {
                 }}>
                 ${gettext("Test")}
             </ak-action-button>
-            <ak-modal-button href="${AdminURLManager.eventTransports(`${item.pk}/update/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+            <ak-forms-modal>
+                <span slot="submit">
+                    ${gettext("Update")}
+                </span>
+                <span slot="header">
+                    ${gettext("Update Notification Transport")}
+                </span>
+                <ak-event-transport-form slot="form" .transport=${item}>
+                </ak-event-transport-form>
+                <button slot="trigger" class="pf-c-button pf-m-primary">
                     ${gettext("Edit")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
+                </button>
+            </ak-forms-modal>
             <ak-forms-delete
                 .obj=${item}
                 objectLabel=${gettext("Notifications Transport")}
@@ -84,12 +91,19 @@ export class TransportListPage extends TablePage<NotificationTransport> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${AdminURLManager.eventTransports("create/")}>
-            <ak-spinner-button slot="trigger" class="pf-m-primary">
+        <ak-forms-modal>
+            <span slot="submit">
                 ${gettext("Create")}
-            </ak-spinner-button>
-            <div slot="modal"></div>
-        </ak-modal-button>
+            </span>
+            <span slot="header">
+                ${gettext("Create Notification Transport")}
+            </span>
+            <ak-event-transport-form slot="form">
+            </ak-event-transport-form>
+            <button slot="trigger" class="pf-c-button pf-m-primary">
+                ${gettext("Create")}
+            </button>
+        </ak-forms-modal>
         ${super.renderToolbar()}
         `;
     }