From 0f96669f8c0d578d888c06496d97929130d34a1f Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 7 May 2025 10:23:33 -0500 Subject: [APP-1158] Refactor email-related dialogs (#8296) * WIP * Update email * Fire off confirmation email after change * Verify step, integrate stateful control * Remove tentative EnterCode step * Handle token step * Handle instructions and integrate into 2FA setting * Fix load state when reusing same email * Add new state * Add 2FA screens * Clean up state in Update step * Clean up verify state, handle normal callback * Normalize convetions * Add verification reminder screen * Improve session refresh * Handle verification requirements for composer and convo * Fix lint * Do better * Couple missing translations * Format * Use listeners for easier to grok logic * Clean errors * Move to global context * [APP-1158] Gate features by email verification state (#8305) * Use new hook in all locations * Format * Seems to work, not great duplication * Wrap all open composer calls * Remove unneeded spans * Missed one * Fix handler on Conversation * Gate new chat in header * Add comment * Remove whoopsie * Format * add hackfix for dialog not showing * add prompt to accept chat btn * navigation not necessary * send back one screen, rather than home * Update comment --------- Co-authored-by: Samuel Newman * Clear dialog state Co-authored-by: Samuel Newman * Update icon * Check color * Add 2FA warning * Update instructions * Fix X button * Use an effect silly goose * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update src/components/dialaUpdate copyogs/EmailDialog/screens/Update.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy * Update copy * Update copy * Update copy * Update copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update copy * Add link back to update email from verify email dialog * Handle token field validation --------- Co-authored-by: Samuel Newman Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> --- .../dialogs/EmailDialog/screens/Verify.tsx | 386 +++++++++++++++++++++ 1 file changed, 386 insertions(+) create mode 100644 src/components/dialogs/EmailDialog/screens/Verify.tsx (limited to 'src/components/dialogs/EmailDialog/screens/Verify.tsx') diff --git a/src/components/dialogs/EmailDialog/screens/Verify.tsx b/src/components/dialogs/EmailDialog/screens/Verify.tsx new file mode 100644 index 000000000..dabd0d2f2 --- /dev/null +++ b/src/components/dialogs/EmailDialog/screens/Verify.tsx @@ -0,0 +1,386 @@ +import {useReducer} from 'react' +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {wait} from '#/lib/async/wait' +import {useCleanError} from '#/lib/hooks/useCleanError' +import {logger} from '#/logger' +import {useSession} from '#/state/session' +import {atoms as a, useTheme} from '#/alf' +import {Admonition} from '#/components/Admonition' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {ResendEmailText} from '#/components/dialogs/EmailDialog/components/ResendEmailText' +import { + isValidCode, + TokenField, +} from '#/components/dialogs/EmailDialog/components/TokenField' +import {useConfirmEmail} from '#/components/dialogs/EmailDialog/data/useConfirmEmail' +import {useRequestEmailVerification} from '#/components/dialogs/EmailDialog/data/useRequestEmailVerification' +import {useOnEmailVerified} from '#/components/dialogs/EmailDialog/events' +import { + ScreenID, + type ScreenProps, +} from '#/components/dialogs/EmailDialog/types' +import {Divider} from '#/components/Divider' +import {CheckThick_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' +import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' +import {createStaticClick, InlineLinkText} from '#/components/Link' +import {Loader} from '#/components/Loader' +import {Span, Text} from '#/components/Typography' + +type State = { + step: 'email' | 'token' | 'success' + mutationStatus: 'pending' | 'success' | 'error' | 'default' + error: string + token: string +} + +type Action = + | { + type: 'setStep' + step: State['step'] + } + | { + type: 'setError' + error: string + } + | { + type: 'setMutationStatus' + status: State['mutationStatus'] + } + | { + type: 'setToken' + value: string + } + +function reducer(state: State, action: Action): State { + switch (action.type) { + case 'setStep': { + return { + ...state, + error: '', + mutationStatus: 'default', + step: action.step, + } + } + case 'setError': { + return { + ...state, + error: action.error, + mutationStatus: 'error', + } + } + case 'setMutationStatus': { + return { + ...state, + error: '', + mutationStatus: action.status, + } + } + case 'setToken': { + return { + ...state, + error: '', + token: action.value, + } + } + } +} + +export function Verify({config, showScreen}: ScreenProps) { + const t = useTheme() + const {_} = useLingui() + const cleanError = useCleanError() + const {currentAccount} = useSession() + const [state, dispatch] = useReducer(reducer, { + step: 'email', + mutationStatus: 'default', + error: '', + token: '', + }) + + const {mutateAsync: requestEmailVerification} = useRequestEmailVerification() + const {mutateAsync: confirmEmail} = useConfirmEmail() + + useOnEmailVerified(() => { + if (config.onVerify) { + config.onVerify() + } else { + dispatch({ + type: 'setStep', + step: 'success', + }) + } + }) + + const handleRequestEmailVerification = async () => { + dispatch({ + type: 'setMutationStatus', + status: 'pending', + }) + + try { + await wait(1000, requestEmailVerification()) + dispatch({ + type: 'setMutationStatus', + status: 'success', + }) + } catch (e) { + logger.error('EmailDialog: sending verification email failed', { + safeMessage: e, + }) + const {clean} = cleanError(e) + dispatch({ + type: 'setError', + error: clean || _(msg`Failed to send email, please try again.`), + }) + } + } + + const handleConfirmEmail = async () => { + if (!isValidCode(state.token)) { + dispatch({ + type: 'setError', + error: _(msg`Please enter a valid code.`), + }) + return + } + + dispatch({ + type: 'setMutationStatus', + status: 'pending', + }) + + try { + await wait(1000, confirmEmail({token: state.token})) + dispatch({ + type: 'setStep', + step: 'success', + }) + } catch (e) { + logger.error('EmailDialog: confirming email failed', { + safeMessage: e, + }) + const {clean} = cleanError(e) + dispatch({ + type: 'setError', + error: clean || _(msg`Failed to verify email, please try again.`), + }) + } + } + + if (state.step === 'success') { + return ( + + + + + + + {' '} + Email verification complete! + + + + + You have successfully verified your email address. You can close + this dialog. + + + + + ) + } + + return ( + + + + {state.step === 'email' ? ( + state.mutationStatus === 'success' ? ( + <> + + + + {' '} + Email sent! + + ) : ( + Verify your email + ) + ) : ( + Verify email code + )} + + + {state.step === 'email' && state.mutationStatus !== 'success' && ( + <> + {config.instructions?.map((int, i) => ( + + {int} + + ))} + + )} + + + {state.step === 'email' ? ( + state.mutationStatus === 'success' ? ( + + We sent an email to{' '} + + {currentAccount!.email} + {' '} + containing a link. Please click on it to complete the email + verification process. + + ) : ( + + We'll send an email to{' '} + + {currentAccount!.email} + {' '} + containing a link. Please click on it to complete the email + verification process. + + ) + ) : ( + + Please enter the code we sent to{' '} + + {currentAccount!.email} + {' '} + below. + + )} + + + {state.step === 'email' && state.mutationStatus !== 'success' && ( + + + If you need to update your email,{' '} + { + showScreen({id: ScreenID.Update}) + })}> + click here + + . + + + )} + + {state.step === 'email' && state.mutationStatus === 'success' && ( + + )} + + + {state.step === 'email' && state.mutationStatus !== 'success' ? ( + <> + {state.error && {state.error}} + + + ) : null} + + {state.step === 'email' && ( + <> + + + + + Have a code?{' '} + { + dispatch({ + type: 'setStep', + step: 'token', + }) + })}> + Click here. + + + + + )} + + {state.step === 'token' ? ( + <> + { + dispatch({ + type: 'setToken', + value: token, + }) + }} + onSubmitEditing={handleConfirmEmail} + /> + + {state.error && {state.error}} + + + + + + + + Don't have a code or need a new one?{' '} + { + dispatch({ + type: 'setStep', + step: 'email', + }) + })}> + Click here. + + + + + ) : null} + + ) +} -- cgit 1.4.1