diff --git a/app/code/Magento/Customer/view/frontend/templates/form/login.phtml b/app/code/Magento/Customer/view/frontend/templates/form/login.phtml
index 77e250c5de923..2d44dde215139 100644
--- a/app/code/Magento/Customer/view/frontend/templates/form/login.phtml
+++ b/app/code/Magento/Customer/view/frontend/templates/form/login.phtml
@@ -24,7 +24,7 @@
                 <div class="field email required">
                     <label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
                     <div class="control">
-                        <input name="login[username]" value="<?= $block->escapeHtmlAttr($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?> id="email" type="email" class="input-text" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" data-validate="{required:true, 'validate-email':true}">
+                        <input name="login[username]" value="<?= $block->escapeHtmlAttr($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?> id="email" type="email" class="input-text" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" data-mage-init='{"mage/trim-input":{}}' data-validate="{required:true, 'validate-email':true}">
                     </div>
                 </div>
                 <div class="field password required">
@@ -43,12 +43,3 @@
     </div>
 </div>
 
-<script type="text/x-magento-init">
-    {
-        ".field.email": {
-            "Magento_Customer/js/trim-username": {
-                "formSelector": "form.form-login"
-            }
-        }
-    }
-</script>
diff --git a/app/code/Magento/Customer/view/frontend/templates/form/register.phtml b/app/code/Magento/Customer/view/frontend/templates/form/register.phtml
index 43e4e92fd0904..0f7648265ef8b 100644
--- a/app/code/Magento/Customer/view/frontend/templates/form/register.phtml
+++ b/app/code/Magento/Customer/view/frontend/templates/form/register.phtml
@@ -142,6 +142,7 @@
                        class="input-text"
                        data-password-min-length="<?= $block->escapeHtmlAttr($block->getMinimumPasswordLength()) ?>"
                        data-password-min-character-sets="<?= $block->escapeHtmlAttr($block->getRequiredCharacterClassesNumber()) ?>"
+                       data-mage-init='{"mage/trim-input":{}}'
                        data-validate="{required:true, 'validate-customer-password':true}"
                        autocomplete="off">
                 <div id="password-strength-meter-container" data-role="password-strength-meter" aria-live="polite">
diff --git a/app/code/Magento/Customer/view/frontend/web/js/model/authentication-popup.js b/app/code/Magento/Customer/view/frontend/web/js/model/authentication-popup.js
index 3fc65c266e895..c1ca395e46cbb 100644
--- a/app/code/Magento/Customer/view/frontend/web/js/model/authentication-popup.js
+++ b/app/code/Magento/Customer/view/frontend/web/js/model/authentication-popup.js
@@ -34,7 +34,7 @@ define([
 
         /** Show login popup window */
         showModal: function () {
-            $(this.modalWindow).modal('openModal');
+            $(this.modalWindow).modal('openModal').trigger('contentUpdated');
         }
     };
 });
diff --git a/app/code/Magento/Customer/view/frontend/web/js/trim-username.js b/app/code/Magento/Customer/view/frontend/web/js/trim-username.js
deleted file mode 100644
index 69f89cb8fe01f..0000000000000
--- a/app/code/Magento/Customer/view/frontend/web/js/trim-username.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
- */
-
-define([
-    'jquery'
-], function ($) {
-    'use strict';
-
-    $.widget('mage.trimUsername', {
-        options: {
-            cache: {},
-            formSelector: 'form',
-            emailSelector: 'input[type="email"]'
-        },
-
-        /**
-         * Widget initialization
-         * @private
-         */
-        _create: function () {
-            // We need to look outside the module for backward compatibility, since someone can already use the module.
-            // @todo Narrow this selector in 2.3 so it doesn't accidentally finds the the email field from the
-            // newsletter email field or any other "email" field.
-            this.options.cache.email = $(this.options.formSelector).find(this.options.emailSelector);
-            this._bind();
-        },
-
-        /**
-         * Event binding, will monitor change, keyup and paste events.
-         * @private
-         */
-        _bind: function () {
-            if (this.options.cache.email.length) {
-                this._on(this.options.cache.email, {
-                    'change': this._trimUsername,
-                    'keyup': this._trimUsername,
-                    'paste': this._trimUsername
-                });
-            }
-        },
-
-        /**
-         * Trim username
-         * @private
-         */
-        _trimUsername: function () {
-            var username = this._getUsername().trim();
-
-            this.options.cache.email.val(username);
-        },
-
-        /**
-         * Get username value
-         * @returns {*}
-         * @private
-         */
-        _getUsername: function () {
-            return this.options.cache.email.val();
-        }
-    });
-
-    return $.mage.trimUsername;
-});
diff --git a/app/code/Magento/Customer/view/frontend/web/template/authentication-popup.html b/app/code/Magento/Customer/view/frontend/web/template/authentication-popup.html
index 6b3a232cd3e39..ca4f8b4f03b13 100644
--- a/app/code/Magento/Customer/view/frontend/web/template/authentication-popup.html
+++ b/app/code/Magento/Customer/view/frontend/web/template/authentication-popup.html
@@ -60,6 +60,7 @@
                                    id="customer-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>
diff --git a/lib/web/mage/trim-input.js b/lib/web/mage/trim-input.js
new file mode 100644
index 0000000000000..678192dcf61ac
--- /dev/null
+++ b/lib/web/mage/trim-input.js
@@ -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;
+});