EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 login: Fix iOS auto-fill in credentials

main
Dani Palou 2021-06-04 10:37:34 +02:00
parent 51e172cd23
commit 32810c54f0
1 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/core/features/login/pages/credentials/credentials.ts
View File

@ -14,6 +14,8 @@
import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { CoreApp } from '@services/app';
import { CoreSites } from '@services/sites';
@ -36,7 +38,7 @@ import { CoreForms } from '@singletons/form';
})
export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
@ViewChild('credentialsForm') formElement?: ElementRef;
@ViewChild('credentialsForm') formElement?: ElementRef<HTMLFormElement>;
credForm!: FormGroup;
siteUrl!: string;
@ -57,6 +59,7 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
protected viewLeft = false;
protected siteId?: string;
protected urlToOpen?: string;
protected valueChangeSubscription?: Subscription;
constructor(
protected fb: FormBuilder,
@ -96,6 +99,28 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
this.siteChecked = true;
this.pageLoaded = true;
}
if (CoreApp.isIOS()) {
// Make iOS auto-fill work. The field that isn't focused doesn't get updated, do it manually.
// Debounce it to prevent triggering this function too often when the user is typing.
this.valueChangeSubscription = this.credForm.valueChanges.pipe(debounceTime(1000)).subscribe((changes) => {
if (!this.formElement || !this.formElement.nativeElement) {
return;
}
const usernameInput = this.formElement.nativeElement.querySelector<HTMLInputElement>('input[name="username"]');
const passwordInput = this.formElement.nativeElement.querySelector<HTMLInputElement>('input[name="password"]');
const usernameValue = usernameInput?.value;
const passwordValue = passwordInput?.value;
if (usernameValue !== undefined && usernameValue !== changes.username) {
this.credForm.get('username')?.setValue(usernameValue);
}
if (passwordValue !== undefined && passwordValue !== changes.password) {
this.credForm.get('password')?.setValue(passwordValue);
}
});
}
}
/**
@ -307,6 +332,7 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
ngOnDestroy(): void {
this.viewLeft = true;
CoreEvents.trigger(CoreEvents.LOGIN_SITE_UNCHECKED, { config: this.siteConfig }, this.siteId);
this.valueChangeSubscription?.unsubscribe();
}
}