From 7758d056fad4c60b31e57bf9db7dc404f7e7d732 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 15 Feb 2017 12:40:28 +0100
Subject: [PATCH] Ability to import/export a user realtime object

---
 www/common/cryptpad-common.js |  8 ++-----
 www/settings/main.css         |  6 +++++
 www/settings/main.js          | 43 ++++++++++++++++++++++++++++++++++-
 www/settings/main.less        |  9 ++++++--
 4 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index acba58503..26b772c1f 100644
--- a/www/common/cryptpad-common.js
+++ b/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);
diff --git a/www/settings/main.css b/www/settings/main.css
index c10ea0d6b..a60bae7b0 100644
--- a/www/settings/main.css
+++ b/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;
 }
diff --git a/www/settings/main.js b/www/settings/main.js
index cdea74874..38cf106e2 100644
--- a/www/settings/main.js
+++ b/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);
diff --git a/www/settings/main.less b/www/settings/main.less
index 27e2becba..0a20a5e58 100644
--- a/www/settings/main.less
+++ b/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;