From df095d22d5a5ddd797cfdf96977db2db5f890b57 Mon Sep 17 00:00:00 2001
From: Iryna Lagno <ilagno@ebay.com>
Date: Tue, 27 Oct 2015 10:43:14 +0200
Subject: [PATCH] MAGETWO-44598: Enhancement request: M2 Checkout: email
 validation error shows when you start typing

---
 .../frontend/web/js/view/customer-email.js    | 100 ++++++++++++------
 .../frontend/web/template/customer-email.html |   4 +-
 2 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/app/code/Magento/Customer/view/frontend/web/js/view/customer-email.js b/app/code/Magento/Customer/view/frontend/web/js/view/customer-email.js
index 5f527d78b4227..27560f99e3f3f 100644
--- a/app/code/Magento/Customer/view/frontend/web/js/view/customer-email.js
+++ b/app/code/Magento/Customer/view/frontend/web/js/view/customer-email.js
@@ -4,8 +4,7 @@
  */
 /*browser:true*/
 /*global define*/
-define(
-    [
+define([
         'jquery',
         'uiComponent',
         'ko',
@@ -16,13 +15,19 @@ define(
         'mage/validation'
     ],
     function ($, Component, ko, customer, checkEmailAvailability, loginAction, quote) {
-        "use strict";
+        'use strict';
+
         return Component.extend({
             defaults: {
                 template: 'Magento_Customer/customer-email',
                 email: '',
+                emailFocused: false,
                 isLoading: false,
-                isPasswordVisible: false
+                isPasswordVisible: false,
+                listens: {
+                    email: 'emailHasChanged',
+                    emailFocused: 'validateEmail'
+                }
             },
             checkDelay: 2000,
             checkRequest: null,
@@ -31,24 +36,26 @@ define(
             forgotPasswordUrl: window.checkoutConfig.forgotPasswordUrl,
             emailCheckTimeout: 0,
 
-            initialize: function() {
-                this._super();
-                var self = this;
-                this.email.subscribe(function() {
-                    self.emailHasChanged();
-                });
-            },
-
-            /** Initialize observable properties */
+            /**
+             * Initialize observable properties of instance
+             *
+             * @returns {Object} Chainable.
+             */
             initObservable: function () {
                 this._super()
-                    .observe(['email', 'isLoading', 'isPasswordVisible']);
+                    .observe(['email', 'emailFocused', 'isLoading', 'isPasswordVisible']);
+
                 return this;
             },
 
+            /**
+             * Callback on changing email property
+             */
             emailHasChanged: function () {
                 var self = this;
+
                 clearTimeout(this.emailCheckTimeout);
+
                 if (self.validateEmail()) {
                     quote.guestEmail = self.email();
                 }
@@ -62,54 +69,77 @@ define(
 
             },
 
-            checkEmailAvailability: function() {
+            /**
+             * Check email existing.
+             */
+            checkEmailAvailability: function () {
                 var self = this;
                 this.validateRequest();
                 this.isEmailCheckComplete = $.Deferred();
                 this.isLoading(true);
                 this.checkRequest = checkEmailAvailability(this.isEmailCheckComplete, this.email());
 
-                $.when(this.isEmailCheckComplete).done(function() {
+                $.when(this.isEmailCheckComplete).done(function () {
                     self.isPasswordVisible(false);
-                }).fail( function() {
+                }).fail(function () {
                     self.isPasswordVisible(true);
                 }).always(function () {
                     self.isLoading(false);
                 });
             },
 
-            validateRequest: function() {
-                /*
-                 * If request has been sent -> abort it.
-                 * ReadyStates for request aborting:
-                 * 1 - The request has been set up
-                 * 2 - The request has been sent
-                 * 3 - The request is in process
-                 */
+            /**
+             * If request has been sent -> abort it.
+             * ReadyStates for request aborting:
+             * 1 - The request has been set up
+             * 2 - The request has been sent
+             * 3 - The request is in process
+             */
+            validateRequest: function () {
+
                 if (this.checkRequest != null && $.inArray(this.checkRequest.readyState, [1, 2, 3])) {
                     this.checkRequest.abort();
                     this.checkRequest = null;
                 }
             },
 
-            validateEmail: function() {
-                var loginFormSelector = 'form[data-role=email-with-possible-login]';
-                $(loginFormSelector).validation();
-                var validationResult = $(loginFormSelector + ' input[name=username]').valid();
-                return Boolean(validationResult);
+            /**
+             * Local email validation.
+             *
+             * @param {Boolean} focused - input focus.
+             * @returns {Boolean} - validation result.
+             */
+            validateEmail: function (focused) {
+                var loginFormSelector = 'form[data-role=email-with-possible-login]',
+                    usernameSelector = loginFormSelector + ' input[name=username]',
+                    loginForm = $(loginFormSelector),
+                    validator;
+
+                loginForm.validation();
+
+                if (focused === false) {
+                    return !!$(usernameSelector).valid();
+                }
+
+                validator = loginForm.validate();
+
+                return validator.check(usernameSelector);
             },
 
-            login: function(loginForm) {
+            /**
+             * Log in form submitting callback.
+             *
+             * @param {HTMLElement} loginForm - form element
+             */
+            login: function (loginForm) {
                 var loginData = {},
                     formDataArray = $(loginForm).serializeArray();
 
                 formDataArray.forEach(function (entry) {
                     loginData[entry.name] = entry.value;
                 });
-                if (this.isPasswordVisible()
-                    && $(loginForm).validation()
-                    && $(loginForm).validation('isValid')
-                ) {
+
+                if (this.isPasswordVisible() && $(loginForm).validation() && $(loginForm).validation('isValid')) {
                     loginAction(loginData);
                 }
             }
diff --git a/app/code/Magento/Customer/view/frontend/web/template/customer-email.html b/app/code/Magento/Customer/view/frontend/web/template/customer-email.html
index a2159cc764d2a..798356eafb674 100644
--- a/app/code/Magento/Customer/view/frontend/web/template/customer-email.html
+++ b/app/code/Magento/Customer/view/frontend/web/template/customer-email.html
@@ -20,7 +20,9 @@
             <div class="control _with-tooltip">
                 <input class="input-text"
                        type="email"
-                       data-bind="textInput: email"
+                       data-bind="
+                       textInput: email,
+                       hasFocus: emailFocused"
                        name="username"
                        data-validate="{required:true, 'validate-email':true}"
                        id="customer-email" />