diff --git a/web/src/admin/AdminInterface.ts b/web/src/admin/AdminInterface.ts index 7d5f4ca19..2a1596b80 100644 --- a/web/src/admin/AdminInterface.ts +++ b/web/src/admin/AdminInterface.ts @@ -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; + @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 { + 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` - ${t`A newer version of the frontend is available.`} - `; - } - return html``; - }), - )} - ${until( - me().then((u) => { - if (u.original) { - return html` - ${t`You're currently impersonating ${u.user.username}. Click to stop.`} - `; - } - return html``; - }), - )} + ${this.version?.versionCurrent !== VERSION + ? html` + + ${t`A newer version of the frontend is available.`} + + ` + : html``} + ${this.user?.original + ? html` + ${t`You're currently impersonating ${this.user.user.username}. Click to stop.`} + ` + : html``} ${t`User interface`} diff --git a/web/src/admin/admin-overview/AdminOverviewPage.ts b/web/src/admin/admin-overview/AdminOverviewPage.ts index 933ac9b7d..c02222a0f 100644 --- a/web/src/admin/admin-overview/AdminOverviewPage.ts +++ b/web/src/admin/admin-overview/AdminOverviewPage.ts @@ -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 { + this.user = await me(); + } + render(): TemplateResult { + let name = this.user?.user.username; + if (this.user?.user.name) { + name = this.user.user.name; + } return html` - - ${until( - me().then((user) => { - let name = user.user.username; - if (user.user.name !== "") { - name = user.user.name; - } - return t`Welcome, ${name}.`; - }), - )} - + ${t`Welcome, ${name}.`}
diff --git a/web/src/user/UserInterface.ts b/web/src/user/UserInterface.ts index 61bd09038..986139a7f 100644 --- a/web/src/user/UserInterface.ts +++ b/web/src/user/UserInterface.ts @@ -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 { + 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`
-
-
-
- - ${(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`
+
+
+
+ + ${(this.tenant.brandingTitle, DefaultTenant.brandingTitle)} + +
+
+
+ ${this.config.enabledFeatures.apiDrawer + ? html`
+ +
` + : html``} + ${this.config.enabledFeatures.notificationDrawer + ? html`
+ +
` + : html``} + ${this.config.enabledFeatures.settings + ? html`
+ + + +
` + : html``} +
+ +
-
-
- ${config.enabledFeatures.apiDrawer - ? html`
- -
` - : html``} - ${config.enabledFeatures.notificationDrawer - ? html`
- -
` - : html``} - ${config.enabledFeatures.settings - ? html`
- - - -
` - : html``} -
- - - -
- ${until( - me().then((u) => { - if (!u.user.isSuperuser) return html``; - return html` - - ${t`Admin interface`} - - `; - }), - )} -
- ${until( - me().then((u) => { - if (u.original) { - return html`
-
- - ${t`Stop impersonation`} - -
-
`; - } - return html``; - }), - )} -
-
- ${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; - } - }), - )} -
-
- ${until( - me().then((me) => { - return html`${t`Avatar image`}`; - }), - )} -
-
-
-
-
-
-
-
- - -
-
-
- - -
+ ${this.me.user.isSuperuser + ? html` + ${t`Admin interface`} + ` + : html``} +
+ ${this.me.original + ? html`
+
+ + ${t`Stop impersonation`} + +
+
` + : html``} +
+
+ ${userDisplay}
-
`; - }), - )}`; + ${t`Avatar image`} +
+
+
+
+
+
+
+
+ + +
+
+
+ + +
+
+
+
`; } }