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

Generate both password types up front, then use CSS to swap.

Browse Source
This commit is contained in:
Ian Gulliver
2018-12-04 08:01:22 +00:00
parent b9ed3c9093
commit 1d7becc1da
2 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
passmate.css
View File

@@ -323,6 +323,18 @@ overview,product {
font-size: 1.1em; font-size: 1.1em;
} }
passwordAlphaNum,passwordWords {
display: none;
}
product.passwords-short passwordAlphaNum {
display: inline;
}
product.passwords-readable passwordWords {
display: inline;
}
passwordSymbols { passwordSymbols {
color: darkgrey; color: darkgrey;
border: 1px darkgrey dotted; border: 1px darkgrey dotted;

51
passmate.js
View File

@@ -19,12 +19,13 @@ class PassMate {
this.VERSION = 0; this.VERSION = 0;
this.pages = []; this.pages = [];
this.passwords = new Map(); this.shortPasswords = new Map();
this.readablePasswords = new Map();
this.addOverview(container);
this.addProduct(container); this.addProduct(container);
this.addOverview(container);
this.recoveryIn.value = 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();
} }
@@ -52,15 +53,17 @@ class PassMate {
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):');
let formats = this.addElement('ul', formatStep); let formats = this.addElement('ul', formatStep);
this.format = new Select(() => { let format = new Select((key) => {
this.derivePasswords(); this.product.classList.remove('passwords-short');
this.product.classList.remove('passwords-readable');
this.product.classList.add('passwords-' + key);
}); });
let shortItem = this.addElement('li', formats); let shortItem = this.addElement('li', formats);
this.format.add('short', this.addElement('button', shortItem, 'Short: 5EQaDfNS')); format.add('short', this.addElement('button', shortItem, 'Short: 5EQaDfNS'));
let readableItem = this.addElement('li', formats); let readableItem = this.addElement('li', formats);
this.format.add('readable', this.addElement('button', readableItem, 'Readable: LeasedBarneyPlays565')); format.add('readable', this.addElement('button', readableItem, 'Readable: LeasedBarneyPlays565'));
let printReqStep = this.addElement('li', instr, 'Check that your printer supports two-sided printing. You\'ll need to print with the following settings:'); let printReqStep = this.addElement('li', instr, 'Check that your printer supports two-sided printing. You\'ll need to print with the following settings:');
let printreqs = this.addElement('ul', printReqStep); let printreqs = this.addElement('ul', printReqStep);
@@ -103,8 +106,8 @@ class PassMate {
} }
addProduct(container) { addProduct(container) {
let product = this.addElement('product', container); this.product = this.addElement('product', container);
this.addPages(product, 26 * 2 + 4); this.addPages(this.product, 26 * 2 + 4);
this.addFrontPage(this.pages[1]); this.addFrontPage(this.pages[1]);
this.addInstructions1(this.pages[2]); this.addInstructions1(this.pages[2]);
this.addInstructions2(this.pages[3]); this.addInstructions2(this.pages[3]);
@@ -174,9 +177,12 @@ class PassMate {
let password = this.addElement('password', pwblock); let password = this.addElement('password', pwblock);
password.style.gridArea = 'password'; password.style.gridArea = 'password';
this.passwords.set( this.shortPasswords.set(
letter + '-' + (i % pagesPerLetter).toString() + '-' + j.toString(), letter + '-' + (i % pagesPerLetter).toString() + '-' + j.toString(),
this.addElement('passwordAlphaNum', password)); this.addElement('passwordAlphaNum', password));
this.readablePasswords.set(
letter + '-' + (i % pagesPerLetter).toString() + '-' + j.toString(),
this.addElement('passwordWords', password));
this.addElement('passwordSymbols', password, this.SAFE_SYMBOL); this.addElement('passwordSymbols', password, this.SAFE_SYMBOL);
this.addElement('websiteLabel', pwblock, 'Website:').style.gridArea = 'websiteLabel'; this.addElement('websiteLabel', pwblock, 'Website:').style.gridArea = 'websiteLabel';
@@ -246,16 +252,19 @@ class PassMate {
} }
addDerivedPasswords(key) { addDerivedPasswords(key) {
for (let [info, container] of this.passwords) { for (let [info, container] of this.shortPasswords) {
let choices; let choices = new Array(8);
if (this.format.selected == 'short') {
choices = new Array(8);
choices.fill(this.SAFE_ALPHANUM); choices.fill(this.SAFE_ALPHANUM);
} else if (this.format.selected == 'readable') { this.deriveValidArray(key, info, choices, this.validatePassword.bind(this))
choices = new Array(6); .then((arr) => {
container.innerText = arr.join('');
});
}
for (let [info, container] of this.readablePasswords) {
let choices = new Array(6);
choices.fill(this.WORDS, 0, 3); choices.fill(this.WORDS, 0, 3);
choices.fill(this.SAFE_NUM, 3, 6); choices.fill(this.SAFE_NUM, 3, 6);
}
this.deriveValidArray(key, info, choices, this.validatePassword.bind(this)) this.deriveValidArray(key, info, choices, this.validatePassword.bind(this))
.then((arr) => { .then((arr) => {
container.innerText = arr.join(''); container.innerText = arr.join('');
@@ -389,7 +398,6 @@ class PassMate {
class Select { class Select {
constructor(changeCallback) { constructor(changeCallback) {
this.options = []; this.options = [];
this.selected = null;
this.changeCallback = changeCallback; this.changeCallback = changeCallback;
} }
@@ -403,15 +411,12 @@ class Select {
option.classList.remove('selected'); option.classList.remove('selected');
} }
elem.classList.add('selected'); elem.classList.add('selected');
this.selected = key; this.changeCallback(key);
if (this.changeCallback) {
this.changeCallback();
}
}); });
if (this.options.length == 1) { if (this.options.length == 1) {
elem.classList.add('selected'); elem.classList.add('selected');
this.selected = key; this.changeCallback(key);
} }
} }
} }