From 014e12b5b5f9fecf208cd99eb4ec35567b649ee8 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 15 Nov 2017 11:32:54 +0100
Subject: [PATCH] Ability to update the username from the userlist

---
 customize.dist/src/less2/include/toolbar.less |  39 ++++++
 www/common/common-ui-elements.js              |   4 +-
 www/common/toolbar3.js                        | 118 +++++++++++++-----
 3 files changed, 131 insertions(+), 30 deletions(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index d39effaef..497187fde 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -102,6 +102,32 @@
                         overflow: hidden;
                         text-overflow: ellipsis;
                         white-space: nowrap;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                    }
+                    .cp-toolbar-userlist-name-input {
+                        flex: 1;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        display: none;
+                        border: none;
+                    }
+                    .cp-toolbar-userlist-name-value {
+                        overflow: hidden;
+                        flex: 1;
+                        min-width: 0;
+                        min-height: 0;
+                        text-overflow: ellipsis;
+                    }
+                    .cp-toolbar-userlist-name-edit {
+                        width: 20px;
+                        font-size: 16px;
+                        padding: 0;
+                        border: none;
+                        height: 20px;
+                        cursor: pointer;
                     }
                     .cp-toolbar-userlist-friend {
                         padding: 0;
@@ -126,6 +152,19 @@
                 background-color: darken(@bgcolor, 10%);
                 color: @color;
             }
+            .cp-toolbar-userlist-name-input {
+                background-color: darken(@bg-color, 10%);
+                color: @color;
+            }
+            .cp-toolbar-userlist-name-edit {
+                color: contrast(@color,
+                                lighten(@color, 20%),
+                                darken(@color, 20%));
+                background: transparent;
+                &:hover {
+                    color: @color;
+                }
+            }
             .cp-toolbar-userlist-friend {
                 &:hover {
                     color: darken(@color, 15%);
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index e926ebb59..67ed15eb1 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -591,8 +591,8 @@ define([
         if (config.displayNameCls) {
             var $userAdminContent = $('<p>');
             if (accountName) {
-                var $userAccount = $('<span>', {'class': 'userAccount'}).append(Messages.user_accountName + ': ' + Util.fixHTML(accountName));
-                $userAdminContent.append($userAccount);
+                var $userAccount = $('<span>', {'class': 'userAccount'}).append(Messages.user_accountName + ': ');
+                $userAdminContent.append($userAccount).append(Util.fixHTML(accountName));
                 $userAdminContent.append($('<br>'));
             }
             if (config.displayName) {
diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js
index 45c72aea0..d2950745f 100644
--- a/www/common/toolbar3.js
+++ b/www/common/toolbar3.js
@@ -151,6 +151,18 @@ define([
     };
 
     var avatars = {};
+    var editingUserName = {
+        state: false
+    };
+    var setDisplayName = function (newName) {
+        Common.setDisplayName(newName, function (err) {
+            if (err) {
+                console.log("Couldn't set username");
+                console.error(err);
+                return;
+            }
+        });
+    };
     var updateUserList = function (toolbar, config) {
         // Make sure the elements are displayed
         var $userButtons = toolbar.userlist;
@@ -185,6 +197,16 @@ define([
         var numberOfEditUsers = Object.keys(userData).length - duplicates;
         var numberOfViewUsers = viewers;
 
+        // If the user was changing his username, do not reste the input, store the current value
+        // and cursor
+        if (editingUserName.state) {
+            var $input = $userlistContent.find('.cp-toolbar-userlist-name-input');
+            editingUserName.value = $input.val();
+            editingUserName.select = [$input[0].selectionStart, $input[0].selectionEnd];
+        }
+
+
+
         // Update the userlist
         var $editUsers = $userlistContent.find('.' + USERLIST_CLS).html('');
 
@@ -213,28 +235,71 @@ define([
             var $span = $('<span>', {'class': 'cp-avatar'});
             var $rightCol = $('<span>', {'class': 'cp-toolbar-userlist-rightcol'});
             var $nameSpan = $('<span>', {'class': 'cp-toolbar-userlist-name'}).text(name).appendTo($rightCol);
-            var isMe = data.curvePublic === user.curvePublic;
-            if (Common.isLoggedIn() && data.curvePublic) {
-                if (isMe) {
-                    $span.attr('title', Messages._getKey('userlist_thisIsYou', [
-                        name
-                    ]));
-                    $nameSpan.text(name);
-                } else if (!friends[data.curvePublic]) {
-                    if (pendingFriends.indexOf(data.netfluxId) !== -1) {
-                        $('<span>', {'class': 'cp-toolbar-userlist-friend'}).text(Messages.userlist_pending)
-                            .appendTo($rightCol);
-                    } else {
-                        $('<span>', {
-                            'class': 'fa fa-user-plus cp-toolbar-userlist-friend',
-                            'title': Messages._getKey('userlist_addAsFriendTitle', [
-                                name
-                            ])
-                        }).appendTo($rightCol).click(function (e) {
-                            e.stopPropagation();
-                            Common.sendFriendRequest(data.netfluxId);
-                        });
+            var isMe = data.uid === user.uid;
+            if (isMe) {
+                $span.attr('title', Messages._getKey('userlist_thisIsYou', [
+                    name
+                ]));
+                $nameSpan.html('');
+                var $nameValue = $('<span>', {
+                    'class': 'cp-toolbar-userlist-name-value'
+                }).text(name).appendTo($nameSpan);
+                var $button = $('<button>', {
+                    'class': 'fa fa-pencil cp-toolbar-userlist-name-edit',
+                    title: "TODO: Edit your username"
+                }).appendTo($nameSpan);
+                var $nameInput = $('<input>', {
+                    'class': 'cp-toolbar-userlist-name-input'
+                }).val(name).appendTo($rightCol);
+                $button.click(function (e) {
+                    e.stopPropagation();
+                    $nameSpan.hide();
+                    $nameInput.show().focus().select();
+                    editingUserName.state = true;
+                    editingUserName.oldName = $nameInput.val();
+                });
+                $nameInput.click(function (e) {
+                    e.stopPropagation();
+                });
+                $nameInput.on('keydown', function (e) {
+                    if (e.which === 13 || e.which === 27) {
+                        $nameInput.hide();
+                        $nameSpan.show();
+                        $button.show();
+                        editingUserName.state = false;
+                    }
+                    if (e.which === 13) {
+                        var newName = $nameInput.val(); // TODO clean
+                        $nameValue.text(newName);
+                        setDisplayName(newName);
+                        return;
+                    }
+                    if (e.which === 27) {
+                        $nameValue.text(editingUserName.oldName);
+                        return;
                     }
+                });
+                if (editingUserName.state) {
+                    $button.click();
+                    $nameInput.val(editingUserName.value);
+                    $nameInput[0].setSelectionRange(editingUserName.select[0],
+                                                 editingUserName.select[1]);
+                    setTimeout(function () { $nameInput.focus(); });
+                }
+            } else if (Common.isLoggedIn() && data.curvePublic && !friends[data.curvePublic]) {
+                if (pendingFriends.indexOf(data.netfluxId) !== -1) {
+                    $('<span>', {'class': 'cp-toolbar-userlist-friend'}).text(Messages.userlist_pending)
+                        .appendTo($rightCol);
+                } else {
+                    $('<span>', {
+                        'class': 'fa fa-user-plus cp-toolbar-userlist-friend',
+                        'title': Messages._getKey('userlist_addAsFriendTitle', [
+                            name
+                        ])
+                    }).appendTo($rightCol).click(function (e) {
+                        e.stopPropagation();
+                        Common.sendFriendRequest(data.netfluxId);
+                    });
                 }
             }
             if (data.profile) {
@@ -824,6 +889,9 @@ define([
             userMenuCfg.displayName = 1;
             userMenuCfg.displayChangeName = 1;
         }
+        /*if (config.displayed.indexOf('userlist') !== -1) {
+            userMenuCfg.displayChangeName = 0;
+        }*/
         Common.createUserAdminMenu(userMenuCfg);
         $userAdmin.find('button').attr('title', Messages.userAccountButton);
 
@@ -837,13 +905,7 @@ define([
                 if (newName === null && typeof(lastName) === "string") { return; }
                 if (newName === null) { newName = ''; }
                 else { Common.feedback('NAME_CHANGED'); }
-                Common.setDisplayName(newName, function (err) {
-                    if (err) {
-                        console.log("Couldn't set username");
-                        console.error(err);
-                        return;
-                    }
-                });
+                setDisplayName(newName);
             });
         });