web: migrate user settings to SPA
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
parent
a6123cfbe4
commit
f1f706dd0d
|
|
@ -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
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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/",
|
||||
|
|
|
|||
|
|
@ -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 : ""}">
|
||||
|
|
|
|||
|
|
@ -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``)}
|
||||
|
|
|
|||
|
|
@ -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>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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>`),
|
||||
];
|
||||
|
|
|
|||
Reference in New Issue