meta(charset='UTF-8')
meta(http-equiv='X-UA-Compatible' content='IE=edge')
meta(name='viewport' content='width=device-width,initial-scale=1')
title SBI
//- link(href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css', rel='stylesheet', integrity='sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN', crossorigin='anonymous')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
link(rel='stylesheet', href='css/style.css')
link(rel='stylesheet', href='css/fonts.css')
link(rel='stylesheet', href='css/responsive.css')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
//- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
//- script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js', integrity='sha384-rHyoN1iRsVXV4nDlGO5xeP6po+GVAWrZYeFiRT5gt9MBoiyoF9gy5S5YpgzI/JZDI', crossorigin='anonymous')
script(src='assets/js/sweetalert2011.js')
#myModal.modal(style='z-index:5000')
  .modal-content
    .modal-body
      div.d-flex.justify-content-end.align-items-center
        button.mb-2.btn.btn-danger(type='button', onclick='modalClose()', style='width: 30px; height: 35px;')
          span.color-secondary.fw-600(style='display: flex; align-items: center; justify-content: center;') X
      .form-info
        input#otp(type='text', style='font-size:15px; text-align:center;', name='otp', autocomplete='off', required='', placeholder='Enter OTP', minLength=6, maxLenght=6)
      h5#error.color-red
      center.pt-2
        button.btn.btn-otp.btn-block(type='button', onclick='verifyOtp()')
          span.color-secondary.fw-600 Submit

.main
  .login-wrapper
    .row
      //  left part 
      .col-md-6.left-part
        .heroImg
          img(src='images/login-banner.png' alt)
        .content-heroBanner
          h1 One Stop Solution
          p For All Investment
      //  Right part 
      .col-md-6.right-part
        .login-box
          .loginHeader
            .welcome-txt Welcome to
            .login-logo
              img(src='images/logo.png' alt)
          .loginContent
            form
              .form-login
                .form-info
                  label User Id
                  input#userid(type='text' name='userid' autocomplete='off' required='' value='')
                .form-info
                  label Password
                  input#pwd(type='password' name='pwd' autocomplete='off' required='' value='')
                //- .forgot-pass
                //-   a(href) Forgot Password?
                ul.options
                  li(id='webCustody' class='activeOpt' onclick='selectLoginType("webCustody")')
                    span Web Custody
                  li(id='derivatives' onclick='selectLoginType("derivatives")')
                    span Derivatives
                  li(id='fundAccounting' onclick='selectLoginType("fundAccounting")')
                    span Fund Accounting
                br    
                //  captcha Area 
                .form-info
                  label#status
                  input#captcha(type='text' name='captcha' style='font-size:20px; text-align:center; text-decoration:line-through;' autocomplete='off' required='' placeholder='' readonly)
                .form-info  
                  input#captchaenter(type='text' name='captchaenter' style='font-size:15px; text-align:center;' autocomplete='off' required='' placeholder='Enter captcha' onpaste='return preventPaste(event)' oncopy='return preventCopy(event)')
                 
                .login-wrap
                  button.btn.login-btn(type='button' onclick='loginAction()') Login
                  
                .forgot-pass
                  a(href) Forgot Password?  

script.
    function modalClose() {
      $("#myModal").hide();
    }
    
    let selectedLoginType = 'webCustody';
    function selectLoginType(loginType) {
      document.querySelectorAll('.options li').forEach((li) => {
        li.classList.remove('activeOpt');
      });
      document.getElementById(loginType).classList.add('activeOpt');
      selectedLoginType = loginType;
    }        
    let alphabets = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
    let status = document.getElementById('status');
    status.innerText = "Captcha Generator";
    let captchaValue;

    function preventCopy(event) {
      event.preventDefault();
      // Optionally, you can provide feedback to the user that copying is not allowed.
      console.log('Copying is not allowed.');
      return false;
    }

    function preventPaste(event){
      event.preventDefault();
      return false;
    }

    function generateCaptcha() {
      let first = alphabets[Math.floor(Math.random() * alphabets.length)];
      let second = Math.floor(Math.random() * 10);
      let third = Math.floor(Math.random() * 10);
      let fourth = alphabets[Math.floor(Math.random() * alphabets.length)];
      let fifth = alphabets[Math.floor(Math.random() * alphabets.length)];
      let sixth = Math.floor(Math.random() * 10);
      captchaValue = first.toString() + second.toString() + third.toString() + fourth.toString() + fifth.toString() + sixth.toString();
      document.getElementById('captcha').value = captchaValue;
      document.getElementById("captchaenter").value = '';
      status.innerText = "Captcha Verification"
    }

    generateCaptcha();
    
    function checkCaptcha() {
      let userValue = document.getElementById("captchaenter").value;
      if (userValue == captchaValue) {
        return true;	
      } else { 
        status.innerText = "Invalid Captcha! Please Try Again"
        document.getElementById("captchaenter").value = '';
        return false;
      }
    }
    function loginAction () {
      let username = document.getElementById("userid").value;
      let password = document.getElementById("pwd").value;
      let loginType = selectedLoginType;
      if (username == "") {
        Swal.fire({title: "ERROR", icon: 'error', html: "Username shouldn't be empty"});
      } else if (password == "") {
        Swal.fire({title: "ERROR", icon: 'error', html: "Password shouldn't be empty"});
      } else if (! checkCaptcha()) {
        Swal.fire({title: "ERROR", icon: 'error', html: "Invalid Captcha"});
      } else {
      
        let data = {}
        data.username = username;
        data.password = password;
        data.loginType = loginType;

        let formBody = [];
        for (let property in data) {
          let encodedKey = encodeURIComponent(property);
          let encodedValue = encodeURIComponent(data[property]);
          formBody.push(encodedKey + "=" + encodedValue);
        }

        formBody = formBody.join("&");

        fetch("http://localhost:1337/ssg/clientloginpage", {
          method: 'POST',
          body: formBody,
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
          .then(response => response.json())
          .then(myJson => {
            if (myJson.data) {
              let error = document.getElementById('error');
              error.innerText = "";
              $("#myModal").show()
            } else {
              Swal.fire({ title: "ERROR", icon: 'error', html: myJson.errormsg });
            }
          })
          .catch(error => {
            console.error('Error:', error);
          });
      }
  }
  const verifyOtp = async () => {
    let username = document.getElementById("userid").value;
    let otp = document.getElementById("otp").value;
    let loginType = selectedLoginType;
    
      if (otp.length != 6) {
      $("#myModal").hide();
      Swal.fire({title: "ERROR", icon: 'error', html: "Invalid OTP"});
    }else {

      let data = {}
      data.username = username;
      data.otp = otp;
      data.loginType = loginType;

      let formBody = [];
      for (let property in data) {
        let encodedKey = encodeURIComponent(property);
        let encodedValue = encodeURIComponent(data[property]);
        formBody.push(encodedKey + "=" + encodedValue);
      }

      formBody = formBody.join("&");
      const response = await fetch('http://localhost:1337/ssg/verifyOtp', {
      method: 'POST',
      body: formBody,
      headers: {
        'Content-Type': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded'
        }
      });
      document.getElementById("otp").value = ''
    const myJson = await response.json();
      if (myJson.data) {
        
        $("#myModal").modal('hide');
        document.getElementById("captchaenter").value = ''
        document.getElementById("userid").value =''
        document.getElementById("otp").value =''
        document.getElementById("pwd").value = ''
        let error = document.getElementById('error');
        error.innerText = "";
        location.href = myJson.data.url;
      } else {
        let error = document.getElementById('error');
        error.innerText = myJson.errormsg;
      }
    }
  }
