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