From 4e2101a9e5ccef466bbf2dbf9cac57dd7b9ac32b Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 26 Feb 2024 14:54:27 +1100 Subject: [PATCH] feat: setup UI and state for account create display name step --- _locales/en/messages.json | 4 +- ts/components/inputs/SessionInput2.tsx | 4 +- .../registration/RegistrationUserDetails.tsx | 61 ++-------- .../registration/TermsAndConditions.tsx | 2 - .../registration/components/BackButton.tsx | 2 +- .../registration/stages/CreatAccount.tsx | 112 ------------------ .../registration/stages/CreateAccount.tsx | 90 ++++++++++++++ ts/components/registration/stages/Start.tsx | 2 +- ts/components/registration/stages/index.tsx | 2 +- ts/state/onboarding/ducks/registration.ts | 6 +- ts/types/LocalizerKeys.ts | 2 + 11 files changed, 114 insertions(+), 173 deletions(-) delete mode 100644 ts/components/registration/stages/CreatAccount.tsx create mode 100644 ts/components/registration/stages/CreateAccount.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index e3e859f79..5b3873025 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -583,5 +583,7 @@ "urlOpen": "Open URL", "urlOpenBrowser": "This will open in your browser.", "termsOfService": "Terms of Service", - "privacyPolicy": "Privacy Policy" + "privacyPolicy": "Privacy Policy", + "displayNamePick": "Pick your display name", + "displayNameDescription": "It can be your real name, an alias, or anything else you like — and you can change it any time." } diff --git a/ts/components/inputs/SessionInput2.tsx b/ts/components/inputs/SessionInput2.tsx index 8c5710961..d2920fb9a 100644 --- a/ts/components/inputs/SessionInput2.tsx +++ b/ts/components/inputs/SessionInput2.tsx @@ -12,7 +12,7 @@ import { SessionIconButton } from '../icon'; const StyledInputContainer = styled(Flex)<{ error: boolean }>` position: relative; - width: 280px; + width: 100%; label { color: var(--text-primary-color); @@ -39,7 +39,7 @@ const StyledInput = styled(motion.input)` border: 1px solid var(--input-border-color); border-radius: 13px; outline: 0; - width: 280px; + width: 100%; background: transparent; color: var(--input-text-color); diff --git a/ts/components/registration/RegistrationUserDetails.tsx b/ts/components/registration/RegistrationUserDetails.tsx index f332de3b0..75702134e 100644 --- a/ts/components/registration/RegistrationUserDetails.tsx +++ b/ts/components/registration/RegistrationUserDetails.tsx @@ -1,27 +1,5 @@ -import { MAX_USERNAME_BYTES } from '../../session/constants'; import { SpacerLG } from '../basic/Text'; import { SessionInput2 } from '../inputs'; -import { BackButtonWithininContainer } from './components/BackButton'; - -const DisplayNameInput = (props: { - stealAutoFocus?: boolean; - displayName: string; - onDisplayNameChanged: (val: string) => any; - handlePressEnter: () => any; -}) => { - return ( - - ); -}; const RecoveryPhraseInput = (props: { recoveryPhrase: string; @@ -60,31 +38,18 @@ export const RegistrationUserDetails = (props: Props) => { } return ( - -
- {props.showSeedField && ( - <> - - - - )} - {props.showDisplayNameField && ( - <> - - - - )} -
- +
+ {props.showSeedField && ( + <> + + + + )} +
); }; diff --git a/ts/components/registration/TermsAndConditions.tsx b/ts/components/registration/TermsAndConditions.tsx index fbce436f6..8082cd538 100644 --- a/ts/components/registration/TermsAndConditions.tsx +++ b/ts/components/registration/TermsAndConditions.tsx @@ -4,13 +4,11 @@ import { updateTermsOfServicePrivacyModal } from '../../state/onboarding/ducks/m import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer'; const StyledTermsAndConditions = styled.div` - color: var(--text-secondary-color); text-align: center; font-size: 12px; b { font-weight: bold; - color: var(--text-primary-color); } &:hover { diff --git a/ts/components/registration/components/BackButton.tsx b/ts/components/registration/components/BackButton.tsx index 636790772..ef1aaebba 100644 --- a/ts/components/registration/components/BackButton.tsx +++ b/ts/components/registration/components/BackButton.tsx @@ -41,7 +41,7 @@ export const BackButton = () => { onClick={() => { dispatch(setOnboardingStep(Onboarding.Start)); dispatch(setAccountRestorationStep(AccountRestoration.Start)); - dispatch(setAccountCreationStep(AccountCreation.Start)); + dispatch(setAccountCreationStep(AccountCreation.DisplayName)); }} /> ); diff --git a/ts/components/registration/stages/CreatAccount.tsx b/ts/components/registration/stages/CreatAccount.tsx deleted file mode 100644 index 1b2f0cc27..000000000 --- a/ts/components/registration/stages/CreatAccount.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { useEffect, useState } from 'react'; -import { useDispatch } from 'react-redux'; -import styled from 'styled-components'; -import { - AccountCreation, - setAccountCreationStep, -} 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 { BackButtonWithininContainer } from '../components/BackButton'; -import { sanitizeDisplayNameOrToast } from './RestoreAccount'; - -const StyledContainer = styled.div` - width: 100%; - padding-top: 20px; -`; - -export const CreateAccount = () => { - const step = useOnboardAccountCreationStep(); - const generatedRecoveryPhrase = useOnboardGeneratedRecoveryPhrase(); - const hexGeneratedPubKey = useOnboardHexGeneratedPubKey(); - - const dispatch = useDispatch(); - - const [displayName, setDisplayName] = useState(''); - const [displayNameError, setDisplayNameError] = useState(''); - - useEffect(() => { - if (step === AccountCreation.SessionIDShown) { - window.Session.setNewSessionID(hexGeneratedPubKey); - } - }, [step, hexGeneratedPubKey]); - - if (step === AccountCreation.SessionIDShown) { - return ( -
- - -
- {window.i18n('yourUniqueSessionID')} -
- - - -
{window.i18n('allUsersAreRandomly...')}
- { - dispatch(setAccountCreationStep(AccountCreation.DisplayName)); - }} - text={window.i18n('continue')} - /> - -
- ); - } - - // can only be the EnterDetails step - - // Display name is required - const displayNameOK = !displayNameError && !!displayName; - - const enableCompleteSignUp = displayNameOK; - const signUpWithDetails = async () => { - await signUp({ - displayName, - generatedRecoveryPhrase, - }); - }; - - return ( - - - - {window.i18n('welcomeToYourSession')} - - - { - sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError); - }} - stealAutoFocus={true} - /> - - - ); -}; diff --git a/ts/components/registration/stages/CreateAccount.tsx b/ts/components/registration/stages/CreateAccount.tsx new file mode 100644 index 000000000..9a5327f65 --- /dev/null +++ b/ts/components/registration/stages/CreateAccount.tsx @@ -0,0 +1,90 @@ +import { useEffect, useState } from 'react'; +import styled from 'styled-components'; +import { MAX_USERNAME_BYTES } from '../../../session/constants'; +import { AccountCreation } 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 { SpacerLG, SpacerSM } from '../../basic/Text'; +import { SessionInput2 } from '../../inputs'; +import { signUp } from '../RegistrationStages'; +import { BackButtonWithininContainer } from '../components/BackButton'; +import { sanitizeDisplayNameOrToast } from './RestoreAccount'; + +const StyledContainer = styled.div` + width: 100%; +`; + +const StyledHeading = styled.h3` + padding: 0; + margin: 0; + font-size: var(--font-size-h2); +`; + +const StyledDescription = styled.p` + padding: 0; + margin: 0; +`; + +export const CreateAccount = () => { + const step = useOnboardAccountCreationStep(); + const generatedRecoveryPhrase = useOnboardGeneratedRecoveryPhrase(); + const hexGeneratedPubKey = useOnboardHexGeneratedPubKey(); + + // const dispatch = useDispatch(); + + const [displayName, setDisplayName] = useState(''); + const [displayNameError, setDisplayNameError] = useState(''); + + useEffect(() => { + if (step === AccountCreation.DisplayName) { + window.Session.setNewSessionID(hexGeneratedPubKey); + } + }, [step, hexGeneratedPubKey]); + + // Display name is required + const displayNameOK = !displayNameError && !!displayName; + + const enableCompleteSignUp = displayNameOK; + const signUpWithDetails = async () => { + await signUp({ + displayName, + generatedRecoveryPhrase, + }); + }; + + return ( + + + + {window.i18n('displayNamePick')} + + {window.i18n('displayNameDescription')} + + { + sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError); + }} + onEnterPressed={signUpWithDetails} + inputDataTestId="display-name-input" + /> + + + + + + ); +}; diff --git a/ts/components/registration/stages/Start.tsx b/ts/components/registration/stages/Start.tsx index 9d209972c..acda6cffa 100644 --- a/ts/components/registration/stages/Start.tsx +++ b/ts/components/registration/stages/Start.tsx @@ -19,7 +19,7 @@ export const Start = () => { { - dispatch(setAccountCreationStep(AccountCreation.SessionIDShown)); + dispatch(setAccountCreationStep(AccountCreation.DisplayName)); dispatch(setOnboardingStep(Onboarding.CreateAccount)); }} text={window.i18n('createAccount')} diff --git a/ts/components/registration/stages/index.tsx b/ts/components/registration/stages/index.tsx index c1d41158a..5900dacb5 100644 --- a/ts/components/registration/stages/index.tsx +++ b/ts/components/registration/stages/index.tsx @@ -1,4 +1,4 @@ -import { CreateAccount } from './CreatAccount'; +import { CreateAccount } from './CreateAccount'; import { RestoreAccount } from './RestoreAccount'; import { Start } from './Start'; diff --git a/ts/state/onboarding/ducks/registration.ts b/ts/state/onboarding/ducks/registration.ts index 7400730de..0695f1dee 100644 --- a/ts/state/onboarding/ducks/registration.ts +++ b/ts/state/onboarding/ducks/registration.ts @@ -10,10 +10,6 @@ export enum Onboarding { } export enum AccountCreation { - /** TODO to be removed - current starting screen */ - Start, - /** TODO to be removed */ - SessionIDShown, /** starting screen */ DisplayName, /** show conversation screen */ @@ -48,7 +44,7 @@ const initialState: OnboardingState = { hexGeneratedPubKey: '', step: Onboarding.Start, accountRestorationStep: AccountRestoration.Start, - accountCreationStep: AccountCreation.Start, + accountCreationStep: AccountCreation.DisplayName, }; export const registrationSlice = createSlice({ diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts index ce3c8c96c..871aa1d9d 100644 --- a/ts/types/LocalizerKeys.ts +++ b/ts/types/LocalizerKeys.ts @@ -159,7 +159,9 @@ export type LocalizerKeys = | 'disappearingMessagesModeOutdated' | 'disappears' | 'displayName' + | 'displayNameDescription' | 'displayNameEmpty' + | 'displayNamePick' | 'displayNameTooLong' | 'document' | 'documents'