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

web: update SiteShell to not use innerHTML

Browse source
This commit is contained in:
Jens Langhammer 2021-02-08 23:14:16 +01:00
parent c8120c0d3e
commit c1254f6212
1 changed files with 24 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
web/src/pages/generic/SiteShell.ts
View file

@ -1,14 +1,10 @@
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
// @ts-ignore
import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
// @ts-ignore
import SpinnerStyle from "@patternfly/patternfly/components/Spinner/spinner.css";
// @ts-ignore
import BackdropStyle from "@patternfly/patternfly/components/Backdrop/backdrop.css";
import { SpinnerSize } from "../../elements/Spinner"; import { SpinnerSize } from "../../elements/Spinner";
import { showMessage } from "../../elements/messages/MessageContainer"; import { showMessage } from "../../elements/messages/MessageContainer";
import { gettext } from "django"; import { gettext } from "django";
import { SentryIgnoredError } from "../../common/errors"; import { SentryIgnoredError } from "../../common/errors";
import { unsafeHTML } from "lit-html/directives/unsafe-html";
import { COMMON_STYLES } from "../../common/styles";
@customElement("ak-site-shell") @customElement("ak-site-shell")
export class SiteShell extends LitElement { export class SiteShell extends LitElement {
@ -23,8 +19,11 @@ export class SiteShell extends LitElement {
@property({type: Boolean}) @property({type: Boolean})
loading = false; loading = false;
@property({type: String})
body = "";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return COMMON_STYLES.concat(
css` css`
:host, :host,
::slotted(*) { ::slotted(*) {
@ -36,11 +35,8 @@ export class SiteShell extends LitElement {
left: 0; left: 0;
width: 100%; width: 100%;
} }
`, `
BackdropStyle, );
BullseyeStyle,
SpinnerStyle,
];
} }
constructor() { constructor() {
@ -63,23 +59,22 @@ export class SiteShell extends LitElement {
} }
this.loading = true; this.loading = true;
fetch(this._url) fetch(this._url)
.then((r) => { .then((response) => {
if (r.ok) { if (response.ok) {
return r; return response;
} }
console.debug(`authentik/site-shell: Request failed ${this._url}`); console.debug(`authentik/site-shell: Request failed ${this._url}`);
window.location.hash = "#/"; window.location.hash = "#/";
showMessage({ showMessage({
level_tag: "error", level_tag: "error",
message: gettext(`Request failed: ${r.statusText}`), message: gettext(`Request failed: ${response.statusText}`),
}); });
this.loading = false; this.loading = false;
throw new SentryIgnoredError("Request failed"); throw new SentryIgnoredError("Request failed");
}) })
.then((r) => r.text()) .then((response) => response.text())
.then((text) => { .then((text) => {
bodySlot.innerHTML = text; this.body = text;
this.updateHandlers();
}) })
.then(() => { .then(() => {
setTimeout(() => { setTimeout(() => {
@ -90,7 +85,7 @@ export class SiteShell extends LitElement {
updateHandlers(): void { updateHandlers(): void {
// Ensure anchors only change the hash // Ensure anchors only change the hash
this.querySelectorAll<HTMLAnchorElement>("a:not(.ak-root-link)").forEach((a) => { this.shadowRoot?.querySelectorAll<HTMLAnchorElement>("a:not(.ak-root-link)").forEach((a) => {
if (a.href === "") { if (a.href === "") {
return; return;
} }
@ -104,13 +99,13 @@ export class SiteShell extends LitElement {
} }
}); });
// Create refresh buttons // Create refresh buttons
this.querySelectorAll("[role=ak-refresh]").forEach((rt) => { this.shadowRoot?.querySelectorAll("[role=ak-refresh]").forEach((rt) => {
rt.addEventListener("click", () => { rt.addEventListener("click", () => {
this.loadContent(); this.loadContent();
}); });
}); });
// Make get forms (search bar) notify us on submit so we can change the hash // Make get forms (search bar) notify us on submit so we can change the hash
this.querySelectorAll<HTMLFormElement>("form[method=get]").forEach((form) => { this.shadowRoot?.querySelectorAll<HTMLFormElement>("form[method=get]").forEach((form) => {
form.addEventListener("submit", (e) => { form.addEventListener("submit", (e) => {
e.preventDefault(); e.preventDefault();
const formData = new FormData(form); const formData = new FormData(form);
@ -119,7 +114,7 @@ export class SiteShell extends LitElement {
}); });
}); });
// Make forms with POST Method have a correct action set // Make forms with POST Method have a correct action set
this.querySelectorAll<HTMLFormElement>("form[method=post]").forEach((form) => { this.shadowRoot?.querySelectorAll<HTMLFormElement>("form[method=post]").forEach((form) => {
form.addEventListener("submit", (e) => { form.addEventListener("submit", (e) => {
e.preventDefault(); e.preventDefault();
const formData = new FormData(form); const formData = new FormData(form);
@ -131,11 +126,7 @@ export class SiteShell extends LitElement {
return response.text(); return response.text();
}) })
.then((data) => { .then((data) => {
const bodySlot = this.querySelector("[slot=body]"); this.body = data;
if (!bodySlot) {
return;
}
bodySlot.innerHTML = data;
this.updateHandlers(); this.updateHandlers();
}) })
.catch((e) => { .catch((e) => {
@ -157,6 +148,10 @@ export class SiteShell extends LitElement {
</div> </div>
</div>` </div>`
: ""} : ""}
<slot name="body"></slot>`; ${unsafeHTML(this.body)}`;
}
updated(): void {
this.updateHandlers();
} }
} }