1 files changed, 68 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/pages/home/authMethodSetup/AuthMethodIbanSetup.tsx b/packages/anastasis-webui/src/pages/home/authMethodSetup/AuthMethodIbanSetup.tsx
new file mode 100644
index 000000000..c9edbfa07
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/authMethodSetup/AuthMethodIbanSetup.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 { TextInput } from "../../../components/fields/TextInput";
+import { AuthMethodSetupProps } from "../AuthenticationEditorScreen";
+import { AnastasisClientFrame } from "../index";
+
+export function AuthMethodIbanSetup({ addAuthMethod, cancel, configured }: AuthMethodSetupProps): VNode {
+  const [name, setName] = useState("");
+  const [account, setAccount] = useState("");
+  const addIbanAuth = (): void => addAuthMethod({
+    authentication_method: {
+      type: "iban",
+      instructions: `Wire transfer from ${account} with holder ${name}`,
+      challenge: encodeCrock(stringToBytes(canonicalJson({
+        name, account
+      }))),
+    },
+  });
+  const errors = !name ? 'Add an account name' : (
+    !account ? 'Add an account IBAN number' : undefined
+  )
+  return (
+    <AnastasisClientFrame hideNav title="Add bank transfer authentication">
+      <p>
+        For bank transfer authentication, you need to provide a bank
+        account (account holder name and IBAN). When recovering your
+        secret, you will be asked to pay the recovery fee via bank
+        transfer from the account you provided here.
+      </p>
+      <div>
+        <TextInput
+          label="Bank account holder name"
+          grabFocus
+          placeholder="John Smith"
+          bind={[name, setName]} />
+        <TextInput
+          label="IBAN"
+          placeholder="DE91100000000123456789"
+          bind={[account, setAccount]} />
+      </div>
+      {configured.length > 0 && <section class="section">
+        <div class="block">
+          Your bank accounts:
+        </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>
+        <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={addIbanAuth}>Add</button>
+          </span>
+        </div>
+      </div>
+    </AnastasisClientFrame>
+  );
+}