web/user: refactor loading of data in userinterface
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer
parent
0767107730
commit
33f547c870
|
|
@ -23,8 +23,7 @@ import "@goauthentik/elements/sidebar/SidebarItem";
|
|||
import { t } from "@lingui/macro";
|
||||
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { until } from "lit/directives/until.js";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
|
|
@ -32,7 +31,7 @@ import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
|
|||
import PFPage from "@patternfly/patternfly/components/Page/page.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
import { AdminApi, Version } from "@goauthentik/api";
|
||||
import { AdminApi, SessionUser, Version } from "@goauthentik/api";
|
||||
|
||||
autoDetectLanguage();
|
||||
|
||||
|
|
@ -49,7 +48,11 @@ export class AdminInterface extends AKElement {
|
|||
|
||||
ws: WebsocketClient;
|
||||
|
||||
private version: Promise<Version>;
|
||||
@state()
|
||||
version?: Version;
|
||||
|
||||
@state()
|
||||
user?: SessionUser;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
|
|
@ -103,12 +106,14 @@ export class AdminInterface extends AKElement {
|
|||
apiDrawerOpen: this.apiDrawerOpen,
|
||||
});
|
||||
});
|
||||
this.version = new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve();
|
||||
me().then((u) => {
|
||||
if (!u.user.isSuperuser && u.user.pk > 0) {
|
||||
window.location.assign("/if/user");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async firstUpdated(): Promise<void> {
|
||||
this.version = await new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve();
|
||||
this.user = await me();
|
||||
if (!this.user.user.isSuperuser && this.user.user.pk > 0) {
|
||||
window.location.assign("/if/user");
|
||||
}
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
|
|
@ -160,36 +165,28 @@ export class AdminInterface extends AKElement {
|
|||
|
||||
renderSidebarItems(): TemplateResult {
|
||||
return html`
|
||||
${until(
|
||||
this.version.then((version) => {
|
||||
if (version.versionCurrent !== VERSION) {
|
||||
return html`<ak-sidebar-item ?highlight=${true}>
|
||||
<span slot="label"
|
||||
>${t`A newer version of the frontend is available.`}</span
|
||||
>
|
||||
</ak-sidebar-item>`;
|
||||
}
|
||||
return html``;
|
||||
}),
|
||||
)}
|
||||
${until(
|
||||
me().then((u) => {
|
||||
if (u.original) {
|
||||
return html`<ak-sidebar-item
|
||||
?highlight=${true}
|
||||
?isAbsoluteLink=${true}
|
||||
path=${`/-/impersonation/end/?back=${encodeURIComponent(
|
||||
`${window.location.pathname}#${window.location.hash}`,
|
||||
)}`}
|
||||
>
|
||||
<span slot="label"
|
||||
>${t`You're currently impersonating ${u.user.username}. Click to stop.`}</span
|
||||
>
|
||||
</ak-sidebar-item>`;
|
||||
}
|
||||
return html``;
|
||||
}),
|
||||
)}
|
||||
${this.version?.versionCurrent !== VERSION
|
||||
? html`
|
||||
<ak-sidebar-item ?highlight=${true}>
|
||||
<span slot="label"
|
||||
>${t`A newer version of the frontend is available.`}</span
|
||||
>
|
||||
</ak-sidebar-item>
|
||||
`
|
||||
: html``}
|
||||
${this.user?.original
|
||||
? html`<ak-sidebar-item
|
||||
?highlight=${true}
|
||||
?isAbsoluteLink=${true}
|
||||
path=${`/-/impersonation/end/?back=${encodeURIComponent(
|
||||
`${window.location.pathname}#${window.location.hash}`,
|
||||
)}`}
|
||||
>
|
||||
<span slot="label"
|
||||
>${t`You're currently impersonating ${this.user.user.username}. Click to stop.`}</span
|
||||
>
|
||||
</ak-sidebar-item>`
|
||||
: html``}
|
||||
<ak-sidebar-item path="/if/user/" ?isAbsoluteLink=${true} ?highlight=${true}>
|
||||
<span slot="label">${t`User interface`}</span>
|
||||
</ak-sidebar-item>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,7 @@ import { paramURL } from "@goauthentik/elements/router/RouterOutlet";
|
|||
import { t } from "@lingui/macro";
|
||||
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
import { until } from "lit/directives/until.js";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
|
||||
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
||||
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
||||
|
|
@ -26,6 +25,8 @@ import PFList from "@patternfly/patternfly/components/List/list.css";
|
|||
import PFPage from "@patternfly/patternfly/components/Page/page.css";
|
||||
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
|
||||
|
||||
import { SessionUser } from "@goauthentik/api";
|
||||
|
||||
export function versionFamily(): string {
|
||||
const parts = VERSION.split(".");
|
||||
parts.pop();
|
||||
|
|
@ -59,19 +60,20 @@ export class AdminOverviewPage extends AKElement {
|
|||
];
|
||||
}
|
||||
|
||||
@state()
|
||||
user?: SessionUser;
|
||||
|
||||
async firstUpdated(): Promise<void> {
|
||||
this.user = await me();
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
let name = this.user?.user.username;
|
||||
if (this.user?.user.name) {
|
||||
name = this.user.user.name;
|
||||
}
|
||||
return html`<ak-page-header icon="" header="" description=${t`General system status`}>
|
||||
<span slot="header">
|
||||
${until(
|
||||
me().then((user) => {
|
||||
let name = user.user.username;
|
||||
if (user.user.name !== "") {
|
||||
name = user.user.name;
|
||||
}
|
||||
return t`Welcome, ${name}.`;
|
||||
}),
|
||||
)}
|
||||
</span>
|
||||
<span slot="header"> ${t`Welcome, ${name}.`} </span>
|
||||
</ak-page-header>
|
||||
<section class="pf-c-page__main-section">
|
||||
<div class="pf-l-grid pf-m-gutter">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
EVENT_WS_MESSAGE,
|
||||
} from "@goauthentik/common/constants";
|
||||
import { configureSentry } from "@goauthentik/common/sentry";
|
||||
import { UserDisplay, uiConfig } from "@goauthentik/common/ui/config";
|
||||
import { UIConfig, UserDisplay, uiConfig } from "@goauthentik/common/ui/config";
|
||||
import { autoDetectLanguage } from "@goauthentik/common/ui/locale";
|
||||
import { me } from "@goauthentik/common/users";
|
||||
import { first } from "@goauthentik/common/utils";
|
||||
|
|
@ -24,8 +24,7 @@ import { ROUTES } from "@goauthentik/user/Routes";
|
|||
import { t } from "@lingui/macro";
|
||||
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { until } from "lit/directives/until.js";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
||||
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
|
||||
|
|
@ -38,7 +37,7 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
|
|||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
|
||||
|
||||
import { CurrentTenant, EventsApi } from "@goauthentik/api";
|
||||
import { CurrentTenant, EventsApi, SessionUser } from "@goauthentik/api";
|
||||
|
||||
autoDetectLanguage();
|
||||
|
||||
|
|
@ -58,6 +57,12 @@ export class UserInterface extends AKElement {
|
|||
@property({ type: Number })
|
||||
notificationsCount = 0;
|
||||
|
||||
@state()
|
||||
me?: SessionUser;
|
||||
|
||||
@state()
|
||||
config?: UIConfig;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
PFBase,
|
||||
|
|
@ -121,218 +126,182 @@ export class UserInterface extends AKElement {
|
|||
window.addEventListener(EVENT_WS_MESSAGE, () => {
|
||||
this.firstUpdated();
|
||||
});
|
||||
tenant().then((tenant) => (this.tenant = tenant));
|
||||
configureSentry(true);
|
||||
}
|
||||
|
||||
firstUpdated(): void {
|
||||
me().then((user) => {
|
||||
new EventsApi(DEFAULT_CONFIG)
|
||||
.eventsNotificationsList({
|
||||
seen: false,
|
||||
ordering: "-created",
|
||||
pageSize: 1,
|
||||
user: user.user.pk,
|
||||
})
|
||||
.then((r) => {
|
||||
this.notificationsCount = r.pagination.count;
|
||||
});
|
||||
async firstUpdated(): Promise<void> {
|
||||
this.tenant = await tenant();
|
||||
this.me = await me();
|
||||
this.config = await uiConfig();
|
||||
const notifications = await new EventsApi(DEFAULT_CONFIG).eventsNotificationsList({
|
||||
seen: false,
|
||||
ordering: "-created",
|
||||
pageSize: 1,
|
||||
user: this.me.user.pk,
|
||||
});
|
||||
this.notificationsCount = notifications.pagination.count;
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`${until(
|
||||
uiConfig().then((config) => {
|
||||
return html`<div class="pf-c-page">
|
||||
<div class="background-wrapper" style="${config.theme.background}"></div>
|
||||
<header class="pf-c-page__header">
|
||||
<div class="pf-c-page__header-brand">
|
||||
<a href="#/" class="pf-c-page__header-brand-link">
|
||||
<img
|
||||
class="pf-c-brand"
|
||||
src="${first(
|
||||
this.tenant.brandingLogo,
|
||||
DefaultTenant.brandingLogo,
|
||||
)}"
|
||||
alt="${(this.tenant.brandingTitle,
|
||||
DefaultTenant.brandingTitle)}"
|
||||
/>
|
||||
if (!this.config || !this.me) {
|
||||
return html``;
|
||||
}
|
||||
let userDisplay = "";
|
||||
switch (this.config.navbar.userDisplay) {
|
||||
case UserDisplay.username:
|
||||
userDisplay = this.me.user.username;
|
||||
break;
|
||||
case UserDisplay.name:
|
||||
userDisplay = this.me.user.name;
|
||||
break;
|
||||
case UserDisplay.email:
|
||||
userDisplay = this.me.user.email || "";
|
||||
break;
|
||||
default:
|
||||
userDisplay = this.me.user.username;
|
||||
}
|
||||
return html`<div class="pf-c-page">
|
||||
<div class="background-wrapper" style="${this.config.theme.background}"></div>
|
||||
<header class="pf-c-page__header">
|
||||
<div class="pf-c-page__header-brand">
|
||||
<a href="#/" class="pf-c-page__header-brand-link">
|
||||
<img
|
||||
class="pf-c-brand"
|
||||
src="${first(this.tenant.brandingLogo, DefaultTenant.brandingLogo)}"
|
||||
alt="${(this.tenant.brandingTitle, DefaultTenant.brandingTitle)}"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pf-c-page__header-tools">
|
||||
<div class="pf-c-page__header-tools-group">
|
||||
${this.config.enabledFeatures.apiDrawer
|
||||
? html`<div
|
||||
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
||||
>
|
||||
<button
|
||||
class="pf-c-button pf-m-plain"
|
||||
type="button"
|
||||
@click=${() => {
|
||||
this.apiDrawerOpen = !this.apiDrawerOpen;
|
||||
updateURLParams({
|
||||
apiDrawerOpen: this.apiDrawerOpen,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<i class="fas fa-code" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>`
|
||||
: html``}
|
||||
${this.config.enabledFeatures.notificationDrawer
|
||||
? html`<div
|
||||
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
||||
>
|
||||
<button
|
||||
class="pf-c-button pf-m-plain"
|
||||
type="button"
|
||||
aria-label="${t`Unread notifications`}"
|
||||
@click=${() => {
|
||||
this.notificationDrawerOpen =
|
||||
!this.notificationDrawerOpen;
|
||||
updateURLParams({
|
||||
notificationDrawerOpen: this.notificationDrawerOpen,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span
|
||||
class="pf-c-notification-badge ${this.notificationsCount >
|
||||
0
|
||||
? "pf-m-unread"
|
||||
: ""}"
|
||||
>
|
||||
<i class="pf-icon-bell" aria-hidden="true"></i>
|
||||
<span class="pf-c-notification-badge__count"
|
||||
>${this.notificationsCount}</span
|
||||
>
|
||||
</span>
|
||||
</button>
|
||||
</div> `
|
||||
: html``}
|
||||
${this.config.enabledFeatures.settings
|
||||
? html` <div class="pf-c-page__header-tools-item">
|
||||
<a class="pf-c-button pf-m-plain" type="button" href="#/settings">
|
||||
<i class="fas fa-cog" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>`
|
||||
: html``}
|
||||
<div class="pf-c-page__header-tools-item">
|
||||
<a href="/flows/-/default/invalidation/" class="pf-c-button pf-m-plain">
|
||||
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pf-c-page__header-tools">
|
||||
<div class="pf-c-page__header-tools-group">
|
||||
${config.enabledFeatures.apiDrawer
|
||||
? html`<div
|
||||
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
||||
>
|
||||
<button
|
||||
class="pf-c-button pf-m-plain"
|
||||
type="button"
|
||||
@click=${() => {
|
||||
this.apiDrawerOpen = !this.apiDrawerOpen;
|
||||
updateURLParams({
|
||||
apiDrawerOpen: this.apiDrawerOpen,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<i class="fas fa-code" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>`
|
||||
: html``}
|
||||
${config.enabledFeatures.notificationDrawer
|
||||
? html`<div
|
||||
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
||||
>
|
||||
<button
|
||||
class="pf-c-button pf-m-plain"
|
||||
type="button"
|
||||
aria-label="${t`Unread notifications`}"
|
||||
@click=${() => {
|
||||
this.notificationDrawerOpen =
|
||||
!this.notificationDrawerOpen;
|
||||
updateURLParams({
|
||||
notificationDrawerOpen:
|
||||
this.notificationDrawerOpen,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span
|
||||
class="pf-c-notification-badge ${this
|
||||
.notificationsCount > 0
|
||||
? "pf-m-unread"
|
||||
: ""}"
|
||||
>
|
||||
<i class="pf-icon-bell" aria-hidden="true"></i>
|
||||
<span class="pf-c-notification-badge__count"
|
||||
>${this.notificationsCount}</span
|
||||
>
|
||||
</span>
|
||||
</button>
|
||||
</div> `
|
||||
: html``}
|
||||
${config.enabledFeatures.settings
|
||||
? html` <div class="pf-c-page__header-tools-item">
|
||||
<a
|
||||
class="pf-c-button pf-m-plain"
|
||||
type="button"
|
||||
href="#/settings"
|
||||
>
|
||||
<i class="fas fa-cog" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>`
|
||||
: html``}
|
||||
<div class="pf-c-page__header-tools-item">
|
||||
<a
|
||||
href="/flows/-/default/invalidation/"
|
||||
class="pf-c-button pf-m-plain"
|
||||
>
|
||||
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
${until(
|
||||
me().then((u) => {
|
||||
if (!u.user.isSuperuser) return html``;
|
||||
return html`
|
||||
<a
|
||||
class="pf-c-button pf-m-primary pf-m-small pf-u-display-none pf-u-display-block-on-md"
|
||||
href="/if/admin"
|
||||
>
|
||||
${t`Admin interface`}
|
||||
</a>
|
||||
`;
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
${until(
|
||||
me().then((u) => {
|
||||
if (u.original) {
|
||||
return html`<div class="pf-c-page__header-tools">
|
||||
<div class="pf-c-page__header-tools-group">
|
||||
<a
|
||||
class="pf-c-button pf-m-warning pf-m-small"
|
||||
href=${`/-/impersonation/end/?back=${encodeURIComponent(
|
||||
`${window.location.pathname}#${window.location.hash}`,
|
||||
)}`}
|
||||
>
|
||||
${t`Stop impersonation`}
|
||||
</a>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
return html``;
|
||||
}),
|
||||
)}
|
||||
<div class="pf-c-page__header-tools-group">
|
||||
<div
|
||||
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
||||
>
|
||||
${until(
|
||||
me().then((me) => {
|
||||
switch (config.navbar.userDisplay) {
|
||||
case UserDisplay.username:
|
||||
return me.user.username;
|
||||
case UserDisplay.name:
|
||||
return me.user.name;
|
||||
case UserDisplay.email:
|
||||
return me.user.email;
|
||||
default:
|
||||
return me.user.username;
|
||||
}
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
${until(
|
||||
me().then((me) => {
|
||||
return html`<img
|
||||
class="pf-c-avatar"
|
||||
src=${me.user.avatar}
|
||||
alt="${t`Avatar image`}"
|
||||
/>`;
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
<div class="pf-c-page__drawer">
|
||||
<div
|
||||
class="pf-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
|
||||
? "pf-m-expanded"
|
||||
: "pf-m-collapsed"}"
|
||||
>
|
||||
<div class="pf-c-drawer__main">
|
||||
<div class="pf-c-drawer__content">
|
||||
<div class="pf-c-drawer__body">
|
||||
<main class="pf-c-page__main">
|
||||
<ak-router-outlet
|
||||
role="main"
|
||||
class="pf-l-bullseye__item pf-c-page__main"
|
||||
tabindex="-1"
|
||||
id="main-content"
|
||||
defaultUrl="/library"
|
||||
.routes=${ROUTES}
|
||||
>
|
||||
</ak-router-outlet>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<ak-notification-drawer
|
||||
class="pf-c-drawer__panel pf-m-width-33 ${this
|
||||
.notificationDrawerOpen
|
||||
? ""
|
||||
: "display-none"}"
|
||||
?hidden=${!this.notificationDrawerOpen}
|
||||
></ak-notification-drawer>
|
||||
<ak-api-drawer
|
||||
class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen
|
||||
? ""
|
||||
: "display-none"}"
|
||||
?hidden=${!this.apiDrawerOpen}
|
||||
></ak-api-drawer>
|
||||
</div>
|
||||
${this.me.user.isSuperuser
|
||||
? html`<a
|
||||
class="pf-c-button pf-m-primary pf-m-small pf-u-display-none pf-u-display-block-on-md"
|
||||
href="/if/admin"
|
||||
>
|
||||
${t`Admin interface`}
|
||||
</a>`
|
||||
: html``}
|
||||
</div>
|
||||
${this.me.original
|
||||
? html`<div class="pf-c-page__header-tools">
|
||||
<div class="pf-c-page__header-tools-group">
|
||||
<a
|
||||
class="pf-c-button pf-m-warning pf-m-small"
|
||||
href=${`/-/impersonation/end/?back=${encodeURIComponent(
|
||||
`${window.location.pathname}#${window.location.hash}`,
|
||||
)}`}
|
||||
>
|
||||
${t`Stop impersonation`}
|
||||
</a>
|
||||
</div>
|
||||
</div>`
|
||||
: html``}
|
||||
<div class="pf-c-page__header-tools-group">
|
||||
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md">
|
||||
${userDisplay}
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}),
|
||||
)}`;
|
||||
<img class="pf-c-avatar" src=${this.me.user.avatar} alt="${t`Avatar image`}" />
|
||||
</div>
|
||||
</header>
|
||||
<div class="pf-c-page__drawer">
|
||||
<div
|
||||
class="pf-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
|
||||
? "pf-m-expanded"
|
||||
: "pf-m-collapsed"}"
|
||||
>
|
||||
<div class="pf-c-drawer__main">
|
||||
<div class="pf-c-drawer__content">
|
||||
<div class="pf-c-drawer__body">
|
||||
<main class="pf-c-page__main">
|
||||
<ak-router-outlet
|
||||
role="main"
|
||||
class="pf-l-bullseye__item pf-c-page__main"
|
||||
tabindex="-1"
|
||||
id="main-content"
|
||||
defaultUrl="/library"
|
||||
.routes=${ROUTES}
|
||||
>
|
||||
</ak-router-outlet>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<ak-notification-drawer
|
||||
class="pf-c-drawer__panel pf-m-width-33 ${this.notificationDrawerOpen
|
||||
? ""
|
||||
: "display-none"}"
|
||||
?hidden=${!this.notificationDrawerOpen}
|
||||
></ak-notification-drawer>
|
||||
<ak-api-drawer
|
||||
class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen
|
||||
? ""
|
||||
: "display-none"}"
|
||||
?hidden=${!this.apiDrawerOpen}
|
||||
></ak-api-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue