Create index.html

jarcoug · Feb 6, 2024 · e2e669d · e2e669d
1 parent b67fc30
commit e2e669d
Showing 1 changed file with 100 additions and 0 deletions.
diff --git a/otp/index.html b/otp/index.html
@@ -0,0 +1,100 @@
+<html><head>
+<title>JS OTP Demo</title>
+<style>
+    body {
+        margin: 0 auto;
+        font-family: Tahoma, Verdana, Arial, sans-serif;
+    }
+</style>
+</head>
+
+<body style="width: 45em;">
+<h1 id="jsotp-demo">JS OTP Demo</h1>
+<p>Javascript Implementation of 2 Factor Auth</p>
+<hr>
+<p id="secret">Secret: </p>
+<h2 id="code-1">TOTP code</h2>
+<p id="ticker">timer</p>
+
+<hr>
+<p id="secret-2">Secret: </p>
+<h2 id="code-2">HOTP code</h2>
+<p>Counter value is: <span id="counter"></span></p>
+<button onclick="requestHotp()">Get new code(Hotp)</button>
+
+<script src="dist/jsOTP.min.js"></script>
+<script>
+$ = function(sel) {
+  return document.querySelector(sel);
+};
+
+var secret = "abcdefghijklmnop"
+$('#secret').innerText = "Secret: " + secret;
+
+var totp = new jsOTP.totp();
+var code = totp.getOtp(secret);
+var hotp = new jsOTP.hotp();
+var doge = hotp.getOtp(secret, 0);
+
+console.log(code);
+console.log(doge);
+
+var updateTicker = function(tick, el) {
+  el.innerText = tick;
+}
+var updateTotp = function(secret, el) {
+  el.innerText = totp.getOtp(secret);
+}
+
+updateTotp(secret, $('#code-1'));
+
+var timeLoop = function() {
+  var epoch = Math.round(new Date().getTime() / 1000.0);
+  var countDown = 30 - (epoch % 30);
+  updateTicker(countDown, $('#ticker'));
+  if (epoch % 30 == 0) updateTotp(secret, $('#code-1'));
+}
+
+var intX = setInterval(timeLoop, 1000);
+
+var counter = 0;
+var secret2 = "abcdefghijklmnop";
+$('#secret-2').innerText = "Secret: " + secret2;
+$('#counter').innerText = counter;
+
+var updateHotp = function(secret, counter, el) {
+  el.innerText = hotp.getOtp(secret, counter);
+}
+var updateCounter = function(counter, el) {
+  el.innerText = counter;
+}
+var requestHotp = function() {
+  updateHotp(secret2, counter, $('#code-2'));
+  updateCounter(++counter, $('#counter'));
+}
+
+getSecret = function() {
+  var _secret = prompt("Enter secret");
+    secret2 = _secret
+    $('#secret-2').innerText = "Secret: " + secret2;
+    secret = _secret
+    $('#secret').innerText = "Secret: " + secret;
+    // reset
+    clearInterval(intX)
+    counter = 0
+    updateTotp(secret, $('#code-1'));
+    requestHotp();
+    intX = setInterval(timeLoop, 1000);
+    $('#qr-3').src = 'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=200x200&chld=M|0&cht=qr&chl=otpauth://totp/user@host.com%3Fsecret%3D' + secret;
+}
+
+</script>
+
+
+<hr>
+<button type="button" onclick="getSecret()">Try your own secret</button>
+<br>
+<p>To verify it, you can scan the following QR code with your Google Authenticator app. The codes on this page and your app should match.</p>
+<img id="qr-3"></img>
+
+</body></html>