summaryrefslogtreecommitdiff
path: root/packages/anastasis-webui/src/pages/home/AuthMethodEmailSetup.tsx
blob: 9567e0ef797ac1ea703772477acd291e30789017 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* 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 } from "./AuthenticationEditorScreen";
import { 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>
  );
}