OLD | NEW |
1 <polymer-element name="viewer-password-screen" attributes="text active"> | 1 <polymer-element name="viewer-password-screen" attributes="text active"> |
2 <template> | 2 <template> |
3 <link rel="stylesheet" href="viewer-password-screen.css"> | 3 <link rel="stylesheet" href="viewer-password-screen.css"> |
4 <div class="center"> | 4 <div class="center"> |
5 <form class="form"> | 5 <form class="form"> |
6 <div id="message">{{text}}</div> | 6 <div id="message">{{text}}</div> |
7 <input id="password" type="password" size="20"></input> | 7 <input id="password" type="password" size="20"></input> |
8 <input id="submit" type="submit" on-click={{submit}}></input> | 8 <input id="submit" type="submit" on-click={{submit}}></input> |
9 <div id="successMessage">{{successMessage}}</div> | 9 <div id="successMessage">{{successMessage}}</div> |
10 </form> | 10 </form> |
11 </div> | 11 </div> |
12 </template> | 12 </template> |
13 <script> | 13 <script> |
14 Polymer('viewer-password-screen', { | 14 Polymer('viewer-password-screen', { |
15 text: 'This document is password protected. Please enter a password.', | 15 text: 'This document is password protected. Please enter a password.', |
16 active: false, | 16 active: false, |
17 timerId: undefined, | 17 timerId: undefined, |
18 ready: function () { | 18 ready: function () { |
19 // Prevent default form submit behavior from occuring. | |
20 this.$.submit.click = null; | |
21 | |
22 this.activeChanged(); | 19 this.activeChanged(); |
23 }, | 20 }, |
24 accept: function() { | 21 accept: function() { |
25 this.successMessage = '✔' // Tick. | 22 this.successMessage = '✔' // Tick. |
26 this.$.successMessage.style.color = 'rgb(0,125,0)'; | 23 this.$.successMessage.style.color = 'rgb(0,125,0)'; |
27 this.active = false; | 24 this.active = false; |
28 }, | 25 }, |
29 deny: function() { | 26 deny: function() { |
30 this.successMessage = '✘'; // Cross. | 27 this.successMessage = '✘'; // Cross. |
31 this.$.successMessage.style.color = 'rgb(255,0,0)'; | 28 this.$.successMessage.style.color = 'rgb(255,0,0)'; |
32 this.$.password.disabled = false; | 29 this.$.password.disabled = false; |
33 this.$.submit.disabled = false; | 30 this.$.submit.disabled = false; |
34 this.$.password.focus(); | 31 this.$.password.focus(); |
35 this.$.password.select(); | 32 this.$.password.select(); |
36 }, | 33 }, |
37 submit: function(e) { | 34 submit: function(e) { |
| 35 // Prevent the default form submission behavior. |
38 e.preventDefault(); | 36 e.preventDefault(); |
39 if (this.$.password.value.length == 0) | 37 if (this.$.password.value.length == 0) |
40 return false; | 38 return; |
41 this.successMessage = '...'; | 39 this.successMessage = '...'; |
42 this.$.successMessage.style.color = 'rgb(0,0,0)'; | 40 this.$.successMessage.style.color = 'rgb(0,0,0)'; |
43 this.$.password.disabled = true; | 41 this.$.password.disabled = true; |
44 this.$.submit.disabled = true; | 42 this.$.submit.disabled = true; |
45 this.fire('password-submitted', { password: this.$.password.value }); | 43 this.fire('password-submitted', {password: this.$.password.value}); |
46 return false; | 44 return; |
47 }, | 45 }, |
48 activeChanged: function() { | 46 activeChanged: function() { |
49 clearTimeout(this.timerId); | 47 clearTimeout(this.timerId); |
50 this.timerId = undefined; | 48 this.timerId = undefined; |
51 if (this.active) { | 49 if (this.active) { |
52 this.style.visibility = 'visible'; | 50 this.style.visibility = 'visible'; |
53 this.style.opacity = 1; | 51 this.style.opacity = 1; |
54 this.successMessage = ''; | 52 this.successMessage = ''; |
55 this.$.password.focus(); | 53 this.$.password.focus(); |
56 } else { | 54 } else { |
57 this.style.opacity = 0; | 55 this.style.opacity = 0; |
58 this.timerId = setTimeout(function() { | 56 this.timerId = setTimeout(function() { |
59 this.style.visibility = 'hidden' | 57 this.style.visibility = 'hidden' |
60 }.bind(this), 400); | 58 }.bind(this), 400); |
61 } | 59 } |
62 } | 60 } |
63 }); | 61 }); |
64 </script> | 62 </script> |
65 </polymer-element> | 63 </polymer-element> |
OLD | NEW |