From 73a07f74f971b496e888164f223e7e9cde54e83a Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 9 Dec 2019 14:53:57 +1100
Subject: [PATCH] complete registration signup tab UI

---
 ts/components/session/RegistrationTabs.tsx | 41 +++++++++++++++-------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx
index 8b80a4e50..250201fbf 100644
--- a/ts/components/session/RegistrationTabs.tsx
+++ b/ts/components/session/RegistrationTabs.tsx
@@ -143,14 +143,29 @@ export class RegistrationTabs extends React.Component<Props, State> {
   }
 
   private renderSignUp() {
-    return (
-      <div className="registration-container__content">
-        {this.renderSignUpHeader()}
-
-        {this.renderSignUpButton()}
-        {this.getRenderTermsConditionAgreement()}
-      </div>
-    );
+    const {signUpMode} = this.state;
+    if (signUpMode === SignUpMode.Default) {
+      return (
+        <div className="registration-container__content">
+          {this.renderSignUpHeader()}
+          {this.renderSignUpButton()}
+        </div>
+      );
+    }
+    else {
+      return (
+        <div className="registration-container__content">
+          {this.renderSignUpHeader()}
+          <div className="registration-view-label">
+            Your Unique Session ID
+          </div>
+          {this.renderEnterSessionID(false)}
+          {this.renderSignUpButton()}
+          {this.getRenderTermsConditionAgreement()}
+        </div>
+      );
+    }
+    
   }
 
   private getRenderTermsConditionAgreement() {
@@ -187,10 +202,10 @@ export class RegistrationTabs extends React.Component<Props, State> {
     let buttonText: string;
     if (signUpMode !== SignUpMode.Default) {
       buttonType = SessionButtonTypes.FullGreen;
-      buttonText = 'Continue Your Session';
+      buttonText = 'Get started';
     } else {
       buttonType = SessionButtonTypes.Green;
-      buttonText = 'Restore Using Seed';
+      buttonText = 'Generate Session ID';
     }
 
     return (
@@ -272,7 +287,7 @@ export class RegistrationTabs extends React.Component<Props, State> {
             "Device Pairing" from the main menu. Then, enter your Session ID
             below to sign in.
           </div>
-          {this.renderEnterSessionID()}
+          {this.renderEnterSessionID(true)}
         </div>
       );
     } else {
@@ -280,11 +295,11 @@ export class RegistrationTabs extends React.Component<Props, State> {
     }
   }
 
-  private renderEnterSessionID() {
+  private renderEnterSessionID(contentEditable: boolean) {
     return (
       <div
         className="signin-enter-session-id"
-        contentEditable={true}
+        contentEditable={contentEditable}
         placeholder="Enter your Session ID here"
       />
     );