From 5883d42d800c7b444c59d626bcaa5abca7dc83d0 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Tue, 19 Oct 2021 10:56:52 -0300
Subject: add template from merchant backoffice

---
 .../src/pages/home/AuthMethodPostSetup.tsx         | 68 ++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx

(limited to 'packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx')

diff --git a/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx b/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx
new file mode 100644
index 000000000..43dcde330
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/AuthMethodPostSetup.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import {
+  canonicalJson, encodeCrock,
+  stringToBytes
+} from "@gnu-taler/taler-util";
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { AuthMethodSetupProps, LabeledInput } from "./index";
+
+export function AuthMethodPostSetup(props: AuthMethodSetupProps): VNode {
+  const [fullName, setFullName] = useState("");
+  const [street, setStreet] = useState("");
+  const [city, setCity] = useState("");
+  const [postcode, setPostcode] = useState("");
+  const [country, setCountry] = useState("");
+
+  const addPostAuth = () => {
+    const challengeJson = {
+      full_name: fullName,
+      street,
+      city,
+      postcode,
+      country,
+    };
+    props.addAuthMethod({
+      authentication_method: {
+        type: "email",
+        instructions: `Letter to address in postal code ${postcode}`,
+        challenge: encodeCrock(stringToBytes(canonicalJson(challengeJson))),
+      },
+    });
+  };
+
+  return (
+    <div class={style.home}>
+      <h1>Add {props.method} authentication</h1>
+      <div>
+        <p>
+          For postal letter authentication, you need to provide a postal
+          address. When recovering your secret, you will be asked to enter a
+          code that you will receive in a letter to that address.
+        </p>
+        <div>
+          <LabeledInput
+            grabFocus
+            label="Full Name"
+            bind={[fullName, setFullName]} />
+        </div>
+        <div>
+          <LabeledInput label="Street" bind={[street, setStreet]} />
+        </div>
+        <div>
+          <LabeledInput label="City" bind={[city, setCity]} />
+        </div>
+        <div>
+          <LabeledInput label="Postal Code" bind={[postcode, setPostcode]} />
+        </div>
+        <div>
+          <LabeledInput label="Country" bind={[country, setCountry]} />
+        </div>
+        <div>
+          <button onClick={() => props.cancel()}>Cancel</button>
+          <button onClick={() => addPostAuth()}>Add</button>
+        </div>
+      </div>
+    </div>
+  );
+}
-- 
cgit v1.2.3