New menu item "show pairing words" for secondary devices

_locales/en/messages.json

@@ -955,6 +955,9 @@
   "allowPairing": {
     "message": "Allow Pairing"
   },
+  "showPairingWordsTitle": {
+    "message": "Pairing Secret Words"
+  },
   "clear": {
     "message": "Clear"
   },

background.html

@@ -292,6 +292,14 @@
     </div>
   </script>
 
+  <script type='text/x-tmpl-mustache' id='device-pairing-words-dialog'>
+    <div class="content">
+        <h4>{{ title }}</h4>
+        <p>{{ secretWords }}</p>
+        <button id='close'>{{ closeText }}</button>
+    </div>
+  </script>
+
   <script type='text/x-tmpl-mustache' id='beta-disclaimer-dialog'>
     <div class="content">
       <div class="betaDisclaimerView" style="display: none;">
@@ -793,6 +801,7 @@
   <script type='text/javascript' src='js/views/import_view.js'></script>
   <script type='text/javascript' src='js/views/clear_data_view.js'></script>
   <script type='text/javascript' src='js/views/device_pairing_dialog_view.js'></script>
+  <script type='text/javascript' src='js/views/device_pairing_words_dialog_view.js'></script>
 
   <script type='text/javascript' src='js/wall_clock_listener.js'></script>
   <script type='text/javascript' src='js/rotate_signed_prekey_listener.js'></script>

js/background.js

@@ -799,6 +799,12 @@
       }
     });
 
+    Whisper.events.on('showDevicePairingWordsDialog', async () => {
+      if (appView) {
+        appView.showDevicePairingWordsDialog();
+      }
+    });
+
     Whisper.events.on('calculatingPoW', ({ pubKey, timestamp }) => {
       try {
         const conversation = ConversationController.get(pubKey);

js/views/app_view.js

@@ -224,6 +224,10 @@
       });
       this.el.append(dialog.el);
     },
+    showDevicePairingWordsDialog() {
+      const dialog = new Whisper.DevicePairingWordsDialogView();
+      this.el.append(dialog.el);
+    },
     showAddServerDialog() {
       const dialog = new Whisper.AddServerDialogView();
       this.el.append(dialog.el);

js/views/device_pairing_words_dialog_view.js

@@ -0,0 +1,35 @@
+/* global Whisper, i18n, textsecure */
+
+// eslint-disable-next-line func-names
+(function() {
+  'use strict';
+
+  window.Whisper = window.Whisper || {};
+
+  Whisper.DevicePairingWordsDialogView = Whisper.View.extend({
+    className: 'loki-dialog device-pairing-words-dialog modal',
+    templateName: 'device-pairing-words-dialog',
+    initialize() {
+      const pubKey = textsecure.storage.user.getNumber();
+      this.secretWords = window.mnemonic
+        .mn_encode(pubKey.slice(2), 'english')
+        .split(' ')
+        .slice(-3)
+        .join(' ');
+      this.render();
+    },
+    events: {
+      'click #close': 'close',
+    },
+    render_attributes() {
+      return {
+        title: i18n('showPairingWordsTitle'),
+        closeText: i18n('close'),
+        secretWords: this.secretWords,
+      };
+    },
+    close() {
+      this.remove();
+    },
+  });
+})();

ts/components/MainHeader.tsx

@@ -381,6 +381,14 @@ export class MainHeader extends React.Component<Props, any> {
           trigger('showDevicePairingDialog');
         },
       });
+    } else {
+      menuItems.push({
+        id: 'showPairingWords',
+        name: 'Show Pairing Words',
+        onClick: () => {
+          trigger('showDevicePairingWordsDialog');
+        },
+      });
     }
 
     this.setState({ menuItems });