InnovationLab/public/assets/js/loginGate.js

function LoginGate() {

  let loginPopup = null, style = null;

  function closePopup() {
    document.body.removeChild(loginPopup);
    document.head.removeChild(style);
  }

  function onSubmit() {
    const idNo = $('#idNo').val();
    const telExt = $('#telExt').val();
    let output = false;

    if (!/\d{4}/.test(idNo)) {
      $('.invalid-feedback--idNo').css('display', 'block');
    } else {
      $('.invalid-feedback--idNo').css('display', 'none');
      output = true;
    }

    if (!/\d{3}/.test(telExt)) {
      $('.invalid-feedback--telExt').css('display', 'block');
    } else {
      $('.invalid-feedback--telExt').css('display', 'none');
      output = true;
    }

    if (!output) return;

    $.ajax({
      url: 'https://ogilvytw.azurewebsites.net/api/verifyMember.ashx',
      data: {
        idNo: idNo,
        telExt: telExt,
      },
      success: (response) => {
        if (!response.success) {
          alert(response.msg);
          return;
        }
        alert('登入成功');
        $.cookie('innovationlab_cognitive_user', idNo + ':' + telExt, {  path: '/' }); // expires: 30,
        closePopup();
        afterLogin();
      },
      error: err => {
        console.log(err);
        alert(err)
      }
    });
  }

  function init() {
    const customcss = '.login__popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:1000}.login__popup table,.login__popup tr,.login__popup td{border:none;vertical-align:top}.login__popup .container{position:relative;background-color:#fff;padding-top:10px;padding-bottom:50px}.login__popup .button__close{font-size:36px;background:unset;border:none;color:#000;position:absolute;right:10px;top:0;cursor:pointer}.login__popup h2{padding-top:50px}.login__popup label{position:relative;width:160px;text-align:left}'
    style = document.createElement('style');
    style.innerText = customcss;
    document.head.appendChild(style);

    loginPopup = document.createElement('div');
    loginPopup.className = 'login__popup';
    loginPopup.innerHTML = '<div class="login__popup"><div class="container mt-5"><button type="button" class="button__close" aria-label="Close"><span aria-hidden="true">&times;</span></button><h2 class="text-center">Welcome To Innovation Lab</h2><div><table class="mx-auto"><tbody><tr class="form-group"><td><label for="idNo">請輸入身分證後四碼:</label></td><td><input type="text" id="idNo" maxlength="4"><div class="invalid-feedback invalid-feedback--idNo">身分證後四碼不正確</div></td></tr><tr class="form-group"><td><label for="idNo">請輸入分機號碼:</label></td><td><input type="text" id="telExt" maxlength="3"><div class="invalid-feedback invalid-feedback--telExt">分機號碼不正確</div></td></tr></tbody></table><div class="mt-3" align="center"><button class="button__login" class="mx-auto">登入使用服務</button></div></div><hr></div></div>';
    document.body.appendChild(loginPopup);

    loginPopup.querySelector('.button__login').addEventListener('click', onSubmit);
    loginPopup.querySelector('.button__close').addEventListener('click', closePopup);
  }

  function beforeLogin() {
    $('.app').css('display', 'none');
  }

  function afterLogin() {
    $('.app').css('display', 'block');
  }

  function execute() {
    beforeLogin();
    if ($.cookie('innovationlab_cognitive_user')) {
      afterLogin();
      return;
    }
    init();
  }

  {
    $( document ).ready(function() {
      execute();
    })
  }
}

window.loginGate = new LoginGate();