1 files changed, 41 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx b/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx
new file mode 100644
index 000000000..9aa6855fe
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import {
+  encodeCrock,
+  stringToBytes
+} from "@gnu-taler/taler-util";
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { AuthMethodSetupProps, AnastasisClientFrame, LabeledInput } from "./index";
+
+export function AuthMethodEmailSetup(props: AuthMethodSetupProps): VNode {
+  const [email, setEmail] = useState("");
+  return (
+    <AnastasisClientFrame hideNav title="Add email authentication">
+      <p>
+        For email authentication, you need to provide an email address. When
+        recovering your secret, you will need to enter the code you receive by
+        email.
+      </p>
+      <div>
+        <LabeledInput
+          label="Email address"
+          grabFocus
+          bind={[email, setEmail]} />
+      </div>
+      <div>
+        <button onClick={() => props.cancel()}>Cancel</button>
+        <button
+          onClick={() => props.addAuthMethod({
+            authentication_method: {
+              type: "email",
+              instructions: `Email to ${email}`,
+              challenge: encodeCrock(stringToBytes(email)),
+            },
+          })}
+        >
+          Add
+        </button>
+      </div>
+    </AnastasisClientFrame>
+  );
+}