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