chore: otp ux (#481)

* chore: otp ux

prevent form resubmission and improve backspace function

* chore: update test

update test assertion for disabling

Author: jlangy

docker/otp-provider/e2e/otp.spec.ts

@@ -91,7 +91,12 @@ test('OTP Attempts Limit', async ({ page }, testInfo) => {
   await expect(page.locator('#otp-error')).toMatchAriaSnapshot(
     `- text: You've tried too many times. Please send a new code.`,
   );
-  await expect(page.getByRole('button', { name: 'Continue' })).toBeDisabled();
+  // Assert all inputs are disabled
+  const inputs = await page.$$('input');
+  for (const input of inputs) {
+    const isDisabled = await input.isDisabled();
+    expect(isDisabled).toBe(true);
+  }
 });
 
 test('OTP Success', async ({ page }, testInfo) => {

docker/otp-provider/src/client/otp.ts

@@ -7,6 +7,9 @@ document.addEventListener('DOMContentLoaded', () => {
   const waitTimeElement = document.getElementById('wait-time-text') as HTMLElement | null;
   const codeContainer = document.getElementById('new-code-text');
   const loginButton = document.getElementById('login-button') as HTMLButtonElement;
+  let submitting = false;
+  if (loginButton) loginButton.remove();
+
   if (!form || !errorEl) return;
 
   form.setAttribute('novalidate', '');
@@ -20,15 +23,19 @@ document.addEventListener('DOMContentLoaded', () => {
 
   form.addEventListener('submit', (e) => {
     e.preventDefault();
+    if (submitting) {
+      return;
+    }
+    submitting = true;
     const codes = digitInputs.map((input) => input.value).filter((val) => val !== '');
     const [, error] = otpValidator(codes);
     if (error) {
-      setFormError(errorEl, loginButton, error as string);
+      setFormError(errorEl, error as string);
+      submitting = false;
       const firstEmptyInput = digitInputs.find((input) => input?.value === '');
       if (firstEmptyInput) firstEmptyInput.focus();
       else digitInputs[0].focus();
     } else {
-      loginButton.disabled = true;
       form.submit();
     }
   });
@@ -41,9 +48,9 @@ document.addEventListener('DOMContentLoaded', () => {
       const value = e.data;
       if (!value) return;
 
-      clearFormError(errorEl, loginButton);
+      clearFormError(errorEl);
       if (!otpValidDigits.includes(value)) {
-        setFormError(errorEl, loginButton, errors.OTP_TYPES);
+        setFormError(errorEl, errors.OTP_TYPES);
         (e.target as HTMLInputElement)?.focus();
         return;
       }
@@ -54,7 +61,7 @@ document.addEventListener('DOMContentLoaded', () => {
       else {
         const codes = digitInputs.map((input) => input.value);
         const [, error] = otpValidator(codes);
-        if (error) setFormError(errorEl, loginButton, error as string);
+        if (error) setFormError(errorEl, error as string);
         else form.requestSubmit();
       }
     });
@@ -77,7 +84,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
       const [, error] = otpValidator(fullCode);
       if (error) {
-        setFormError(errorEl, loginButton, error as string);
+        setFormError(errorEl, error as string);
         return;
       }
 
@@ -90,12 +97,15 @@ document.addEventListener('DOMContentLoaded', () => {
         e.preventDefault();
         form.requestSubmit();
       }
-      if (e.key === 'Backspace' && input.value === '') {
+      if (e.key === 'Backspace') {
         e.preventDefault();
-        clearFormError(errorEl, loginButton);
-        if (i > 0) {
+        clearFormError(errorEl);
+        // When passed the first input and hitting backspace on an empty field, want to clear and focus the previous input
+        if (input.value === '' && i > 0) {
           digitInputs[i - 1].value = '';
           digitInputs[i - 1].focus();
+        } else {
+          input.value = '';
         }
       }
     });

docker/otp-provider/src/client/shared.ts

@@ -55,28 +55,33 @@ export const getUID = () => location.pathname.split('/')[location.pathname.split
 /**
  * Set the form error message.
  * @param errorEl The HTML Element in which to render the message.
- * @param submitButton The HTML Button Element to submit the form.
  * @param errorText The error message to display.
+ * @param submitButton The HTML Button Element to submit the form.
  */
-export const setFormError = (errorEl: HTMLElement, submitButton: HTMLButtonElement, errorText: string) => {
+export const setFormError = (errorEl: HTMLElement, errorText: string, submitButton?: HTMLButtonElement,) => {
   clearFormError(errorEl, submitButton);
-  submitButton.disabled = true;
-  const img = document.createElement('img');
-  img.src = '/img/caution.svg';
-  img.alt = 'Caution';
-  img.className = 'w-16 h-16';
-  submitButton.appendChild(img);
   errorEl.textContent = errorText;
+
+  if (submitButton) {
+    submitButton.disabled = true;
+    const img = document.createElement('img');
+    img.src = '/img/caution.svg';
+    img.alt = 'Caution';
+    img.className = 'w-16 h-16';
+    submitButton.appendChild(img);
+  }
 };
 
 /**
  * Clear form errors.
  * @param errorEl The HTML Element in which to render the message.
  * @param submitButton The HTML Button Element to submit the form.
  */
-export const clearFormError = (errorEl: HTMLElement, submitButton: HTMLButtonElement) => {
+export const clearFormError = (errorEl: HTMLElement, submitButton?: HTMLButtonElement) => {
   errorEl.textContent = '';
-  submitButton.disabled = false;
-  const cautionImg = submitButton.querySelector('img');
-  if (cautionImg) cautionImg.remove();
+  if (submitButton) {
+    submitButton.disabled = false;
+    const cautionImg = submitButton.querySelector('img');
+    if (cautionImg) cautionImg.remove();
+  }
 };

docker/otp-provider/src/client/signin.ts

@@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const [emailValid, error] = emailValidator(emailContent);
 
     if (!emailValid) {
-      setFormError(errorField, submitButton, error as string);
+      setFormError(errorField, error as string, submitButton);
       return;
     }
     form.submit();