From 4fd47e561903cdb2c5bf48b372419177acf952c3 Mon Sep 17 00:00:00 2001
From: Dariusz Szut <dew326@gmail.com>
Date: Thu, 13 Jan 2022 08:33:32 +0100
Subject: [PATCH] IBX-1866: Disable login when fields are empty (#172)

---
 src/bundle/Resources/public/js/scripts/login.js   | 15 +++++++++++++++
 .../themes/admin/account/login/index.html.twig    |  9 +++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/bundle/Resources/public/js/scripts/login.js b/src/bundle/Resources/public/js/scripts/login.js
index e3d6cdf833..84bdc30639 100644
--- a/src/bundle/Resources/public/js/scripts/login.js
+++ b/src/bundle/Resources/public/js/scripts/login.js
@@ -2,6 +2,14 @@
     const passwordInputNode = doc.querySelector('.ibexa-login__input--password');
     const viewIconNode = doc.querySelector('.ibexa-login__password-visibility-toggler .ibexa-icon--view');
     const viewHideIconNode = doc.querySelector('.ibexa-login__password-visibility-toggler .ibexa-icon--view-hide');
+    const loginBtn = doc.querySelector('.ibexa-login__btn--sign-in');
+    const nameInput = doc.querySelector('.ibexa-login__input--name');
+    const passwordInput = doc.querySelector('.ibexa-login__input--password');
+    const toggleLoginBtnState = () => {
+        const shouldBeDisabled = !nameInput.value || !passwordInput.value;
+
+        loginBtn.toggleAttribute('disabled', shouldBeDisabled);
+    };
 
     doc.querySelector('.ibexa-login__password-visibility-toggler').addEventListener('click', (event) => {
         if (passwordInputNode) {
@@ -12,4 +20,11 @@
             viewHideIconNode.classList.toggle('d-none');
         }
     });
+
+    if (loginBtn) {
+        nameInput.addEventListener('keyup', toggleLoginBtnState, false);
+        passwordInput.addEventListener('keyup', toggleLoginBtnState, false);
+
+        toggleLoginBtnState();
+    }
 })(window, window.document);
diff --git a/src/bundle/Resources/views/themes/admin/account/login/index.html.twig b/src/bundle/Resources/views/themes/admin/account/login/index.html.twig
index c035a67584..7b1548b98d 100644
--- a/src/bundle/Resources/views/themes/admin/account/login/index.html.twig
+++ b/src/bundle/Resources/views/themes/admin/account/login/index.html.twig
@@ -27,7 +27,7 @@
                         <input
                             type="text"
                             id="username"
-                            class="form-control ibexa-input ibexa-input--text ibexa-login__input"
+                            class="form-control ibexa-input ibexa-input--text ibexa-login__input ibexa-login__input--name"
                             name="_username"
                             value="{{ last_username }}"
                             required="required"
@@ -62,7 +62,12 @@
                 {% endblock %}
 
                 {% block login_form_buttons %}
-                    <button type="submit" class="btn ibexa-btn ibexa-btn--primary ibexa-login__btn ibexa-login__btn--sign-in" tabindex="3">
+                    <button
+                        type="submit"
+                        class="btn ibexa-btn ibexa-btn--primary ibexa-login__btn ibexa-login__btn--sign-in"
+                        tabindex="3"
+                        disabled
+                    >
                         {{ 'authentication.login'|trans|desc('Login') }}
                     </button>
                     <div class="ibexa-login__link-wrapper">