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

Support one-sided printing option that makes a loose-leaf result.

Browse Source 
Fixes #1
This commit is contained in:
Ian Gulliver
2018-12-05 06:23:53 +00:00
parent 46a9d9a0fe
commit 4fc89600d5
2 changed files with 96 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
passmate.css
View File

@@ -76,6 +76,18 @@ overview,product {
max-width: 40em;
}
blurb.side-one,blurb.side-two {
display: none;
}
overview.side-one blurb.side-one {
display: block;
}
overview.side-two blurb.side-two {
display: block;
}
a {
margin-bottom: 1em;
padding: 0.1em;
@@ -156,6 +168,18 @@ overview,product {
padding: 0.1em;
}
li.side-one,li.side-two {
display: none;
}
overview.side-one li.side-one {
display: list-item;
}
overview.side-two li.side-two {
display: list-item;
}
.selected {
font-weight: 600;
}
@@ -171,6 +195,9 @@ overview,product {
display: grid;
width: 100%;
height: 100%;
}
product.side-two {
grid-template:
[side1-start] "page56 page1" 100% [side1-end]
[side2-start] "page55 page2" 100% [side2-end]
@@ -203,6 +230,39 @@ overview,product {
/ 50% 50%;
}
product.side-one {
grid-template:
[side1-start] "page1 page1" 100% [side1-end]
[side2-start] "page2 page3" 100% [side2-end]
[side3-start] "page4 page5" 100% [side3-end]
[side4-start] "page6 page7" 100% [side4-end]
[side5-start] "page8 page9" 100% [side5-end]
[side6-start] "page10 page11" 100% [side6-end]
[side7-start] "page12 page13" 100% [side7-end]
[side8-start] "page14 page15" 100% [side8-end]
[side9-start] "page16 page17" 100% [side9-end]
[side10-start] "page18 page19" 100% [side10-end]
[side11-start] "page20 page21" 100% [side11-end]
[side12-start] "page22 page23" 100% [side12-end]
[side13-start] "page24 page25" 100% [side13-end]
[side14-start] "page26 page27" 100% [side14-end]
[side15-start] "page28 page29" 100% [side15-end]
[side16-start] "page30 page31" 100% [side16-end]
[side17-start] "page32 page33" 100% [side17-end]
[side18-start] "page34 page35" 100% [side18-end]
[side19-start] "page36 page37" 100% [side19-end]
[side20-start] "page38 page39" 100% [side20-end]
[side21-start] "page40 page41" 100% [side21-end]
[side22-start] "page42 page43" 100% [side22-end]
[side23-start] "page44 page45" 100% [side23-end]
[side24-start] "page46 page47" 100% [side24-end]
[side25-start] "page48 page49" 100% [side25-end]
[side26-start] "page50 page51" 100% [side26-end]
[side27-start] "page52 page53" 100% [side27-end]
[side28-start] "page54 page55" 100% [side28-end]
/ 50% 50%;
}
h1 {
font-family: 'copernicus';
font-weight: 600;
@@ -225,11 +285,11 @@ overview,product {
flex-direction: column;
}
page[data-half="first"]:nth-of-type(2n) {
product.side-two page[data-half="first"]:nth-of-type(2n) {
transform: rotateZ(180deg);
}
page[data-half="second"]:nth-of-type(2n+1) {
product.side-two page[data-half="second"]:nth-of-type(2n+1) {
transform: rotateZ(180deg);
}

51
passmate.js
View File

@@ -31,16 +31,16 @@ class PassMate {
}
addOverview(container) {
let overview = this.addElement('overview', container);
this.overview = this.addElement('overview', container);
this.addElement('h1', overview, 'PassMate');
this.addElement('h2', overview, 'Your Personal Password Book');
this.addElement('blurb', overview, 'This website generates unique, secure, random passwords locally on your computer every time you load it. It organizes those passwords into book form, printable at home, with space for a website address and username with each password. When asked to choose a password for a new account, the book\'s owner uses a fresh one from the book, reducing password reuse and thwarting credential stuffing attacks.');
this.addElement('blurb', overview, 'Technologically savvy, security conscious people frequently make use of password managers to generate and store passwords. Unfortunately, password managers (especially password generators) are still somewhat complex to use, which creates friction and drives many people away. You probably have friends or family who use one or a few simple passwords across all sites. PassMate isn\'t perfect security, but it can help them significantly increase their account security.');
this.addElement('h1', this.overview, 'PassMate');
this.addElement('h2', this.overview, 'Your Personal Password Book');
this.addElement('blurb', this.overview, 'This website generates unique, secure, random passwords locally on your computer every time you load it. It organizes those passwords into book form, printable at home, with space for a website address and username with each password. When asked to choose a password for a new account, the book\'s owner uses a fresh one from the book, reducing password reuse and thwarting credential stuffing attacks.');
this.addElement('blurb', this.overview, 'Technologically savvy, security conscious people frequently make use of password managers to generate and store passwords. Unfortunately, password managers (especially password generators) are still somewhat complex to use, which creates friction and drives many people away. You probably have friends or family who use one or a few simple passwords across all sites. PassMate isn\'t perfect security, but it can help them significantly increase their account security.');
this.addElement('h2', overview, 'Creating Your Own Book');
this.addElement('h2', this.overview, 'Creating Your Own Book');
let instr = this.addElement('ol', overview);
let instr = this.addElement('ol', this.overview);
let ownerStep = this.addElement('li', instr);
let ownerLabel = this.addElement('label', ownerStep, 'Who will this book belong to?');
@@ -75,11 +75,28 @@ class PassMate {
let indexNoneItem = this.addElement('li', indexes);
index.add('none', this.addElement('button', indexNoneItem, 'None: Use passwords from the beginning'));
let printReqStep = this.addElement('li', instr, 'Check that your printer supports two-sided printing. You\'ll need to print with the following settings:');
let sidedStep = this.addElement('li', instr, 'Choose your preferred printing format:');
let sides = this.addElement('ul', sidedStep);
let side = new Select((key) => {
this.overview.classList.remove('side-one');
this.overview.classList.remove('side-two');
this.overview.classList.add('side-' + key);
this.product.classList.remove('side-one');
this.product.classList.remove('side-two');
this.product.classList.add('side-' + key);
});
let sideTwoItem = this.addElement('li', sides);
side.add('two', this.addElement('button', sideTwoItem, 'Two-sided: Foldable book (requires printer support)'));
let sideOneItem = this.addElement('li', sides);
side.add('one', this.addElement('button', sideOneItem, 'One-sided: Loose leaf'));
let twoSideStep = this.addElement('li', instr, 'Check that your printer supports two-sided printing.', ['side-two']);
let printReqStep = this.addElement('li', instr, 'You\'ll need to print with the following settings:');
let printreqs = this.addElement('ul', printReqStep);
this.addElement('li', printreqs, 'Paper size: Letter');
this.addElement('li', printreqs, 'Layout/Orientation: Landscape');
this.addElement('li', printreqs, 'Two-sided: Long edge (or just enabled)');
this.addElement('li', printreqs, 'Two-sided: Long edge (or just enabled)', ['side-two']);
let printStep = this.addElement('li', instr);
let print = this.addElement('button', printStep, 'Click here to print the book!');
@@ -88,16 +105,16 @@ class PassMate {
window.print();
});
this.addElement('li', instr, 'Fold the book in half along the line in the center, with the "PassMate: Personal Password Book" title page facing out.');
this.addElement('li', instr, 'Fold the book in half along the line in the center, with the "PassMate: Personal Password Book" title page facing out.', ['side-two']);
this.addElement('li', instr, 'Bind the book with a rubber band along the fold.');
this.addElement('li', instr, 'Bind the book with a rubber band along the fold.', ['side-two']);
this.addElement('li', instr, 'See page 2 of the book for usage instructions.');
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('h2', this.overview, 'Reprinting Your Book');
this.addElement('blurb', this.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', this.overview, 'Recovery Code');
recoveryLabel.classList.add('recovery');
this.recoveryIn = this.addElement('input', recoveryLabel);
this.recoveryIn.type = 'text';
@@ -107,12 +124,12 @@ class PassMate {
this.derivePasswords();
});
this.addElement('h2', overview, 'Questions? Suggestions?');
this.addElement('h2', this.overview, 'Questions? Suggestions?');
let contact = this.addElement('a', overview, 'Contact ian@passmate.io');
let contact = this.addElement('a', this.overview, 'Contact ian@passmate.io');
contact.href = 'mailto:ian@passmate.io';
let github = this.addElement('a', overview, 'Source code & issue tracking at GitHub');
let github = this.addElement('a', this.overview, 'Source code & issue tracking at GitHub');
github.href = 'https://github.com/flamingcowtv/passmate';
}