From 1ee03d2ecc94b4f537bc24a2f831d4a6aa54126c Mon Sep 17 00:00:00 2001 From: Naresh Ch Date: Wed, 30 Nov 2022 11:16:49 +0530 Subject: [PATCH] login ui changes --- assets/css/login.css | 3 +- assets/js/common.js | 6 ++-- assets/js/login.js | 73 +++++++++++++++++++++++++++++--------------- login/index.html | 17 ++++++----- 4 files changed, 63 insertions(+), 36 deletions(-) diff --git a/assets/css/login.css b/assets/css/login.css index 69191cd..70d1c30 100644 --- a/assets/css/login.css +++ b/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 { diff --git a/assets/js/common.js b/assets/js/common.js index 8924111..c6ad0e3 100644 --- a/assets/js/common.js +++ b/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); } diff --git a/assets/js/login.js b/assets/js/login.js index fd89b31..4f5ec85 100644 --- a/assets/js/login.js +++ b/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 { - document - .getElementById('password-label') - .classList.remove('password-fixed'); + passwordLabel.classList.remove('password-fixed'); + } +} + +function onEmailFocusOut() { + const emailLabel = document.getElementById('emailLabel'); + if (emailInputEl.value.trim()) { + emailLabel.classList.add('password-fixed'); + } else { + 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); - document.getElementById('loginSubmitBtn').addEventListener('click', () => { - validateLogin(); + emailInputEl.addEventListener('focusout', onEmailFocusOut); + + loginSubmitBtn.addEventListener('click', validateLogin); + + renterEmailLink.addEventListener('click', () => { + emailContainerEl.style.display = 'block'; + passwordContainerEl.style.display = 'none'; + emailInputEl.focus(); }); } diff --git a/login/index.html b/login/index.html index 2c91b89..98c64ca 100644 --- a/login/index.html +++ b/login/index.html @@ -22,7 +22,7 @@
- +
@@ -49,19 +49,20 @@
- -
-
- - +
+
+
+
- +