locals-verification.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../locals-input/locals-input.html">
<link rel="import" href="../locals-loader/locals-loader.html">

<link rel="import" href="../locals-style/locals-style.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">

<script type="text/javascript" src="../../bower_components/jsencrypt/bin/jsencrypt.js"></script>
<script type="text/javascript" src="../../bower_components/cryptojslib/rollups/aes.js"></script>

<!--
Verification component ( the side that requests a validation )

Example:

    <locals-verification objectdata="{{myobjectdata}}"></locals-verification>

-->
<dom-module id="locals-verification">

  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
        background-color: white;

      }

      .total {
        width: 100%;
        @apply(--layout-vertical);
        @apply(--layout-center-center);
        box-sizing: border-box; 
        padding: 30px 0px 30px 0px;
        /*background-color: var(--locals-whit); */      
      }
      .valcanvas {
        width: 100%;
        box-sizing: border-box; 
        padding: 0px;
        /*background-color: rgba(0,0,0,0.05);*/
        @apply(--layout-vertical);
        @apply(--layout-center);
      }
      .pin {
        width: 70%;
        @apply(--layout-vertical);
        @apply(--layout-center-center);
        background-color: white;
      }

      h1 {
        @apply(--locals-font-h1);
        color:var(--locals-blue);
        font-size: 24px;
      }

      p {
        @apply(--locals-font-body1);
        color:var(--locals-blue);
        font-size:16px;
      }



      .addbtn {
        margin-top: 20px;
      }

      .submitbtn {
        margin-top: 15px;
        @apply(--layout-horizontal);
        @apply(--layout-center-center);
      }

      .closecollapse {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        @apply(--layout-horizontal);
        @apply(--layout-end-justified);
        margin-bottom: 10px;
      }

      .tussenschot {
        width: 100%;
        
        border: 0;
        margin: 0px;
        color: var(--locals-grey3);
        background-color: var(--locals-grey2);
        height: 1px;
      }

      .whitespace {
        height: 20px;
      }

      .confirmed {
        width: 100%;
        @apply(--layout-vertical);
        @apply(--layout-center-center);
      }


      .confirmedv {
        @apply(--layout-horizontal);
        @apply(--layout-center-center);        
        @apply(--layout-wrap);
        width: 70%;
      }

      .confirmedv p {
        @apply(--opensans-semibold);
        text-align: center;     
      }

    </style>
    <div class="total">
    <div class="valcanvas">
      <template is="dom-if" if="{{_is(mode,'view')}}">
        <div class="pin"> 
          <locals-input autofocus bind-value="{{pincode}}" id="pincode" label="Pincode" center></locals-input>
          <locals-confirm on-confirm="toWaiting" type="next"></locals-confirm>
        </div>
      </template>
    </div>
    <template is="dom-if" if="{{_is(mode,'waiting')}}">
      <locals-loader small>Waiting for validator</locals-loader>
      <div class="whitespace"></div>
      <locals-button icon="declinenew" on-tap="cancel" confirmsmall bg="grey1" small></locals-button>
    </template>

    <template is="dom-if" if="{{_is(mode,'confirmed-by-user')}}">
      <locals-loader small>Confirmed by validator</locals-loader>
    </template>

    <template is="dom-if" if="{{_is(mode,'confirmed-by-blockchain')}}">
      <div class="confirmed">
        <div class="confirmedv">
          <locals-icon icon="v" iconcolor="blue" small></locals-icon>
          <p>Your data has been validated!</p>
        </div>
        <div class="whitespace"></div>
        <locals-button icon="arrowleft" on-tap="cancel" confirmsmall bg="grey1" small></locals-button>
      </div>
    </template>

    <template is="dom-if" if="{{_is(mode,'rejected-by-blockchain')}}">
      <locals-loader small>Rejected by user - BUMMERRRRRRRRRRRR</locals-loader>
    </template>

    </div>
  </template>

</dom-module>

<script>
  Polymer({
    is: 'locals-verification',
    properties: {
      objectdata: {
        type: Object
      },
      listening: {
        type: Boolean,
        value: false
      }
    },
    ready: function() {
      this.mode = 'view';
      this.verifications = {};
    },
    attached: function() {
      this.whisper = document.querySelector('locals-whisperer');
      if (this.listening) {
        console.log('locals-verification : listening');
        this.web3 = document.querySelector('web3-wallet');
        if (!this.web3) {
          console.error('locals-verification should find a web3-wallet component');
        }
        this.whisper.addEventListener('msg-received', function(e) {
          console.log('locals-verification MSG receieved', e.detail);
          if (this.currentchannel !== e.detail.topic) {
            console.log('not for me', this.currentchannel, e.detail.topic);
            return;
          }
          var input = e.detail.payload;
          switch (input.command) {
            case "sendaeskey":
              // We received an EAS key encrypted with our public key
              console.log('locals-verification: step 3 decrypt AES key', input.data, '=>', passPhrase);
              var passPhrase = this.crypt.decrypt(input.data);
              this.objectdata.account = this.web3.account;
              var objectdataString = JSON.stringify(this.objectdata);

              // passphrase is now the other side's EAS key to encrypt our data
              var encrypted_objectdata = CryptoJS.AES.encrypt(objectdataString, passPhrase).toString();
              console.log('locals-verification: step 3.1 encrypt avatar object', objectdataString, '=>', encrypted_objectdata);

              // send encrypted data to other side
              //var whisper = document.querySelector('locals-whisperer');
              this.whisper.whisperpost(input.from, JSON.stringify({
                'command': 'senduserdata',
                'from': this.currentchannel,
                'data': encrypted_objectdata
              }));
              break;
            case 'sendconfirmation':
              this.mode = 'confirmed-by-user';
              this.txhash = input.data.txhash;

              this.waitTx(this.txhash,function(result){
                this.mode = 'confirmed-by-blockchain';
              }.bind(this));

              // close the custom channel
              this.whisper.closechannel(this.currentchannel);
              break;
            case 'rejectconfirmation':
              this.mode = 'rejected-by-user';
              // close the custom channel
              this.whisper.closechannel(this.currentchannel);
              break;
          }
        }.bind(this));
      } else {
        console.log('locals-verification : not listening');
      }
    },
    waitTx: function(txHash, callback) {
      /*
       * Watch for a particular transaction hash and call the awaiting function when done;
       * Ether-pudding uses another method, with web3.eth.getTransaction(...) and checking the txHash;
       * on https://github.com/ConsenSys/ether-pudding/blob/master/index.js
       */
      var web3wallet = document.querySelector('web3-wallet');
      var blockCounter = 15;
      // Wait for tx to be finished
      var filter = web3wallet.web3.eth.filter('latest').watch(function(err, blockHash) {
        if (blockCounter <= 0) {
          filter.stopWatching();
          filter = null;
          console.warn('!! Tx expired !!');
          if (callback)
            return callback(false);
          else
            return false;
        }
        // Get info about latest Ethereum block
        var block = web3wallet.web3.eth.getBlock(blockHash);
        --blockCounter;
        // Found tx hash?
        if (block.transactions.indexOf(txHash) > -1) {
          // Tx is finished
          filter.stopWatching();
          filter = null;
          if (callback)
            return callback(true);
          else
            return true;
          // Tx hash not found yet?
        } else {
          // console.log('Waiting tx..', blockCounter);
        }
      }.bind(this));
    },
    detached: function() {
      if (this.currentchannel){
        this.whisper.closechannel(this.currentchannel);
      }
    },
    addVerification: function() {
      this.mode = 'code';
      this.toggleval();
    },
    toggleval: function() {
      this.$.valscollapse.toggle();
    },
    toView: function() {
      this.mode = 'view';
    },
    toWaiting: function() {
      this.requestValidation();
    },
    cancel: function() {
      // this.toggleval();
      this.mode = 'view';
      this.fire('cancel');
    },
    requestValidation: function() {
      this.crypt = new JSEncrypt({
        default_key_size: 512
      });
      // create new channel
      this.currentchannel = this.whisper.openchannel();
      console.log('My new channel is', this.currentchannel);
      console.log('locals-whisperer: step 1 : send senduserrequest (pubkey) to channel ', this.pincode);
      this.whisper.whisperpost(this.pincode, JSON.stringify({
        'command': 'senduserrequest',
        'from': this.currentchannel,
        'data': {
          'pubkey': this.crypt.getPublicKey()
        }
      }));
      this.mode = 'waiting';
      

    },
    _is: function(a, b) {
      if (b === undefined) {
        b = true;
      }
      return a === b;
    }
  });
</script>