web: add source list page

web/src/api/Client.ts

@@ -9,6 +9,8 @@ export interface QueryArguments {
 
 export interface BaseInheritanceModel {
 
+    object_type: string;
+
     verbose_name: string;
     verbose_name_plural: string;
 

web/src/api/Policies.ts

@@ -7,6 +7,7 @@ export class Policy implements BaseInheritanceModel {
     constructor() {
         throw Error();
     }
+    object_type: string;
     verbose_name: string;
     verbose_name_plural: string;
 

web/src/api/Sources.ts

@@ -11,6 +11,7 @@ export class Source implements BaseInheritanceModel {
     constructor() {
         throw Error();
     }
+    object_type: string;
     verbose_name: string;
     verbose_name_plural: string;
 

web/src/pages/sources/SourcesListPage.ts

@@ -0,0 +1,66 @@
+import { gettext } from "django";
+import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { DefaultClient, PBResponse } from "../../api/Client";
+import { Source } from "../../api/Sources";
+import { TableColumn } from "../../elements/table/Table";
+import { TablePage } from "../../elements/table/TablePage";
+
+@customElement("ak-source-list")
+export class SourceListPage extends TablePage<Source> {
+    pageTitle(): string {
+        return "Sources";
+    }
+    pageDescription(): string | undefined {
+        return "External Sources which can be used to get Identities into authentik, for example Social Providers like Twiter and GitHub or Enterprise Providers like ADFS and LDAP.";
+    }
+    pageIcon(): string {
+        return "pf-icon pf-icon-middleware";
+    }
+    searchEnabled(): boolean {
+        return true;
+    }
+
+    @property()
+    order = "name";
+
+    apiEndpoint(page: number): Promise<PBResponse<Source>> {
+        return Source.list({
+            ordering: this.order,
+            page: page,
+            search: this.search || "",
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("Name", "name"),
+            new TableColumn("Type", "verbose_name"),
+            new TableColumn(""),
+        ];
+    }
+
+    row(item: Source): TemplateResult[] {
+        return [
+            html`<a href="#/sources/${item.slug}">
+                <div>${item.name}</div>
+                ${item.enabled ? html`` : html`<small>${gettext("Disabled")}</small>`}
+            </a>`,
+            html`${item.verbose_name}`,
+            html`
+            <ak-modal-button href="${Source.adminUrl(`${item.pk}/update/`)}">
+                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+                    Edit
+                </ak-spinner-button>
+                <div slot="modal"></div>
+            </ak-modal-button>&nbsp;
+            <ak-modal-button href="${Source.adminUrl(`${item.pk}/delete/`)}">
+                <ak-spinner-button slot="trigger" class="pf-m-danger">
+                    Delete
+                </ak-spinner-button>
+                <div slot="modal"></div>
+            </ak-modal-button>
+            `,
+        ];
+    }
+
+}

web/src/routes.ts

@@ -5,6 +5,7 @@ import "./pages/LibraryPage";
 import "./pages/admin-overview/AdminOverviewPage";
 import "./pages/applications/ApplicationListPage";
 import "./pages/applications/ApplicationViewPage";
+import "./pages/sources/SourcesListPage";
 import "./pages/sources/SourceViewPage";
 import "./pages/flows/FlowViewPage";
 import "./pages/events/EventListPage";
@@ -30,6 +31,7 @@ export const ROUTES: Route[] = [
     new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})$`)).then((args) => {
         return html`<ak-application-view .args=${args}></ak-application-view>`;
     }),
+    new Route(new RegExp("^/sources$"), html`<ak-source-list></ak-source-list>`),
     new Route(new RegExp(`^/sources/(?<slug>${SLUG_REGEX})$`)).then((args) => {
         return html`<ak-source-view .args=${args}></ak-source-view>`;
     }),