From 00b124ee982c27cf5766ded02ce4566a89844562 Mon Sep 17 00:00:00 2001
From: Nataliia Hrushanyk <nataligrushanyk@gmail.com>
Date: Thu, 19 Oct 2023 11:36:43 +0300
Subject: [PATCH] Refactor login form validation and error handling

---
 src/scripts/logIn.js        | 54 ++++++++++++++++++++++++++++---------
 src/styles/blocks/login.css |  1 +
 2 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/scripts/logIn.js b/src/scripts/logIn.js
index 3323667..90e6013 100644
--- a/src/scripts/logIn.js
+++ b/src/scripts/logIn.js
@@ -6,31 +6,59 @@ import {
 const logInEmail = document.querySelector('.login-input.email');
 const logInPassword = document.querySelector('.login-input.password');
 const logInButton = document.querySelector('.login-button');
+const logInEmailError = document.querySelector('.login-email-error');
+const logInPasswordRemainder = document.querySelector('.login-password-link');
 
-const logInError = document.querySelector('.login-email-error');
-
-function showLogInError(errorMessage) {
-  logInError.textContent = errorMessage;
-  logInError.style.visibility = 'visible';
+function showEmailError(errorMessage) {
+  logInEmailError.textContent = errorMessage;
+  logInEmailError.style.visibility = 'visible';
 }
 
-function hideLogInError() {
-  logInError.style.visibility = 'hidden';
+function hideEmailError() {
+  logInEmailError.textContent = '';
+  logInEmailError.style.visibility = 'hidden';
 }
 
-logInButton.addEventListener('click', () => {
+function validateEmail() {
   if (!isValidEmail(logInEmail.value)) {
-    showLogInError('Please enter a valid email');
+    showEmailError('Please enter a valid email');
     return false;
+  } else {
+    hideEmailError();
+    return true;
   }
+}
 
+function validatePassword() {
   if (!isValidPassword(logInPassword.value)) {
-    showLogInError('Please enter a valid password');
+    logInPasswordRemainder.style.visibility = 'visible';
     return false;
+  } else {
+    logInPasswordRemainder.style.visibility = 'hidden';
+    return true;
   }
+}
 
-  hideLogInError();
-
+function resetForm() {
   logInEmail.value = '';
   logInPassword.value = '';
-})
\ No newline at end of file
+}
+
+logInEmail.addEventListener('blur', validateEmail);
+logInEmail.addEventListener('input', hideEmailError);
+
+logInPassword.addEventListener('blur', validatePassword);
+logInPassword.addEventListener('input', () => {
+  logInPasswordRemainder.style.visibility = 'hidden';
+});
+
+logInButton.addEventListener('click', (event) => {
+  event.preventDefault();
+  const isEmailValid = validateEmail();
+  const isPasswordValid = validatePassword();
+
+  if (isEmailValid && isPasswordValid) {
+    hideEmailError();
+    resetForm();
+  }
+});
diff --git a/src/styles/blocks/login.css b/src/styles/blocks/login.css
index 8aebb0e..33e4a3a 100644
--- a/src/styles/blocks/login.css
+++ b/src/styles/blocks/login.css
@@ -27,6 +27,7 @@
 }
 
 .login-password-link {
+  visibility: hidden;
   border: transparent;
   color: #fff;
 }