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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
use dioxus::prelude::*;
use crate::encryption::verification::VerificationState;
/// Verification dialog UI for device verification.
#[component]
pub fn VerificationModal(
state: VerificationState,
on_accept: EventHandler<()>,
on_confirm: EventHandler<()>,
on_cancel: EventHandler<()>,
) -> Element {
rsx! {
div {
class: "verification-modal",
div {
class: "verification-modal__backdrop",
onclick: move |_| on_cancel.call(()),
}
div {
class: "verification-modal__dialog",
match &state {
VerificationState::Idle => rsx! {
div { "No verification in progress" }
},
VerificationState::Requested { from_user, .. } => rsx! {
h3 { "Verification Request" }
p { "{from_user} wants to verify your device." }
div {
class: "verification-modal__actions",
button {
class: "btn btn--primary",
onclick: move |_| on_accept.call(()),
"Accept"
}
button {
class: "btn btn--secondary",
onclick: move |_| on_cancel.call(()),
"Decline"
}
}
},
VerificationState::KeysExchanged { emojis, .. } => rsx! {
h3 { "Compare Emoji" }
p { "Verify that the following emoji appear on both devices:" }
div {
class: "verification-modal__emojis",
for (emoji, description) in emojis.iter() {
div {
class: "verification-modal__emoji",
span { class: "verification-modal__emoji-icon", "{emoji}" }
span { class: "verification-modal__emoji-name", "{description}" }
}
}
}
div {
class: "verification-modal__actions",
button {
class: "btn btn--primary",
onclick: move |_| on_confirm.call(()),
"They match"
}
button {
class: "btn btn--danger",
onclick: move |_| on_cancel.call(()),
"They don't match"
}
}
},
VerificationState::Confirmed { .. } => rsx! {
h3 { "Verifying..." }
div { class: "spinner" }
p { "Completing verification..." }
},
VerificationState::Done { .. } => rsx! {
h3 { "Verified!" }
p { "Device verification completed successfully." }
button {
class: "btn btn--primary",
onclick: move |_| on_cancel.call(()),
"Done"
}
},
VerificationState::Cancelled { reason, .. } => rsx! {
h3 { "Verification Cancelled" }
p { "Verification was cancelled: {reason}" }
button {
class: "btn btn--secondary",
onclick: move |_| on_cancel.call(()),
"Close"
}
},
}
}
}
}
}