My application's login form works similar to Google Account login - first the user enters their email address and then either they are redirected to their SSO or are shown a password field.

In the Chromium documentation, Google calls this an "Email First Sign-in Flow", and recommends the following structure to enable password managers to understand the form:

Collect the email:

<form id="login" action="login.php" method="post"> 
  <input type="text" autocomplete="username">
  <input type="submit" value="Sign In!">
</form>

Then collect the password, but include the email as the value of a hidden form field:

<style>
#emailfield {
  display: none;
}
</style>
<form id="login" action="login.php" method="post">
  <input id="emailfield" type="text" value="[email protected]" autocomplete="username">  
  <input type="password" autocomplete="current-password">
  <input type="submit" value="Sign In!">
</form>

Here is how I implemented this in Vue (with Vuetify):

<template>
    <v-app id="sm-login">
        <v-container  fluid>
            <v-card  width="450px" :loading="loading">
                <v-card-title >My App</v-card-title>
                <v-card-subtitle >Log In</v-card-subtitle>
                <v-card-text >
                    <v-form ref="form1" v-if="showForm === 1" @submit.prevent="lookupEmail">
                        <v-text-field
                            autocomplete="username"
                            label="Email"
                            v-model.trim="email"
                            name="email"
                            outlined
                            ref="email"
                            required
                            type="email"
                            :error-messages="errorMessage"
                            :rules="[rules.required, rules.email]" />
                    </v-form>
                    <v-form ref="form2" v-if="showForm === 2" @submit.prevent="login">
                        <input style="display:none" name="email" type="email" v-model="email" readonly autocomplete="username" />
                        <v-chip outlined  close @click:close="showForm = 1"><v-avatar left><v-icon>mdi-account-circle</v-icon></v-avatar> {{email}}</v-chip>
                        <v-text-field
                            label="Password"
                            v-model="password"
                            name="password"
                            outlined
                            ref="password"
                            required
                            spellcheck="false"
                            :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                            :autocomplete="showPassword ? 'off' : 'current-password'"
                            :error-messages="errorMessage"
                            :type="showPassword ? 'text' : 'password'"
                            @click:append="showPassword = !showPassword"
                             />
                    </v-form>
                </v-card-text>
                <v-card-actions>
                    <v-spacer />
                    <v-btn color="primary" @click="clickButton">{{nextButton}}</v-btn>
                </v-card-actions>
            </v-card>
        </v-container>
    </v-app>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            email: '',
            password: '',
            errorMessage: '',
            showForm: 1,
            showPassword: false,
            rules: {
                required: value => !!value || Lang.get('validation-short.email'),
                email: value => {
                    const pattern = /^(([^<>()[\]\\.,;:\s@"] (\.[^<>()[\]\\.,;:\s@"] )*)|(". "))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$/
                    return pattern.test(value) || Lang.get('validation-short.email')
                },
            },
        };
    },
    computed: {
        nextButton() {
            switch (this.showForm) {
            case 1:
                return Lang.get('auth.next');
            case 2:
                return Lang.get('auth.log-in');
            }
        },
    },
    methods: {
        lookupEmail() {
            if (this.$refs.form1.validate()) {
                // The email lookup is done here, and either
                // redirected to SSO or set `this.showForm = 2`
            }
        },
        login() {
            if (this.$refs.form2.validate()) {
                // Login is done here
            }
        },
        clickButton() {
            switch (this.showForm) {
                case 1: return this.lookupEmail();
                case 2: return this.login();
            }
        }
    }
};

Pressing Enter on the first form (with the Email field in focus) works properly - it calls the lookupEmail function. However, pressing it on the second form (with the Password field in focus) does nothing. When I comment out the hidden Email field in the second form, the Enter key submits the form as expected (but the password manager does not have the email address populated).

When I look in the Vue DevTools extension "Events" tab, I see that the Email field triggers two events, keydown on the <VTextField> and submit on the <VForm>. However, the Password field only triggers the keydown event on the <VTextField> but the submit event does not appear in the DevTools.

Why does the hidden field cause the form to stop catching submit events?

CodePudding user response：

Somehow this seems to be related to using v-model on hidden fields.

Changing the code from:

<input style="display:none" name="email" type="email" v-model="email" readonly autocomplete="username" />

to:

<input name="email" type="hidden" :value="email" autocomplete="username" />

appears to fix the issue.

Note that both changes seem to be required: switching from display: none to type="hidden" and from v-model= to :value=