Managed objects (#519)

* managed: add base manager and Ops

* core: use ManagedModel for Token and PropertyMapping

* providers/saml: implement managed objects for SAML Provider

* sources/ldap: migrate to managed

* providers/oauth2: migrate to managed

* providers/proxy: migrate to managed

* *: load .managed in apps

* managed: add reconcile task, run on startup

* providers/oauth2: fix import path for managed

* providers/saml: don't set FriendlyName when mapping is none

* *: use ObjectManager in tests to ensure objects exist

* ci: use vmImage ubuntu-latest

* providers/saml: add new mapping for username and user id

* tests: remove docker proxy

* tests/e2e: use updated attribute names

* docs: update SAML docs

* tests/e2e: fix remaining saml cases

* outposts: make tokens as managed

* *: make PropertyMapping SerializerModel

* web: add page for property-mappings

* web: add codemirror to common_styles because codemirror

* docs: fix member-of in nextcloud

* docs: nextcloud add admin

* web: fix refresh reloading data two times

* web: add loading lock to table to prevent double loads

* web: add ability to use null in QueryArgs (value will be skipped)

* web: add hide option to property mappings

* web: fix linting

web/package-lock.json

@@ -1,6 +1,8 @@
 {
-    "requires": true,
+    "name": "authentik-web",
+    "version": "0.0.0",
     "lockfileVersion": 1,
+    "requires": true,
     "dependencies": {
         "@babel/code-frame": {
             "version": "7.10.4",

web/package.json

@@ -1,4 +1,7 @@
 {
+    "name": "authentik-web",
+    "version": "0.0.0",
+    "private": true,
     "license": "GNU GPLv3",
     "scripts": {
         "build": "rollup -c ./rollup.config.js",

web/src/api/Client.ts

@@ -4,7 +4,7 @@ import { NotFoundError, RequestError } from "./Error";
 export const VERSION = "v2beta";
 
 export interface QueryArguments {
-    [key: string]: number | string | boolean;
+    [key: string]: number | string | boolean | null;
 }
 
 export class Client {
@@ -12,6 +12,7 @@ export class Client {
         let builtUrl = `/api/${VERSION}/${url.join("/")}/`;
         if (query) {
             const queryString = Object.keys(query)
+                .filter((k) => query[k] !== null)
                 .map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(query[k]))
                 .join("&");
             builtUrl += `?${queryString}`;

web/src/api/EventNotification.ts

@@ -21,8 +21,8 @@ export class Notification {
         return DefaultClient.fetch<PBResponse<Notification>>(["events", "notifications"], filter);
     }
 
-    static markSeen(pk: string): Promise<Notification> {
-        return DefaultClient.update<Notification>(["events", "notifications", pk], {
+    static markSeen(pk: string): Promise<{seen: boolean}> {
+        return DefaultClient.update(["events", "notifications", pk], {
             "seen": true
         });
     }

web/src/api/PropertyMapping.ts

@@ -0,0 +1,26 @@
+import { DefaultClient, PBResponse, QueryArguments } from "./Client";
+
+export class PropertyMapping {
+    pk: string;
+    name: string;
+    expression: string;
+
+    verbose_name: string;
+    verbose_name_plural: string;
+
+    constructor() {
+        throw Error();
+    }
+
+    static get(pk: string): Promise<PropertyMapping> {
+        return DefaultClient.fetch<PropertyMapping>(["propertymappings", "all", pk]);
+    }
+
+    static list(filter?: QueryArguments): Promise<PBResponse<PropertyMapping>> {
+        return DefaultClient.fetch<PBResponse<PropertyMapping>>(["propertymappings", "all"], filter);
+    }
+
+    static adminUrl(rest: string): string {
+        return `/administration/property-mappings/${rest}`;
+    }
+}

web/src/authentik.css

@@ -170,6 +170,9 @@ select[multiple] {
         color: var(--ak-dark-foreground);
     }
     /* inputs */
+    .pf-c-input-group {
+        --pf-c-input-group--BackgroundColor: transparent;
+    }
     .pf-c-form-control {
         --pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter);
         --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);

web/src/common/styles.ts

@@ -7,5 +7,9 @@ import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
 // @ts-ignore
 import AKGlobal from "../authentik.css";
 import { CSSResult } from "lit-element";
+// @ts-ignore
+import CodeMirrorStyle from "codemirror/lib/codemirror.css";
+// @ts-ignore
+import CodeMirrorTheme from "codemirror/theme/monokai.css";
 
-export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, AKGlobal];
+export const COMMON_STYLES: CSSResult[] = [PF, PFAddons, FA, AKGlobal, CodeMirrorStyle, CodeMirrorTheme];

web/src/elements/table/Table.ts

@@ -73,6 +73,8 @@ export abstract class Table<T> extends LitElement {
     abstract columns(): TableColumn[];
     abstract row(item: T): TemplateResult[];
 
+    private isLoading = false;
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     renderExpanded(item: T): TemplateResult {
         if (this.expandable) {
@@ -111,11 +113,18 @@ export abstract class Table<T> extends LitElement {
     }
 
     public fetch(): void {
+        if (this.isLoading) {
+            return;
+        }
+        this.isLoading = true;
         this.data = undefined;
         this.apiEndpoint(this.page).then((r) => {
             this.data = r;
             this.page = r.pagination.current;
             this.expandedRows = [];
+            this.isLoading = false;
+        }).catch(() => {
+            this.isLoading = false;
         });
     }
 
@@ -167,15 +176,15 @@ export abstract class Table<T> extends LitElement {
                 <tr role="row">
                     ${this.expandable ? html`<td class="pf-c-table__toggle" role="cell">
                     <button class="pf-c-button pf-m-plain ${this.expandedRows[idx] ? "pf-m-expanded" : ""}" @click=${() => {
-    this.expandedRows[idx] = !this.expandedRows[idx];
-    this.requestUpdate();
-}}>
+                        this.expandedRows[idx] = !this.expandedRows[idx];
+                        this.requestUpdate();
+                    }}>
                         <div class="pf-c-table__toggle-icon"> <i class="fas fa-angle-down" aria-hidden="true"></i> </div>
                     </button>
                     </td>` : html``}
                     ${this.row(item).map((col) => {
-        return html`<td role="cell">${col}</td>`;
-    })}
+                        return html`<td role="cell">${col}</td>`;
+                    })}
                 </tr>
                 <tr class="pf-c-table__expandable-row ${this.expandedRows[idx] ? "pf-m-expanded" : ""}" role="row">
                     <td></td>
@@ -190,23 +199,29 @@ export abstract class Table<T> extends LitElement {
             @click=${() => { this.fetch(); }}
             class="pf-c-button pf-m-primary">
             ${gettext("Refresh")}
-        </button>`;
+        </button>&nbsp;`;
+    }
+
+    renderToolbarAfter(): TemplateResult {
+        return html``;
     }
 
     renderSearch(): TemplateResult {
         return html``;
     }
 
+    firstUpdated(): void {
+        this.fetch();
+    }
+
     renderTable(): TemplateResult {
-        if (!this.data) {
-            this.fetch();
-        }
         return html`<div class="pf-c-toolbar">
                 <div class="pf-c-toolbar__content">
                     ${this.renderSearch()}&nbsp;
                     <div class="pf-c-toolbar__bulk-select">
                         ${this.renderToolbar()}
-                    </div>
+                    </div>&nbsp;
+                    ${this.renderToolbarAfter()}
                     <ak-table-pagination
                         class="pf-c-toolbar__item pf-m-pagination"
                         .pages=${this.data?.pagination}

web/src/elements/table/TableSearch.ts

@@ -19,17 +19,17 @@ export class TableSearch extends LitElement {
         return html`<div class="pf-c-toolbar__group pf-m-filter-group">
                 <div class="pf-c-toolbar__item pf-m-search-filter">
                     <form class="pf-c-input-group" method="GET" @submit=${(e: Event) => {
-        e.preventDefault();
-        if (!this.onSearch) return;
-        const el = this.shadowRoot?.querySelector<HTMLInputElement>("input[type=search]");
-        if (!el) return;
-        if (el.value === "") return;
-        this.onSearch(el?.value);
-    }}>
+                        e.preventDefault();
+                        if (!this.onSearch) return;
+                        const el = this.shadowRoot?.querySelector<HTMLInputElement>("input[type=search]");
+                        if (!el) return;
+                        if (el.value === "") return;
+                        this.onSearch(el?.value);
+                    }}>
                         <input class="pf-c-form-control" name="search" type="search" placeholder="Search..." value="${ifDefined(this.value)}" @search=${(ev: Event) => {
-    if (!this.onSearch) return;
-    this.onSearch((ev.target as HTMLInputElement).value);
-}}>
+                            if (!this.onSearch) return;
+                            this.onSearch((ev.target as HTMLInputElement).value);
+                        }}>
                         <button class="pf-c-button pf-m-control" type="submit">
                             <i class="fas fa-search" aria-hidden="true"></i>
                         </button>

web/src/interfaces/AdminInterface.ts

@@ -34,7 +34,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
     }),
     new SidebarItem("Customisation").children(
         new SidebarItem("Policies", "/administration/policies/"),
-        new SidebarItem("Property Mappings", "/administration/property-mappings"),
+        new SidebarItem("Property Mappings", "/property-mappings"),
     ).when((): Promise<boolean> => {
         return User.me().then(u => u.is_superuser);
     }),

web/src/pages/property-mappings/PropertyMappingListPage.ts

@@ -0,0 +1,129 @@
+import { gettext } from "django";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { PropertyMapping } from "../../api/PropertyMapping";
+import { PBResponse } from "../../api/Client";
+import { TablePage } from "../../elements/table/TablePage";
+
+import "../../elements/buttons/ModalButton";
+import "../../elements/buttons/Dropdown";
+import "../../elements/buttons/SpinnerButton";
+import { TableColumn } from "../../elements/table/Table";
+
+@customElement("ak-property-mapping-list")
+export class PropertyMappingListPage extends TablePage<PropertyMapping> {
+    searchEnabled(): boolean {
+        return true;
+    }
+    pageTitle(): string {
+        return gettext("Property Mappings");
+    }
+    pageDescription(): string {
+        return gettext("Control how authentik exposes and interprets information.");
+    }
+    pageIcon(): string {
+        return gettext("pf-icon pf-icon-blueprint");
+    }
+
+    @property()
+    order = "name";
+
+    @property({type: Boolean})
+    hideManaged = false;
+
+    apiEndpoint(page: number): Promise<PBResponse<PropertyMapping>> {
+        return PropertyMapping.list({
+            ordering: this.order,
+            page: page,
+            search: this.search || "",
+            managed: this.hideManaged ? false : null,
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("Name", "name"),
+            new TableColumn("Type", "type"),
+            new TableColumn(""),
+        ];
+    }
+
+    row(item: PropertyMapping): TemplateResult[] {
+        return [
+            html`${item.name}`,
+            html`${item.verbose_name}`,
+            html`
+            <ak-modal-button href="${PropertyMapping.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="${PropertyMapping.adminUrl(`${item.pk}/delete/`)}">
+                <ak-spinner-button slot="trigger" class="pf-m-danger">
+                    Delete
+                </ak-spinner-button>
+                <div slot="modal"></div>
+            </ak-modal-button>
+            `,
+        ];
+    }
+
+    renderToolbar(): TemplateResult {
+        return html`
+        <ak-dropdown class="pf-c-dropdown">
+            <button class="pf-m-primary pf-c-dropdown__toggle" type="button">
+                <span class="pf-c-dropdown__toggle-text">${gettext("Create")}</span>
+                <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
+            </button>
+            <ul class="pf-c-dropdown__menu" hidden>
+                <li>
+                    <ak-modal-button href="${PropertyMapping.adminUrl("create/?type=LDAPPropertyMapping")}">
+                        <button slot="trigger" class="pf-c-dropdown__menu-item">${gettext("LDAP Property Mapping")}<br>
+                            <small>
+                                ${gettext("Map LDAP Property to User or Group object attribute")}
+                            </small>
+                        </button>
+                        <div slot="modal"></div>
+                    </ak-modal-button>
+                </li>
+                <li>
+                    <ak-modal-button href="${PropertyMapping.adminUrl("create/?type=SAMLPropertyMapping")}">
+                        <button slot="trigger" class="pf-c-dropdown__menu-item">${gettext("SAML Property Mapping")}<br>
+                            <small>
+                                ${gettext("Map User/Group attribute to SAML Attribute, which can be used by the Service Provider.")}
+                            </small>
+                        </button>
+                        <div slot="modal"></div>
+                    </ak-modal-button>
+                </li>
+                <li>
+                    <ak-modal-button href="${PropertyMapping.adminUrl("create/?type=ScopeMapping")}">
+                        <button slot="trigger" class="pf-c-dropdown__menu-item">${gettext("Scope Mapping")}<br>
+                            <small>
+                                ${gettext("Map an OAuth Scope to users properties")}
+                            </small>
+                        </button>
+                        <div slot="modal"></div>
+                    </ak-modal-button>
+                </li>
+            </ul>
+        </ak-dropdown>
+        ${super.renderToolbar()}`;
+    }
+
+    renderToolbarAfter(): TemplateResult {
+        return html`<div class="pf-c-toolbar__group pf-m-filter-group">
+            <div class="pf-c-toolbar__item pf-m-search-filter">
+                <div class="pf-c-input-group">
+                    <div class="pf-c-check">
+                        <input class="pf-c-check__input" type="checkbox" id="hide-managed" name="hide-managed" ?checked=${this.hideManaged} @change=${() => {
+                            this.hideManaged = !this.hideManaged;
+                            this.fetch();
+                        }} />
+                        <label class="pf-c-check__label" for="hide-managed">${gettext("Hide managed mappings")}</label>
+                    </div>
+                </div>
+            </div>
+        </div>`;
+    }
+}

web/src/routes.ts

@@ -10,6 +10,7 @@ import "./pages/flows/FlowViewPage";
 import "./pages/events/EventListPage";
 import "./pages/events/TransportListPage";
 import "./pages/events/RuleListPage";
+import "./pages/property-mappings/PropertyMappingListPage";
 
 export const ROUTES: Route[] = [
     // Prevent infinite Shell loops
@@ -30,4 +31,5 @@ export const ROUTES: Route[] = [
     new Route(new RegExp("^/events/log$"), html`<ak-event-list></ak-event-list>`),
     new Route(new RegExp("^/events/transports$"), html`<ak-event-transport-list></ak-event-transport-list>`),
     new Route(new RegExp("^/events/rules$"), html`<ak-event-rule-list></ak-event-rule-list>`),
+    new Route(new RegExp("^/property-mappings$"), html`<ak-property-mapping-list></ak-property-mapping-list>`),
 ];