cancelling linked

_locales/en/messages.json

@@ -222,7 +222,7 @@
     "description": "Message shown if the import went wrong; first paragraph"
   },
   "importErrorSecond": {
-    "message": "If these steps don't work for you, please submit a debug log (View -> Debug Log) so that we can help you get migrated!",
+    "message": "If these steps don't work for you, please submit a debug log (View 🠖 Debug Log) so that we can help you get migrated!",
     "description": "Message shown if the import went wrong; second paragraph"
   },
   "importAgain": {
@@ -872,7 +872,7 @@
     "message": "Device linking request received."
   },
   "devicePairingRequestReceivedNoListenerDescription": {
-    "message": "Device linking request received but you are not on the device linking screen. \nFirst go to Settings -> Device -> Link New Device."
+    "message": "Device linking request received but you are not on the device linking screen. \nGo to Settings 🠖 Device 🠖 Link New Device."
   },
   "waitingForDeviceToRegister": {
     "message": "Waiting for device to register..."
@@ -2379,11 +2379,23 @@
   "verifyPassword": {
     "message": "Verify Password"
   },
-  "devicePairingHeader": {
+  "devicePairingHeaderReassure": {
-    "message": "1. Open Session on your other device. <br/>2. Navigate to the Linked Devices section in your user account screen.<br/>3. Select <strong>'Link a Device'</strong> to prepare your other device for pairing<br/>4. Enter your Session ID below to link this device to your Session ID."
+    "message": "Linking may take up to one minute to register on your primary device. Please be patient."
+  },
+  "devicePairingHeader_Step1": {
+    "message": "Open Session on your other device."
+  },
+  "devicePairingHeader_Step2": {
+    "message": "Navigate to the <strong>Devices</strong> section in your user account screen."
+  },
+  "devicePairingHeader_Step3": {
+    "message": "Select <strong>Link New Device</strong> to prepare your other device for pairing."
+  },
+  "devicePairingHeader_Step4": {
+    "message": "Enter your <strong>Session ID</strong> below to link this device to your <strong>Session ID</strong>."
   },
   "enterSessionIDHere": {
-    "message": "Enter other device’s Session ID here"
+    "message": "Enter your Session ID here"
   },
   "continueYourSession": {
     "message": "Continue Your Session"

js/background.js

@@ -1390,7 +1390,7 @@
         title,
         description,
         type,
-        id: 'pairingRequestNoListener',
+        id: 'pairingRequestReceived',
         shouldFade: false,
       });
     });

stylesheets/_session_signin.scss

@@ -75,6 +75,20 @@
     &__content {
       width: 100%;
       padding-top: 20px;
+
+      &__secret-words {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: $session-shade-6;
+        padding: $session-margin-sm $session-margin-lg;
+        border-radius: 8px;
+        margin-bottom: $session-margin-md;
+
+        label {
+          margin-bottom: 5px;
+        }
+      }
     }
 
     &__sections {
@@ -228,11 +242,17 @@
   &-description-long,
   &-signin-device-pairing-header {
     padding-top: 10px;
-    padding-bottom: 10px;
+    padding-bottom: 20px;
     color: $session-color-light-grey;
     text-align: center;
     font-size: 12px;
     line-height: 20px;
+
+    ol {
+      margin-left: 20px;
+      padding: 0px;
+      text-align: justify;
+    }
   }
 
   &-id-editable {

ts/components/session/RegistrationTabs.tsx

@@ -34,6 +34,7 @@ interface State {
   selectedTab: TabType;
   signInMode: SignInMode;
   signUpMode: SignUpMode;
+  secretWords: string | undefined;
   displayName: string;
   password: string;
   validatePassword: string;
@@ -109,6 +110,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
       selectedTab: TabType.Create,
       signInMode: SignInMode.Default,
       signUpMode: SignUpMode.Default,
+      secretWords: undefined,
       displayName: '',
       password: '',
       validatePassword: '',
@@ -418,10 +420,34 @@ export class RegistrationTabs extends React.Component<{}, State> {
       return (
         <div className="registration-content-centered">
           <div className="session-signin-device-pairing-header">
-            <SessionHtmlRenderer html={window.i18n('devicePairingHeader')} />
+            {this.state.loading ? (
+              <p>{window.i18n('devicePairingHeaderReassure')}</p>
+            ) : (
+              <ol>
+                <li>
+                  <SessionHtmlRenderer html={window.i18n('devicePairingHeader_Step1')} />
+                </li>
+                <li>
+                  <SessionHtmlRenderer html={window.i18n('devicePairingHeader_Step2')} />
+                </li>
+                <li>
+                  <SessionHtmlRenderer html={window.i18n('devicePairingHeader_Step3')} />
+                </li>
+                <li>
+                  <SessionHtmlRenderer html={window.i18n('devicePairingHeader_Step4')} />
+                </li>
+              </ol>
+            )}
           </div>
-          {this.renderEnterSessionID(true)}
+          {this.renderEnterSessionID(!this.state.loading)}
-          <SessionSpinner loading={this.state.loading} />
+          {this.state.secretWords && (
+            <div className="session-registration__content__secret-words">
+              <label>Secret words</label>
+              <div className="subtle">{this.state.secretWords}</div>
+            </div>
+          )}
+          
+          <SessionSpinner loading={!!this.state.secretWords} />
         </div>
       );
     }
@@ -582,28 +608,36 @@ export class RegistrationTabs extends React.Component<{}, State> {
       password,
     } = this.state;
 
+    const shouldRenderCancel = this.state.signInMode === SignInMode.LinkingDevice && this.state.loading && !!this.state.secretWords;
+
     let enableContinue = true;
     let text = window.i18n('continueYourSession');
-    const displayNameOK = !displayNameError && !!displayName; //display name required
+    const displayNameOK = !displayNameError && !!displayName; // Display name required
-    const mnemonicOK = !mnemonicError && !!mnemonicSeed; //Mnemonic required
+    const mnemonicOK = !mnemonicError && !!mnemonicSeed; // Mnemonic required
     const passwordsOK =
       !password || (!passwordErrorString && passwordFieldsMatch); // password is valid if empty, or if no error and fields are matching
     if (signInMode === SignInMode.UsingSeed) {
       enableContinue = displayNameOK && mnemonicOK && passwordsOK;
     } else if (signInMode === SignInMode.LinkingDevice) {
-      enableContinue = !!primaryDevicePubKey;
+      enableContinue = true;
-      text = window.i18n('linkDevice');
+      text = window.i18n(shouldRenderCancel ? 'cancel' : 'linkDevice');
     } else if (signUpMode === SignUpMode.EnterDetails) {
       enableContinue = displayNameOK && passwordsOK;
     }
 
+    const onClick = () => {
+      shouldRenderCancel
+        ? this.cancelSecondaryDevice()
+        : this.handleContinueYourSessionClick();
+    };
+
+    const buttonColor = shouldRenderCancel ? SessionButtonColor.White : SessionButtonColor.Green;
+
     return (
       <SessionButton
-        onClick={() => {
+        onClick={onClick}
-          this.handleContinueYourSessionClick();
-        }}
         buttonType={SessionButtonType.Brand}
-        buttonColor={SessionButtonColor.Green}
+        buttonColor={buttonColor}
         text={text}
         disabled={!enableContinue}
       />
@@ -719,6 +753,11 @@ export class RegistrationTabs extends React.Component<{}, State> {
     window.ConversationController.reset();
     await window.ConversationController.load();
     window.Whisper.RotateSignedPreKeyListener.stop(window.Whisper.events);
+
+    this.setState({
+      loading: false,
+      secretWords: undefined,
+    });
   }
 
   private async register(language: string) {
@@ -892,14 +931,8 @@ export class RegistrationTabs extends React.Component<{}, State> {
 
       await this.accountManager.requestPairing(primaryPubKey);
       const pubkey = window.textsecure.storage.user.getNumber();
-      const words = window.mnemonic.pubkey_to_secret_words(pubkey);
+      const secretWords = window.mnemonic.pubkey_to_secret_words(pubkey);
-      // window.console.log(`Here is your secret:\n${words}`);
+      this.setState({secretWords});
-      window.pushToast({
-        title: `${window.i18n('secretPrompt')}`,
-        description: words,
-        id: 'yourSecret',
-        shouldFade: false,
-      });
     } catch (e) {
       window.console.log(e);
       await this.resetRegistration();