diff --git a/ts/components/inputs/SessionInput.tsx b/ts/components/inputs/SessionInput.tsx index 0e15458ed..09cacf9e3 100644 --- a/ts/components/inputs/SessionInput.tsx +++ b/ts/components/inputs/SessionInput.tsx @@ -118,6 +118,7 @@ type Props = { onValueChanged?: (value: string) => any; onEnterPressed?: (value: string) => any; autoFocus?: boolean; + disabledOnBlur?: boolean; ref?: any; inputDataTestId?: string; id?: string; @@ -126,7 +127,6 @@ type Props = { export const SessionInput = (props: Props) => { const { - autoFocus, placeholder, type = 'text', value, @@ -134,6 +134,9 @@ export const SessionInput = (props: Props) => { enableShowHide, error, onValueChanged, + onEnterPressed, + autoFocus, + disabledOnBlur, inputDataTestId, id = 'session-input-floating-label', ctaButton, @@ -180,10 +183,14 @@ export const SessionInput = (props: Props) => { onChange={updateInputValue} style={{ paddingInlineEnd: enableShowHide ? '40px' : undefined }} // just in case onChange isn't triggered - onBlur={updateInputValue} + onBlur={(event: ChangeEvent) => { + if (!disabledOnBlur) { + updateInputValue(event); + } + }} onKeyDown={event => { - if (event.key === 'Enter' && props.onEnterPressed) { - props.onEnterPressed(inputValue); + if (event.key === 'Enter' && onEnterPressed) { + onEnterPressed(inputValue); setErrorString(''); } }} diff --git a/ts/components/registration/RegistrationStages.tsx b/ts/components/registration/RegistrationStages.tsx index 86abfe673..c8793cbc7 100644 --- a/ts/components/registration/RegistrationStages.tsx +++ b/ts/components/registration/RegistrationStages.tsx @@ -22,6 +22,7 @@ import { Storage } from '../../util/storage'; import { Flex } from '../basic/Flex'; import { SpacerLG, SpacerSM } from '../basic/Text'; import { SessionIcon, SessionIconButton } from '../icon'; +import { OnboardContainer } from './components'; import { CreateAccount, RestoreAccount, Start } from './stages'; export async function resetRegistration() { @@ -116,9 +117,11 @@ export const RegistrationStages = () => { - {step === Onboarding.Start ? : null} - {step === Onboarding.CreateAccount ? : null} - {step === Onboarding.RestoreAccount ? : null} + + {step === Onboarding.Start ? : null} + {step === Onboarding.CreateAccount ? : null} + {step === Onboarding.RestoreAccount ? : null} + diff --git a/ts/components/registration/stages/CreateAccount.tsx b/ts/components/registration/stages/CreateAccount.tsx index 3e704a5f2..e5629f1f7 100644 --- a/ts/components/registration/stages/CreateAccount.tsx +++ b/ts/components/registration/stages/CreateAccount.tsx @@ -4,7 +4,6 @@ import { SettingsKey } from '../../../data/settings-key'; import { trigger } from '../../../shims/events'; import { AccountCreation, - Onboarding, setAccountCreationStep, } from '../../../state/onboarding/ducks/registration'; import { @@ -19,7 +18,7 @@ import { SessionButton, SessionButtonColor } from '../../basic/SessionButton'; import { SpacerLG, SpacerSM } from '../../basic/Text'; import { SessionInput } from '../../inputs'; import { RecoverDetails, resetRegistration } from '../RegistrationStages'; -import { OnboardContainer, OnboardDescription, OnboardHeading } from '../components'; +import { OnboardDescription, OnboardHeading } from '../components'; import { BackButtonWithininContainer } from '../components/BackButton'; import { displayNameIsValid, sanitizeDisplayNameOrToast } from '../utils'; @@ -83,49 +82,43 @@ export const CreateAccount = () => { }; return ( - { + setDisplayNameError(''); + }} > - { - setDisplayNameError(''); - }} + - - {window.i18n('displayNamePick')} - - {window.i18n('displayNameDescription')} - - { - sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError); - }} - onEnterPressed={signUpWithDetails} - error={displayNameError} - inputDataTestId="display-name-input" - /> - - - - - + {window.i18n('displayNamePick')} + + {window.i18n('displayNameDescription')} + + { + sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError); + }} + onEnterPressed={signUpWithDetails} + error={displayNameError} + inputDataTestId="display-name-input" + /> + + + + ); }; diff --git a/ts/components/registration/stages/RestoreAccount.tsx b/ts/components/registration/stages/RestoreAccount.tsx index c6808a4d6..96a464632 100644 --- a/ts/components/registration/stages/RestoreAccount.tsx +++ b/ts/components/registration/stages/RestoreAccount.tsx @@ -3,11 +3,11 @@ import { useDispatch } from 'react-redux'; import { getSwarmPollingInstance } from '../../../session/apis/snode_api'; import { ONBOARDING_TIMES } from '../../../session/constants'; import { InvalidWordsError, NotEnoughWordsError } from '../../../session/crypto/mnemonic'; -import { PromiseUtils } from '../../../session/utils'; +import { PromiseUtils, ToastUtils } from '../../../session/utils'; +import { TaskTimedOutError } from '../../../session/utils/Promise'; import { NotFoundError } from '../../../session/utils/errors'; import { AccountRestoration, - Onboarding, setAccountRestorationStep, } from '../../../state/onboarding/ducks/registration'; import { useOnboardAccountRestorationStep } from '../../../state/onboarding/selectors/registration'; @@ -20,7 +20,7 @@ import { SessionIcon } from '../../icon'; import { SessionInput } from '../../inputs'; import { SessionProgressBar } from '../../loading'; import { RecoverDetails, resetRegistration } from '../RegistrationStages'; -import { OnboardContainer, OnboardDescription, OnboardHeading } from '../components'; +import { OnboardDescription, OnboardHeading } from '../components'; import { BackButtonWithininContainer } from '../components/BackButton'; import { useRecoveryProgressEffect } from '../hooks'; import { displayNameIsValid, sanitizeDisplayNameOrToast } from '../utils'; @@ -143,6 +143,9 @@ export const RestoreAccount = () => { setRecoveryPasswordError(window.i18n('recoveryPasswordErrorMessageShort')); } else if (e instanceof InvalidWordsError) { setRecoveryPasswordError(window.i18n('recoveryPasswordErrorMessageIncorrect')); + } else if (e instanceof TaskTimedOutError) { + setRecoveryPasswordError(window.i18n('recoveryPasswordErrorMessageGeneric')); + ToastUtils.pushToastError('toolong', e.message || String(e)); } else { setRecoveryPasswordError(window.i18n('recoveryPasswordErrorMessageGeneric')); } @@ -178,11 +181,7 @@ export const RestoreAccount = () => { }; return ( - + <> {step === AccountRestoration.RecoveryPassword || step === AccountRestoration.DisplayName ? ( { { /> )} - + ); }; diff --git a/ts/components/registration/stages/Start.tsx b/ts/components/registration/stages/Start.tsx index a4d61a7ab..11ed404d8 100644 --- a/ts/components/registration/stages/Start.tsx +++ b/ts/components/registration/stages/Start.tsx @@ -10,13 +10,12 @@ import { import { SessionButton, SessionButtonColor } from '../../basic/SessionButton'; import { SpacerLG } from '../../basic/Text'; import { TermsAndConditions } from '../TermsAndConditions'; -import { OnboardContainer } from '../components'; export const Start = () => { const dispatch = useDispatch(); return ( - + <> { @@ -37,6 +36,6 @@ export const Start = () => { /> - + ); };