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
|
import {useEffect, useState} from 'react'
import {Trans} from '@lingui/macro'
import {useAccountEmailState} from '#/components/dialogs/EmailDialog/data/useAccountEmailState'
import {Disable} from '#/components/dialogs/EmailDialog/screens/Manage2FA/Disable'
import {Enable} from '#/components/dialogs/EmailDialog/screens/Manage2FA/Enable'
import {
ScreenID,
type ScreenProps,
} from '#/components/dialogs/EmailDialog/types'
export function Manage2FA({showScreen}: ScreenProps<ScreenID.Manage2FA>) {
const {isEmailVerified, email2FAEnabled} = useAccountEmailState()
const [requestedAction, setRequestedAction] = useState<
'enable' | 'disable' | null
>(null)
useEffect(() => {
if (!isEmailVerified) {
showScreen({
id: ScreenID.Verify,
instructions: [
<Trans key="2fa">
You need to verify your email address before you can enable email
2FA.
</Trans>,
],
onVerify: () => {
showScreen({
id: ScreenID.Manage2FA,
})
},
})
}
}, [isEmailVerified, showScreen])
/*
* Wacky state handling so that once 2FA settings change, we don't show the
* wrong step of this form - esb
*/
if (email2FAEnabled) {
if (!requestedAction) {
setRequestedAction('disable')
return <Disable />
}
if (requestedAction === 'disable') {
return <Disable />
}
if (requestedAction === 'enable') {
return <Enable />
}
} else {
if (!requestedAction) {
setRequestedAction('enable')
return <Enable />
}
if (requestedAction === 'disable') {
return <Disable />
}
if (requestedAction === 'enable') {
return <Enable />
}
}
// should never happen
return null
}
|
