Disable forms upon submission

This is an attempt to avoid duplicate submissions

web/src/main/resources/static/js/index.js

@@ -0,0 +1,11 @@
+const forms = document.getElementsByTagName('form')
+
+for (let i = 0; i < forms.length; i++) {
+    const form = forms[i]
+    form.onsubmit = () => {
+        const inputs = form.getElementsByTagName('input')
+        for (let j = 0; j < inputs.length; j++) {
+            inputs[j].disabled = true
+        }
+    }
+}

web/src/main/resources/static/style.css

@@ -8,6 +8,7 @@ html, body {
     --color-accent: #004800;
     --color-on-accent: #FFFFFF;
     --color-on-background: #000000;
+    --color-on-dim: #222222;
     --logo: url("/img/logo-color.svg");
     --background-color-primary: #ffffff;
     --background-color-secondary: #bbbbbb;
@@ -20,6 +21,7 @@ html, body {
         --color-accent: #baff33;
         --color-on-accent: #000000;
         --color-on-background: #FFFFFF;
+        --color-on-dim: #888888;
         --logo: url("/img/logo-white.svg");
         --background-color-primary: #000000;
         --background-color-secondary: #333333;
@@ -92,6 +94,11 @@ form > input {
     padding: var(--input-padding);
 }
 
+input:disabled {
+    background-color: var(--background-color-secondary);
+    color: var(--color-on-background);
+}
+
 a {
     color: var(--color-accent);
 }

web/src/main/resources/templates/index.mustache

@@ -11,5 +11,6 @@
         </div>
     </div>
 </div>
+{{>partials/foot}}
 </body>
 </html>

web/src/main/resources/templates/login.mustache

@@ -13,11 +13,12 @@
             <input id="username" type="text" name="username" value="{{ username }}"/>
             <label for="password">Password</label>
             <input id="password" type="password" name="password"/>
-            <input type="submit" class="button button-primary" value="Login"/>
+            <input id="submit" type="submit" class="button button-primary" value="Login"/>
         </form>
         <a href="/resetpassword" style="padding: var(--input-padding)">Forgot your password?</a>
         <a href="/register" style="padding: var(--input-padding)">Create an account</a>
     </div>
 </div>
+{{>partials/foot}}
 </body>
 </html>

web/src/main/resources/templates/partials/foot.mustache

@@ -0,0 +1 @@
+<script type="text/javascript" async src="/js/index.js"></script>

web/src/main/resources/templates/register.mustache

@@ -22,5 +22,6 @@
         <a href="/login" style="padding: var(--input-padding)">Login</a>
     </div>
 </div>
+{{>partials/foot}}
 </body>
 </html>