forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useEffect, useState} from 'react'
2import {View} from 'react-native'
3import {msg} from '@lingui/core/macro'
4import {useLingui} from '@lingui/react'
5import {Trans} from '@lingui/react/macro'
6
7import {useAgent, useSession} from '#/state/session'
8import {pdsAgent} from '#/state/session/agent'
9import {atoms as a, useBreakpoints, useTheme} from '#/alf'
10import {Button, ButtonIcon, ButtonText} from '#/components/Button'
11import * as Dialog from '#/components/Dialog'
12import {type DialogControlProps} from '#/components/Dialog'
13import {useConfirmEmail} from '#/components/dialogs/EmailDialog/data/useConfirmEmail'
14import {Divider} from '#/components/Divider'
15import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Resend} from '#/components/icons/ArrowRotate'
16import {useIntentDialogs} from '#/components/intents/IntentDialogs'
17import {Loader} from '#/components/Loader'
18import {Text} from '#/components/Typography'
19import {IS_NATIVE} from '#/env'
20
21export function VerifyEmailIntentDialog() {
22 const {verifyEmailDialogControl: control} = useIntentDialogs()
23
24 return (
25 <Dialog.Outer control={control}>
26 <Dialog.Handle />
27 <Inner control={control} />
28 </Dialog.Outer>
29 )
30}
31
32function Inner({}: {control: DialogControlProps}) {
33 const t = useTheme()
34 const {gtMobile} = useBreakpoints()
35 const {_} = useLingui()
36 const {verifyEmailState: state} = useIntentDialogs()
37 const [status, setStatus] = useState<
38 'loading' | 'success' | 'failure' | 'resent'
39 >('loading')
40 const [sending, setSending] = useState(false)
41 const agent = useAgent()
42 const {currentAccount} = useSession()
43 const {mutate: confirmEmail} = useConfirmEmail({
44 onSuccess: () => setStatus('success'),
45 onError: () => setStatus('failure'),
46 })
47
48 useEffect(() => {
49 if (state?.code) {
50 confirmEmail({token: state.code})
51 }
52 }, [state?.code, confirmEmail])
53
54 const onPressResendEmail = async () => {
55 setSending(true)
56 await pdsAgent(agent).com.atproto.server.requestEmailConfirmation()
57 setSending(false)
58 setStatus('resent')
59 }
60
61 return (
62 <Dialog.ScrollableInner
63 label={_(msg`Verify email dialog`)}
64 style={[
65 gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
66 ]}>
67 <View style={[a.gap_xl]}>
68 {status === 'loading' ? (
69 <View style={[a.py_2xl, a.align_center, a.justify_center]}>
70 <Loader size="xl" fill={t.atoms.text_contrast_low.color} />
71 </View>
72 ) : status === 'success' ? (
73 <View style={[a.gap_sm, IS_NATIVE && a.pb_xl]}>
74 <Text style={[a.font_bold, a.text_2xl]}>
75 <Trans>Email Verified</Trans>
76 </Text>
77 <Text style={[a.text_md, a.leading_snug]}>
78 <Trans>
79 Thanks, you have successfully verified your email address. You
80 can close this dialog.
81 </Trans>
82 </Text>
83 </View>
84 ) : status === 'failure' ? (
85 <View style={[a.gap_sm]}>
86 <Text style={[a.font_bold, a.text_2xl]}>
87 <Trans>Invalid Verification Code</Trans>
88 </Text>
89 <Text style={[a.text_md, a.leading_snug]}>
90 <Trans>
91 The verification code you have provided is invalid. Please make
92 sure that you have used the correct verification link or request
93 a new one.
94 </Trans>
95 </Text>
96 </View>
97 ) : (
98 <View style={[a.gap_sm, IS_NATIVE && a.pb_xl]}>
99 <Text style={[a.font_bold, a.text_2xl]}>
100 <Trans>Email Resent</Trans>
101 </Text>
102 <Text style={[a.text_md, a.leading_snug]}>
103 <Trans>
104 We have sent another verification email to{' '}
105 <Text style={[a.text_md, a.font_semi_bold]}>
106 {currentAccount?.email}
107 </Text>
108 .
109 </Trans>
110 </Text>
111 </View>
112 )}
113
114 {status === 'failure' && (
115 <>
116 <Divider />
117 <Button
118 label={_(msg`Resend Verification Email`)}
119 onPress={onPressResendEmail}
120 color="secondary_inverted"
121 size="large"
122 disabled={sending}>
123 <ButtonIcon icon={sending ? Loader : Resend} />
124 <ButtonText>
125 <Trans>Resend Email</Trans>
126 </ButtonText>
127 </Button>
128 </>
129 )}
130 </View>
131
132 <Dialog.Close />
133 </Dialog.ScrollableInner>
134 )
135}