login page changes

assets/css/login.css

@@ -27,6 +27,10 @@ body {
     color: #3d3d3d;
 }
 
+.d-none {
+    display: none;
+}
+
 .biz-login-wrap {
     width: 100%;
     display: flex;
@@ -63,6 +67,10 @@ body {
     z-index: 1;
 }
 
+.biz-login-wrap .form-group input.error {
+    border-color: #d93025;
+}
+
 .biz-login-wrap .form-group label {
     position: absolute;
     left: 10px;
@@ -151,6 +159,7 @@ body {
     border-radius: 4px;
     font-weight: 500;
     font-size: 16px;
+    cursor: pointer;
 }
 
 .biz-login-wrap a {
@@ -188,6 +197,11 @@ body {
     font-weight: 500;
 }
 
+.biz-login-wrap .err-msg {
+    color: #d93025;
+    font-size: 12px;
+}
+
 .biz-login-wrap h4 {
     font-size: 16px;
     font-weight: 500;
@@ -244,7 +258,7 @@ body {
     margin-left: 5px;
 }
 
-h2 {
+.biz-login-wrap h2 {
     margin: 0;
     font-size: 24px;
     font-weight: 500;
@@ -256,10 +270,6 @@ h2 {
     margin: 20px 0px;
 }
 
-.d-none {
-    display: none;
-}
-
 .conformPassword {
     margin-top: 30px;
 }

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();

login/index.html

@@ -23,6 +23,7 @@
                         <div class="form-group">
                             <input type="text input" id="email" class="email-input">
                             <label class="form-control-placeholder" for="name">Email or phone</label>
+                            <div class="err-msg" id="emailErrMsg"></div>
                         </div>
                         <div class="form-link mt-10">
                             <label><a href="javascript:;">Forgot email?</a></label>
@@ -34,7 +35,7 @@
                     </div>
                     <div class="form-link flex-between-center">
                         <label><a href="javascript:;">Create account</a></label>
-                        <button class="btn next-btn" onclick="showPasswordBox()">Next</button>
+                        <button class="btn next-btn" id="emailNextBtn">Next</button>
                     </div>
                 </div>
             </div>
@@ -49,18 +50,19 @@
                     <div class="form-input-wrap">
                         <div class="form-group">
                             <input type="password" id="password" class="password-input"
-                                onfocus="this.value = this.value;" onfocusout="onPasswordFocus()">
+                                onfocus="this.value = this.value;">
                             <label class="form-control-placeholder" id="password-label" for="name">Enter Your
                                 Password</label>
+                            <div class="err-msg" id="passwordErrMsg"></div>
                         </div>
                         <div class="form-link show-password-link">
-                            <input type="checkbox" id="showPassword" class="password-checkbox" onclick="onEyeClick()">
+                            <input type="checkbox" id="showPassword" class="password-checkbox">
                             <label for="showPassword">Show password</label>
                         </div>
                     </div>
                     <div class="form-link flex-between-center">
                         <label><a href="../forgotpassword/index.html">Forgot password?</a></label>
-                        <button class="btn">Next</button>
+                        <button class="btn" id="loginSubmitBtn">Submit</button>
                     </div>
                 </div>
             </div>