Combining registration steps.

_locales/en/messages.json

@@ -338,7 +338,7 @@
   "createAccount": "Create account",
   "signIn": "Sign In",
   "yourUniqueSessionID": "Say hello to your Session ID",
-  "allUsersAreRandomly...": "Your Session ID is the unique address people can use to contact you on Session. With no connection to your real identity, your Session ID is totally anonymous and private by design.",
+  "signupSessionIDBlurb": "Your Session ID is the unique address people can use to contact you on Session. With no connection to your real identity, your Session ID is totally anonymous and private by design.",
   "getStarted": "Get started",
   "createSessionID": "Create Session ID",
   "recoveryPhrase": "Recovery Phrase",

stylesheets/_session_signin.scss

@@ -149,7 +149,7 @@
         color: themed('textColor');
       }
       font-weight: bold;
-      padding: 12px;
+      padding: 20px;
     }
 
     &__welcome-session {
@@ -278,7 +278,7 @@
 
   &-description-long,
   &-signin-device-pairing-header {
-    padding-top: 10px;
+    padding-top: 0;
     padding-bottom: 20px;
     @include themify($themes) {
       @include session-color-subtle(themed('textColor'));

ts/components/session/SessionRegistrationView.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { AccentText } from './AccentText';
 
-import { RegistrationTabs } from './registration/RegistrationTabs';
+import { RegistrationOptions } from './registration/RegistrationTabs';
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
 import { SessionToastContainer } from './SessionToastContainer';
 import { lightTheme, SessionTheme } from '../../state/ducks/SessionTheme';
@@ -36,7 +36,7 @@ export const SessionRegistrationView = () => {
             <AccentText />
           </div>
           <div className="session-content-registration">
-            <RegistrationTabs theme={lightTheme} />
+            <RegistrationOptions theme={lightTheme} />
           </div>
         </div>
       </div>

ts/components/session/registration/RegistrationTabs.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { PromiseUtils, StringUtils, ToastUtils, UserUtils } from '../../../session/utils';
 import { getConversationController } from '../../../session/conversations';
 import { createOrUpdateItem, removeAll } from '../../../data/data';
 import { SignUpTab } from './SignUpTab';
 import { SignInTab } from './SignInTab';
-import { TabLabel, TabType } from './TabLabel';
+import { TabLabel, TabType } from './TabLabel'; // TODO: remove unused tabs
 import { trigger } from '../../../shims/events';
 import {
   generateMnemonic,
@@ -17,16 +17,11 @@ import { fromHex } from '../../../session/utils/String';
 import { TaskTimedOutError } from '../../../session/utils/Promise';
 import { mn_decode } from '../../../session/crypto/mnemonic';
 import { getSwarmPollingInstance } from '../../../session/snode_api/swarmPolling';
+import { useEffect } from 'react';
 
 export const MAX_USERNAME_LENGTH = 20;
 // tslint:disable: use-simple-attributes
 
-interface State {
-  selectedTab: TabType;
-  generatedRecoveryPhrase: string;
-  hexGeneratedPubKey: string;
-}
-
 export async function resetRegistration() {
   await removeAll();
   await window.storage.reset();
@@ -158,45 +153,27 @@ export async function signInWithLinking(signInDetails: { userRecoveryPhrase: str
     window?.log?.warn('exception during registration:', e);
   }
 }
-export class RegistrationTabs extends React.Component<any, State> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      selectedTab: TabType.SignUp,
-      generatedRecoveryPhrase: '',
-      hexGeneratedPubKey: '',
-    };
-  }
 
-  public componentDidMount() {
-    void this.generateMnemonicAndKeyPair();
-    void resetRegistration();
-  }
+export enum RegistrationPhase {
+  Start,
+  SignIn,
+  CreateSessionID,
+  RestoreYourAccount,
+  LinkDevice
+}
 
-  public render() {
-    const { selectedTab } = this.state;
-
-    return (
-      <div className="session-registration-container">
-        <div className="session-registration__tab-container">
-          <TabLabel
-            type={TabType.SignUp}
-            isSelected={selectedTab === TabType.SignUp}
-            onSelect={this.handleTabSelect}
-          />
-          <TabLabel
-            type={TabType.SignIn}
-            isSelected={selectedTab === TabType.SignIn}
-            onSelect={this.handleTabSelect}
-          />
-        </div>
-        {this.renderSections()}
-      </div>
-    );
-  }
+export const RegistrationOptions = (props: any) => {
+  const [generatedRecoveryPhrase, setGeneratedRecoveryPhrase] = useState('');
+  const [hexGeneratedPubKey, setHexGeneratedPubKey] = useState('');
+  const [registrationPhase, setRegistrationPhase] = useState(RegistrationPhase.Start);
+
+  useEffect(() => {
+    void generateMnemonicAndKeyPair();
+    void resetRegistration();
+  }, [])
 
-  private async generateMnemonicAndKeyPair() {
-    if (this.state.generatedRecoveryPhrase === '') {
+  const generateMnemonicAndKeyPair = async () => {
+    if (generatedRecoveryPhrase === '') {
       const mnemonic = await generateMnemonic();
 
       let seedHex = mn_decode(mnemonic);
@@ -210,30 +187,28 @@ export class RegistrationTabs extends React.Component<any, State> {
       const keyPair = await sessionGenerateKeyPair(seed);
       const hexGeneratedPubKey = StringUtils.decode(keyPair.pubKey, 'hex');
 
-      this.setState({
-        generatedRecoveryPhrase: mnemonic,
-        hexGeneratedPubKey, // our 'frontend' sessionID
-      });
+      setGeneratedRecoveryPhrase(mnemonic);
+      setHexGeneratedPubKey(hexGeneratedPubKey); // our 'frontend' sessionID
     }
   }
 
-  private readonly handleTabSelect = (tabType: TabType): void => {
-    this.setState({
-      selectedTab: tabType,
-    });
-  };
-
-  private renderSections() {
-    const { selectedTab, generatedRecoveryPhrase, hexGeneratedPubKey } = this.state;
-    if (selectedTab === TabType.SignUp) {
-      return (
+  return (
+    <div className="session-registration-container">
+      {(registrationPhase === RegistrationPhase.Start ||
+        registrationPhase === RegistrationPhase.CreateSessionID) &&
         <SignUpTab
           generatedRecoveryPhrase={generatedRecoveryPhrase}
           hexGeneratedPubKey={hexGeneratedPubKey}
+          setRegistrationPhase={setRegistrationPhase}
         />
-      );
-    }
-
-    return <SignInTab />;
-  }
+      }
+      {
+        (registrationPhase === RegistrationPhase.Start ||
+          registrationPhase === RegistrationPhase.SignIn) &&
+        <SignInTab
+          setRegistrationPhase={setRegistrationPhase}
+        />
+      }
+    </div>
+  )
 }

ts/components/session/registration/SignInTab.tsx

@@ -3,7 +3,7 @@ import { Flex } from '../../basic/Flex';
 import { SpacerLG } from '../../basic/Text';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
 import { SessionSpinner } from '../SessionSpinner';
-import { signInWithLinking, signInWithRecovery } from './RegistrationTabs';
+import { RegistrationPhase, signInWithLinking, signInWithRecovery } from './RegistrationTabs';
 import { RegistrationUserDetails } from './RegistrationUserDetails';
 import { TermsAndConditions } from './TermsAndConditions';
 
@@ -80,14 +80,17 @@ const SignInButtons = (props: {
     <div>
       <RestoreUsingRecoveryPhraseButton onRecoveryButtonClicked={props.onRecoveryButtonClicked} />
       <SpacerLG />
-      <div className="or">{window.i18n('or')}</div>
-      <SpacerLG />
       <LinkDeviceButton onLinkDeviceButtonClicked={props.onLinkDeviceButtonClicked} />
     </div>
   );
 };
 
-export const SignInTab = () => {
+interface Props {
+  setRegistrationPhase: (phase: any) => any;
+}
+
+export const SignInTab = (props: Props) => {
+  const { setRegistrationPhase } = props;
   const [signInMode, setSignInMode] = useState(SignInMode.Default);
   const [recoveryPhrase, setRecoveryPhrase] = useState('');
   const [recoveryPhraseError, setRecoveryPhraseError] = useState(undefined as string | undefined);
@@ -153,12 +156,14 @@ export const SignInTab = () => {
       <SignInButtons
         signInMode={signInMode}
         onRecoveryButtonClicked={() => {
+          setRegistrationPhase(RegistrationPhase.SignIn);
           setSignInMode(SignInMode.UsingRecoveryPhrase);
           setRecoveryPhrase('');
           setDisplayName('');
           setIsLoading(false);
         }}
         onLinkDeviceButtonClicked={() => {
+          setRegistrationPhase(RegistrationPhase.SignIn);
           setSignInMode(SignInMode.LinkDevice);
           setRecoveryPhrase('');
           setDisplayName('');

ts/components/session/registration/SignUpTab.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
 import { SessionIdEditable } from '../SessionIdEditable';
-import { signUp } from './RegistrationTabs';
+import { RegistrationPhase, signUp } from './RegistrationTabs';
 import { RegistrationUserDetails } from './RegistrationUserDetails';
 import { TermsAndConditions } from './TermsAndConditions';
 
@@ -15,6 +15,7 @@ export interface Props {
   // tslint:disable: react-unused-props-and-state
   generatedRecoveryPhrase: string;
   hexGeneratedPubKey: string;
+  setRegistrationPhase: (phase: any) => any;
 }
 
 const CreateSessionIdButton = ({ createSessionID }: { createSessionID: any }) => {
@@ -40,10 +41,8 @@ const ContinueSignUpButton = ({ continueSignUp }: { continueSignUp: any }) => {
 };
 
 const SignUpDefault = (props: { createSessionID: () => void }) => {
-  const allUsersAreRandomly = window.i18n('allUsersAreRandomly...');
   return (
     <div className="session-registration__content">
-      <div className="session-description-long">{allUsersAreRandomly}</div>
       <CreateSessionIdButton createSessionID={props.createSessionID} />
     </div>
   );
@@ -55,8 +54,8 @@ const SignUpSessionIDShown = (props: { continueSignUp: () => void }) => {
       <div className="session-registration__unique-session-id">
         {window.i18n('yourUniqueSessionID')}
       </div>
-
       <SessionIdEditable editable={false} placeholder={undefined} />
+      <div className="session-description-long">{window.i18n('signupSessionIDBlurb')}</div>
       <ContinueSignUpButton continueSignUp={props.continueSignUp} />
       <TermsAndConditions />
     </div>
@@ -64,8 +63,8 @@ const SignUpSessionIDShown = (props: { continueSignUp: () => void }) => {
 };
 
 export const SignUpTab = (props: Props) => {
+  const { setRegistrationPhase } = props;
   const [signUpMode, setSignUpMode] = useState(SignUpMode.Default);
-
   const [displayName, setDisplayName] = useState('');
   const [displayNameError, setDisplayNameError] = useState('');
 
@@ -80,6 +79,7 @@ export const SignUpTab = (props: Props) => {
       <SignUpDefault
         createSessionID={() => {
           setSignUpMode(SignUpMode.SessionIDShown);
+          setRegistrationPhase(RegistrationPhase.CreateSessionID)
         }}
       />
     );