anwisystems/dist/js/auth/login.js

let AUTH_LOGIN_APIS_URL = {
  isUser(user) {
    return `account/getuserbyphoneormail/${user}/${user}`;
  },
  login() {
    return `bizgaze/crm/webapi/crmuserlogin`
  },
  signUp() {
    return `bizgaze/crm/webapi/registercrmuser`;
  },
  resendOTP() {
    return `bizgaze/crm/webapi/ReSendOtp`;
  },
  sendOTP() {
    return `account/sendotp`;
  },
  updatePassword() {
    return `account/UpdatePassword`;
  }
}

initLogin();





function initLogin() {
  
  let userDetails = {
    otpid: null,
    email: null,
    password: null,
    unibaseid: null
  }
  let backotp = null;
  let backOptions = {
    forgotPassword:'forgotPassword',
    EmailnotV:'EmailnotV',
    signUp:'signUp'
  }
  let authloginLoadingBtnAction = {
    addLoading() {
      $('.authloginLoading').addClass('d-none');
      $('.authloginLoadingBtn').removeClass('d-none');
    },
    removeLoading() {
      $('.authloginLoading').removeClass('d-none');
      $('.authloginLoadingBtn').addClass('d-none');
    }
  }

  let otpLoadingAction = {
    addLoadingOTP() {
      $('.otploading').removeClass('d-none');
      $('.otploadingtext').addClass('d-none');
    },
    removeLoadingOTP() {
      $('.otploading').addClass('d-none');
      $('.otploadingtext').removeClass('d-none');
    }
  }

  let formErrorAction = {
    addError(message) {
      $('.error_msg').removeClass('d-none');
      $('.error_msg_res').html(message);
    },
    removeClass() {
      $('.error_msg').addClass('d-none');
      $('.error_msg_res').html('');
    }
  }
  function init() {
    const logoauth = $('.logoauth');
    logoauth.removeClass('d-none');
    loginUI();
    //updatePasswordUI();
    //OTP_UI()
  }


  function checkPassword(value){
    const specailHelper = containsSpecialCharsHelper(value);
    const isUpperCase = isUpperCaseHelper(value);
    const isLowerCase = isLowerCaseHelper(value);
    const isNumber = isNumberContainsHelper(value);
    const len = value.length>=8;

    return specailHelper && isUpperCase && isLowerCase && isNumber && len;

  }

  init();

  function updatePasswordUI() {
    formErrorAction.removeClass();
    let html = ` <form class="row g-3 needs-validation" novalidate> <div class="form-floating position-relative py-0"> <input required type="password" class="form-control shadow-none h-50p passwordvalidui" id="updatepassword" placeholder="Enter Your Password" autocomplete="off"> <span class="position-absolute eyePassword" style=" top: 50%; right: 3%; transform: translateY(-50%);"> <i class="text-dark fa fa-eye-slash"></i> </span> <label for="updatepassword">Password </label> <div class="invalid-feedback"> Please enter password. </div> <div class="pswd_info" style="display: none;z-index: 1;"> <p>Password must contain:</p> <ul> <li id="chck_capital" class="invalid">At least <strong>one capital letter</strong> </li> <li id="chck_small" class="invalid">At least <strong>one lowercase letter</strong> </li> <li id="chck_special" class="invalid">At least <strong>one special letter</strong> </li> <li id="chck_number" class="invalid">At least <strong>one number</strong> </li> <li id="chck_length" class="invalid">At least <strong>8 characters</strong> </li> </ul> </div> </div> <div class="form-floating position-relative py-0"> <input required type="password" class="form-control shadow-none h-50p passwordvalidui" id="updateconfirmpassword" placeholder="Enter Your Password" autocomplete="off"> <span class="position-absolute eyePassword" style=" top: 50%; right: 3%; transform: translateY(-50%);"> <i class="text-dark fa fa-eye-slash"></i> </span> <label for="updateconfirmpassword">Password </label> <div class="invalid-feedback"> Please enter password. </div> <div class="pswd_info" style="display: none;z-index: 1;"> <p>Password must contain:</p> <ul> <li id="chck_capital" class="invalid">At least <strong>one capital letter</strong> </li> <li id="chck_small" class="invalid">At least <strong>one lowercase letter</strong> </li> <li id="chck_special" class="invalid">At least <strong>one special letter</strong> </li> <li id="chck_number" class="invalid">At least <strong>one number</strong> </li> <li id="chck_length" class="invalid">At least <strong>8 characters</strong> </li> </ul> </div> </div> <div class="col-12 pt-3 mt-0 px-0"> <button class="btn bg-gradient-anwi text-white w-100 cursor-pointer h-50p btnupdatepassword" type="submit"> <div class="spinner-border authloginLoadingBtn d-none" role="status"> <span class="visually-hidden">Loading...</span> </div> <span class="authloginLoading">Update Password</span> </button> </div> </form>`;

    $('.authContainerUI').html(html);
    updatepasswordEvents();
  }

  function updatepasswordEvents() {

    $('.needs-validation').off('submit');
    loadPasswordListener();
    $('.needs-validation').on('submit', async (event) => {
      event.preventDefault();
      let ele = document.querySelector('.needs-validation')
      if (!ele.checkValidity()) {
        ele.classList.add('was-validated')
        return;
      }


      let newPassword = $('#updatepassword').val();
      let passwordConfirm = $('#updateconfirmpassword').val();
      

      if (newPassword != passwordConfirm) {
        formErrorAction.addError("Password doesn't match");
        return;
      }

      if(!checkPassword(newPassword)){
        formErrorAction.addError("Password doesn't match");
        return;
      }

      const forgotpassPayload = {
        username: userDetails.unibaseid,
        password: passwordConfirm,
      };

      const res = await postAPIService(AUTH_LOGIN_APIS_URL.updatePassword(), forgotpassPayload);

      

      if (res.data.message == 'Password Updated Successfully') {
        loginUI();
        toasterHelper("success", "Password updated successfull");
      }
    });
    

  }

  function loadPasswordListener(){
    
    $('.passwordvalidui').off().on('keyup',function (e){
      debugger;
      $(this).parent().find('.pswd_info').css('display','block');
      let value = $(this).val();

      const specailHelper = containsSpecialCharsHelper(value);
      const isUpperCase = isUpperCaseHelper(value);
      const isLowerCase = isLowerCaseHelper(value);
      const isNumber = isNumberContainsHelper(value);


      if(isLowerCase){
         $(this).parent().find('#chck_small').addClass('text-decoration-line-through');
      }else{
         $(this).parent().find('#chck_small').removeClass('text-decoration-line-through');
      }

      if(specailHelper){
         $(this).parent().find('#chck_special').addClass('text-decoration-line-through');
      }else{
         $(this).parent().find('#chck_special').removeClass('text-decoration-line-through');
      }

      if(isUpperCase){
         $(this).parent().find('#chck_capital').addClass('text-decoration-line-through');
      }else{
         $(this).parent().find('#chck_capital').removeClass('text-decoration-line-through');
      }

      if(value.length>=8){
         $(this).parent().find('#chck_length').addClass('text-decoration-line-through');
      }else{
         $(this).parent().find('#chck_length').removeClass('text-decoration-line-through');
      }

      if(isNumber){
         $(this).parent().find('#chck_number').addClass('text-decoration-line-through');
      }else{
         $(this).parent().find('#chck_number').removeClass('text-decoration-line-through');
      }


    }).blur(function (e){
      $(this).parent().find('.pswd_info').css('display','none');
    })

    $('.eyePassword').off();
    $('.eyePassword').click(function (e){
      e.stopPropagation();
     let eyeOpen = '<i class="text-dark fa fa-eye"></i>';
     let eyeClose = '<i class="text-dark fa fa-eye-slash"></i>';
      let isClose = $(this).find(`.fa-eye-slash`).length;
      
      if(isClose){
        $(this).html(eyeOpen);
        $(this).parent().find('.passwordvalidui').attr('type','text');
      }else{
        $(this).html(eyeClose);
        $(this).parent().find('.passwordvalidui').attr('type','password');
      }
    });
  }

  async function resendOTP() {
    otpLoadingAction.addLoadingOTP();
    let payload = {
      "FirstName": "",
      "LastName": "",
      "ContactNumber": "",
      "Email": "",
      "TenantName": "",
      "ContactOrEmail": userDetails.email,
      "IsSignup": false,
      "IsRegisterUser": true,
      "IsForgotPswd": false,
      "UnibaseId": userDetails.unibaseid,
      "OtpId": parseInt(userDetails.otpid),
      "UserOtp": ""
    }
    let res = await postAPIService(AUTH_LOGIN_APIS_URL.resendOTP(), payload);
    res = res.data;
    if (res.code != '0' || res.message != 'OTP resent successfully') {
      return;
    }
    userDetails = { ...userDetails, otpid: res.result };
    otpLoadingAction.removeLoadingOTP();
  }

  function loadForpasswordsEvents() {
    $('.needs-validation').off('submit');
    $('.needs-validation').on('submit', async (event) => {
      event.preventDefault()
      let ele = document.querySelector('.needs-validation')
      if (!ele.checkValidity()) {
        ele.classList.add('was-validated')
        return;
      }
      const email = $('#forgotpassword').val();

      await sendOTPService(email,1,backOptions.forgotPassword);

      authloginLoadingBtnAction.removeLoading();




    });

    $('.btnForgotback').click(function (e) {
      loginUI();
    })
  }

  function forgotPasswordUIEmail() {
    formErrorAction.removeClass();
    let html = `<div> <div class="d-flex justify-content-between border-bottom pb-1"><span>Forgot Password?</span><span class="btnForgotback cursor-pointer"><i class="fa-solid fa-arrow-left"></i></span></div> <div class="py-3">Enter the email associated with your account and we'll send an email with instructions to reset your password.</div> <div> <form class="row g-3 needs-validation" novalidate> <div class="pb-3 form-floating py-0"> <input required type="email" class="form-control shadow-none h-50p" id="forgotpassword" placeholder="Enter Your Email" autocomplete="off"> <label for="forgotpassword">Email address</label> <div class="invalid-feedback"> Please enter email. </div> </div>  <div class="col-12 mt-0 px-0"> <button class="btn h-50p forgotpasswordbtn bg-gradient-anwi text-white w-100 cursor-pointer" type="submit"> <div class="spinner-border authloginLoadingBtn d-none" role="status"> <span class="visually-hidden">Loading...</span> </div> <span class="authloginLoading ">Password Reset</span> </button> </div> </form> </div></div>`;
    $('.authContainerUI').html(html);
    loadForpasswordsEvents();
  }



  function loginEvents() {


    // submit event
    $('.needs-validation').off('submit');
    $('.needs-validation').on('submit', async (event) => {
      event.preventDefault();
      let ele = document.querySelector('.needs-validation')
      if (!ele.checkValidity()) {
        ele.classList.add('was-validated')
        return;
      }


      const email = $('#User_Email').val();

      const isUserURL = AUTH_LOGIN_APIS_URL.isUser(email);
      authloginLoadingBtnAction.addLoading();
      const user = await getAPIService(isUserURL);
      const isUser = user.data.result === null && user.data.message === `Email/Phonenumber doesn't exist`;

      if (!isUser) {
        loginUser();
      } else {
        signUpUser();
      }
    });

    // forgot password
    $('.forgotpasswordBtn').click(function (e) {
      forgotPasswordUIEmail();
    });
    loadPasswordListener();
  }



  async function loginUserService(email, passord) {
    const loginPayload = {
      username: email,
      Password: passord,
      UnibaseId: "",
      RememberMe: false,
    };

    let res = await postAPIService(AUTH_LOGIN_APIS_URL.login(),
      loginPayload
    );

    return res;
  }

  async function loginUser() {
    formErrorAction.removeClass();
    let userEmail = $("#User_Email").val();
    let userPassword = $("#User_password").val();


    let res = await loginUserService(userEmail, userPassword);
    res = res.data;

    let isError = res.code != '0';


    userDetails['email'] = userEmail;
    userDetails['password'] = userPassword;
    debugger;
    if (isError) {
      if (res.message === 'Email is not verified') {
        formErrorAction.addError(`<span><span>${res.message}</span> <span class="validemail cursor-pointer"><u>Valid here</u></span></span>`);

        $('.validemail').off('click')
        $('.validemail').click(async function (e) {
          await sendOTPService(userEmail,2,backOptions.EmailnotV);
          formErrorAction.removeClass();
          authloginLoadingBtnAction.removeLoading();

        });
        authloginLoadingBtnAction.removeLoading();
        return;
      }

      formErrorAction.addError(`${res.message}`);
      authloginLoadingBtnAction.removeLoading();
      return;
    }

    COOKIE_HELPER_ACTIONS.setCookie({
      token: res.result.sessionId,
      userid: res.result.userId,
      ...res.result
    });

    const isCartAdded = localStorage.getItem(CART_ADD);
          if(isCartAdded){
            localStorage.removeItem(CART_ADD);
            window.location.href = `/selectdelivery.html`;
            return;
          }
    localStorage.setItem(USER_AUTH_OKAY,2);
    window.location.href = '/';
    //authloginLoadingBtnAction.removeLoading();
  }

  async function sendOTPService(userEmail,num=0,option) {
    const isUserURL = AUTH_LOGIN_APIS_URL.isUser(userEmail);
    authloginLoadingBtnAction.addLoading();
    const user = await getAPIService(isUserURL);
    const isUser = user.data.result === null || user.data.message === `Email/Phonenumber doesn't exist`;
    if (isUser) {
      formErrorAction.addError(user.data.message);
      authloginLoadingBtnAction.removeLoading();
      return;
    }

    const forgotpassPayload = {
      firstname: "",
      lastname: "",
      contactnumber: "",
      email: "",
      tenantname: "",
      contactoremail: user.data.result.email,
      IsSignup: false,
      IsRegisterUser: false,
      IsForgotPswd: true,
      UnibaseId: user.data.result.userName,
      OtpId: 0,
      UserOtp: "",
    };

    const forgetpassRes = await postAPIService(
      AUTH_LOGIN_APIS_URL.sendOTP(),
      forgotpassPayload
    );

    userDetails.email = userEmail;
    userDetails.otpid = forgetpassRes.data;
    userDetails.unibaseid = user.data.result.userName;
    backotp = option
    OTP_UI(num);
 
  }

  async function signUpUser() {
    formErrorAction.removeClass();
    let userEmail = $("#User_Email").val();
    let userPassword = $("#User_password").val();
    let checkPasswordValue = checkPassword(userPassword);
    if(!checkPasswordValue){
      authloginLoadingBtnAction.removeLoading();
      formErrorAction.addError('Password must contain one specail letter ,number,small letter, uppercase letter and 8 letters');
      return;
    }
    const userRegistratioNPayload = {
      organizationtypeid: "2",
      organizationid: "0",
      contactid: "0",
      userid: "0",
      username: "0",
      users_phonenumber: "0",
      password: userPassword,
      users_emailaddress: "0",
      emailaddress: userEmail,
      contactname: userEmail.split('@')[0],
      phonenumber: "0",
      branchid: "0",
      tenantname: "Anwi Systems",
      rolename: "Customer Admin",
      currencyid: "0",
      customerformuniqueid: "Bizgaze_Platform_Crm_RegisterCRMUser",
    };

    let res = await postAPIService(
      AUTH_LOGIN_APIS_URL.signUp(),
      userRegistratioNPayload
    );

    res = res.data;
    if (res.code != '0') {
      formErrorAction.addError(res.message);
      authloginLoadingBtnAction.removeLoading();
      return;
    }

    res = res.result;

    userDetails['otpid'] = res.OtpId;
    userDetails['email'] = userEmail;
    userDetails['password'] = userPassword;
    userDetails['unibaseid'] = res.UnibaseId;
    backotp = backOptions.signUp
    OTP_UI();
  

  }


  function loginUI() {
    formErrorAction.removeClass();
    let html = `<div class="text-center pb-4">
    <span class="font-weight-600">Login</span> / <span class="font-weight-600">Signup</span>
  </div>
  <form class="row g-3 needs-validation" novalidate>
    <div class="form-floating py-0">
      <input required type="email" class="form-control shadow-none h-50p" id="User_Email" placeholder="Enter Your Email" autocomplete="off">
      <label for="User_Email">Email address</label>
      <div class="invalid-feedback"> Please enter email. </div>
    </div>
    <div class="form-floating position-relative py-0">
      <input required type="password" class="form-control shadow-none h-50p passwordvalidui" id="User_password" placeholder="Enter Your Password" autocomplete="off">
      <span class="position-absolute eyePassword" style=" top: 50%; right: 3%; transform: translateY(-50%);">
        <i class="text-dark fa fa-eye-slash"></i>
      </span>
      <label for="User_password">Password </label>
      <div class="invalid-feedback"> Please enter password. </div>
      <div class="pswd_info" style="display: none;z-index: 1;">
        <p>Password must contain:</p>
        <ul>
        <li id="chck_capital" class="invalid">At least <strong>one capital letter</strong>
        </li>
         <li id="chck_small" class="invalid">At least <strong>one lowercase letter</strong>
        </li>
        <li id="chck_special" class="invalid">At least <strong>one special letter</strong>
        </li>
        <li id="chck_number" class="invalid">At least <strong>one number</strong>
        </li>
        <li id="chck_length" class="invalid">At least <strong>8 characters</strong>
        </li>
        </ul>
      </div>
    </div>
    <div class="fs-7 my-2 satoshi_font text-center"> By continuing, I agree to the Terms of Use & Privacy Policy </div>
    <div class="col-12 mt-0 px-0">
      <button class="btn bg-gradient-anwi text-white w-100 cursor-pointer h-50p" type="submit">
        <div class="spinner-border authloginLoadingBtn d-none" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
        <span class="authloginLoading h-50p">Continue</span>
      </button>
    </div>
  </form>
  <div class="pt-3 text-center">
    <span class="forgotpasswordBtn cursor-pointer">Forgot password?</span>
  </div>
 `;
    $('.authContainerUI').html(html);
    
    loginEvents();
  }

  function OTP_UI(forgot = 0) {
    formErrorAction.removeClass();
    let html = `<div class="d-flex justify-content-between border-bottom pb-1">
    <span></span>
    <span class="btnForgotback">
      <i class="fa-solid fa-arrow-left"></i>
    </span>
  </div> <div class="otp-validation"> <div class="otp-input-group mt-3"> <div> <h4 class="text-center">Enter OTP</h4> <div class="text-center">We have send OTP to your email </div> <p class="user_email text-center"></p> <div class="otp-sent-email fw-600 text-center"></div> </div> <div class="d-flex my-4"> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" tabindex="1" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" tabindex="2" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" tabindex="3" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" tabindex="4" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" tabindex="5" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" tabindex="6" autocomplete="off"> </div> </div> </div> <div> <div class="btn bg-gradient-anwi w-100 loader-btn" style="display: none;"> <span class="loader"></span> </div> <a href="#" class=" h-50p d-flex align-items-center justify-content-center bg-gradient-anwi btn fw-500 text-white w-100" id="email_validate_proceed" type="submit"><div class="spinner-border otploading d-none" role="status">
  </div><span class="otploadingtext">Verfiy OTP</span></a> </div> <div class="resendOTP cursor-pointer text-center pt-4 ">Resend OTP</div> </div></div>`;
    $('.authContainerUI').html(html);
    loadOTPEvents(forgot);
  }

  async function validOTP(email, id, otp) {
    const validateForgotpass = {
      email: email,
      otpid: id,
      userotp: otp,
    };

    const res = await postAPIService(
      `hyperfusion/validateotp`,
      validateForgotpass
    );

    return res;
  }

  function loadOTPEvents(forgot) {


    $('.resendOTP').click(function (e) {
      resendOTP();
    })


    $('.btnForgotback').off().click(function(e){
      debugger;
      if(backotp === backOptions.forgotPassword){
        forgotPasswordUIEmail();
      }else if(backotp === backOptions.EmailnotV){
        loginUI();
      }else if(backotp === backOptions.signUp){
        loginUI();
      }
    });

    $("#email_validate_proceed").click(async function () {
      debugger;
      otpLoadingAction.addLoadingOTP();
      let userotp = '';
      $(".otp-validation .otp-input-group input").each(function () {
        let presVal = $(this).val();
        userotp += presVal;
      });

      if (userotp.length == 6) {
        // const validateForgotpass = {
        //   email: userDetails.email,
        //   otpid: userDetails.otpid,
        //   userotp: userotp,
        // };
        $('#email_validate_proceed').hide()
        $(".loader-btn").show();
        const validate_email_resopt = await validOTP(userDetails.email, userDetails.otpid, userotp);

        $(".loader-btn").hide();
        $('#email_validate_proceed').show()
        const Resotp = validate_email_resopt.data.result;
        if (Resotp == "Otp verified successfully") {
          if (forgot == 1) {
            updatePasswordUI();
            return;
          } else if (forgot == 2) {
            loginUI();
            toasterHelper("success", "Email has been verified");
            return;
          }
          const res = await loginUserService(userDetails.email, userDetails.password);


          COOKIE_HELPER_ACTIONS.setCookie({
            token: res.data.result.sessionId,
            userid: res.data.result.userId,
            ...res.data.result
          });
          const isCartAdded = localStorage.getItem(CART_ADD);
          if(isCartAdded){
            localStorage.removeItem(CART_ADD);
            window.location.href = `/selectdelivery.html`;
            return;
          }
          localStorage.setItem(USER_AUTH_OKAY,1);
          window.location.href = '/';
          otpLoadingAction.removeLoadingOTP();
        } else {
          // toasterOpts()
          // Command: toastr["error"]("Please enter Valid OTP");
          otpLoadingAction.removeLoadingOTP();
          formErrorAction.addError("Please enter Valid OTP")
  
        }
      }
      else {
        otpLoadingAction.removeLoadingOTP();
        formErrorAction.addError("Please enter Valid OTP")
      }
    });

    $(".otp-validation .otp-input-group").on("paste", function (p) {
      let data = p.originalEvent.clipboardData.getData("text");
      let dataLength = data.length;
      for (let i = 0; i < dataLength; i++) {
        let input = $(
          '.otp-validation .otp-input-group input[tabindex="' + (i + 1) + '"]'
        );
        input.val(data.charAt(i));
        if (input.val().length >= input.attr("maxlength")) {
          let nextInput = $(
            '.otp-validation .otp-input-group input[tabindex="' +
            (i + 2) +
            '"]'
          );
          if (nextInput) {
            nextInput.focus();
          }
        }
      }
      p.preventDefault();
    });

    $('.otp-validation .otp-input-group input[type="text"]').on(
      "keyup",
      function (e) {
        if ($(this).val().length >= $(this).attr("maxlength")) {
          if (e.keyCode !== 9 && e.keyCode !== 16) {
            let tabIndex = parseInt($(this).attr("tabindex")) + 1;
            $(
              '.otp-validation .otp-input-group input[tabindex="' +
              $(this).attr("tabindex") +
              '"]'
            ).val($(this).val());
            $(
              '.otp-validation .otp-input-group input[tabindex="' +
              tabIndex +
              '"]'
            ).focus();
          }
        } else {
          if (e.keyCode === 8) {
            let tabIndex = parseInt($(this).attr("tabindex")) - 1;
            $(
              '.otp-validation .otp-input-group input[tabindex="' +
              tabIndex +
              '"]'
            ).focus();
          }
        }
      }
    );
  }
}