ENGCOM-2096: [Backport-2.1] Trim email address in customer account create and login form #16297

Author: Stanislav Idolov

app/code/Magento/Customer/view/frontend/templates/form/login.phtml

@@ -32,7 +32,7 @@
                 <div class="field email required">
                     <label class="label" for="email"><span><?php echo $block->escapeHtml(__('Email')) ?></span></label>
                     <div class="control">
-                        <input name="login[username]" value="<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()) :?> autocomplete="off"<?php endif; ?> id="email" type="email" class="input-text" title="<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr(__('Email')) ?>" data-validate="{required:true, 'validate-email':true}">
+                        <input name="login[username]" value="<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()) :?> autocomplete="off"<?php endif; ?> id="email" type="email" class="input-text" title="<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr(__('Email')) ?>" data-mage-init='{"mage/trim-input":{}}' data-validate="{required:true, 'validate-email':true}">
                     </div>
                 </div>
                 <div class="field password required">
@@ -51,12 +51,3 @@
     </div>
 </div>
 
-<script type="text/x-magento-init">
-    {
-        ".field.email": {
-            "Magento_Customer/js/trim-username": {
-                "formSelector": "form.form-login"
-            }
-        }
-    }
-</script>

app/code/Magento/Customer/view/frontend/templates/form/register.phtml

@@ -134,7 +134,7 @@
         <div class="field required">
             <label for="email_address" class="label"><span><?php echo $block->escapeHtml(__('Email')) ?></span></label>
             <div class="control">
-                <input type="email" name="email" autocomplete="email" id="email_address" value="<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr($block->getFormData()->getEmail()) ?>" title="<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr(__('Email')) ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
+                <input type="email" name="email" autocomplete="email" id="email_address" value="<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr($block->getFormData()->getEmail()) ?>" title="<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr(__('Email')) ?>" class="input-text" data-mage-init='{"mage/trim-input":{}}' data-validate="{required:true, 'validate-email':true}">
             </div>
         </div>
         <div class="field password required" data-mage-init='{"passwordStrengthIndicator": {}}'>

app/code/Magento/Customer/view/frontend/web/js/model/authentication-popup.js

@@ -31,7 +31,7 @@ define(
 
             /** Show login popup window */
             showModal: function () {
-                $(this.modalWindow).modal('openModal');
+                $(this.modalWindow).modal('openModal').trigger('contentUpdated');
             }
         }
     }

app/code/Magento/Customer/view/frontend/web/js/trim-username.js

@@ -60,6 +60,7 @@
                                    id="email"
                                    type="email"
                                    class="input-text"
+                                   data-mage-init='{"mage/trim-input":{}}'
                                    data-bind="attr: {autocomplete: autocomplete}"
                                    data-validate="{required:true, 'validate-email':true}">
                         </div>

app/code/Magento/Customer/view/frontend/web/template/authentication-popup.html

@@ -0,0 +1,60 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery'
+], function ($) {
+    'use strict';
+
+    $.widget('mage.trimInput', {
+        options: {
+            cache: {}
+        },
+
+        /**
+         * Widget initialization
+         * @private
+         */
+        _create: function () {
+            this.options.cache.input = $(this.element);
+            this._bind();
+        },
+
+        /**
+         * Event binding, will monitor change, keyup and paste events.
+         * @private
+         */
+        _bind: function () {
+            if (this.options.cache.input.length) {
+                this._on(this.options.cache.input, {
+                    'change': this._trimInput,
+                    'keyup': this._trimInput,
+                    'paste': this._trimInput
+                });
+            }
+        },
+
+        /**
+         * Trim value
+         * @private
+         */
+        _trimInput: function () {
+            var input = this._getInputValue().trim();
+
+            this.options.cache.input.val(input);
+        },
+
+        /**
+         * Get input value
+         * @returns {*}
+         * @private
+         */
+        _getInputValue: function () {
+            return this.options.cache.input.val();
+        }
+    });
+
+    return $.mage.trimInput;
+});