diff --git a/_locales/en/messages.json b/_locales/en/messages.json index fb247dd9e..cd425fb10 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -386,7 +386,6 @@ "noModeratorsToRemove": "no admins to remove", "onlyAdminCanRemoveMembers": "You are not the creator", "onlyAdminCanRemoveMembersDesc": "Only the creator of the group can remove users", - "createAccount": "Create account", "startInTrayTitle": "Keep in System Tray", "startInTrayDescription": "Keep Session running in the background when you close the window.", "yourUniqueSessionID": "Say hello to your Session ID", @@ -589,5 +588,9 @@ "conversationsNone": "You don't have any conversations yet", "onboardingHitThePlusButton": "Hit the plus button to start a chat, create a group, or join an official community!", "saveRecoveryPassword": "Save your recovery password", - "saveRecoveryPasswordDescription": "Save your recovery password to make sure you don't lose access to your account." + "saveRecoveryPasswordDescription": "Save your recovery password to make sure you don't lose access to your account.", + "onboardingAccountCreate": "Create account", + "onboardingAccountExists": "I have an account", + "sessionRecoveryPassword": "Recovery Password", + "onboardingRecoveryPassword": "Enter your recovery password to load your account. If you haven't saved it, you can find it in your app settings." } diff --git a/ts/components/icon/SessionIcon.tsx b/ts/components/icon/SessionIcon.tsx index 09ef6f9b8..461de61e4 100644 --- a/ts/components/icon/SessionIcon.tsx +++ b/ts/components/icon/SessionIcon.tsx @@ -1,4 +1,4 @@ -import styled, { css, keyframes } from 'styled-components'; +import styled, { css, CSSProperties, keyframes } from 'styled-components'; import { memo } from 'react'; import { icons, SessionIconSize, SessionIconType } from '.'; @@ -16,6 +16,7 @@ export type SessionIconProps = { glowStartDelay?: number; noScale?: boolean; backgroundColor?: string; + style?: CSSProperties; dataTestId?: string; }; @@ -140,6 +141,7 @@ const SessionSvg = ( props: StyledSvgProps & { viewBox: string; path: string | Array; + style?: CSSProperties; dataTestId?: string; } ) => { @@ -161,6 +163,7 @@ const SessionSvg = ( fill: props.fill, clipRule: props.clipRule, fillRule: props.filleRule, + style: props.style, dataTestId: props.dataTestId, }; @@ -184,6 +187,7 @@ export const SessionIcon = (props: SessionIconProps) => { noScale, backgroundColor, iconPadding, + style, dataTestId, } = props; let { iconSize, iconRotation } = props; @@ -215,6 +219,7 @@ export const SessionIcon = (props: SessionIconProps) => { fill={fill} clipRule={clipRule} filleRule={fillRule} + style={style} dataTestId={dataTestId} /> ); diff --git a/ts/components/leftpane/overlay/OverlayMessage.tsx b/ts/components/leftpane/overlay/OverlayMessage.tsx index 8651c4a62..b8ba7123b 100644 --- a/ts/components/leftpane/overlay/OverlayMessage.tsx +++ b/ts/components/leftpane/overlay/OverlayMessage.tsx @@ -100,7 +100,7 @@ export const OverlayMessage = () => { try { const resolvedSessionID = await ONSResolve.getSessionIDForOnsName(pubkeyorOnsTrimmed); if (PubKey.validateWithErrorNoBlinding(resolvedSessionID)) { - throw new Error('Got a resolved ONS but the returned entry is not a vlaid SessionID'); + throw new Error('Got a resolved ONS but the returned entry is not a valid SessionID'); } // this is a pubkey await openConvoOnceResolved(resolvedSessionID); diff --git a/ts/components/registration/RegistrationUserDetails.tsx b/ts/components/registration/RegistrationUserDetails.tsx deleted file mode 100644 index ac6c320de..000000000 --- a/ts/components/registration/RegistrationUserDetails.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { SpacerLG } from '../basic/Text'; -import { SessionInput } from '../inputs'; - -const RecoveryPhraseInput = (props: { - recoveryPhrase: string; - onSeedChanged: (val: string) => any; - handlePressEnter: () => any; - stealAutoFocus?: boolean; -}) => { - return ( - - ); -}; - -export interface Props { - showDisplayNameField: boolean; - showSeedField: boolean; - stealAutoFocus?: boolean; - recoveryPhrase?: string; - displayName: string; - handlePressEnter: () => any; - onSeedChanged?: (val: string) => any; - onDisplayNameChanged: (val: string) => any; -} - -export const RegistrationUserDetails = (props: Props) => { - if (props.showSeedField && (props.recoveryPhrase === undefined || !props.onSeedChanged)) { - throw new Error('if show seed is true, we need callback + value'); - } - - return ( -
- {props.showSeedField && ( - <> - - - - )} -
- ); -}; diff --git a/ts/components/registration/components/BackButton.tsx b/ts/components/registration/components/BackButton.tsx index ef1aaebba..9892ecc05 100644 --- a/ts/components/registration/components/BackButton.tsx +++ b/ts/components/registration/components/BackButton.tsx @@ -37,10 +37,9 @@ export const BackButton = () => { iconType="chevron" iconColor="var(--color-text-primary)" iconRotation={90} - iconPadding="5px" onClick={() => { dispatch(setOnboardingStep(Onboarding.Start)); - dispatch(setAccountRestorationStep(AccountRestoration.Start)); + dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword)); dispatch(setAccountCreationStep(AccountCreation.DisplayName)); }} /> diff --git a/ts/components/registration/components/index.tsx b/ts/components/registration/components/index.tsx index 62e9c16f4..e43463515 100644 --- a/ts/components/registration/components/index.tsx +++ b/ts/components/registration/components/index.tsx @@ -1,4 +1,21 @@ +import styled from 'styled-components'; import { BackButton } from './BackButton'; import { Hero } from './Hero'; -export { BackButton, Hero }; +const OnboardContainer = styled.div` + width: 100%; +`; + +const OnboardHeading = styled.h3` + padding: 0; + margin: 0; + font-size: var(--font-size-h2); +`; + +const OnboardDescription = styled.p` + padding: 0; + margin: 0; + letter-spacing: normal; +`; + +export { BackButton, Hero, OnboardContainer, OnboardDescription, OnboardHeading }; diff --git a/ts/components/registration/stages/CreateAccount.tsx b/ts/components/registration/stages/CreateAccount.tsx index 9ce925669..8678345a1 100644 --- a/ts/components/registration/stages/CreateAccount.tsx +++ b/ts/components/registration/stages/CreateAccount.tsx @@ -1,6 +1,5 @@ import { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; -import styled from 'styled-components'; import { SettingsKey } from '../../../data/settings-key'; import { ToastUtils } from '../../../session/utils'; import { sanitizeSessionUsername } from '../../../session/utils/String'; @@ -21,23 +20,9 @@ import { SessionButton, SessionButtonColor } from '../../basic/SessionButton'; import { SpacerLG, SpacerSM } from '../../basic/Text'; import { SessionInput } from '../../inputs'; import { resetRegistration } from '../RegistrationStages'; +import { OnboardContainer, OnboardDescription, OnboardHeading } from '../components'; import { BackButtonWithininContainer } from '../components/BackButton'; -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; -`; - function sanitizeDisplayNameOrToast( displayName: string, setDisplayName: (sanitized: string) => void, @@ -125,12 +110,18 @@ export const CreateAccount = () => { }; return ( - - - - {window.i18n('displayNamePick')} + + + + {window.i18n('displayNamePick')} - {window.i18n('displayNameDescription')} + {window.i18n('displayNameDescription')} { /> - + ); }; diff --git a/ts/components/registration/stages/RestoreAccount.tsx b/ts/components/registration/stages/RestoreAccount.tsx index 5ed83164d..8aa9ad55b 100644 --- a/ts/components/registration/stages/RestoreAccount.tsx +++ b/ts/components/registration/stages/RestoreAccount.tsx @@ -1,114 +1,88 @@ import { useState } from 'react'; -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; - disabled: boolean; -}) => { - return ( - - ); -}; - -const SignInContinueButton = (props: { - accountRestorationStep: AccountRestoration; - disabled: boolean; - handleContinueYourSessionClick: () => any; -}) => { - if (props.accountRestorationStep === AccountRestoration.Start) { - return null; - } - return ( - - ); -}; +import { SessionButton, SessionButtonColor } from '../../basic/SessionButton'; +import { SpacerLG, SpacerSM } from '../../basic/Text'; +import { SessionIcon } from '../../icon'; +import { SessionInput } from '../../inputs'; +import { signInWithLinking } from '../RegistrationStages'; +import { OnboardContainer, OnboardDescription, OnboardHeading } from '../components'; +import { BackButtonWithininContainer } from '../components/BackButton'; export const RestoreAccount = () => { - const step = useOnboardAccountRestorationStep(); + // const step = useOnboardAccountRestorationStep(); const [recoveryPhrase, setRecoveryPhrase] = useState(''); const [recoveryPhraseError, setRecoveryPhraseError] = useState(undefined as string | undefined); - const [displayName, setDisplayName] = useState(''); - const [displayNameError, setDisplayNameError] = useState(''); const [loading, setIsLoading] = useState(false); - const isRecovery = step === AccountRestoration.RecoveryPassword; - const isLinking = step === AccountRestoration.LinkDevice; - const showTermsAndConditions = step !== AccountRestoration.Start; - - // show display name input only if we are trying to recover from seed. - // We don't need a display name when we link a device, as the display name - // from the configuration message will be used. - const showDisplayNameField = isRecovery; - - // Display name is required only on isRecoveryMode - const displayNameOK = (isRecovery && !displayNameError && !!displayName) || isLinking; - // Seed is mandatory no matter which mode - const seedOK = recoveryPhrase && !recoveryPhraseError; + const seedOK = !!recoveryPhrase && !recoveryPhraseError; - const activateContinueButton = seedOK && displayNameOK && !loading; + const activateContinueButton = seedOK && !loading; - const continueYourSession = async () => { - if (isRecovery) { - await signInWithRecovery({ - displayName, - userRecoveryPhrase: recoveryPhrase, - }); - } else if (isLinking) { - setIsLoading(true); - await signInWithLinking({ - userRecoveryPhrase: recoveryPhrase, - }); - setIsLoading(false); - } + const continueYourSession = () => { + // TODO better error handling + // if (isRecovery) { + // void signInWithRecovery({ + // displayName, + // userRecoveryPhrase: recoveryPhrase, + // }); + // } + // else if (isLinking) { + setIsLoading(true); + void signInWithLinking({ + userRecoveryPhrase: recoveryPhrase, + }); + setIsLoading(false); }; return ( - <> - {step !== AccountRestoration.Start && ( - <> - { - // NOTE this is just dummy code for later - setDisplayName(name); - setDisplayNameError(name); - window.log.debug(`WIP: [displayName] ${displayName} `); - }} - onSeedChanged={(seed: string) => { + + + + + {window.i18n('sessionRecoveryPassword')} + + + + {window.i18n('onboardingRecoveryPassword')} + + { setRecoveryPhrase(seed); setRecoveryPhraseError(!seed ? window.i18n('recoveryPhraseEmpty') : undefined); }} - recoveryPhrase={recoveryPhrase} - stealAutoFocus={true} + onEnterPressed={continueYourSession} + error={recoveryPhraseError} + enableShowHide={true} + inputDataTestId="recovery-phrase-input" + /> + + - - )} - - {loading && ( + + {/* TODO[epic=898] Replace with new Session Progress Loader */} + {/* {loading && ( { > - )} - - {showTermsAndConditions ? : null} - + )} */} + + ); }; diff --git a/ts/components/registration/stages/Start.tsx b/ts/components/registration/stages/Start.tsx index acda6cffa..11ed404d8 100644 --- a/ts/components/registration/stages/Start.tsx +++ b/ts/components/registration/stages/Start.tsx @@ -22,7 +22,7 @@ export const Start = () => { dispatch(setAccountCreationStep(AccountCreation.DisplayName)); dispatch(setOnboardingStep(Onboarding.CreateAccount)); }} - text={window.i18n('createAccount')} + text={window.i18n('onboardingAccountCreate')} /> { dispatch(setOnboardingStep(Onboarding.RestoreAccount)); dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword)); }} - text={window.i18n('restoreUsingRecoveryPhrase')} + text={window.i18n('onboardingAccountExists')} dataTestId="restore-using-recovery" /> - { - dispatch(setOnboardingStep(Onboarding.RestoreAccount)); - dispatch(setAccountRestorationStep(AccountRestoration.LinkDevice)); - }} - text={window.i18n('linkDevice')} - dataTestId="link-device" - /> - ); diff --git a/ts/mains/main_renderer.tsx b/ts/mains/main_renderer.tsx index f9f36c599..b9c80b0d2 100644 --- a/ts/mains/main_renderer.tsx +++ b/ts/mains/main_renderer.tsx @@ -590,6 +590,7 @@ class TextScramble { } window.Session = window.Session || {}; +// TODO[ses-50] remove this since we no longer show the session id in onboarding window.Session.setNewSessionID = (sessionID: string) => { const el = document.querySelector('.session-id-editable-textarea'); const fx = new TextScramble(el); diff --git a/ts/state/onboarding/ducks/registration.ts b/ts/state/onboarding/ducks/registration.ts index 137ad75c3..a12f0db91 100644 --- a/ts/state/onboarding/ducks/registration.ts +++ b/ts/state/onboarding/ducks/registration.ts @@ -17,8 +17,6 @@ export enum AccountCreation { } export enum AccountRestoration { - /** TODO to be removed - current starting screen */ - Start, /** starting screen */ RecoveryPassword, /** fetching account details */ @@ -43,7 +41,7 @@ const initialState: OnboardingState = { generatedRecoveryPhrase: '', hexGeneratedPubKey: '', step: Onboarding.Start, - accountRestorationStep: AccountRestoration.Start, + accountRestorationStep: AccountRestoration.RecoveryPassword, accountCreationStep: AccountCreation.DisplayName, }; diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts index 2583d5fa0..9624763ce 100644 --- a/ts/types/LocalizerKeys.ts +++ b/ts/types/LocalizerKeys.ts @@ -110,7 +110,6 @@ export type LocalizerKeys = | 'copySessionID' | 'couldntFindServerMatching' | 'create' - | 'createAccount' | 'createClosedGroupNamePrompt' | 'createClosedGroupPlaceholder' | 'createConversationNewContact' @@ -357,9 +356,12 @@ export type LocalizerKeys = | 'oceanLightThemeTitle' | 'offline' | 'ok' + | 'onboardingAccountCreate' | 'onboardingAccountCreated' + | 'onboardingAccountExists' | 'onboardingBubbleWelcomeToSession' | 'onboardingHitThePlusButton' + | 'onboardingRecoveryPassword' | 'onboardingTosPrivacy' | 'oneNonImageAtATimeToast' | 'onionPathIndicatorDescription' @@ -458,6 +460,7 @@ export type LocalizerKeys = | 'sent' | 'serverId' | 'sessionMessenger' + | 'sessionRecoveryPassword' | 'set' | 'setAccountPasswordDescription' | 'setAccountPasswordTitle'