Merge pull request #97 from Mikunj/seed-viewing

Allow viewing seed

_locales/en/messages.json

@@ -784,6 +784,9 @@
   "clear": {
     "message": "Clear"
   },
+  "copySeed": {
+    "message": "Copy Seed"
+  },
   "failedToSend": {
     "message":
       "Failed to send to some recipients. Check your network connection."
@@ -1680,10 +1683,14 @@
     "message": "Edit display name",
     "description": "Button action that the user can click to edit their display name"
   },
+  "showSeed": {
+    "message": "Show seed",
+    "description": "Button action that the user can click to view their unique seed"
+  },
 
   "copiedMnemonic": {
-    "message": "Copied mnemonic to clipboard",
-    "description": "A toast message telling the user that the mnemonic was copied"
+    "message": "Copied seed to clipboard",
+    "description": "A toast message telling the user that the mnemonic seed was copied"
   },
 
   "passwordViewTitle": {

background.html

@@ -229,6 +229,20 @@
       </div>
     </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='seed-dialog'>
+    <div class="content">
+      <div class='title'>
+        Please save the seed below in a safe location.
+        </br>
+        They can be used to restore your account if you lose access or migrate to a new device.
+      </div>
+      <div class='seed'>{{ seed }}</div>
+      <div class='buttons'>
+        <button class='ok' tabindex='1'>{{ ok }}</button>
+        <button class='copy-seed' tabindex='2'>{{ copyText }}</button>
+      </div>
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='attachment-preview'>
         <div class='image-container'>
           <img src='{{ source }}' class='preview' />
@@ -741,6 +755,7 @@
   <script type='text/javascript' src='js/views/confirmation_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/nickname_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/password_dialog_view.js'></script>
+  <script type='text/javascript' src='js/views/seed_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/identicon_svg_view.js'></script>
   <script type='text/javascript' src='js/views/install_view.js'></script>
   <script type='text/javascript' src='js/views/banner_view.js'></script>

js/background.js

@@ -608,6 +608,14 @@
       }
     });
 
+    Whisper.events.on('showSeedDialog', async () => {
+      const manager = await getAccountManager();
+      if (appView && manager) {
+        const seed = manager.getCurrentMnemonic();
+        appView.showSeedDialog(seed);
+      }
+    });
+
     Whisper.events.on('calculatingPoW', ({ pubKey, timestamp }) => {
       try {
         const conversation = ConversationController.get(pubKey);

js/views/app_view.js

@@ -191,5 +191,9 @@
       const dialog = Whisper.getPasswordDialogView(type, resolve, reject);
       this.el.append(dialog.el);
     },
+    showSeedDialog(seed) {
+      const dialog = new Whisper.SeedDialogView({ seed });
+      this.el.append(dialog.el);
+    },
   });
 })();

js/views/inbox_view.js

@@ -358,6 +358,9 @@
         this._mainHeaderItem('editDisplayName', () => {
           window.Whisper.events.trigger('onEditProfile');
         }),
+        this._mainHeaderItem('showSeed', () => {
+          window.Whisper.events.trigger('showSeedDialog');
+        }),
       ];
     },
     async onPasswordUpdated() {

js/views/seed_dialog_view.js

@@ -0,0 +1,43 @@
+/* global Whisper, i18n */
+
+// eslint-disable-next-line func-names
+(function() {
+  'use strict';
+
+  window.Whisper = window.Whisper || {};
+
+  Whisper.SeedDialogView = Whisper.View.extend({
+    className: 'loki-dialog seed-dialog modal',
+    templateName: 'seed-dialog',
+    initialize(options = {}) {
+      this.okText = options.okText || i18n('ok');
+      this.copyText = options.copyText || i18n('copySeed');
+      this.seed = options.seed || '-';
+
+      this.render();
+    },
+    events: {
+      'click .ok': 'ok',
+      'click .copy-seed': 'copySeed',
+    },
+    render_attributes() {
+      return {
+        seed: this.seed,
+        ok: this.okText,
+        copyText: this.copyText,
+      };
+    },
+    ok() {
+      this.remove();
+    },
+    copySeed() {
+      window.clipboard.writeText(this.seed);
+
+      const toast = new Whisper.MessageToastView({
+        message: i18n('copiedMnemonic'),
+      });
+      toast.$el.appendTo(this.$el);
+      toast.render();
+    },
+  });
+})();

js/views/standalone_registration_view.js

@@ -58,7 +58,7 @@
       'keyup #password': 'onPasswordChange',
       'keyup #password-confirmation': 'onValidatePassword',
     },
-    async register(mnemonic) {
+    async register(mnemonic, language) {
       // Make sure the password is valid
       if (this.validatePassword()) {
         this.showToast('Invalid password');
@@ -71,7 +71,7 @@
         await window.setPassword(input);
         await this.accountManager.registerSingleDevice(
           mnemonic,
-          this.$('#mnemonic-language').val(),
+          language,
           this.$('#display-name').val()
         );
         this.$el.trigger('openInbox');
@@ -84,14 +84,16 @@
     },
     registerWithoutMnemonic() {
       const mnemonic = this.$('#mnemonic-display').text();
-      this.register(mnemonic);
+      const language = this.$('#mnemonic-display-language').val();
+      this.register(mnemonic, language);
     },
     registerWithMnemonic() {
       const mnemonic = this.$('#mnemonic').val();
+      const language = this.$('#mnemonic-language').val();
       if (!mnemonic) {
         this.log('Please provide a mnemonic word list');
       } else {
-        this.register(mnemonic);
+        this.register(mnemonic, language);
       }
     },
     onChangeMnemonic() {

libloki/mnemonic.js

@@ -123,7 +123,7 @@ function mn_decode(str, wordset_name) {
       );
     }
     if (w1 === -1 || w2 === -1 || w3 === -1) {
-      throw MnemonicError('invalid word in mnemonic');
+      throw new MnemonicError('invalid word in mnemonic');
     }
     var x = w1 + n * ((n - w1 + w2) % n) + n * n * ((n - w2 + w3) % n);
     if (x % n != w1)

libtextsecure/account_manager.js

@@ -72,6 +72,7 @@
       return this.queueTask(() =>
         generateKeypair().then(async identityKeyPair => {
             return createAccount(identityKeyPair)
+              .then(() => this.saveMnemonic(mnemonic))
               .then(clearSessionsAndPreKeys)
               .then(generateKeys)
               .then(confirmKeys)
@@ -451,6 +452,12 @@
       const hex = StringView.arrayBufferToHex(keys.privKey);
       return mnemonic.mn_encode(hex, language);
     },
+    getCurrentMnemonic() {
+      return textsecure.storage.get('mnemonic');
+    },
+    saveMnemonic(mnemonic) {
+      return textsecure.storage.put('mnemonic', mnemonic);
+    },
     async registrationDone(number, profileName) {
       window.log.info('registration done');
 

stylesheets/_conversation.scss

@@ -425,6 +425,17 @@
   }
 }
 
+.seed-dialog {
+  .title {
+    font-weight: bold;
+  }
+
+  .seed {
+    padding: 20px 0;
+    font-style: oblique;
+  }
+}
+
 .permissions-popup,
 .debug-log-window {
   .modal {

test/index.html

@@ -404,6 +404,7 @@
   <script type='text/javascript' src='../js/views/confirmation_dialog_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/nickname_dialog_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/password_dialog_view.js' data-cover></script>
+  <script type='text/javascript' src='../js/views/seed_dialog_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/identicon_svg_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/last_seen_indicator_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/scroll_down_button_view.js' data-cover></script>