aboutsummaryrefslogtreecommitdiff
path: root/packages/auditor-backoffice-ui/src/paths/instance
diff options
context:
space:
mode:
Diffstat (limited to 'packages/auditor-backoffice-ui/src/paths/instance')
-rw-r--r--packages/auditor-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx31
-rw-r--r--packages/auditor-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx47
2 files changed, 46 insertions, 32 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>
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 && (
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-13 02:30:58 +0000