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