add template from merchant backoffice

1 files changed, 50 insertions, 0 deletions

diff --git a/packages/anastasis-webui/src/pages/home/AuthMethodSmsSetup.tsx b/packages/anastasis-webui/src/pages/home/AuthMethodSmsSetup.tsx
new file mode 100644
index 000000000..d193f6eb7
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/AuthMethodSmsSetup.tsx
@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import {
+  encodeCrock,
+  stringToBytes
+} from "@gnu-taler/taler-util";
+import { h, VNode } from "preact";
+import { useState, useRef, useLayoutEffect } from "preact/hooks";
+import { AuthMethodSetupProps, AnastasisClientFrame } from "./index";
+
+export function AuthMethodSmsSetup(props: AuthMethodSetupProps): VNode {
+  const [mobileNumber, setMobileNumber] = useState("");
+  const addSmsAuth = (): void => {
+    props.addAuthMethod({
+      authentication_method: {
+        type: "sms",
+        instructions: `SMS to ${mobileNumber}`,
+        challenge: encodeCrock(stringToBytes(mobileNumber)),
+      },
+    });
+  };
+  const inputRef = useRef<HTMLInputElement>(null);
+  useLayoutEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  return (
+    <AnastasisClientFrame hideNav title="Add SMS authentication">
+      <div>
+        <p>
+          For SMS authentication, you need to provide a mobile number. When
+          recovering your secret, you will be asked to enter the code you
+          receive via SMS.
+        </p>
+        <label>
+          Mobile number:{" "}
+          <input
+            value={mobileNumber}
+            ref={inputRef}
+            style={{ display: "block" }}
+            autoFocus
+            onChange={(e) => setMobileNumber((e.target as any).value)}
+            type="text" />
+        </label>
+        <div>
+          <button onClick={() => props.cancel()}>Cancel</button>
+          <button onClick={() => addSmsAuth()}>Add</button>
+        </div>
+      </div>
+    </AnastasisClientFrame>
+  );
+}