notehub/assets/templates/form.html

{{define "Form"}}
<!DOCTYPE html>
<html>
    <head>
        <title>NoteHub &mdash; {{if .ID}}Edit{{else}}Add{{end}} note</title>
        <meta charset="UTF-8" />
        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
        <link href="/style.css" rel="stylesheet" type="text/css" />
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <script src='/note.js'></script>
    </head>
    <body>
        <form autocomplete="off" onsubmit="return false">
            <textarea autofocus id="text">{{.Text}}</textarea>
            <fieldset>
                <input id="id" value="{{.ID}}" type="hidden" />
                <input class="ui-elem" id="password" placeholder="Password for editing" type="text" autocomplete="off" />
                <label style="margin-right: 1em">
                    <input id="tos" type="checkbox" onClick="toggleButton()" />
                    Accept <a href="/TOS.md">Terms of Service</a>
                </label>
                <button class="button ui-elem" disabled id="publish-button" type="button" onclick="grecaptcha.execute()">
                    {{if .ID}}Update{{else}}Publish{{end}} Note
                </button>
                <span id="feedback"></span>
            </fieldset>
        </form>
        <footer>
            <a href="/">&#8962; notehub</a> &middot;
            <a href="https://github.com/chmllr/NoteHub">source code</a> &middot;
            <a href="/TOS.md">terms of service</a>
        </footer>
        <script>
            function $(id) { return document.getElementById(id) }
            function toggleButton() { $('publish-button').disabled = !$('tos').checked }
            function submitForm(token) {
                var id = $("id").value;
                var text = $("text").value;
                var deletion = id != "" && text == "";
                if (deletion && !confirm("Do you want to delete this note?")) {
                    return;
                }
                var resp = post("/", { 
                    "id": id,
                    "text": text,
                    "tos": $("tos").value,
                    "password": $("password").value,
                    "token": token
                }, function (status, responseRaw) {
                    var response = JSON.parse(responseRaw);
                    if (status < 400 && response.Success) {
                        window.location.replace(deletion ? "/" : "/" + response.Payload)
                    } else {
                        grecaptcha.reset();
                        $('feedback').innerHTML = status + ": " + response.Payload;
                    }
                })
            }
        </script>
        <div class="g-recaptcha"
          data-sitekey="6LfamjEUAAAAAANI45H3fpWG_xaSAcpYhENN4EnO"
          data-callback="submitForm"
          data-size="invisible">
        </div>
    </body>
</html>
{{end}}