@ -1,39 +1,23 @@
import React from 'react' ; import React from 'react' ;
import classNames from 'classnames' ;
import { SessionInput } from './SessionInput' ;
import { import {
SessionButton ,
SessionButton ,
SessionButtonColor ,
SessionButtonColor ,
SessionButtonType ,
SessionButtonType ,
} from './SessionButton' ; } from '../SessionButton' ;
import { trigger } from '../../shims/events' ; import { trigger } from '../../../shims/events' ;
import { SessionHtmlRenderer } from './SessionHTMLRenderer' ; import { StringUtils , ToastUtils , UserUtils } from '../../../session/utils' ;
import { SessionIdEditable } from './SessionIdEditable' ; import { ConversationController } from '../../../session/conversations' ;
import { StringUtils , ToastUtils , UserUtils } from '../../session/utils' ; import { PasswordUtil } from '../../../util' ;
import { lightTheme } from '../../state/ducks/SessionTheme' ; import { removeAll } from '../../../data/data' ;
import { ConversationController } from '../../session/conversations' ; import { SignUpMode , SignUpTab } from './SignUpTab' ;
import { PasswordUtil } from '../../util' ; import { SignInMode } from './SignInTab' ;
import { removeAll } from '../../data/data' ; import { RegistrationUserDetails } from './RegistrationUserDetails' ;
import { TermsAndConditions } from './TermsAndConditions' ;
import { TabLabel , TabType } from './TabLabel' ;
export const MAX_USERNAME_LENGTH = 20 ; export const MAX_USERNAME_LENGTH = 20 ;
enum SignInMode {
Default ,
UsingRecoveryPhrase ,
}
enum SignUpMode {
Default ,
SessionIDShown ,
EnterDetails ,
}
enum TabType {
Create ,
SignIn ,
}
interface State { interface State {
selectedTab : TabType ;
selectedTab : TabType ;
signInMode : SignInMode ;
signInMode : SignInMode ;
@ -47,46 +31,11 @@ interface State {
recoveryPhrase : string ;
recoveryPhrase : string ;
generatedRecoveryPhrase : string ;
generatedRecoveryPhrase : string ;
hexGeneratedPubKey : string ;
hexGeneratedPubKey : string ;
primaryDevicePubKey : string ;
mnemonicError : string | undefined ;
mnemonicError : string | undefined ;
displayNameError : string | undefined ;
displayNameError : string | undefined ;
loading : boolean ;
} }
const Tab = ( {
isSelected ,
label ,
onSelect ,
type ,
} : {
isSelected : boolean ;
label : string ;
onSelect ? : ( event : TabType ) = > void ;
type : TabType ;
} ) = > {
const handleClick = onSelect
? ( ) = > {
onSelect ( type ) ;
}
: undefined ;
return (
< div
className = { classNames (
'session-registration__tab' ,
isSelected ? 'session-registration__tab--active' : null
) }
onClick = { handleClick }
role = "tab"
>
{ label }
< / div >
) ;
} ;
export class RegistrationTabs extends React . Component < any , State > { export class RegistrationTabs extends React . Component < any , State > {
private readonly accountManager : any ;
constructor ( props : any ) {
constructor ( props : any ) {
super ( props ) ;
super ( props ) ;
@ -94,21 +43,14 @@ export class RegistrationTabs extends React.Component<any, State> {
this . onDisplayNameChanged = this . onDisplayNameChanged . bind ( this ) ;
this . onDisplayNameChanged = this . onDisplayNameChanged . bind ( this ) ;
this . onPasswordChanged = this . onPasswordChanged . bind ( this ) ;
this . onPasswordChanged = this . onPasswordChanged . bind ( this ) ;
this . onPasswordVerifyChanged = this . onPasswordVerifyChanged . bind ( this ) ;
this . onPasswordVerifyChanged = this . onPasswordVerifyChanged . bind ( this ) ;
this . onSignUpGenerateSessionIDClick = this . onSignUpGenerateSessionIDClick . bind (
this
) ;
this . onSignUpGetStartedClick = this . onSignUpGetStartedClick . bind ( this ) ;
this . onSecondDeviceSessionIDChanged = this . onSecondDeviceSessionIDChanged . bind (
this
) ;
this . onCompleteSignUpClick = this . onCompleteSignUpClick . bind ( this ) ;
this . handlePressEnter = this . handlePressEnter . bind ( this ) ;
this . handlePressEnter = this . handlePressEnter . bind ( this ) ;
this . handleContinueYourSessionClick = this . handleContinueYourSessionClick . bind (
this . handleContinueYourSessionClick = this . handleContinueYourSessionClick . bind (
this
this
) ;
) ;
this . onCompleteSignUpClick = this . onCompleteSignUpClick . bind ( this ) ;
this . state = {
this . state = {
selectedTab : TabType. Create ,
selectedTab : TabType.SignUp ,
signInMode : SignInMode.Default ,
signInMode : SignInMode.Default ,
signUpMode : SignUpMode.Default ,
signUpMode : SignUpMode.Default ,
secretWords : undefined ,
secretWords : undefined ,
@ -120,14 +62,9 @@ export class RegistrationTabs extends React.Component<any, State> {
recoveryPhrase : '' ,
recoveryPhrase : '' ,
generatedRecoveryPhrase : '' ,
generatedRecoveryPhrase : '' ,
hexGeneratedPubKey : '' ,
hexGeneratedPubKey : '' ,
primaryDevicePubKey : '' ,
mnemonicError : undefined ,
mnemonicError : undefined ,
displayNameError : undefined ,
displayNameError : undefined ,
loading : false ,
} ;
} ;
this . accountManager = window . getAccountManager ( ) ;
// Clean status in case the app closed unexpectedly
}
}
public componentDidMount() {
public componentDidMount() {
@ -137,25 +74,19 @@ export class RegistrationTabs extends React.Component<any, State> {
public render() {
public render() {
const { selectedTab } = this . state ;
const { selectedTab } = this . state ;
// tslint:disable: use-simple-attributes
const createAccount = window . i18n ( 'createAccount' ) ;
const signIn = window . i18n ( 'signIn' ) ;
const isCreateSelected = selectedTab === TabType . Create ;
const isSignInSelected = selectedTab === TabType . SignIn ;
return (
return (
< div className = "session-registration-container" >
< div className = "session-registration-container" >
< div className = "session-registration__tab-container" >
< div className = "session-registration__tab-container" >
< Tab
< TabLabel
label = { createAccount }
type = { TabType . SignUp }
type = { TabType . Create }
isSelected = { selectedTab === TabType . SignUp }
isSelected = { isCreateSelected }
onSelect = { this . handleTabSelect }
onSelect = { this . handleTabSelect }
/ >
/ >
< Tab
< TabLabel
label = { signIn }
type = { TabType . SignIn }
type = { TabType . SignIn }
isSelected = { i sSignInS elected}
isSelected = { Tab === TabType . SignIn }
onSelect = { this . handleTabSelect }
onSelect = { this . handleTabSelect }
/ >
/ >
< / div >
< / div >
@ -167,7 +98,9 @@ export class RegistrationTabs extends React.Component<any, State> {
private async generateMnemonicAndKeyPair() {
private async generateMnemonicAndKeyPair() {
if ( this . state . generatedRecoveryPhrase === '' ) {
if ( this . state . generatedRecoveryPhrase === '' ) {
const language = 'english' ;
const language = 'english' ;
const mnemonic = await this . accountManager . generateMnemonic ( language ) ;
const mnemonic = await window
. getAccountManager ( )
. generateMnemonic ( language ) ;
let seedHex = window . mnemonic . mn_decode ( mnemonic , language ) ;
let seedHex = window . mnemonic . mn_decode ( mnemonic , language ) ;
// handle shorter than 32 bytes seeds
// handle shorter than 32 bytes seeds
@ -201,7 +134,6 @@ export class RegistrationTabs extends React.Component<any, State> {
passwordErrorString : '' ,
passwordErrorString : '' ,
passwordFieldsMatch : false ,
passwordFieldsMatch : false ,
recoveryPhrase : '' ,
recoveryPhrase : '' ,
primaryDevicePubKey : '' ,
mnemonicError : undefined ,
mnemonicError : undefined ,
displayNameError : undefined ,
displayNameError : undefined ,
} ) ;
} ) ;
@ -239,143 +171,54 @@ export class RegistrationTabs extends React.Component<any, State> {
private renderSections() {
private renderSections() {
const { selectedTab } = this . state ;
const { selectedTab } = this . state ;
if ( selectedTab === TabType . Create ) {
if ( selectedTab === TabType . SignUp ) {
return this . renderSignUp ( ) ;
return (
< SignUpTab
signUpMode = { this . state . signUpMode }
continueSignUp = { ( ) = > {
this . setState ( {
signUpMode : SignUpMode.EnterDetails ,
} ) ;
} }
createSessionID = { ( ) = > {
this . setState (
{
signUpMode : SignUpMode.SessionIDShown ,
} ,
( ) = > {
window . Session . setNewSessionID ( this . state . hexGeneratedPubKey ) ;
}
) ;
} }
onCompleteSignUpClick = { this . onCompleteSignUpClick }
displayName = { this . state . displayName }
password = { this . state . password }
passwordErrorString = { this . state . passwordErrorString }
passwordFieldsMatch = { this . state . passwordFieldsMatch }
displayNameError = { this . state . displayNameError }
recoveryPhrase = { this . state . recoveryPhrase }
onPasswordVerifyChanged = { this . onPasswordVerifyChanged }
handlePressEnter = { this . handlePressEnter }
onPasswordChanged = { this . onPasswordChanged }
onDisplayNameChanged = { this . onDisplayNameChanged }
onSeedChanged = { this . onSeedChanged }
/ >
) ;
}
}
return this . renderSignIn ( ) ;
return this . renderSignIn ( ) ;
}
}
private renderSignUp() {
const { signUpMode } = this . state ;
switch ( signUpMode ) {
case SignUpMode . Default :
return (
< div className = "session-registration__content" >
{ this . renderSignUpHeader ( ) }
{ this . renderSignUpButton ( ) }
< / div >
) ;
case SignUpMode . SessionIDShown :
return (
< div className = "session-registration__content" >
{ this . renderSignUpHeader ( ) }
< div className = "session-registration__unique-session-id" >
{ window . i18n ( 'yourUniqueSessionID' ) }
< / div >
{ this . renderEnterSessionID ( false ) }
{ this . renderSignUpButton ( ) }
{ this . getRenderTermsConditionAgreement ( ) }
< / div >
) ;
default :
const {
passwordErrorString ,
passwordFieldsMatch ,
displayNameError ,
displayName ,
password ,
} = this . state ;
let enableCompleteSignUp = true ;
const displayNameOK = ! displayNameError && ! ! displayName ; //display name required
const passwordsOK =
! password || ( ! passwordErrorString && passwordFieldsMatch ) ; // password is valid if empty, or if no error and fields are matching
enableCompleteSignUp = displayNameOK && passwordsOK ;
return (
< div className = "session-registration__content" >
< div className = "session-registration__welcome-session" >
{ window . i18n ( 'welcomeToYourSession' ) }
< / div >
{ this . renderRegistrationContent ( ) }
< SessionButton
onClick = { this . onCompleteSignUpClick }
buttonType = { SessionButtonType . Brand }
buttonColor = { SessionButtonColor . Green }
text = { window . i18n ( 'getStarted' ) }
disabled = { ! enableCompleteSignUp }
/ >
< / div >
) ;
}
}
private getRenderTermsConditionAgreement() {
private getRenderTermsConditionAgreement() {
const { selectedTab , signInMode , signUpMode } = this . state ;
const { selectedTab , signInMode } = this . state ;
if ( selectedTab === TabType . Create ) {
if ( selectedTab !== TabType . SignUp ) {
return signUpMode !== SignUpMode . Default
return signInMode !== SignInMode . Default ? < TermsAndConditions / > : null ;
? this . renderTermsConditionAgreement ( )
: null ;
} else {
return signInMode !== SignInMode . Default
? this . renderTermsConditionAgreement ( )
: null ;
}
}
}
return < > < / > ;
private renderSignUpHeader() {
const allUsersAreRandomly = window . i18n ( 'allUsersAreRandomly...' ) ;
return (
< div className = "session-description-long" > { allUsersAreRandomly } < / div >
) ;
}
private renderSignUpButton() {
const { signUpMode } = this . state ;
let buttonType : SessionButtonType ;
let buttonColor : SessionButtonColor ;
let buttonText : string ;
if ( signUpMode !== SignUpMode . Default ) {
buttonType = SessionButtonType . Brand ;
buttonColor = SessionButtonColor . Green ;
buttonText = window . i18n ( 'continue' ) ;
} else {
buttonType = SessionButtonType . BrandOutline ;
buttonColor = SessionButtonColor . Green ;
buttonText = window . i18n ( 'generateSessionID' ) ;
}
return (
< SessionButton
onClick = { ( ) = > {
if ( signUpMode === SignUpMode . Default ) {
this . onSignUpGenerateSessionIDClick ( ) ;
} else {
this . onSignUpGetStartedClick ( ) ;
}
} }
buttonType = { buttonType }
buttonColor = { buttonColor }
text = { buttonText }
/ >
) ;
}
private onSignUpGenerateSessionIDClick() {
this . setState (
{
signUpMode : SignUpMode.SessionIDShown ,
} ,
( ) = > {
window . Session . setNewSessionID ( this . state . hexGeneratedPubKey ) ;
}
) ;
}
private onSignUpGetStartedClick() {
this . setState ( {
signUpMode : SignUpMode.EnterDetails ,
} ) ;
}
}
private onCompleteSignUpClick() {
private onCompleteSignUpClick() {
void this . register ( 'english' ) ;
void this . register ( ) ;
}
}
private renderSignIn() {
private renderSignIn() {
@ -390,133 +233,60 @@ export class RegistrationTabs extends React.Component<any, State> {
}
}
private renderRegistrationContent() {
private renderRegistrationContent() {
const { signInMode , signUpMode } = this . state ;
const { signInMode } = this . state ;
if ( signInMode === SignInMode . UsingRecoveryPhrase ) {
const isSignInNotDefault = signInMode !== SignInMode . Default ;
return (
< div className = { classNames ( 'session-registration__entry-fields' ) } >
if ( isSignInNotDefault ) {
< SessionInput
const sharedProps = {
label = { window . i18n ( 'recoveryPhrase' ) }
displayName : this.state.displayName ,
type = "password"
handlePressEnter : this.handlePressEnter ,
autoFocus = { true }
onDisplayNameChanged : this.onDisplayNameChanged ,
placeholder = { window . i18n ( 'enterRecoveryPhrase' ) }
onPasswordChanged : this.onPasswordChanged ,
enableShowHide = { true }
onPasswordVerifyChanged : this.onPasswordVerifyChanged ,
onValueChanged = { ( val : string ) = > {
onSeedChanged : this.onSeedChanged ,
this . onSeedChanged ( val ) ;
password : this.state.password ,
} }
passwordErrorString : this.state.passwordErrorString ,
onEnterPressed = { ( ) = > {
passwordFieldsMatch : this.state.passwordFieldsMatch ,
this . handlePressEnter ( ) ;
recoveryPhrase : this.state.recoveryPhrase ,
} }
stealAutoFocus : true ,
theme = { lightTheme }
} ;
if ( signInMode === SignInMode . UsingRecoveryPhrase ) {
return (
< RegistrationUserDetails
showDisplayNameField = { true }
showSeedField = { true }
{ . . . sharedProps }
/ >
/ >
{ this . renderNamePasswordAndVerifyPasswordFields ( false ) }
) ;
< / div >
}
) ;
}
if ( signUpMode === SignUpMode . EnterDetails ) {
if ( signInMode === SignInMode . LinkDevice ) {
return (
return (
< div className = { classNames ( 'session-registration__entry-fields' ) } >
< RegistrationUserDetails
{ this . renderNamePasswordAndVerifyPasswordFields ( true ) }
showDisplayNameField = { false }
< / div >
showSeedField = { true }
) ;
{ . . . sharedProps }
/ >
) ;
}
}
}
return null ;
return null ;
}
}
private renderNamePasswordAndVerifyPasswordFields (
stealAutoFocus : boolean = false
) {
const { password , passwordFieldsMatch } = this . state ;
const passwordsDoNotMatch =
! passwordFieldsMatch && this . state . password
? window . i18n ( 'passwordsDoNotMatch' )
: undefined ;
return (
< div className = "inputfields" >
< SessionInput
autoFocus = { stealAutoFocus }
label = { window . i18n ( 'displayName' ) }
type = "text"
placeholder = { window . i18n ( 'enterDisplayName' ) }
value = { this . state . displayName }
maxLength = { MAX_USERNAME_LENGTH }
onValueChanged = { ( val : string ) = > {
this . onDisplayNameChanged ( val ) ;
} }
onEnterPressed = { ( ) = > {
this . handlePressEnter ( ) ;
} }
theme = { lightTheme }
/ >
< SessionInput
label = { window . i18n ( 'password' ) }
error = { this . state . passwordErrorString }
type = "password"
placeholder = { window . i18n ( 'enterOptionalPassword' ) }
onValueChanged = { ( val : string ) = > {
this . onPasswordChanged ( val ) ;
} }
onEnterPressed = { ( ) = > {
this . handlePressEnter ( ) ;
} }
theme = { lightTheme }
/ >
{ ! ! password && (
< SessionInput
label = { window . i18n ( 'confirmPassword' ) }
error = { passwordsDoNotMatch }
type = "password"
placeholder = { window . i18n ( 'confirmPassword' ) }
onValueChanged = { ( val : string ) = > {
this . onPasswordVerifyChanged ( val ) ;
} }
onEnterPressed = { ( ) = > {
this . handlePressEnter ( ) ;
} }
theme = { lightTheme }
/ >
) }
< / div >
) ;
}
private renderEnterSessionID ( contentEditable : boolean ) {
const enterSessionIDHere = window . i18n ( 'enterSessionIDHere' ) ;
return (
< SessionIdEditable
editable = { contentEditable }
placeholder = { enterSessionIDHere }
onChange = { ( value : string ) = > {
this . onSecondDeviceSessionIDChanged ( value ) ;
} }
/ >
) ;
}
private onSecondDeviceSessionIDChanged ( value : string ) {
this . setState ( {
primaryDevicePubKey : value ,
} ) ;
}
private renderSignInButtons() {
private renderSignInButtons() {
const { signInMode } = this . state ;
const { signInMode } = this . state ;
// const or = window.i18n('or');
const or = window . i18n ( 'or' ) ;
if ( signInMode === SignInMode . Default ) {
if ( signInMode === SignInMode . Default ) {
return (
return (
< div >
< div >
{ this . renderRestoreUsingRecoveryPhraseButton (
{ this . renderRestoreUsingRecoveryPhraseButton ( ) }
SessionButtonType . BrandOutline ,
< div className = "or" > { or } < / div >
SessionButtonColor . Green
{ this . renderLinkDeviceButton ( ) }
) }
< / div >
< / div >
) ;
) ;
}
}
@ -532,41 +302,51 @@ export class RegistrationTabs extends React.Component<any, State> {
}
}
private renderTermsConditionAgreement() {
private renderTermsConditionAgreement() {
return (
return < TermsAndConditions / > ;
< div className = "session-terms-conditions-agreement" >
< SessionHtmlRenderer html = { window . i18n ( 'ByUsingThisService...' ) } / >
< / div >
) ;
}
}
private handleContinueYourSessionClick() {
private handleContinueYourSessionClick() {
if ( this . state . signInMode === SignInMode . UsingRecoveryPhrase ) {
if ( this . state . signInMode === SignInMode . UsingRecoveryPhrase ) {
void this . register ( 'english' ) ;
void this . register ( ) ;
}
}
}
}
private renderRestoreUsingRecoveryPhraseButton (
private renderRestoreUsingRecoveryPhraseButton() {
buttonType : SessionButtonType ,
buttonColor : SessionButtonColor
) {
return (
return (
< SessionButton
< SessionButton
onClick = { ( ) = > {
onClick = { ( ) = > {
this . setState ( {
this . setState ( {
signInMode : SignInMode.UsingRecoveryPhrase ,
signInMode : SignInMode.UsingRecoveryPhrase ,
primaryDevicePubKey : '' ,
recoveryPhrase : '' ,
recoveryPhrase : '' ,
displayName : '' ,
displayName : '' ,
signUpMode : SignUpMode.Default ,
signUpMode : SignUpMode.Default ,
} ) ;
} ) ;
} }
} }
buttonType = { buttonTyp e}
buttonType = { SessionButtonType. BrandOutlin e}
buttonColor = { buttonColor }
buttonColor = { SessionButtonColor. Green }
text = { window . i18n ( 'restoreUsingRecoveryPhrase' ) }
text = { window . i18n ( 'restoreUsingRecoveryPhrase' ) }
/ >
/ >
) ;
) ;
}
}
private renderLinkDeviceButton() {
return (
< SessionButton
onClick = { ( ) = > {
this . setState ( {
signInMode : SignInMode.LinkDevice ,
recoveryPhrase : '' ,
displayName : '' ,
signUpMode : SignUpMode.Default ,
} ) ;
} }
buttonType = { SessionButtonType . BrandOutline }
buttonColor = { SessionButtonColor . Green }
text = { window . i18n ( 'linkDevice' ) }
/ >
) ;
}
private handlePressEnter() {
private handlePressEnter() {
const { signInMode , signUpMode } = this . state ;
const { signInMode , signUpMode } = this . state ;
if ( signUpMode === SignUpMode . EnterDetails ) {
if ( signUpMode === SignUpMode . EnterDetails ) {
@ -631,17 +411,17 @@ export class RegistrationTabs extends React.Component<any, State> {
private async resetRegistration() {
private async resetRegistration() {
await removeAll ( ) ;
await removeAll ( ) ;
await window . storage . reset ( ) ;
await window . storage . fetch ( ) ;
await window . storage . fetch ( ) ;
ConversationController . getInstance ( ) . reset ( ) ;
ConversationController . getInstance ( ) . reset ( ) ;
await ConversationController . getInstance ( ) . load ( ) ;
await ConversationController . getInstance ( ) . load ( ) ;
this . setState ( {
this . setState ( {
loading : false ,
secretWords : undefined ,
secretWords : undefined ,
} ) ;
} ) ;
}
}
private async register language : string
private async register () {
const {
const {
password ,
password ,
recoveryPhrase ,
recoveryPhrase ,
@ -705,11 +485,9 @@ export class RegistrationTabs extends React.Component<any, State> {
const isRestoringFromSeed = signInMode === SignInMode . UsingRecoveryPhrase ;
const isRestoringFromSeed = signInMode === SignInMode . UsingRecoveryPhrase ;
UserUtils . setRestoringFromSeed ( isRestoringFromSeed ) ;
UserUtils . setRestoringFromSeed ( isRestoringFromSeed ) ;
await this . accountManager . registerSingleDevice (
await window
seedToUse ,
. getAccountManager ( )
language ,
. registerSingleDevice ( seedToUse , 'english' , trimName ) ;
trimName
) ;
// if we are just creating a new account, no need to wait for a configuration message
// if we are just creating a new account, no need to wait for a configuration message
if ( ! isRestoringFromSeed ) {
if ( ! isRestoringFromSeed ) {
trigger ( 'openInbox' ) ;
trigger ( 'openInbox' ) ;
Audric Ackermann
4 years ago