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

static: add websocket support for messages, move console.log to debug

This commit is contained in:
Jens Langhammer 2020-11-26 17:23:29 +01:00
parent 9c00c86e9b
commit afcbe24ff5
9 changed files with 58 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
passbook/static/static/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

2
passbook/static/static/dist/main.js.map vendored
View File

File diff suppressed because one or more lines are too long

6
passbook/static/static/src/api/application.ts
View File

@ -1,7 +1,7 @@
export class Application {
pk: string;
name: string;
slug: string;
pk?: string;
name?: string;
slug?: string;
provider?: number;
meta_launch_url?: string;

3
passbook/static/static/src/elements/ActionButton.ts
View File

@ -1,5 +1,4 @@
import { getCookie } from "../utils";
import { updateMessages } from "./Messages";
import { css, customElement, html, LitElement, property } from "lit-element";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
@ -56,8 +55,6 @@ export class ActionButton extends LitElement {
this.classList.remove(PROGRESS_CLASS);
this.classList.replace(PRIMARY_CLASS, statusClass);
this.requestUpdate();
// Trigger messages to update
updateMessages();
setTimeout(() => {
this.classList.replace(statusClass, PRIMARY_CLASS);
this.requestUpdate();

57
passbook/static/static/src/elements/Messages.ts
View File

@ -11,13 +11,9 @@ let ID = function (prefix: string) {
return prefix + Math.random().toString(36).substr(2, 9);
};
export function updateMessages() {
const messageElement = <Messages>document?.querySelector("pb-messages");
messageElement.fetchMessages();
}
interface Message {
level_tag: string;
levelTag: string;
tags: string[];
message: string;
}
@ -29,38 +25,51 @@ export class Messages extends LitElement {
@property()
messages: string[] = [];
messageSocket?: WebSocket;
createRenderRoot() {
return this;
}
firstUpdated() {
this.fetchMessages();
constructor() {
super();
this.connect();
}
fetchMessages() {
return fetch(this.url)
.then((r) => r.json())
.then((r) => (this.messages = r))
.then((r) => {
const container = <HTMLElement>(
this.querySelector(".pf-c-alert-group")!
);
r.forEach((message: Message) => {
const messageElement = this.renderMessage(message);
container.appendChild(messageElement);
});
});
connect() {
const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
window.location.host
}/ws/client/`;
this.messageSocket = new WebSocket(wsUrl);
this.messageSocket.addEventListener("open", (e) => {
console.debug(`passbook/messages: connected to ${wsUrl}`);
});
this.messageSocket.addEventListener("close", (e) => {
console.debug(`passbook/messages: closed ws connection: ${e}`);
setTimeout(() => {
console.debug(`passbook/messages: reconnecting ws`);
this.connect();
}, 1000);
});
this.messageSocket.addEventListener("message", (e) => {
const container = <HTMLElement>(
this.querySelector(".pf-c-alert-group")!
);
const data = JSON.parse(e.data);
const messageElement = this.renderMessage(data);
container.appendChild(messageElement);
});
}
renderMessage(message: Message): ChildNode {
const id = ID("pb-message");
const el = document.createElement("template");
el.innerHTML = `<li id=${id} class="pf-c-alert-group__item">
<div class="pf-c-alert pf-m-${message.level_tag} ${
message.level_tag === "error" ? "pf-m-danger" : ""
<div class="pf-c-alert pf-m-${message.levelTag} ${
message.levelTag === "error" ? "pf-m-danger" : ""
}">
<div class="pf-c-alert__icon">
<i class="${LEVEL_ICON_MAP[message.level_tag]}"></i>
<i class="${LEVEL_ICON_MAP[message.levelTag]}"></i>
</div>
<p class="pf-c-alert__title">
${message.message}

6
passbook/static/static/src/elements/ModalButton.ts
View File

@ -10,7 +10,6 @@ import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
// @ts-ignore
import fa from "@fortawesome/fontawesome-free/css/solid.css";
import { updateMessages } from "../elements/Messages";
import { convertToSlug } from "../utils";
@customElement("pb-modal-button")
@ -96,13 +95,13 @@ export class ModalButton extends LitElement {
this.querySelector(
"[slot=modal]"
)!.innerHTML = data;
console.log(
console.debug(
`passbook/modalbutton: re-showing form`
);
this.updateHandlers();
} else {
this.open = false;
console.log(
console.debug(
`passbook/modalbutton: successful submit`
);
this.dispatchEvent(
@ -110,7 +109,6 @@ export class ModalButton extends LitElement {
bubbles: true,
})
);
updateMessages();
}
})
.catch((e) => {

16
passbook/static/static/src/pages/FlowShellCard.ts
View File

@ -1,5 +1,4 @@
import { LitElement, html, customElement, property } from "lit-element";
import { updateMessages } from "../elements/Messages";
enum ResponseType {
redirect = "redirect",
@ -53,11 +52,10 @@ export class FlowShellCard extends LitElement {
this.flowBody = data.body;
await this.requestUpdate();
this.checkAutofocus();
updateMessages();
this.loadFormCode();
this.setFormSubmitHandlers();
default:
console.log(
console.debug(
`passbook/flows: unexpected data type ${data.type}`
);
break;
@ -83,14 +81,16 @@ export class FlowShellCard extends LitElement {
for (let index = 0; index < form.elements.length; index++) {
const element = <HTMLInputElement>form.elements[index];
if (element.value === form.action) {
console.log(
console.debug(
"passbook/flows: Found Form action URL in form elements, not changing form action."
);
return false;
}
}
form.action = this.flowBodyUrl;
console.log(`passbook/flows: updated form.action ${this.flowBodyUrl}`);
console.debug(
`passbook/flows: updated form.action ${this.flowBodyUrl}`
);
return true;
}
@ -102,13 +102,13 @@ export class FlowShellCard extends LitElement {
setFormSubmitHandlers() {
this.querySelectorAll("form").forEach((form) => {
console.log(
console.debug(
`passbook/flows: Checking for autosubmit attribute ${form}`
);
this.checkAutosubmit(form);
console.log(`passbook/flows: Setting action for form ${form}`);
console.debug(`passbook/flows: Setting action for form ${form}`);
this.updateFormAction(form);
console.log(`passbook/flows: Adding handler for form ${form}`);
console.debug(`passbook/flows: Adding handler for form ${form}`);
form.addEventListener("submit", (e) => {
e.preventDefault();
let formData = new FormData(form);

6
passbook/static/static/src/pages/RouterOutlet.ts
View File

@ -26,7 +26,7 @@ export class Route {
redirect(to: string): Route {
this.callback = () => {
console.log(`passbook/router: redirecting ${to}`);
console.debug(`passbook/router: redirecting ${to}`);
window.location.hash = `#${to}`;
return html``;
};
@ -116,7 +116,9 @@ export class RouterOutlet extends LitElement {
}
let matchedRoute: RouteMatch | null = null;
ROUTES.forEach((route) => {
console.debug(`passbook/router: matching ${activeUrl} against ${route.url}`);
console.debug(
`passbook/router: matching ${activeUrl} against ${route.url}`
);
const match = route.url.exec(activeUrl);
if (match != null) {
matchedRoute = new RouteMatch(route);

4
passbook/static/static/src/pages/SiteShell.ts
View File

@ -59,7 +59,9 @@ export class SiteShell extends LitElement {
if (r.ok) {
return r;
}
console.log(`passbook/site-shell: Request failed ${this._url}`);
console.debug(
`passbook/site-shell: Request failed ${this._url}`
);
window.location.hash = "#/";
throw new Error("Request failed");
})