Added nickname dialog.

_locales/en/messages.json

@@ -781,6 +781,9 @@
   "cancel": {
     "message": "Cancel"
   },
+  "clear": {
+    "message": "Clear"
+  },
   "failedToSend": {
     "message":
       "Failed to send to some recipients. Check your network connection."

background.html

@@ -150,6 +150,20 @@
       <span class='time'>0:00</span>
       <button class='close'><span class='icon'></span></button>
   </script>
+  <script type='text/x-tmpl-mustache' id='nickname-dialog'>
+    <div class="content">
+      {{ #title }}
+        <h4>{{ title }}</h4>
+      {{ /title }}
+      <div class='message'>{{ message }}</div>
+      <input type='text' name='name' class='name' placeholder='Type a nickname' value='{{ name }}'>
+      <div class='buttons'>
+        <button class='clear' tabindex='3'>{{ clear }}</button>
+        <button class='cancel' tabindex='2'>{{ cancel }}</button>
+        <button class='ok' tabindex='1'>{{ ok }}</button>
+      </div>
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='confirmation-dialog'>
     <div class="content">
       {{ #title }}
@@ -642,6 +656,7 @@
   <script type='text/javascript' src='js/views/inbox_view.js'></script>
   <script type='text/javascript' src='js/views/network_status_view.js'></script>
   <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/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

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

js/views/app_view.js

@@ -178,5 +178,15 @@
         });
       }
     },
+    showNicknameDialog({ pubKey, title, nickname, onOk, onCancel }) {
+      const _title = title || `Change nickname for ${pubKey}`;
+      const dialog = new Whisper.NicknameDialogView({
+        title: _title,
+        name: nickname,
+        resolve: onOk,
+        reject: onCancel,
+      });
+      this.el.append(dialog.el);
+    },
   });
 })();

js/views/nickname_dialog_view.js

@@ -0,0 +1,101 @@
+/* global Whisper, i18n, _ */
+
+// eslint-disable-next-line func-names
+(function() {
+  'use strict';
+
+  window.Whisper = window.Whisper || {};
+
+  Whisper.NicknameDialogView = Whisper.View.extend({
+    className: 'nickname-dialog modal',
+    templateName: 'nickname-dialog',
+    initialize(options) {
+      this.message = options.message;
+      this.name = options.name;
+
+      this.resolve = options.resolve;
+      this.okText = options.okText || i18n('ok');
+
+      this.reject = options.reject;
+      this.cancelText = options.cancelText || i18n('cancel');
+
+      this.clear = options.clear;
+      this.clearText = options.clearText || i18n('clear');
+
+      this.title = options.title;
+
+      this.render();
+
+      this.$input = this.$('input');
+      this.validateNickname();
+    },
+    events: {
+      keyup: 'onKeyup',
+      'click .ok': 'ok',
+      'click .cancel': 'cancel',
+      'click .clear': 'clear',
+      change: 'validateNickname',
+    },
+    isValidNickname(name) {
+      return (name || '').length < 20;
+    },
+    validateNickname() {
+      const nickname = this.$input.val();
+
+      if (_.isEmpty(nickname)) {
+        this.$('.clear').hide();
+      } else {
+        this.$('.clear').show();
+      }
+
+      if (this.isValidNickname(nickname)) {
+        this.$('.content').removeClass('invalid');
+        this.$('.content').addClass('valid');
+        this.$('.ok').show();
+      } else {
+        this.$('.content').removeClass('valid');
+        this.$('.ok').hide();
+      }
+    },
+    render_attributes() {
+      return {
+        name: this.name,
+        message: this.message,
+        showCancel: !this.hideCancel,
+        cancel: this.cancelText,
+        ok: this.okText,
+        clear: this.clearText,
+        title: this.title,
+      };
+    },
+    ok() {
+      const nickname = this.$input.val();
+      if (!this.isValidNickname(nickname)) return;
+
+      this.remove();
+      if (this.resolve) {
+        this.resolve(nickname);
+      }
+    },
+    cancel() {
+      this.remove();
+      if (this.reject) {
+        this.reject();
+      }
+    },
+    clear() {
+      this.$input.val('').trigger('change');
+    },
+    onKeyup(event) {
+      if (event.key === 'Escape' || event.key === 'Esc') {
+        this.cancel();
+        return;
+      }
+
+      this.validateNickname();
+    },
+    focusCancel() {
+      this.$('.cancel').focus();
+    },
+  });
+})();

stylesheets/_conversation.scss

@@ -351,6 +351,57 @@
   }
 }
 
+
+.nickname-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .content {
+    max-width: 75%;
+    padding: 1em;
+    background: white;
+    border-radius: $border-radius;
+    overflow: auto;
+    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
+
+    .buttons {
+      margin-top: 10px;
+
+      button {
+        float: right;
+        margin-left: 10px;
+        background-color: $grey_l;
+        border-radius: $border-radius;
+        padding: 5px 8px;
+        border: 1px solid $grey_l2;
+
+        &:hover {
+          background-color: $grey_l2;
+          border-color: $grey_l3;
+        }
+      }
+    }
+
+    input {
+      width: 100%;
+      padding: 8px;
+      margin-bottom: 4px;
+    }
+
+    h4 {
+      white-space: -moz-pre-wrap; /* Mozilla */
+      white-space: -hp-pre-wrap; /* HP printers */
+      white-space: -o-pre-wrap; /* Opera 7 */
+      white-space: -pre-wrap; /* Opera 4-6 */
+      white-space: pre-wrap; /* CSS 2.1 */
+      white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
+      word-wrap: break-word; /* IE */
+      word-break: break-all;
+    }
+  }
+}
+
 .permissions-popup,
 .debug-log-window {
   .modal {

test/index.html

@@ -127,6 +127,17 @@
       <span class='time'>0:00</span>
       <button class='close'><span class='icon'></span></button>
   </script>
+  <script type='text/x-tmpl-mustache' id='nickname-dialog'>
+    <div class="content">
+      <div class='message'>{{ message }}</div>
+      <input type='text' name='name' class='name' placeholder='Type a nickname' value='{{ name }}'>
+      <div class='buttons'>
+        <button class='clear' tabindex='3'>{{ clear }}</button>
+        <button class='cancel' tabindex='2'>{{ cancel }}</button>
+        <button class='ok' tabindex='1'>{{ ok }}</button>
+      </div>
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='confirmation-dialog'>
     <div class="content">
       <div class='message'>{{ message }}</div>
@@ -378,6 +389,7 @@
   <script type='text/javascript' src='../js/views/inbox_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/network_status_view.js'></script>
   <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/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>