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

web: fix ModalButton working in global scope, causing issues on 2nd use

This commit is contained in:
Jens Langhammer 2021-02-08 23:10:45 +01:00
parent 52016e0806
commit c8120c0d3e
2 changed files with 26 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/src/elements/buttons/ModalButton.ts
View File

@ -1,19 +1,11 @@
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 { unsafeHTML } from "lit-html/directives/unsafe-html";
import ModalBoxStyle from "@patternfly/patternfly/components/ModalBox/modal-box.css";
// @ts-ignore
import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
// @ts-ignore
import BackdropStyle from "@patternfly/patternfly/components/Backdrop/backdrop.css";
// @ts-ignore
import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
// @ts-ignore
import fa from "@fortawesome/fontawesome-free/css/solid.css";
import { convertToSlug } from "../../utils"; import { convertToSlug } from "../../utils";
import { SpinnerButton } from "./SpinnerButton"; import { SpinnerButton } from "./SpinnerButton";
import { PRIMARY_CLASS } from "../../constants"; import { PRIMARY_CLASS } from "../../constants";
import { showMessage } from "../messages/MessageContainer"; import { showMessage } from "../messages/MessageContainer";
import { COMMON_STYLES } from "../../common/styles";
@customElement("ak-modal-button") @customElement("ak-modal-button")
export class ModalButton extends LitElement { export class ModalButton extends LitElement {
@ -23,8 +15,11 @@ export class ModalButton extends LitElement {
@property({type: Boolean}) @property({type: Boolean})
open = false; open = false;
@property()
modal = "";
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return COMMON_STYLES.concat(
css` css`
:host { :host {
text-align: left; text-align: left;
@ -32,13 +27,11 @@ export class ModalButton extends LitElement {
::slotted(*) { ::slotted(*) {
overflow-y: auto; overflow-y: auto;
} }
`, .pf-c-page__main-section {
ModalBoxStyle, margin-right: 0;
BullseyeStyle, }
BackdropStyle, `
ButtonStyle, );
fa,
];
} }
constructor() { constructor() {
@ -52,7 +45,7 @@ export class ModalButton extends LitElement {
updateHandlers(): void { updateHandlers(): void {
// Ensure links close the modal // Ensure links close the modal
this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach((a) => { this.shadowRoot?.querySelectorAll<HTMLAnchorElement>("a").forEach((a) => {
if (a.target == "_blank") { if (a.target == "_blank") {
return; return;
} }
@ -63,7 +56,7 @@ export class ModalButton extends LitElement {
}); });
}); });
// Make name field update slug field // Make name field update slug field
this.querySelectorAll<HTMLInputElement>("input[name=name]").forEach((input) => { this.shadowRoot?.querySelectorAll<HTMLInputElement>("input[name=name]").forEach((input) => {
const form = input.closest("form"); const form = input.closest("form");
if (form === null) { if (form === null) {
return; return;
@ -83,7 +76,7 @@ export class ModalButton extends LitElement {
}); });
}); });
// Ensure forms sends in AJAX // Ensure forms sends in AJAX
this.querySelectorAll<HTMLFormElement>("[slot=modal] form").forEach((form) => { this.shadowRoot?.querySelectorAll<HTMLFormElement>("form").forEach((form) => {
form.addEventListener("submit", (e) => { form.addEventListener("submit", (e) => {
e.preventDefault(); e.preventDefault();
const formData = new FormData(form); const formData = new FormData(form);
@ -95,16 +88,10 @@ export class ModalButton extends LitElement {
.then((response) => { .then((response) => {
return response.text(); return response.text();
}) })
.then((data) => { .then((responseData) => {
if (data.indexOf("csrfmiddlewaretoken") !== -1) { if (responseData.indexOf("csrfmiddlewaretoken") !== -1) {
const modalSlot = this.querySelector("[slot=modal]"); this.modal = responseData;
if (!modalSlot) {
console.debug("authentik/modalbutton: modal slot not found?");
return;
}
modalSlot.innerHTML = data;
console.debug("authentik/modalbutton: re-showing form"); console.debug("authentik/modalbutton: re-showing form");
this.updateHandlers();
} else { } else {
this.open = false; this.open = false;
console.debug("authentik/modalbutton: successful submit"); console.debug("authentik/modalbutton: successful submit");
@ -136,14 +123,9 @@ export class ModalButton extends LitElement {
fetch(request, { fetch(request, {
mode: "same-origin", mode: "same-origin",
}) })
.then((r) => r.text()) .then((response) => response.text())
.then((t) => { .then((responseData) => {
const modalSlot = this.querySelector("[slot=modal]"); this.modal = responseData;
if (!modalSlot) {
return;
}
modalSlot.innerHTML = t;
this.updateHandlers();
this.open = true; this.open = true;
this.querySelectorAll<SpinnerButton>("ak-spinner-button").forEach((sb) => { this.querySelectorAll<SpinnerButton>("ak-spinner-button").forEach((sb) => {
sb.setDone(PRIMARY_CLASS); sb.setDone(PRIMARY_CLASS);
@ -177,7 +159,7 @@ export class ModalButton extends LitElement {
> >
<i class="fas fa-times" aria-hidden="true"></i> <i class="fas fa-times" aria-hidden="true"></i>
</button> </button>
<slot name="modal"> </slot> ${unsafeHTML(this.modal)}
</div> </div>
</div> </div>
</div>`; </div>`;
@ -187,4 +169,8 @@ export class ModalButton extends LitElement {
return html` <slot name="trigger" @click=${() => this.onClick()}></slot> return html` <slot name="trigger" @click=${() => this.onClick()}></slot>
${this.open ? this.renderModal() : ""}`; ${this.open ? this.renderModal() : ""}`;
} }
updated(): void {
this.updateHandlers();
}
} }

1
web/src/pages/outposts/OutpostListPage.ts
View File

@ -9,6 +9,7 @@ import { TablePage } from "../../elements/table/TablePage";
import "./OutpostHealth"; import "./OutpostHealth";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/TokenCopyButton";
@customElement("ak-outpost-list") @customElement("ak-outpost-list")
export class OutpostListPage extends TablePage<Outpost> { export class OutpostListPage extends TablePage<Outpost> {