Group handlers into a class

Makefile

@@ -1,10 +1,6 @@
 all:	totp.html totp.xpi
 totp.html:	form.html README.md totp.js form.js form-tweaks.js
-	set -e; exec >$@; \
-	grep -v '^<script' form.html && printf '<hr>\n'; \
-	sed 's/totp\.js/#source/' README.md; \
-	printf '<script%s>\n%s\n</script>\n' '' "$$(cat form.js form-tweaks.js)" \
-	   ' id=source style="display: block; white-space: pre; font-family: monospace; overflow: auto"' "$$(cat totp.js)"
+	./generate-website.sh > totp.html
 xpi_sources = manifest.json form.html form.js totp.js totp.png
 totp.xpi:	$(xpi_sources)
 	rm -f $@

README.md

@@ -3,16 +3,16 @@ a <a href=https://www.rfc-editor.org/rfc/rfc6238>TOTP</a> generator,
 using the browser's
 <a href=https://w3c.github.io/webcrypto/#subtlecrypto-interface>crypto API</a>.
 It should do the exactly same thing as the google authenticator or any other
-TOTP generating app.
+TOTP generating app.</p>
 
 <p>The <a href=totp.js>javascript code</a> does not send to or fetch any data
 from anywhere remotely, and
 the <a href=https://turistu.github.io/totp.html>demo page</a>
 should work the same when served over https, saved locally or used inside
-a browser extension.
+a browser extension.</p>
 
 <p>I have also packaged this into an <a href=https://addons.mozilla.org/en-US/firefox/addon/totp/>xpi firefox browser extension</a>,
 which offers the convenience of generating the TOTP (for a key you have saved)
 directly from a toolbar popup instead of having to switch to another tab.
 The xpi does not do anything more than that and does not include any content
-scripts or filters.
+scripts or filters.</p>

form.js

@@ -1,7 +1,25 @@
-async function generate(){
-	try { CODE.value = await totp(KEY.value); copy('click to copy', true) }
-	catch(e){ KEY.setCustomValidity(ERROR.value = e) }
+class TOTPForm {
+	constructor(GENERATE, CODE, KEY, ERROR) {
+		this.code = CODE
+		this.key = KEY
+		this.error = ERROR
+
+		// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#bound_methods_in_classes
+		this.generate = this.generate.bind(this)
+
+		GENERATE.onclick = this.generate
+	}
+
+	async generate() {
+		try {
+			this.code.value = await totp(this.key.value);
+			copy('click to copy', true)
+		} catch(e) {
+			this.key.setCustomValidity(this.error.value = e)
+		}
+	}
 }
+
 function touchscreen(){
 	return matchMedia('(pointer:coarse)').matches
 }
@@ -19,15 +37,18 @@ async function copy(emsg, select){
 		}
 	}catch(e){ CODE.title = emsg }
 }
-GENERATE.onclick = generate;
+
+const totpWrapper = new TOTPForm(GENERATE, CODE, KEY, ERROR);
 KEY.oninput = function(){
 	KEY.setCustomValidity('');
 	ERROR.value = KEY.checkValidity() ?  '' :
 		Error('only A..Z, 2..7 and spaces allowed');
-	if(KEY !== document.activeElement) generate();
+	if(KEY !== document.activeElement) totpWrapper.generate();
 }
 SHOW.checked = false;
 SHOW.onchange = e => KEY.type = SHOW.checked ? 'text': 'password';
 CODE.onclick = e => copy('copy failed');
 FORM.onsubmit = e => e.preventDefault();
+// add class="popup" when html code is called from panel button
+// view-source:moz-extension://xxxxxxxx/form.html#popup
 FORM.className = document.location.hash.substr(1);

generate-website.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+# Generates totp.html for https://turistu.github.io/totp.html
+
+set -e
+
+# strip lines starting with "<script" from form.html output
+grep -v '^<script' form.html && printf '<hr>\n'
+# replace totp.js references with #source in README.md output
+sed 's/totp\.js/#source/' README.md
+# insert form.js form-tweaks.js as scripts, and totp.js as listing
+printf '<script>\n%s\n</script>\n' "$(cat form.js form-tweaks.js)"
+printf '<script %s>\n%s\n</script>\n' \
+            'id=source style="display: block; white-space: pre; font-family: monospace; overflow: auto"' "$(cat totp.js)"