Update team name and add an avatar to the team

www/common/common-ui-elements.js

@@ -14,7 +14,9 @@ define([
     '/customize/application_config.js',
     '/customize/pages.js',
     '/bower_components/nthen/index.js',
-    'css!/customize/fonts/cptools/style.css'
+    'css!/customize/fonts/cptools/style.css',
+    '/bower_components/croppie/croppie.min.js',
+    'css!/bower_components/croppie/croppie.css',
 ], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Clipboard,
              Messages, AppConfig, Pages, NThen) {
     var UIElements = {};
@@ -1937,6 +1939,84 @@ define([
             });
         }
     };
+    var transformAvatar = function (file, cb) {
+        if (file.type === 'image/gif') { return void cb(file); }
+        var $croppie = $('<div>', {
+            'class': 'cp-app-profile-resizer'
+        });
+
+        if (typeof ($croppie.croppie) !== "function") {
+            console.warn('fuck');
+            return void cb(file);
+        }
+
+        var todo = function () {
+            UI.confirm($croppie[0], function (yes) {
+                if (!yes) { return; }
+                $croppie.croppie('result', {
+                    type: 'blob',
+                    size: {width: 300, height: 300}
+                }).then(function(blob) {
+                    blob.lastModifiedDate = new Date();
+                    blob.name = 'avatar';
+                    cb(blob);
+                });
+            });
+        };
+
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            $croppie.croppie({
+                url: e.target.result,
+                viewport: { width: 100, height: 100 },
+                boundary: { width: 400, height: 300 },
+            });
+            todo();
+        };
+        reader.readAsDataURL(file);
+    };
+    UIElements.addAvatar = function (common, cb) {
+        var AVATAR_SIZE_LIMIT = 0.5;
+        var allowedMediaTypes = [
+            'image/png',
+            'image/jpeg',
+            'image/jpg',
+            'image/gif',
+        ];
+        var fmConfig = {
+            noHandlers: true,
+            noStore: true,
+            body: $('body'),
+            onUploaded: cb
+        };
+        var FM = common.createFileManager(fmConfig);
+        var accepted = ".gif,.jpg,.jpeg,.png";
+        var data = {
+            FM: FM,
+            filter: function (file) {
+                var sizeMB = Util.bytesToMegabytes(file.size);
+                var type = file.type;
+                // We can't resize .gif so we have to display an error if it is too big
+                if (sizeMB > AVATAR_SIZE_LIMIT && type === 'image/gif') {
+                    UI.log(Messages._getKey('profile_uploadSizeError', [
+                        Messages._getKey('formattedMB', [AVATAR_SIZE_LIMIT])
+                    ]));
+                    return false;
+                }
+                // Display an error if the image type is not allowed
+                if (allowedMediaTypes.indexOf(type) === -1) {
+                    UI.log(Messages._getKey('profile_uploadTypeError', [
+                        accepted.split(',').join(', ')
+                    ]));
+                    return false;
+                }
+                return true;
+            },
+            transformer: transformAvatar,
+            accept: accepted
+        };
+        return data;
+    };
 
     /*  Create a usage bar which keeps track of how much storage space is used
         by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls,

www/common/outer/team.js

@@ -132,6 +132,7 @@ define([
             realtime: lm.realtime,
             handleSharedFolder: function (sfId, rt) { handleSharedFolder(ctx, id, sfId, rt); },
             sharedFolders: {}, // equivalent of store.sharedFolders in async-store
+            roster: roster
         };
 
         if (cId) { team.clients.push(cId); }
@@ -447,6 +448,32 @@ define([
         });
     };
 
+    var getTeamMetadata = function (ctx, data, cId, cb) {
+        var teamId = data.teamId;
+        if (!teamId) { return void cb({error: 'EINVAL'}); }
+        var team = ctx.teams[teamId];
+        if (!team) { return void cb ({error: 'ENOENT'}); }
+        if (!team.roster) { return void cb({error: 'NO_ROSTER'}); }
+        var state = team.roster.getState() || {};
+        cb(state.metadata || {});
+    };
+
+    var setTeamMetadata = function (ctx, data, cId, cb) {
+        var teamId = data.teamId;
+        if (!teamId) { return void cb({error: 'EINVAL'}); }
+        var team = ctx.teams[teamId];
+        if (!team) { return void cb ({error: 'ENOENT'}); }
+        if (!team.roster) { return void cb({error: 'NO_ROSTER'}); }
+        team.roster.metadata(data.metadata, function (err) {
+            if (err) { return void cb({error: err}); }
+            var localTeam = ctx.store.proxy.teams[teamId];
+            if (localTeam) {
+                localTeam.metadata = data.metadata
+            }
+            cb();
+        });
+    };
+
     // Remove a client from all the team they're subscribed to
     var removeClient = function (ctx, cId) {
         Object.keys(ctx.onReadyHandlers).forEach(function (teamId) {
@@ -565,6 +592,12 @@ define([
             if (cmd === 'OPEN_TEAM_CHAT') {
                 return void openTeamChat(ctx, data, clientId, cb);
             }
+            if (cmd === 'GET_TEAM_METADATA') {
+                return void getTeamMetadata(ctx, data, clientId, cb);
+            }
+            if (cmd === 'SET_TEAM_METADATA') {
+                return void setTeamMetadata(ctx, data, clientId, cb);
+            }
             if (cmd === 'CREATE_TEAM') {
                 return void createTeam(ctx, data, clientId, cb);
             }