From 5035cb888c058b81be5d358af9080b851e62b552 Mon Sep 17 00:00:00 2001
From: "Haas, Simon" <simon.haas@stadt.bayreuth.de>
Date: Tue, 25 Feb 2025 15:07:59 +0000
Subject: [PATCH] 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 = [
         </c-tooltip>
       </template>
     </c-input-text>
-
-    <div>
-      <TokenDisplay :tokens="tokens" />
-
-      <n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
-      <div style="text-align: center">
-        Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s
-      </div>
-    </div>
-    <div mt-4 flex flex-col items-center justify-center gap-3>
-      <n-image :src="qrcode" />
-      <c-button :href="keyUri" target="_blank">
-        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
       label="Secret in hexadecimal"
       :value="base32toHex(secret)"
@@ -117,11 +86,41 @@ const secretValidationRules = [
       mb-5
     />
 
+    <div mt-4 flex flex-col items-center justify-center gap-3>
+      <n-image :src="qrcode" />
+      <c-button :href="keyUri" target="_blank">
+        Open Key URI in new tab
+      </c-button>
+    </div>
+  </div>
+  <div style="max-width: 350px">
+    <div>
+      <c-input-text
+        v-model:value="counter"
+        label="Start-value for HOTP counter"
+        placeholder="Start counter for HOTP at..."
+        type="number"
+        mb-5
+        mt-5
+      />
+      <InputCopyable
+        v-for="(value, currentCounter) in hotpValues" :key="currentCounter"
+        :value="value"
+        readonly
+        :label="`HOTP ${currentCounter}:`"
+        label-position="left"
+        label-width="90px"
+        label-align="right"
+        placeholder="HOTP will be displayed here"
+        mb-1
+      />
+    </div>
+  </div>
+  <div style="max-width: 350px">
     <InputCopyable
       label="Epoch"
       :value="Math.floor(now / 1000).toString()"
       readonly
-      mb-5
       placeholder="Epoch in sec will be displayed here"
     />
 
@@ -146,6 +145,15 @@ const secretValidationRules = [
       label-align="right"
       label="Padded hex:"
     />
+
+    <div>
+      <TokenDisplay :tokens="tokens" mt-5 />
+
+      <n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
+      <div style="text-align: center">
+        Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s
+      </div>
+    </div>
   </div>
 </template>