web: migrate banner to sidebar

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/Banner.ts

@@ -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>`;
-    }
-
-}

web/src/elements/sidebar/Sidebar.ts

@@ -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,

web/src/elements/sidebar/SidebarItem.ts

@@ -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" : ""}">
+            ${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>`;
     }
 }

web/src/flows/stages/identification/IdentificationStage.ts

@@ -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;

web/src/interfaces/AdminInterface.ts

@@ -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>

web/src/locales/en.po

@@ -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
+#: src/interfaces/AdminInterface.ts
-msgid "You're currently impersonating {0}."
+msgid "You're currently impersonating {0}. Click to stop."
-msgstr "You're currently impersonating {0}."
+msgstr "You're currently impersonating {0}. Click to stop."
 
 #: src/pages/stages/password/PasswordStageForm.ts
 msgid "authentik Builtin Database"

web/src/locales/pseudo-LOCALE.po

@@ -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 ""
 
 #: