1 files changed, 47 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/pages/home/authMethodSetup/AuthMethodTotpSetup.tsx b/packages/anastasis-webui/src/pages/home/authMethodSetup/AuthMethodTotpSetup.tsx
new file mode 100644
index 000000000..bbffedad6
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/authMethodSetup/AuthMethodTotpSetup.tsx
@@ -0,0 +1,47 @@
+/* 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 } from "../index";
+import { TextInput } from "../../../components/fields/TextInput";
+import { QR } from "../../../components/QR";
+
+export function AuthMethodTotpSetup({addAuthMethod, cancel, configured}: AuthMethodSetupProps): VNode {
+  const [name, setName] = useState("");
+  const addTotpAuth = (): void => addAuthMethod({
+    authentication_method: {
+      type: "totp",
+      instructions: `Enter code for ${name}`,
+      challenge: encodeCrock(stringToBytes(name)),
+    },
+  });
+  const errors = !name ? 'The TOTP name is missing' : undefined;
+  return (
+    <AnastasisClientFrame hideNav title="Add TOTP authentication">
+      <p>
+        For Time-based One-Time Password (TOTP) authentication, you need to set 
+        a name for the TOTP secret. Then, you must scan the generated QR code 
+        with your TOTP App to import the TOTP secret into your TOTP App.
+      </p>
+      <div>
+        <TextInput
+          label="TOTP Name"
+          grabFocus
+          bind={[name, setName]} />
+      </div>
+      <QR text={`sometext ${name}`} />
+      <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={addTotpAuth}>Add</button>
+          </span>
+        </div>
+      </div>
+    </AnastasisClientFrame>
+  );
+}