elements/viewer-password-screen/viewer-password-screen.html

<polymer-element name="viewer-password-screen" attributes="text active">
<template>
  <link rel="stylesheet" href="viewer-password-screen.css">
  <div class="center">
    <form class="form">
      <div id="message">{{text}}</div>
      <input id="password" type="password" size="20"></input>
      <input id="submit" type="submit" on-click={{submit}}></input>
      <div id="successMessage">{{successMessage}}</div>
    </form>
  </div>
</template>
<script>
  Polymer('viewer-password-screen', {
    text: 'This document is password protected. Please enter a password.',
    active: false,
    timerId: undefined,
    ready: function () {
      // Prevent default form submit behavior from occuring.
      this.$.submit.click = null;

      this.activeChanged();
    },
    accept: function() {
      this.successMessage = '&#x2714;'  // Tick.
      this.$.successMessage.style.color = 'rgb(0,125,0)';
      this.active = false;
    },
    deny: function() {
      this.successMessage = '&#x2718;';  // Cross.
      this.$.successMessage.style.color = 'rgb(255,0,0)';
      this.$.password.disabled = false;
      this.$.submit.disabled = false;
      this.$.password.focus();
      this.$.password.select();
    },
    submit: function(e) {
      e.preventDefault();
      if (this.$.password.value.length == 0)
        return false;
      this.successMessage = '...';
      this.$.successMessage.style.color = 'rgb(0,0,0)';
      this.$.password.disabled = true;
      this.$.submit.disabled = true;
      this.fire('password', { password: this.$.password.value });
      return false;
    },
    activeChanged: function() {
      clearTimeout(this.timerId);
      this.timerId = undefined;
      if (this.active) {
        this.style.visibility = 'visible';
        this.style.opacity = 1;
        this.successMessage = '';
        this.$.password.focus();
      } else {
        this.style.opacity = 0;
        this.timerId = setTimeout(function() {
          this.style.visibility = 'hidden'
        }.bind(this), 400);
      }
    }
  });
</script>
</polymer-element>