diff --git a/_locales/en/messages.json b/_locales/en/messages.json index e727cdf72..49b27add9 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2319,7 +2319,7 @@ "message": "Display Name" }, "enterDisplayName": { - "message": "Enter Display Name" + "message": "Enter Display Name / Alias" }, "optionalPassword": { "message": "Optional Password" @@ -2359,5 +2359,11 @@ "ensuringPeaceOfMind...": { "message": " Ensuring peace of mind, one session at a time." + }, + "welcomeToYourSession": { + "message": "Welcome to your Session!" + }, + "completeSignUp": { + "message": "Complete Sign Up" } } diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 1e05ebfc0..ad07e65aa 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -115,6 +115,14 @@ @include registration-label-mixin; } + &__welcome-session { + @include registration-label-mixin; + font-size: 12px; + font-weight: 700; + line-height: 12px; + padding-top: 2em; + } + &__unique-session-id { @include registration-label-mixin; padding-top: 3em; diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx index e0b76588b..bfc26caa4 100644 --- a/ts/components/session/RegistrationTabs.tsx +++ b/ts/components/session/RegistrationTabs.tsx @@ -15,6 +15,7 @@ enum SignInMode { enum SignUpMode { Default, SessionIDShown, + EnterDetails, } enum TabType { @@ -87,6 +88,11 @@ export class RegistrationTabs extends React.Component<{}, State> { this.onSecondaryDeviceRegistered = this.onSecondaryDeviceRegistered.bind( this ); + this.onCompleteSignUpClick = this.onCompleteSignUpClick.bind(this); + this.handlePressEnter = this.handlePressEnter.bind(this); + this.handleContinueYourSessionClick = this.handleContinueYourSessionClick.bind( + this + ); this.state = { selectedTab: TabType.Create, @@ -177,6 +183,14 @@ export class RegistrationTabs extends React.Component<{}, State> { selectedTab: tabType, signInMode: SignInMode.Default, signUpMode: SignUpMode.Default, + displayName: '', + password: '', + validatePassword: '', + passwordErrorString: '', + passwordFieldsMatch: false, + mnemonicSeed: '', + hexGeneratedPubKey: '', + primaryDevicePubKey: '', }); }; @@ -209,25 +223,44 @@ export class RegistrationTabs extends React.Component<{}, State> { private renderSignUp() { const { signUpMode } = this.state; - if (signUpMode === SignUpMode.Default) { - return ( -
- {this.renderSignUpHeader()} - {this.renderSignUpButton()} -
- ); - } else { - return ( -
- {this.renderSignUpHeader()} -
- {window.i18n('yourUniqueSessionID')} + switch (signUpMode) { + case SignUpMode.Default: + return ( +
+ {this.renderSignUpHeader()} + {this.renderSignUpButton()}
- {this.renderEnterSessionID(false, this.state.hexGeneratedPubKey)} - {this.renderSignUpButton()} - {this.getRenderTermsConditionAgreement()} -
- ); + ); + case SignUpMode.SessionIDShown: + return ( +
+ {this.renderSignUpHeader()} +
+ {window.i18n('yourUniqueSessionID')} +
+ {this.renderEnterSessionID(false, this.state.hexGeneratedPubKey)} + {this.renderSignUpButton()} + {this.getRenderTermsConditionAgreement()} +
+ ); + + default: + return ( +
+
+ {window.i18n('welcomeToYourSession')} +
+ + {this.renderRegistrationContent()} + { + this.onCompleteSignUpClick(); + }} + buttonType={SessionButtonType.FullGreen} + text={window.i18n('completeSignUp')} + /> +
+ ); } } @@ -291,11 +324,14 @@ export class RegistrationTabs extends React.Component<{}, State> { private onSignUpGetStartedClick() { this.setState({ - selectedTab: TabType.SignIn, - signInMode: SignInMode.UsingSeed, + signUpMode: SignUpMode.EnterDetails, }); } + private onCompleteSignUpClick() { + this.register('english').ignore(); + } + private renderSignIn() { return (
@@ -308,7 +344,7 @@ export class RegistrationTabs extends React.Component<{}, State> { } private renderRegistrationContent() { - const { signInMode } = this.state; + const { signInMode, signUpMode } = this.state; if (signInMode === SignInMode.UsingSeed) { return ( @@ -317,41 +353,19 @@ export class RegistrationTabs extends React.Component<{}, State> { label={window.i18n('mnemonicSeed')} type="password" placeholder={window.i18n('enterSeed')} - value={this.state.mnemonicSeed} enableShowHide={true} onValueChanged={(val: string) => { this.onSeedChanged(val); }} - /> - { - this.onDisplayNameChanged(val); - }} - /> - { - this.onPasswordChanged(val); - }} - /> - - { - this.onPasswordVerifyChanged(val); + onEnterPressed={() => { + this.handlePressEnter(); }} /> + {this.renderNamePasswordAndVerifyPasswordFields()}
); - } else if (signInMode === SignInMode.LinkingDevice) { + } + if (signInMode === SignInMode.LinkingDevice) { return (
@@ -360,9 +374,59 @@ export class RegistrationTabs extends React.Component<{}, State> { {this.renderEnterSessionID(true)}
); - } else { - return null; } + if (signUpMode === SignUpMode.EnterDetails) { + return ( +
+ {this.renderNamePasswordAndVerifyPasswordFields()}; +
+ ); + } + + return null; + } + + private renderNamePasswordAndVerifyPasswordFields() { + return ( +
+ { + this.onDisplayNameChanged(val); + }} + onEnterPressed={() => { + this.handlePressEnter(); + }} + /> + + { + this.onPasswordChanged(val); + }} + onEnterPressed={() => { + this.handlePressEnter(); + }} + /> + + { + this.onPasswordVerifyChanged(val); + }} + onEnterPressed={() => { + this.handlePressEnter(); + }} + /> +
+ ); } private renderEnterSessionID(contentEditable: boolean, text?: string) { @@ -436,15 +500,19 @@ export class RegistrationTabs extends React.Component<{}, State> { ); } + private handleContinueYourSessionClick() { + if (this.state.signInMode === SignInMode.UsingSeed) { + this.register('english').ignore(); + } else { + this.registerSecondaryDevice().ignore(); + } + } + private renderContinueYourSessionButton() { return ( { - if (this.state.signInMode === SignInMode.UsingSeed) { - this.register('english').ignore(); - } else { - this.registerSecondaryDevice().ignore(); - } + this.handleContinueYourSessionClick(); }} buttonType={SessionButtonType.FullGreen} text={window.i18n('continueYourSession')} @@ -488,6 +556,21 @@ export class RegistrationTabs extends React.Component<{}, State> { ); } + private handlePressEnter() { + const { signInMode, signUpMode } = this.state; + if (signUpMode === SignUpMode.EnterDetails) { + this.onCompleteSignUpClick(); + + return; + } + + if (signInMode === SignInMode.UsingSeed) { + this.handleContinueYourSessionClick(); + + return; + } + } + private trim(value: string) { return value ? value.trim() : value; } diff --git a/ts/components/session/SessionInput.tsx b/ts/components/session/SessionInput.tsx index 8bb1be1e0..b4789ae9a 100644 --- a/ts/components/session/SessionInput.tsx +++ b/ts/components/session/SessionInput.tsx @@ -10,6 +10,7 @@ interface Props { placeholder: string; enableShowHide?: boolean; onValueChanged?: any; + onEnterPressed?: any; } interface State { @@ -59,6 +60,12 @@ export class SessionInput extends React.PureComponent { className={classNames( enableShowHide ? 'session-input-floating-label-show-hide' : '' )} + onKeyPress={event => { + event.persist(); + if (event.key === 'Enter' && this.props.onEnterPressed) { + this.props.onEnterPressed(); + } + }} /> {enableShowHide && this.renderShowHideButton()}