Home | History | Annotate | Download | only in resources 
      1 <!DOCTYPE html>
      2 <html i18n-values="dir:textdirection">
      3 <head>
      4   <link rel="stylesheet" href="dialog.css">
      5   <style>
      6     body {
      7       margin: 10px 10px 0 10px;
      8       -webkit-user-select: none;
      9     }
     10 
     11     form {
     12       margin: 0;
     13     }
     14 
     15     #explanation {
     16       cursor: default;
     17     }
     18 
     19     #fields {
     20       padding: 10px 0;
     21       margin-left: auto;
     22       margin-right: auto;
     23     }
     24 
     25     #username-label-cell,
     26     #password-label-cell {
     27       text-align: end;
     28       -webkit-padding-end: 5px;
     29     }
     30 
     31     #username,
     32     #password {
     33       width: 150px;
     34     }
     35 
     36     #buttons {
     37       text-align: end;
     38     }
     39 
     40   </style>
     41   <script>
     42     function $(o) {
     43       return document.getElementById(o);
     44     }
     45 
     46     function disableControls() {
     47       $('username').disabled = true;
     48       $('password').disabled = true;
     49       $('login').disabled = true;
     50       $('cancel').disabled = true;
     51     }
     52 
     53     function sendCredentialsAndClose() {
     54       disableControls();
     55 
     56       var result = JSON.stringify({
     57           'username': $('username').value,
     58           'password': $('password').value});
     59 
     60       chrome.send('DialogClose', [result]);
     61     }
     62 
     63     function cancel() {
     64       disableControls();
     65       chrome.send('DialogClose');
     66     }
     67 
     68     function handleSubmit(e) {
     69       sendCredentialsAndClose();
     70       e.preventDefault();
     71     }
     72 
     73     function handleKeyDown(e) {
     74       if (e.keyCode == 27) {  // Escape
     75         cancel();
     76         e.preventDefault();
     77       }
     78     }
     79 
     80     function setAutofillCredentials(username, password) {
     81       $('username').value = username;
     82       $('password').value = password;
     83     }
     84 
     85     function load() {
     86       document.addEventListener('keydown', handleKeyDown);
     87       $('explanation').textContent = chrome.getVariableValue('dialogArguments');
     88       $('form').onsubmit = handleSubmit;
     89       $('cancel').onclick = cancel;
     90 
     91       chrome.send('GetAutofill', ['']);
     92     }
     93 
     94     document.addEventListener('DOMContentLoaded', load);
     95   </script>
     96 </head>
     97 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
     98   <div id="explanation"></div>
     99   <form id="form">
    100     <table id="fields">
    101       <tr>
    102         <td id="username-label-cell">
    103           <label for="username" i18n-content="username"></label>
    104         </td>
    105         <td>
    106           <input id="username" type="text" autofocus>
    107         </td>
    108       </tr>
    109       <tr>
    110         <td id="password-label-cell">
    111           <label for="password" i18n-content="password"></label>
    112         </td>
    113         <td>
    114           <input id="password" name="password" type="password">
    115         </td>
    116       </tr>
    117     </table>
    118     <div id="buttons">
    119       <input id="cancel" type="reset" i18n-values="value:cancel">
    120       <input id="login" type="submit" i18n-values="value:signin">
    121     </div>
    122   </form>
    123 </body>
    124 </html>
    125