Add a <viewer-password-screen> element.

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

Index: elements/viewer-password-screen/viewer-password-screen.html
diff --git a/elements/viewer-password-screen/viewer-password-screen.html b/elements/viewer-password-screen/viewer-password-screen.html
new file mode 100644
index 0000000000000000000000000000000000000000..64a8aeb54afc3ae37945077b8908311ac5365dd5
--- /dev/null
+++ b/elements/viewer-password-screen/viewer-password-screen.html
@@ -0,0 +1,65 @@
+<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) {

[ganetsky1, 2014/02/20 20:18:16]

You can add arguments oldValue and newValue to the function and read those

+        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>