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 '^\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/README.md b/README.md index e849578..13bc9e5 100644 --- a/README.md +++ b/README.md @@ -3,16 +3,16 @@ a TOTP generator, using the browser's crypto API. It should do the exactly same thing as the google authenticator or any other -TOTP generating app. +TOTP generating app.
The javascript code does not send to or fetch any data from anywhere remotely, and the demo page should work the same when served over https, saved locally or used inside -a browser extension. +a browser extension.
I have also packaged this into an xpi firefox browser extension, 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.
diff --git a/form.js b/form.js index d066088..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,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); diff --git a/generate-website.sh b/generate-website.sh new file mode 100755 index 0000000..5655dfb --- /dev/null +++ b/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 "\n' "$(cat form.js form-tweaks.js)" +printf '\n' \ + 'id=source style="display: block; white-space: pre; font-family: monospace; overflow: auto"' "$(cat totp.js)"