validate form registration on enter press

_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 <span class=\"redacted\">peace of</span> mind, one <span class=\"redacted\">session</span> at a time."
+  },
+  "welcomeToYourSession": {
+    "message": "Welcome to your Session!"
+  },
+  "completeSignUp": {
+    "message": "Complete Sign Up"
   }
 }

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;

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) {
+    switch (signUpMode) {
-      return (
+      case SignUpMode.Default:
-        <div className="session-registration__content">
+        return (
-          {this.renderSignUpHeader()}
+          <div className="session-registration__content">
-          {this.renderSignUpButton()}
+            {this.renderSignUpHeader()}
-        </div>
+            {this.renderSignUpButton()}
-      );
-    } else {
-      return (
-        <div className="session-registration__content">
-          {this.renderSignUpHeader()}
-          <div className="session-registration__unique-session-id">
-            {window.i18n('yourUniqueSessionID')}
           </div>
-          {this.renderEnterSessionID(false, this.state.hexGeneratedPubKey)}
+        );
-          {this.renderSignUpButton()}
+      case SignUpMode.SessionIDShown:
-          {this.getRenderTermsConditionAgreement()}
+        return (
-        </div>
+          <div className="session-registration__content">
-      );
+            {this.renderSignUpHeader()}
+            <div className="session-registration__unique-session-id">
+              {window.i18n('yourUniqueSessionID')}
+            </div>
+            {this.renderEnterSessionID(false, this.state.hexGeneratedPubKey)}
+            {this.renderSignUpButton()}
+            {this.getRenderTermsConditionAgreement()}
+          </div>
+        );
+
+      default:
+        return (
+          <div className="session-registration__content">
+            <div className="session-registration__welcome-session">
+              {window.i18n('welcomeToYourSession')}
+            </div>
+
+            {this.renderRegistrationContent()}
+            <SessionButton
+              onClick={() => {
+                this.onCompleteSignUpClick();
+              }}
+              buttonType={SessionButtonType.FullGreen}
+              text={window.i18n('completeSignUp')}
+            />
+          </div>
+        );
     }
   }
 
@@ -291,11 +324,14 @@ export class RegistrationTabs extends React.Component<{}, State> {
 
   private onSignUpGetStartedClick() {
     this.setState({
-      selectedTab: TabType.SignIn,
+      signUpMode: SignUpMode.EnterDetails,
-      signInMode: SignInMode.UsingSeed,
     });
   }
 
+  private onCompleteSignUpClick() {
+    this.register('english').ignore();
+  }
+
   private renderSignIn() {
     return (
       <div className="session-registration__content">
@@ -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);
             }}
-          />
+            onEnterPressed={() => {
-          <SessionInput
+              this.handlePressEnter();
-            label={window.i18n('displayName')}
-            type="text"
-            placeholder={window.i18n('enterDisplayName')}
-            value={this.state.displayName}
-            onValueChanged={(val: string) => {
-              this.onDisplayNameChanged(val);
-            }}
-          />
-          <SessionInput
-            label={window.i18n('optionalPassword')}
-            type="password"
-            placeholder={window.i18n('enterOptionalPassword')}
-            onValueChanged={(val: string) => {
-              this.onPasswordChanged(val);
-            }}
-          />
-
-          <SessionInput
-            label={window.i18n('verifyPassword')}
-            type="password"
-            placeholder={window.i18n('optionalPassword')}
-            onValueChanged={(val: string) => {
-              this.onPasswordVerifyChanged(val);
             }}
           />
+          {this.renderNamePasswordAndVerifyPasswordFields()}
         </div>
       );
-    } else if (signInMode === SignInMode.LinkingDevice) {
+    }
+    if (signInMode === SignInMode.LinkingDevice) {
       return (
         <div className="">
           <div className="session-signin-device-pairing-header">
@@ -360,9 +374,59 @@ export class RegistrationTabs extends React.Component<{}, State> {
           {this.renderEnterSessionID(true)}
         </div>
       );
-    } else {
-      return null;
     }
+    if (signUpMode === SignUpMode.EnterDetails) {
+      return (
+        <div className={classNames('session-registration__entry-fields')}>
+          {this.renderNamePasswordAndVerifyPasswordFields()};
+        </div>
+      );
+    }
+
+    return null;
+  }
+
+  private renderNamePasswordAndVerifyPasswordFields() {
+    return (
+      <div className="inputfields">
+        <SessionInput
+          label={window.i18n('displayName')}
+          type="text"
+          placeholder={window.i18n('enterDisplayName')}
+          value={this.state.displayName}
+          onValueChanged={(val: string) => {
+            this.onDisplayNameChanged(val);
+          }}
+          onEnterPressed={() => {
+            this.handlePressEnter();
+          }}
+        />
+
+        <SessionInput
+          label={window.i18n('optionalPassword')}
+          type="password"
+          placeholder={window.i18n('enterOptionalPassword')}
+          onValueChanged={(val: string) => {
+            this.onPasswordChanged(val);
+          }}
+          onEnterPressed={() => {
+            this.handlePressEnter();
+          }}
+        />
+
+        <SessionInput
+          label={window.i18n('verifyPassword')}
+          type="password"
+          placeholder={window.i18n('optionalPassword')}
+          onValueChanged={(val: string) => {
+            this.onPasswordVerifyChanged(val);
+          }}
+          onEnterPressed={() => {
+            this.handlePressEnter();
+          }}
+        />
+      </div>
+    );
   }
 
   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 (
       <SessionButton
         onClick={() => {
-          if (this.state.signInMode === SignInMode.UsingSeed) {
+          this.handleContinueYourSessionClick();
-            this.register('english').ignore();
-          } else {
-            this.registerSecondaryDevice().ignore();
-          }
         }}
         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;
   }

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<Props, State> {
           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()}