From d45637cd4fd65a355d0cfeaac8d3d830851a8441 Mon Sep 17 00:00:00 2001 From: "Haas, Simon" Date: Tue, 25 Feb 2025 13:05:42 +0000 Subject: [PATCH 1/2] poc --- .devcontainer/devcontainer.json | 30 +++++++++++++++++++ .gitignore | 1 + components.d.ts | 3 ++ .../otp-code-generator-and-validator.vue | 26 +++++++++++++++- 4 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 .devcontainer/devcontainer.json 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..79ddb2ee 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'] @@ -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'] 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..f594b9a7 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 }), @@ -83,6 +93,20 @@ const secretValidationRules = [ Open Key URI in new tab +
+ +
+
+

+ {{ currentCounter }}: {{ value }} +

+
Date: Tue, 25 Feb 2025 15:07:59 +0000 Subject: [PATCH 2/2] rearrange --- components.d.ts | 5 ++ locales/de.yml | 2 +- locales/en.yml | 2 +- .../otp-code-generator-and-validator.vue | 72 ++++++++++--------- 4 files changed, 47 insertions(+), 34 deletions(-) diff --git a/components.d.ts b/components.d.ts index 79ddb2ee..2b0dc42d 100644 --- a/components.d.ts +++ b/components.d.ts @@ -136,15 +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 f594b9a7..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 @@ -78,37 +78,6 @@ const secretValidationRules = [ - -
- - - -
- Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s -
-
-
- - - Open Key URI in new tab - -
-
- -
-
-

- {{ currentCounter }}: {{ value }} -

-
-
-
+
+ + + Open Key URI in new tab + +
+
+
+
+ + +
+
+
@@ -146,6 +145,15 @@ const secretValidationRules = [ label-align="right" label="Padded hex:" /> + +
+ + + +
+ Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s +
+