2FA code entry form already submitted while password manager (1password) not done filling the code yet

[hrak]

ISSUE TYPE

• Bug Report

COMPONENT NAME

UI

CLOUDSTACK VERSION

4.18

CONFIGURATION

N/A

OS / ENVIRONMENT

Mac OS X Sonoma, 1password 8 for Mac

SUMMARY

When using 1password as password manager, and using the TOTP feature in 1password to have it fill in the 2FA code, the 2FA code entry form gets submitted prematurely (before 1password is done filling the form) causing a failed login.

STEPS TO REPRODUCE

• Use 1password with TOTP to fill in the login form and 2FA code
• Failed login due to form already being submitted before 2fa code is fully filled in by 1password

EXPECTED RESULTS

Successful login

ACTUAL RESULTS

Failed login due to form already being submitted before 2fa code is fully filled in by 1password

[hrak]

Looked into this a bit, and currently the form element for the 2FA code is defined as this, which does not seem to be the right approach for a 2FA code form input element

<input placeholder="xxxxxx" type="password" id="code" class="ant-input">

A better approach would be something like this (derived from this blog post):

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

[rohityadavcloud]

@hrak sounds like the credential filling is something the app does? Feel free to experiment if cloudstack UI can be changed with your suggested changes, and raise a PR !

[mgagne]

I have the same issue. I found the issue to be caused by 1Password being confused by the page having 2 nested <form> elements: https://github.com/apache/cloudstack/blob/main/ui/src/views/dashboard/VerifyTwoFa.vue#L20

Removing one fixes the auto-fill issue. (tested by using Inspect Element)

Meanwhile I'm using this Greasemonkey script to address the issue in Firefox:

// ==UserScript==
// @name     Fix CloudStack Dashboard 2FA form
// @version  1
// @grant    none
// ==/UserScript==

const observeDOM = (fn, e = document.documentElement, config = { attributes: 1, childList: 1, subtree: 1 }, o = new MutationObserver(fn)) => (o.observe(e,config),()=>o.disconnect());

observeDOM(() => {
  const form = document.querySelector("div#app>div>form.ant-form-horizontal");
  if (form && form.parentNode) {
    const formTitle = form.querySelector("h1:first-of-type");
    if (formTitle.textContent === "Two Factor Authentication") {
      while (form.firstChild) {
        form.parentNode.insertBefore(form.firstChild, form);
      }
      form.remove();
    }
  }
}, document.querySelector("div#app"));