1 files changed, 102 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSetup.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSetup.tsx
new file mode 100644
index 000000000..bfeaaa832
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSetup.tsx
@@ -0,0 +1,102 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import {
+  canonicalJson, encodeCrock,
+  stringToBytes
+} from "@gnu-taler/taler-util";
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { AuthMethodSetupProps } from "../AuthenticationEditorScreen";
+import { TextInput } from "../../../components/fields/TextInput";
+import { AnastasisClientFrame } from "..";
+
+export function AuthMethodPostSetup({ addAuthMethod, cancel, configured }: 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,
+    };
+    addAuthMethod({
+      authentication_method: {
+        type: "post",
+        instructions: `Letter to address in postal code ${postcode}`,
+        challenge: encodeCrock(stringToBytes(canonicalJson(challengeJson))),
+      },
+    });
+  };
+
+  const errors = !fullName ? 'The full name is missing' : (
+    !street ? 'The street is missing' : (
+      !city ? 'The city is missing' : (
+        !postcode ? 'The postcode is missing' : (
+          !country ? 'The country is missing' : undefined
+        )
+      )
+    )
+  )
+  return (
+    <AnastasisClientFrame hideNav title="Add postal authentication">
+      <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>
+        <TextInput
+          grabFocus
+          label="Full Name"
+          bind={[fullName, setFullName]}
+        />
+      </div>
+      <div>
+        <TextInput
+          label="Street"
+          bind={[street, setStreet]}
+        />
+      </div>
+      <div>
+        <TextInput
+          label="City" bind={[city, setCity]}
+        />
+      </div>
+      <div>
+        <TextInput
+          label="Postal Code" bind={[postcode, setPostcode]}
+        />
+      </div>
+      <div>
+        <TextInput
+          label="Country"
+          bind={[country, setCountry]}
+        />
+      </div>
+
+      {configured.length > 0 && <section class="section">
+        <div class="block">
+          Your postal code:
+        </div><div class="block">
+          {configured.map((c, i) => {
+            return <div key={i} class="box" style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <p style={{ marginBottom: 'auto', marginTop: 'auto' }}>{c.instructions}</p>
+              <div><button class="button is-danger" onClick={c.remove} >Delete</button></div>
+            </div>
+          })}
+        </div>
+      </section>}
+      <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
+        <button class="button" onClick={cancel}>Cancel</button>
+        <span data-tooltip={errors}>
+          <button class="button is-info" disabled={errors !== undefined} onClick={addPostAuth}>Add</button>
+        </span>
+      </div>
+    </AnastasisClientFrame>
+  );
+}