diff --git a/src/components/dialogs/VerifyEmailDialog.tsx b/src/components/dialogs/VerifyEmailDialog.tsx
index 1e01a8e3c5..3766f06773 100644
--- a/src/components/dialogs/VerifyEmailDialog.tsx
+++ b/src/components/dialogs/VerifyEmailDialog.tsx
@@ -14,6 +14,7 @@ import * as TextField from '#/components/forms/TextField'
import {InlineLinkText} from '#/components/Link'
import {Loader} from '#/components/Loader'
import {Text} from '#/components/Typography'
+import {ChangeEmailDialog} from './ChangeEmailDialog'
export function VerifyEmailDialog({
control,
@@ -26,36 +27,50 @@ export function VerifyEmailDialog({
onCloseWithoutVerifying?: () => void
onCloseAfterVerifying?: () => void
reasonText?: string
- changeEmailControl: Dialog.DialogControlProps
+ /**
+ * if a changeEmailControl for a ChangeEmailDialog is not provided,
+ * this component will create one for you. Using this prop
+ * helps reduce duplication, since these dialogs are often used together.
+ */
+ changeEmailControl?: Dialog.DialogControlProps
}) {
const agent = useAgent()
+ const fallbackChangeEmailControl = Dialog.useDialogControl()
const [didVerify, setDidVerify] = React.useState(false)
return (
- {
- if (!didVerify) {
- onCloseWithoutVerifying?.()
- return
- }
+ <>
+ {
+ if (!didVerify) {
+ onCloseWithoutVerifying?.()
+ return
+ }
- try {
- await agent.resumeSession(agent.session!)
- onCloseAfterVerifying?.()
- } catch (e: unknown) {
- logger.error(String(e))
- return
- }
- }}>
-
-
-
+ try {
+ await agent.resumeSession(agent.session!)
+ onCloseAfterVerifying?.()
+ } catch (e: unknown) {
+ logger.error(String(e))
+ return
+ }
+ }}>
+
+
+
+ {!changeEmailControl && (
+
+ )}
+ >
)
}