| <!DOCTYPE html> |
| <html i18n-values="dir:textdirection"> |
| <head> |
| <link rel="stylesheet" href="dialog.css"> |
| <style> |
| body { |
| margin: 10px 10px 0 10px; |
| -webkit-user-select: none; |
| } |
| |
| form { |
| margin: 0; |
| } |
| |
| #explanation { |
| cursor: default; |
| } |
| |
| #fields { |
| padding: 10px 0; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| #username-label-cell, |
| #password-label-cell { |
| text-align: end; |
| -webkit-padding-end: 5px; |
| } |
| |
| #username, |
| #password { |
| width: 150px; |
| } |
| |
| #buttons { |
| text-align: end; |
| } |
| |
| </style> |
| <script> |
| function $(o) { |
| return document.getElementById(o); |
| } |
| |
| function disableControls() { |
| $('username').disabled = true; |
| $('password').disabled = true; |
| $('login').disabled = true; |
| $('cancel').disabled = true; |
| } |
| |
| function sendCredentialsAndClose() { |
| disableControls(); |
| |
| var result = JSON.stringify({ |
| 'username': $('username').value, |
| 'password': $('password').value}); |
| |
| chrome.send('DialogClose', [result]); |
| } |
| |
| function cancel() { |
| disableControls(); |
| chrome.send('DialogClose'); |
| } |
| |
| function handleSubmit(e) { |
| sendCredentialsAndClose(); |
| e.preventDefault(); |
| } |
| |
| function handleKeyDown(e) { |
| if (e.keyCode == 27) { // Escape |
| cancel(); |
| e.preventDefault(); |
| } |
| } |
| |
| function setAutofillCredentials(username, password) { |
| $('username').value = username; |
| $('password').value = password; |
| } |
| |
| function load() { |
| document.addEventListener('keydown', handleKeyDown); |
| $('explanation').textContent = chrome.getVariableValue('dialogArguments'); |
| $('form').onsubmit = handleSubmit; |
| $('cancel').onclick = cancel; |
| |
| chrome.send('GetAutofill', ['']); |
| } |
| |
| document.addEventListener('DOMContentLoaded', load); |
| </script> |
| </head> |
| <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
| <div id="explanation"></div> |
| <form id="form"> |
| <table id="fields"> |
| <tr> |
| <td id="username-label-cell"> |
| <label for="username" i18n-content="username"></label> |
| </td> |
| <td> |
| <input id="username" type="text" autofocus> |
| </td> |
| </tr> |
| <tr> |
| <td id="password-label-cell"> |
| <label for="password" i18n-content="password"></label> |
| </td> |
| <td> |
| <input id="password" name="password" type="password"> |
| </td> |
| </tr> |
| </table> |
| <div id="buttons"> |
| <input id="cancel" type="reset" i18n-values="value:cancel"> |
| <input id="login" type="submit" i18n-values="value:signin"> |
| </div> |
| </form> |
| </body> |
| </html> |
