feat: intial animation working correctly

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<HTMLInputElement>) => {
+            if (!disabledOnBlur) {
+              updateInputValue(event);
+            }
+          }}
           onKeyDown={event => {
-            if (event.key === 'Enter' && props.onEnterPressed) {
-              props.onEnterPressed(inputValue);
+            if (event.key === 'Enter' && onEnterPressed) {
+              onEnterPressed(inputValue);
               setErrorString('');
             }
           }}

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 = () => {
 
         <Flex container={true} flexDirection="column" alignItems="center">
           <SpacerLG />
-          {step === Onboarding.Start ? <Start /> : null}
-          {step === Onboarding.CreateAccount ? <CreateAccount /> : null}
-          {step === Onboarding.RestoreAccount ? <RestoreAccount /> : null}
+          <OnboardContainer key={'onboarding-container'} animate={true} direction="right">
+            {step === Onboarding.Start ? <Start /> : null}
+            {step === Onboarding.CreateAccount ? <CreateAccount /> : null}
+            {step === Onboarding.RestoreAccount ? <RestoreAccount /> : null}
+          </OnboardContainer>
         </Flex>
       </StyledRegistrationContainer>
     </AnimatePresence>

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 (
-    <OnboardContainer
-      key={`onboarding-${Onboarding.CreateAccount}`}
-      animate={true}
-      direction="right"
+    <BackButtonWithininContainer
+      margin={'2px 0 0 -36px'}
+      callback={() => {
+        setDisplayNameError('');
+      }}
     >
-      <BackButtonWithininContainer
-        margin={'2px 0 0 -36px'}
-        callback={() => {
-          setDisplayNameError('');
-        }}
+      <Flex
+        container={true}
+        width="100%"
+        flexDirection="column"
+        alignItems="flex-start"
+        margin={'0 0 0 8px'}
       >
-        <Flex
-          container={true}
-          width="100%"
-          flexDirection="column"
-          alignItems="flex-start"
-          margin={'0 0 0 8px'}
-        >
-          <OnboardHeading>{window.i18n('displayNamePick')}</OnboardHeading>
-          <SpacerSM />
-          <OnboardDescription>{window.i18n('displayNameDescription')}</OnboardDescription>
-          <SpacerLG />
-          <SessionInput
-            autoFocus={true}
-            type="text"
-            placeholder={window.i18n('enterDisplayName')}
-            value={displayName}
-            onValueChanged={(name: string) => {
-              sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError);
-            }}
-            onEnterPressed={signUpWithDetails}
-            error={displayNameError}
-            inputDataTestId="display-name-input"
-          />
-          <SpacerLG />
-          <SessionButton
-            buttonColor={SessionButtonColor.White}
-            onClick={signUpWithDetails}
-            text={window.i18n('continue')}
-            disabled={!(!!displayName && !displayNameError)}
-          />
-        </Flex>
-      </BackButtonWithininContainer>
-    </OnboardContainer>
+        <OnboardHeading>{window.i18n('displayNamePick')}</OnboardHeading>
+        <SpacerSM />
+        <OnboardDescription>{window.i18n('displayNameDescription')}</OnboardDescription>
+        <SpacerLG />
+        <SessionInput
+          autoFocus={true}
+          type="text"
+          placeholder={window.i18n('enterDisplayName')}
+          value={displayName}
+          onValueChanged={(name: string) => {
+            sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError);
+          }}
+          onEnterPressed={signUpWithDetails}
+          error={displayNameError}
+          inputDataTestId="display-name-input"
+        />
+        <SpacerLG />
+        <SessionButton
+          buttonColor={SessionButtonColor.White}
+          onClick={signUpWithDetails}
+          text={window.i18n('continue')}
+          disabled={!(!!displayName && !displayNameError)}
+        />
+      </Flex>
+    </BackButtonWithininContainer>
   );
 };

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 (
-    <OnboardContainer
-      key={`onboarding-${Onboarding.RestoreAccount}`}
-      animate={true}
-      direction="right"
-    >
+    <>
       {step === AccountRestoration.RecoveryPassword || step === AccountRestoration.DisplayName ? (
         <BackButtonWithininContainer
           margin={'2px 0 0 -36px'}
@@ -216,6 +215,7 @@ export const RestoreAccount = () => {
                 <SpacerLG />
                 <SessionInput
                   autoFocus={true}
+                  disabledOnBlur={true}
                   type="password"
                   placeholder={window.i18n('enterRecoveryPhrase')}
                   value={recoveryPassword}
@@ -289,6 +289,6 @@ export const RestoreAccount = () => {
           />
         </Flex>
       )}
-    </OnboardContainer>
+    </>
   );
 };

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 (
-    <OnboardContainer key={`onboarding-${Onboarding.Start}`} animate={true} direction="left">
+    <>
       <SessionButton
         buttonColor={SessionButtonColor.White}
         onClick={() => {
@@ -37,6 +36,6 @@ export const Start = () => {
       />
       <SpacerLG />
       <TermsAndConditions />
-    </OnboardContainer>
+    </>
   );
 };