From 2fd04e261888598d88f13f0831c6dff1ce200a5b Mon Sep 17 00:00:00 2001
From: Ian Gulliver <ian@flamingcow.tv>
Date: Sun, 2 Dec 2018 05:41:27 +0000
Subject: [PATCH] Switch from contentEditable to input + styling Fixes #8

---
 passmate.css | 32 +++++++++++++++-----------------
 passmate.js  | 31 ++++++++++++-------------------
 2 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/passmate.css b/passmate.css
index 50e1858..ecb3a2e 100644
--- a/passmate.css
+++ b/passmate.css
@@ -80,38 +80,36 @@ overview,product {
 		color: black;
 	}
 
-	owner {
+	input {
 		display: block;
-		width: 11em;
 
+		border: 0;
 		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-bottom: 1em;
 	}
 
-	recovery {
-		display: block;
-		width: 17em;
+	input:focus {
+		outline: none;
+	}
 
-		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-weight: 700;
 		font-size: 1.2em;
 
 		text-align: center;
-		align-self: center;
-
-		margin-top: 0;
-		margin-bottom: 1em;
 	}
 
 	ol {
diff --git a/passmate.js b/passmate.js
index 901ebbb..c32ad76 100644
--- a/passmate.js
+++ b/passmate.js
@@ -25,7 +25,7 @@ class PassMate {
 
 		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();
 	}
 
@@ -43,15 +43,11 @@ class PassMate {
 
 		let ownerStep = this.addElement('li', instr);
 		this.addElement('blurb', ownerStep, 'Who will this book belong to?');
-		this.ownerIn = this.addElement('owner', ownerStep);
-		this.ownerIn.contentEditable = true;
-		this.ownerIn.addEventListener('input', () => {
-			if (this.ownerIn.childNodes.length > 1 ||
-				(this.ownerIn.childNodes.length == 1 &&
-				 this.ownerIn.firstChild.nodeType != Node.TEXT_NODE)) {
-				this.ownerIn.innerText = this.ownerIn.innerText;
-			}
-			this.ownerOut.innerText = this.ownerIn.innerText;
+		this.ownerIn = this.addElement('input', ownerStep);
+		this.ownerIn.type = 'text';
+		this.ownerIn.classList.add('owner');
+		this.ownerIn.addEventListener('change', () => {
+			this.ownerOut.innerText = this.ownerIn.value;
 		});
 
 		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('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.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();
 		});
 
@@ -222,7 +215,7 @@ class PassMate {
 
 	generatePassword(choices, oversample) {
 		oversample = oversample || 4;
-		if (this.recoveryIn.innerText != '') {
+		if (this.recoveryIn.value != '') {
 			return;
 		}
 		let rand = Array.from(crypto.getRandomValues(new Uint8Array(choices.length * oversample)));
@@ -245,7 +238,7 @@ class PassMate {
 	}
 
 	derivePasswords() {
-		let recovery = this.recoveryIn.innerText;
+		let recovery = this.recoveryIn.value;
 		if (recovery.charAt(0) == 'A') {
 			this.recoveryOut.innerText = recovery;
 			this.importKey(recovery.slice(1))