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()}