From fa7109260e63bf1084f17a6900901cb6a2975f89 Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas.leder@jobrouter.com>
Date: Mon, 14 Mar 2022 15:37:52 +0100
Subject: [PATCH] use graphql api for creating comments
---
js/customElements/newComment.js | 122 +++++++++++++++++++++++++++-----
1 file changed, 105 insertions(+), 17 deletions(-)
diff --git a/js/customElements/newComment.js b/js/customElements/newComment.js
index 6c0b345..4e8d944 100644
--- a/js/customElements/newComment.js
+++ b/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ö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öffentlichen"><br>
- <p>Mit dem Klick auf den obigen Button erklären sie sich mit der <a href="/datenschutzerklaerung.html">Datenschutzerklä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);
}
--
GitLab