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/notifications/NotificationDrawer";
import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "../elements/router/Route";
import { getURLParam, updateURLParams } from "../elements/router/RouteMatch";
import "../elements/router/RouterOutlet";
import "../elements/sidebar/Sidebar";
import "../elements/sidebar/SidebarItem";
@ -37,10 +38,10 @@ export class AdminInterface extends LitElement {
sidebarOpen = true;
@property({ type: Boolean })
notificationOpen = false;
notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);
@property({ type: Boolean })
apiDrawerOpen = false;
apiDrawerOpen = getURLParam("apiDrawerOpen", false);
ws: WebsocketClient;
@ -87,10 +88,16 @@ export class AdminInterface extends LitElement {
this.sidebarOpen = !this.sidebarOpen;
});
window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => {
this.notificationOpen = !this.notificationOpen;
this.notificationDrawerOpen = !this.notificationDrawerOpen;
updateURLParams({
notificationDrawerOpen: this.notificationDrawerOpen,
});
});
window.addEventListener(EVENT_API_DRAWER_TOGGLE, () => {
this.apiDrawerOpen = !this.apiDrawerOpen;
updateURLParams({
apiDrawerOpen: this.apiDrawerOpen,
});
});
this.version = new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve();
}
@ -104,7 +111,7 @@ export class AdminInterface extends LitElement {
</ak-sidebar>
<div class="pf-c-page__drawer">
<div
class="pf-c-drawer ${this.notificationOpen || this.apiDrawerOpen
class="pf-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
? "pf-m-expanded"
: "pf-m-collapsed"}"
>
@ -125,10 +132,10 @@ export class AdminInterface extends LitElement {
</div>
</div>
<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"}"
?hidden=${!this.notificationOpen}
?hidden=${!this.notificationDrawerOpen}
></ak-notification-drawer>
<ak-api-drawer
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/notifications/NotificationDrawer";
import { getURLParam, updateURLParams } from "../elements/router/RouteMatch";
import "../elements/router/RouterOutlet";
import "../elements/sidebar/Sidebar";
import { DefaultTenant } from "../elements/sidebar/SidebarBrand";
@ -41,10 +42,10 @@ import "./locale";
@customElement("ak-interface-user")
export class UserInterface extends LitElement {
@property({ type: Boolean })
notificationOpen = false;
notificationDrawerOpen = getURLParam("notificationDrawerOpen", false);
@property({ type: Boolean })
apiDrawerOpen = false;
apiDrawerOpen = getURLParam("apiDrawerOpen", false);
ws: WebsocketClient;
@ -94,10 +95,16 @@ export class UserInterface extends LitElement {
super();
this.ws = new WebsocketClient();
window.addEventListener(EVENT_NOTIFICATION_DRAWER_TOGGLE, () => {
this.notificationOpen = !this.notificationOpen;
this.notificationDrawerOpen = !this.notificationDrawerOpen;
updateURLParams({
notificationDrawerOpen: this.notificationDrawerOpen,
});
});
window.addEventListener(EVENT_API_DRAWER_TOGGLE, () => {
this.apiDrawerOpen = !this.apiDrawerOpen;
updateURLParams({
apiDrawerOpen: this.apiDrawerOpen,
});
});
window.addEventListener(EVENT_REFRESH, () => {
this.firstUpdated();
@ -150,6 +157,9 @@ export class UserInterface extends LitElement {
type="button"
@click=${() => {
this.apiDrawerOpen = !this.apiDrawerOpen;
updateURLParams({
apiDrawerOpen: this.apiDrawerOpen,
});
}}
>
<i class="fas fa-code" aria-hidden="true"></i>
@ -165,7 +175,12 @@ export class UserInterface extends LitElement {
type="button"
aria-label="${t`Unread notifications`}"
@click=${() => {
this.notificationOpen = !this.notificationOpen;
this.notificationDrawerOpen =
!this.notificationDrawerOpen;
updateURLParams({
notificationDrawerOpen:
this.notificationDrawerOpen,
});
}}
>
<span
@ -267,7 +282,7 @@ export class UserInterface extends LitElement {
</header>
<div class="pf-c-page__drawer">
<div
class="pf-c-drawer ${this.notificationOpen || this.apiDrawerOpen
class="pf-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
? "pf-m-expanded"
: "pf-m-collapsed"}"
>
@ -288,10 +303,11 @@ export class UserInterface extends LitElement {
</div>
</div>
<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"}"
?hidden=${!this.notificationOpen}
?hidden=${!this.notificationDrawerOpen}
></ak-notification-drawer>
<ak-api-drawer
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 { DEFAULT_CONFIG } from "../api/Config";
import { UIConfig, uiConfig } from "../common/config";
import { getURLParam, updateURLParams } from "../elements/router/RouteMatch";
import { loading } from "../utils";
import "./LibraryApplication";
@ -31,7 +32,7 @@ export class LibraryPage extends LitElement {
selectedApp?: Application;
@property()
query?: string;
query = getURLParam<string | undefined>("search", undefined);
fuse?: Fuse<Application>;
@ -125,6 +126,9 @@ export class LibraryPage extends LitElement {
? html`<input
@input=${(ev: InputEvent) => {
this.query = (ev.target as HTMLInputElement).value;
updateURLParams({
search: this.query,
});
if (!this.fuse) return;
const apps = this.fuse.search(this.query);
if (apps.length < 1) return;
@ -135,6 +139,10 @@ export class LibraryPage extends LitElement {
window.location.assign(this.selectedApp.launchUrl);
} else if (ev.key === "Escape") {
(ev.target as HTMLInputElement).value = "";
this.query = "";
updateURLParams({
search: this.query,
});
this.selectedApp = undefined;
}
}}