add registration tabs and display signin with mnemonic seed

stylesheets/_session.scss

@@ -58,11 +58,13 @@ $session-opaque-dark-2: rgba(0, 0, 0, 0.37);
 $session-opaque-dark-3: rgba(0, 0, 0, 0.5);
 
 $session-color-white: #fff;
+$session-color-dark-grey: #353535;
 $session-color-black: #000;
 $session-color-danger: #ff4538;
 $session-color-primary: $session-shade-13;
 $session-color-secondary: $session-shade-16;
 $session-color-warning: $session-shade-17;
+$session-color-light-grey: #a0a0a0;
 
 $session-shadow-opacity: 0.15;
 $session-overlay-opacity: 0.3;

ts/components/session/RegistrationTabs.tsx

@@ -0,0 +1,249 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { LocalizerType } from '../../types/Util';
+import { SessionInput } from './SessionInput';
+import { SessionButton, SessionButtonTypes } from './SessionButton';
+
+interface Props {
+  i18n: LocalizerType;
+  //onItemClick?: (event: ItemClickEvent) => void;
+}
+
+enum SignInMode {
+  Default = 'Default',
+  UsingSeed = 'UsingSeed',
+  LinkingDevice = 'LinkingDevice',
+}
+
+interface State {
+  selectedTab: 'create' | 'signin';
+  signInMode: SignInMode;
+  seed: string;
+  displayName: string;
+  password: string;
+  validatePassword: string;
+}
+
+interface TabSelectEvent {
+  type: 'create' | 'signin';
+}
+
+
+
+const Tab = ({
+  isSelected,
+  label,
+  onSelect,
+  type,
+}: {
+  isSelected: boolean;
+  label: string;
+  onSelect?: (event: TabSelectEvent) => void;
+  type: 'create' | 'signin';
+}) => {
+  const handleClick = onSelect
+    ? () => {
+      onSelect({ type });
+    }
+    : undefined;
+
+  return (
+    <div
+      className={classNames(
+        'registration-container__tab',
+        isSelected ? 'registration-container__tab--active' : null
+      )}
+      onClick={handleClick}
+      role="tab"
+    >
+      {label}
+    </div>
+  );
+};
+
+export class RegistrationTabs extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props);
+
+    this.onSeedChanged = this.onSeedChanged.bind(this);
+    this.onDisplayNameChanged = this.onDisplayNameChanged.bind(this);
+    this.onPasswordChanged = this.onPasswordChanged.bind(this);
+    this.onPasswordVerifyChanged = this.onPasswordVerifyChanged.bind(this);
+
+    this.state = {
+      selectedTab: 'create',
+      signInMode: SignInMode.Default,
+      seed: '',
+      displayName: '',
+      password: '',
+      validatePassword: '',
+    };
+  }
+
+
+
+  public render() {
+    return this.renderTabs();
+  }
+
+  private renderTabs() {
+    const { selectedTab } = this.state;
+
+    return (
+      <div className="registration-container">
+        <div className="registration-container__tab-container">
+          <Tab
+            label="Create Account"
+            type="create"
+            isSelected={selectedTab === 'create'}
+            onSelect={this.handleTabSelect}
+          />
+          <Tab
+            label="Sign In"
+            type="signin"
+            isSelected={selectedTab === 'signin'}
+            onSelect={this.handleTabSelect}
+          />
+        </div>
+        {this.renderSections()}
+      </div>
+    );
+  }
+
+  private readonly handleTabSelect = (event: TabSelectEvent): void => {
+    this.setState({ selectedTab: event.type });
+  };
+
+  private onSeedChanged(val: string) {
+    this.setState({ seed: val });
+  }
+
+  private onDisplayNameChanged(val: string) {
+    this.setState({ displayName: val });
+  }
+
+  private onPasswordChanged(val: string) {
+    this.setState({ password: val });
+  }
+
+  private onPasswordVerifyChanged(val: string) {
+    this.setState({ validatePassword: val });
+  }
+
+  private renderSections() {
+    const { selectedTab } = this.state;
+    if (selectedTab === 'create') {
+      return <div className="">TODO CREATE</div>;
+    }
+
+    return this.renderSignIn();
+  }
+
+  private renderSignIn() {
+    const { signInMode } = this.state;
+
+    return (
+      <div className="registration-container__content">
+
+        <div className={classNames(
+          "entry-fields",
+          signInMode !== SignInMode.UsingSeed ? 'gone' : '')
+        }>
+          <SessionInput
+            label="Mnemonic Seed"
+            type="password"
+            placeholder="Enter Seed"
+            i18n={this.props.i18n}
+            value={this.state.seed}
+            enableShowHide={true}
+            onValueChanged={(val: string) => this.onSeedChanged(val)}
+          />
+          <SessionInput
+            label="Display Name"
+            type="text"
+            placeholder="Enter Optional Display Name"
+            i18n={this.props.i18n}
+            value={this.state.displayName}
+            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)}
+
+          />
+          <SessionInput
+            label="Verify Password"
+            type="password"
+            placeholder="Optional Password"
+            i18n={this.props.i18n}
+            onValueChanged={(val: string) => this.onPasswordVerifyChanged(val)}
+
+          />
+
+        </div>
+
+        {this.renderSignInButtons()}
+        {this.renderTermsConditionAgreement()}
+
+      </div>);
+  }
+
+  private renderSignInButtons() {
+    const { signInMode } = this.state;
+
+    let greenButtonType: any;
+    let greenText: string;
+    let whiteButtonText: string;
+    if (signInMode !== SignInMode.Default) {
+      greenButtonType = SessionButtonTypes.FullGreen;
+      greenText = 'Continue Your Session';
+    }
+    else {
+      greenButtonType = SessionButtonTypes.Green;
+      greenText = 'Restore Using Seed';
+    }
+    if (signInMode === SignInMode.LinkingDevice) {
+      whiteButtonText = 'Restore Using Seed'
+    }
+    else {
+      whiteButtonText = 'Link Device To Existing Account'
+    }
+
+    return (
+      <div>
+        <SessionButton
+          onClick={() => {
+            this.setState({
+              signInMode: SignInMode.UsingSeed
+            })
+          }}
+          buttonType={greenButtonType}
+          text={greenText}
+        />
+        <div className='or-signin-buttons'>or</div>
+        <SessionButton
+          onClick={() => {
+            this.setState({
+              signInMode: SignInMode.LinkingDevice
+            })
+          }}
+          buttonType={SessionButtonTypes.White}
+          text={whiteButtonText}
+        />
+      </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>
+    )
+    // FIXME link to our Terms and Conditions and privacy statement
+  };
+}

ts/components/session/SessionInput.tsx

@@ -7,8 +7,10 @@ interface Props {
   i18n: LocalizerType;
   label: string;
   type: string;
+  value?: string;
   placeholder: string;
   enableShowHide?: boolean;
+  onValueChanged?: any;
 }
 
 interface State {
@@ -29,7 +31,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    const { placeholder, type, label, enableShowHide } = this.props;
+    const { placeholder, type, label, value, enableShowHide } = this.props;
     const { inputValue, forceShow } = this.state;
 
     const correctType = forceShow ? 'text' : type;
@@ -50,10 +52,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
           id="floatField"
           type={correctType}
           placeholder={placeholder}
-          value={inputValue}
+          value={value}
-          onBlur={e => {
-            this.updateInputValue(e);
-          }}
           onChange={e => {
             this.updateInputValue(e);
           }}
@@ -74,10 +73,13 @@ export class SessionInput extends React.PureComponent<Props, State> {
   }
 
   private updateInputValue(e: any) {
+    e.preventDefault();
     this.setState({
       inputValue: e.target.value,
     });
 
-    e.preventDefault();
+    if (this.props.onValueChanged) {
+      this.props.onValueChanged(e.target.value);
+    }
   }
 }

ts/components/session/SessionRegistrationView.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { SessionButton, SessionButtonTypes } from './SessionButton';
 import { AccentText } from './AccentText';
-import { SessionInput } from './SessionInput';
 //import classNames from 'classnames';
 
 import { LocalizerType } from '../../types/Util';
+import { RegistrationTabs } from './RegistrationTabs';
 
 declare global {
   interface Window {
@@ -39,7 +38,7 @@ export class SessionRegistrationView extends React.Component<Props> {
     //const i18n = this.props.i18n;
     //const cancelText = i18n('cancel');
 
-    const { showSubtitle } = this.props;
+    const { showSubtitle, i18n } = this.props;
 
     return (
       <div className="session-content">
@@ -47,87 +46,23 @@ export class SessionRegistrationView extends React.Component<Props> {
           <AccentText showSubtitle={showSubtitle || true} />
         </div>
         <div className="session-content-registration">
-          <div className="entry-fields">
+          <RegistrationTabs i18n={i18n} >
-            <SessionInput
-              label="Mnemonic Seed"
-              type="password"
-              placeholder="Enter Seed"
-              i18n={this.props.i18n}
-              enableShowHide={true}
-            />
-            <SessionInput
-              label="Display Name"
-              type="text"
-              placeholder="Enter Optional Display Name"
-              i18n={this.props.i18n}
-            />
-            <SessionInput
-              label="Optional Password"
-              type="password"
-              placeholder="Enter Optional Password"
-              i18n={this.props.i18n}
-            />
-            <SessionInput
-              label="Verify Password"
-              type="password"
-              placeholder="Optional Password"
-              i18n={this.props.i18n}
-            />
-          </div>
 
-          <SessionButton
+          </RegistrationTabs>
-            onClick={() => {
-              alert('TODO');
-            }}
-            buttonType={SessionButtonTypes.FullGreen}
-            text="Continue Your Session"
-          />
-          <div>or</div>
-          <SessionButton
-            onClick={() => {
-              alert('TODO');
-            }}
-            buttonType={SessionButtonTypes.White}
-            text="Link Device To Existing Account"
-          />
         </div>
       </div>
     );
   }
 
-  /*private renderAvatar() {
-    const avatarPath = this.props.avatarPath;
-    const color = this.props.avatarColor;
-
-    return (
-      <Avatar
-        avatarPath={avatarPath}
-        color={color}
-        conversationType="direct"
-        i18n={this.props.i18n}
-        name={this.props.profileName}
-        phoneNumber={this.props.pubkey}
-        profileName={this.props.profileName}
-        size={80}
-      />
-    );
-  }
-*/
   private onKeyUp(event: any) {
     switch (event.key) {
       case 'Enter':
         break;
       case 'Esc':
       case 'Escape':
-        //this.closeDialog();
         break;
       default:
     }
   }
 
-  /*rivate closeDialog() {
-    window.removeEventListener('keyup', this.onKeyUp);
-    this.props.onClose();
-  }
-*/
 }