From 55e39a02b3f4e8335afe996b2d559b46b8792a52 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Fri, 6 Dec 2019 15:05:50 +1100
Subject: [PATCH] Add our custom SessionInput component and use it in the
 registration page

---
 stylesheets/_session.scss                     | 117 +++++++++++++-----
 ts/components/session/SessionInput.tsx        |  83 +++++++++++++
 .../session/SessionRegistrationView.tsx       |  46 ++++++-
 3 files changed, 211 insertions(+), 35 deletions(-)
 create mode 100644 ts/components/session/SessionInput.tsx

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 0246c879a..69ad16b81 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -270,43 +270,98 @@ $session_message-container-border-radius: 5px;
 
 .module-message__container {
   border-radius: $session_message-container-border-radius;
-}
 
-.module-message__attachment-container,
-.module-image--curved-bottom-right,
-.module-image--curved-bottom-left {
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-  border-bottom-left-radius: $session_message-container-border-radius;
-  border-bottom-right-radius: $session_message-container-border-radius;
-}
+  label {
+    user-select: none;
+  }
 
-.conversation-header .session-icon-button {
-  @include standard-icon-button();
-}
+  .module-message__attachment-container,
+  .module-image--curved-bottom-right,
+  .module-image--curved-bottom-left {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-bottom-left-radius: $session_message-container-border-radius;
+    border-bottom-right-radius: $session_message-container-border-radius;
+  }
 
-.module-conversation-header,
-.message-selection-overlay {
-  height: $session-conversation-header-height;
-}
+  .conversation-header .session-icon-button {
+    @include standard-icon-button();
+  }
 
-.message-selection-overlay {
-  position: absolute;
-  left: 15px;
-  right: 15px;
-  display: none;
+  .module-conversation-header,
+  .message-selection-overlay {
+    height: $session-conversation-header-height;
+  }
 
-  .close-button {
-    float: left;
-    margin-top: 17px;
-    margin-left: 7px;
+  .message-selection-overlay {
+    position: absolute;
+    left: 15px;
+    right: 15px;
+    display: none;
+
+    .close-button {
+      float: left;
+      margin-top: 17px;
+      margin-left: 7px;
+    }
+  }
+  .message-selection-overlay div[role="button"] {
+    display: inline-block;
+  }
+
+  .message-selection-overlay .button-group {
+    float: right;
+    margin-top: 13.5px;
   }
 }
-.message-selection-overlay div[role="button"] {
-  display: inline-block;
-}
+.input-with-label-container {
+  height: 46.5px;
+  width: 280px;
+  color: $session-color-white;
+  padding: 2px 0 2px 0;
+  transition: opacity $session-transition-duration;
+  opacity: 1;
+  position: relative;
 
-.message-selection-overlay .button-group {
-  float: right;
-  margin-top: 13.5px;
+  label {
+    line-height: 14px;
+    opacity: 0;
+    color: #737373;
+    font-size: 10px;
+    line-height: 11px;
+    position: absolute;
+    top: 0px;
+  }
+
+  &.filled {
+    opacity: 1;
+  }
+
+  input {
+    border: none;
+    outline: 0;
+    height: 14px;
+    width: 280px;
+    background: transparent;
+    color: $session-color-white;
+    font-size: 12px;
+    line-height: 14px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  hr {
+    border: 1px solid $session-color-white;
+    width: 100%;
+    position: absolute;
+    bottom: 0px;
+  }
+
+  button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0px;
+  }
 }
diff --git a/ts/components/session/SessionInput.tsx b/ts/components/session/SessionInput.tsx
new file mode 100644
index 000000000..2a98e5c87
--- /dev/null
+++ b/ts/components/session/SessionInput.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { LocalizerType } from '../../types/Util';
+import classNames from 'classnames';
+
+interface Props {
+  i18n: LocalizerType;
+  label: string;
+  type: string;
+  placeholder: string;
+  enableShowHide?: boolean;
+}
+
+interface State {
+  inputValue: string;
+  forceShow: boolean;
+}
+
+export class SessionInput extends React.PureComponent<Props, State> {
+  constructor(props: any) {
+    super(props);
+
+    this.updateInputValue = this.updateInputValue.bind(this);
+
+    this.state = {
+      inputValue: '',
+      forceShow: false,
+    };
+  }
+
+  public render() {
+    const { placeholder, type, label, enableShowHide } = this.props;
+    const { inputValue, forceShow } = this.state;
+
+    const correctType = forceShow ? 'text' : type;
+
+    return (
+      <div className="input-with-label-container">
+        <label
+          htmlFor="floatField"
+          className={classNames(
+            inputValue !== ''
+              ? 'input-with-label-container filled'
+              : 'input-with-label-container'
+          )}
+        >
+          {label}
+        </label>
+        <input
+          id="floatField"
+          type={correctType}
+          placeholder={placeholder}
+          value={inputValue}
+          onBlur={e => {
+            this.updateInputValue(e);
+          }}
+          onChange={e => {
+            this.updateInputValue(e);
+          }}
+        />
+        <button
+          onClick={() =>
+            this.setState({
+              forceShow: !this.state.forceShow,
+            })
+          }
+          className={classNames(enableShowHide ? '' : '')}
+        >
+          SHOW
+        </button>
+        <hr />
+      </div>
+    );
+  }
+
+  private updateInputValue(e: any) {
+    this.setState({
+      inputValue: e.target.value,
+    });
+
+    e.preventDefault();
+  }
+}
diff --git a/ts/components/session/SessionRegistrationView.tsx b/ts/components/session/SessionRegistrationView.tsx
index 4bea49b12..aa9b73b46 100644
--- a/ts/components/session/SessionRegistrationView.tsx
+++ b/ts/components/session/SessionRegistrationView.tsx
@@ -1,9 +1,10 @@
 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 { LocalizerType } from '../../types/Util';
 
 declare global {
   interface Window {
@@ -13,6 +14,7 @@ declare global {
 
 interface Props {
   showSubtitle: boolean;
+  i18n: LocalizerType;
   /* profileName: string;
   avatarPath: string;
   avatarColor: string;
@@ -45,12 +47,48 @@ export class SessionRegistrationView extends React.Component<Props> {
           <AccentText showSubtitle={showSubtitle || true} />
         </div>
         <div className="session-content-registration">
+          <div className="entry-fields">
+            <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
             onClick={() => {
-              alert('clicked');
+              alert('TODO');
             }}
-            buttonType={SessionButtonTypes.Green}
-            text="Generate Session ID"
+            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>