poc

.devcontainer/devcontainer.json

@@ -0,0 +1,30 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+	"name": "Node.js & TypeScript",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"Vue.volar",
+				"Lokalise.i18n-ally",
+				"dbaeumer.vscode-eslint"
+			]
+		}
+	}
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+.pnpm-store
 
 /cypress/videos/
 /cypress/screenshots/

components.d.ts

@@ -98,6 +98,7 @@ declare module '@vue/runtime-core' {
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
@@ -138,9 +139,11 @@ declare module '@vue/runtime-core' {
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NProgress: typeof import('naive-ui')['NProgress']
     NSpace: typeof import('naive-ui')['NSpace']
     NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']

src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue

@@ -2,7 +2,7 @@
 import { useTimestamp } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { useQRCode } from '../qr-code-generator/useQRCode';
-import { base32toHex, buildKeyUri, generateSecret, generateTOTP, getCounterFromTime } from './otp.service';
+import { base32toHex, buildKeyUri, generateHOTP, generateSecret, generateTOTP, getCounterFromTime } from './otp.service';
 import TokenDisplay from './token-display.vue';
 import { useStyleStore } from '@/stores/style.store';
 import InputCopyable from '@/components/InputCopyable.vue';
@@ -19,6 +19,16 @@ function refreshSecret() {
   secret.value = generateSecret();
 }
 
+const counter = ref(0);
+
+const [hotpValues] = computedRefreshable(
+  () =>
+    Object.fromEntries(
+      Array.from({ length: 10 }, (_, i) => [+counter.value + i, generateHOTP({ key: secret.value, counter: +counter.value + i })]),
+    ),
+  { throttle: 500 },
+);
+
 const [tokens] = computedRefreshable(
   () => ({
     previous: generateTOTP({ key: secret.value, now: now.value - 30000 }),
@@ -83,6 +93,20 @@ const secretValidationRules = [
         Open Key URI in new tab
       </c-button>
     </div>
+    <div>
+      <c-input-text
+        v-model:value="counter"
+        label="Counter"
+        placeholder="Start counter at..."
+        type="number"
+        mt-5
+      />
+    </div>
+    <div>
+      <p v-for="(value, currentCounter) in hotpValues" :key="currentCounter">
+        {{ currentCounter }}: {{ value }}
+      </p>
+    </div>
   </div>
   <div style="max-width: 350px">
     <InputCopyable