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