<!DOCTYPE html>
<html i18n-values="dir:textdirection">
<head>
<style type="text/css">
body {
margin: 0px;
}
#buttons {
text-align: right;
}
html[dir='rtl'] #buttons {
text-align: left;
}
#username,
#password {
width: 220px;
}
</style>
<script type="text/javascript">
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 setAutofillCredentials(username, password) {
$('username').value = username;
$('password').value = password;
}
function load() {
$('explanation').textContent = chrome.dialogArguments;
$('cancel').onclick = function() {
disableControls();
chrome.send('DialogClose', ['']);
};
$('login').onclick = function() {
sendCredentialsAndClose();
};
$('username').focus();
chrome.send('GetAutofill', ['']);
}
document.addEventListener('DOMContentLoaded', load);
</script>
</head>
<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
<div id="explanation"></div>
<table>
<tr>
<td i18n-content="username"></td>
<td>
<input id="username" type="text">
</td>
</tr>
<tr>
<td i18n-content="password"></td>
<td>
<input id="password" name="password" type="password">
</td>
</tr>
</table>
<div id="buttons">
<input id="cancel" type="button" i18n-values="value:cancel">
<input id="login" type="button" i18n-values="value:signin">
</div>
</body>
</html>