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 { t } from "@lingui/macro";
|
||||||
|
|
||||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||||
import { customElement, property } from "lit/decorators.js";
|
import { customElement, property, state } from "lit/decorators.js";
|
||||||
import { until } from "lit/directives/until.js";
|
|
||||||
|
|
||||||
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
||||||
import PFButton from "@patternfly/patternfly/components/Button/button.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 PFPage from "@patternfly/patternfly/components/Page/page.css";
|
||||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||||
|
|
||||||
import { AdminApi, Version } from "@goauthentik/api";
|
import { AdminApi, SessionUser, Version } from "@goauthentik/api";
|
||||||
|
|
||||||
autoDetectLanguage();
|
autoDetectLanguage();
|
||||||
|
|
||||||
|
|
@ -49,7 +48,11 @@ export class AdminInterface extends AKElement {
|
||||||
|
|
||||||
ws: WebsocketClient;
|
ws: WebsocketClient;
|
||||||
|
|
||||||
private version: Promise<Version>;
|
@state()
|
||||||
|
version?: Version;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
user?: SessionUser;
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult[] {
|
||||||
return [
|
return [
|
||||||
|
|
@ -103,12 +106,14 @@ export class AdminInterface extends AKElement {
|
||||||
apiDrawerOpen: this.apiDrawerOpen,
|
apiDrawerOpen: this.apiDrawerOpen,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.version = new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve();
|
}
|
||||||
me().then((u) => {
|
|
||||||
if (!u.user.isSuperuser && u.user.pk > 0) {
|
async firstUpdated(): Promise<void> {
|
||||||
window.location.assign("/if/user");
|
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 {
|
render(): TemplateResult {
|
||||||
|
|
@ -160,36 +165,28 @@ export class AdminInterface extends AKElement {
|
||||||
|
|
||||||
renderSidebarItems(): TemplateResult {
|
renderSidebarItems(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
${until(
|
${this.version?.versionCurrent !== VERSION
|
||||||
this.version.then((version) => {
|
? html`
|
||||||
if (version.versionCurrent !== VERSION) {
|
<ak-sidebar-item ?highlight=${true}>
|
||||||
return html`<ak-sidebar-item ?highlight=${true}>
|
<span slot="label"
|
||||||
<span slot="label"
|
>${t`A newer version of the frontend is available.`}</span
|
||||||
>${t`A newer version of the frontend is available.`}</span
|
>
|
||||||
>
|
</ak-sidebar-item>
|
||||||
</ak-sidebar-item>`;
|
`
|
||||||
}
|
: html``}
|
||||||
return html``;
|
${this.user?.original
|
||||||
}),
|
? html`<ak-sidebar-item
|
||||||
)}
|
?highlight=${true}
|
||||||
${until(
|
?isAbsoluteLink=${true}
|
||||||
me().then((u) => {
|
path=${`/-/impersonation/end/?back=${encodeURIComponent(
|
||||||
if (u.original) {
|
`${window.location.pathname}#${window.location.hash}`,
|
||||||
return html`<ak-sidebar-item
|
)}`}
|
||||||
?highlight=${true}
|
>
|
||||||
?isAbsoluteLink=${true}
|
<span slot="label"
|
||||||
path=${`/-/impersonation/end/?back=${encodeURIComponent(
|
>${t`You're currently impersonating ${this.user.user.username}. Click to stop.`}</span
|
||||||
`${window.location.pathname}#${window.location.hash}`,
|
>
|
||||||
)}`}
|
</ak-sidebar-item>`
|
||||||
>
|
: html``}
|
||||||
<span slot="label"
|
|
||||||
>${t`You're currently impersonating ${u.user.username}. Click to stop.`}</span
|
|
||||||
>
|
|
||||||
</ak-sidebar-item>`;
|
|
||||||
}
|
|
||||||
return html``;
|
|
||||||
}),
|
|
||||||
)}
|
|
||||||
<ak-sidebar-item path="/if/user/" ?isAbsoluteLink=${true} ?highlight=${true}>
|
<ak-sidebar-item path="/if/user/" ?isAbsoluteLink=${true} ?highlight=${true}>
|
||||||
<span slot="label">${t`User interface`}</span>
|
<span slot="label">${t`User interface`}</span>
|
||||||
</ak-sidebar-item>
|
</ak-sidebar-item>
|
||||||
|
|
|
||||||
|
|
@ -17,8 +17,7 @@ import { paramURL } from "@goauthentik/elements/router/RouterOutlet";
|
||||||
import { t } from "@lingui/macro";
|
import { t } from "@lingui/macro";
|
||||||
|
|
||||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||||
import { customElement } from "lit/decorators.js";
|
import { customElement, state } from "lit/decorators.js";
|
||||||
import { until } from "lit/directives/until.js";
|
|
||||||
|
|
||||||
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
||||||
import PFContent from "@patternfly/patternfly/components/Content/content.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 PFPage from "@patternfly/patternfly/components/Page/page.css";
|
||||||
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
|
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
|
||||||
|
|
||||||
|
import { SessionUser } from "@goauthentik/api";
|
||||||
|
|
||||||
export function versionFamily(): string {
|
export function versionFamily(): string {
|
||||||
const parts = VERSION.split(".");
|
const parts = VERSION.split(".");
|
||||||
parts.pop();
|
parts.pop();
|
||||||
|
|
@ -59,19 +60,20 @@ export class AdminOverviewPage extends AKElement {
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@state()
|
||||||
|
user?: SessionUser;
|
||||||
|
|
||||||
|
async firstUpdated(): Promise<void> {
|
||||||
|
this.user = await me();
|
||||||
|
}
|
||||||
|
|
||||||
render(): TemplateResult {
|
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`}>
|
return html`<ak-page-header icon="" header="" description=${t`General system status`}>
|
||||||
<span slot="header">
|
<span slot="header"> ${t`Welcome, ${name}.`} </span>
|
||||||
${until(
|
|
||||||
me().then((user) => {
|
|
||||||
let name = user.user.username;
|
|
||||||
if (user.user.name !== "") {
|
|
||||||
name = user.user.name;
|
|
||||||
}
|
|
||||||
return t`Welcome, ${name}.`;
|
|
||||||
}),
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</ak-page-header>
|
</ak-page-header>
|
||||||
<section class="pf-c-page__main-section">
|
<section class="pf-c-page__main-section">
|
||||||
<div class="pf-l-grid pf-m-gutter">
|
<div class="pf-l-grid pf-m-gutter">
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import {
|
||||||
EVENT_WS_MESSAGE,
|
EVENT_WS_MESSAGE,
|
||||||
} from "@goauthentik/common/constants";
|
} from "@goauthentik/common/constants";
|
||||||
import { configureSentry } from "@goauthentik/common/sentry";
|
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 { autoDetectLanguage } from "@goauthentik/common/ui/locale";
|
||||||
import { me } from "@goauthentik/common/users";
|
import { me } from "@goauthentik/common/users";
|
||||||
import { first } from "@goauthentik/common/utils";
|
import { first } from "@goauthentik/common/utils";
|
||||||
|
|
@ -24,8 +24,7 @@ import { ROUTES } from "@goauthentik/user/Routes";
|
||||||
import { t } from "@lingui/macro";
|
import { t } from "@lingui/macro";
|
||||||
|
|
||||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||||
import { customElement, property } from "lit/decorators.js";
|
import { customElement, property, state } from "lit/decorators.js";
|
||||||
import { until } from "lit/directives/until.js";
|
|
||||||
|
|
||||||
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
||||||
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.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 PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||||
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
|
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
|
||||||
|
|
||||||
import { CurrentTenant, EventsApi } from "@goauthentik/api";
|
import { CurrentTenant, EventsApi, SessionUser } from "@goauthentik/api";
|
||||||
|
|
||||||
autoDetectLanguage();
|
autoDetectLanguage();
|
||||||
|
|
||||||
|
|
@ -58,6 +57,12 @@ export class UserInterface extends AKElement {
|
||||||
@property({ type: Number })
|
@property({ type: Number })
|
||||||
notificationsCount = 0;
|
notificationsCount = 0;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
me?: SessionUser;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
config?: UIConfig;
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult[] {
|
||||||
return [
|
return [
|
||||||
PFBase,
|
PFBase,
|
||||||
|
|
@ -121,218 +126,182 @@ export class UserInterface extends AKElement {
|
||||||
window.addEventListener(EVENT_WS_MESSAGE, () => {
|
window.addEventListener(EVENT_WS_MESSAGE, () => {
|
||||||
this.firstUpdated();
|
this.firstUpdated();
|
||||||
});
|
});
|
||||||
tenant().then((tenant) => (this.tenant = tenant));
|
|
||||||
configureSentry(true);
|
configureSentry(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(): void {
|
async firstUpdated(): Promise<void> {
|
||||||
me().then((user) => {
|
this.tenant = await tenant();
|
||||||
new EventsApi(DEFAULT_CONFIG)
|
this.me = await me();
|
||||||
.eventsNotificationsList({
|
this.config = await uiConfig();
|
||||||
seen: false,
|
const notifications = await new EventsApi(DEFAULT_CONFIG).eventsNotificationsList({
|
||||||
ordering: "-created",
|
seen: false,
|
||||||
pageSize: 1,
|
ordering: "-created",
|
||||||
user: user.user.pk,
|
pageSize: 1,
|
||||||
})
|
user: this.me.user.pk,
|
||||||
.then((r) => {
|
|
||||||
this.notificationsCount = r.pagination.count;
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
this.notificationsCount = notifications.pagination.count;
|
||||||
}
|
}
|
||||||
|
|
||||||
render(): TemplateResult {
|
render(): TemplateResult {
|
||||||
return html`${until(
|
if (!this.config || !this.me) {
|
||||||
uiConfig().then((config) => {
|
return html``;
|
||||||
return html`<div class="pf-c-page">
|
}
|
||||||
<div class="background-wrapper" style="${config.theme.background}"></div>
|
let userDisplay = "";
|
||||||
<header class="pf-c-page__header">
|
switch (this.config.navbar.userDisplay) {
|
||||||
<div class="pf-c-page__header-brand">
|
case UserDisplay.username:
|
||||||
<a href="#/" class="pf-c-page__header-brand-link">
|
userDisplay = this.me.user.username;
|
||||||
<img
|
break;
|
||||||
class="pf-c-brand"
|
case UserDisplay.name:
|
||||||
src="${first(
|
userDisplay = this.me.user.name;
|
||||||
this.tenant.brandingLogo,
|
break;
|
||||||
DefaultTenant.brandingLogo,
|
case UserDisplay.email:
|
||||||
)}"
|
userDisplay = this.me.user.email || "";
|
||||||
alt="${(this.tenant.brandingTitle,
|
break;
|
||||||
DefaultTenant.brandingTitle)}"
|
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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="pf-c-page__header-tools">
|
${this.me.user.isSuperuser
|
||||||
<div class="pf-c-page__header-tools-group">
|
? html`<a
|
||||||
${config.enabledFeatures.apiDrawer
|
class="pf-c-button pf-m-primary pf-m-small pf-u-display-none pf-u-display-block-on-md"
|
||||||
? html`<div
|
href="/if/admin"
|
||||||
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
>
|
||||||
>
|
${t`Admin interface`}
|
||||||
<button
|
</a>`
|
||||||
class="pf-c-button pf-m-plain"
|
: html``}
|
||||||
type="button"
|
</div>
|
||||||
@click=${() => {
|
${this.me.original
|
||||||
this.apiDrawerOpen = !this.apiDrawerOpen;
|
? html`<div class="pf-c-page__header-tools">
|
||||||
updateURLParams({
|
<div class="pf-c-page__header-tools-group">
|
||||||
apiDrawerOpen: this.apiDrawerOpen,
|
<a
|
||||||
});
|
class="pf-c-button pf-m-warning pf-m-small"
|
||||||
}}
|
href=${`/-/impersonation/end/?back=${encodeURIComponent(
|
||||||
>
|
`${window.location.pathname}#${window.location.hash}`,
|
||||||
<i class="fas fa-code" aria-hidden="true"></i>
|
)}`}
|
||||||
</button>
|
>
|
||||||
</div>`
|
${t`Stop impersonation`}
|
||||||
: html``}
|
</a>
|
||||||
${config.enabledFeatures.notificationDrawer
|
</div>
|
||||||
? html`<div
|
</div>`
|
||||||
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
: html``}
|
||||||
>
|
<div class="pf-c-page__header-tools-group">
|
||||||
<button
|
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md">
|
||||||
class="pf-c-button pf-m-plain"
|
${userDisplay}
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</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