Display info in network status when unlinked

When we can't connect due to being unlinked, network status indicator
will show an appropriate informational message and a button to open the
installer window to relink.

// FREEBIE

_locales/en/messages.json

@@ -519,5 +519,14 @@
     "invalidNumberError": {
       "message": "Invalid number",
       "description": "When a person inputs a number that is invalid"
+    },
+    "unlinkedWarning": {
+        "message": "Relink Signal Desktop to your mobile device to continue messaging."
+    },
+    "unlinked": {
+        "message": "Unlinked"
+    },
+    "relink": {
+        "message": "Relink"
     }
 }

background.html

@@ -501,6 +501,11 @@
       {{ attemptingReconnectionMessage }}
     </div>
     {{/reconnectDurationAsSeconds }}
+    {{ #action }}
+      <div class="action">
+        <button class='small blue {{ buttonClass }}'>{{ action }}</button>
+      </div>
+    {{/action }}
   </script>
 
   <script type='text/javascript' src='js/components.js'></script>

js/views/network_status_view.js

@@ -23,6 +23,9 @@
             this.model = new Backbone.Model();
             this.listenTo(this.model, 'change', this.onChange);
         },
+        events: {
+            'click .openInstaller': extension.install
+        },
         finishConnectingGracePeriod: function() {
             this.withinConnectingGracePeriod = false;
         },
@@ -36,6 +39,8 @@
             var message = '';
             var instructions = '';
             var hasInterruption = false;
+            var action = null;
+            var buttonClass = null;
 
             var socketStatus = this.getSocketStatus();
             switch(socketStatus) {
@@ -68,12 +73,20 @@
                 hasInterruption = true;
                 message = i18n('offline');
                 instructions = i18n('checkNetworkConnection');
+            } else if (!Whisper.Registration.isDone()) {
+                hasInterruption = true;
+                message = i18n('Unlinked');
+                instructions = i18n('unlinkedWarning');
+                action = i18n('relink');
+                buttonClass = 'openInstaller';
             }
 
             return {
                 message: message,
                 instructions: instructions,
-                hasInterruption: hasInterruption
+                hasInterruption: hasInterruption,
+                action: action,
+                buttonClass: buttonClass
             };
         },
         update: function() {

stylesheets/_index.scss

@@ -49,6 +49,16 @@
         padding: 0.5em 0;
       }
     }
+    .action {
+      button {
+        border-radius: $border-radius;
+        border: solid 1px #ccc;
+        cursor: pointer;
+        font-family: inherit;
+        color: white;
+        background: $blue;
+      }
+    }
   }
 }
 

stylesheets/manifest.css

@@ -763,6 +763,13 @@ img.emoji {
     display: inline-block;
     font-size: 12px;
     padding: 0.5em 0; }
+  .network-status-container .network-status .action button {
+    border-radius: 5px;
+    border: solid 1px #ccc;
+    cursor: pointer;
+    font-family: inherit;
+    color: white;
+    background: #2090ea; }
 
 .conversation-stack {
   padding-left: 300px; }