interface split (#943)

web/src/interfaces/AdminInterface.ts

@@ -33,6 +33,7 @@ import {
 import { AdminApi, Version } from "@goauthentik/api";
 import { DEFAULT_CONFIG } from "../api/Config";
 import { WebsocketClient } from "../common/ws";
+import { ROUTES } from "../routesAdmin";
 
 @customElement("ak-interface-admin")
 export class AdminInterface extends LitElement {
@@ -110,7 +111,8 @@ export class AdminInterface extends LitElement {
                                         class="pf-c-page__main"
                                         tabindex="-1"
                                         id="main-content"
-                                        defaultUrl="/library"
+                                        defaultUrl="/administration/overview"
+                                        .routes=${ROUTES}
                                     >
                                     </ak-router-outlet>
                                 </main>
@@ -135,9 +137,11 @@ export class AdminInterface extends LitElement {
     }
 
     renderSidebarItems(): TemplateResult {
-        const superUserCondition = () => {
-            return me().then((u) => u.user.isSuperuser || false);
-        };
+        me().then((u) => {
+            if (!u.user.isSuperuser) {
+                window.location.assign("/if/user");
+            }
+        });
         return html`
             ${until(
                 this.version.then((version) => {
@@ -167,19 +171,16 @@ export class AdminInterface extends LitElement {
                     return html``;
                 }),
             )}
-            <ak-sidebar-item path="/library">
-                <span slot="label">${t`Library`}</span>
+            <ak-sidebar-item path="/if/user/" ?isAbsoluteLink=${true} ?highlight=${true}>
+                <span slot="label">${t`Go to user interface`}</span>
             </ak-sidebar-item>
-            <ak-sidebar-item .condition=${superUserCondition}>
-                <span slot="label">${t`Monitor`}</span>
-                <ak-sidebar-item path="/administration/overview">
-                    <span slot="label">${t`Overview`}</span>
-                </ak-sidebar-item>
-                <ak-sidebar-item path="/administration/system-tasks">
-                    <span slot="label">${t`System Tasks`}</span>
-                </ak-sidebar-item>
+            <ak-sidebar-item path="/administration/overview">
+                <span slot="label">${t`Overview`}</span>
             </ak-sidebar-item>
-            <ak-sidebar-item .condition=${superUserCondition}>
+            <ak-sidebar-item path="/administration/system-tasks">
+                <span slot="label">${t`System Tasks`}</span>
+            </ak-sidebar-item>
+            <ak-sidebar-item>
                 <span slot="label">${t`Resources`}</span>
                 <ak-sidebar-item
                     path="/core/applications"
@@ -203,7 +204,7 @@ export class AdminInterface extends LitElement {
                     <span slot="label">${t`Tenants`}</span>
                 </ak-sidebar-item>
             </ak-sidebar-item>
-            <ak-sidebar-item .condition=${superUserCondition}>
+            <ak-sidebar-item>
                 <span slot="label">${t`Outposts`}</span>
                 <ak-sidebar-item path="/outpost/outposts">
                     <span slot="label">${t`Outposts`}</span>
@@ -212,7 +213,7 @@ export class AdminInterface extends LitElement {
                     <span slot="label">${t`Integrations`}</span>
                 </ak-sidebar-item>
             </ak-sidebar-item>
-            <ak-sidebar-item .condition=${superUserCondition}>
+            <ak-sidebar-item>
                 <span slot="label">${t`Events`}</span>
                 <ak-sidebar-item
                     path="/events/log"
@@ -227,7 +228,7 @@ export class AdminInterface extends LitElement {
                     <span slot="label">${t`Notification Transports`}</span>
                 </ak-sidebar-item>
             </ak-sidebar-item>
-            <ak-sidebar-item .condition=${superUserCondition}>
+            <ak-sidebar-item>
                 <span slot="label">${t`Customisation`}</span>
                 <ak-sidebar-item path="/policy/policies">
                     <span slot="label">${t`Policies`}</span>
@@ -242,7 +243,7 @@ export class AdminInterface extends LitElement {
                     <span slot="label">${t`Property Mappings`}</span>
                 </ak-sidebar-item>
             </ak-sidebar-item>
-            <ak-sidebar-item .condition=${superUserCondition}>
+            <ak-sidebar-item>
                 <span slot="label">${t`Flows`}</span>
                 <ak-sidebar-item
                     path="/flow/flows"
@@ -260,7 +261,7 @@ export class AdminInterface extends LitElement {
                     <span slot="label">${t`Invitations`}</span>
                 </ak-sidebar-item>
             </ak-sidebar-item>
-            <ak-sidebar-item .condition=${superUserCondition}>
+            <ak-sidebar-item>
                 <span slot="label">${t`Identity & Cryptography`}</span>
                 <ak-sidebar-item
                     path="/identity/users"

web/src/interfaces/UserInterface.ts

@@ -0,0 +1,176 @@
+import "../elements/messages/MessageContainer";
+import {
+    css,
+    CSSResult,
+    customElement,
+    html,
+    LitElement,
+    property,
+    TemplateResult,
+} from "lit-element";
+import { me } from "../api/Users";
+import "./locale";
+import "../elements/sidebar/SidebarItem";
+import { t } from "@lingui/macro";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
+import AKGlobal from "../authentik.css";
+
+import "../elements/router/RouterOutlet";
+import "../elements/messages/MessageContainer";
+import "../elements/notifications/NotificationDrawer";
+import "../elements/sidebar/Sidebar";
+import { until } from "lit-html/directives/until";
+import {
+    EVENT_API_DRAWER_TOGGLE,
+    EVENT_NOTIFICATION_DRAWER_TOGGLE,
+    EVENT_SIDEBAR_TOGGLE,
+    VERSION,
+} from "../constants";
+import { AdminApi, Version } from "@goauthentik/api";
+import { DEFAULT_CONFIG } from "../api/Config";
+import { WebsocketClient } from "../common/ws";
+import { ROUTES } from "../routesUser";
+
+@customElement("ak-interface-user")
+export class UserInterface extends LitElement {
+    @property({ type: Boolean })
+    sidebarOpen = true;
+
+    @property({ type: Boolean })
+    notificationOpen = false;
+
+    @property({ type: Boolean })
+    apiDrawerOpen = false;
+
+    ws: WebsocketClient;
+
+    private version: Promise<Version>;
+
+    static get styles(): CSSResult[] {
+        return [
+            PFBase,
+            PFPage,
+            PFButton,
+            PFDrawer,
+            AKGlobal,
+            css`
+                .pf-c-page__main,
+                .pf-c-drawer__content,
+                .pf-c-page__drawer {
+                    z-index: auto !important;
+                }
+                .display-none {
+                    display: none;
+                }
+            `,
+        ];
+    }
+
+    constructor() {
+        super();
+        this.ws = new WebsocketClient();
+        this.sidebarOpen = window.innerWidth >= 1280;
+        window.addEventListener("resize", () => {
+            this.sidebarOpen = window.innerWidth >= 1280;
+        });
+        window.addEventListener(EVENT_SIDEBAR_TOGGLE, () => {
+            this.sidebarOpen = !this.sidebarOpen;
+        });
+        window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => {
+            this.notificationOpen = !this.notificationOpen;
+        });
+        window.addEventListener(EVENT_API_DRAWER_TOGGLE, () => {
+            this.apiDrawerOpen = !this.apiDrawerOpen;
+        });
+        this.version = new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve();
+    }
+
+    render(): TemplateResult {
+        return html` <div class="pf-c-page">
+            <ak-sidebar
+                class="pf-c-page__sidebar ${this.sidebarOpen ? "pf-m-expanded" : "pf-m-collapsed"}"
+            >
+                ${this.renderSidebarItems()}
+            </ak-sidebar>
+            <div class="pf-c-page__drawer">
+                <div
+                    class="pf-c-drawer ${this.notificationOpen || 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-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.notificationOpen
+                                ? ""
+                                : "display-none"}"
+                            ?hidden=${!this.notificationOpen}
+                        ></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>`;
+    }
+
+    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=${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="/if/admin" ?isAbsoluteLink=${true} ?highlight=${true}>
+                <span slot="label">${t`Go to admin interface`}</span>
+            </ak-sidebar-item>
+            <ak-sidebar-item path="/library">
+                <span slot="label">${t`Library`}</span>
+            </ak-sidebar-item>
+        `;
+    }
+}

web/src/interfaces/admin/index.html

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-        <link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css" />
-        <link rel="stylesheet" type="text/css" href="/static/dist/page.css" />
-        <link rel="stylesheet" type="text/css" href="/static/dist/empty-state.css" />
-        <link rel="stylesheet" type="text/css" href="/static/dist/spinner.css" />
-        <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css" />
-        <script src="/static/dist/poly.js" type="module"></script>
-        <script>
-            window["polymerSkipLoadingFontRoboto"] = true;
-        </script>
-        <script src="/static/dist/AdminInterface.js" type="module"></script>
-        <title>authentik</title>
-    </head>
-    <body>
-        <ak-message-container></ak-message-container>
-        <ak-interface-admin>
-            <section class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl">
-                <div class="pf-c-empty-state" style="height: 100vh">
-                    <div class="pf-c-empty-state__content">
-                        <span
-                            class="pf-c-spinner pf-m-xl pf-c-empty-state__icon"
-                            role="progressbar"
-                            aria-valuetext="Loading..."
-                        >
-                            <span class="pf-c-spinner__clipper"></span>
-                            <span class="pf-c-spinner__lead-ball"></span>
-                            <span class="pf-c-spinner__tail-ball"></span>
-                        </span>
-                        <h1 class="pf-c-title pf-m-lg">Loading...</h1>
-                    </div>
-                </div>
-            </section>
-        </ak-interface-admin>
-    </body>
-</html>

web/src/interfaces/flow/index.html

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-        <link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css" />
-        <link rel="stylesheet" type="text/css" href="/static/dist/page.css" />
-        <link rel="stylesheet" type="text/css" href="/static/dist/empty-state.css" />
-        <link rel="stylesheet" type="text/css" href="/static/dist/spinner.css" />
-        <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css" />
-        <script>
-            ShadyDOM = { force: !navigator.webdriver };
-            window["polymerSkipLoadingFontRoboto"] = true;
-        </script>
-        <script src="/static/dist/poly.js" type="module"></script>
-        <script src="/static/dist/FlowInterface.js" type="module"></script>
-        <title>authentik</title>
-    </head>
-    <body>
-        <ak-message-container></ak-message-container>
-        <ak-flow-executor>
-            <section class="ak-static-page pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl">
-                <div class="pf-c-empty-state" style="height: 100vh">
-                    <div class="pf-c-empty-state__content">
-                        <span
-                            class="pf-c-spinner pf-m-xl pf-c-empty-state__icon"
-                            role="progressbar"
-                            aria-valuetext="Loading..."
-                        >
-                            <span class="pf-c-spinner__clipper"></span>
-                            <span class="pf-c-spinner__lead-ball"></span>
-                            <span class="pf-c-spinner__tail-ball"></span>
-                        </span>
-                        <h1 class="pf-c-title pf-m-lg">Loading...</h1>
-                    </div>
-                </div>
-            </section>
-        </ak-flow-executor>
-    </body>
-</html>