add api and webui

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

authentik/interfaces/api.py

@@ -1,6 +1,7 @@
 """interfaces API"""
 from rest_framework.serializers import ModelSerializer
 from rest_framework.viewsets import ModelViewSet
+from authentik.core.api.used_by import UsedByMixin
 
 from authentik.interfaces.models import Interface
 
@@ -18,7 +19,7 @@ class InterfaceSerializer(ModelSerializer):
         ]
 
 
-class InterfaceViewSet(ModelViewSet):
+class InterfaceViewSet(UsedByMixin, ModelViewSet):
     """Interface serializer"""
 
     queryset = Interface.objects.all()

web/src/admin/AdminInterface.ts

@@ -299,6 +299,9 @@ export class AdminInterface extends Interface {
                 <ak-sidebar-item path="/core/tenants">
                     <span slot="label">${t`Tenants`}</span>
                 </ak-sidebar-item>
+                <ak-sidebar-item path="/interfaces">
+                    <span slot="label">${t`Interfaces`}</span>
+                </ak-sidebar-item>
                 <ak-sidebar-item path="/crypto/certificates">
                     <span slot="label">${t`Certificates`}</span>
                 </ak-sidebar-item>

web/src/admin/Routes.ts

@@ -132,6 +132,10 @@ export const ROUTES: Route[] = [
         await import("@goauthentik/admin/blueprints/BlueprintListPage");
         return html`<ak-blueprint-list></ak-blueprint-list>`;
     }),
+    new Route(new RegExp("^/interfaces$"), async () => {
+        await import("@goauthentik/admin/interfaces/InterfaceListPage");
+        return html`<ak-interface-list></ak-interface-list>`;
+    }),
     new Route(new RegExp("^/debug$"), async () => {
         await import("@goauthentik/admin/DebugPage");
         return html`<ak-admin-debug-page></ak-admin-debug-page>`;

web/src/admin/interfaces/InterfaceForm.ts

@@ -0,0 +1,90 @@
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { first } from "@goauthentik/common/utils";
+import "@goauthentik/elements/CodeMirror";
+import "@goauthentik/elements/forms/HorizontalFormElement";
+import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/Radio";
+
+import { t } from "@lingui/macro";
+
+import { TemplateResult, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { Interface, InterfaceTypeEnum, InterfacesApi } from "@goauthentik/api";
+
+@customElement("ak-interface-form")
+export class InterfaceForm extends ModelForm<Interface, string> {
+    loadInstance(pk: string): Promise<Interface> {
+        return new InterfacesApi(DEFAULT_CONFIG).interfacesRetrieve({
+            interfaceUuid: pk,
+        });
+    }
+
+    getSuccessMessage(): string {
+        if (this.instance) {
+            return t`Successfully updated interface.`;
+        } else {
+            return t`Successfully created interface.`;
+        }
+    }
+
+    send = (data: Interface): Promise<Interface> => {
+        if (this.instance?.interfaceUuid) {
+            return new InterfacesApi(DEFAULT_CONFIG).interfacesUpdate({
+                interfaceUuid: this.instance.interfaceUuid,
+                interfaceRequest: data,
+            });
+        } else {
+            return new InterfacesApi(DEFAULT_CONFIG).interfacesCreate({
+                interfaceRequest: data,
+            });
+        }
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal label=${t`URL Name`} ?required=${true} name="urlName">
+                <input
+                    type="text"
+                    value="${first(this.instance?.urlName, "")}"
+                    class="pf-c-form-control"
+                    required
+                />
+                <p class="pf-c-form__helper-text">
+                    ${t`Name used in the URL when accessing this interface.`}
+                </p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${t`Type`} ?required=${true} name="type">
+                <ak-radio
+                    .options=${[
+                        {
+                            label: t`Enduser interface`,
+                            value: InterfaceTypeEnum.User,
+                            default: true,
+                        },
+                        {
+                            label: t`Flow interface`,
+                            value: InterfaceTypeEnum.Flow,
+                        },
+                        {
+                            label: t`Admin interface`,
+                            value: InterfaceTypeEnum.Admin,
+                        },
+                    ]}
+                    .value=${this.instance?.type}
+                >
+                </ak-radio>
+                <p class="pf-c-form__helper-text">
+                    ${t`Configure how authentik will use this interface.`}
+                </p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${t`Template`} ?required=${true} name="template"
+                ><ak-codemirror
+                    mode="html"
+                    value="${ifDefined(this.instance?.template)}"
+                ></ak-codemirror>
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+}

web/src/admin/interfaces/InterfaceListPage.ts

@@ -0,0 +1,101 @@
+import "@goauthentik/admin/interfaces/InterfaceForm";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { uiConfig } from "@goauthentik/common/ui/config";
+import "@goauthentik/elements/buttons/SpinnerButton";
+import "@goauthentik/elements/forms/DeleteBulkForm";
+import "@goauthentik/elements/forms/ModalForm";
+import { PaginatedResponse } from "@goauthentik/elements/table/Table";
+import { TableColumn } from "@goauthentik/elements/table/Table";
+import { TablePage } from "@goauthentik/elements/table/TablePage";
+
+import { t } from "@lingui/macro";
+
+import { TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { Interface, InterfacesApi } from "@goauthentik/api";
+
+@customElement("ak-interface-list")
+export class InterfaceListPage extends TablePage<Interface> {
+    searchEnabled(): boolean {
+        return true;
+    }
+    pageTitle(): string {
+        return t`Interfaces`;
+    }
+    pageDescription(): string {
+        return t`Manage custom interfaces for authentik`;
+    }
+    pageIcon(): string {
+        return "fa fa-home";
+    }
+
+    checkbox = true;
+
+    @property()
+    order = "url_name";
+
+    async apiEndpoint(page: number): Promise<PaginatedResponse<Interface>> {
+        return new InterfacesApi(DEFAULT_CONFIG).interfacesList({
+            ordering: this.order,
+            page: page,
+            pageSize: (await uiConfig()).pagination.perPage,
+            search: this.search || "",
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [new TableColumn(t`URL Name`, "url_name"), new TableColumn(t`Actions`)];
+    }
+
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length < 1;
+        return html`<ak-forms-delete-bulk
+            objectLabel=${t`Interface(s)`}
+            .objects=${this.selectedElements}
+            .metadata=${(item: Interface) => {
+                return [{ key: t`Domain`, value: item.urlName }];
+            }}
+            .usedBy=${(item: Interface) => {
+                return new InterfacesApi(DEFAULT_CONFIG).interfacesUsedByList({
+                    interfaceUuid: item.interfaceUuid,
+                });
+            }}
+            .delete=${(item: Interface) => {
+                return new InterfacesApi(DEFAULT_CONFIG).interfacesDestroy({
+                    interfaceUuid: item.interfaceUuid,
+                });
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete-bulk>`;
+    }
+
+    row(item: Interface): TemplateResult[] {
+        return [
+            html`${item.urlName}`,
+            html`<ak-forms-modal>
+                <span slot="submit"> ${t`Update`} </span>
+                <span slot="header"> ${t`Update Interface`} </span>
+                <ak-interface-form slot="form" .instancePk=${item.interfaceUuid}>
+                </ak-interface-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <i class="fas fa-edit"></i>
+                </button>
+            </ak-forms-modal>`,
+        ];
+    }
+
+    renderObjectCreate(): TemplateResult {
+        return html`
+            <ak-forms-modal>
+                <span slot="submit"> ${t`Create`} </span>
+                <span slot="header"> ${t`Create Interface`} </span>
+                <ak-interface-form slot="form"> </ak-interface-form>
+                <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
+            </ak-forms-modal>
+        `;
+    }
+}

web/src/admin/tenants/TenantForm.ts

@@ -23,6 +23,10 @@ import {
     FlowsApi,
     FlowsInstancesListDesignationEnum,
     FlowsInstancesListRequest,
+    Interface,
+    InterfacesApi,
+    InterfacesListRequest,
+    InterfacesListTypeEnum,
     Tenant,
 } from "@goauthentik/api";
 
@@ -368,6 +372,107 @@ export class TenantForm extends ModelForm<Tenant, string> {
                     </ak-form-element-horizontal>
                 </div>
             </ak-form-group>
+            <ak-form-group>
+                <span slot="header"> ${t`Interfaces`} </span>
+                <div slot="body" class="pf-c-form">
+                    <ak-form-element-horizontal label=${t`User Interface`} name="interfaceUser">
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Interface[]> => {
+                                const args: InterfacesListRequest = {
+                                    ordering: "url_name",
+                                    type: InterfacesListTypeEnum.User,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new InterfacesApi(
+                                    DEFAULT_CONFIG,
+                                ).interfacesList(args);
+                                return flows.results;
+                            }}
+                            .renderElement=${(iface: Interface): string => {
+                                return iface.urlName;
+                            }}
+                            .renderDescription=${(iface: Interface): TemplateResult => {
+                                return html`${iface.type}`;
+                            }}
+                            .value=${(iface: Interface | undefined): string | undefined => {
+                                return iface?.interfaceUuid;
+                            }}
+                            .selected=${(iface: Interface): boolean => {
+                                return this.instance?.interfaceUser === iface.interfaceUuid;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
+                        <p class="pf-c-form__helper-text">${t`.`}</p>
+                    </ak-form-element-horizontal>
+                    <ak-form-element-horizontal label=${t`Flow Interface`} name="interfaceFlow">
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Interface[]> => {
+                                const args: InterfacesListRequest = {
+                                    ordering: "url_name",
+                                    type: InterfacesListTypeEnum.Flow,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new InterfacesApi(
+                                    DEFAULT_CONFIG,
+                                ).interfacesList(args);
+                                return flows.results;
+                            }}
+                            .renderElement=${(iface: Interface): string => {
+                                return iface.urlName;
+                            }}
+                            .renderDescription=${(iface: Interface): TemplateResult => {
+                                return html`${iface.type}`;
+                            }}
+                            .value=${(iface: Interface | undefined): string | undefined => {
+                                return iface?.interfaceUuid;
+                            }}
+                            .selected=${(iface: Interface): boolean => {
+                                return this.instance?.interfaceFlow === iface.interfaceUuid;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
+                        <p class="pf-c-form__helper-text">${t`.`}</p>
+                    </ak-form-element-horizontal>
+                    <ak-form-element-horizontal label=${t`Admin Interface`} name="interfaceAdmin">
+                        <ak-search-select
+                            .fetchObjects=${async (query?: string): Promise<Interface[]> => {
+                                const args: InterfacesListRequest = {
+                                    ordering: "url_name",
+                                    type: InterfacesListTypeEnum.Admin,
+                                };
+                                if (query !== undefined) {
+                                    args.search = query;
+                                }
+                                const flows = await new InterfacesApi(
+                                    DEFAULT_CONFIG,
+                                ).interfacesList(args);
+                                return flows.results;
+                            }}
+                            .renderElement=${(iface: Interface): string => {
+                                return iface.urlName;
+                            }}
+                            .renderDescription=${(iface: Interface): TemplateResult => {
+                                return html`${iface.type}`;
+                            }}
+                            .value=${(iface: Interface | undefined): string | undefined => {
+                                return iface?.interfaceUuid;
+                            }}
+                            .selected=${(iface: Interface): boolean => {
+                                return this.instance?.interfaceAdmin === iface.interfaceUuid;
+                            }}
+                            ?blankable=${true}
+                        >
+                        </ak-search-select>
+                        <p class="pf-c-form__helper-text">${t`.`}</p>
+                    </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
             <ak-form-group>
                 <span slot="header"> ${t`Other global settings`} </span>
                 <div slot="body" class="pf-c-form">