login page changes

assets/js/login.js

@@ -1,19 +1,31 @@
+const serverUrl = 'http://localhost:3088/';
+const emailInputEl = document.getElementById('email');
+const passwordInputEl = document.getElementById('password');
+const emailErrEl = document.getElementById('emailErrMsg');
+const passwordErrEl = document.getElementById('passwordErrMsg');
+
 document.getElementById('passwordBox').style.display = 'none';
 
 function showPasswordBox() {
-  const email = document.getElementById('email').value;
-  if (email.length > 0) {
+  const email = emailInputEl.value;
+  if (email.includes('@')) {
     document.getElementById('emailBox').style.display = 'none';
     document.getElementById('passwordBox').style.display = 'block';
     document.getElementById('entered-email').innerHTML = email;
+    emailInputEl.classList.remove('error');
+    emailErrEl.innerText = '';
+  } else {
+    emailInputEl.classList.add('error');
+    emailErrEl.innerText = 'Please enter valid email';
   }
 }
-function onEyeClick() {
+
+function togglePassword() {
   const ele = document.getElementById('showPassword');
-  const password = document.getElementById('password');
+  const password = passwordInputEl;
 
   if (password.value.length > 0) {
-    document.getElementById('password').value = password.value;
+    passwordInputEl.value = password.value;
     password.focus();
     if (ele.checked) {
       password.setAttribute('type', 'text');
@@ -22,9 +34,9 @@ function onEyeClick() {
     }
   }
 }
+
 function onPasswordFocus() {
-  const password = document.getElementById('password');
-  if (password.value.length > 0) {
+  if (passwordInputEl.value.length > 0) {
     document.getElementById('password-label').classList.add('password-fixed');
   } else {
     document
@@ -32,3 +44,72 @@ function onPasswordFocus() {
       .classList.remove('password-fixed');
   }
 }
+
+function setCookie(name, value, days) {
+  var expires = '';
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = '; expires=' + date.toUTCString();
+  }
+  document.cookie = name + '=' + (value || '') + expires + '; path=/';
+}
+
+function loginUser(email, password) {
+  const postData = JSON.stringify({
+    UserName: email,
+    Password: password,
+    UnibaseId: '',
+    RememberMe: false,
+  });
+
+  const requestOptions = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: postData,
+    redirect: 'follow',
+  };
+
+  fetch(serverUrl + 'account/login', requestOptions)
+    .then((response) => response.text())
+    .then((result) => {
+      const user = JSON.parse(result);
+      setCookie('authentication', JSON.stringify(user.sessionId), 1);
+    })
+    .catch((error) => console.log('error', error));
+}
+
+function validateLogin() {
+  const email = emailInputEl.value;
+  const password = passwordInputEl.value;
+  if (email.includes('@') && password.trim().length !== 0) {
+    loginUser(email, password);
+  } else if (!email.includes('@')) {
+    emailErrEl.innerHTML = 'Please enter valid email';
+  } else {
+    passwordInputEl.classList.add('error');
+    passwordErrEl.innerText = 'Please enter valid password';
+  }
+}
+
+function initializeEventListeners() {
+  document.getElementById('emailNextBtn').addEventListener('click', () => {
+    showPasswordBox();
+  });
+
+  document.getElementById('showPassword').addEventListener('click', () => {
+    togglePassword();
+  });
+
+  document.getElementById('showPassword').addEventListener('onfocusout', () => {
+    onPasswordFocus();
+  });
+
+  document.getElementById('loginSubmitBtn').addEventListener('click', () => {
+    validateLogin();
+  });
+}
+
+initializeEventListeners();