BizgazeUI/assets/js/login.js

import {setCookie} from "./cookiehelper.js";
import {_serverUrl} from "./setting.js";

const serverUrl = _serverUrl();

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

passwordContainerEl.style.display = "none";
emailInputEl.focus();

function showPasswordBox() {
  const email = emailInputEl.value;
  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 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;

  if (password.value.length > 0) {
    passwordInputEl.value = password.value;
    password.focus();
    if (ele.checked) {
      password.setAttribute("type", "text");
    } else {
      password.setAttribute("type", "password");
    }
  }
}

function onPasswordFocusOut() {
  const passwordLabel = document.getElementById("passwordLabel");
  if (passwordInputEl.value.length > 0) {
    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 {
    emailLabel.classList.remove("password-fixed");
  }
}

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 data = JSON.parse(result);
      if (data.status === 0) {
        setCookie("_idty", JSON.stringify(data.result), 1);
        window.location = "../authentication";
      } else {
        passwordErrEl.innerText = data.message;
      }
    })
    .catch((error) => {
      passwordErrEl.innerText = error;
    });
}

function validateLogin() {
  const email = emailInputEl.value;
  const password = passwordInputEl.value;
  if (password.trim().length !== 0) {
    loginUser(email, password);
  } else {
    passwordInputEl.classList.add("error");
    passwordErrEl.innerText = "Please enter valid password";
  }
}

function reEnterEmailClickHandler() {
  emailContainerEl.style.display = "block";
  passwordContainerEl.style.display = "none";
  emailInputEl.focus();
}

function initializeEventListeners() {
  emailNextBtn.addEventListener("click", showPasswordBox);

  showPasswordChk.addEventListener("click", togglePassword);

  passwordInputEl.addEventListener("focusout", onPasswordFocusOut);

  emailInputEl.addEventListener("focusout", onEmailFocusOut);

  loginSubmitBtn.addEventListener("click", validateLogin);

  renterEmailLink.addEventListener("click", reEnterEmailClickHandler);
}

initializeEventListeners();