IBX-1866: Disable login when fields are empty (#172)

ezsystems · Jan 13, 2022 · 4fd47e5 · 4fd47e5
1 parent 4140613
commit 4fd47e5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/#.js b/src/bundle/Resources/public/js/scripts/#.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/#/index.html.twig b/src/bundle/Resources/views/themes/admin/account/#/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">