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

web: add more state 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-11-18 21:40:34 +01:00
parent e6638afa3c
commit 049fceeeee
3 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/interfaces/AdminInterface.ts
View File

@ -25,6 +25,7 @@ import "../elements/messages/MessageContainer";
import "../elements/messages/MessageContainer"; import "../elements/messages/MessageContainer";
import "../elements/notifications/NotificationDrawer"; import "../elements/notifications/NotificationDrawer";
import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "../elements/router/Route"; import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "../elements/router/Route";
import { getURLParam, updateURLParams } from "../elements/router/RouteMatch";
import "../elements/router/RouterOutlet"; import "../elements/router/RouterOutlet";
import "../elements/sidebar/Sidebar"; import "../elements/sidebar/Sidebar";
import "../elements/sidebar/SidebarItem"; import "../elements/sidebar/SidebarItem";
@ -37,10 +38,10 @@ export class AdminInterface extends LitElement {
sidebarOpen = true; sidebarOpen = true;
@property({ type: Boolean }) @property({ type: Boolean })
notificationOpen = false; notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);
@property({ type: Boolean }) @property({ type: Boolean })
apiDrawerOpen = false; apiDrawerOpen = getURLParam("apiDrawerOpen", false);
ws: WebsocketClient; ws: WebsocketClient;
@ -87,10 +88,16 @@ export class AdminInterface extends LitElement {
this.sidebarOpen = !this.sidebarOpen; this.sidebarOpen = !this.sidebarOpen;
}); });
window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => { window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => {
this.notificationOpen = !this.notificationOpen; this.notificationDrawerOpen = !this.notificationDrawerOpen;
updateURLParams({
notificationDrawerOpen: this.notificationDrawerOpen,
});
}); });
window.addEventListener(EVENT_API_DRAWER_TOGGLE, () => { window.addEventListener(EVENT_API_DRAWER_TOGGLE, () => {
this.apiDrawerOpen = !this.apiDrawerOpen; this.apiDrawerOpen = !this.apiDrawerOpen;
updateURLParams({
apiDrawerOpen: this.apiDrawerOpen,
});
}); });
this.version = new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve(); this.version = new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve();
} }
@ -104,7 +111,7 @@ export class AdminInterface extends LitElement {
</ak-sidebar> </ak-sidebar>
<div class="pf-c-page__drawer"> <div class="pf-c-page__drawer">
<div <div
class="pf-c-drawer ${this.notificationOpen || this.apiDrawerOpen class="pf-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
? "pf-m-expanded" ? "pf-m-expanded"
: "pf-m-collapsed"}" : "pf-m-collapsed"}"
> >
@ -125,10 +132,10 @@ export class AdminInterface extends LitElement {
</div> </div>
</div> </div>
<ak-notification-drawer <ak-notification-drawer
class="pf-c-drawer__panel pf-m-width-33 ${this.notificationOpen class="pf-c-drawer__panel pf-m-width-33 ${this.notificationDrawerOpen
? "" ? ""
: "display-none"}" : "display-none"}"
?hidden=${!this.notificationOpen} ?hidden=${!this.notificationDrawerOpen}
></ak-notification-drawer> ></ak-notification-drawer>
<ak-api-drawer <ak-api-drawer
class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen

30
web/src/interfaces/UserInterface.ts
View File

@ -30,6 +30,7 @@ import {
import "../elements/messages/MessageContainer"; import "../elements/messages/MessageContainer";
import "../elements/messages/MessageContainer"; import "../elements/messages/MessageContainer";
import "../elements/notifications/NotificationDrawer"; import "../elements/notifications/NotificationDrawer";
import { getURLParam, updateURLParams } from "../elements/router/RouteMatch";
import "../elements/router/RouterOutlet"; import "../elements/router/RouterOutlet";
import "../elements/sidebar/Sidebar"; import "../elements/sidebar/Sidebar";
import { DefaultTenant } from "../elements/sidebar/SidebarBrand"; import { DefaultTenant } from "../elements/sidebar/SidebarBrand";
@ -41,10 +42,10 @@ import "./locale";
@customElement("ak-interface-user") @customElement("ak-interface-user")
export class UserInterface extends LitElement { export class UserInterface extends LitElement {
@property({ type: Boolean }) @property({ type: Boolean })
notificationOpen = false; notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);
@property({ type: Boolean }) @property({ type: Boolean })
apiDrawerOpen = false; apiDrawerOpen = getURLParam("apiDrawerOpen", false);
ws: WebsocketClient; ws: WebsocketClient;
@ -94,10 +95,16 @@ export class UserInterface extends LitElement {
super(); super();
this.ws = new WebsocketClient(); this.ws = new WebsocketClient();
window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => { window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => {
this.notificationOpen = !this.notificationOpen; this.notificationDrawerOpen = !this.notificationDrawerOpen;
updateURLParams({
notificationDrawerOpen: this.notificationDrawerOpen,
});
}); });
window.addEventListener(EVENT_API_DRAWER_TOGGLE, () => { window.addEventListener(EVENT_API_DRAWER_TOGGLE, () => {
this.apiDrawerOpen = !this.apiDrawerOpen; this.apiDrawerOpen = !this.apiDrawerOpen;
updateURLParams({
apiDrawerOpen: this.apiDrawerOpen,
});
}); });
window.addEventListener(EVENT_REFRESH, () => { window.addEventListener(EVENT_REFRESH, () => {
this.firstUpdated(); this.firstUpdated();
@ -150,6 +157,9 @@ export class UserInterface extends LitElement {
type="button" type="button"
@click=${() => { @click=${() => {
this.apiDrawerOpen = !this.apiDrawerOpen; this.apiDrawerOpen = !this.apiDrawerOpen;
updateURLParams({
apiDrawerOpen: this.apiDrawerOpen,
});
}} }}
> >
<i class="fas fa-code" aria-hidden="true"></i> <i class="fas fa-code" aria-hidden="true"></i>
@ -165,7 +175,12 @@ export class UserInterface extends LitElement {
type="button" type="button"
aria-label="${t`Unread notifications`}" aria-label="${t`Unread notifications`}"
@click=${() => { @click=${() => {
this.notificationOpen = !this.notificationOpen; this.notificationDrawerOpen =
!this.notificationDrawerOpen;
updateURLParams({
notificationDrawerOpen:
this.notificationDrawerOpen,
});
}} }}
> >
<span <span
@ -267,7 +282,7 @@ export class UserInterface extends LitElement {
</header> </header>
<div class="pf-c-page__drawer"> <div class="pf-c-page__drawer">
<div <div
class="pf-c-drawer ${this.notificationOpen || this.apiDrawerOpen class="pf-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
? "pf-m-expanded" ? "pf-m-expanded"
: "pf-m-collapsed"}" : "pf-m-collapsed"}"
> >
@ -288,10 +303,11 @@ export class UserInterface extends LitElement {
</div> </div>
</div> </div>
<ak-notification-drawer <ak-notification-drawer
class="pf-c-drawer__panel pf-m-width-33 ${this.notificationOpen class="pf-c-drawer__panel pf-m-width-33 ${this
.notificationDrawerOpen
? "" ? ""
: "display-none"}" : "display-none"}"
?hidden=${!this.notificationOpen} ?hidden=${!this.notificationDrawerOpen}
></ak-notification-drawer> ></ak-notification-drawer>
<ak-api-drawer <ak-api-drawer
class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen

10
web/src/user/LibraryPage.ts
View File

@ -19,6 +19,7 @@ import { Application, CoreApi } from "@goauthentik/api";
import { AKResponse } from "../api/Client"; import { AKResponse } from "../api/Client";
import { DEFAULT_CONFIG } from "../api/Config"; import { DEFAULT_CONFIG } from "../api/Config";
import { UIConfig, uiConfig } from "../common/config"; import { UIConfig, uiConfig } from "../common/config";
import { getURLParam, updateURLParams } from "../elements/router/RouteMatch";
import { loading } from "../utils"; import { loading } from "../utils";
import "./LibraryApplication"; import "./LibraryApplication";
@ -31,7 +32,7 @@ export class LibraryPage extends LitElement {
selectedApp?: Application; selectedApp?: Application;
@property() @property()
query?: string; query = getURLParam<string | undefined>("search", undefined);
fuse?: Fuse<Application>; fuse?: Fuse<Application>;
@ -125,6 +126,9 @@ export class LibraryPage extends LitElement {
? html`<input ? html`<input
@input=${(ev: InputEvent) => { @input=${(ev: InputEvent) => {
this.query = (ev.target as HTMLInputElement).value; this.query = (ev.target as HTMLInputElement).value;
updateURLParams({
search: this.query,
});
if (!this.fuse) return; if (!this.fuse) return;
const apps = this.fuse.search(this.query); const apps = this.fuse.search(this.query);
if (apps.length < 1) return; if (apps.length < 1) return;
@ -135,6 +139,10 @@ export class LibraryPage extends LitElement {
window.location.assign(this.selectedApp.launchUrl); window.location.assign(this.selectedApp.launchUrl);
} else if (ev.key === "Escape") { } else if (ev.key === "Escape") {
(ev.target as HTMLInputElement).value = ""; (ev.target as HTMLInputElement).value = "";
this.query = "";
updateURLParams({
search: this.query,
});
this.selectedApp = undefined; this.selectedApp = undefined;
} }
}} }}