web: migrate user settings to SPA

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

authentik/core/templatetags/authentik_user_settings.py

@@ -1,44 +0,0 @@
-"""authentik user settings template tags"""
-from typing import Iterable
-
-from django import template
-from django.template.context import RequestContext
-
-from authentik.core.models import Source
-from authentik.flows.models import Stage
-from authentik.policies.engine import PolicyEngine
-
-register = template.Library()
-
-
-@register.simple_tag(takes_context=True)
-# pylint: disable=unused-argument
-def user_stages(context: RequestContext) -> dict[Stage, str]:
-    """Return list of all stages which apply to user"""
-    _all_stages: Iterable[Stage] = Stage.objects.all().select_subclasses()
-    matching_stages: dict[Stage, str] = {}
-    for stage in _all_stages:
-        user_settings = stage.ui_user_settings
-        if not user_settings:
-            continue
-        matching_stages[stage] = user_settings
-    return matching_stages
-
-
-@register.simple_tag(takes_context=True)
-def user_sources(context: RequestContext) -> dict[Source, str]:
-    """Return a list of all sources which are enabled for the user"""
-    user = context.get("request").user
-    _all_sources: Iterable[Source] = Source.objects.filter(
-        enabled=True
-    ).select_subclasses()
-    matching_sources: dict[Source, str] = {}
-    for source in _all_sources:
-        user_settings = source.ui_user_settings
-        if not user_settings:
-            continue
-        policy_engine = PolicyEngine(source, user, context.get("request"))
-        policy_engine.build()
-        if policy_engine.passing:
-            matching_sources[source] = user_settings
-    return matching_sources

authentik/core/tests/test_views_user.py

@@ -23,12 +23,6 @@ class TestUserViews(TestCase):
         )
         self.client.force_login(self.user)
 
-    def test_user_settings(self):
-        """Test UserSettingsView"""
-        self.assertEqual(
-            self.client.get(reverse("authentik_core:user-settings")).status_code, 200
-        )
-
     def test_user_details(self):
         """Test UserDetailsView"""
         self.assertEqual(

authentik/core/urls.py

@@ -6,7 +6,6 @@ from authentik.core.views import impersonate, shell, user
 urlpatterns = [
     path("", shell.ShellView.as_view(), name="shell"),
     # User views
-    path("-/user/", user.UserSettingsView.as_view(), name="user-settings"),
     path("-/user/details/", user.UserDetailsView.as_view(), name="user-details"),
     path(
         "-/user/tokens/create/",

web/src/elements/Tabs.ts

@@ -29,6 +29,25 @@ export class Tabs extends LitElement {
         `];
     }
 
+    observer: MutationObserver;
+
+    constructor() {
+        super();
+        this.observer = new MutationObserver(() => {
+            this.requestUpdate();
+        });
+    }
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.observer.observe(this, { attributes: true, childList: true, subtree: true });
+    }
+
+    disconnectedCallback(): void {
+        this.observer.disconnect();
+        super.disconnectedCallback();
+    }
+
     renderTab(page: Element): TemplateResult {
         const slot = page.attributes.getNamedItem("slot")?.value;
         return html` <li class="pf-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">

web/src/elements/sidebar/SidebarUser.ts

@@ -34,7 +34,7 @@ export class SidebarUser extends LitElement {
 
     render(): TemplateResult {
         return html`
-            <a href="#/-/user/" class="pf-c-nav__link user-avatar" id="user-settings">
+            <a href="#/user" class="pf-c-nav__link user-avatar" id="user-settings">
                 ${until(me().then((u) => {
                     return html`<img class="pf-c-avatar" src="${ifDefined(u.avatar)}" alt="" />`;
                 }), html``)}

web/src/pages/users/UserSettingsPage.ts

@@ -0,0 +1,89 @@
+import { gettext } from "django";
+import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
+import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
+import AKGlobal from "../../authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import { SourcesApi, StagesApi } from "authentik-api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { until } from "lit-html/directives/until";
+import "../../elements/Tabs";
+import "../tokens/UserTokenList";
+import "../generic/SiteShell";
+import { ifDefined } from "lit-html/directives/if-defined";
+
+@customElement("ak-user-settings")
+export class UserSettingsPage extends LitElement {
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, PFForm, PFFormControl, AKGlobal];
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-page">
+            <main role="main" class="pf-c-page__main" tabindex="-1">
+                <section class="pf-c-page__main-section pf-m-light">
+                    <div class="pf-c-content">
+                        <h1>
+                            <i class="pf-icon pf-icon-user"></i>
+                            ${gettext("User Settings")}
+                        </h1>
+                        <p>${gettext("Configure settings relevant to your user profile.")}</p>
+                    </div>
+                </section>
+                <ak-tabs ?vertical="${true}" style="height: 100%;">
+                    <section slot="page-1" data-tab-title="${gettext("User details")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                        <div class="pf-u-display-flex pf-u-justify-content-center">
+                            <div class="pf-u-w-75">
+                                <ak-site-shell url="/-/user/details/">
+                                    <div slot="body"></div>
+                                </ak-site-shell>
+                            </div>
+                        </div>
+                    </section>
+                    <section slot="page-2" data-tab-title="${gettext("Tokens")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                        <ak-token-user-list></ak-token-user-list>
+                    </section>
+                    ${until(new StagesApi(DEFAULT_CONFIG).stagesAllUserSettings({}).then((stages) => {
+                        return stages.map((stage) => {
+                            // TODO: Check for non-shell stages
+                            return html`<section slot="page-${stage.title}" data-tab-title="${ifDefined(stage.title)}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                                    <div class="pf-u-display-flex pf-u-justify-content-center">
+                                        <div class="pf-u-w-75">
+                                            <ak-site-shell url="${ifDefined(stage.component)}">
+                                                <div slot="body"></div>
+                                            </ak-site-shell>
+                                        </div>
+                                    </div>
+                                </section>`;
+                        });
+                    }))}
+                    ${until(new SourcesApi(DEFAULT_CONFIG).sourcesAllUserSettings({}).then((sources) => {
+                        return sources.map((source) => {
+                            // TODO: Check for non-shell sources
+                            return html`<section slot="page-${source.title}" data-tab-title="${ifDefined(source.title)}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                                    <div class="pf-u-display-flex pf-u-justify-content-center">
+                                        <div class="pf-u-w-75">
+                                            <ak-site-shell url="${ifDefined(source.component)}">
+                                                <div slot="body"></div>
+                                            </ak-site-shell>
+                                        </div>
+                                    </div>
+                                </section>`;
+                        });
+                    }))}
+                </ak-tabs>
+            </main>
+        </div>`;
+    }
+
+}

web/src/routes.ts

@@ -27,6 +27,7 @@ import "./pages/stages/PromptListPage";
 import "./pages/system-tasks/SystemTaskListPage";
 import "./pages/tokens/TokenListPage";
 import "./pages/users/UserListPage";
+import "./pages/users/UserSettingsPage";
 import "./pages/generic/SiteShell";
 
 export const ROUTES: Route[] = [
@@ -69,7 +70,5 @@ export const ROUTES: Route[] = [
     new Route(new RegExp("^/outpost/outposts$"), html`<ak-outpost-list></ak-outpost-list>`),
     new Route(new RegExp("^/outpost/service-connections$"), html`<ak-outpost-service-connection-list></ak-outpost-service-connection-list>`),
     new Route(new RegExp("^/crypto/certificates$"), html`<ak-crypto-certificatekeypair-list></ak-crypto-certificatekeypair-list>`),
-    new Route(new RegExp("^/-/user/$"), html`<ak-site-shell url="/-/user/">
-            <div slot="body"></div>
-        </ak-site-shell>`),
+    new Route(new RegExp("^/user$"), html`<ak-user-settings></ak-user-settings>`),
 ];