website/js/customElements/newComment.js

class newComment extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `
        <button class="bigButton" id="showCommentButton">Neues Kommentar verfassen</button>
        `;
        document.getElementById("showCommentButton").onclick = this.setupForm;
    }

    async setupForm() {
        var graphql = JSON.stringify({
            query: "query {\r\n  sitekey\r\n}"
          })
          var requestOptions = {
            method: 'POST',
            body: graphql,
          };

        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.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>
            
                    <label for="email">E-Mail: (wird nicht ver&ouml;ffentlicht)</label><br>
                    <input type="text" id="email" name="email"><br><br>
            
                    <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>
            `;
        }
        document.body.append(script);
    }
}

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