Hailey
140 lines
4.4 KiB
TypeScript
140 lines
4.4 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {msg, Trans} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {useAgent, useSession} from '#/state/session'
|
|
import {atoms as a} from '#/alf'
|
|
import {Button, ButtonText} from '#/components/Button'
|
|
import * as Dialog from '#/components/Dialog'
|
|
import {DialogControlProps} from '#/components/Dialog'
|
|
import {useIntentDialogs} from '#/components/intents/IntentDialogs'
|
|
import {Loader} from '#/components/Loader'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
export function VerifyEmailIntentDialog() {
|
|
const {verifyEmailDialogControl: control} = useIntentDialogs()
|
|
|
|
return (
|
|
<Dialog.Outer control={control}>
|
|
<Inner control={control} />
|
|
</Dialog.Outer>
|
|
)
|
|
}
|
|
|
|
function Inner({control}: {control: DialogControlProps}) {
|
|
const {_} = useLingui()
|
|
const {verifyEmailState: state} = useIntentDialogs()
|
|
const [status, setStatus] = React.useState<
|
|
'loading' | 'success' | 'failure' | 'resent'
|
|
>('loading')
|
|
const [sending, setSending] = React.useState(false)
|
|
const agent = useAgent()
|
|
const {currentAccount} = useSession()
|
|
|
|
React.useEffect(() => {
|
|
;(async () => {
|
|
if (!state?.code) {
|
|
return
|
|
}
|
|
try {
|
|
await agent.com.atproto.server.confirmEmail({
|
|
email: (currentAccount?.email || '').trim(),
|
|
token: state.code.trim(),
|
|
})
|
|
setStatus('success')
|
|
} catch (e) {
|
|
setStatus('failure')
|
|
}
|
|
})()
|
|
}, [agent.com.atproto.server, currentAccount?.email, state?.code])
|
|
|
|
const onPressResendEmail = async () => {
|
|
setSending(true)
|
|
await agent.com.atproto.server.requestEmailConfirmation()
|
|
setSending(false)
|
|
setStatus('resent')
|
|
}
|
|
|
|
return (
|
|
<Dialog.ScrollableInner label={_(msg`Verify email dialog`)}>
|
|
<Dialog.Close />
|
|
<View style={[a.gap_xl]}>
|
|
{status === 'loading' ? (
|
|
<View style={[a.py_2xl, a.align_center, a.justify_center]}>
|
|
<Loader size="xl" />
|
|
</View>
|
|
) : status === 'success' ? (
|
|
<>
|
|
<Text style={[a.font_bold, a.text_2xl]}>
|
|
<Trans>Email Verified</Trans>
|
|
</Text>
|
|
<Text style={[a.text_md, a.leading_tight]}>
|
|
<Trans>
|
|
Thanks, you have successfully verified your email address.
|
|
</Trans>
|
|
</Text>
|
|
</>
|
|
) : status === 'failure' ? (
|
|
<>
|
|
<Text style={[a.font_bold, a.text_2xl]}>
|
|
<Trans>Invalid Verification Code</Trans>
|
|
</Text>
|
|
<Text style={[a.text_md, a.leading_tight]}>
|
|
<Trans>
|
|
The verification code you have provided is invalid. Please make
|
|
sure that you have used the correct verification link or request
|
|
a new one.
|
|
</Trans>
|
|
</Text>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Text style={[a.font_bold, a.text_2xl]}>
|
|
<Trans>Email Resent</Trans>
|
|
</Text>
|
|
<Text style={[a.text_md, a.leading_tight]}>
|
|
<Trans>
|
|
We have sent another verification email to{' '}
|
|
<Text style={[a.text_md, a.font_bold]}>
|
|
{currentAccount?.email}
|
|
</Text>
|
|
.
|
|
</Trans>
|
|
</Text>
|
|
</>
|
|
)}
|
|
{status !== 'loading' ? (
|
|
<View style={[a.w_full, a.flex_row, a.gap_sm, {marginLeft: 'auto'}]}>
|
|
<Button
|
|
label={_(msg`Close`)}
|
|
onPress={() => control.close()}
|
|
variant="solid"
|
|
color={status === 'failure' ? 'secondary' : 'primary'}
|
|
size="large"
|
|
style={{marginLeft: 'auto'}}>
|
|
<ButtonText>
|
|
<Trans>Close</Trans>
|
|
</ButtonText>
|
|
</Button>
|
|
{status === 'failure' ? (
|
|
<Button
|
|
label={_(msg`Resend Verification Email`)}
|
|
onPress={onPressResendEmail}
|
|
variant="solid"
|
|
color="primary"
|
|
size="large"
|
|
disabled={sending}>
|
|
<ButtonText>
|
|
<Trans>Resend Email</Trans>
|
|
</ButtonText>
|
|
{sending ? <Loader size="sm" style={{color: 'white'}} /> : null}
|
|
</Button>
|
|
) : null}
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
</Dialog.ScrollableInner>
|
|
)
|
|
}
|