crappyrules/notehub
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

form submission changed to ajax

Browse Source
This commit is contained in:
Christian Müller
2017-09-23 23:29:06 +02:00
parent bd3e4a30af
commit 53f2dad4a2
7 changed files with 95 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/templates/form.html
+30 -5
View File
@@ -8,19 +8,23 @@
<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 name="text">{{.Text}}</textarea>
<textarea autofocus id="text">{{.Text}}</textarea>
<fieldset>
<input id="id" name="id" value="{{.ID}}" type="hidden" />
<input class="ui-elem" name="password" placeholder="Password for editing" type="text" autocomplete="off" />
<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" name="tos" type="checkbox" onClick="toggleButton()" />
<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>
<input class="button ui-elem" disabled id="publish-button" name="button" type="submit" value="Publish Note" />
<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>
@@ -34,6 +38,27 @@
$('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>
assets/templates/note.html
+2 -13
View File
@@ -6,6 +6,7 @@
<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='/note.js'></script>
</head>
<body>
{{.Ads}}
@@ -18,21 +19,9 @@
<a href="/{{.ID}}/stats">statistics</a> &middot;
<a href="/{{.ID}}/edit">edit</a> &middot;
<a href="/{{.ID}}/export">export</a> &middot;
<a href="javascript:void(0)" onclick="report()">report abuse</a> &middot;
<a href="javascript:void(0)" onclick="report({{.ID}})">report abuse</a> &middot;
{{end}}
<a href="/TOS.md">terms of service</a>
<script>
function report() {
var resp = prompt("Please shortly explain the problem with this note.");
if (resp) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/{{.ID}}/report');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("report=" + encodeURIComponent(resp));
alert("Thank you!")
}
}
</script>
</footer>
</body>
</html>