trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web: migrate banner to sidebar

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-06-13 22:55:41 +02:00
parent 09cd8f8f63
commit 31fc4d1cb9
7 changed files with 44 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
web/src/elements/Banner.ts
View file

@ -1,27 +0,0 @@
import { customElement, CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
import AKGlobal from "../authentik.css";
@customElement("ak-banner")
export class Banner extends LitElement {
@property()
level = "pf-m-warning";
static get styles(): CSSResult[] {
return [PFBase, PFBanner, PFFlex, AKGlobal];
}
render(): TemplateResult {
return html`<div class="pf-c-banner ${this.level} pf-m-sticky">
<div class="pf-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap" style="height: 100%;">
<div class="pf-u-display-none pf-u-display-block-on-lg">
<slot></slot>
</div>
</div>
</div>`;
}
}

1
web/src/elements/sidebar/Sidebar.ts
View file

@ -19,7 +19,6 @@ export class Sidebar extends LitElement {
css`
:host {
z-index: 100;
box-shadow: none !important;
}
.pf-c-nav__link.pf-m-current::after,
.pf-c-nav__link.pf-m-current:hover::after,

25
web/src/elements/sidebar/SidebarItem.ts
View file

@ -21,6 +21,13 @@ export class SidebarItem extends LitElement {
z-index: 100;
box-shadow: none !important;
}
:host([highlight]) .pf-c-nav__item {
background-color: var(--ak-accent);
margin: 16px;
}
:host([highlight]) .pf-c-nav__item .pf-c-nav__link {
padding-left: 0.5rem;
}
.pf-c-nav__link.pf-m-current::after,
.pf-c-nav__link.pf-m-current:hover::after,
.pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
@ -75,6 +82,12 @@ export class SidebarItem extends LitElement {
@property({ type: Boolean })
isActive = false;
@property({ type: Boolean })
isAbsoluteLink?: boolean;
@property({ type: Boolean })
highlight?: boolean;
parent?: SidebarItem;
get childItems(): SidebarItem[] {
@ -159,9 +172,15 @@ export class SidebarItem extends LitElement {
</li>`;
}
return html`<li class="pf-c-nav__item">
<a href="#${this.path}" class="pf-c-nav__link ${this.isActive ? "pf-m-current" : ""}">
<slot name="label"></slot>
</a>
${this.path ? html`
<a href="${this.isAbsoluteLink ? '' : '#'}${this.path}" class="pf-c-nav__link ${this.isActive ? "pf-m-current" : ""}">
<slot name="label"></slot>
</a>
` : html`
<span class="pf-c-nav__link">
<slot name="label"></slot>
</span>
`}
</li>`;
}
}

2
web/src/flows/stages/identification/IdentificationStage.ts
View file

@ -21,7 +21,7 @@ export const PasswordManagerPrefill: {
totp: undefined,
};
declare module "Intl" {
declare module Intl {
class ListFormat {
constructor(locale: string, args: { [key: string]: string });
public format: (items: string[]) => string;

39
web/src/interfaces/AdminInterface.ts
View file

@ -13,7 +13,6 @@ import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
import "../elements/router/RouterOutlet";
import "../elements/messages/MessageContainer";
import "../elements/notifications/NotificationDrawer";
import "../elements/Banner";
import "../elements/sidebar/Sidebar";
import { until } from "lit-html/directives/until";
import { EVENT_NOTIFICATION_TOGGLE, EVENT_SIDEBAR_TOGGLE, VERSION } from "../constants";
@ -54,28 +53,6 @@ export class AdminInterface extends LitElement {
render(): TemplateResult {
return html`
${until(new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve().then(version => {
if (version.versionCurrent !== VERSION) {
return html`<ak-banner>
${t`A newer version of the frontend is available.`}
<button @click=${() => { window.location.reload(true); }}>
${t`Reload`}
</button>
</ak-banner>`;
}
return html``;
}))}
${until(me().then((u) => {
if (u.original) {
return html`<ak-banner>
${t`You're currently impersonating ${u.user.username}.`}
<a href=${`/-/impersonation/end/?back=${window.location.pathname}%23${window.location.hash}`}>
${t`Stop impersonation`}
</a>
</ak-banner>`;
}
return html``;
}))}
<div class="pf-c-page">
<ak-sidebar class="pf-c-page__sidebar ${this.sidebarOpen ? "pf-m-expanded" : "pf-m-collapsed"}">
${this.renderSidebarItems()}
@ -104,6 +81,22 @@ export class AdminInterface extends LitElement {
return me().then(u => u.user.isSuperuser || false);
};
return html`
${until(new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve().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=${window.location.pathname}%23${window.location.hash}`}>
<span slot="label">${t`You're currently impersonating ${u.user.username}. Click to stop.`}</span>
</ak-sidebar-item>`;
}
return html``;
}))}
<ak-sidebar-item path="/library">
<span slot="label">${t`Library`}</span>
</ak-sidebar-item>

24
web/src/locales/en.po
View file

@ -32,7 +32,7 @@ msgstr "6 digits, widely compatible"
msgid "8 digits, not compatible with apps like Google Authenticator"
msgstr "8 digits, not compatible with apps like Google Authenticator"
#: src/interfaces/Interface.ts
#: src/interfaces/AdminInterface.ts
msgid "A newer version of the frontend is available."
msgstr "A newer version of the frontend is available."
@ -1286,14 +1286,6 @@ msgstr "Email address"
msgid "Email info:"
msgstr "Email info:"
#: src/flows/stages/identification/IdentificationStage.ts
msgid "Email or username"
msgstr "Email or username"
#: src/flows/stages/identification/IdentificationStage.ts
msgid "Email, UPN or username"
msgstr "Email, UPN or username"
#: src/pages/stages/prompt/PromptForm.ts
msgid "Email: Text field with Email type."
msgstr "Email: Text field with Email type."
@ -2935,10 +2927,6 @@ msgstr "Regular expressions for which authentication is not required. Each new l
msgid "Related"
msgstr "Related"
#: src/interfaces/Interface.ts
msgid "Reload"
msgstr "Reload"
#: src/pages/stages/user_logout/UserLogoutStageForm.ts
msgid "Remove the user from the current session."
msgstr "Remove the user from the current session."
@ -3416,10 +3404,6 @@ msgstr "Status: Disabled"
msgid "Status: Enabled"
msgstr "Status: Enabled"
#: src/interfaces/Interface.ts
msgid "Stop impersonation"
msgstr "Stop impersonation"
#: src/pages/events/EventInfo.ts
#: src/pages/stages/email/EmailStageForm.ts
msgid "Subject"
@ -4529,9 +4513,9 @@ msgstr "Yes"
msgid "You can only select providers that match the type of the outpost."
msgstr "You can only select providers that match the type of the outpost."
#: src/interfaces/Interface.ts
msgid "You're currently impersonating {0}."
msgstr "You're currently impersonating {0}."
#: src/interfaces/AdminInterface.ts
msgid "You're currently impersonating {0}. Click to stop."
msgstr "You're currently impersonating {0}. Click to stop."
#: src/pages/stages/password/PasswordStageForm.ts
msgid "authentik Builtin Database"

18
web/src/locales/pseudo-LOCALE.po
View file

@ -1278,14 +1278,6 @@ msgstr ""
msgid "Email info:"
msgstr ""
#:
msgid "Email or username"
msgstr ""
#:
msgid "Email, UPN or username"
msgstr ""
#:
msgid "Email: Text field with Email type."
msgstr ""
@ -2927,10 +2919,6 @@ msgstr ""
msgid "Related"
msgstr ""
#:
msgid "Reload"
msgstr ""
#:
msgid "Remove the user from the current session."
msgstr ""
@ -3408,10 +3396,6 @@ msgstr ""
msgid "Status: Enabled"
msgstr ""
#:
msgid "Stop impersonation"
msgstr ""
#:
#:
msgid "Subject"
@ -4516,7 +4500,7 @@ msgid "You can only select providers that match the type of the outpost."
msgstr ""
#:
msgid "You're currently impersonating {0}."
msgid "You're currently impersonating {0}. Click to stop."
msgstr ""
#: