diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx | 50 |
1 files changed, 32 insertions, 18 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx index b82807cc7..35d67cbc6 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.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,6 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { randomRfc3548Base32Key, TalerMerchantApi } 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,12 +29,10 @@ 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"; -type Entity = MerchantBackend.OTP.OtpDevicePatchDetails & WithId; +type Entity = TalerMerchantApi.OtpDevicePatchDetails & WithId; interface Props { onUpdate: (d: Entity) => Promise<void>; @@ -48,8 +47,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 +104,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 +129,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 && ( |