Ability to import/export a user realtime object

www/common/cryptpad-common.js

@@ -847,9 +847,7 @@ define([
             case 'export':
                 button = $('<button>', {
                     title: Messages.exportButton + '\n' + Messages.exportButtonTitle,
-                    'class': "fa fa-download",
-                    style: 'font:'+size+' FontAwesome'
-                });
+                }).append($('<span>', {'class':'fa fa-download', style: 'font:'+size+' FontAwesome'}));
                 if (callback) {
                     button.click(callback);
                 }
@@ -857,9 +855,7 @@ define([
             case 'import':
                 button = $('<button>', {
                     title: Messages.importButton + '\n' + Messages.importButtonTitle,
-                    'class': "fa fa-upload",
-                    style: 'font:'+size+' FontAwesome'
-                });
+                }).append($('<span>', {'class':'fa fa-upload', style: 'font:'+size+' FontAwesome'}));
                 if (callback) {
                     button.click(common.importContent('text/plain', function (content, file) {
                         callback(content, file);

www/settings/main.css

@@ -18,6 +18,12 @@
 .cp #mainBlock #container .displayName button {
   vertical-align: middle;
 }
+.cp #mainBlock #container .backupDrive button {
+  margin-right: 5px;
+}
+.cp #mainBlock #container .backupDrive button span.fa {
+  margin-right: 5px;
+}
 .cp #mainBlock #container > div {
   margin: 10px 0;
 }

www/settings/main.js

@@ -1,8 +1,11 @@
 define([
     '/common/cryptpad-common.js',
+    '/common/cryptget.js',
+    '/bower_components/file-saver/FileSaver.min.js',
     '/bower_components/jquery/dist/jquery.min.js',
-], function (Cryptpad) {
+], function (Cryptpad, Crypt) {
     var $ = window.jQuery;
+    var saveAs = window.saveAs;
 
     var USERNAME_KEY = 'cryptpad.username';
 
@@ -92,6 +95,43 @@ define([
         return $div;
     };
 
+    var createBackupDrive = function (store) {
+        var obj = store.proxy;
+        var $div = $('<div>', {'class': 'backupDrive'});
+
+        var exportFile = function () {
+            var sjson = JSON.stringify(obj);
+            var suggestion = obj.login_name + '-' + new Date().toDateString();
+            Cryptpad.prompt(Cryptpad.Messages.exportPrompt,
+                Cryptpad.fixFileName(suggestion) + '.json', function (filename) {
+                if (!(typeof(filename) === 'string' && filename)) { return; }
+                var blob = new Blob([sjson], {type: "application/json;charset=utf-8"});
+                saveAs(blob, filename);
+            });
+        };
+        var importFile = function (content, file) {
+            var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).appendTo($div);
+            Crypt.put(Cryptpad.getUserHash(), content, function (e) {
+                if (e) { console.error(e); }
+                $spinner.remove();
+            });
+        };
+
+        var $label = $('<label>', {'for' : 'exportDrive'}).text('BACKUP/RESTORE MY DATA').appendTo($div); // XXX
+        $('<br>').appendTo($div);
+        /* add an export button */
+        var $export = Cryptpad.createButton('export', true, {}, exportFile);
+        $export.addClass('btn').addClass('btn-success').append('BACKUP'); // XXX
+        $div.append($export);
+
+        /* add an import button */
+        var $import = Cryptpad.createButton('import', true, {}, importFile);
+        $import.addClass('btn').addClass('btn-warning').append('RESTORE'); // XXX
+        $div.append($import);
+
+        return $div;
+    };
+
     var createResetDrive = function (obj) {
         var $div = $('<div>', {'class': 'resetDrive'});
         var $label = $('<label>', {'for' : 'resetDrive'}).text('CLEAN MY DRIVE').appendTo($div); // XXX
@@ -113,6 +153,7 @@ define([
         APP.$container.append(createTitle());
         APP.$container.append(createInfoBlock(obj));
         APP.$container.append(createDisplayNameInput(obj));
+        APP.$container.append(createBackupDrive(obj));
         APP.$container.append(createResetDrive(obj));
         obj.proxy.on('change', [], refresh);
         obj.proxy.on('remove', [], refresh);

www/settings/main.less

@@ -25,8 +25,13 @@
                     vertical-align: middle;
                 }
             }
-            .resetDrive {
-                
+            .backupDrive {
+                button {
+                    span.fa {
+                        margin-right: 5px;
+                    }
+                    margin-right: 5px;
+                }
             }
             &>div {
                 margin: 10px 0;