misc/passmate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch from contentEditable to input + styling

Browse Source 
Fixes #8
This commit is contained in:
Ian Gulliver
2018-12-02 05:41:27 +00:00
parent ff62cfbe52
commit 2fd04e2618
2 changed files with 27 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
passmate.css
View File

@@ -80,38 +80,36 @@ overview,product {
color: black; color: black;
} }
owner { input {
display: block; display: block;
width: 11em;
border: 0;
border-bottom: black 1px dotted; border-bottom: black 1px dotted;
font-family: 'proxima-nova';
font-weight: 600;
font-size: 1.5em;
text-align: left;
align-self: center;
margin-top: 0; margin-top: 0;
margin-bottom: 1em; margin-bottom: 1em;
} }
recovery { input:focus {
display: block; outline: none;
width: 17em; }
border-bottom: black 1px dotted; input.owner {
width: 11em;
font-family: 'proxima-nova';
font-weight: 600;
font-size: 1.5em;
}
input.recovery {
width: 17em;
font-family: 'inconsolata'; font-family: 'inconsolata';
font-weight: 700; font-weight: 700;
font-size: 1.2em; font-size: 1.2em;
text-align: center; text-align: center;
align-self: center;
margin-top: 0;
margin-bottom: 1em;
} }
ol { ol {

31
passmate.js
View File

@@ -25,7 +25,7 @@ class PassMate {
this.addProduct(container); this.addProduct(container);
this.recoveryIn.innerText = this.SAFE_ALPHANUM.charAt(this.VERSION) + this.generateMasterPassword().join(''); this.recoveryIn.value = this.SAFE_ALPHANUM.charAt(this.VERSION) + this.generateMasterPassword().join('');
this.derivePasswords(); this.derivePasswords();
} }
@@ -43,15 +43,11 @@ class PassMate {
let ownerStep = this.addElement('li', instr); let ownerStep = this.addElement('li', instr);
this.addElement('blurb', ownerStep, 'Who will this book belong to?'); this.addElement('blurb', ownerStep, 'Who will this book belong to?');
this.ownerIn = this.addElement('owner', ownerStep); this.ownerIn = this.addElement('input', ownerStep);
this.ownerIn.contentEditable = true; this.ownerIn.type = 'text';
this.ownerIn.addEventListener('input', () => { this.ownerIn.classList.add('owner');
if (this.ownerIn.childNodes.length > 1 || this.ownerIn.addEventListener('change', () => {
(this.ownerIn.childNodes.length == 1 && this.ownerOut.innerText = this.ownerIn.value;
this.ownerIn.firstChild.nodeType != Node.TEXT_NODE)) {
this.ownerIn.innerText = this.ownerIn.innerText;
}
this.ownerOut.innerText = this.ownerIn.innerText;
}); });
let formatStep = this.addElement('li', instr, 'Choose your preferred password format (both provide approximately the same security):'); let formatStep = this.addElement('li', instr, 'Choose your preferred password format (both provide approximately the same security):');
@@ -84,15 +80,12 @@ class PassMate {
this.addElement('h2', overview, 'Reprinting Your Book'); this.addElement('h2', overview, 'Reprinting Your Book');
this.addElement('blurb', overview, 'A unique code has been generated for you below. It changes every time you refresh this website. If you\'d like to reprint an existing book, change the code below to the one printed on page 3 of your old book. The new book will contain all the same passwords as the old book. This is all done without the code or passwords ever leaving your computer.'); this.addElement('blurb', overview, 'A unique code has been generated for you below. It changes every time you refresh this website. If you\'d like to reprint an existing book, change the code below to the one printed on page 3 of your old book. The new book will contain all the same passwords as the old book. This is all done without the code or passwords ever leaving your computer.');
this.recoveryIn = this.addElement('recovery', overview);
this.recoveryIn.contentEditable = true; this.recoveryIn = this.addElement('input', overview);
this.recoveryIn.type = 'text';
this.recoveryIn.classList.add('recovery');
this.recoveryIn.spellcheck = false; this.recoveryIn.spellcheck = false;
this.recoveryIn.addEventListener('input', () => { this.recoveryIn.addEventListener('input', () => {
if (this.recoveryIn.childNodes.length > 1 ||
(this.recoveryIn.childNodes.length == 1 &&
this.recoveryIn.firstChild.nodeType != Node.TEXT_NODE)) {
this.recoveryIn.innerText = this.recoveryIn.innerText;
}
this.derivePasswords(); this.derivePasswords();
}); });
@@ -222,7 +215,7 @@ class PassMate {
generatePassword(choices, oversample) { generatePassword(choices, oversample) {
oversample = oversample || 4; oversample = oversample || 4;
if (this.recoveryIn.innerText != '') { if (this.recoveryIn.value != '') {
return; return;
} }
let rand = Array.from(crypto.getRandomValues(new Uint8Array(choices.length * oversample))); let rand = Array.from(crypto.getRandomValues(new Uint8Array(choices.length * oversample)));
@@ -245,7 +238,7 @@ class PassMate {
} }
derivePasswords() { derivePasswords() {
let recovery = this.recoveryIn.innerText; let recovery = this.recoveryIn.value;
if (recovery.charAt(0) == 'A') { if (recovery.charAt(0) == 'A') {
this.recoveryOut.innerText = recovery; this.recoveryOut.innerText = recovery;
this.importKey(recovery.slice(1)) this.importKey(recovery.slice(1))