jonasled2/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

use graphql api for creating comments

Browse source
This commit is contained in:
Jonas Leder 2022-03-14 15:37:52 +01:00
parent 7fe912b172
commit fa7109260e
No known key found for this signature in database
GPG key ID: 8A53DD45A7D7B44B
1 changed files with 105 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
js/customElements/newComment.js
View file

@ -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);
}