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

Keyboard navigation for password format. Minor focus outline crispiness.

Browse Source 
Issue #10
This commit is contained in:
Ian Gulliver
2018-12-02 06:48:18 +00:00
parent 3a17bb8338
commit 1042f54443
2 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
passmate.css
View File

@@ -78,7 +78,7 @@ overview,product {
a { a {
margin-bottom: 1em; margin-bottom: 1em;
padding: 0.2em; padding: 0.1em;
max-width: 40em; max-width: 40em;
text-decoration: none; text-decoration: none;
color: black; color: black;
@@ -93,7 +93,7 @@ overview,product {
margin-top: 0.2em; margin-top: 0.2em;
margin-bottom: 0.2em; margin-bottom: 0.2em;
padding: 0.2em; padding: 0.1em;
} }
input:focus { input:focus {
@@ -118,11 +118,15 @@ overview,product {
text-align: center; text-align: center;
} }
label.recovery {
text-align: center;
}
button { button {
/* ugly hack to give the focus box breathing room without moving the text */ /* ugly hack to give the focus box breathing room without moving the text */
position: relative; position: relative;
left: -0.2em; left: -0.1em;
padding: 0.2em; padding: 0.1em;
border: none; border: none;
background: none; background: none;
@@ -132,6 +136,14 @@ overview,product {
font-weight: bold; font-weight: bold;
} }
button.selectable {
font-weight: normal;
}
button.selected {
font-weight: bold;
}
ol { ol {
box-sizing: border-box; box-sizing: border-box;
max-width: 40em; max-width: 40em;

18
passmate.js
View File

@@ -52,13 +52,16 @@ 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(); this.format = new Select(() => {
this.format.add('short', this.addElement('li', formats, 'Short: 5EQaDfNS'));
this.format.add('readable', this.addElement('li', formats, 'Readable: LeasedBarneyPlays565'));
formats.addEventListener('click', () => {
this.derivePasswords(); this.derivePasswords();
}); });
let shortItem = this.addElement('li', formats);
this.format.add('short', this.addElement('button', shortItem, 'Short: 5EQaDfNS'));
let readableItem = this.addElement('li', formats);
this.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);
this.addElement('li', printreqs, 'Paper size: Letter'); this.addElement('li', printreqs, 'Paper size: Letter');
@@ -81,6 +84,7 @@ class PassMate {
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.');
let recoveryLabel = this.addElement('label', overview, 'Recovery Code'); let recoveryLabel = this.addElement('label', overview, 'Recovery Code');
recoveryLabel.classList.add('recovery');
this.recoveryIn = this.addElement('input', recoveryLabel); this.recoveryIn = this.addElement('input', recoveryLabel);
this.recoveryIn.type = 'text'; this.recoveryIn.type = 'text';
this.recoveryIn.classList.add('recovery'); this.recoveryIn.classList.add('recovery');
@@ -390,9 +394,10 @@ class PassMate {
} }
class Select { class Select {
constructor() { constructor(changeCallback) {
this.options = []; this.options = [];
this.selected = null; this.selected = null;
this.changeCallback = changeCallback;
} }
add(key, elem) { add(key, elem) {
@@ -406,6 +411,9 @@ class Select {
} }
elem.classList.add('selected'); elem.classList.add('selected');
this.selected = key; this.selected = key;
if (this.changeCallback) {
this.changeCallback();
}
}); });
if (this.options.length == 1) { if (this.options.length == 1) {