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

Author: dpalou

src/core/login/pages/credentials/credentials.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ViewChild, ElementRef } from '@angular/core';
+import { Component, ViewChild, ElementRef, OnDestroy } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreAppProvider } from '@providers/app';
@@ -25,6 +25,7 @@ import { CoreLoginHelperProvider } from '../../providers/helper';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { CoreConfigConstants } from '../../../../configconstants';
 import { CoreCustomURLSchemes } from '@providers/urlschemes';
+import { Subscription } from 'rxjs';
 
 /**
  * Page to enter the user credentials.
@@ -34,7 +35,7 @@ import { CoreCustomURLSchemes } from '@providers/urlschemes';
     selector: 'page-core-login-credentials',
     templateUrl: 'credentials.html',
 })
-export class CoreLoginCredentialsPage {
+export class CoreLoginCredentialsPage implements OnDestroy {
 
     @ViewChild('credentialsForm') formElement: ElementRef;
 
@@ -57,6 +58,7 @@ export class CoreLoginCredentialsPage {
     protected viewLeft = false;
     protected siteId: string;
     protected urlToOpen: string;
+    protected valueChangeSubscription: Subscription;
 
     constructor(private navCtrl: NavController,
             navParams: NavParams,
@@ -89,6 +91,28 @@ export class CoreLoginCredentialsPage {
         } else {
             this.showScanQR = false;
         }
+
+        if (appProvider.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.debounceTime(1000).subscribe((changes) => {
+                if (!this.formElement || !this.formElement.nativeElement) {
+                    return;
+                }
+
+                const usernameInput = this.formElement.nativeElement.querySelector('input[name="username"]');
+                const passwordInput = this.formElement.nativeElement.querySelector('input[name="password"]');
+                const usernameValue = usernameInput && usernameInput.value;
+                const passwordValue = passwordInput && passwordInput.value;
+
+                if (typeof usernameValue != 'undefined' && usernameValue != changes.username) {
+                    this.credForm.get('username').setValue(usernameValue);
+                }
+                if (typeof passwordValue != 'undefined' && passwordValue != changes.password) {
+                    this.credForm.get('password').setValue(passwordValue);
+                }
+            });
+        }
     }
 
     /**
@@ -336,4 +360,11 @@ export class CoreLoginCredentialsPage {
             }
         }
     }
+
+    /**
+     * Component destroyed.
+     */
+    ngOnDestroy(): void {
+        this.valueChangeSubscription && this.valueChangeSubscription.unsubscribe();
+    }
 }