1 files changed, 15 insertions, 16 deletions

diff --git a/packages/auditor-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx b/packages/auditor-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx
index 5f1ae26a3..ffeaa064a 100644
--- a/packages/auditor-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx
+++ b/packages/auditor-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx
@@ -19,6 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { isRfc3548Base32Charset, randomRfc3548Base32Key } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -28,16 +29,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";
+import { useBackendContext } from "../../../../context/backend.js";
+import { MerchantBackend } from "../../../../declaration.js";
 
 type Entity = MerchantBackend.OTP.OtpDeviceAddDetails;
 
@@ -49,7 +44,6 @@ 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();
@@ -59,22 +53,24 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
   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(
@@ -129,7 +125,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 +138,10 @@ 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(),
+                          }));
                         }}
                       >
                         <i18n.Translate>random</i18n.Translate>