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

static: make ModalButton work with non-URL content

This commit is contained in:
Jens Langhammer 2020-11-22 21:35:52 +01:00
parent ed72595ae0
commit a10404f34b
3 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
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

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

@ -16,7 +16,7 @@ import { convertToSlug } from "../utils";
@customElement("pb-modal-button") @customElement("pb-modal-button")
export class ModalButton extends LitElement { export class ModalButton extends LitElement {
@property() @property()
href: string = ""; href?: string;
@property() @property()
open: boolean = false; open: boolean = false;
@ -48,8 +48,7 @@ export class ModalButton extends LitElement {
}); });
} }
setContent(content: string) { updateHandlers() {
this.querySelector("[slot=modal]")!.innerHTML = content;
// Ensure links close the modal // Ensure links close the modal
this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach( this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach(
(a) => { (a) => {
@ -85,9 +84,7 @@ export class ModalButton extends LitElement {
e.preventDefault(); e.preventDefault();
let formData = new FormData(form); let formData = new FormData(form);
fetch( fetch(
form.action === window.location.toString() this.href ? this.href : form.action,
? this.href
: form.action,
{ {
method: form.method, method: form.method,
body: formData, body: formData,
@ -98,7 +95,8 @@ export class ModalButton extends LitElement {
}) })
.then((data) => { .then((data) => {
if (data.indexOf("csrfmiddlewaretoken") !== -1) { if (data.indexOf("csrfmiddlewaretoken") !== -1) {
this.setContent(data); this.querySelector("[slot=modal]")!.innerHTML = data;
this.updateHandlers();
} else { } else {
this.open = false; this.open = false;
this.dispatchEvent( this.dispatchEvent(
@ -118,19 +116,25 @@ export class ModalButton extends LitElement {
} }
onClick(e: MouseEvent) { onClick(e: MouseEvent) {
if (!this.href) {
this.updateHandlers();
this.open = true;
} else {
const request = new Request(this.href); const request = new Request(this.href);
fetch(request, { fetch(request, {
mode: "same-origin", mode: "same-origin",
}) })
.then((r) => r.text()) .then((r) => r.text())
.then((t) => { .then((t) => {
this.setContent(t); this.querySelector("[slot=modal]")!.innerHTML = t;
this.updateHandlers();
this.open = true; this.open = true;
}) })
.catch((e) => { .catch((e) => {
console.error(e); console.error(e);
}); });
} }
}
renderModal() { renderModal() {
return html`<div class="pf-c-backdrop"> return html`<div class="pf-c-backdrop">