feat: updated restore account screen with new design

_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."
 }

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<string>;
+    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}
     />
   );

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);

ts/components/registration/RegistrationUserDetails.tsx

@@ -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 (
-    <SessionInput
-      type="password"
-      value={props.recoveryPhrase}
-      autoFocus={props.stealAutoFocus || false}
-      placeholder={window.i18n('enterRecoveryPhrase')}
-      enableShowHide={true}
-      onValueChanged={props.onSeedChanged}
-      onEnterPressed={props.handlePressEnter}
-      inputDataTestId="recovery-phrase-input"
-    />
-  );
-};
-
-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 (
-    <div style={{ margin: 0 }}>
-      {props.showSeedField && (
-        <>
-          <RecoveryPhraseInput
-            recoveryPhrase={props.recoveryPhrase as string}
-            handlePressEnter={props.handlePressEnter}
-            onSeedChanged={props.onSeedChanged as any}
-            stealAutoFocus={props.stealAutoFocus}
-          />
-          <SpacerLG />
-        </>
-      )}
-    </div>
-  );
-};

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));
       }}
     />

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 };

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 (
-    <StyledContainer>
-      <BackButtonWithininContainer margin={'0 0 0 -28px'}>
-        <Flex container={true} width="100%" flexDirection="column" alignItems="flex-start">
-          <StyledHeading>{window.i18n('displayNamePick')}</StyledHeading>
+    <OnboardContainer>
+      <BackButtonWithininContainer margin={'2px 0 0 -36px'}>
+        <Flex
+          container={true}
+          width="100%"
+          flexDirection="column"
+          alignItems="flex-start"
+          margin={'0 0 0 8px'}
+        >
+          <OnboardHeading>{window.i18n('displayNamePick')}</OnboardHeading>
           <SpacerSM />
-          <StyledDescription>{window.i18n('displayNameDescription')}</StyledDescription>
+          <OnboardDescription>{window.i18n('displayNameDescription')}</OnboardDescription>
           <SpacerLG />
           <SessionInput
             autoFocus={true}
@@ -152,6 +143,6 @@ export const CreateAccount = () => {
           />
         </Flex>
       </BackButtonWithininContainer>
-    </StyledContainer>
+    </OnboardContainer>
   );
 };

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 (
-    <SessionButton
-      onClick={props.handleContinueYourSessionClick}
-      text={window.i18n('continueYourSession')}
-      disabled={props.disabled}
-      dataTestId="continue-session-button"
-    />
-  );
-};
-
-const SignInContinueButton = (props: {
-  accountRestorationStep: AccountRestoration;
-  disabled: boolean;
-  handleContinueYourSessionClick: () => any;
-}) => {
-  if (props.accountRestorationStep === AccountRestoration.Start) {
-    return null;
-  }
-  return (
-    <ContinueYourSessionButton
-      handleContinueYourSessionClick={props.handleContinueYourSessionClick}
-      disabled={props.disabled}
-    />
-  );
-};
+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<string | undefined>('');
   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 && (
-        <>
-          <RegistrationUserDetails
-            showDisplayNameField={showDisplayNameField}
-            showSeedField={true}
-            displayName={displayName}
-            handlePressEnter={continueYourSession}
-            onDisplayNameChanged={(name: string) => {
-              // NOTE this is just dummy code for later
-              setDisplayName(name);
-              setDisplayNameError(name);
-              window.log.debug(`WIP: [displayName] ${displayName} `);
-            }}
-            onSeedChanged={(seed: string) => {
+    <OnboardContainer>
+      <BackButtonWithininContainer margin={'2px 0 0 -36px'}>
+        <Flex
+          container={true}
+          width="100%"
+          flexDirection="column"
+          alignItems="flex-start"
+          margin={'0 0 0 8px'}
+        >
+          <Flex container={true} width={'100%'} alignItems="center">
+            <OnboardHeading>{window.i18n('sessionRecoveryPassword')}</OnboardHeading>
+            <SessionIcon
+              iconType="recoveryPassword"
+              iconSize="large"
+              iconColor="var(--text-primary-color)"
+              style={{ margin: '-4px 0 0 8px' }}
+            />
+          </Flex>
+          <SpacerSM />
+          <OnboardDescription>{window.i18n('onboardingRecoveryPassword')}</OnboardDescription>
+          <SpacerLG />
+          <SessionInput
+            autoFocus={true}
+            type="password"
+            placeholder={window.i18n('enterRecoveryPhrase')}
+            value={recoveryPhrase}
+            onValueChanged={(seed: string) => {
               setRecoveryPhrase(seed);
               setRecoveryPhraseError(!seed ? window.i18n('recoveryPhraseEmpty') : undefined);
             }}
-            recoveryPhrase={recoveryPhrase}
-            stealAutoFocus={true}
+            onEnterPressed={continueYourSession}
+            error={recoveryPhraseError}
+            enableShowHide={true}
+            inputDataTestId="recovery-phrase-input"
+          />
+          <SpacerLG />
+          <SessionButton
+            buttonColor={SessionButtonColor.White}
+            onClick={continueYourSession}
+            text={window.i18n('continue')}
+            disabled={!activateContinueButton}
+            dataTestId="continue-session-button"
           />
-        </>
-      )}
-      <SignInContinueButton
-        accountRestorationStep={step}
-        handleContinueYourSessionClick={continueYourSession}
-        disabled={!activateContinueButton}
-      />
-      {loading && (
+        </Flex>
+        {/* TODO[epic=898] Replace with new Session Progress Loader */}
+        {/* {loading && (
         <Flex
           container={true}
           justifyContent="center"
@@ -126,9 +100,8 @@ export const RestoreAccount = () => {
         >
           <SessionSpinner loading={true} />
         </Flex>
-      )}
-
-      {showTermsAndConditions ? <TermsAndConditions /> : null}
-    </>
+      )} */}
+      </BackButtonWithininContainer>
+    </OnboardContainer>
   );
 };

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')}
       />
       <SpacerLG />
       <SessionButton
@@ -31,20 +31,10 @@ export const Start = () => {
           dispatch(setOnboardingStep(Onboarding.RestoreAccount));
           dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword));
         }}
-        text={window.i18n('restoreUsingRecoveryPhrase')}
+        text={window.i18n('onboardingAccountExists')}
         dataTestId="restore-using-recovery"
       />
       <SpacerLG />
-      <SessionButton
-        buttonColor={SessionButtonColor.White}
-        onClick={() => {
-          dispatch(setOnboardingStep(Onboarding.RestoreAccount));
-          dispatch(setAccountRestorationStep(AccountRestoration.LinkDevice));
-        }}
-        text={window.i18n('linkDevice')}
-        dataTestId="link-device"
-      />
-      <SpacerLG />
       <TermsAndConditions />
     </>
   );

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);

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,
 };
 

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'