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">