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" />
        <base target="_blank" />
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <script src='/note.js'></script>
    </head>
    <body>
        <form action="/note" autocomplete="off" method="POST" target="_self">
            <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>
                <div id="captcha" class="g-recaptcha" data-sitekey="6LemnDEUAAAAAC6A4VNRefz0BSLiC343W4sXQd6I"></div>
                <button class="button ui-elem" disabled id="publish-button" type="button" onclick="submitForm()">
                    {{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;
                $('captcha').style.display = $('tos').checked ? 'block' : 'none';
            }
            function submitForm() {
                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
                }, function (status, responseRaw) {
                    var response = JSON.parse(responseRaw);
                    if (status < 400 && response.Success) {
                        window.location.replace(deletion ? "/" : "/" + response.Payload)
                    } else {
                        $('feedback').innerHTML = status + ": " + response.Payload;
                    }
                })
            }
        </script>
    </body>
</html>
{{end}}
note editing implemented 8 years ago			`{{define "Form"}}`
new.html form added 8 years ago			`<!DOCTYPE html>`
			`<html>`
			`<head>`
note editing implemented 8 years ago			`<title>NoteHub — {{if .ID}}Edit{{else}}Add{{end}} note</title>`
recaptcha implemented 8 years ago			`<meta charset="UTF-8" />`
			`<meta content="width=device-width, initial-scale=1.0" name="viewport" />`
new.html form added 8 years ago			`<link href="/style.css" rel="stylesheet" type="text/css" />`
recaptcha implemented 8 years ago			`<base target="_blank" />`
			`<script src='https://www.google.com/recaptcha/api.js'></script>`
form submission changed to ajax 8 years ago			`<script src='/note.js'></script>`
new.html form added 8 years ago			`</head>`
			`<body>`
			`<form action="/note" autocomplete="off" method="POST" target="_self">`
form submission changed to ajax 8 years ago			`<textarea autofocus id="text">{{.Text}}</textarea>`
new.html form added 8 years ago			`<fieldset>`
form submission changed to ajax 8 years ago			`<input id="id" value="{{.ID}}" type="hidden" />`
			`<input class="ui-elem" id="password" placeholder="Password for editing" type="text" autocomplete="off" />`
new.html form added 8 years ago			`<label style="margin-right: 1em">`
form submission changed to ajax 8 years ago			`<input id="tos" type="checkbox" onClick="toggleButton()" />`
new.html form added 8 years ago			`Accept <a href="/TOS.md">Terms of Service</a>`
			`</label>`
recaptcha implemented 8 years ago			`<div id="captcha" class="g-recaptcha" data-sitekey="6LemnDEUAAAAAC6A4VNRefz0BSLiC343W4sXQd6I"></div>`
form submission changed to ajax 8 years ago			`<button class="button ui-elem" disabled id="publish-button" type="button" onclick="submitForm()">`
			`{{if .ID}}Update{{else}}Publish{{end}} Note`
			`</button>`
			`<span id="feedback"></span>`
new.html form added 8 years ago			`</fieldset>`
			`</form>`
			`<footer>`
fraud detection added 8 years ago			`<a href="/">⌂ notehub</a> ·`
new.html form added 8 years ago			`<a href="https://github.com/chmllr/NoteHub">source code</a> ·`
			`<a href="/TOS.md">terms of service</a>`
			`</footer>`
			`<script>`
			`function $(id) { return document.getElementById(id) }`
recaptcha implemented 8 years ago			`function toggleButton() {`
			`$('publish-button').disabled = !$('tos').checked;`
			`$('captcha').style.display = $('tos').checked ? 'block' : 'none';`
			`}`
form submission changed to ajax 8 years ago			`function submitForm() {`
			`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`
			`}, function (status, responseRaw) {`
			`var response = JSON.parse(responseRaw);`
			`if (status < 400 && response.Success) {`
			`window.location.replace(deletion ? "/" : "/" + response.Payload)`
			`} else {`
			`$('feedback').innerHTML = status + ": " + response.Payload;`
			`}`
			`})`
			`}`
new.html form added 8 years ago			`</script>`
			`</body>`
			`</html>`
note editing implemented 8 years ago			`{{end}}`