mirrors/pastepass
1
0
Fork 0
mirror of https://github.com/v1k45/pastepass.git synced 2026-05-01 21:05:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add form submission loading indicator

Browse Source
This commit is contained in:
Vikas
2024-06-23 12:51:14 +05:30
parent 6488883f3c
commit eb40899606
4 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
views/index.templ
View File

@@ -2,7 +2,7 @@ package views
templ Index() {
@base() {
<form method="post">
<form method="post" onsubmit="event.target.querySelector('button').setAttribute('aria-busy', 'true');">
<textarea
name="text"
placeholder="Paste your secret here, select expiration time and click 'Paste'"

2
views/index_templ.go
View File

@@ -29,7 +29,7 @@ func Index() templ.Component {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form method=\"post\"><textarea name=\"text\" placeholder=\"Paste your secret here, select expiration time and click &#39;Paste&#39;\" aria-label=\"Paste your secret here, select expiration time and click &#39;Paste&#39;\" rows=\"10\" required autofocus></textarea><div style=\"display: flex; align-items: end; justify-content: space-between;\"><div style=\"min-width: 33.33%\"><label for=\"expiration\">Expires In</label> <select id=\"expiration\" name=\"expiration\" aria-label=\"Expires In\"><option value=\"1h\" selected>1 Hour</option> <option value=\"1d\">1 Day</option> <option value=\"1w\">1 Week</option> <option value=\"2w\">2 weeks</option> <option value=\"4w\">4 weeks</option></select></div><div style=\"min-width: 33.33%\"><button type=\"submit\">Paste</button></div></div></form>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form method=\"post\" onsubmit=\"event.target.querySelector(&#39;button&#39;).setAttribute(&#39;aria-busy&#39;, &#39;true&#39;);\"><textarea name=\"text\" placeholder=\"Paste your secret here, select expiration time and click &#39;Paste&#39;\" aria-label=\"Paste your secret here, select expiration time and click &#39;Paste&#39;\" rows=\"10\" required autofocus></textarea><div style=\"display: flex; align-items: end; justify-content: space-between;\"><div style=\"min-width: 33.33%\"><label for=\"expiration\">Expires In</label> <select id=\"expiration\" name=\"expiration\" aria-label=\"Expires In\"><option value=\"1h\" selected>1 Hour</option> <option value=\"1d\">1 Day</option> <option value=\"1w\">1 Week</option> <option value=\"2w\">2 weeks</option> <option value=\"4w\">4 weeks</option></select></div><div style=\"min-width: 33.33%\"><button type=\"submit\">Paste</button></div></div></form>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

26
views/view.templ
View File

@@ -11,9 +11,33 @@ templ View() {
</small>
</p>
</hgroup>
<form method="post">
<form method="post" onsubmit="showPaste(event)">
<button type="submit" style="width: auto;">Show Paste</button>
</form>
<script>
// submit a post request and replace the current page with the response
// this is to prevent user from resubmitting the form when they refresh the page
function showPaste(event) {
event.preventDefault();
// show loading
event.target.querySelector('button').setAttribute('aria-busy', 'true');
fetch(window.location.href, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'submit=true',
}).then(function(response) {
return response.text();
}).then(function(body) {
document.open();
document.write(body);
document.close();
});
}
</script>
</div>
}
}

2
views/view_templ.go
View File

@@ -29,7 +29,7 @@ func View() templ.Component {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div style=\"padding-bottom: 5rem;\"><hgroup><h3>View Paste</h3><p><small style=\"color: #8891A4;\">You can only view this paste once. Make sure to copy it before you close this page.</small></p></hgroup><form method=\"post\"><button type=\"submit\" style=\"width: auto;\">Show Paste</button></form></div>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div style=\"padding-bottom: 5rem;\"><hgroup><h3>View Paste</h3><p><small style=\"color: #8891A4;\">You can only view this paste once. Make sure to copy it before you close this page.</small></p></hgroup><form method=\"post\" onsubmit=\"showPaste(event)\"><button type=\"submit\" style=\"width: auto;\">Show Paste</button></form><script>\n // submit a post request and replace the current page with the response\n // this is to prevent user from resubmitting the form when they refresh the page\n function showPaste(event) {\n event.preventDefault();\n\n // show loading\n event.target.querySelector('button').setAttribute('aria-busy', 'true');\n\n fetch(window.location.href, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: 'submit=true',\n }).then(function(response) {\n return response.text();\n }).then(function(body) {\n document.open();\n document.write(body);\n document.close();\n });\n }\n </script></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}