fix: Disable submit buttons until form data is loaded

templates/identity/account/create-client-credentials.html.ejs

@@ -15,7 +15,7 @@
   </fieldset>
 
   <ul class="actions">
-    <li><button type="submit" name="submit">Create token</button></li>
+    <li><button type="submit" name="submit" disabled>Create token</button></li>
     <li><button type="button" id="account-link">Back</button></li>
   </ul>
 </form>

templates/identity/account/create-pod.html.ejs

@@ -34,7 +34,7 @@
   </fieldset>
 
   <ul class="actions">
-    <li><button type="submit" name="submit">Create pod</button></li>
+    <li><button type="submit" name="submit" disabled>Create pod</button></li>
     <li><button type="button" id="account-link">Back</button></li>
   </ul>
 </form>

templates/identity/account/link-webid.html.ejs

@@ -13,7 +13,7 @@
   </fieldset>
 
   <ul class="actions">
-    <li><button type="submit" name="submit">Link WebID to account</button></li>
+    <li><button type="submit" name="submit" disabled>Link WebID to account</button></li>
     <li><button type="button" id="account-link">Back</button></li>
   </ul>
 </form>

templates/identity/account/pod-settings.html.ejs

@@ -23,7 +23,7 @@
   </fieldset>
 
   <p class="actions">
-    <button type="submit" name="submit">Add owner</button>
+    <button type="submit" name="submit" disabled>Add owner</button>
     <button type="button" id="account-link">Back</button>
   </p>
 </form>

templates/identity/login.html.ejs

@@ -8,7 +8,7 @@
     </ol>
   </fieldset>
 
-  <p class="actions"><button id="submit" type="submit" name="submit">Confirm login method</button></p>
+  <p class="actions"><button id="submit" type="submit" name="submit" disabled>Confirm login method</button></p>
 </form>
 
 <script>
@@ -37,13 +37,13 @@
           </label>
         </li>`);
     }
-  })();
 
-  addPostListener(() => {
+    addPostListener(() => {
-    const formData = new FormData(form);
+      const formData = new FormData(mainForm);
-    const url = formData.get('loginMethod');
+      const url = formData.get('loginMethod');
-    if (url) {
+      if (url) {
-      location.href = url;
+        location.href = url;
-    }
+      }
-  });
+    });
+  })();
 </script>

templates/identity/oidc/consent.html.ejs

@@ -21,7 +21,7 @@
   </fieldset>
 
   <p class="actions">
-    <button id="authorize" type="submit" autofocus>Authorize</button>
+    <button id="authorize" type="submit" disabled autofocus>Authorize</button>
     <button id="cancel" type="button">Cancel</button>
     <button id="edit-account" type="button" class="alternate">Edit account</button>
     <button id="switch-account" type="button" class="alternate">Use a different account</button>

templates/identity/password/create.html.ejs

@@ -21,7 +21,7 @@
   </fieldset>
 
   <ul class="actions">
-    <li><button type="submit" name="submit">Add login</button></li>
+    <li><button type="submit" name="submit" disabled>Add login</button></li>
     <li><button type="button" id="account-link">Back</button></li>
   </ul>
 </form>

templates/identity/password/forgot.html.ejs

@@ -13,7 +13,7 @@
     </fieldset>
 
     <ul class="actions">
-      <li><button type="submit" name="submit">Send recovery email</button></li>
+      <li><button type="submit" name="submit" disabled>Send recovery email</button></li>
       <li><button type="button" id="input-login-link">Back</button></li>
     </ul>
   </form>

templates/identity/password/login.html.ejs

@@ -20,7 +20,7 @@
   </fieldset>
 
   <p class="actions">
-    <button type="submit" name="submit">Log in</button>
+    <button type="submit" name="submit" disabled>Log in</button>
     <button class="hidden" type="button" id="cancel">Cancel</button>
   </p>
 
@@ -51,7 +51,7 @@
         controls = await fetchControls('<%= idpIndex %>');
         location.href = controls.html.account.account;
       }
-    })
+    });
 
     updateElement('register-link', controls.html.password.register, { href: true });
     updateElement('forgot-link', controls.html.password.forgot, { href: true });

templates/identity/password/register.html.ejs

@@ -21,7 +21,7 @@
   </fieldset>
 
   <p class="actions">
-    <button type="submit" name="submit">Register</button>
+    <button type="submit" name="submit" disabled>Register</button>
     <button type="button" id="login-link">Back</button>
   </p>
 </form>

templates/identity/password/reset.html.ejs

@@ -16,7 +16,7 @@
       </ol>
     </fieldset>
 
-    <p class="actions"><button type="submit" name="submit">Reset password</button></p>
+    <p class="actions"><button type="submit" name="submit" disabled>Reset password</button></p>
   </form>
 </div>
 <div id="response-partial">

templates/identity/password/update.html.ejs

@@ -20,7 +20,7 @@
   </fieldset>
 
   <ul class="actions">
-    <li><button type="submit" name="submit">Change password</button></li>
+    <li><button type="submit" name="submit" disabled>Change password</button></li>
     <li><button type="button" id="account-link">Back</button></li>
   </ul>
 </form>

templates/scripts/util.js

@@ -54,6 +54,10 @@ async function postJsonForm(target = '', expectRedirect = false, transform = jso
 function addPostListener(callback, formId = 'mainForm', errorId = 'error') {
   const form = document.getElementById(formId);
 
+  // By default, we disable all submit buttons to prevent them from being clicked before content is loaded
+  const submit = form.querySelector('button[type="submit"]');
+  submit.disabled = false;
+
   form.addEventListener('submit', async(event) => {
     event.preventDefault();
 

templates/styles/main.css

@@ -228,6 +228,9 @@ button:hover {
 button[type=submit] {
   font-weight: 600;
 }
+button:disabled {
+  background-color: var(--solid-gray);
+}
 
 button.alternate {
   display: block;