website/js/customElements/newComment.js

class newComment extends HTMLElement {
    connectedCallback() {
        const buttonElement = document.createElement("button");
        buttonElement.classList.add("bigButton");
        buttonElement.id = "showCommentButton";
        buttonElement.innerText = "Neues Kommentar verfassen";
        this.appendChild(buttonElement);
        buttonElement.onclick = this.setupForm;
    }

    async setupForm() {
        var graphql = JSON.stringify({
            query: "query {sitekey}"
        })
        var requestOptions = {
            method: 'POST',
            body: graphql,
            headers: { 'Content-Type': 'application/json' }
        };

        let sitekey = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.sitekey;

        let script = document.createElement('script');
        script.src = "https://hCaptcha.com/1/api.js";
        script.type = 'text/javascript';
        script.onload = () => {
            let pageName = window.location.pathname
            const parent = this.parentElement;
            parent.innerHTML = "";

            const form = document.createElement("form");
            parent.appendChild(form);

            const labelName = document.createElement("label")
            labelName.setAttribute("for", "name");
            labelName.innerText = "Name:";
            form.appendChild(labelName);

            const nameInput = document.createElement("input");
            nameInput.type = "text";
            nameInput.name = "name";
            nameInput.id = "name";
            form.appendChild(nameInput);

            let linebreak = document.createElement("br");
            form.appendChild(linebreak);

            const labelMail = document.createElement("label")
            labelMail.setAttribute("for", "email");
            labelMail.innerText = "E-Mail: (wird nicht veröffentlicht)";
            form.appendChild(labelMail);

            const mailInput = document.createElement("input");
            mailInput.type = "email";
            mailInput.name = "email";
            mailInput.id = "email";
            form.appendChild(mailInput);

            linebreak = document.createElement("br");
            form.appendChild(linebreak);

            const labelComment = document.createElement("label")
            labelComment.setAttribute("for", "comment");
            labelComment.innerText = "Kommentar:";
            form.appendChild(labelComment);

            const commentInput = document.createElement("textarea");
            commentInput.name = "comment";
            commentInput.id = "comment";
            form.appendChild(commentInput);


            linebreak = document.createElement("br");
            form.appendChild(linebreak);

            const hcaptcha = document.createElement("div");
            hcaptcha.classList.add("h-captcha");
            hcaptcha.setAttribute("data-theme", "dark");
            hcaptcha.setAttribute("data-sitekey", sitekey);
            form.appendChild(hcaptcha);

            linebreak = document.createElement("br");
            form.appendChild(linebreak);

            const submitButton = document.createElement("input");
            submitButton.value = "Kommentar veröffentlichen";
            submitButton.type = "submit";
            form.appendChild(submitButton);

            const labelDatenschutz = document.createElement("p");
            labelDatenschutz.innerText = "Mit dem Klick auf den obigen Button erklären sie sich mit der ";
            form.appendChild(labelDatenschutz);

            const datenschutzLink = document.createElement("a");
            datenschutzLink.innerText = "Datenschutzerklärung";
            datenschutzLink.href = "/datenschutzerklaerung.html";
            labelDatenschutz.appendChild(datenschutzLink);

            const datenschutzTextNode = document.createTextNode(" einverstanden");
            labelDatenschutz.appendChild(datenschutzTextNode);

            submitButton.onclick = async () => {
                if (nameInput.value == "" || commentInput.value == "") {
                    alert("Name oder Kommentar nicht ausgefüllt.");
                    return;
                }

                var graphql = JSON.stringify({
                    query: 'mutation($article: String!, $name: String!, $hCaptchaResponse: String!, $email: String!, $comment: String!) { comment(article: $article, name: $name, email: $email, comment: $comment, hCaptchaResponse: $hCaptchaResponse)}',
                    variables: {
                        "article": pageName,
                        "name": nameInput.value,
                        "email": mailInput.value,
                        "comment": commentInput.value,
                        "hCaptchaResponse": form.querySelector(".h-captcha iframe").getAttribute("data-hcaptcha-response")
                    }
                })
                var requestOptions = {
                    method: 'POST',
                    body: graphql,
                    headers: { 'Content-Type': 'application/json' }
                };
                let data = (await (await fetch("/API/graphql.php", requestOptions)).json()).data;
                if (data.comment == "OK") {
                    document.querySelector("jl-comments_display").getComments();
                    parent.innerHTML = "<jl-new_comment></jl-new_comment>"
                } else {
                    alert("Fehler: " + data.newComment);
                }
            }

            form.onsubmit = () => {
                return false;
            }
        }
        document.body.append(script);
    }
}

customElements.define("jl-new_comment", newComment);