From 87110fe7944e0d5d56b7d4d4fd08006c5dbc9d5f Mon Sep 17 00:00:00 2001
From: Anatoli Babenia <anatoli@rainforce.org>
Date: Sat, 15 Feb 2025 11:18:16 +0300
Subject: [PATCH 1/4] Move demo site generation into separate file

---
 Makefile            |  6 +-----
 generate-website.sh | 10 ++++++++++
 2 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100755 generate-website.sh

diff --git a/Makefile b/Makefile
index a1aeac0..42a4165 100644
--- a/Makefile
+++ b/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 $@
diff --git a/generate-website.sh b/generate-website.sh
new file mode 100755
index 0000000..b63aa57
--- /dev/null
+++ b/generate-website.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Generates totp.html for https://turistu.github.io/totp.html
+
+set -e
+
+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)"

From f79577d4b21791c2e6d9d7f1d4234e55856a5b70 Mon Sep 17 00:00:00 2001
From: Anatoli Babenia <anatoli@rainforce.org>
Date: Sat, 15 Feb 2025 12:01:31 +0300
Subject: [PATCH 2/4] Close html tags to move <script> to top and simplify
 printf

---
 README.md           | 6 +++---
 generate-website.sh | 8 ++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index e849578..13bc9e5 100644
--- a/README.md
+++ b/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>
diff --git a/generate-website.sh b/generate-website.sh
index b63aa57..5655dfb 100755
--- a/generate-website.sh
+++ b/generate-website.sh
@@ -4,7 +4,11 @@
 
 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
-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)"
+# 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)"

From a12f21d5125998f9d2ef17f00a65707065ed2cb6 Mon Sep 17 00:00:00 2001
From: Anatoli Babenia <anatoli@rainforce.org>
Date: Sat, 15 Feb 2025 12:26:56 +0300
Subject: [PATCH 3/4] Explain what FORM.className set does

---
 form.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/form.js b/form.js
index d066088..453bdec 100644
--- a/form.js
+++ b/form.js
@@ -30,4 +30,6 @@ 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);

From b7ff90127dc10cb10556c84041bf9579b797445a Mon Sep 17 00:00:00 2001
From: Anatoli Babenia <anatoli@rainforce.org>
Date: Sat, 15 Feb 2025 14:48:52 +0300
Subject: [PATCH 4/4] Move generate() function into a class

This allows to add multiple forms
---
 form.js | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/form.js b/form.js
index 453bdec..7470a0a 100644
--- a/form.js
+++ b/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,12 +37,13 @@ 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';