device_home/pincode/js/pincode.js

   1 const TAG = '[DeviceHome][pincode]';
   2 const serverPort = 9000;
   3 const serverURL = window.location.protocol + '//' + window.location.hostname;
   4
   5 var publicKey;
   6 var input = '';
   7 var dots = document.querySelectorAll('.dot'), numbers = document.querySelectorAll('.number');
   8 var tryCount = 0;
   9
  10 function displayPincode() {
  11     var xhr = new XMLHttpRequest();
  12     xhr.onload = function () {
  13         if (xhr.status === 200 || xhr.status === 201) {
  14             publicKey = xhr.responseText;
  15         } else {
  16             console.error(xhr.responseText);
  17         }
  18     };
  19     xhr.open('GET', serverURL + ':' + serverPort + '/pincode/publicKey');
  20     xhr.send();
  21 }
  22
  23 function init() {
  24     dots = Array.prototype.slice.call(dots);
  25     numbers = Array.prototype.slice.call(numbers);
  26     numbers.forEach(function (number, index) {
  27         number.addEventListener('click', function () {
  28             number.className += ' grow';
  29             if (number.innerHTML === '0') {
  30                 input += 0;
  31             } else {
  32                 input += index + 1;
  33             }
  34             dots[input.length - 1].className += ' active';
  35             if (input.length >= 4) {
  36                 console.log(`${TAG} input: ${input}`);
  37                 sendPinCode(input);
  38
  39                 setTimeout(function () {
  40                     dots.forEach(function (dot, index) {
  41                         dot.className = 'dot';
  42                     });
  43                     input = '';
  44                 }, 900);
  45                 setTimeout(function () {
  46                     document.body.className = '';
  47                 }, 1000);
  48             }
  49             setTimeout(function () {
  50                 number.className = 'number';
  51             }, 1000);
  52         });
  53     });
  54 }
  55
  56 async function sendPinCode(data) {
  57     var encrypt = new JSEncrypt();
  58     encrypt.setPublicKey(publicKey);
  59     var xhr = new XMLHttpRequest();
  60     xhr.onload = function () {
  61         if (xhr.status === 200 || xhr.status === 201) {
  62             console.log(`result : ${xhr.responseText}`);
  63             chkPinCode(xhr.responseText === 'true' ? true : false);
  64         } else {
  65             console.error(xhr.responseText);
  66         }
  67     };
  68     xhr.open('POST', serverURL + ':' + serverPort + '/pincode/pinCodeToServer');
  69     xhr.setRequestHeader("Content-Type", "application/json");
  70     var data = encrypt.encrypt(data);
  71     console.log(`${TAG} data: ${data}`);
  72     xhr.send(JSON.stringify({ pincode: data.toString("utf8") }));
  73 }
  74
  75 function chkPinCode(returnVal) {
  76     if (returnVal) {
  77         dots.forEach(function (dot, index) {
  78             dot.className += ' correct';
  79         });
  80         document.body.className += ' correct';
  81         tryCount = 0;
  82         setTimeout(function () {
  83             loginForm.submit();
  84             //pinCode();
  85         }, 1000);
  86     } else {
  87         dots.forEach(function (dot, index) {
  88             dot.className += ' wrong';
  89         });
  90         document.body.className += ' wrong';
  91         tryCount++;
  92         if (tryCount === 5) {
  93             tryCount = 0;
  94             displayPincode();
  95             setTimeout(function () {
  96                 alert('Failed to input 5 times. A new Pincode has been generated, so check the TV notification.');
  97             }, 1000);
  98         }
  99     }
 100 }
 101
 102 function pinCode() {
 103     window.location.href = serverURL + ':' + serverPort + '/client/client.html';
 104 }
 105
 106 window.onload = function () {
 107     displayPincode();
 108     init();
 109 };