diff --git a/src/components/dialogs/VerifyEmailDialog.tsx b/src/components/dialogs/VerifyEmailDialog.tsx
new file mode 100644
index 0000000000..8dfb9bc490
--- /dev/null
+++ b/src/components/dialogs/VerifyEmailDialog.tsx
@@ -0,0 +1,254 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {cleanError} from '#/lib/strings/errors'
+import {logger} from '#/logger'
+import {useModalControls} from '#/state/modals'
+import {useAgent, useSession} from '#/state/session'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {atoms as a, useBreakpoints} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import * as TextField from '#/components/forms/TextField'
+import {InlineLinkText} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+export function VerifyEmailDialog({
+ control,
+}: {
+ control: Dialog.DialogControlProps
+}) {
+ const agent = useAgent()
+
+ const [didVerify, setDidVerify] = React.useState(false)
+
+ return (
+ {
+ if (!didVerify) {
+ return
+ }
+
+ try {
+ await agent.resumeSession(agent.session!)
+ } catch (e: unknown) {
+ logger.error(String(e))
+ return
+ }
+ }}>
+
+
+
+ )
+}
+
+export function Inner({
+ control,
+ setDidVerify,
+}: {
+ control: Dialog.DialogControlProps
+ setDidVerify: (value: boolean) => void
+}) {
+ const {_} = useLingui()
+ const {currentAccount} = useSession()
+ const agent = useAgent()
+ const {openModal} = useModalControls()
+ const {gtMobile} = useBreakpoints()
+
+ const [currentStep, setCurrentStep] = React.useState<
+ 'StepOne' | 'StepTwo' | 'StepThree'
+ >('StepOne')
+ const [confirmationCode, setConfirmationCode] = React.useState('')
+ const [isProcessing, setIsProcessing] = React.useState(false)
+ const [error, setError] = React.useState('')
+
+ const uiStrings = {
+ StepOne: {
+ title: _(msg`Verify Your Email`),
+ message: '',
+ },
+ StepTwo: {
+ title: _(msg`Enter Code`),
+ message: _(
+ msg`An email has been sent! Please enter the confirmation code included in the email below.`,
+ ),
+ },
+ StepThree: {
+ title: _(msg`Success!`),
+ message: _(msg`Thank you! Your email has been successfully verified.`),
+ },
+ }
+
+ const onSendEmail = async () => {
+ setError('')
+ setIsProcessing(true)
+ try {
+ await agent.com.atproto.server.requestEmailConfirmation()
+ setCurrentStep('StepTwo')
+ } catch (e: unknown) {
+ setError(cleanError(e))
+ } finally {
+ setIsProcessing(false)
+ }
+ }
+
+ const onVerifyEmail = async () => {
+ setError('')
+ setIsProcessing(true)
+ try {
+ await agent.com.atproto.server.confirmEmail({
+ email: (currentAccount?.email || '').trim(),
+ token: confirmationCode.trim(),
+ })
+ } catch (e: unknown) {
+ setError(cleanError(String(e)))
+ setIsProcessing(false)
+ return
+ }
+
+ setIsProcessing(false)
+ setDidVerify(true)
+ setCurrentStep('StepThree')
+ }
+
+ return (
+
+
+
+
+
+ {uiStrings[currentStep].title}
+
+ {error ? (
+
+
+
+ ) : null}
+
+ {currentStep === 'StepOne' ? (
+ <>
+
+ You'll receive an email at{' '}
+
+ {currentAccount?.email}
+ {' '}
+ to verify it's you.
+ {' '}
+ {
+ e.preventDefault()
+ control.close(() => {
+ openModal({name: 'change-email'})
+ })
+ return false
+ }}>
+ Need to change it?
+
+ >
+ ) : (
+ uiStrings[currentStep].message
+ )}
+
+
+ {currentStep === 'StepTwo' ? (
+
+
+ Confirmation Code
+
+
+
+
+
+ ) : null}
+
+ {currentStep === 'StepOne' ? (
+ <>
+
+
+ >
+ ) : currentStep === 'StepTwo' ? (
+ <>
+
+
+ >
+ ) : currentStep === 'StepThree' ? (
+
+ ) : null}
+
+
+
+ )
+}
diff --git a/src/view/com/composer/videos/SelectVideoBtn.tsx b/src/view/com/composer/videos/SelectVideoBtn.tsx
index bbb3d95f2b..2ba003a6dd 100644
--- a/src/view/com/composer/videos/SelectVideoBtn.tsx
+++ b/src/view/com/composer/videos/SelectVideoBtn.tsx
@@ -15,10 +15,11 @@ import {useVideoLibraryPermission} from '#/lib/hooks/usePermissions'
import {getHostnameFromUrl} from '#/lib/strings/url-helpers'
import {isWeb} from '#/platform/detection'
import {isNative} from '#/platform/detection'
-import {useModalControls} from '#/state/modals'
import {useSession} from '#/state/session'
import {atoms as a, useTheme} from '#/alf'
import {Button} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
import {VideoClip_Stroke2_Corner0_Rounded as VideoClipIcon} from '#/components/icons/VideoClip'
import * as Prompt from '#/components/Prompt'
@@ -121,26 +122,24 @@ export function SelectVideoBtn({onSelectVideo, disabled, setError}: Props) {
function VerifyEmailPrompt({control}: {control: Prompt.PromptControlProps}) {
const {_} = useLingui()
- const {openModal} = useModalControls()
+ const verifyEmailDialogControl = useDialogControl()
return (
- {
- control.close(() => {
- openModal({
- name: 'verify-email',
- showReminder: false,
- })
- })
- }}
- />
+ <>
+ {
+ verifyEmailDialogControl.open()
+ }}
+ />
+
+ >
)
}
diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx
index a2b7670979..a40cc4f26a 100644
--- a/src/view/screens/Settings/index.tsx
+++ b/src/view/screens/Settings/index.tsx
@@ -56,6 +56,7 @@ import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateA
import {atoms as a, useTheme} from '#/alf'
import {useDialogControl} from '#/components/Dialog'
import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
+import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
import {Email2FAToggle} from './Email2FAToggle'
import {ExportCarDialog} from './ExportCarDialog'
@@ -927,7 +928,7 @@ function EmailConfirmationNotice() {
const palInverted = usePalette('inverted')
const {_} = useLingui()
const {isMobile} = useWebMediaQueries()
- const {openModal} = useModalControls()
+ const verifyEmailDialogControl = useDialogControl()
return (
@@ -959,7 +960,7 @@ function EmailConfirmationNotice() {
accessibilityRole="button"
accessibilityLabel={_(msg`Verify my email`)}
accessibilityHint={_(msg`Opens modal for email verification`)}
- onPress={() => openModal({name: 'verify-email'})}>
+ onPress={() => verifyEmailDialogControl.open()}>
Protect your account by verifying your email.
+
)
}