blockchain-certificate.html

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

<!--
`blockchain-certificate`
Displays a rendered Blockchain Certificate

@demo demo/index.html
-->

<dom-module id="blockchain-certificate">
  <template>
    <style include="common-styles"></style>

    <iron-ajax
      auto
      url=[[href]]
      handle-as="text"
      params='{"format":"json"}'
      on-response="_handleResponse"
      on-error="_handleError"
      debounce-duration="300">
    </iron-ajax>


    <template is="dom-if" if=[[isLoading]]>
      <h1>Loading...</h1>
    </template>
    <template is="dom-if" if=[[isErrored]]>
      <h1>[[_status]]</h1>
      <a href=[[href]]>View Certificate</a>
    </template>
    <template is="dom-if" if=[[hasCertificateData]]>
      <section class="certificate-image"><img src=[[_certificateImage]] /></section>
      <section class="headers">
        <h1 class="recipient">[[_recipient]]</h1>
        <h2 class="title">[[_title]]</h2>
        <h3 class="subtitle">[[_subtitle]]</h3>
      </section>
      <section class="description">
        <p>[[_description]]</p>
      </section>
      <section class="signatures">
        <img src=[[_signatureImage]] />
      </section>
      <section class="seal">
        <img src=[[_sealImage]] />
      </section>
    </template>
  </template>

  <script src="./verifier.js"></script>

  <script>
    Polymer({

      is: 'blockchain-certificate',

      properties: {
        /* The URL of the certificate you wish to display. */
        href: {
          type: String,
          value: 'blockchain-certificate',
          // observer: '_hrefChanged'
        },

        /* True while we're loading the certificate at the given href. */
        isLoading: {
          type: Boolean,
          value: true,
          readOnly: true
        },

        /* True if we've encountered an error trying to download or parse the certificate at the given href. */
        isErrored: {
          type: Boolean,
          value: false,
          readOnly: true
        },

        /* True if we've successfully loaded & parsed certificate data from the given href. False otherwise. */
        hasCertificateData: {
          type: Boolean,
          value: false,
          readOnly: true
        },

        /* The contents of the certificate at the specified href. */
        certificateData: {
          type: String,
          readOnly: true
        },

        /* A short explanation of the status of the web component */
        _status: {
          type: String,
          readOnly: true
        },

        //
        // Private properties
        //
        /* Image attached to the certificate object. */
        _certificateImage: {
          type: String,
          readOnly: true
        },

        /* The first & last name of the recipient */
        _recipient: {
          type: String,
          readOnly: true
        },

        /* Title on the certificate */
        _title: {
          type: String,
          readOnly: true
        },

        /* Subtitle on the certificate */
        _subtitle: {
          type: String,
          readOnly: true
        },

        /* Description on the certificate */
        _description: {
          type: String,
          readOnly: true
        },

        /* Image on the assertion. Typically, this is a picture of a signature. */
        _signatureImage: {
          type: String,
          readOnly: true
        },

        /* Image of the issuing institution. Typically, this is the official seal of the issuing institution. */
        _sealImage: {
          type: String,
          readOnly: true
        }
      },
      _handleResponse: function(event) {
        try {
          // We need to save the string response, because older validation methods require us to validate the unchanged file.
          const stringResponse = event && event.detail && event.detail.response;
          this._setCertificateData(stringResponse);
          const certJson = JSON.parse(stringResponse);
          const cert = Verifier.Certificate.parseJson(certJson);
          this._setHasCertificateData(true);
          this._set_certificateImage(cert.certificateImage);
          this._set_recipient(cert.name);
          this._set_title(cert.title);
          this._set_subtitle(cert.subtitle);
          this._set_description(cert.description);
          this._set_signatureImage(cert.signatureImage[0].image);
          this._set_sealImage(cert.sealImage);
        } catch (e) {
          this._setIsLoading(false);
          this._setHasCertificateData(false);
          this._setIsErrored(true);
          this._set_status("Referenced certificate doesn't appear to be valid.");
        } finally {
          this._setIsLoading(false);
        }
      },
      _handleError: function() {
        this._setIsLoading(false);
        this._setHasCertificateData(false);
        this._setIsErrored(true);
        this._set_status('Failed to load certificate at URL.');
      }
    });
  </script>
</dom-module>