From eb4089960636a8ec277055338339ea0db32aa408 Mon Sep 17 00:00:00 2001
From: Vikas <v1k45x@gmail.com>
Date: Sun, 23 Jun 2024 12:51:14 +0530
Subject: [PATCH] Add form submission loading indicator

---
 views/index.templ    |  2 +-
 views/index_templ.go |  2 +-
 views/view.templ     | 26 +++++++++++++++++++++++++-
 views/view_templ.go  |  2 +-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/views/index.templ b/views/index.templ
index 8dc6151..14d611f 100644
--- a/views/index.templ
+++ b/views/index.templ
@@ -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'"
diff --git a/views/index_templ.go b/views/index_templ.go
index c113bbd..17ae433 100644
--- a/views/index_templ.go
+++ b/views/index_templ.go
@@ -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
 			}
diff --git a/views/view.templ b/views/view.templ
index 5c8d2cf..94836dc 100644
--- a/views/view.templ
+++ b/views/view.templ
@@ -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>
     }
 }
diff --git a/views/view_templ.go b/views/view_templ.go
index ae52b82..108ef0e 100644
--- a/views/view_templ.go
+++ b/views/view_templ.go
@@ -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
 			}