Hello, I have a problem with the password saving system on my Ionic 5 / Vue.js 3 application (it will only be used on Android devices) :
The Google pop-up as in the image above is not shown at the right moment.
It sometimes doesn’t show up at all, or it is triggered when I press the system “Home” or “Recent app” Android buttons.
Here is a snippet of my Login.vue component.
<form method="post" @submit.prevent="handleSubmit" autocomplete="on">
<ion-item lines="full">
<ion-label position="floating">Email</ion-label>
<ion-input name="email" v-model="email" type="email" pattern="email" required autocomplete="email"
inputmode="email" @blur="v$.email.$touch"></ion-input>
</ion-item>
<ion-item lines="full">
<ion-label position="floating">Password</ion-label>
<ion-input name="password" v-model="password" :type="passwordType" pattern="password" required
autocomplete="current-password" minLength="8" maxLength="16" @blur="v$.password.$touch"
@keyup.enter="handleSubmit"></ion-input>
<ion-button class="custom-hide" slot="end" @click="hideShowPassword()">
<ion-icon :icon="hidePassword ? eyeOutline : eyeOffOutline"></ion-icon>
</ion-button>
</ion-item>
<ion-button class="login-button" @click="handleSubmit"
type="submit" :disabled="!isAllowedSubmit"
color="primary" expand="block">
Login
</ion-button>
</form>
I’m using the @vuelidate/core library for form validation.
In the handleSubmit function, I look for errors, then if there is no error, I navigate to my Home page.
async handleSubmit() {
this.isAllowedSubmit = false;
this.v$.$touch();
if (this.v$.$error) {
setTimeout(() => {
this.isAllowedSubmit = true;
}, 1000);
return;
}
else {
//API call, no problem here
const tryLogin = await this.submitForm();
if (tryLogin) {
this.v$.$reset();
await this.router.replace("/logged");
await this.router.push("/modules/home");
}
return;
}
Any help would be welcomed!
I posted the question on StackOverflow too : android - Trigerring the password saving by Google when loging In - Stack Overflow
