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
43
44
45
46
47
48
49
50
51
52
53
54
55
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>
);
}
|
