diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 00000000..9f9d0d1a
--- /dev/null
+++ b/.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"
+}
diff --git a/.gitignore b/.gitignore
index a3bbd943..0285fc73 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ dist
dist-ssr
coverage
*.local
+.pnpm-store
/cypress/videos/
/cypress/screenshots/
diff --git a/components.d.ts b/components.d.ts
index 3e65c3cc..2b0dc42d 100644
--- a/components.d.ts
+++ b/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']
@@ -135,13 +136,20 @@ declare module '@vue/runtime-core' {
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDivider: typeof import('naive-ui')['NDivider']
NEllipsis: typeof import('naive-ui')['NEllipsis']
+ NForm: typeof import('naive-ui')['NForm']
+ NFormItem: typeof import('naive-ui')['NFormItem']
NH1: typeof import('naive-ui')['NH1']
NH3: typeof import('naive-ui')['NH3']
NIcon: typeof import('naive-ui')['NIcon']
+ NImage: typeof import('naive-ui')['NImage']
+ NInputNumber: typeof import('naive-ui')['NInputNumber']
NLayout: typeof import('naive-ui')['NLayout']
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
NMenu: typeof import('naive-ui')['NMenu']
+ NProgress: typeof import('naive-ui')['NProgress']
+ NSlider: typeof import('naive-ui')['NSlider']
NSpace: typeof import('naive-ui')['NSpace']
+ NSwitch: typeof import('naive-ui')['NSwitch']
NTable: typeof import('naive-ui')['NTable']
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
diff --git a/locales/de.yml b/locales/de.yml
index 0ccdb71d..aa623d29 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -444,7 +444,7 @@ tools:
otp-generator:
title: OTP-Code-Generator
description: >-
- Generiere und validiere zeitbasierte OTPs (Einmalpasswörter) für
+ Generiere und validiere zeitbasierte und ereignisgesteuertes OTPs (Einmalpasswörter) für
Multi-Faktor-Authentifizierung.
url-encoder:
title: Kodieren/Decodieren von URL-formatierten Zeichenfolgen
diff --git a/locales/en.yml b/locales/en.yml
index d03d80d3..fcf6f385 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -383,7 +383,7 @@ tools:
otp-generator:
title: OTP code generator
- description: Generate and validate time-based OTP (one time password) for multi-factor authentication.
+ description: Generate and validate time-based and event-based OTP (one time password) for multi-factor authentication.
url-encoder:
title: Encode/decode URL-formatted strings
diff --git a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
index 6bd881c0..ce88f393 100644
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/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 }),
@@ -68,23 +78,6 @@ const secretValidationRules = [
-
-
-
-
-
-
- Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s
-
-
-
-
- Open Key URI in new tab
-
-
-
-
+
+
+
+ Open Key URI in new tab
+
+
+
+
+
@@ -122,6 +145,15 @@ const secretValidationRules = [
label-align="right"
label="Padded hex:"
/>
+
+
+
+
+
+
+ Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s
+
+