From df7a2f35fb9fc803ee7b04c6d41993611e2d2e86 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 24 May 2019 17:45:03 +0200
Subject: [PATCH] Profile refactoring with friend request

---
 www/common/cryptpad-common.js     |  10 +
 www/common/outer/async-store.js   |  67 ++++-
 www/common/outer/store-rpc.js     |   2 +
 www/common/sframe-common-outer.js |   9 +-
 www/common/sframe-common.js       |  31 +++
 www/profile/app-profile.less      |  29 +-
 www/profile/inner.js              | 427 ++++++++++++++++--------------
 www/profile/main.js               |  14 +-
 8 files changed, 377 insertions(+), 212 deletions(-)

diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index 21cd34472..c9d070863 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -659,6 +659,14 @@ define([
     };
     mailbox.onEvent = Util.mkEvent();
 
+    // Universal
+    var universal = common.universal = {};
+    universal.execCommand = function (data, cb) {
+        postMessage("UNIVERSAL_COMMAND", data, cb);
+    };
+    universal.onEvent = Util.mkEvent();
+
+
     // Pad RPC
     var pad = common.padRpc = {};
     pad.joinPad = function (data) {
@@ -1097,6 +1105,8 @@ define([
         CURSOR_EVENT: common.cursor.onEvent.fire,
         // Mailbox
         MAILBOX_EVENT: common.mailbox.onEvent.fire,
+        // Universal
+        UNIVERSAL_EVENT: common.universal.onEvent.fire,
         // Pad
         PAD_READY: common.padRpc.onReadyEvent.fire,
         PAD_MESSAGE: common.padRpc.onMessageEvent.fire,
diff --git a/www/common/outer/async-store.js b/www/common/outer/async-store.js
index 2499e1007..2d21cc18c 100644
--- a/www/common/outer/async-store.js
+++ b/www/common/outer/async-store.js
@@ -13,6 +13,7 @@ define([
     '/common/outer/cursor.js',
     '/common/outer/onlyoffice.js',
     '/common/outer/mailbox.js',
+    '/common/outer/profile.js',
     '/common/outer/network-config.js',
     '/customize/application_config.js',
 
@@ -23,7 +24,7 @@ define([
     '/bower_components/nthen/index.js',
     '/bower_components/saferphore/index.js',
 ], function (Sortify, UserObject, ProxyManager, Migrate, Hash, Util, Constants, Feedback, Realtime, Messaging, Messenger,
-             Cursor, OnlyOffice, Mailbox, NetConfig, AppConfig,
+             Cursor, OnlyOffice, Mailbox, Profile, NetConfig, AppConfig,
              Crypto, ChainPad, CpNetflux, Listmap, nThen, Saferphore) {
 
     var create = function () {
@@ -35,7 +36,9 @@ define([
 
         var storeHash;
 
-        var store = window.CryptPad_AsyncStore = {};
+        var store = window.CryptPad_AsyncStore = {
+            modules: {}
+        };
 
         var onSync = function (cb) {
             nThen(function (waitFor) {
@@ -656,6 +659,9 @@ define([
                     });
                 });*/
             }
+            if (store.profile) {
+                store.profile.setName(value);
+            }
             store.proxy[Constants.displayNameKey] = value;
             broadcast([clientId], "UPDATE_METADATA");
             if (store.messenger) { store.messenger.updateMyData(); }
@@ -994,6 +1000,39 @@ define([
             cb();
         };
 
+        // Universal
+        Store.universal = {
+            execCommand: function (clientId, obj, cb) {
+                var type = obj.type;
+                var data = obj.data;
+                if (store.modules[type]) {
+                    store.modules[type].execCommand(clientId, data, cb);
+                } else {
+                    return void cb({error: type + ' is disabled'});
+                }
+            }
+        };
+        var loadUniversal = function (Module, type, waitFor) {
+            if (store.modules[type]) { return; }
+            store.modules[type] = Module.init({
+                store: store,
+                updateMetadata: function () {
+                    broadcast([], "UPDATE_METADATA");
+                },
+                pinPads: function (data, cb) { Store.pinPads(null, data, cb); },
+            }, waitFor, function (ev, data, clients) {
+                clients.forEach(function (cId) {
+                    postMessage(cId, 'UNIVERSAL_EVENT', {
+                        type: type,
+                        data: {
+                            ev: ev,
+                            data: data
+                        }
+                    });
+                });
+            });
+        };
+
         // Messenger
         Store.messenger = {
             execCommand: function (clientId, data, cb) {
@@ -1394,6 +1433,11 @@ define([
             try {
                 store.mailbox.removeClient(clientId);
             } catch (e) { console.error(e); }
+            Object.keys(store.modules).forEach(function (key) {
+                try {
+                    store.modules[key].removeClient(clientId);
+                } catch (e) { console.error(e); }
+            });
 
             Object.keys(Store.channels).forEach(function (chanId) {
                 var chanIdx = Store.channels[chanId].clients.indexOf(clientId);
@@ -1469,6 +1513,24 @@ define([
             });
         };
 
+/*
+        var loadProfile = function (waitFor) {
+            store.profile = Profile.init({
+                store: store,
+                updateMetadata: function () {
+                    broadcast([], "UPDATE_METADATA");
+                },
+                pinPads: function (data, cb) { Store.pinPads(null, data, cb); },
+            }, waitFor, function (ev, data, clients) {
+                clients.forEach(function (cId) {
+                    postMessage(cId, 'PROFILE_EVENT', {
+                        ev: ev,
+                        data: data
+                    });
+                });
+            });
+        };
+*/
         var loadCursor = function () {
             store.cursor = Cursor.init(store, function (ev, data, clients) {
                 clients.forEach(function (cId) {
@@ -1618,6 +1680,7 @@ define([
                 loadCursor();
                 loadOnlyOffice();
                 loadMailbox(waitFor);
+                loadUniversal(Profile, 'profile', waitFor);
                 cleanFriendRequests();
             }).nThen(function () {
                 var requestLogin = function () {
diff --git a/www/common/outer/store-rpc.js b/www/common/outer/store-rpc.js
index 40c446c48..ca9208f71 100644
--- a/www/common/outer/store-rpc.js
+++ b/www/common/outer/store-rpc.js
@@ -68,6 +68,8 @@ define([
             CURSOR_COMMAND: Store.cursor.execCommand,
             // Mailbox
             MAILBOX_COMMAND: Store.mailbox.execCommand,
+            // Universal
+            UNIVERSAL_COMMAND: Store.universal.execCommand,
             // Pad
             SEND_PAD_MSG: Store.sendPadMsg,
             JOIN_PAD: Store.joinPad,
diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js
index 9a5ba5730..29f84ea66 100644
--- a/www/common/sframe-common-outer.js
+++ b/www/common/sframe-common-outer.js
@@ -329,7 +329,7 @@ define([
                     for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }
 
                     if (cfg.addData) {
-                        cfg.addData(metaObj.priv, Cryptpad);
+                        cfg.addData(metaObj.priv, Cryptpad, metaObj.user);
                     }
 
                     sframeChan.event('EV_METADATA_UPDATE', metaObj);
@@ -872,6 +872,13 @@ define([
                 Cryptpad.cursor.execCommand(data, cb);
             });
 
+            Cryptpad.universal.onEvent.reg(function (data) {
+                sframeChan.event('EV_UNIVERSAL_EVENT', data);
+            });
+            sframeChan.on('Q_UNIVERSAL_COMMAND', function (data, cb) {
+                Cryptpad.universal.execCommand(data, cb);
+            });
+
             Cryptpad.mailbox.onEvent.reg(function (data) {
                 sframeChan.event('EV_MAILBOX_EVENT', data);
             });
diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js
index 38ea38f27..032a4c9e7 100644
--- a/www/common/sframe-common.js
+++ b/www/common/sframe-common.js
@@ -168,6 +168,31 @@ define([
         });
     };
 
+    // Universal direct channel
+    var modules = {};
+    funcs.makeUniversal = function (type, cfg) {
+        if (modules[type]) { return; }
+        var sframeChan = funcs.getSframeChannel();
+        modules[type] = {
+            onEvent: cfg.onEvent || function () {}
+        };
+        return {
+            execCommand: function (cmd, data, cb) {
+                sframeChan.query("Q_UNIVERSAL_COMMAND", {
+                    type: type,
+                    data: {
+                        cmd: cmd,
+                        data: data
+                    }
+                }, function (err, obj) {
+                    if (err) { return void cb({error: err}); }
+                    cb(obj);
+                });
+            }
+        };
+    };
+
+
     // Chat
     var padChatChannel;
     // common-ui-elements needs to be able to get the chat channel to put it in metadata when
@@ -575,6 +600,12 @@ define([
                 });
             });
 
+            ctx.sframeChan.on('EV_UNIVERSAL_EVENT', function (obj) {
+                var type = obj.type;
+                if (!type || !modules[type]) { return; }
+                modules[type].onEvent(obj.data);
+            });
+
             ctx.metadataMgr.onReady(waitFor());
 
             funcs.addShortcuts();
diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index ec41c4e31..852b11421 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -99,10 +99,23 @@
         }
         .cp-app-profile-link {
             font-size: 25px;
+            vertical-align: middle;
         }
         .cp-app-profile-displayname, .cp-app-profile-link {
             line-height: 40px;
         }
+        .cp-app-profile-link-code {
+            display: none;
+        }
+        & > button:empty {
+            margin-left: 25px;
+        }
+    }
+
+    .cp-app-profile-friend-request {
+        flex: 0;
+        width: 400px;
+        margin-top: 10px;
     }
 
     // I tried using flexbox but messed with how the pencil icon was displayed
@@ -116,10 +129,16 @@
     #cp-app-profile-description {
         position: relative;
         font-size: 16px;
-        border: 1px solid #DDD;
         margin-bottom: 20px;
+        .cp-app-profile-description-code {
+            display: none;
+        }
         .cp-app-profile-description-rendered {
+            border: 1px solid #DDD;
             padding: 0 15px;
+            &:empty {
+                display: none;
+            }
         }
         .cp-app-profile-description-ok, .cp-app-profile-description-spin {
             position: absolute;
@@ -133,7 +152,6 @@
             height: 300px;
         }
         .CodeMirror {
-            border: 1px solid #DDD;
             font-family: monospace;
             font-size: 16px;
             line-height: initial;
@@ -144,6 +162,13 @@
                 line-height: inherit;
             }
         }
+        .cp-app-profile-description-edit {
+            & > button {
+                span {
+                    margin-left: 10px;
+                }
+            }
+        }
     }
     #cp-app-profile-create {
         height: 100%;
diff --git a/www/profile/inner.js b/www/profile/inner.js
index 3dcd91f1d..d7bb6bfee 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -8,6 +8,7 @@ define([
     '/common/common-util.js',
     '/common/common-interface.js',
     '/common/common-realtime.js',
+    '/common/hyperscript.js',
     '/customize/messages.js',
     '/customize/application_config.js',
     '/bower_components/marked/marked.min.js',
@@ -33,6 +34,7 @@ define([
     Util,
     UI,
     Realtime,
+    h,
     Messages,
     AppConfig,
     Marked,
@@ -75,7 +77,6 @@ define([
     var LINK_ID = "cp-app-profile-link";
     var AVATAR_ID = "cp-app-profile-avatar";
     var DESCRIPTION_ID = "cp-app-profile-description";
-    var PUBKEY_ID = "cp-app-profile-pubkey";
     var CREATE_ID = "cp-app-profile-create";
     var HEADER_ID = "cp-app-profile-header";
     var HEADER_RIGHT_ID = "cp-app-profile-rightside";
@@ -85,98 +86,6 @@ define([
     var common;
     var sFrameChan;
 
-    var createEditableInput = function ($block, name, ph, getValue, setValue, fallbackValue) {
-        fallbackValue = fallbackValue || ''; // don't ever display 'null' or 'undefined'
-        var lastVal;
-        getValue(function (value) {
-            lastVal = value;
-            var $input = $('<input>', {
-                'id': name+'Input',
-                placeholder: ph
-            }).val(value);
-            var editing = false;
-            var todo = function () {
-                if (editing) { return; }
-                editing = true;
-
-                var newVal = $input.val().trim();
-
-                if (newVal === lastVal) {
-                    editing = false;
-                    return;
-                }
-
-                setValue(newVal, function (err) {
-                    if (err) { return void console.error(err); }
-                    lastVal = newVal;
-                    UI.log(Messages._getKey('profile_fieldSaved', [newVal || fallbackValue]));
-                    editing = false;
-                });
-            };
-            $input.on('keyup', function (e) {
-                if (e.which === 13) { return void todo(); }
-                if (e.which === 27) {
-                    $input.val(lastVal);
-                }
-            });
-            $input.focus(function () {
-                $input.width('');
-            });
-            $input.focusout(todo);
-            $block.append($input);
-        });
-    };
-
-/* jshint ignore:start */
-    var isFriend = function (proxy, edKey) {
-        var friends = Util.find(proxy, ['friends']);
-        return typeof(edKey) === 'string' && friends && (edKey in friends);
-    };
-
-    var addCreateInviteLinkButton = function ($container) {
-        return;
-        /*var obj = APP.lm.proxy;
-
-        var proxy = Cryptpad.getProxy();
-        var userViewHash = Util.find(proxy, ['profile', 'view']);
-
-        var edKey = obj.edKey;
-        var curveKey = obj.curveKey;
-
-        if (!APP.readOnly || !curveKey || !edKey || userViewHash === window.location.hash.slice(1) || isFriend(proxy, edKey)) {
-            //console.log("edit mode or missing curve key, or you're viewing your own profile");
-            return;
-        }
-
-        // sanitize user inputs
-
-        var unsafeName = obj.name || '';
-        console.log(unsafeName);
-        var name = Util.fixHTML(unsafeName) || Messages.anonymous;
-        console.log(name);
-
-        console.log("Creating invite button");
-        $("<button>", {
-            id: CREATE_INVITE_BUTTON,
-            title: Messages.profile_inviteButtonTitle,
-        })
-        .addClass('btn btn-success')
-        .text(Messages.profile_inviteButton)
-        .click(function () {
-            UI.confirm(Messages._getKey('profile_inviteExplanation', [name]), function (yes) {
-                if (!yes) { return; }
-                console.log(obj.curveKey);
-                UI.alert("TODO");
-                // TODO create a listmap object using your curve keys
-                // TODO fill the listmap object with your invite data
-                // TODO generate link to invite object
-                // TODO copy invite link to clipboard
-            }, null, true);
-        })
-        .appendTo($container);*/
-    };
-        /* jshint ignore:end */
-
     var addViewButton = function ($container) {
         if (APP.readOnly) {
             return;
@@ -198,53 +107,106 @@ define([
 
     var addDisplayName = function ($container) {
         var $block = $('<div>', {id: DISPLAYNAME_ID}).appendTo($container);
+        APP.$name = $('<span>', {'class': DISPLAYNAME_ID}).appendTo($block);
+    };
+    var refreshName = function (data) {
+        APP.$name.text(data.name || Messages.anonymous);
+    };
 
+    var addLink = function ($container) {
+        var $block = $('<div>', {id: LINK_ID}).appendTo($container);
 
-        var getValue = function (cb) {
-            cb(APP.lm.proxy.name);
-        };
-        var placeholder = Messages.profile_namePlaceholder;
-        if (APP.readOnly) {
-            var $span = $('<span>', {'class': DISPLAYNAME_ID}).appendTo($block);
-            getValue(function (value) {
-                $span.text(value || Messages.anonymous);
+        APP.$link = $('<a>', {
+            'class': LINK_ID,
+            target: '_blank',
+            rel: 'noreferrer noopener'
+        }).appendTo($block).hide();
+
+        APP.$linkEdit = $();
+        if (APP.readOnly) { return; }
+
+        var button = h('button.btn.btn-primary', {
+            title: Messages.clickToEdit
+        }, Messages.profile_addLink);
+        APP.$linkEdit = $(button);
+        $block.append(button);
+        var save = h('button.btn.btn-success', Messages.settings_save);
+        var text = h('input');
+        var code = h('div.cp-app-profile-link-code', [
+            text,
+            save
+        ]);
+        var div = h('div.cp-app-profile-link-edit', [
+            code
+        ]);
+        $block.append(div);
+        $(button).click(function () {
+            $(text).val(APP.$link.attr('href'));
+            $(code).show();
+            APP.editor.refresh();
+            $(button).hide();
+        });
+        $(save).click(function () {
+            $(save).hide();
+            APP.module.execCommand('SET', {
+                key: 'url',
+                value: $(text).val()
+            }, function (data) {
+                APP.updateValues(data);
+                $(code).hide();
+                $(button).show();
+                $(save).show();
             });
+        });
+    };
+    var refreshLink = function (data) {
+        APP.$linkEdit.removeClass('fa-pencil').removeClass('fa');
+        if (!data.url) {
+            APP.$linkEdit.text(Messages.profile_addLink);
+            return void APP.$link.hide();
+        }
+        APP.$link.attr('href', data.url).text(data.url).show();
+        APP.$linkEdit.text('').addClass('fa fa-pencil');
+    };
+
+    var addFriendRequest = function ($container) {
+        if (!APP.readOnly || !APP.common.isLoggedIn()) { return; }
+        APP.$friend = $('<button>', {
+            'class': 'btn btn-success cp-app-profile-friend-request',
+        });
+        $container.append(APP.$friend);
+    };
+    var refreshFriendRequest = function (data) {
+        if (!APP.$friend) { return; }
+
+        var me = common.getMetadataMgr().getUserData().curvePublic;
+        if (data.curvePublic === me) {
+            APP.$friend.remove();
+        }
 
-            //addCreateInviteLinkButton($block);
+        var friends = common.getMetadataMgr().getPrivateData().friends;
+        if (friends[data.curvePublic]) {
+            $(h('p.cp-app-profile-friend', Messages.profile_friend)).insertAfter(APP.$friend);
+            APP.$friend.remove();
             return;
         }
-        var setValue = function (value, cb) {
-            APP.lm.proxy.name = value;
-            Realtime.whenRealtimeSyncs(APP.lm.realtime, cb);
-        };
-        createEditableInput($block, DISPLAYNAME_ID, placeholder, getValue, setValue, Messages.anonymous);
-    };
 
-    var addLink = function ($container) {
-        var $block = $('<div>', {id: LINK_ID}).appendTo($container);
-        var getValue = function (cb) {
-            cb(APP.lm.proxy.url);
-        };
-        if (APP.readOnly) {
-            var $a = $('<a>', {
-                'class': LINK_ID,
-                target: '_blank',
-                rel: 'noreferrer noopener'
-            }).appendTo($block);
-            getValue(function (value) {
-                if (!value) {
-                    return void $a.hide();
-                }
-                $a.attr('href', value).text(value);
-            });
+        var pendingFriends = APP.common.getPendingFriends(); // Friend requests sent
+        if (pendingFriends[data.curvePublic]) {
+            APP.$friend.attr('disabled', 'disabled').text();
+            APP.$friend.text(Messages.profile_friendRequestSent);
             return;
         }
-        var setValue = function (value, cb) {
-            APP.lm.proxy.url = value;
-            Realtime.whenRealtimeSyncs(APP.lm.realtime, cb);
-        };
-        var placeholder = Messages.profile_urlPlaceholder;
-        createEditableInput($block, LINK_ID, placeholder, getValue, setValue);
+        APP.$friend.text(Messages._getKey('userlist_addAsFriendTitle', [data.name]))
+            .off('click')
+            .click(function () {
+                APP.common.sendFriendRequest({
+                    curvePublic: data.curvePublic,
+                    notifications: data.notifications
+                }, function () {
+                    APP.$friend.attr('disabled', 'disabled').text();
+                });
+            });
     };
 
     var AVATAR_SIZE_LIMIT = 0.5;
@@ -289,38 +251,44 @@ define([
         };
         reader.readAsDataURL(file);
     };
-    var addAvatar = function ($container) {
-        var $block = $('<div>', {id: AVATAR_ID}).appendTo($container);
-        var $span = $('<span>').appendTo($block);
+    var displayAvatar = function (val) {
         var sframeChan = common.getSframeChannel();
-        var displayAvatar = function () {
-            $span.html('');
-            if (!APP.lm.proxy.avatar) {
-                $('<img>', {
-                    src: '/customize/images/avatar.png',
-                    title: Messages.profile_avatar,
-                    alt: 'Avatar'
-                }).appendTo($span);
-                return;
-            }
-            common.displayAvatar($span, APP.lm.proxy.avatar);
+        var $span = APP.$avatar;
+        $span.html('');
+        if (!val) {
+            $('<img>', {
+                src: '/customize/images/avatar.png',
+                title: Messages.profile_avatar,
+                alt: 'Avatar'
+            }).appendTo($span);
+            return;
+        }
+        common.displayAvatar($span, val);
 
-            if (APP.readOnly) { return; }
+        if (APP.readOnly) { return; }
 
-            var $delButton = $('<button>', {
-                'class': 'cp-app-profile-avatar-delete btn btn-danger fa fa-times',
-                title: Messages.fc_delete
-            });
-            $span.append($delButton);
-            $delButton.click(function () {
-                var old = common.getMetadataMgr().getUserData().avatar;
+        var $delButton = $('<button>', {
+            'class': 'cp-app-profile-avatar-delete btn btn-danger fa fa-times',
+            title: Messages.fc_delete
+        });
+        $span.append($delButton);
+        $delButton.click(function () {
+            var old = common.getMetadataMgr().getUserData().avatar;
+            APP.module.execCommand("SET", {
+                key: 'avatar',
+                value: ""
+            }, function () {
                 sframeChan.query("Q_PROFILE_AVATAR_REMOVE", old, function (err, err2) {
                     if (err || err2) { return void UI.log(err || err2); }
-                    delete APP.lm.proxy.avatar;
                     displayAvatar();
                 });
             });
-        };
+        });
+    };
+    var addAvatar = function ($container) {
+        var $block = $('<div>', {id: AVATAR_ID}).appendTo($container);
+        APP.$avatar = $('<span>').appendTo($block);
+        var sframeChan = common.getSframeChannel();
         displayAvatar();
         if (APP.readOnly) { return; }
 
@@ -331,10 +299,14 @@ define([
             onUploaded: function (ev, data) {
                 var old = common.getMetadataMgr().getUserData().avatar;
                 var todo = function () {
-                    sframeChan.query("Q_PROFILE_AVATAR_ADD", data.url, function (err, err2) {
-                        if (err || err2) { return void UI.log(err || err2); }
-                        APP.lm.proxy.avatar = data.url;
-                        displayAvatar();
+                    APP.module.execCommand("SET", {
+                        key: 'avatar',
+                        value: data.url
+                    }, function () {
+                        sframeChan.query("Q_PROFILE_AVATAR_ADD", data.url, function (err, err2) {
+                            if (err || err2) { return void UI.log(err || err2); }
+                            displayAvatar(data.url);
+                        });
                     });
                 };
                 if (old) {
@@ -378,30 +350,37 @@ define([
         $upButton.prepend($('<span>', {'class': 'fa fa-upload'}));
         $block.append($upButton);
     };
+    var refreshAvatar = function (data) {
+        displayAvatar(data.avatar);
+    };
 
     var addDescription = function ($container) {
         var $block = $('<div>', {id: DESCRIPTION_ID}).appendTo($container);
 
-        if (APP.readOnly) {
-            if (!(APP.lm.proxy.description || "").trim()) { return void $block.hide(); }
-            var $div = $('<div>', {'class': 'cp-app-profile-description-rendered'}).appendTo($block);
-            var val = Marked(APP.lm.proxy.description);
-            $div.html(val);
-            return;
-        }
-        $('<h3>').text(Messages.profile_description).insertBefore($block);
-
-        var $ok = $('<span>', {
-            'class': 'cp-app-profile-description-ok fa fa-check',
-            title: Messages.saved
-        }).appendTo($block);
-        var $spinner = $('<span>', {
-            'class': 'cp-app-profile-description-spin fa fa-spinner fa-pulse'
-        }).appendTo($block);
-
-        var $textarea = $('<textarea>').val(APP.lm.proxy.description || '');
-        $block.append($textarea);
-        var editor = APP.editor = CodeMirror.fromTextArea($textarea[0], {
+        APP.$description = $('<div>', {'class': 'cp-app-profile-description-rendered'}).appendTo($block);
+        APP.$descriptionEdit = $();
+        if (APP.readOnly) { return; }
+
+        var button = h('button.btn.btn-primary', [
+            h('i.fa.fa-pencil'),
+            h('span', Messages.profile_addDescription)
+        ]);
+        APP.$descriptionEdit = $(button);
+        var save = h('button.btn.btn-primary', Messages.settings_save);
+        var text = h('textarea');
+        var code = h('div.cp-app-profile-description-code', [
+            text,
+            h('br'),
+            save
+        ]);
+        var div = h('div.cp-app-profile-description-edit', [
+            h('p.cp-app-profile-info', Messages.profile_info),
+            button,
+            code
+        ]);
+        $block.append(div);
+
+        var editor = APP.editor = CodeMirror.fromTextArea(text, {
             lineNumbers: true,
             lineWrapping: true,
             styleActiveLine : true,
@@ -409,25 +388,34 @@ define([
         });
 
         var markdownTb = common.createMarkdownToolbar(editor);
-        $block.prepend(markdownTb.toolbar);
-
-        var onLocal = function () {
-            $ok.hide();
-            $spinner.show();
-            var val = editor.getValue();
-            APP.lm.proxy.description = val;
-            Realtime.whenRealtimeSyncs(APP.lm.realtime, function () {
-                $ok.show();
-                $spinner.hide();
-            });
-        };
+        $(code).prepend(markdownTb.toolbar);
+        $(markdownTb.toolbar).show();
 
-        editor.on('change', onLocal);
+        $(button).click(function () {
+            $(code).show();
+            APP.editor.refresh();
+            $(button).hide();
+        });
+        $(save).click(function () {
+            $(save).hide();
+            APP.module.execCommand('SET', {
+                key: 'description',
+                value: editor.getValue()
+            }, function (data) {
+                APP.updateValues(data);
+                $(code).hide();
+                $(button).show();
+                $(save).show();
+            });
+        });
     };
-
-    var addPublicKey = function ($container) {
-        var $block = $('<div>', {id: PUBKEY_ID});
-        $container.append($block);
+    var refreshDescription = function (data) {
+        var val = Marked(data.description || "");
+        APP.$description.html(val);
+        APP.$descriptionEdit.find('span').text(val === "" ? Messages.profile_addDescription : Messages.profile_editDescription);
+        if (!APP.editor) { return; }
+        APP.editor.setValue(data.description || "");
+        APP.editor.save();
     };
 
     var createLeftside = function () {
@@ -438,7 +426,7 @@ define([
         $category.append(Messages.profileButton);
     };
 
-    var onReady = function () {
+    var init = function () {
         APP.$container.find('#'+CREATE_ID).remove();
 
         if (!APP.initialized) {
@@ -447,14 +435,20 @@ define([
             var $rightside = $('<div>', {id: HEADER_RIGHT_ID}).appendTo($header);
             addDisplayName($rightside);
             addLink($rightside);
+            addFriendRequest($rightside);
             addDescription(APP.$rightside);
             addViewButton(APP.$rightside);
-            addPublicKey(APP.$rightside);
             APP.initialized = true;
             createLeftside();
         }
+    };
 
-        UI.removeLoadingScreen();
+    var updateValues = APP.updateValues = function (data) {
+        refreshAvatar(data);
+        refreshName(data);
+        refreshLink(data);
+        refreshDescription(data);
+        refreshFriendRequest(data);
     };
 
     var createToolbar = function () {
@@ -470,6 +464,16 @@ define([
         APP.toolbar.$rightside.hide();
     };
 
+    var onEvent = function (obj) {
+        var ev = obj.ev;
+        var data = obj.data;
+        if (ev === 'UPDATE') {
+            console.log('Update');
+            updateValues(data);
+            return;
+        }
+    };
+
     nThen(function (waitFor) {
         $(waitFor(UI.addLoadingScreen));
         SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
@@ -508,6 +512,23 @@ define([
             return;
         }
 
+        if (privateData.isOwnProfile) {
+
+            APP.module = common.makeUniversal('profile', {
+                onEvent: onEvent
+            });
+            var execCommand = APP.module.execCommand;
+
+            init();
+
+            console.log('POST SUBSCRIBE');
+            execCommand('SUBSCRIBE', null, function (obj) {
+                updateValues(obj);
+                UI.removeLoadingScreen();
+            });
+            return;
+        }
+
         var listmapConfig = {
             data: {},
             common: common,
@@ -517,6 +538,12 @@ define([
 
         var lm = APP.lm = Listmap.create(listmapConfig);
 
-        lm.proxy.on('ready', onReady);
+        init();
+        lm.proxy.on('ready', function () {
+            updateValues(lm.proxy);
+            UI.removeLoadingScreen();
+        }).on('change', [], function () {
+            updateValues(lm.proxy);
+        });
     });
 });
diff --git a/www/profile/main.js b/www/profile/main.js
index 3afab9077..92b24b3fc 100644
--- a/www/profile/main.js
+++ b/www/profile/main.js
@@ -43,18 +43,13 @@ define([
                 // No password for profiles
                 return void cb(null, Hash.getSecrets('profile', window.location.hash.slice(1)));
             }
-            var editHash;
             nThen(function (waitFor) {
                 // 2nd case: visiting our own existing profile
                 Cryptpad.getProfileEditUrl(waitFor(function (hash) {
-                    editHash = hash;
+                    waitFor.abort();
+                    return void cb(null, Hash.getSecrets('profile', hash));
                 }));
             }).nThen(function () {
-                if (editHash) {
-                    // No password for profile
-                    return void cb(null, Hash.getSecrets('profile', editHash));
-                }
-                // 3rd case: profile creation (create a new random hash, store it later if needed)
                 if (!Utils.LocalStore.isLoggedIn()) {
                     // Unregistered users can't create a profile
                     window.location.href = '/drive/';
@@ -79,6 +74,10 @@ define([
                 cb(null, secret);
             });
         };
+        var addData = function (meta, Cryptad, user) {
+            meta.isOwnProfile = !window.location.hash ||
+                window.location.hash.slice(1) === user.profile;
+        };
         var addRpc = function (sframeChan, Cryptpad, Utils) {
             // Adding a new avatar from the profile: pin it and store it in the object
             sframeChan.on('Q_PROFILE_AVATAR_ADD', function (data, cb) {
@@ -100,6 +99,7 @@ define([
             getSecrets: getSecrets,
             noHash: true, // Don't add the hash in the URL if it doesn't already exist
             addRpc: addRpc,
+            addData: addData,
             owned: true
         });
     });