From eff53a956cfbf3e75b45d8d5c3bdfe736abcb9ca Mon Sep 17 00:00:00 2001 From: William Grant Date: Fri, 23 Feb 2024 17:12:03 +1100 Subject: [PATCH] feat: renamed stages components to match redux slices setup stage, trying to fix back button position, moved out start logic from stages --- stylesheets/_session_signin.scss | 2 +- .../registration/RegistrationStages.tsx | 25 +++-- .../registration/SessionRegistrationView.tsx | 2 + .../SignUpTab.tsx => CreatAccount.tsx} | 50 ++++------ .../SignInTab.tsx => RestoreAccount.tsx} | 93 +++---------------- ts/components/registration/stages/Start.tsx | 51 ++++++++++ ts/components/registration/stages/index.tsx | 7 +- 7 files changed, 106 insertions(+), 124 deletions(-) rename ts/components/registration/stages/{create/SignUpTab.tsx => CreatAccount.tsx} (68%) rename ts/components/registration/stages/{restore/SignInTab.tsx => RestoreAccount.tsx} (61%) create mode 100644 ts/components/registration/stages/Start.tsx diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 8bc530c4f..492194a21 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -9,7 +9,7 @@ color: var(--text-primary-color); font-weight: bold; - padding: 20px; + padding: 0 20px 20px; } &__welcome-session { diff --git a/ts/components/registration/RegistrationStages.tsx b/ts/components/registration/RegistrationStages.tsx index 07988d3f2..251e08788 100644 --- a/ts/components/registration/RegistrationStages.tsx +++ b/ts/components/registration/RegistrationStages.tsx @@ -28,10 +28,10 @@ import { } from '../../util/accountManager'; import { Storage, setSignInByLinking, setSignWithRecoveryPhrase } from '../../util/storage'; import { Flex } from '../basic/Flex'; -import { SpacerSM } from '../basic/Text'; +import { SpacerLG, SpacerSM } from '../basic/Text'; import { SessionIcon, SessionIconButton } from '../icon'; -import { ModalContainer } from './ModalContainer'; -import { SignInTab, SignUpTab } from './stages'; +import { BackButton } from './components'; +import { CreateAccount, RestoreAccount, Start } from './stages'; const StyledRegistrationContainer = styled(Flex)` width: 348px; @@ -207,8 +207,12 @@ export const RegistrationStages = () => { }); return ( - <> - + + {step === Onboarding.Start ? null : ( +
+ +
+ )} @@ -242,9 +246,14 @@ export const RegistrationStages = () => { /> - {(step === Onboarding.Start || step === Onboarding.CreateAccount) && } - {(step === Onboarding.Start || step === Onboarding.RestoreAccount) && } + + + + {step === Onboarding.Start ? : null} + {step === Onboarding.CreateAccount ? : null} + {step === Onboarding.RestoreAccount ? : null} + - + ); }; diff --git a/ts/components/registration/SessionRegistrationView.tsx b/ts/components/registration/SessionRegistrationView.tsx index 6124c7824..f29edc2a4 100644 --- a/ts/components/registration/SessionRegistrationView.tsx +++ b/ts/components/registration/SessionRegistrationView.tsx @@ -7,6 +7,7 @@ import { SessionTheme } from '../../themes/SessionTheme'; import { setSignInByLinking } from '../../util/storage'; import { SessionToastContainer } from '../SessionToastContainer'; import { Flex } from '../basic/Flex'; +import { ModalContainer } from './ModalContainer'; import { RegistrationStages } from './RegistrationStages'; import { Hero } from './components'; @@ -73,6 +74,7 @@ export const SessionRegistrationView = () => { > + diff --git a/ts/components/registration/stages/create/SignUpTab.tsx b/ts/components/registration/stages/CreatAccount.tsx similarity index 68% rename from ts/components/registration/stages/create/SignUpTab.tsx rename to ts/components/registration/stages/CreatAccount.tsx index 7b94547ba..706d1b1cc 100644 --- a/ts/components/registration/stages/create/SignUpTab.tsx +++ b/ts/components/registration/stages/CreatAccount.tsx @@ -3,30 +3,27 @@ import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { AccountCreation, - Onboarding, setAccountCreationStep, - setOnboardingStep, -} from '../../../../state/onboarding/ducks/registration'; +} from '../../../state/onboarding/ducks/registration'; import { useOnboardAccountCreationStep, useOnboardGeneratedRecoveryPhrase, useOnboardHexGeneratedPubKey, -} from '../../../../state/onboarding/selectors/registration'; -import { Flex } from '../../../basic/Flex'; -import { SessionButton } from '../../../basic/SessionButton'; -import { SessionIdEditable } from '../../../basic/SessionIdEditable'; -import { signUp } from '../../RegistrationStages'; -import { RegistrationUserDetails } from '../../RegistrationUserDetails'; -import { TermsAndConditions } from '../../TermsAndConditions'; -import { BackButton } from '../../components'; -import { sanitizeDisplayNameOrToast } from '../restore/SignInTab'; +} from '../../../state/onboarding/selectors/registration'; +import { Flex } from '../../basic/Flex'; +import { SessionButton } from '../../basic/SessionButton'; +import { SessionIdEditable } from '../../basic/SessionIdEditable'; +import { signUp } from '../RegistrationStages'; +import { RegistrationUserDetails } from '../RegistrationUserDetails'; +import { TermsAndConditions } from '../TermsAndConditions'; +import { sanitizeDisplayNameOrToast } from './RestoreAccount'; const StyledContainer = styled.div` width: 100%; padding-top: 20px; `; -export const SignUpTab = () => { +export const CreateAccount = () => { const step = useOnboardAccountCreationStep(); const generatedRecoveryPhrase = useOnboardGeneratedRecoveryPhrase(); const hexGeneratedPubKey = useOnboardHexGeneratedPubKey(); @@ -42,25 +39,16 @@ export const SignUpTab = () => { } }, [step, hexGeneratedPubKey]); - if (step === AccountCreation.Start) { - return ( -
- { - dispatch(setAccountCreationStep(AccountCreation.SessionIDShown)); - dispatch(setOnboardingStep(Onboarding.CreateAccount)); - }} - text={window.i18n('createSessionID')} - /> -
- ); - } - if (step === AccountCreation.SessionIDShown) { return ( -
- - +
+ + {/* */}
{window.i18n('yourUniqueSessionID')} @@ -99,7 +87,6 @@ export const SignUpTab = () => { return ( - {window.i18n('welcomeToYourSession')} @@ -119,7 +106,6 @@ export const SignUpTab = () => { text={window.i18n('getStarted')} disabled={!enableCompleteSignUp} /> - ); }; diff --git a/ts/components/registration/stages/restore/SignInTab.tsx b/ts/components/registration/stages/RestoreAccount.tsx similarity index 61% rename from ts/components/registration/stages/restore/SignInTab.tsx rename to ts/components/registration/stages/RestoreAccount.tsx index c9b3eaa04..50b61749c 100644 --- a/ts/components/registration/stages/restore/SignInTab.tsx +++ b/ts/components/registration/stages/RestoreAccount.tsx @@ -1,42 +1,14 @@ import { useState } from 'react'; -import { useDispatch } from 'react-redux'; -import { ToastUtils } from '../../../../session/utils'; -import { sanitizeSessionUsername } from '../../../../session/utils/String'; -import { - AccountRestoration, - Onboarding, - setAccountRestorationStep, - setOnboardingStep, -} from '../../../../state/onboarding/ducks/registration'; -import { useOnboardAccountRestorationStep } from '../../../../state/onboarding/selectors/registration'; -import { Flex } from '../../../basic/Flex'; -import { SessionButton } from '../../../basic/SessionButton'; -import { SpacerLG } from '../../../basic/Text'; -import { SessionSpinner } from '../../../loading'; -import { signInWithLinking, signInWithRecovery } from '../../RegistrationStages'; -import { RegistrationUserDetails } from '../../RegistrationUserDetails'; -import { TermsAndConditions } from '../../TermsAndConditions'; -import { BackButton } from '../../components'; - -const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => { - return ( - - ); -}; - -const RestoreUsingRecoveryPhraseButton = (props: { onRecoveryButtonClicked: () => any }) => { - return ( - - ); -}; +import { ToastUtils } from '../../../session/utils'; +import { sanitizeSessionUsername } from '../../../session/utils/String'; +import { AccountRestoration } from '../../../state/onboarding/ducks/registration'; +import { useOnboardAccountRestorationStep } from '../../../state/onboarding/selectors/registration'; +import { Flex } from '../../basic/Flex'; +import { SessionButton } from '../../basic/SessionButton'; +import { SessionSpinner } from '../../loading'; +import { signInWithLinking, signInWithRecovery } from '../RegistrationStages'; +import { RegistrationUserDetails } from '../RegistrationUserDetails'; +import { TermsAndConditions } from '../TermsAndConditions'; const ContinueYourSessionButton = (props: { handleContinueYourSessionClick: () => any; @@ -68,23 +40,6 @@ const SignInContinueButton = (props: { ); }; -const SignInButtons = (props: { - accountRestorationStep: AccountRestoration; - onRecoveryButtonClicked: () => any; - onLinkDeviceButtonClicked: () => any; -}) => { - if (props.accountRestorationStep !== AccountRestoration.Start) { - return null; - } - return ( -
- - - -
- ); -}; - export function sanitizeDisplayNameOrToast( displayName: string, setDisplayName: (sanitized: string) => void, @@ -102,11 +57,9 @@ export function sanitizeDisplayNameOrToast( } } -export const SignInTab = () => { +export const RestoreAccount = () => { const step = useOnboardAccountRestorationStep(); - const dispatch = useDispatch(); - const [recoveryPhrase, setRecoveryPhrase] = useState(''); const [recoveryPhraseError, setRecoveryPhraseError] = useState(undefined as string | undefined); const [displayName, setDisplayName] = useState(''); @@ -146,11 +99,9 @@ export const SignInTab = () => { }; return ( -
+ <> {step !== AccountRestoration.Start && ( <> - - { /> )} - - { - dispatch(setOnboardingStep(Onboarding.RestoreAccount)); - dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword)); - setRecoveryPhrase(''); - setDisplayName(''); - setIsLoading(false); - }} - onLinkDeviceButtonClicked={() => { - dispatch(setOnboardingStep(Onboarding.RestoreAccount)); - dispatch(setAccountRestorationStep(AccountRestoration.LinkDevice)); - setRecoveryPhrase(''); - setDisplayName(''); - setIsLoading(false); - }} - /> { )} {showTermsAndConditions ? : null} -
+ ); }; diff --git a/ts/components/registration/stages/Start.tsx b/ts/components/registration/stages/Start.tsx new file mode 100644 index 000000000..9d209972c --- /dev/null +++ b/ts/components/registration/stages/Start.tsx @@ -0,0 +1,51 @@ +import { useDispatch } from 'react-redux'; +import { + AccountCreation, + AccountRestoration, + Onboarding, + setAccountCreationStep, + setAccountRestorationStep, + setOnboardingStep, +} from '../../../state/onboarding/ducks/registration'; +import { SessionButton, SessionButtonColor } from '../../basic/SessionButton'; +import { SpacerLG } from '../../basic/Text'; +import { TermsAndConditions } from '../TermsAndConditions'; + +export const Start = () => { + const dispatch = useDispatch(); + + return ( + <> + { + dispatch(setAccountCreationStep(AccountCreation.SessionIDShown)); + dispatch(setOnboardingStep(Onboarding.CreateAccount)); + }} + text={window.i18n('createAccount')} + /> + + { + dispatch(setOnboardingStep(Onboarding.RestoreAccount)); + dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword)); + }} + text={window.i18n('restoreUsingRecoveryPhrase')} + dataTestId="restore-using-recovery" + /> + + { + dispatch(setOnboardingStep(Onboarding.RestoreAccount)); + dispatch(setAccountRestorationStep(AccountRestoration.LinkDevice)); + }} + text={window.i18n('linkDevice')} + dataTestId="link-device" + /> + + + + ); +}; diff --git a/ts/components/registration/stages/index.tsx b/ts/components/registration/stages/index.tsx index c994ac5fb..c1d41158a 100644 --- a/ts/components/registration/stages/index.tsx +++ b/ts/components/registration/stages/index.tsx @@ -1,4 +1,5 @@ -import { SignUpTab } from './create/SignUpTab'; -import { SignInTab } from './restore/SignInTab'; +import { CreateAccount } from './CreatAccount'; +import { RestoreAccount } from './RestoreAccount'; +import { Start } from './Start'; -export { SignInTab, SignUpTab }; +export { CreateAccount, RestoreAccount, Start };