Nicknames (#7)

src/index.html

@@ -140,16 +140,18 @@
 
       <!-- New chat view -->
       <div class="main-view" id="new-chat">
-        <p>
+        <h3>Have someone's chat link?</h3>
-          <input id="paste-chat-link" type="text" placeholder="Paste someone's chat link">
+        <input id="paste-chat-link" type="text" placeholder="Paste their chat link">
-          <button id="scan-chatlink-qr-btn">Scan QR code</button>
+        <button id="scan-chatlink-qr-btn">Or scan their QR code</button>
-        </p>
         <video id="chatlink-qr-video" width="320" height="320" style="object-fit: cover;"></video>
-        <p>Or give <b>your</b> chat link to someone:</p>
+        <h3>Give your chat link:</h3>
-        <p><button class="copy-chat-link">Copy your chat link</button></p>
+        <button class="copy-chat-link">Copy your chat link</button>
-        <p id="my-qr-code" class="qr-container"></p>
+        <button id="show-my-qr-btn">Or show your QR code</button>
-        <p><small>But beware of sharing it publicly: you might get spammed with message requests. Publicly share your <a class="profile-link">profile link</a> instead.</small></p>
+        <p id="my-qr-code" class="qr-container" style="display:none"></p>
-        <p><button id="generate-chat-link">Create new link</button></p>
+        <p><small>Beware of sharing your chat link publicly: you might get spammed with message requests. Publicly share your <a class="profile-link">profile link</a> instead.</small></p>
+        <hr/>
+        <h3>Your Chat Links</h3>
+        <p><button id="generate-chat-link">Create new chat link</button></p>
         <div id="my-chat-links" class="flex-table"></div>
       </div>
 
@@ -274,7 +276,9 @@
       <div class="main-view" id="profile">
         <div class="profile-photo-container"><img class="profile-photo"></div>
         <div class="content">
-          <p class="profile-about" style="display:none"></p>
+          <div class="profile-about" style="display:none">
+            <p class="profile-about-content"></p>
+          </div>
           <p class="status"></p>
           <p class="last-active"></p>
           <!--
@@ -295,6 +299,17 @@
             <button class="add-friend">Add to friends</button>
           </p>
           -->
+          <hr/>
+          <h3>Chat Settings</h3>
+          <div class="profile-nicknames">
+            <p>
+              Nickname: <input id="profile-nickname-their">
+            </p>
+            <p>
+              Their nickname for you: <span id="profile-nickname-my"></span>
+            </p>
+          </div>
+          <hr/>
           <p>
             <button class="delete-chat">Delete chat</button>
             <!-- <button class="block-user">Block user</button> -->

src/js/app.js

@@ -44,6 +44,7 @@ var activeProfile;
 var onlineTimeout;
 var loginTime;
 var key;
+var myName;
 var latestChatLink;
 var desktopNotificationsEnabled;
 var areWeOnline;
@@ -202,18 +203,13 @@ function login(k) {
   $('#private-key-qr').remove();
   gun.user().get('profile').get('name').on(name => {
     if (name && typeof name === 'string') {
+      myName = name;
       $('.user-info .user-name').text(truncateString(name, 20));
-      var el = $('#settings-name');
+      $('#settings-name').not(':focus').val(name);
-      if (!el.is(':focus')) {
-        $('#settings-name').val(name);
-      }
     }
   });
   gun.user().get('profile').get('about').on(about => {
-    var el = $('#settings-about');
+    $('#settings-about').not(':focus').val(about || '');
-    if (!el.is(':focus')) {
-      $('#settings-about').val(about || '');
-    }
   });
   gun.user().get('profile').get('photo').on(data => {
     $('#current-profile-photo').attr('src', data);
@@ -288,7 +284,7 @@ function updatePeerList() {
     if (peer.from) {
       urlEl.append($('<br>'));
       urlEl.append(
-        $('<small>').text('from ' + ((chats[peer.from] && chats[peer.from].name) || truncateString(peer.from, 10)))
+        $('<small>').text('from ' + ((chats[peer.from] && getDisplayName(peer.from)) || truncateString(peer.from, 10)))
         .css({cursor:'pointer'}).click(() => showChat(peer.from))
       );
     }
@@ -386,7 +382,6 @@ function resetView() {
   $(".message-form").hide();
   $("#header-content").empty();
   $("#header-content").css({cursor: null});
-  $('#profile-page-qr').empty();
   $('#private-key-qr').remove();
 }
 
@@ -415,6 +410,9 @@ function showNewChat() {
   $('.chat-item.new').toggleClass('active', true);
   $('#new-chat').show();
   $("#header-content").text('New chat');
+  $('#show-my-qr-btn').off().click(() => {
+    $('#my-qr-code').toggle()
+  })
 }
 
 function getMyChatLink() {
@@ -585,7 +583,7 @@ function notify(msg, info, pub) {
     notificationSound.play();
   }
   if (shouldDesktopNotify()) {
-    var desktopNotification = new Notification(chats[pub].name, {
+    var desktopNotification = new Notification(getDisplayName(pub), {
       icon: 'img/icon128.png',
       body: truncateString(msg.text, 50),
       silent: true
@@ -673,6 +671,8 @@ function showProfile(pub) {
   $('#profile .profile-photo-container').hide();
   var qrCodeEl = $('#profile-page-qr');
   qrCodeEl.empty();
+  $('#profile-nickname-their').val('');
+  $('#profile .profile-about-content').empty();
   $('#profile').show();
   addUserToHeader(pub);
   setTheirOnlineStatus(pub);
@@ -683,7 +683,7 @@ function showProfile(pub) {
   $('#profile .profile-about').empty();
   gun.user(pub).get('profile').get('about').on(about => {
     $('#profile .profile-about').toggle(about && about.length > 0);
-    $('#profile .profile-about').text(about);
+    $('#profile .profile-about-content').text(about);
   });
   const link = getUserChatLink(pub);
   $('#profile .add-friend').off().on('click', () => {
@@ -703,6 +703,12 @@ function showProfile(pub) {
       t.css('width', '');
     }, 2000);
   });
+  $('#profile-nickname-their').not(':focus').val(chats[pub].theirNickname);
+  $('#profile-nickname-my').text(chats[pub].myNickname && chats[pub].myNickname.length ? chats[pub].myNickname : '');
+  $('#profile-nickname-their').off().on('input', event => {
+    var nick = event.target.value;
+    chats[pub].put('nickname', nick);
+  });
   qrCodeEl.empty();
   var qrcode = new QRCode(qrCodeEl[0], {
     text: link,
@@ -717,20 +723,12 @@ function showProfile(pub) {
 function addUserToHeader(pub) {
   $('#header-content').empty();
   var nameEl = $('<div class="name"></div>');
-  if (chats[pub] && chats[pub].name) {
+  if (pub === key.pub && activeProfile !== pub) {
-    if (pub === key.pub) {
+    nameEl.html("📝<b>Note to Self</b>");
-      if (activeProfile !== pub) {
+  } else if (chats[pub]) {
-        // if not looking at your own profile
+    nameEl.text(truncateString(getDisplayName(pub), 30));
-        nameEl.html("📝<b>Note to Self</b>"); 
-        // need to disable nicknames in note to self profile
-      } else {
-        nameEl.text(truncateString(chats[pub].name, 30));
-      }
-    } else {
-      nameEl.text(truncateString(chats[pub].name, 30));
-    }
-    nameEl.show();
   }
+  nameEl.show();
 
   var identicon = getIdenticon(pub, 40);
   var img = identicon.children('img').first();
@@ -922,6 +920,19 @@ function deleteChat(pub) {
   $('.chat-item[data-pub="' + pub +'"]').remove();
 }
 
+function getDisplayName(pub) {
+  var displayName;
+  if (chats[pub].theirNickname && chats[pub].theirNickname.length) {
+    displayName = chats[pub].theirNickname; 
+    if (chats[pub].name && chats[pub].name.length) {
+      displayName = displayName + ' (' + chats[pub].name + ')'; 
+    }
+  } else {
+    displayName = chats[pub].name;
+  }
+  return displayName;
+}
+
 function newChat(pub, chatLink) {
   if (!pub || Object.prototype.hasOwnProperty.call(chats, pub)) {
     return;
@@ -1016,6 +1027,20 @@ function addChat(channel) {
   chats[pub].messages = chats[pub].messages || [];
   chats[pub].identicon = getIdenticon(pub, 49);
   el.prepend($('<div>').addClass('identicon-container').append(chats[pub].identicon));
+  chats[pub].onTheir('nickname', (nick) => {
+    chats[pub].myNickname = nick;
+    $('#profile-nickname-my').text(nick && nick.length ? nick : '');
+    $('#profile-nickname-my-container').toggle(!!(nick && nick.length));
+  });
+  chats[pub].onMy('nickname', (nick) => {
+    chats[pub].theirNickname = nick;
+    if (pub !== key.pub) {
+      el.find('.name').text(truncateString(getDisplayName(pub), 20));
+    }
+    if (pub === activeChat || pub === activeProfile) {
+      addUserToHeader(pub);
+    }
+  });
   gun.user(pub).get('profile').get('name').on(name => {
     if (name && typeof name === 'string') {
       chats[pub].name = name;
@@ -1023,7 +1048,7 @@ function addChat(channel) {
     if (pub === key.pub) {
       el.find('.name').html("📝<b>Note to Self</b>");
     } else {
-      el.find('.name').text(truncateString(name, 20));
+      el.find('.name').text(truncateString(getDisplayName(pub), 20));
     }
     if (pub === activeChat) {
       addUserToHeader(pub);