add verification request to composer

src/components/dialogs/VerifyEmailDialog.tsx

@@ -18,8 +18,14 @@ import {Text} from '#/components/Typography'
 
 export function VerifyEmailDialog({
   control,
+  onCloseWithoutVerifying,
+  onCloseAfterVerifying,
+  reasonText,
 }: {
   control: Dialog.DialogControlProps
+  onCloseWithoutVerifying?: () => void
+  onCloseAfterVerifying?: () => void
+  reasonText?: string
 }) {
   const agent = useAgent()
 
@@ -30,18 +36,24 @@ export function VerifyEmailDialog({
       control={control}
       onClose={async () => {
         if (!didVerify) {
+          onCloseWithoutVerifying?.()
           return
         }
 
         try {
           await agent.resumeSession(agent.session!)
+          onCloseAfterVerifying?.()
         } catch (e: unknown) {
           logger.error(String(e))
           return
         }
       }}>
       <Dialog.Handle />
-      <Inner control={control} setDidVerify={setDidVerify} />
+      <Inner
+        control={control}
+        setDidVerify={setDidVerify}
+        reasonText={reasonText}
+      />
     </Dialog.Outer>
   )
 }
@@ -49,9 +61,11 @@ export function VerifyEmailDialog({
 export function Inner({
   control,
   setDidVerify,
+  reasonText,
 }: {
   control: Dialog.DialogControlProps
   setDidVerify: (value: boolean) => void
+  reasonText?: string
 }) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
@@ -135,26 +149,32 @@ export function Inner({
           <Text style={[a.text_md, a.leading_snug]}>
             {currentStep === 'StepOne' ? (
               <>
-                <Trans>
+                {!reasonText ? (
-                  You'll receive an email at{' '}
+                  <>
-                  <Text style={[a.text_md, a.leading_snug, a.font_bold]}>
+                    <Trans>
-                    {currentAccount?.email}
+                      You'll receive an email at{' '}
-                  </Text>{' '}
+                      <Text style={[a.text_md, a.leading_snug, a.font_bold]}>
-                  to verify it's you.
+                        {currentAccount?.email}
-                </Trans>{' '}
+                      </Text>{' '}
-                <InlineLinkText
+                      to verify it's you.
-                  to="#"
+                    </Trans>{' '}
-                  label={_(msg`Change email address`)}
+                    <InlineLinkText
-                  style={[a.text_md, a.leading_snug]}
+                      to="#"
-                  onPress={e => {
+                      label={_(msg`Change email address`)}
-                    e.preventDefault()
+                      style={[a.text_md, a.leading_snug]}
-                    control.close(() => {
+                      onPress={e => {
-                      openModal({name: 'change-email'})
+                        e.preventDefault()
-                    })
+                        control.close(() => {
-                    return false
+                          openModal({name: 'change-email'})
-                  }}>
+                        })
-                  <Trans>Need to change it?</Trans>
+                        return false
-                </InlineLinkText>
+                      }}>
+                      <Trans>Need to change it?</Trans>
+                    </InlineLinkText>
+                  </>
+                ) : (
+                  reasonText
+                )}
               </>
             ) : (
               uiStrings[currentStep].message

src/lib/hooks/useEmail.ts

@@ -0,0 +1,14 @@
+import {useSession} from '#/state/session'
+import {BSKY_SERVICE} from '../constants'
+import {getHostnameFromUrl} from '../strings/url-helpers'
+
+export function useEmail() {
+  const {currentAccount} = useSession()
+  const isSelfHost =
+    currentAccount &&
+    getHostnameFromUrl(currentAccount.service) !==
+      getHostnameFromUrl(BSKY_SERVICE)
+  const needsEmailVerification = !isSelfHost && !currentAccount?.emailConfirmed
+
+  return {needsEmailVerification}
+}

src/view/com/composer/Composer.tsx

@@ -58,6 +58,7 @@ import {EmbeddingDisabledError} from '#/lib/api/resolve'
 import {until} from '#/lib/async/until'
 import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
 import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
+import {useEmail} from '#/lib/hooks/useEmail'
 import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {usePalette} from '#/lib/hooks/usePalette'
@@ -110,6 +111,8 @@ import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
@@ -297,6 +300,15 @@ export const ComposePost = ({
     }
   }, [onPressCancel, closeAllDialogs, closeAllModals])
 
+  const {needsEmailVerification} = useEmail()
+  const emailVerificationControl = useDialogControl()
+
+  useEffect(() => {
+    if (needsEmailVerification) {
+      emailVerificationControl.open()
+    }
+  }, [needsEmailVerification, emailVerificationControl])
+
   const missingAltError = useMemo(() => {
     if (!requireAltTextEnabled) {
       return
@@ -570,6 +582,15 @@ export const ComposePost = ({
   const isWebFooterSticky = !isNative && thread.posts.length > 1
   return (
     <BottomSheetPortalProvider>
+      <VerifyEmailDialog
+        control={emailVerificationControl}
+        onCloseWithoutVerifying={() => {
+          onClose()
+        }}
+        reasonText={_(
+          msg`Before you may create a post, you must first verify your email.`,
+        )}
+      />
       <KeyboardAvoidingView
         testID="composePostView"
         behavior={isIOS ? 'padding' : 'height'}