Merge pull request #266 from Mikunj/fixes

UI Fixes

_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."
@@ -1822,6 +1825,12 @@
       "Button action that the user can click to view their unique seed"
   },
 
+  "seedViewTitle": {
+    "message":
+      "Please save the seed below in a safe location. They can be used to restore your account if you lose access or migrate to a new device.",
+    "description": "The title shown when the user views their seeds"
+  },
+
   "copiedMnemonic": {
     "message": "Copied seed to clipboard",
     "description":

background.html

@@ -235,15 +235,31 @@
   </script>
   <script type='text/x-tmpl-mustache' id='seed-dialog'>
     <div class="content">
+      <!-- Password -->
+      <div class="passwordView">
         <div class='title'>
-        Please save the seed below in a safe location.
+          {{ passwordViewTitle }}
-        </br>
+        </div>
-        They can be used to restore your account if you lose access or migrate to a new device.
+        <div class='fields'>
+            <input class='form-control' type='password' id='password' placeholder='Password' autocomplete='off' spellcheck='false'>
+            <span class='error'></span>
         </div>
-      <div class='seed'>{{ seed }}</div>
         <div class='buttons'>
-        <button class='ok' tabindex='1'>{{ ok }}</button>
+          <button class='ok' tabindex='2'>{{ cancel }}</button>
+          <button class='confirm' tabindex='1'>{{ confirm }}</button>
+        </div>
+      </div>
+
+      <!-- Seed -->
+      <div class="seedView" style="display: none;">
+        <div class='title'>
+          {{ seedViewTitle }}
+        </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,65 @@
     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();
+
+      this.$('#password').bind('keyup', event => this.onKeyup(event));
     },
     events: {
-      'click .ok': 'ok',
+      'click .ok': 'close',
+      'click .confirm': 'confirmPassword',
       'click .copy-seed': 'copySeed',
     },
     render_attributes() {
       return {
-        seed: this.seed,
+        passwordViewTitle: i18n('passwordViewTitle'),
+        seedViewTitle: i18n('seedViewTitle'),
         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();
+        this.$('#password').focus();
+        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() {
@@ -39,5 +81,18 @@
       toast.$el.appendTo(this.$el);
       toast.render();
     },
+    onKeyup(event) {
+      switch (event.key) {
+        case 'Enter':
+          this.confirmPassword();
+          break;
+        case 'Escape':
+        case 'Esc':
+          this.close();
+          break;
+        default:
+          break;
+      }
+    },
   });
 })();

stylesheets/_conversation.scss

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

stylesheets/_index.scss

@@ -75,6 +75,7 @@
     height: 70px;
     background: $color-loki-extra-dark-gray;
     img {
+      object-fit: cover;
       max-width: 60%;
       max-height: 60%;
     }