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