PIN entry in browser action via <x-pin>
Refactored some stuff in <x-pin>, made it so that it raises changed events for each digit entered, and that it only accepts numerical digits. Closes mozilla/gombot#8
This commit is contained in:
Paul Sawaya
Родитель
ee3da01cce
Коммит
4f1892305c
|
|
@ -14,6 +14,13 @@ hr {
|
|||
margin:7px 0;
|
||||
}
|
||||
|
||||
x-pin > div.x-pin-fields > input {
|
||||
width:42px;
|
||||
height:65px;
|
||||
background:-webkit-linear-gradient(top, #DDD 0%,white 100%);
|
||||
font-size:48pt;
|
||||
}
|
||||
|
||||
.login .copy-button {
|
||||
display:none;
|
||||
padding:0px;
|
||||
|
|
@ -47,7 +54,13 @@ hr {
|
|||
}
|
||||
|
||||
#pin-entry {
|
||||
display:none;
|
||||
/* display:none;*/
|
||||
}
|
||||
|
||||
#pin-entry input {
|
||||
font-size:48pt;
|
||||
width:50px;
|
||||
height:70px;
|
||||
}
|
||||
|
||||
#pin-entry-frame {
|
||||
|
|
|
|||
|
|
@ -3,9 +3,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="../lib/bootstrap.css" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="/pages/common/x-tags/pin/pin.css" media="screen" />
|
||||
<link href="../common/pin_entry.css" rel="stylesheet">
|
||||
<link href="browser_action.css" rel="stylesheet">
|
||||
<script src="../lib/jquery.js"></script>
|
||||
<script src="/pages/common/js/libs/x-tag.js"></script>
|
||||
<script src="/pages/common/x-tags/pin/pin.js"></script>
|
||||
<script src="browser_action.js"></script>
|
||||
</head>
|
||||
|
||||
|
|
@ -21,7 +24,10 @@
|
|||
<a id="signup-link" href="#">Sign up</a> for Gombot to get started!
|
||||
</div>
|
||||
<hr>
|
||||
<iframe src="../common/pin_entry.html" id="pin-entry-frame"></iframe>
|
||||
<div id="pin-prompt">
|
||||
Enter PIN to unlock site
|
||||
</div>
|
||||
<x-pin name="pin" size="4"></x-pin>
|
||||
<div id="logins"></div>
|
||||
<div id="no-logins-saved">
|
||||
No accounts saved for this site.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* This code runs inside of the browser action popup. Enables the user
|
||||
* to choose a login and copy the corresponding password to their clipboard,
|
||||
* as well as prompting them for a PIN inside of a iframe (pin_entry.html).
|
||||
* as well as prompting them for a PIN to view their passwords..
|
||||
*
|
||||
*/
|
||||
|
||||
|
|
@ -69,43 +69,26 @@ function initBrowserAction() {
|
|||
if (pinLocked) {
|
||||
$('#logins').hide();
|
||||
$('#pin-entry-frame').show();
|
||||
var pinEntryIframe = $('#pin-entry-frame').get()[0];
|
||||
// Use setTimeout to wait a beat so the document ready handler in pin_entry.js
|
||||
// has a chance to run.
|
||||
setTimeout(function() {
|
||||
pinEntryIframe.contentWindow.postMessage({
|
||||
'type': 'set_prompt',
|
||||
'prompt': "Enter your PIN to see your accounts for this site."
|
||||
}, '*');
|
||||
// This tells pin_entry.js to use window.postMessage instead of
|
||||
// chrome.extension.sendMessage.
|
||||
pinEntryIframe.contentWindow.postMessage({
|
||||
'type': 'set_container',
|
||||
'in_iframe': true
|
||||
}, '*');
|
||||
},1);
|
||||
pinEntryIframe.contentWindow.addEventListener('message',function(e) {
|
||||
var msg = e.data;
|
||||
switch(msg.type) {
|
||||
case 'submit_pin':
|
||||
if (backgroundPage.validatePIN(msg.pin)) {
|
||||
$('#logins').show();
|
||||
$('#pin-entry-frame').hide();
|
||||
// The user has successfully authenticatd with their PIN,
|
||||
// so fill in the forms on the current page.
|
||||
backgroundPage.formFillCurrentTab();
|
||||
}
|
||||
else {
|
||||
pinEntryIframe.contentWindow.postMessage({
|
||||
'type': 'set_prompt',
|
||||
'prompt': "Sorry, that was incorrect. Please try again."
|
||||
}, '*');
|
||||
pinEntryIframe.contentWindow.postMessage({
|
||||
'type': 'reset_entry'
|
||||
}, '*');
|
||||
}
|
||||
break;
|
||||
}
|
||||
var pinEntryWidget = $('[name="pin"]').get()[0];
|
||||
// Focus on first PIN digit
|
||||
$('x-pin input:first').focus();
|
||||
pinEntryWidget.addEventListener('changed', function(e) {
|
||||
// Ensure the user has finished entering their PIN.
|
||||
if (pinEntryWidget.value.length == 4) {
|
||||
if (backgroundPage.validatePIN(pinEntryWidget.value)) {
|
||||
$('#logins').show();
|
||||
$('#pin-prompt').hide();
|
||||
$('x-pin').hide();
|
||||
// The user has successfully authenticatd with their PIN,
|
||||
// so fill in the forms on the current page.
|
||||
backgroundPage.formFillCurrentTab();
|
||||
}
|
||||
else {
|
||||
$('#pin-prompt').html('Sorry, that was incorrect. Please try again.');
|
||||
$('x-pin input').val('');
|
||||
$('x-pin input:visible:first').focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
$('.copy-button').click(function() {
|
||||
|
|
|
|||
|
|
@ -9,12 +9,27 @@
|
|||
elem.setAttribute('size', '1');
|
||||
elem.setAttribute('maxlength', '1');
|
||||
elem.setAttribute('data-index', i);
|
||||
function updateValue() {
|
||||
var val = [].splice.call(pin.value, 0);
|
||||
val[this.dataset.index] = this.value;
|
||||
pin.xtag.input.value = val.join('');
|
||||
}
|
||||
elem.onchange = function (e){
|
||||
var val = [].splice.call(pin.value, 0);
|
||||
val[this.dataset.index] = this.value;
|
||||
pin.xtag.input.value = val.join('');
|
||||
updateValue.call(this);
|
||||
};
|
||||
elem.onkeypress = function (e){
|
||||
// Only allow the user to type digits
|
||||
if (e.charCode < '0'.charCodeAt(0) || e.charCode > '9'.charCodeAt(0)) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
var inputEl = this;
|
||||
setTimeout(function() {
|
||||
xtag.fireEvent(pin, 'changed', { pin: inputEl.value });
|
||||
},1);
|
||||
};
|
||||
elem.oninput = function (e){
|
||||
updateValue.call(this);
|
||||
var fields = pin.xtag.fields.childNodes;
|
||||
var i = parseInt(this.dataset.index, 10) + 1;
|
||||
if (this.value.length && i < pin.size) {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче