web/elements: remove modalbutton logic
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
parent
8d2aecd687
commit
66d7d598fb
|
|
@ -13,12 +13,6 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
|
||||||
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
||||||
import AKGlobal from "../../authentik.css";
|
import AKGlobal from "../../authentik.css";
|
||||||
|
|
||||||
import { convertToSlug } from "../../utils";
|
|
||||||
import { SpinnerButton } from "./SpinnerButton";
|
|
||||||
import { PRIMARY_CLASS, EVENT_REFRESH } from "../../constants";
|
|
||||||
import { showMessage } from "../messages/MessageContainer";
|
|
||||||
import { MessageLevel } from "../messages/Message";
|
|
||||||
|
|
||||||
@customElement("ak-modal-button")
|
@customElement("ak-modal-button")
|
||||||
export class ModalButton extends LitElement {
|
export class ModalButton extends LitElement {
|
||||||
@property()
|
@property()
|
||||||
|
|
@ -66,107 +60,13 @@ export class ModalButton extends LitElement {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
updateHandlers(): void {
|
|
||||||
// Ensure links close the modal
|
|
||||||
this.shadowRoot?.querySelectorAll<HTMLAnchorElement>("a").forEach((a) => {
|
|
||||||
if (a.target == "_blank") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Make click on a close the modal
|
|
||||||
a.addEventListener("click", (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
this.open = false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// Make name field update slug field
|
|
||||||
this.shadowRoot?.querySelectorAll<HTMLInputElement>("input[name=name]").forEach((input) => {
|
|
||||||
const form = input.closest("form");
|
|
||||||
if (form === null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const slugField = form.querySelector<HTMLInputElement>("input[name=slug]");
|
|
||||||
if (!slugField) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Only attach handler if the slug is already equal to the name
|
|
||||||
// if not, they are probably completely different and shouldn't update
|
|
||||||
// each other
|
|
||||||
if (convertToSlug(input.value) !== slugField.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
input.addEventListener("input", () => {
|
|
||||||
slugField.value = convertToSlug(input.value);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// Ensure forms sends in AJAX
|
|
||||||
this.shadowRoot?.querySelectorAll<HTMLFormElement>("form").forEach((form) => {
|
|
||||||
form.addEventListener("submit", (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const formData = new FormData(form);
|
|
||||||
fetch(this.href ? this.href : form.action, {
|
|
||||||
method: form.method,
|
|
||||||
body: formData,
|
|
||||||
redirect: "manual",
|
|
||||||
})
|
|
||||||
.then((response) => {
|
|
||||||
return response.text();
|
|
||||||
})
|
|
||||||
.then((responseData) => {
|
|
||||||
if (responseData.indexOf("csrfmiddlewaretoken") !== -1) {
|
|
||||||
this.modal = responseData;
|
|
||||||
console.debug("authentik/modalbutton: re-showing form");
|
|
||||||
} else {
|
|
||||||
this.open = false;
|
|
||||||
console.debug("authentik/modalbutton: successful submit");
|
|
||||||
this.dispatchEvent(
|
|
||||||
new CustomEvent(EVENT_REFRESH, {
|
|
||||||
bubbles: true,
|
|
||||||
composed: true,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
showMessage({
|
|
||||||
level: MessageLevel.error,
|
|
||||||
message: "Unexpected error"
|
|
||||||
});
|
|
||||||
console.error(e);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onClick(): void {
|
onClick(): void {
|
||||||
if (!this.href) {
|
this.open = true;
|
||||||
this.updateHandlers();
|
this.querySelectorAll("*").forEach(child => {
|
||||||
this.open = true;
|
if ("requestUpdate" in child) {
|
||||||
this.querySelectorAll("*").forEach(child => {
|
(child as LitElement).requestUpdate();
|
||||||
if ("requestUpdate" in child) {
|
}
|
||||||
(child as LitElement).requestUpdate();
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
const request = new Request(this.href);
|
|
||||||
fetch(request, {
|
|
||||||
mode: "same-origin",
|
|
||||||
})
|
|
||||||
.then((response) => response.text())
|
|
||||||
.then((responseData) => {
|
|
||||||
this.modal = responseData;
|
|
||||||
this.open = true;
|
|
||||||
this.querySelectorAll<SpinnerButton>("ak-spinner-button").forEach((sb) => {
|
|
||||||
sb.setDone(PRIMARY_CLASS);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
showMessage({
|
|
||||||
level: MessageLevel.error,
|
|
||||||
message: "Unexpected error"
|
|
||||||
});
|
|
||||||
console.error(e);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
renderModalInner(): TemplateResult {
|
renderModalInner(): TemplateResult {
|
||||||
|
|
@ -202,7 +102,4 @@ export class ModalButton extends LitElement {
|
||||||
${this.open ? this.renderModal() : ""}`;
|
${this.open ? this.renderModal() : ""}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
updated(): void {
|
|
||||||
this.updateHandlers();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in New Issue