diff --git a/javascript-practice/src/js/views/commonLoginRegisterView.js b/javascript-practice/src/js/views/commonLoginRegisterView.js index 46d1ad8..0c9009d 100644 --- a/javascript-practice/src/js/views/commonLoginRegisterView.js +++ b/javascript-practice/src/js/views/commonLoginRegisterView.js @@ -8,7 +8,10 @@ export default class CommonLoginRegisterView extends CommonView { this.parentElement = document.querySelector('.form'); this.messageDefault = CONSTANT.MESSAGE.ERROR_MESSAGE_DEFAULT; - this.inputField = document.querySelectorAll('.form__input'); + this.inputPassword = document.querySelector('input[name="password"]'); + this.inputPasswordConfirm = document.querySelector( + 'input[name="password_confirm"]', + ); } /** @@ -41,43 +44,24 @@ export default class CommonLoginRegisterView extends CommonView { } /** - * Show error style input password + * Show or hide style error input password */ - changeToStyleErrorInputPassword() { - // Index = 1 because it should skip email input field - for (let index = 1; index < this.inputField.length; index += 1) { - this.inputField[index].style.background = '#ffc3c3'; - this.inputField[index].style.borderColor = '#ce1414'; - } - } - - /** - * Clear error style input password - */ - clearStyleErrorInputPassword() { - for (let index = 1; index < this.inputField.length; index += 1) { - this.inputField[index].style.background = '#f5f5f5'; - this.inputField[index].style.borderColor = '#f5f5f5'; - } - } - - /** - * Reassign again to check error message element haved on page or not - */ - reassignVariableErrorMessage() { - this.errorMessage = document.querySelector('.form__error-message'); + toogleErrorStyleInputPass() { + this.inputPassword.classList.toggle('error-input'); + this.inputPasswordConfirm.classList.toggle('error-input'); } /** * Clear error message at form */ clearErrorMessage() { - this.reassignVariableErrorMessage(); + // Reassign again to check error message element haved on page or not + this.errorMessageEl = document.querySelector('.form__error-message'); // If have error message on page, remove it - if (this.errorMessage) { - this.errorMessage.remove(); - this.clearStyleErrorInputPassword(); + if (this.errorMessageEl) { + this.errorMessageEl.remove(); + this.toogleErrorStyleInputPass(); } } @@ -96,12 +80,12 @@ export default class CommonLoginRegisterView extends CommonView { */ showError(message) { this.renderError(message); - this.changeToStyleErrorInputPassword(); + this.toogleErrorStyleInputPass(); } /** * Show error message in form - * @param {*} message The message will show in form + * @param {string} message The message will show in form */ renderError(message) { const markup = ` diff --git a/javascript-practice/src/styles/pages/_login-register.scss b/javascript-practice/src/styles/pages/_login-register.scss index 96511fa..f2d2ec5 100644 --- a/javascript-practice/src/styles/pages/_login-register.scss +++ b/javascript-practice/src/styles/pages/_login-register.scss @@ -83,3 +83,8 @@ color: $primary-color; } } + +.error-input { + border: 2px solid $dark-error-color; + background-color: $light-error-color; +}