Added password confirmation dialog before showing seeds.

_locales/en/messages.json

@@ -846,6 +846,9 @@
   "copySeed": {
     "message": "Copy Seed"
   },
+  "confirm": {
+    "message": "Confirm"
+  },
   "failedToSend": {
     "message":
       "Failed to send to some recipients. Check your network connection."

background.html

@@ -235,15 +235,33 @@
   </script>
   <script type='text/x-tmpl-mustache' id='seed-dialog'>
     <div class="content">
-      <div class='title'>
+      <!-- Password -->
-        Please save the seed below in a safe location.
+      <div class="passwordView">
-        </br>
+        <div class='title'>
-        They can be used to restore your account if you lose access or migrate to a new device.
+          Please type in your password
+        </div>
+        <div class='fields'>
+            <input class='form-control' type='password' id='password' placeholder='Password' autocomplete='off' spellcheck='false'>
+            <span class='error'></span>
+        </div>
+        <div class='buttons'>
+          <button class='ok' tabindex='2'>{{ cancel }}</button>
+          <button class='confirm' tabindex='1'>{{ confirm }}</button>
+        </div>
       </div>
-      <div class='seed'>{{ seed }}</div>
+
-      <div class='buttons'>
+      <!-- Seed -->
-        <button class='ok' tabindex='1'>{{ ok }}</button>
+      <div class="seedView" style="display: none;">
-        <button class='copy-seed' tabindex='2'>{{ copyText }}</button>
+        <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'></div>
+        <div class='buttons'>
+          <button class='copy-seed' tabindex='2'>{{ copyText }}</button>
+          <button class='ok' tabindex='1'>{{ ok }}</button>
+        </div>
       </div>
     </div>
   </script>

js/views/seed_dialog_view.js

@@ -1,4 +1,4 @@
-/* global Whisper, i18n */
+/* global Whisper, i18n, Signal, passwordUtil */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -11,23 +11,60 @@
     templateName: 'seed-dialog',
     initialize(options = {}) {
       this.okText = options.okText || i18n('ok');
+      this.cancelText = options.cancelText || i18n('cancel');
+      this.confirmText = options.confirmText || i18n('confirm');
       this.copyText = options.copyText || i18n('copySeed');
       this.seed = options.seed || '-';
 
       this.render();
+      this.showSeedView(false);
+      this.initPasswordHash();
     },
     events: {
-      'click .ok': 'ok',
+      'click .ok': 'close',
+      'click .confirm': 'confirmPassword',
       'click .copy-seed': 'copySeed',
     },
     render_attributes() {
       return {
-        seed: this.seed,
         ok: this.okText,
         copyText: this.copyText,
+        confirm: this.confirmText,
+        cancel: this.cancelText,
       };
     },
-    ok() {
+    async initPasswordHash() {
+      const hash = await Signal.Data.getPasswordHash();
+      this.passwordHash = hash;
+      this.showSeedView(!hash);
+    },
+    showSeedView(show) {
+      const seedView = this.$('.seedView');
+      const passwordView = this.$('.passwordView');
+      if (show) {
+        this.$('.seed').html(this.seed);
+        seedView.show();
+        passwordView.hide();
+      } else {
+        this.$('.seed').html('');
+        passwordView.show();
+        seedView.hide();
+      }
+    },
+    confirmPassword() {
+      this.$('.error').html();
+      const password = this.$('#password').val();
+      if (
+        this.passwordHash &&
+        !passwordUtil.matchesHash(password, this.passwordHash)
+      ) {
+        this.$('.error').html(`Error: ${i18n('invalidPassword')}`);
+        return;
+      }
+
+      this.showSeedView(true);
+    },
+    close() {
       this.remove();
     },
     copySeed() {

stylesheets/_conversation.scss

@@ -440,6 +440,10 @@
     font-weight: bold;
   }
 
+  .fields {
+    margin-top: 20px;
+  }
+
   .seed {
     padding: 20px 0;
     font-style: oblique;