From bf645f36b72e8d4b5b65c4cb98e28757bbf4038f Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 16 Aug 2021 09:27:29 +1000 Subject: [PATCH] Combining registration steps. --- _locales/en/messages.json | 2 +- stylesheets/_session_signin.scss | 4 +- .../session/SessionRegistrationView.tsx | 4 +- .../session/registration/RegistrationTabs.tsx | 101 +++++++----------- .../session/registration/SignInTab.tsx | 13 ++- .../session/registration/SignUpTab.tsx | 10 +- 6 files changed, 57 insertions(+), 77 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 442a633ef..274f6d015 100644 --- a/_locales/en/messages.json +++ b/_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", diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 58d734d59..12fe807b1 100644 --- a/stylesheets/_session_signin.scss +++ b/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')); diff --git a/ts/components/session/SessionRegistrationView.tsx b/ts/components/session/SessionRegistrationView.tsx index 8602df016..8e61a7733 100644 --- a/ts/components/session/SessionRegistrationView.tsx +++ b/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 = () => {
- +
diff --git a/ts/components/session/registration/RegistrationTabs.tsx b/ts/components/session/registration/RegistrationTabs.tsx index d32934055..4b807f335 100644 --- a/ts/components/session/registration/RegistrationTabs.tsx +++ b/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 { - 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 ( -
-
- - -
- {this.renderSections()} -
- ); - } +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 { 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 ( +
+ {(registrationPhase === RegistrationPhase.Start || + registrationPhase === RegistrationPhase.CreateSessionID) && - ); - } - - return ; - } + } + { + (registrationPhase === RegistrationPhase.Start || + registrationPhase === RegistrationPhase.SignIn) && + + } +
+ ) } diff --git a/ts/components/session/registration/SignInTab.tsx b/ts/components/session/registration/SignInTab.tsx index 40f05251d..6578b31f3 100644 --- a/ts/components/session/registration/SignInTab.tsx +++ b/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: {
-
{window.i18n('or')}
-
); }; -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 = () => { { + setRegistrationPhase(RegistrationPhase.SignIn); setSignInMode(SignInMode.UsingRecoveryPhrase); setRecoveryPhrase(''); setDisplayName(''); setIsLoading(false); }} onLinkDeviceButtonClicked={() => { + setRegistrationPhase(RegistrationPhase.SignIn); setSignInMode(SignInMode.LinkDevice); setRecoveryPhrase(''); setDisplayName(''); diff --git a/ts/components/session/registration/SignUpTab.tsx b/ts/components/session/registration/SignUpTab.tsx index df4d1d0a0..530ab53cc 100644 --- a/ts/components/session/registration/SignUpTab.tsx +++ b/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 (
-
{allUsersAreRandomly}
); @@ -55,8 +54,8 @@ const SignUpSessionIDShown = (props: { continueSignUp: () => void }) => {
{window.i18n('yourUniqueSessionID')}
- +
{window.i18n('signupSessionIDBlurb')}
@@ -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) => { { setSignUpMode(SignUpMode.SessionIDShown); + setRegistrationPhase(RegistrationPhase.CreateSessionID) }} /> );