src/chrome/browser/resources/http_auth.html

   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>