Debounce Support in New Universal Login Page Template

Knowledge Articles
, ,
1

Overview

This article will provide a solution for implementing debounce support in the New Universal Login Page Template. This will prevent users from double-clicking on any of the submit buttons in the flow.

Applies To

  • Page Templates
  • New Universal Login

Solution

Add the following code snippet to the New Universal Login page template:

if (form && button) {
  form.addEventListener('submit', (event) => {
    if (button.disabled) {
      event.preventDefault();
      return;
    }


    // Delay disabling the button to ensure the submit value is captured
    setTimeout(() => {
      button.disabled = true; // Disable the button after submission
    }, 0); // Delay to ensure form submission completes first
    
    // Re-enable the button after 3000ms to allow future submissions
    setTimeout(() => {
      button.disabled = false;
    }, 3000);
  });
};

Deferring disabling the button with setTimeout allows the form submission process to complete before disabling the button, ensuring the button’s value is included in the formData. This technique leverages the event loop to manage execution order and timing effectively.

Please test this solution in a testing environment before deploying it to production.