add the basic of the create account tab and yarn lint

ts/components/session/RegistrationTabs.tsx

@@ -16,9 +16,14 @@ enum SignInMode {
   LinkingDevice = 'LinkingDevice',
 }
 
+enum SignUpMode {
+  Default = 'Default',
+  SessionIDGenerated = 'SessionIDGenerated',
+}
 interface State {
   selectedTab: 'create' | 'signin';
   signInMode: SignInMode;
+  signUpMode: SignUpMode;
   seed: string;
   displayName: string;
   password: string;
@@ -29,8 +34,6 @@ interface TabSelectEvent {
   type: 'create' | 'signin';
 }
 
-
-
 const Tab = ({
   isSelected,
   label,
@@ -44,8 +47,8 @@ const Tab = ({
 }) => {
   const handleClick = onSelect
     ? () => {
-      onSelect({ type });
-    }
+        onSelect({ type });
+      }
     : undefined;
 
   return (
@@ -74,6 +77,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
     this.state = {
       selectedTab: 'create',
       signInMode: SignInMode.Default,
+      signUpMode: SignUpMode.Default,
       seed: '',
       displayName: '',
       password: '',
@@ -81,8 +85,6 @@ export class RegistrationTabs extends React.Component<Props, State> {
     };
   }
 
-
-
   public render() {
     return this.renderTabs();
   }
@@ -134,22 +136,93 @@ export class RegistrationTabs extends React.Component<Props, State> {
   private renderSections() {
     const { selectedTab } = this.state;
     if (selectedTab === 'create') {
-      return <div className="">TODO CREATE</div>;
+      return this.renderSignUp();
     }
 
     return this.renderSignIn();
   }
 
-  private renderSignIn() {
-    const { signInMode } = this.state;
+  private renderSignUp() {
+    return (
+      <div className="registration-container__content">
+        {this.renderSignUpHeader()}
+
+        {this.renderSignUpButton()}
+        {this.getRenderTermsConditionAgreement()}
+      </div>
+    );
+  }
+
+  private getRenderTermsConditionAgreement() {
+    const { selectedTab, signInMode, signUpMode } = this.state;
+    if (selectedTab === 'create') {
+      if (signUpMode !== SignUpMode.Default) {
+        return this.renderTermsConditionAgreement();
+      } else {
+        return null;
+      }
+    } else {
+      if (signInMode !== SignInMode.Default) {
+        return this.renderTermsConditionAgreement();
+      } else {
+        return null;
+      }
+    }
+  }
+
+  private renderSignUpHeader() {
+    return (
+      <div className="signup-header">
+        All users are randomly generated a set of numbers that act as their
+        unique Session ID. Share your Session ID in order to chat with your
+        friends!
+      </div>
+    );
+  }
+
+  private renderSignUpButton() {
+    const { signUpMode } = this.state;
+
+    let buttonType: any;
+    let buttonText: string;
+    if (signUpMode !== SignUpMode.Default) {
+      buttonType = SessionButtonTypes.FullGreen;
+      buttonText = 'Continue Your Session';
+    } else {
+      buttonType = SessionButtonTypes.Green;
+      buttonText = 'Restore Using Seed';
+    }
+
+    return (
+      <SessionButton
+        onClick={() => {
+          this.setState({
+            signUpMode: SignUpMode.SessionIDGenerated,
+          });
+        }}
+        buttonType={buttonType}
+        text={buttonText}
+      />
+    );
+  }
 
+  private renderSignIn() {
     return (
       <div className="registration-container__content">
+        {this.renderRegistrationContent()}
+
+        {this.renderSignInButtons()}
+        {this.getRenderTermsConditionAgreement()}
+      </div>
+    );
+  }
+
+  private renderRegistrationContent() {
+    const { signInMode } = this.state;
 
-        <div className={classNames(
-          "entry-fields",
-          signInMode !== SignInMode.UsingSeed ? 'gone' : '')
-        }>
+    if (signInMode === SignInMode.UsingSeed) {
+      return (
+        <div className={classNames('entry-fields')}>
           <SessionInput
             label="Mnemonic Seed"
             type="password"
@@ -157,7 +230,9 @@ export class RegistrationTabs extends React.Component<Props, State> {
             i18n={this.props.i18n}
             value={this.state.seed}
             enableShowHide={true}
-            onValueChanged={(val: string) => this.onSeedChanged(val)}
+            onValueChanged={(val: string) => {
+              this.onSeedChanged(val);
+            }}
           />
           <SessionInput
             label="Display Name"
@@ -165,32 +240,54 @@ export class RegistrationTabs extends React.Component<Props, State> {
             placeholder="Enter Optional Display Name"
             i18n={this.props.i18n}
             value={this.state.displayName}
-            onValueChanged={(val: string) => this.onDisplayNameChanged(val)}
-
+            onValueChanged={(val: string) => {
+              this.onDisplayNameChanged(val);
+            }}
           />
           <SessionInput
             label="Optional Password"
             type="password"
             placeholder="Enter Optional Password"
             i18n={this.props.i18n}
-            onValueChanged={(val: string) => this.onPasswordChanged(val)}
-
+            onValueChanged={(val: string) => {
+              this.onPasswordChanged(val);
+            }}
           />
           <SessionInput
             label="Verify Password"
             type="password"
             placeholder="Optional Password"
             i18n={this.props.i18n}
-            onValueChanged={(val: string) => this.onPasswordVerifyChanged(val)}
-
+            onValueChanged={(val: string) => {
+              this.onPasswordVerifyChanged(val);
+            }}
           />
-
         </div>
+      );
+    } else if (signInMode === SignInMode.LinkingDevice) {
+      return (
+        <div className="">
+          <div className="signin-device-pairing-header">
+            Open the Loki Messenger App on your primary device and select
+            "Device Pairing" from the main menu. Then, enter your Session ID
+            below to sign in.
+          </div>
+          {this.renderEnterSessionID()}
+        </div>
+      );
+    } else {
+      return <div />;
+    }
+  }
 
-        {this.renderSignInButtons()}
-        {this.renderTermsConditionAgreement()}
-
-      </div>);
+  private renderEnterSessionID() {
+    return (
+      <div
+        className="signin-enter-session-id"
+        contentEditable={true}
+        placeholder="Enter your Session ID here"
+      />
+    );
   }
 
   private renderSignInButtons() {
@@ -202,16 +299,14 @@ export class RegistrationTabs extends React.Component<Props, State> {
     if (signInMode !== SignInMode.Default) {
       greenButtonType = SessionButtonTypes.FullGreen;
       greenText = 'Continue Your Session';
-    }
-    else {
+    } else {
       greenButtonType = SessionButtonTypes.Green;
       greenText = 'Restore Using Seed';
     }
     if (signInMode === SignInMode.LinkingDevice) {
-      whiteButtonText = 'Restore Using Seed'
-    }
-    else {
-      whiteButtonText = 'Link Device To Existing Account'
+      whiteButtonText = 'Restore Using Seed';
+    } else {
+      whiteButtonText = 'Link Device To Existing Account';
     }
 
     return (
@@ -219,31 +314,33 @@ export class RegistrationTabs extends React.Component<Props, State> {
         <SessionButton
           onClick={() => {
             this.setState({
-              signInMode: SignInMode.UsingSeed
-            })
+              signInMode: SignInMode.UsingSeed,
+            });
           }}
           buttonType={greenButtonType}
           text={greenText}
         />
-        <div className='or-signin-buttons'>or</div>
+        <div className="or-signin-buttons">or</div>
         <SessionButton
           onClick={() => {
             this.setState({
-              signInMode: SignInMode.LinkingDevice
-            })
+              signInMode: SignInMode.LinkingDevice,
+            });
           }}
           buttonType={SessionButtonTypes.White}
           text={whiteButtonText}
         />
-      </div>);
+      </div>
+    );
   }
 
   private renderTermsConditionAgreement() {
     return (
-      <div className='terms-conditions-agreement'>
-        By using this service, you agree to our <a>Terms and Conditions</a> and <a>Privacy Statement</a>
+      <div className="terms-conditions-agreement">
+        By using this service, you agree to our <a>Terms and Conditions</a> and{' '}
+        <a>Privacy Statement</a>
       </div>
-    )
+    );
     // FIXME link to our Terms and Conditions and privacy statement
-  };
+  }
 }

ts/components/session/SessionRegistrationView.tsx

@@ -46,9 +46,7 @@ export class SessionRegistrationView extends React.Component<Props> {
           <AccentText showSubtitle={showSubtitle || true} />
         </div>
         <div className="session-content-registration">
-          <RegistrationTabs i18n={i18n} >
-
-          </RegistrationTabs>
+          <RegistrationTabs i18n={i18n} />
         </div>
       </div>
     );
@@ -64,5 +62,4 @@ export class SessionRegistrationView extends React.Component<Props> {
       default:
     }
   }
-
 }