Implement i18n for Install Flow

Fixes #600

// FREEBIE

_locales/en/messages.json

@@ -102,5 +102,55 @@
     },
     "sessionEnded": {
         "message": "Secure session ended"
+    },
+    "installWelcome": {
+        "message": "Welcome to Signal Desktop",
+        "description": "Welcome title on the install page"
+    },
+    "installTagline": {
+        "message": "Privacy is possible. Signal makes it easy.",
+        "description": "Tagline displayed under installWelcome on the install page"
+    },
+    "installGetStartedButton": {
+        "message": "Get started"
+    },
+    "installSignalLink": {
+        "message": "First, install <a>Signal</a> on your Android phone.<br /> We'll link your devices and keep your messages in sync.",
+        "description": "Prompt the user to install Signal on Android before pairing"
+    },
+    "installIHaveSignalButton": {
+        "message": "I have Signal for Android",
+        "description": "Button for the user to confirm that they have Signal for Android"
+    },
+    "installFollowUs": {
+        "message": "<a>Follow us</a> for updates about multi-device support for iOS."
+    },
+    "installAndroidInstructions": {
+        "message": "Open Signal on your phone and navigate to Settings > Devices. Tap the button to add a new device, then scan the code above."
+    },
+    "installConnecting": {
+        "message": "Connecting...",
+        "description": "Displayed when waiting for the QR Code"
+    },
+    "installGeneratingKeys": {
+        "message": "Generating Keys"
+    },
+    "installSyncingGroupsAndContacts": {
+        "message": "Syncing groups and contacts"
+    },
+    "installComputerName": {
+        "message": "This computer's name will be",
+        "description": "Text displayed before the input where the user can enter the name for this device."
+    },
+    "installLinkingWithNumber": {
+        "message": "Linking with",
+        "description": "Text displayed before the phone number that the user is in the process of linking with"
+    },
+    "installFinalButton": {
+        "message": "Looking good",
+        "description": "The final button for the install process, after the user has entered a name for their device"
+    },
+    "installTooManyDevices": {
+        "message": "Sorry, you have too many devices registered already. Try removing some."
     }
 }

js/options.js

@@ -58,4 +58,31 @@
             });
         });
     });
+
+    // Apply i18n
+    $(document).ready(function(){
+        // Basic Substitution
+        $('[data-i18n]').each(function(){
+            var $this = $(this);
+            $this.text(i18n($this.data('i18n')));
+        });
+
+        // Text with link to Play Store
+        var $installSignalLinkContent = $('<span>' + i18n('installSignalLink') + '</span>');
+        $installSignalLinkContent.find('a').attr({
+            class: 'link',
+            href: 'https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms',
+            target: '_blank'
+        });
+        $('#installSignalLink').append($installSignalLinkContent);
+
+        // Text with link to Twitter
+        var $installFollowUsContent = $('<span>' + i18n('installFollowUs') + '</span>');
+        $installFollowUsContent.find('a').attr({
+            class: 'link',
+            href: 'https://twitter.com/whispersystems',
+            target: '_blank'
+        });
+        $('#installFollowUs').append($installFollowUsContent);
+    });
 })();

js/views/install_view.js

@@ -19,7 +19,7 @@
             };
         },
         clearQR: function() {
-            this.$('#qr').text("Connecting...");
+            this.$('#qr').text(i18n("installConnecting"));
         },
         setProvisioningUrl: function(url) {
                 this.$('#qr').html('');
@@ -47,7 +47,7 @@
                         this.$('#device-name').focus();
                         return;
                     }
-                    this.$('.progress-dialog .status').text('Generating Keys');
+                    this.$('.progress-dialog .status').text(i18n('installGeneratingKeys'));
                     this.selectStep(5);
                     resolve(name);
                 }.bind(this));
@@ -61,7 +61,7 @@
             this.$('#step' + step).show();
         },
         showSync: function() {
-            this.$('.progress-dialog .status').text('Syncing groups and contacts');
+            this.$('.progress-dialog .status').text(i18n('installSyncingGroupsAndContacts'));
             this.$('.progress-dialog .bar').addClass('progress-bar-striped active');
         },
         showTooManyDevices: function() {

options.html

@@ -11,9 +11,9 @@
     <div id='step1' class='step'>
       <img id='signal-icon' src='/images/icon_250.png'/>
       <div class='nav'>
-        <h1>Welcome to Signal Desktop</h1>
+        <h1 data-i18n='installWelcome'></h1>
-        <p>Privacy is possible. Signal makes it easy.</p>
+        <p data-i18n='installTagline'></p>
-        <div> <a class='button step2'>Get started</a> </div>
+        <div> <a class='button step2' data-i18n='installGetStartedButton'></a> </div>
         <span class='dot step1 selected'></span>
         <span class='dot step2'></span>
         <span class='dot step3'></span>
@@ -23,12 +23,9 @@
     <div id='step2' class='step'>
       <img id='signal-phone' src='/images/signal-phone.png'>
       <div class='nav'>
-        <p>First, install <a class='link' href='https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms' target='_blank'>Signal</a> on your Android phone.<br /> We'll link your devices and keep your messages in sync.</p>
+        <p id="installSignalLink"></p>
-        <div> <a class='button step3'>I have Signal for Android</a> </div>
+        <div> <a class='button step3' data-i18n='installIHaveSignalButton'></a> </div>
-        <p>
+        <p id="installFollowUs"></p>
-        <a class='link' href='https://twitter.com/whispersystems' target='_blank'>Follow us</a>
-        for updates about multi-device support for iOS.
-        </p>
         <span class='dot step1'></span>
         <span class='dot step2 selected'></span>
         <span class='dot step3'></span>
@@ -37,8 +34,7 @@
 
     <div id='step3' class='step'>
       <div id="qr"></div>
-      <p>Open Signal on your phone and navigate to Settings > Devices. Tap the
+      <p data-i18n='installAndroidInstructions'></p>
-      button to add a new device, then scan the code above.</p>
       <div class='nav'>
         <span class='dot step1'></span>
         <span class='dot step2'></span>
@@ -47,15 +43,15 @@
     </div>
 
     <div id='step4' class='step'>
-        <p>Linking with</p>
+        <p data-i18n='installLinkingWithNumber'></p>
         <h2 class='number'></h2>
         <img id='signal-computer' src='/images/signal-laptop.png'>
-        <p>This computer's name will be</p>
+        <p data-i18n='installComputerName'></p>
         <div>
           <input type='text' id='device-name' spellcheck='false'></input>
         </div>
         <div class='nav'>
-          <div> <a class='button' id='sync'>Looking good</a> </div>
+          <div> <a class='button' id='sync' data-i18n='installFinalButton'></a> </div>
         </div>
     </div>
 
@@ -71,12 +67,9 @@
 
     <div id='stepTooManyDevices' class='step'>
       <div class='error-dialog clearfix'>
-        <div class='panel'>
+        <div class='panel' data-i18n='installTooManyDevices'></div>
-          Sorry, you have too many devices registered already.
-          Try removing some.
-        </div>
         <div class='nav'>
-          <button class='ok step3'>Ok</button>
+          <button class='ok step3' data-i18n='ok'></button>
         </div>
       </div>
     </div>