login ui changes

assets/css/login.css

@@ -113,7 +113,7 @@ body {
     color: #d93025;
 }
 
-.biz-login-wrap .password-fixed {
+.biz-login-wrap .form-group label.password-fixed {
     transform: translate3d(0, -175%, 0);
     z-index: 1 !important;
     color: #1a73e8;
@@ -187,6 +187,7 @@ body {
 .biz-login-wrap .password-checkbox {
     width: 20px;
     height: 20px;
+    margin-right: 5px;
 }
 
 .biz-login-wrap .show-password-link {

assets/js/common.js

@@ -1,10 +1,10 @@
 const serverUrl = 'http://localhost:3088/';
 
 function getCookie(name) {
-  var nameEQ = name + '=';
-  var ca = document.cookie.split(';');
+  const nameEQ = name + '=';
+  const ca = document.cookie.split(';');
   for (var i = 0; i < ca.length; i++) {
-    var c = ca[i];
+    const c = ca[i];
     while (c.charAt(0) == ' ') c = c.substring(1, c.length);
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
   }

assets/js/login.js

@@ -3,23 +3,40 @@ const emailInputEl = document.getElementById('email');
 const passwordInputEl = document.getElementById('password');
 const emailErrEl = document.getElementById('emailErrMsg');
 const passwordErrEl = document.getElementById('passwordErrMsg');
+const emailContainerEl = document.getElementById('emailBox');
+const passwordContainerEl = document.getElementById('passwordBox');
+const showPasswordChk = document.getElementById('showPassword');
+const emailNextBtn = document.getElementById('emailNextBtn');
+const renterEmailLink = document.getElementById('renterEmail');
+const loginSubmitBtn = document.getElementById('loginSubmitBtn');
 
-document.getElementById('passwordBox').style.display = 'none';
+passwordContainerEl.style.display = 'none';
+emailInputEl.focus();
 
 function showPasswordBox() {
   const email = emailInputEl.value;
-  if (email.includes('@')) {
-    document.getElementById('emailBox').style.display = 'none';
-    document.getElementById('passwordBox').style.display = 'block';
+  if (validateEmailOrPhone()) {
+    emailContainerEl.style.display = 'none';
+    passwordContainerEl.style.display = 'block';
     document.getElementById('entered-email').innerHTML = email;
+    passwordInputEl.focus();
     emailInputEl.classList.remove('error');
     emailErrEl.innerText = '';
   } else {
     emailInputEl.classList.add('error');
-    emailErrEl.innerText = 'Please enter valid email';
+    emailErrEl.innerText = 'Please enter valid email or phone';
   }
 }
 
+function validateEmailOrPhone() {
+  const value = emailInputEl.value.trim();
+  const regx = /^[6-9]\d{9}$/;
+  if (value.includes('@') || regx.test(value)) {
+    return true;
+  }
+  return false;
+}
+
 function togglePassword() {
   const ele = document.getElementById('showPassword');
   const password = passwordInputEl;
@@ -35,13 +52,21 @@ function togglePassword() {
   }
 }
 
-function onPasswordFocus() {
+function onPasswordFocusOut() {
+  const passwordLabel = document.getElementById('passwordLabel');
   if (passwordInputEl.value.length > 0) {
-    document.getElementById('password-label').classList.add('password-fixed');
+    passwordLabel.classList.add('password-fixed');
+  } else {
+    passwordLabel.classList.remove('password-fixed');
+  }
+}
+
+function onEmailFocusOut() {
+  const emailLabel = document.getElementById('emailLabel');
+  if (emailInputEl.value.trim()) {
+    emailLabel.classList.add('password-fixed');
   } else {
-    document
-      .getElementById('password-label')
-      .classList.remove('password-fixed');
+    emailLabel.classList.remove('password-fixed');
   }
 }
 
@@ -91,10 +116,8 @@ function loginUser(email, password) {
 function validateLogin() {
   const email = emailInputEl.value;
   const password = passwordInputEl.value;
-  if (email.includes('@') && password.trim().length !== 0) {
+  if (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';
@@ -102,20 +125,22 @@ function validateLogin() {
 }
 
 function initializeEventListeners() {
-  document.getElementById('emailNextBtn').addEventListener('click', () => {
-    showPasswordBox();
-  });
+  document
+    .getElementById('emailNextBtn')
+    .addEventListener('click', showPasswordBox);
 
-  document.getElementById('showPassword').addEventListener('click', () => {
-    togglePassword();
-  });
+  showPasswordChk.addEventListener('click', togglePassword);
 
-  document.getElementById('showPassword').addEventListener('onfocusout', () => {
-    onPasswordFocus();
-  });
+  passwordInputEl.addEventListener('focusout', onPasswordFocusOut);
+
+  emailInputEl.addEventListener('focusout', onEmailFocusOut);
+
+  loginSubmitBtn.addEventListener('click', validateLogin);
 
-  document.getElementById('loginSubmitBtn').addEventListener('click', () => {
-    validateLogin();
+  renterEmailLink.addEventListener('click', () => {
+    emailContainerEl.style.display = 'block';
+    passwordContainerEl.style.display = 'none';
+    emailInputEl.focus();
   });
 }
 

login/index.html

@@ -22,7 +22,7 @@
                     <div class="form-input-wrap">
                         <div class="form-group">
                             <input type="text" id="email" class="email-input">
-                            <label class="form-control-placeholder" for="name">Email or phone</label>
+                            <label class="form-control-placeholder" id="emailLabel" for="email">Email or phone</label>
                         </div>
                         <div class="err-msg" id="emailErrMsg"></div>
                         <div class="form-link mt-10">
@@ -49,19 +49,20 @@
                 <div class="form-body password-form-box">
                     <div class="form-input-wrap">
                         <div class="form-group">
-                            <input type="password" id="password" class="password-input"
-                                onfocus="this.value = this.value;">
-                            <label class="form-control-placeholder" id="password-label" for="name">Enter Your
+                            <input type="password" id="password" class="password-input">
+                            <label class="form-control-placeholder" id="passwordLabel" for="password">Enter Your
                                 Password</label>
                         </div>
                         <div class="err-msg" id="passwordErrMsg"></div>
-                        <div class="form-link show-password-link">
-                            <input type="checkbox" id="showPassword" class="password-checkbox">
-                            <label for="showPassword">Show password</label>
+                        <div class="form-link show-password-link flex-between-center">
+                            <div class="flex-between-center"><input type="checkbox" id="showPassword"
+                                    class="password-checkbox">
+                                <label for="showPassword">Show password</label></div>
+                            <label><a href="../forgotpassword">Forgot password?</a></label>
                         </div>
                     </div>
                     <div class="form-link flex-between-center">
-                        <label><a href="../forgotpassword">Forgot password?</a></label>
+                        <label><a href="javascript:;" id="renterEmail">Reenter email?</a></label>
                         <button class="btn" id="loginSubmitBtn">Submit</button>
                     </div>
                 </div>