When users login to my application, they first enter their email address like in Google Account login. Depending on the scenario, they are then redirected to a Single Sign-On (SSO) or shown a password field.
In the Chromium documentation, this process is referred to as the "Email First Sign-in Flow", and Google recommends a specific form structure to help password managers understand the form:
First, collect the email:
<form id="login" action="login.php" method="post"> <input type="text" autocomplete="username"> <input type="submit" value="Sign In!"> </form>Then proceed to collect the password, with the email included as a hidden form value:
<style> #emailfield { display: none; } </style> <form id="login" action="login.php" method="post"> <input id="emailfield" type="text" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb2ba9fbaa7beb2afb3baf1abbaacab">[email protected]</a>" autocomplete="username"> <input type="password" autocomplete="current-password"> <input type="submit" value="Sign In!"> </form>
I have implemented this flow using Vue and Vuetify as follows:
<template>
// Vue template implementation goes here...
</template>
<script>
export default {
// Vue script implementation goes here...
};
While pressing Enter works properly on the email form triggering the lookupEmail function, it does not have the same effect on the password form. Removing the hidden email field allows for normal submission behavior that triggers the submit event correctly, albeit without the populated email in the password manager.
Upon inspection with Vue DevTools, I noticed that the email field triggers both the keydown and submit events, while the password field only captures the keydown event but misses the submit event altogether.
The question remains: why does the presence of the hidden email field interfere with the form's ability to catch submit events?