print and setup totp

1 files changed, 37 insertions, 6 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx
index 22f86002a..144e968c5 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx
@@ -31,9 +31,11 @@ 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 { InputSelector } from "../../../../components/form/InputSelector.js";
 import { InputWithAddon } from "../../../../components/form/InputWithAddon.js";
 import { useBackendContext } from "../../../../context/backend.js";
 import { MerchantBackend } from "../../../../declaration.js";
+import { randomBase32Key } from "../../../../utils/crypto.js";
 import { undefinedIfEmpty } from "../../../../utils/table.js";
 
 type Entity = MerchantBackend.Template.TemplateAddDetails;
@@ -43,6 +45,13 @@ interface Props {
   onBack?: () => void;
 }
 
+const algorithms = ["0", "1", "2"];
+const algorithmsNames = [
+  "off",
+  "30s 8d TOTP-SHA1 without amount",
+  "30s 8d eTOTP-SHA1 with amount",
+];
+
 export function CreatePage({ onCreate, onBack }: Props): VNode {
   const { i18n } = useTranslationContext();
   const backend = useBackendContext();
@@ -104,7 +113,6 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                 label={i18n.str`Identifier`}
                 tooltip={i18n.str`Name of the template in URLs.`}
               />
-
               <Input<Entity>
                 name="template_description"
                 label={i18n.str`Description`}
@@ -134,12 +142,35 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                 help=""
                 tooltip={i18n.str`How much time has the customer to complete the payment once the order was created.`}
               />
-              <Input<Entity>
-                name="pos_key"
-                label={i18n.str`Point-of-sale key`}
-                help=""
-                tooltip={i18n.str`Useful to validate the purchase`}
+              <InputSelector<Entity>
+                name="pos_algorithm"
+                label={i18n.str`Veritifaction algorithm`}
+                tooltip={i18n.str`Algorithm to use to verify transaction in offline mode`}
+                values={algorithms}
+                toStr={(v) => algorithmsNames[v]}
+                convert={(v) => Number(v)}
               />
+              {state.pos_algorithm && state.pos_algorithm > 0 ? (
+                <Input<Entity>
+                  name="pos_key"
+                  label={i18n.str`Point-of-sale key`}
+                  help=""
+                  tooltip={i18n.str`Useful to validate the purchase`}
+                  side={
+                    <span data-tooltip={i18n.str`generate random secret key`}>
+                      <button
+                        class="button is-info mr-3"
+                        onClick={(e) => {
+                          const pos_key = randomBase32Key();
+                          setState((s) => ({ ...s, pos_key }));
+                        }}
+                      >
+                        <i18n.Translate>random</i18n.Translate>
+                      </button>
+                    </span>
+                  }
+                />
+              ) : undefined}
             </FormProvider>
 
             <div class="buttons is-right mt-5">