use graphql api for creating comments

js/customElements/newComment.js

@@ -22,25 +22,113 @@ class newComment extends HTMLElement {
         script.src = "https://hCaptcha.com/1/api.js";
         script.type = 'text/javascript';
         script.onload = () => {
-            let pageName = window.location.pathname.split("/").pop();
-            this.parentElement.innerHTML = ` 
-                <form action="/API/newComment.php" method="post">
-                    <label for="name">Name:</label><br>
-                    <input type="text" id="name" name="name"><br><br>
+            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);
+
             
-                    <label for="email">E-Mail: (wird nicht ver&ouml;ffentlicht)</label><br>
-                    <input type="text" id="email" name="email"><br><br>
+            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);
             
-                    <label for="comment">Kommentar:</label><br>
-                    <textarea name="comment" id="comment"></textarea><br><br>
-                    
-                    <div class="h-captcha" data-theme="dark" data-sitekey="${sitekey}"></div><br>
-                    
-                    <input type="hidden" name="pagename" id="pagename" value="${pageName}">
-                    <input type="submit" value="Kommentar ver&ouml;ffentlichen"><br>
-                    <p>Mit dem Klick auf den obigen Button erkl&auml;ren sie sich mit der <a href="/datenschutzerklaerung.html">Datenschutzerkl&auml;rung</a> einverstanden.</p>
-                </form>
-            `;
+            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: 'query($article: String!, $name: String!, $hCaptchaResponse: String!, $email: String!, $comment: String!) { newComment(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,
+                };
+                let data = (await (await fetch("http://localhost:1234/API/graphql.php", requestOptions)).json()).data;
+                if(data.newComment == "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);
     }