core: Initial RBAC (#6806)

* rename consent permission Signed-off-by: Jens Langhammer <jens@goauthentik.io> * the user version Signed-off-by: Jens Langhammer <jens@goauthentik.io> t Signed-off-by: Jens Langhammer <jens@goauthentik.io> * initial role Signed-off-by: Jens Langhammer <jens@goauthentik.io> * start form Signed-off-by: Jens Langhammer <jens@goauthentik.io> * some minor table refactoring Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix user, add assign Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add roles ui Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix backend Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add assign API for roles Signed-off-by: Jens Langhammer <jens@goauthentik.io> * start adding toggle buttons Signed-off-by: Jens Langhammer <jens@goauthentik.io> * start view page Signed-off-by: Jens Langhammer <jens@goauthentik.io> * exclude add_ permission for per-object perms Signed-off-by: Jens Langhammer <jens@goauthentik.io> * small cleanup Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add permission list for roles Signed-off-by: Jens Langhammer <jens@goauthentik.io> * make sidebar update Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix page header not re-rendering? Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fixup Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add search Signed-off-by: Jens Langhammer <jens@goauthentik.io> * show first category in table groupBy except when its empty Signed-off-by: Jens Langhammer <jens@goauthentik.io> * make model and object PK optional but required together Signed-off-by: Jens Langhammer <jens@goauthentik.io> * allow for setting global perms Signed-off-by: Jens Langhammer <jens@goauthentik.io> * exclude non-authentik permissions Signed-off-by: Jens Langhammer <jens@goauthentik.io> * exclude models which aren't allowed (base models etc) Signed-off-by: Jens Langhammer <jens@goauthentik.io> * ensure all models have verbose_name set, exclude some more internal objects Signed-off-by: Jens Langhammer <jens@goauthentik.io> * lint fix Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix role perm assign Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add unasign for global perms Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add meta changes Signed-off-by: Jens Langhammer <jens@goauthentik.io> * clear modal state after submit Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add roles to our group Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix duplicate url names Signed-off-by: Jens Langhammer <jens@goauthentik.io> * make recursive group query more usable Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add name field to role itself and move group creation to signal Signed-off-by: Jens Langhammer <jens@goauthentik.io> * start sync Signed-off-by: Jens Langhammer <jens@goauthentik.io> * move rbac stuff to separate django app Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix lint and such Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix go Signed-off-by: Jens Langhammer <jens@goauthentik.io> * update Signed-off-by: Jens Langhammer <jens@goauthentik.io> * start API changes Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add more API tests Signed-off-by: Jens Langhammer <jens@goauthentik.io> * make admin interface not require superuser for now, improve error handling Signed-off-by: Jens Langhammer <jens@goauthentik.io> * replace some IsAdminUser where applicable Signed-off-by: Jens Langhammer <jens@goauthentik.io> * migrate flow inspector perms to actual permission Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix license not being a serializermodel Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add permission modal to models without view page Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add additional permissions to assign/unassign permissions Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add action to unassign user permissions Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add permissions tab to remaining view pages Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix flow inspector permission check Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix codecov config? Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add more API tests Signed-off-by: Jens Langhammer <jens@goauthentik.io> * ensure viewsets have an order set Signed-off-by: Jens Langhammer <jens@goauthentik.io> * hopefully the last api name change Signed-off-by: Jens Langhammer <jens@goauthentik.io> * make perm modal less confusing Signed-off-by: Jens Langhammer <jens@goauthentik.io> * start user view permission page Signed-off-by: Jens Langhammer <jens@goauthentik.io> * only make delete bulk form expandable if usedBy is set Signed-off-by: Jens Langhammer <jens@goauthentik.io> * expand permission tables Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add more things Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add user global permission table Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix lint Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix tests' url names Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add tests for assign perms Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add unassign tests Signed-off-by: Jens Langhammer <jens@goauthentik.io> * rebuild permissions Signed-off-by: Jens Langhammer <jens@goauthentik.io> * prevent assigning/unassigning permissions to internal service accounts Signed-off-by: Jens Langhammer <jens@goauthentik.io> * only enable default api browser in debug Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix role object permissions showing duplicate Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix role link on role object permissions table Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix object permission modal having duplicate close buttons Signed-off-by: Jens Langhammer <jens@goauthentik.io> * return error if user has no global perm and no object perms also improve error display on table Signed-off-by: Jens Langhammer <jens@goauthentik.io> * small optimisation Signed-off-by: Jens Langhammer <jens@goauthentik.io> * optimise even more Signed-off-by: Jens Langhammer <jens@goauthentik.io> * update locale Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add system permission for non-object permissions Signed-off-by: Jens Langhammer <jens@goauthentik.io> * allow access to admin interface based on perm Signed-off-by: Jens Langhammer <jens@goauthentik.io> * clean Signed-off-by: Jens Langhammer <jens@goauthentik.io> * don't exclude base models Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2023-10-16 17:31:50 +02:00
parent dce913496e
commit e28babb0b8
139 changed files with 6563 additions and 425 deletions
--- a/web/src/elements/PageHeader.ts
+++ b/web/src/elements/PageHeader.ts
@ -13,7 +13,7 @@ import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";

 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
@ -55,6 +55,7 @@ export class PageHeader extends AKElement {
    @property()
    description?: string;

+    @state()
    _header = "";

    static get styles(): CSSResult[] {
--- a/web/src/elements/ak-locale-context/ak-locale-context.ts
+++ b/web/src/elements/ak-locale-context/ak-locale-context.ts
@ -74,7 +74,7 @@ export class LocaleContext extends LitElement {
            console.warn(`Received a non-custom event at EVENT_LOCALE_REQUEST: ${ev}`);
            return;
        }
-        console.log("Locale update request received.");
+        console.debug("authentik/locale: Locale update request received.");
        this.updateLocale(ev.detail.locale);
    }

--- a/web/src/elements/charts/Chart.ts
+++ b/web/src/elements/charts/Chart.ts
@ -22,7 +22,7 @@ import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { property, state } from "lit/decorators.js";

-import { UiThemeEnum } from "@goauthentik/api";
+import { ResponseError, UiThemeEnum } from "@goauthentik/api";

 Chart.register(Legend, Tooltip);
 Chart.register(LineController, BarController, DoughnutController);
@ -65,6 +65,9 @@ export abstract class AKChart<T> extends AKElement {
    @state()
    chart?: Chart;

+    @state()
+    error?: ResponseError;
+
    @property()
    centerText?: string;

@ -129,19 +132,23 @@ export abstract class AKChart<T> extends AKElement {
    }

    firstUpdated(): void {
-        this.apiRequest().then((r) => {
-            const canvas = this.shadowRoot?.querySelector<HTMLCanvasElement>("canvas");
-            if (!canvas) {
-                console.warn("Failed to get canvas element");
-                return;
-            }
-            const ctx = canvas.getContext("2d");
-            if (!ctx) {
-                console.warn("failed to get 2d context");
-                return;
-            }
-            this.chart = this.configureChart(r, ctx);
-        });
+        this.apiRequest()
+            .then((r) => {
+                const canvas = this.shadowRoot?.querySelector<HTMLCanvasElement>("canvas");
+                if (!canvas) {
+                    console.warn("Failed to get canvas element");
+                    return;
+                }
+                const ctx = canvas.getContext("2d");
+                if (!ctx) {
+                    console.warn("failed to get 2d context");
+                    return;
+                }
+                this.chart = this.configureChart(r, ctx);
+            })
+            .catch((exc: ResponseError) => {
+                this.error = exc;
+            });
    }

    getChartType(): string {
@ -204,7 +211,15 @@ export abstract class AKChart<T> extends AKElement {
    render(): TemplateResult {
        return html`
            <div class="container">
-                ${this.chart ? html`` : html`<ak-empty-state ?loading="${true}"></ak-empty-state>`}
+                ${this.error
+                    ? html`
+                          <ak-empty-state header="${msg("Failed to fetch data.")}" icon="fa-times">
+                              <p slot="body">${this.error.response.statusText}</p>
+                          </ak-empty-state>
+                      `
+                    : html`${this.chart
+                          ? html``
+                          : html`<ak-empty-state ?loading="${true}"></ak-empty-state>`}`}
                ${this.centerText ? html` <span>${this.centerText}</span> ` : html``}
                <canvas style="${this.chart === undefined ? "display: none;" : ""}"></canvas>
            </div>
--- a/web/src/elements/forms/DeleteBulkForm.ts
+++ b/web/src/elements/forms/DeleteBulkForm.ts
@ -20,7 +20,6 @@ type BulkDeleteMetadata = { key: string; value: string }[];

@customElement("ak-delete-objects-table")
 export class DeleteObjectsTable<T> extends Table<T> {
-    expandable = true;
    paginated = false;

    @property({ attribute: false })
@ -70,6 +69,11 @@ export class DeleteObjectsTable<T> extends Table<T> {
        return html``;
    }

+    firstUpdated(): void {
+        this.expandable = this.usedBy !== undefined;
+        super.firstUpdated();
+    }
+
    renderExpanded(item: T): TemplateResult {
        const handler = async () => {
            if (!this.usedByData.has(item) && this.usedBy) {
--- a/web/src/elements/rbac/ObjectPermissionModal.ts
+++ b/web/src/elements/rbac/ObjectPermissionModal.ts
@ -0,0 +1,74 @@
+import { AKElement } from "@goauthentik/app/elements/Base";
+import "@goauthentik/elements/forms/ModalForm";
+import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/rbac/ObjectPermissionsPage";
+
+import { msg } from "@lit/localize";
+import { CSSResult, TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import { RbacPermissionsAssignedByUsersListModelEnum } from "@goauthentik/api";
+
+/**
+ * This is a bit of a hack to get the viewport checking from ModelForm,
+ * even though we actually don't need a form here.
+ * #TODO: Rework this in the future
+ */
+@customElement("ak-rbac-object-permission-modal-form")
+export class ObjectPermissionsPageForm extends ModelForm<unknown, string> {
+    @property()
+    model?: RbacPermissionsAssignedByUsersListModelEnum;
+
+    @property()
+    objectPk?: string | number;
+
+    loadInstance(): Promise<unknown> {
+        return Promise.resolve();
+    }
+    send(): Promise<unknown> {
+        return Promise.resolve();
+    }
+
+    renderForm(): TemplateResult {
+        return html`<ak-rbac-object-permission-page
+            .model=${this.model}
+            .objectPk=${this.objectPk}
+            slot="form"
+        >
+        </ak-rbac-object-permission-page>`;
+    }
+}
+
+@customElement("ak-rbac-object-permission-modal")
+export class ObjectPermissionModal extends AKElement {
+    @property()
+    model?: RbacPermissionsAssignedByUsersListModelEnum;
+
+    @property()
+    objectPk?: string | number;
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFButton];
+    }
+
+    render(): TemplateResult {
+        return html`
+            <ak-forms-modal .showSubmitButton=${false} cancelText=${msg("Close")}>
+                <span slot="header"> ${msg("Update Permissions")} </span>
+                <ak-rbac-object-permission-modal-form
+                    slot="form"
+                    .model=${this.model}
+                    .objectPk=${this.objectPk}
+                ></ak-rbac-object-permission-modal-form>
+                <button slot="trigger" class="pf-c-button pf-m-plain">
+                    <pf-tooltip position="top" content=${msg("Permissions")}>
+                        <i class="fas fa-lock"></i>
+                    </pf-tooltip>
+                </button>
+            </ak-forms-modal>
+        `;
+    }
+}
--- a/web/src/elements/rbac/ObjectPermissionsPage.ts
+++ b/web/src/elements/rbac/ObjectPermissionsPage.ts
@ -0,0 +1,68 @@
+import { AKElement } from "@goauthentik/app/elements/Base";
+import "@goauthentik/app/elements/rbac/RoleObjectPermissionTable";
+import "@goauthentik/app/elements/rbac/UserObjectPermissionTable";
+import "@goauthentik/elements/Tabs";
+
+import { msg } from "@lit/localize";
+import { CSSResult, TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import { RbacPermissionsAssignedByUsersListModelEnum } from "@goauthentik/api";
+
+@customElement("ak-rbac-object-permission-page")
+export class ObjectPermissionPage extends AKElement {
+    @property()
+    model?: RbacPermissionsAssignedByUsersListModelEnum;
+
+    @property()
+    objectPk?: string | number;
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFGrid, PFPage, PFCard];
+    }
+    render(): TemplateResult {
+        return html`<ak-tabs pageIdentifier="permissionPage">
+            <section
+                slot="page-object-user"
+                data-tab-title="${msg("User Object Permissions")}"
+                class="pf-c-page__main-section pf-m-no-padding-mobile"
+            >
+                <div class="pf-l-grid pf-m-gutter">
+                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
+                        <div class="pf-c-card__title">User Object Permissions</div>
+                        <div class="pf-c-card__body">
+                            <ak-rbac-user-object-permission-table
+                                .model=${this.model}
+                                .objectPk=${this.objectPk}
+                            >
+                            </ak-rbac-user-object-permission-table>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section
+                slot="page-object-role"
+                data-tab-title="${msg("Role Object Permissions")}"
+                class="pf-c-page__main-section pf-m-no-padding-mobile"
+            >
+                <div class="pf-l-grid pf-m-gutter">
+                    <div class="pf-c-card pf-l-grid__item pf-m-12-col">
+                        <div class="pf-c-card__title">Role Object Permissions</div>
+                        <div class="pf-c-card__body">
+                            <ak-rbac-role-object-permission-table
+                                .model=${this.model}
+                                .objectPk=${this.objectPk}
+                            >
+                            </ak-rbac-role-object-permission-table>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </ak-tabs>`;
+    }
+}
--- a/web/src/elements/rbac/PermissionSelectModal.ts
+++ b/web/src/elements/rbac/PermissionSelectModal.ts
@ -0,0 +1,95 @@
+import { groupBy } from "@goauthentik/app/common/utils";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { uiConfig } from "@goauthentik/common/ui/config";
+import "@goauthentik/elements/buttons/SpinnerButton";
+import { PaginatedResponse } from "@goauthentik/elements/table/Table";
+import { TableColumn } from "@goauthentik/elements/table/Table";
+import { TableModal } from "@goauthentik/elements/table/TableModal";
+
+import { msg } from "@lit/localize";
+import { CSSResult, TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
+
+import { Permission, RbacApi } from "@goauthentik/api";
+
+@customElement("ak-rbac-permission-select-table")
+export class PermissionSelectModal extends TableModal<Permission> {
+    checkbox = true;
+    checkboxChip = true;
+
+    searchEnabled(): boolean {
+        return true;
+    }
+
+    @property()
+    confirm!: (selectedItems: Permission[]) => Promise<unknown>;
+
+    order = "content_type__app_label,content_type__model";
+
+    static get styles(): CSSResult[] {
+        return super.styles.concat(PFBanner);
+    }
+
+    async apiEndpoint(page: number): Promise<PaginatedResponse<Permission>> {
+        return new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
+            ordering: this.order,
+            page: page,
+            pageSize: (await uiConfig()).pagination.perPage,
+            search: this.search || "",
+        });
+    }
+
+    groupBy(items: Permission[]): [string, Permission[]][] {
+        return groupBy(items, (perm) => {
+            return perm.appLabelVerbose;
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [new TableColumn(msg("Name"), "codename"), new TableColumn(msg("Model"), "")];
+    }
+
+    row(item: Permission): TemplateResult[] {
+        return [
+            html`<div>
+                <div>${item.name}</div>
+            </div>`,
+            html`${item.modelVerbose}`,
+        ];
+    }
+
+    renderSelectedChip(item: Permission): TemplateResult {
+        return html`${item.name}`;
+    }
+
+    renderModalInner(): TemplateResult {
+        return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
+                <div class="pf-c-content">
+                    <h1 class="pf-c-title pf-m-2xl">${msg("Select permissions to grant")}</h1>
+                </div>
+            </section>
+            <section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section>
+            <footer class="pf-c-modal-box__footer">
+                <ak-spinner-button
+                    .callAction=${() => {
+                        return this.confirm(this.selectedElements).then(() => {
+                            this.open = false;
+                        });
+                    }}
+                    class="pf-m-primary"
+                >
+                    ${msg("Add")} </ak-spinner-button
+                >&nbsp;
+                <ak-spinner-button
+                    .callAction=${async () => {
+                        this.open = false;
+                    }}
+                    class="pf-m-secondary"
+                >
+                    ${msg("Cancel")}
+                </ak-spinner-button>
+            </footer>`;
+    }
+}
--- a/web/src/elements/rbac/RoleObjectPermissionForm.ts
+++ b/web/src/elements/rbac/RoleObjectPermissionForm.ts
@ -0,0 +1,107 @@
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-toggle-group";
+import "@goauthentik/elements/forms/HorizontalFormElement";
+import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
+
+import { msg } from "@lit/localize";
+import { TemplateResult, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+import {
+    ModelEnum,
+    PaginatedPermissionList,
+    RbacApi,
+    RbacRolesListRequest,
+    Role,
+} from "@goauthentik/api";
+
+interface RoleAssignData {
+    role: string;
+    permissions: {
+        [key: string]: boolean;
+    };
+}
+
+@customElement("ak-rbac-role-object-permission-form")
+export class RoleObjectPermissionForm extends ModelForm<RoleAssignData, number> {
+    @property()
+    model?: ModelEnum;
+
+    @property()
+    objectPk?: string;
+
+    @state()
+    modelPermissions?: PaginatedPermissionList;
+
+    async load(): Promise<void> {
+        const [appLabel, modelName] = (this.model || "").split(".");
+        this.modelPermissions = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
+            contentTypeModel: modelName,
+            contentTypeAppLabel: appLabel,
+            ordering: "codename",
+        });
+    }
+
+    loadInstance(): Promise<RoleAssignData> {
+        throw new Error("Method not implemented.");
+    }
+
+    getSuccessMessage(): string {
+        return msg("Successfully assigned permission.");
+    }
+
+    send(data: RoleAssignData): Promise<unknown> {
+        return new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByRolesAssignCreate({
+            uuid: data.role,
+            permissionAssignRequest: {
+                permissions: Object.keys(data.permissions).filter((key) => data.permissions[key]),
+                model: this.model!,
+                objectPk: this.objectPk,
+            },
+        });
+    }
+
+    renderForm(): TemplateResult {
+        if (!this.modelPermissions) {
+            return html``;
+        }
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal label=${msg("Role")} name="role">
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<Role[]> => {
+                        const args: RbacRolesListRequest = {
+                            ordering: "name",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const roles = await new RbacApi(DEFAULT_CONFIG).rbacRolesList(args);
+                        return roles.results;
+                    }}
+                    .renderElement=${(role: Role): string => {
+                        return role.name;
+                    }}
+                    .value=${(role: Role | undefined): string | undefined => {
+                        return role?.pk;
+                    }}
+                >
+                </ak-search-select>
+            </ak-form-element-horizontal>
+            ${this.modelPermissions?.results.map((perm) => {
+                return html` <ak-form-element-horizontal name="permissions.${perm.codename}">
+                    <label class="pf-c-switch">
+                        <input class="pf-c-switch__input" type="checkbox" />
+                        <span class="pf-c-switch__toggle">
+                            <span class="pf-c-switch__toggle-icon">
+                                <i class="fas fa-check" aria-hidden="true"></i>
+                            </span>
+                        </span>
+                        <span class="pf-c-switch__label">${perm.name}</span>
+                    </label>
+                </ak-form-element-horizontal>`;
+            })}
+        </form>`;
+    }
+}
--- a/web/src/elements/rbac/RoleObjectPermissionTable.ts
+++ b/web/src/elements/rbac/RoleObjectPermissionTable.ts
@ -0,0 +1,97 @@
+import { DEFAULT_CONFIG } from "@goauthentik/app/common/api/config";
+import { PaginatedResponse, Table, TableColumn } from "@goauthentik/app/elements/table/Table";
+import "@goauthentik/elements/forms/ModalForm";
+import "@goauthentik/elements/rbac/RoleObjectPermissionForm";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+
+import { msg } from "@lit/localize";
+import { TemplateResult, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import {
+    PaginatedPermissionList,
+    RbacApi,
+    RbacPermissionsAssignedByRolesListModelEnum,
+    RoleAssignedObjectPermission,
+} from "@goauthentik/api";
+
+@customElement("ak-rbac-role-object-permission-table")
+export class RoleAssignedObjectPermissionTable extends Table<RoleAssignedObjectPermission> {
+    @property()
+    model?: RbacPermissionsAssignedByRolesListModelEnum;
+
+    @property()
+    objectPk?: string | number;
+
+    @state()
+    modelPermissions?: PaginatedPermissionList;
+
+    async apiEndpoint(page: number): Promise<PaginatedResponse<RoleAssignedObjectPermission>> {
+        const perms = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByRolesList({
+            page: page,
+            // TODO: better default
+            model: this.model || RbacPermissionsAssignedByRolesListModelEnum.CoreUser,
+            objectPk: this.objectPk?.toString(),
+        });
+        const [appLabel, modelName] = (this.model || "").split(".");
+        const modelPermissions = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
+            contentTypeModel: modelName,
+            contentTypeAppLabel: appLabel,
+            ordering: "codename",
+        });
+        modelPermissions.results = modelPermissions.results.filter((value) => {
+            return !value.codename.startsWith("add_");
+        });
+        this.modelPermissions = modelPermissions;
+        return perms;
+    }
+
+    columns(): TableColumn[] {
+        const baseColumns = [new TableColumn("User", "user")];
+        // We don't check pagination since models shouldn't need to have that many permissions?
+        this.modelPermissions?.results.forEach((perm) => {
+            baseColumns.push(new TableColumn(perm.name, perm.codename));
+        });
+        return baseColumns;
+    }
+
+    renderObjectCreate(): TemplateResult {
+        return html`<ak-forms-modal>
+            <span slot="submit"> ${msg("Assign")} </span>
+            <span slot="header"> ${msg("Assign permission to role")} </span>
+            <ak-rbac-role-object-permission-form
+                model=${ifDefined(this.model)}
+                objectPk=${ifDefined(this.objectPk)}
+                slot="form"
+            >
+            </ak-rbac-role-object-permission-form>
+            <button slot="trigger" class="pf-c-button pf-m-primary">
+                ${msg("Assign to new role")}
+            </button>
+        </ak-forms-modal>`;
+    }
+
+    row(item: RoleAssignedObjectPermission): TemplateResult[] {
+        const baseRow = [html` <a href="#/identity/roles/${item.rolePk}">${item.name}</a>`];
+        this.modelPermissions?.results.forEach((perm) => {
+            const granted =
+                item.permissions.filter((uperm) => uperm.codename === perm.codename).length > 0;
+            baseRow.push(html`
+                <ak-action-button
+                    .apiRequest=${async () => {
+                        console.log(granted);
+                    }}
+                    class="pf-m-link"
+                >
+                    ${granted
+                        ? html`<pf-tooltip position="top" content=${msg("Directly assigned")}
+                              >✓</pf-tooltip
+                          >`
+                        : html`X`}
+                </ak-action-button>
+            `);
+        });
+        return baseRow;
+    }
+}
--- a/web/src/elements/rbac/UserObjectPermissionForm.ts
+++ b/web/src/elements/rbac/UserObjectPermissionForm.ts
@ -0,0 +1,111 @@
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import "@goauthentik/components/ak-toggle-group";
+import "@goauthentik/elements/forms/HorizontalFormElement";
+import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
+
+import { msg } from "@lit/localize";
+import { TemplateResult, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+import {
+    CoreApi,
+    CoreUsersListRequest,
+    ModelEnum,
+    PaginatedPermissionList,
+    RbacApi,
+    User,
+} from "@goauthentik/api";
+
+interface UserAssignData {
+    user: number;
+    permissions: {
+        [key: string]: boolean;
+    };
+}
+
+@customElement("ak-rbac-user-object-permission-form")
+export class UserObjectPermissionForm extends ModelForm<UserAssignData, number> {
+    @property()
+    model?: ModelEnum;
+
+    @property()
+    objectPk?: string;
+
+    @state()
+    modelPermissions?: PaginatedPermissionList;
+
+    async load(): Promise<void> {
+        const [appLabel, modelName] = (this.model || "").split(".");
+        this.modelPermissions = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
+            contentTypeModel: modelName,
+            contentTypeAppLabel: appLabel,
+            ordering: "codename",
+        });
+    }
+
+    loadInstance(): Promise<UserAssignData> {
+        throw new Error("Method not implemented.");
+    }
+
+    getSuccessMessage(): string {
+        return msg("Successfully assigned permission.");
+    }
+
+    send(data: UserAssignData): Promise<unknown> {
+        return new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByUsersAssignCreate({
+            id: data.user,
+            permissionAssignRequest: {
+                permissions: Object.keys(data.permissions).filter((key) => data.permissions[key]),
+                model: this.model!,
+                objectPk: this.objectPk!,
+            },
+        });
+    }
+
+    renderForm(): TemplateResult {
+        if (!this.modelPermissions) {
+            return html``;
+        }
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal label=${msg("User")} name="user">
+                <ak-search-select
+                    .fetchObjects=${async (query?: string): Promise<User[]> => {
+                        const args: CoreUsersListRequest = {
+                            ordering: "username",
+                        };
+                        if (query !== undefined) {
+                            args.search = query;
+                        }
+                        const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args);
+                        return users.results;
+                    }}
+                    .renderElement=${(user: User): string => {
+                        return user.username;
+                    }}
+                    .renderDescription=${(user: User): TemplateResult => {
+                        return html`${user.name}`;
+                    }}
+                    .value=${(user: User | undefined): number | undefined => {
+                        return user?.pk;
+                    }}
+                >
+                </ak-search-select>
+            </ak-form-element-horizontal>
+            ${this.modelPermissions?.results.map((perm) => {
+                return html` <ak-form-element-horizontal name="permissions.${perm.codename}">
+                    <label class="pf-c-switch">
+                        <input class="pf-c-switch__input" type="checkbox" />
+                        <span class="pf-c-switch__toggle">
+                            <span class="pf-c-switch__toggle-icon">
+                                <i class="fas fa-check" aria-hidden="true"></i>
+                            </span>
+                        </span>
+                        <span class="pf-c-switch__label">${perm.name}</span>
+                    </label>
+                </ak-form-element-horizontal>`;
+            })}
+        </form>`;
+    }
+}
--- a/web/src/elements/rbac/UserObjectPermissionTable.ts
+++ b/web/src/elements/rbac/UserObjectPermissionTable.ts
@ -0,0 +1,90 @@
+import { DEFAULT_CONFIG } from "@goauthentik/app/common/api/config";
+import { PaginatedResponse, Table, TableColumn } from "@goauthentik/app/elements/table/Table";
+import "@goauthentik/elements/forms/ModalForm";
+import "@goauthentik/elements/rbac/UserObjectPermissionForm";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+
+import { msg } from "@lit/localize";
+import { TemplateResult, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import {
+    PaginatedPermissionList,
+    RbacApi,
+    RbacPermissionsAssignedByUsersListModelEnum,
+    UserAssignedObjectPermission,
+} from "@goauthentik/api";
+
+@customElement("ak-rbac-user-object-permission-table")
+export class UserAssignedObjectPermissionTable extends Table<UserAssignedObjectPermission> {
+    @property()
+    model?: RbacPermissionsAssignedByUsersListModelEnum;
+
+    @property()
+    objectPk?: string | number;
+
+    @state()
+    modelPermissions?: PaginatedPermissionList;
+
+    async apiEndpoint(page: number): Promise<PaginatedResponse<UserAssignedObjectPermission>> {
+        const perms = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByUsersList({
+            page: page,
+            // TODO: better default
+            model: this.model || RbacPermissionsAssignedByUsersListModelEnum.CoreUser,
+            objectPk: this.objectPk?.toString(),
+        });
+        const [appLabel, modelName] = (this.model || "").split(".");
+        const modelPermissions = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
+            contentTypeModel: modelName,
+            contentTypeAppLabel: appLabel,
+            ordering: "codename",
+        });
+        modelPermissions.results = modelPermissions.results.filter((value) => {
+            return !value.codename.startsWith("add_");
+        });
+        this.modelPermissions = modelPermissions;
+        return perms;
+    }
+
+    columns(): TableColumn[] {
+        const baseColumns = [new TableColumn("User", "user")];
+        // We don't check pagination since models shouldn't need to have that many permissions?
+        this.modelPermissions?.results.forEach((perm) => {
+            baseColumns.push(new TableColumn(perm.name, perm.codename));
+        });
+        return baseColumns;
+    }
+
+    renderObjectCreate(): TemplateResult {
+        return html`<ak-forms-modal>
+            <span slot="submit"> ${msg("Assign")} </span>
+            <span slot="header"> ${msg("Assign permission to user")} </span>
+            <ak-rbac-user-object-permission-form
+                model=${ifDefined(this.model)}
+                objectPk=${ifDefined(this.objectPk)}
+                slot="form"
+            >
+            </ak-rbac-user-object-permission-form>
+            <button slot="trigger" class="pf-c-button pf-m-primary">
+                ${msg("Assign to new user")}
+            </button>
+        </ak-forms-modal>`;
+    }
+
+    row(item: UserAssignedObjectPermission): TemplateResult[] {
+        const baseRow = [html` <a href="#/identity/users/${item.pk}"> ${item.username} </a> `];
+        this.modelPermissions?.results.forEach((perm) => {
+            let cell = html`X`;
+            if (item.permissions.filter((uperm) => uperm.codename === perm.codename).length > 0) {
+                cell = html`<pf-tooltip position="top" content=${msg("Directly assigned")}
+                    >✓</pf-tooltip
+                >`;
+            } else if (item.isSuperuser) {
+                cell = html`<pf-tooltip position="top" content=${msg("Superuser")}>✓</pf-tooltip>`;
+            }
+            baseRow.push(cell);
+        });
+        return baseRow;
+    }
+}
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@ -1,3 +1,4 @@
+import { APIErrorTypes, parseAPIError } from "@goauthentik/app/common/errors";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { groupBy } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
@ -148,7 +149,7 @@ export abstract class Table<T> extends AKElement {
    expandedElements: T[] = [];

    @state()
-    hasError?: Error;
+    error?: APIErrorTypes;

    static get styles(): CSSResult[] {
        return [
@ -191,7 +192,7 @@ export abstract class Table<T> extends AKElement {
        this.isLoading = true;
        try {
            this.data = await this.apiEndpoint(this.page);
-            this.hasError = undefined;
+            this.error = undefined;
            this.page = this.data.pagination.current;
            const newSelected: T[] = [];
            const newExpanded: T[] = [];
@ -228,7 +229,7 @@ export abstract class Table<T> extends AKElement {
            this.expandedElements = newExpanded;
        } catch (ex) {
            this.isLoading = false;
-            this.hasError = ex as Error;
+            this.error = await parseAPIError(ex as Error);
        }
    }

@ -249,25 +250,32 @@ export abstract class Table<T> extends AKElement {
                    <div class="pf-l-bullseye">
                        ${inner
                            ? inner
-                            : html`<ak-empty-state
-                                  header="${msg("No objects found.")}"
-                              ></ak-empty-state>`}
+                            : html`<ak-empty-state header="${msg("No objects found.")}"
+                                  ><div slot="primary">${this.renderObjectCreate()}</div>
+                              </ak-empty-state>`}
                    </div>
                </td>
            </tr>
        </tbody>`;
    }

+    renderObjectCreate(): TemplateResult {
+        return html``;
+    }
+
    renderError(): TemplateResult {
+        if (!this.error) {
+            return html``;
+        }
        return html`<ak-empty-state header="${msg("Failed to fetch objects.")}" icon="fa-times">
-            ${this.hasError instanceof ResponseError
-                ? html` <div slot="body">${this.hasError.message}</div> `
-                : html`<div slot="body">${this.hasError?.toString()}</div>`}
+            ${this.error instanceof ResponseError
+                ? html` <div slot="body">${this.error.message}</div> `
+                : html`<div slot="body">${this.error.detail}</div>`}
        </ak-empty-state>`;
    }

    private renderRows(): TemplateResult[] | undefined {
-        if (this.hasError) {
+        if (this.error) {
            return [this.renderEmpty(this.renderError())];
        }
        if (!this.data || this.isLoading) {
@ -277,7 +285,7 @@ export abstract class Table<T> extends AKElement {
            return [this.renderEmpty()];
        }
        const groupedResults = this.groupBy(this.data.results);
-        if (groupedResults.length === 1) {
+        if (groupedResults.length === 1 && groupedResults[0][0] === "") {
            return this.renderRowGroup(groupedResults[0][1]);
        }
        return groupedResults.map(([group, items]) => {
@ -397,14 +405,15 @@ export abstract class Table<T> extends AKElement {
    }

    renderToolbar(): TemplateResult {
-        return html` <ak-spinner-button
-            .callAction=${() => {
-                return this.fetch();
-            }}
-            class="pf-m-secondary"
-        >
-            ${msg("Refresh")}</ak-spinner-button
-        >`;
+        return html` ${this.renderObjectCreate()}
+            <ak-spinner-button
+                .callAction=${() => {
+                    return this.fetch();
+                }}
+                class="pf-m-secondary"
+            >
+                ${msg("Refresh")}</ak-spinner-button
+            >`;
    }

    renderToolbarSelected(): TemplateResult {
@ -419,18 +428,20 @@ export abstract class Table<T> extends AKElement {
        if (!this.searchEnabled()) {
            return html``;
        }
-        return html`<ak-table-search
-            class="pf-c-toolbar__item pf-m-search-filter"
-            value=${ifDefined(this.search)}
-            .onSearch=${(value: string) => {
-                this.search = value;
-                this.fetch();
-                updateURLParams({
-                    search: value,
-                });
-            }}
-        >
-        </ak-table-search>`;
+        return html`<div class="pf-c-toolbar__group pf-m-search-filter">
+            <ak-table-search
+                class="pf-c-toolbar__item pf-m-search-filter"
+                value=${ifDefined(this.search)}
+                .onSearch=${(value: string) => {
+                    this.search = value;
+                    this.fetch();
+                    updateURLParams({
+                        search: value,
+                    });
+                }}
+            >
+            </ak-table-search>
+        </div>`;
    }

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
@ -441,7 +452,7 @@ export abstract class Table<T> extends AKElement {
    renderToolbarContainer(): TemplateResult {
        return html`<div class="pf-c-toolbar">
            <div class="pf-c-toolbar__content">
-                <div class="pf-c-toolbar__group pf-m-search-filter">${this.renderSearch()}</div>
+                ${this.renderSearch()}
                <div class="pf-c-toolbar__bulk-select">${this.renderToolbar()}</div>
                <div class="pf-c-toolbar__group">${this.renderToolbarAfter()}</div>
                <div class="pf-c-toolbar__group">${this.renderToolbarSelected()}</div>
--- a/web/src/elements/table/TablePage.ts
+++ b/web/src/elements/table/TablePage.ts
@ -70,14 +70,6 @@ export abstract class TablePage<T> extends Table<T> {
        </button>`;
    }

-    renderObjectCreate(): TemplateResult {
-        return html``;
-    }
-
-    renderToolbar(): TemplateResult {
-        return html`${this.renderObjectCreate()}${super.renderToolbar()}`;
-    }
-
    render(): TemplateResult {
        return html`<ak-page-header
                icon=${this.pageIcon()}