1 files changed, 22 insertions, 21 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx
index 5f1ae26a3..d5522c2d4 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
@@ -19,8 +19,13 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import {
+  TalerMerchantApi,
+  isRfc3548Base32Charset,
+  randomRfc3548Base32Key,
+} from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
 import {
@@ -28,18 +33,10 @@ import {
   FormProvider,
 } from "../../../../components/form/FormProvider.js";
 import { Input } from "../../../../components/form/Input.js";
-import { InputCurrency } from "../../../../components/form/InputCurrency.js";
-import { InputDuration } from "../../../../components/form/InputDuration.js";
-import { InputNumber } from "../../../../components/form/InputNumber.js";
-import { useBackendContext } from "../../../../context/backend.js";
-import { MerchantBackend } from "../../../../declaration.js";
 import { InputSelector } from "../../../../components/form/InputSelector.js";
 import { InputWithAddon } from "../../../../components/form/InputWithAddon.js";
-import { isBase32RFC3548Charset, randomBase32Key } from "../../../../utils/crypto.js";
-import { QR } from "../../../../components/exception/QR.js";
-import { useInstanceContext } from "../../../../context/instance.js";
 
-type Entity = MerchantBackend.OTP.OtpDeviceAddDetails;
+type Entity = TalerMerchantApi.OtpDeviceAddDetails;
 
 interface Props {
   onCreate: (d: Entity) => Promise<void>;
@@ -49,32 +46,32 @@ interface Props {
 const algorithms = [0, 1, 2];
 const algorithmsNames = ["off", "30s 8d TOTP-SHA1", "30s 8d eTOTP-SHA1"];
 
-
 export function CreatePage({ onCreate, onBack }: Props): VNode {
   const { i18n } = useTranslationContext();
-  const backend = useBackendContext();
 
   const [state, setState] = useState<Partial<Entity>>({});
 
   const [showKey, setShowKey] = useState(false);
 
   const errors: FormErrors<Entity> = {
-    otp_device_id: !state.otp_device_id ? i18n.str`required`
+    otp_device_id: !state.otp_device_id
+      ? i18n.str`required`
       : !/[a-zA-Z0-9]*/.test(state.otp_device_id)
         ? i18n.str`no valid. only characters and numbers`
         : undefined,
     otp_algorithm: !state.otp_algorithm ? i18n.str`required` : undefined,
-    otp_key: !state.otp_key ? i18n.str`required` :
-      !isBase32RFC3548Charset(state.otp_key)
+    otp_key: !state.otp_key
+      ? i18n.str`required`
+      : !isRfc3548Base32Charset(state.otp_key)
         ? i18n.str`just letters and numbers from 2 to 7`
         : state.otp_key.length !== 32
           ? i18n.str`size of the key should be 32`
           : undefined,
-    otp_device_description: !state.otp_device_description ? i18n.str`required`
+    otp_device_description: !state.otp_device_description
+      ? i18n.str`required`
       : !/[a-zA-Z0-9]*/.test(state.otp_device_description)
         ? i18n.str`no valid. only characters and numbers`
         : undefined,
-
   };
 
   const hasErrors = Object.keys(errors).some(
@@ -115,7 +112,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                 toStr={(v) => algorithmsNames[v]}
                 fromStr={(v) => Number(v)}
               />
-              {state.otp_algorithm && state.otp_algorithm > 0 ? (
+              {state.otp_algorithm  ? (
                 <Fragment>
                   <InputWithAddon<Entity>
                     expand
@@ -129,7 +126,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                       setShowKey(!showKey);
                     }}
                     addonAfter={
-                      <span class="icon" >
+                      <span class="icon">
                         {showKey ? (
                           <i class="mdi mdi-eye" />
                         ) : (
@@ -142,7 +139,11 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                         data-tooltip={i18n.str`generate random secret key`}
                         class="button is-info mr-3"
                         onClick={(e) => {
-                          setState((s) => ({ ...s, otp_key: randomBase32Key() }));
+                          setState((s) => ({
+                            ...s,
+                            otp_key: randomRfc3548Base32Key(),
+                          }));
+                          e.preventDefault();
                         }}
                       >
                         <i18n.Translate>random</i18n.Translate>