1 files changed, 56 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/pages/home/authMethodSetup/AuthMethodVideoSetup.tsx b/packages/anastasis-webui/src/pages/home/authMethodSetup/AuthMethodVideoSetup.tsx
new file mode 100644
index 000000000..d292a9d24
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/authMethodSetup/AuthMethodVideoSetup.tsx
@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import {
+  encodeCrock,
+  stringToBytes
+} from "@gnu-taler/taler-util";
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { ImageInput } from "../../../components/fields/ImageInput";
+import { AuthMethodSetupProps } from "../AuthenticationEditorScreen";
+import { AnastasisClientFrame } from "../index";
+
+export function AuthMethodVideoSetup({cancel, addAuthMethod, configured}: AuthMethodSetupProps): VNode {
+  const [image, setImage] = useState("");
+  const addVideoAuth = (): void => {
+    addAuthMethod({
+      authentication_method: {
+        type: "video",
+        instructions: image,
+        challenge: encodeCrock(stringToBytes(image)),
+      },
+    })
+  };
+  return (
+    <AnastasisClientFrame hideNav title="Add video authentication">
+      <p>
+        For video identification, you need to provide a passport-style 
+        photograph. When recovering your secret, you will be asked to join a 
+        video call. During that  call, a human will use the photograph to 
+        verify your identity.
+      </p>
+      <div style={{textAlign:'center'}}>
+        <ImageInput
+          label="Choose photograph"
+          grabFocus
+          bind={[image, setImage]} />
+      </div>
+      {configured.length > 0 && <section class="section">
+          <div class="block">
+            Your photographs:
+          </div><div class="block">
+            {configured.map((c, i) => {
+              return <div key={i} class="box" style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <img style={{ marginTop: 'auto', marginBottom: 'auto', width: 100, height:100, border: 'solid 1px black' }} src={c.instructions} />
+                <div style={{marginTop: 'auto', marginBottom: 'auto'}}><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>
+          <button class="button is-info" onClick={addVideoAuth}>Add</button>
+        </div>
+      </div>
+    </AnastasisClientFrame>
+  );
+}