habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: remove sidebar items from sidebar class, add admin-interface

Browse Source
This commit is contained in:
Jens Langhammer
2020-12-02 13:56:26 +01:00
parent 832a3dda41
commit 821458373d
10 changed files with 186 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/api/user.ts
View File

@ -1,5 +1,7 @@
import { DefaultClient, PBResponse } from "./client";
let me: User;
export class User {
pk: number;
username: string;
@ -13,7 +15,10 @@ export class User {
}
static me(): Promise<User> {
return DefaultClient.fetch<User>(["core", "users", "me"]);
if (me) {
return Promise.resolve<User>(me);
}
return DefaultClient.fetch<User>(["core", "users", "me"]).then(u => me = u);
}
static count(): Promise<number> {

6
web/src/elements/Messages.ts
View File

@ -1,4 +1,5 @@
import { LitElement, html, customElement, property, TemplateResult } from "lit-element";
import { LitElement, html, customElement, TemplateResult } from "lit-element";
import { DefaultClient } from "../api/client";
const LEVEL_ICON_MAP: { [key: string]: string } = {
error: "fas fa-exclamation-circle",
@ -19,8 +20,7 @@ interface Message {
@customElement("pb-messages")
export class Messages extends LitElement {
@property()
url = "";
url = DefaultClient.makeUrl(["root", "messages"]);
messageSocket?: WebSocket;
retryDelay = 200;

137
web/src/elements/sidebar/Sidebar.ts
View File

@ -6,136 +6,22 @@ import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
import { User } from "../../api/user";
import { until } from "lit-html/directives/until";
export interface SidebarItem {
name: string;
path?: string[];
children?: SidebarItem[];
condition?: (sb: Sidebar) => boolean;
condition?: () => Promise<boolean>;
}
export const SIDEBAR_ITEMS: SidebarItem[] = [
{
name: "Library",
path: ["/library/"],
},
{
name: "Monitor",
path: ["/audit/audit/"],
condition: (sb: Sidebar): boolean => {
return sb.user?.is_superuser || false;
},
},
{
name: "Administration",
children: [
{
name: "Overview",
path: ["/administration/overview-ng/"],
},
{
name: "System Tasks",
path: ["/administration/tasks/"],
},
{
name: "Applications",
path: ["/administration/applications/"],
},
{
name: "Sources",
path: ["/administration/sources/"],
},
{
name: "Providers",
path: ["/administration/providers/"],
},
{
name: "User Management",
children: [
{
name: "User",
path: ["/administration/users/"],
},
{
name: "Groups",
path: ["/administration/groups/"],
},
],
},
{
name: "Outposts",
children: [
{
name: "Outposts",
path: ["/administration/outposts/"],
},
{
name: "Service Connections",
path: ["/administration/outposts/service_connections/"],
},
],
},
{
name: "Policies",
children: [
{
name: "Policies",
path: ["/administration/policies/"],
},
{
name: "Bindings",
path: ["/administration/policies/bindings/"],
},
],
},
{
name: "Property Mappings",
path: ["/administration/property-mappings/"],
},
{
name: "Flows",
children: [
{
name: "Flows",
path: ["/administration/flows/"],
},
{
name: "Stages",
path: ["/administration/stages/"],
},
{
name: "Prompts",
path: ["/administration/stages/prompts/"],
},
{
name: "Invitations",
path: ["/administration/stages/invitations/"],
},
],
},
{
name: "Certificates",
path: ["/administration/crypto/certificates/"],
},
{
name: "Tokens",
path: ["/administration/tokens/"],
},
],
condition: (sb: Sidebar): boolean => {
return sb.user?.is_superuser || false;
},
},
];
@customElement("pb-sidebar")
export class Sidebar extends LitElement {
@property()
activePath: string;
@property({attribute: false})
items: SidebarItem[] = [];
@property()
user?: User;
activePath: string;
static get styles(): CSSResult[] {
return [
@ -145,7 +31,7 @@ export class Sidebar extends LitElement {
css`
.pf-c-nav__list .sidebar-brand {
max-height: 82px;
margin-bottom: 0.5rem;
margin-bottom: -0.5rem;
}
.pf-c-nav__link {
--pf-c-nav__link--PaddingTop: 0.5rem;
@ -167,16 +53,15 @@ export class Sidebar extends LitElement {
constructor() {
super();
User.me().then((u) => (this.user = u));
this.activePath = window.location.hash.slice(1, Infinity);
window.addEventListener("hashchange", () => {
this.activePath = window.location.hash.slice(1, Infinity);
});
}
renderItem(item: SidebarItem): TemplateResult {
async renderItem(item: SidebarItem): Promise<TemplateResult> {
if (item.condition) {
const result = item.condition(this);
const result = await item.condition();
if (!result) {
return html``;
}
@ -194,7 +79,7 @@ export class Sidebar extends LitElement {
</a>
<section class="pf-c-nav__subnav">
<ul class="pf-c-nav__simple-list">
${item.children?.map((i) => this.renderItem(i))}
${item.children?.map((i) => until(this.renderItem(i), html``))}
</ul>
</section>`}
</li>`;
@ -207,9 +92,9 @@ export class Sidebar extends LitElement {
<li class="pf-c-nav__item sidebar-brand">
<pb-sidebar-brand></pb-sidebar-brand>
</li>
${SIDEBAR_ITEMS.map((i) => this.renderItem(i))}
${this.items.map((i) => until(this.renderItem(i), html``))}
<li class="pf-c-nav__item pf-c-nav__item-bottom">
<pb-sidebar-user .user=${this.user}></pb-sidebar-user>
<pb-sidebar-user></pb-sidebar-user>
</li>
</ul>
</nav>

15
web/src/elements/sidebar/SidebarUser.ts
View File

@ -1,4 +1,4 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
// @ts-ignore
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore
@ -9,9 +9,6 @@ import { User } from "../../api/user";
@customElement("pb-sidebar-user")
export class SidebarUser extends LitElement {
@property()
user?: User;
static get styles(): CSSResult[] {
return [
fa,
@ -44,14 +41,12 @@ export class SidebarUser extends LitElement {
];
}
render(): TemplateResult {
if (!this.user) {
return html``;
}
async render(): Promise<TemplateResult> {
const user = await User.me();
return html`
<a href="#/-/user/" class="pf-c-nav__link user-avatar" id="user-settings">
<img class="pf-c-avatar" src="${this.user?.avatar}" alt="" />
<span>${this.user?.username}</span>
<img class="pf-c-avatar" src="${user.avatar}" alt="" />
<span>${user.username}</span>
</a>
<a href="/flows/-/default/invalidation/" class="pf-c-nav__link user-logout" id="logout">
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>

127
web/src/interfaces/AdminInterface.ts Normal file
View File

@ -0,0 +1,127 @@
import { customElement } from "lit-element";
import { User } from "../api/user";
import { SidebarItem } from "../elements/sidebar/Sidebar";
import { Interface } from "./Interface";
export const SIDEBAR_ITEMS: SidebarItem[] = [
{
name: "Library",
path: ["/library/"],
},
{
name: "Monitor",
path: ["/audit/audit/"],
condition: (): Promise<boolean> => {
return User.me().then(u => u.is_superuser);
},
},
{
name: "Administration",
children: [
{
name: "Overview",
path: ["/administration/overview-ng/"],
},
{
name: "System Tasks",
path: ["/administration/tasks/"],
},
{
name: "Applications",
path: ["/administration/applications/"],
},
{
name: "Sources",
path: ["/administration/sources/"],
},
{
name: "Providers",
path: ["/administration/providers/"],
},
{
name: "User Management",
children: [
{
name: "User",
path: ["/administration/users/"],
},
{
name: "Groups",
path: ["/administration/groups/"],
},
],
},
{
name: "Outposts",
children: [
{
name: "Outposts",
path: ["/administration/outposts/"],
},
{
name: "Service Connections",
path: ["/administration/outposts/service_connections/"],
},
],
},
{
name: "Policies",
children: [
{
name: "Policies",
path: ["/administration/policies/"],
},
{
name: "Bindings",
path: ["/administration/policies/bindings/"],
},
],
},
{
name: "Property Mappings",
path: ["/administration/property-mappings/"],
},
{
name: "Flows",
children: [
{
name: "Flows",
path: ["/administration/flows/"],
},
{
name: "Stages",
path: ["/administration/stages/"],
},
{
name: "Prompts",
path: ["/administration/stages/prompts/"],
},
{
name: "Invitations",
path: ["/administration/stages/invitations/"],
},
],
},
{
name: "Certificates",
path: ["/administration/crypto/certificates/"],
},
{
name: "Tokens",
path: ["/administration/tokens/"],
},
],
condition: (): Promise<boolean> => {
return User.me().then(u => u.is_superuser);
},
},
];
@customElement("pb-interface-admin")
export class AdminInterface extends Interface {
get sidebar(): SidebarItem[] {
return SIDEBAR_ITEMS;
}
}

28
web/src/interfaces/Interface.ts Normal file
View File

@ -0,0 +1,28 @@
import { gettext } from "django";
import { CSSResult, html, LitElement, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../common/styles";
import { SidebarItem } from "../elements/sidebar/Sidebar";
// @customElement("pb-interface")
export abstract class Interface extends LitElement {
abstract get sidebar(): SidebarItem[];
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
render(): TemplateResult {
return html`<pb-messages></pb-messages>
<div class="pf-c-page">
<a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">${gettext("Skip to content")}</a>
<pb-sidebar class="pf-c-page__sidebar" .items=${this.sidebar}>
</pb-sidebar>
<main class="pf-c-page__main">
<pb-router-outlet role="main" class="pf-c-page__main" tabindex="-1" id="main-content" defaultUrl="/library/">
</pb-router-outlet>
</main>
</div>`;
}
}

2
web/src/main.ts
View File

@ -30,3 +30,5 @@ import "./pages/admin-overview/TopApplicationsTable";
import "./pages/applications/ApplicationListPage";
import "./pages/applications/ApplicationViewPage";
import "./pages/LibraryPage";
import "./interfaces/AdminInterface";

4
web/src/passbook.css
View File

@ -114,7 +114,3 @@ select[multiple] {
.pf-c-content h1 :first-child {
margin-right: var(--pf-global--spacer--sm);
}
.pf-c-empty-state {
height: 100vh;
}