1 files changed, 31 insertions, 16 deletions

diff --git a/packages/auditor-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx b/packages/auditor-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx
index b82807cc7..85bb272aa 100644
--- a/packages/auditor-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx
+++ b/packages/auditor-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx
@@ -19,6 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { 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,10 +29,9 @@ import {
   FormProvider,
 } from "../../../../components/form/FormProvider.js";
 import { Input } from "../../../../components/form/Input.js";
-import { MerchantBackend, WithId } from "../../../../declaration.js";
 import { InputSelector } from "../../../../components/form/InputSelector.js";
 import { InputWithAddon } from "../../../../components/form/InputWithAddon.js";
-import { randomBase32Key } from "../../../../utils/crypto.js";
+import { MerchantBackend, WithId } from "../../../../declaration.js";
 
 type Entity = MerchantBackend.OTP.OtpDevicePatchDetails & WithId;
 
@@ -48,8 +48,7 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode {
   const [state, setState] = useState<Partial<Entity>>(device);
   const [showKey, setShowKey] = useState(false);
 
-  const errors: FormErrors<Entity> = {
-  };
+  const errors: FormErrors<Entity> = {};
 
   const hasErrors = Object.keys(errors).some(
     (k) => (errors as any)[k] !== undefined,
@@ -106,16 +105,23 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode {
                       label={i18n.str`Device key`}
                       readonly={state.otp_key === undefined}
                       inputType={showKey ? "text" : "password"}
-                      help={state.otp_key === undefined ? "Not modified" : "Be sure to be very hard to guess or use the random generator"}
+                      help={
+                        state.otp_key === undefined
+                          ? "Not modified"
+                          : "Be sure to be very hard to guess or use the random generator"
+                      }
                       tooltip={i18n.str`Your device need to have exactly the same value`}
                       fromStr={(v) => v.toUpperCase()}
                       addonAfterAction={() => {
                         setShowKey(!showKey);
                       }}
                       addonAfter={
-                        <span class="icon" onClick={() => {
-                          setShowKey(!showKey);
-                        }}>
+                        <span
+                          class="icon"
+                          onClick={() => {
+                            setShowKey(!showKey);
+                          }}
+                        >
                           {showKey ? (
                             <i class="mdi mdi-eye" />
                           ) : (
@@ -124,25 +130,34 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode {
                         </span>
                       }
                       side={
-                        state.otp_key === undefined ? <button
-
-                          onClick={(e) => {
-                            setState((s) => ({ ...s, otp_key: "" }));
-                          }}
-                          class="button">change key</button> :
+                        state.otp_key === undefined ? (
+                          <button
+                            onClick={(e) => {
+                              setState((s) => ({ ...s, otp_key: "" }));
+                            }}
+                            class="button"
+                          >
+                            change key
+                          </button>
+                        ) : (
                           <button
                             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>
                           </button>
+                        )
                       }
                     />
                   </Fragment>
-                ) : undefined}              </FormProvider>
+                ) : undefined}{" "}
+              </FormProvider>
 
               <div class="buttons is-right mt-5">
                 {onBack && (