Enable login for TREZOR with passphrase (#2052)

* Replicate PIN functionality for Passphrase

* Typo...

* Lol, really?

* Removed _ from passphrase event callback

* Change passphrase input to password

* Test for daniel

* Small fixes

* Change passphrase on input, not on blur

* Be obvious about focused buttons
This commit is contained in:
Connor Bryan 2018-07-11 18:22:02 -05:00 committed by Daniel Ternyak
parent 3f57520bca
commit 6fc6d9e074
6 changed files with 441 additions and 233 deletions

View File

@ -0,0 +1,154 @@
<html>
<head>
<title>TREZOR - Enter Passphrase </title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-$scriptNonce'; style-src 'unsafe-inline'">
</head>
<body>
<!-- TEMPLATE -->
<h1>Enter your passphrase</h1>
<div class="passphrase-controls">
<input type="password" class="passphrase-input">
<button class="passphrase-unlock">
Unlock
</button>
</div>
<button class="close">
<svg viewPort="0 0 12 12" width="12" height="12" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="11" x2="11" y2="1" stroke="white" stroke-width="2" />
<line x1="1" y1="1" x2="11" y2="11" stroke="white" stroke-width="2" />
</svg>
</button>
<!-- SCRIPT -->
<script nonce="$scriptNonce">
var ipcRenderer = require('electron').ipcRenderer;
var remote = require('electron').remote;
var body = document.querySelector('body');
var input = document.querySelector('.passphrase-input');
var unlock = document.querySelector('.passphrase-unlock');
var close = document.querySelector('.close');
var passphrase = "";
function unlockWithPassphrase() {
if (!passphrase.length) return;
ipcRenderer.send('$EVENT', passphrase);
}
body.addEventListener('keydown', function (e) {
// On enter press,
if (e.keyCode === 13) {
unlockWithPassphrase();
}
});
input.addEventListener('input', function (e) {
passphrase = e.target.value
});
unlock.addEventListener('click', unlockWithPassphrase);
close.addEventListener('click', function () {
var window = remote.getCurrentWindow();
window.close();
});
</script>
<!-- STYLES -->
<style>
body {
color: #FFF;
padding: 20px;
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
body * {
box-sizing: inherit;
}
h1,
h2 {
text-align: center;
}
h1 {
font-size: 28px;
font-weight: 100;
margin-bottom: 3px;
letter-spacing: 1.2px;
}
.passphrase-controls {
position: relative;
width: 220px;
margin: 0 auto;
}
.passphrase-input {
width: 100%;
background: none;
border: none;
border-bottom: 1px solid #FFF;
opacity: 0.7;
font-size: 16px;
padding: 4px;
margin-bottom: 10px;
letter-spacing: 1px;
color: #FFF;
margin-top: 5rem;
}
.passphrase-unlock {
width: 100%;
padding: 6px;
opacity: 0.6;
text-align: center;
font-size: 10px;
border: 1px solid #FFF;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 1.2px;
}
.passphrase-unlock:hover {
opacity: 0.8;
}
.passphrase-unlock:active {
opacity: 1;
}
.close {
position: absolute;
top: 10px;
right: 10px;
width: 14px;
height: 14px;
opacity: 0.3;
overflow: hidden;
}
.close:hover,
.close:focus {
opacity: 1;
}
button {
display: block;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #FFF;
outline: none;
}
</style>
</body>
</html>

View File

@ -0,0 +1,8 @@
import showPrompt from './showPrompt';
import template from './passphrase.html';
const EVENT = 'enclave:passphrase';
export function showPassphrasePrompt(): Promise<string> {
return showPrompt(template, EVENT);
}

View File

@ -1,226 +1,248 @@
<html>
<head>
<title>TREZOR - Enter PIN</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-$scriptNonce'; style-src 'unsafe-inline'">
</head>
<body>
<h1>Enter your PIN</h1>
<h2>Look at your device for the number positions</h2>
<div class="pin-buttons">
<button class="pin-button" data-number="7"></button>
<button class="pin-button" data-number="8"></button>
<button class="pin-button" data-number="9"></button>
<head>
<title>TREZOR - Enter PIN</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-$scriptNonce'; style-src 'unsafe-inline'">
</head>
<button class="pin-button" data-number="4"></button>
<button class="pin-button" data-number="5"></button>
<button class="pin-button" data-number="6"></button>
<body>
<h1>Enter your PIN</h1>
<h2>Look at your device for the number positions</h2>
<button class="pin-button" data-number="1"></button>
<button class="pin-button" data-number="2"></button>
<button class="pin-button" data-number="3"></button>
</div>
<div class="pin-buttons">
<button class="pin-button" data-number="7"></button>
<button class="pin-button" data-number="8"></button>
<button class="pin-button" data-number="9"></button>
<div class="pin-controls">
<input class="pin-input" type="password" readonly/>
<button class="pin-clear">
<svg viewPort="0 0 8 8" width="8" height="8" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="7" x2="7" y2="1" stroke="white" stroke-width="2"/>
<line x1="1" y1="1" x2="7" y2="7" stroke="white" stroke-width="2"/>
</svg>
</button>
<button class="pin-button" data-number="4"></button>
<button class="pin-button" data-number="5"></button>
<button class="pin-button" data-number="6"></button>
<button class="pin-unlock">
Unlock
</button>
</div>
<button class="pin-button" data-number="1"></button>
<button class="pin-button" data-number="2"></button>
<button class="pin-button" data-number="3"></button>
</div>
<button class="close">
<svg viewPort="0 0 12 12" width="12" height="12" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="11" x2="11" y2="1" stroke="white" stroke-width="2"/>
<line x1="1" y1="1" x2="11" y2="11" stroke="white" stroke-width="2"/>
<div class="pin-controls">
<input class="pin-input" type="password" readonly/>
<button class="pin-clear">
<svg viewPort="0 0 8 8" width="8" height="8" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="7" x2="7" y2="1" stroke="white" stroke-width="2" />
<line x1="1" y1="1" x2="7" y2="7" stroke="white" stroke-width="2" />
</svg>
</button>
<button class="pin-unlock">
Unlock
</button>
</div>
<button class="close">
<svg viewPort="0 0 12 12" width="12" height="12" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="11" x2="11" y2="1" stroke="white" stroke-width="2" />
<line x1="1" y1="1" x2="11" y2="11" stroke="white" stroke-width="2" />
</svg>
</button>
<!-- SCRIPT -->
<script nonce="$scriptNonce">
var ipcRenderer = require('electron').ipcRenderer;
var remote = require('electron').remote;
var pin = [];
var pinButtons = document.querySelectorAll('.pin-button');
var input = document.querySelector('.pin-input');
var unlock = document.querySelector('.pin-unlock');
var clear = document.querySelector('.pin-clear');
var close = document.querySelector('.close');
<!-- SCRIPT -->
pinButtons.forEach(function(el) {
el.addEventListener('click', function(ev) {
pin.push(ev.currentTarget.getAttribute('data-number'));
input.value = pin.join('');
});
<script nonce="$scriptNonce">
var ipcRenderer = require('electron').ipcRenderer;
var remote = require('electron').remote;
var pin = [];
var pinButtons = document.querySelectorAll('.pin-button');
var input = document.querySelector('.pin-input');
var unlock = document.querySelector('.pin-unlock');
var clear = document.querySelector('.pin-clear');
var close = document.querySelector('.close');
pinButtons.forEach(function (el) {
el.addEventListener('click', function (ev) {
pin.push(ev.currentTarget.getAttribute('data-number'));
input.value = pin.join('');
});
});
clear.addEventListener('click', function() {
pin = [];
input.value = '';
});
clear.addEventListener('click', function () {
pin = [];
input.value = '';
});
unlock.addEventListener('click', function() {
if (!pin.length) return;
ipcRenderer.send('$EVENT', pin.join(''));
});
unlock.addEventListener('click', function () {
if (!pin.length) return;
ipcRenderer.send('$EVENT', pin.join(''));
});
close.addEventListener('click', function() {
var window = remote.getCurrentWindow();
window.close();
});
</script>
close.addEventListener('click', function () {
var window = remote.getCurrentWindow();
window.close();
});
</script>
<!-- STYLES -->
<!-- STYLES -->
<style>
body {
color: #FFF;
padding: 20px;
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
body * {
box-sizing: inherit;
}
<style>
body {
color: #FFF;
padding: 20px;
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
h1,
h2 {
text-align: center;
}
h1 {
font-size: 28px;
font-weight: 100;
margin-bottom: 3px;
letter-spacing: 1.2px;
}
h2 {
opacity: 0.5;
font-size: 13px;
font-weight: 400;
}
body * {
box-sizing: inherit;
}
.pin-buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 auto;
width: 180px;
height: 180px;
}
.pin-button {
position: relative;
width: 54px;
height: 54px;
border-radius: 4px;
border: 1px solid #FFF;
background: rgba(255, 255, 255, 0.1);
transition: all 120ms ease;
opacity: 0.4;
}
.pin-button:hover {
opacity: 0.8;
}
.pin-button:active {
opacity: 1;
}
.pin-button:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
background: #FFF;
}
h1,
h2 {
text-align: center;
}
.pin-controls {
position: relative;
width: 180px;
margin: 0 auto;
}
.pin-input {
width: 100%;
background: none;
border: none;
border-bottom: 1px solid #FFF;
opacity: 0.7;
font-size: 32px;
padding: 0 4px;
margin-bottom: 10px;
letter-spacing: 3px;
color: #FFF;
}
.pin-clear {
position: absolute;
right: 0;
top: 11px;
padding: 4px;
border-radius: 100%;
border: 2px solid;
opacity: 0.6;
}
.pin-clear:hover {
opacity: 0.8;
}
.pin-clear:active {
opacity: 1;
}
.pin-unlock {
width: 100%;
padding: 6px;
opacity: 0.6;
text-align: center;
font-size: 10px;
border: 1px solid #FFF;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 1.2px;
}
.pin-unlock:hover {
opacity: 0.8;
}
.pin-unlock:active {
opacity: 1;
}
h1 {
font-size: 28px;
font-weight: 100;
margin-bottom: 3px;
letter-spacing: 1.2px;
}
.close {
position: absolute;
top: 10px;
right: 10px;
width: 14px;
height: 14px;
opacity: 0.3;
overflow: hidden;
}
.close:hover,
.close:focus {
opacity: 1;
}
h2 {
opacity: 0.5;
font-size: 13px;
font-weight: 400;
}
button {
display: block;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #FFF;
outline: none;
}
</style>
</body>
</html>
.pin-buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 auto;
width: 180px;
height: 180px;
}
.pin-button {
position: relative;
width: 54px;
height: 54px;
border-radius: 4px;
border: 1px solid #FFF;
background: rgba(255, 255, 255, 0.1);
transition: all 120ms ease;
opacity: 0.4;
}
.pin-button:hover {
opacity: 0.8;
}
.pin-button:active {
opacity: 1;
}
.pin-button:focus {
opacity: 1;
}
.pin-button:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
background: #FFF;
}
.pin-controls {
position: relative;
width: 180px;
margin: 0 auto;
}
.pin-input {
width: 100%;
background: none;
border: none;
border-bottom: 1px solid #FFF;
opacity: 0.7;
font-size: 32px;
padding: 0 4px;
margin-bottom: 10px;
letter-spacing: 3px;
color: #FFF;
}
.pin-clear {
position: absolute;
right: 0;
top: 11px;
padding: 4px;
border-radius: 100%;
border: 2px solid;
opacity: 0.6;
}
.pin-clear:hover {
opacity: 0.8;
}
.pin-clear:active {
opacity: 1;
}
.pin-unlock {
width: 100%;
padding: 6px;
opacity: 0.6;
text-align: center;
font-size: 10px;
border: 1px solid #FFF;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 1.2px;
}
.pin-unlock:hover {
opacity: 0.8;
}
.pin-unlock:active {
opacity: 1;
}
.close {
position: absolute;
top: 10px;
right: 10px;
width: 14px;
height: 14px;
opacity: 0.3;
overflow: hidden;
}
.close:hover,
.close:focus {
opacity: 1;
}
button {
display: block;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #FFF;
outline: none;
}
</style>
</body>
</html>

View File

@ -1,40 +1,8 @@
import { BrowserWindow, ipcMain, IpcMessageEvent } from 'electron';
import showPrompt from './showPrompt';
import template from './pin.html';
const EVENT = 'enclave:pin';
export function showPinPrompt(): Promise<string> {
return new Promise((resolve, reject) => {
const scriptNonce = Math.floor(Math.random() * 1000000000000);
const html = template
.replace(/\$scriptNonce/g, scriptNonce.toString())
.replace(/\$EVENT/g, EVENT);
let hasResolved = false;
const window = new BrowserWindow({
width: 320,
height: 380,
frame: false,
backgroundColor: '#21252B',
darkTheme: true
});
window.on('closed', () => {
if (hasResolved) {
return;
}
reject(new Error('ENCLAVE_TREZOR_CANCELED'));
});
ipcMain.once(EVENT, (_: IpcMessageEvent, pin: string) => {
resolve(pin);
hasResolved = true;
window.close();
});
window.loadURL(`data:text/html;charset=UTF-8,${encodeURIComponent(html)}`);
window.show();
window.focus();
});
return showPrompt(template, EVENT);
}

View File

@ -0,0 +1,45 @@
import { BrowserWindow, ipcMain, IpcMessageEvent } from 'electron';
export default function showPrompt(template: string, event: string): Promise<string> {
return new Promise((resolve, reject) => {
const scriptNonce = Math.floor(Math.random() * 1000000000000);
const html = template
.replace(/\$scriptNonce/g, scriptNonce.toString())
.replace(/\$EVENT/g, event);
let hasResolved = false;
const window = new BrowserWindow({
width: 320,
height: 380,
frame: false,
backgroundColor: '#21252B',
darkTheme: true
});
window.on('closed', () => {
if (hasResolved) {
return;
}
reject(new Error('ENCLAVE_TREZOR_CANCELED'));
});
ipcMain.once(event, (_: IpcMessageEvent, value: string) => {
try {
resolve(value);
hasResolved = true;
window.close();
} catch (e) {
/**
* @desc The window.close call sometimes fails
* if the window has already been destroyed.
*/
console.error(e);
}
});
window.loadURL(`data:text/html;charset=UTF-8,${encodeURIComponent(html)}`);
window.show();
window.focus();
});
}

View File

@ -7,6 +7,7 @@ import { WalletLib } from 'shared/enclave/types';
import { padLeftEven } from 'libs/values';
import { stripHexPrefixAndLower } from 'libs/formatters';
import { showPinPrompt } from '../views/pin';
import { showPassphrasePrompt } from '../views/passphrase';
const deviceList = new DeviceList({ debug: false });
@ -35,6 +36,16 @@ async function getSession() {
cb(err);
});
});
device.on('passphrase', (cb: (err?: Error, passphrase?: string) => void) => {
showPassphrasePrompt()
.then(passphrase => {
cb(undefined, passphrase);
})
.catch(err => {
console.error('Passphrase entry failed', err);
cb(err);
});
});
currentSession = session;
return currentSession;