validate-certificate.html

<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/iron-ajax/iron-ajax.html">

<!--
`validate-certificate`
With a <blockchain-certificate> child, presents a "validate" button which validates the certificate.

@demo demo/index.html
-->

<dom-module id="validate-certificate">
  <template>
    <style>
    :host {
      text-align: center;
    }
    :host .validate-button {
      background-color: lightgray;
      border: 1px solid transparent;
      border-radius: 30px;
      cursor: pointer;
      display: block;
      font-size: 16px;
      margin: 20px auto 10px auto;
      padding: 5px 30px;
    }
    :host p {
      margin-top: 30px;
    }
    </style>
    <content id="content"></content>
    <p>[[_status]]</p>
    <button class="validate-button" on-tap="validate">Validate</button>
  </template>
  <script src="./bower_components/jsonld/js/jsonld.js"></script>
  <script src="./bower_components/js-sha3/src/sha3.js"></script>
  <script src="./bower_components/js-sha256/src/sha256.js"></script>
  <script src="./app.js"></script>
  <script src="./verifier.js"></script>


  <script>
    Polymer({

      is: 'validate-certificate',

      properties: {
        _status: {
          readOnly: true,
          type: String,
          value: "",
        }
      },

      _updateStatus(status, message) {
        let statusString = ""
        switch (status) {
          case Verifier.Status.computingLocalHash:
            statusString = "Computing local hash..."
            break;
          case Verifier.Status.fetchingRemoteHash:
            statusString = "Fetching remote hash..."
            break;
          case Verifier.Status.comparingHashes:
            statusString = "Comparing local and remote hashes..."
            break;
          case Verifier.Status.checkingMerkleRoot:
            statusString = "Checking merkle root..."
            break;
          case Verifier.Status.checkingReceipt:
            statusString = "Checking the receipt..."
            break;
          case Verifier.Status.checkingIssuerSignature:
            statusString = "Checking the issuer's signature..."
            break;
          case Verifier.Status.checkingRevokedStatus:
            statusString = "Checking if the certificate has been revoked..."
            break;
          case Verifier.Status.success:
            statusString = "This is a valid certificate!"
            break;
          case Verifier.Status.failure:
            statusString = `Not a valid certificate. ${message}`
            break;
        }
        console.log(statusString);
        this._set_status(statusString);
      },
      validate() {
        const certificateNode = this.queryEffectiveChildren('blockchain-certificate')

        if (certificateNode.isLoading) {
          this._set_status("Can't validate a certificate while it's loading. Try again after it loads.")
          return
        }
        if (certificateNode.isErrored) {
          this._set_status("That certificate didn't load correctly, so it can't be validated.")
          return
        }
        const dataString = certificateNode.certificateData || ""
        if (!certificateNode.hasCertificateData || dataString.length == 0) {
          this._set_status("Can't validate a certificate that doesn't have any data. Sorry.")
          return
        }

        // Okay, now start up a new validator & let's see what we get.
        const verifier = new Verifier.CertificateVerifier(dataString, (status, message) => {
          this._updateStatus(status, message);
      });
        verifier.verify();
      }
    });
  </script>
</dom-module>