Make automatic pad storage configurable

customize.dist/pages.js

@@ -9,7 +9,7 @@ define([
     var Pages = {};
     var urlArgs = Config.requireConf.urlArgs;
 
-    var setHTML = function (e, html) {
+    var setHTML = Pages.setHTML = function (e, html) {
         e.innerHTML = html;
         return e;
     };
@@ -712,11 +712,15 @@ define([
 
         $(input).change(function () { $(mark).focus(); });
 
-        return h('label.cp-radio', labelOpts, [
+        var radio =  h('label', labelOpts, [
             input,
             mark,
             label
         ]);
+
+        $(radio).addClass('cp-radio');
+
+        return radio;
     };
 
     Pages['/user/'] = Pages['/user/index.html'] = function () {

customize.dist/src/less2/include/checkmark.less

@@ -49,6 +49,12 @@
                     background-color: @colortheme_checkmark-back2;
                     border-color: @colortheme_checkmark-back2;
                 }
+                &:disabled ~ .cp-checkmark-mark {
+                    background-color: @colortheme_checkmark-disabled;
+                }
+                &:disabled ~ .cp-checkmark-label {
+                    color: @colortheme_checkmark-disabled;
+                }
             }
         }
         &:hover .cp-checkmark-mark {
@@ -64,6 +70,12 @@
                     display: block;
                 }
             }
+            &:disabled ~ .cp-checkmark-mark {
+                background-color: @colortheme_checkmark-disabled;
+            }
+            &:disabled ~ .cp-checkmark-label {
+                color: @colortheme_checkmark-disabled;
+            }
         }
 
         .cp-checkmark-label {
@@ -128,6 +140,12 @@
                 &:checked ~ .cp-radio-mark {
                     background-color: @colortheme_checkmark-back2;
                 }
+                &:disabled ~ .cp-checkmark-mark {
+                    background-color: @colortheme_checkmark-disabled;
+                }
+                &:disabled ~ .cp-checkmark-label {
+                    color: @colortheme_checkmark-disabled;
+                }
             }
         }
         &:hover .cp-radio-mark {
@@ -143,6 +161,12 @@
                     display: block;
                 }
             }
+            &:disabled ~ .cp-checkmark-mark {
+                background-color: @colortheme_checkmark-disabled;
+            }
+            &:disabled ~ .cp-checkmark-label {
+                color: @colortheme_checkmark-disabled;
+            }
         }
 
         .cp-checkmark-label {

customize.dist/src/less2/include/colortheme.less

@@ -143,3 +143,4 @@
 @colortheme_checkmark-col1: @colortheme_form-color;
 @colortheme_checkmark-back2: @colortheme_form-bg-alt;
 @colortheme_checkmark-col2: @colortheme_form-color-alt;
+@colortheme_checkmark-disabled: #AAA;

customize.dist/src/less2/include/corner.less

@@ -6,6 +6,7 @@
 & {
     @corner-button-ok: #2c9b00;
     @corner-button-cancel: #990000;
+    @corner-link: #ffff7a;
 
     @keyframes appear {
         0% {
@@ -15,6 +16,14 @@
             transform: scale(1.0);
         }
     }
+    @keyframes minimize {
+        0% {
+            transform: scale(1.0);
+        }
+        100% {
+            transform: scale(0.1);
+        }
+    }
 
     .cp-corner-container {
         position: absolute;
@@ -28,18 +37,51 @@
         background-color: @colortheme_logo-1;
         color: @colortheme_base;
         z-index: 999;
-        scale: 0.1;
         transform-origin: bottom right;
         animation: appear 0.8s ease-in-out;
+        box-shadow: 0 0 10px 0 @colortheme_logo-1;
+        //transform: scale(0.1);
+        //transform: scale(1);
 
         .cp-corner-filler {
             float: left;
             clear: left;
             height: 21px;
         }
-        .cp-corner-text {
+        .cp-corner-minimize, .cp-corner-maximize {
-            
+            position: absolute;
+            height: 15px;
+            width: 20px;
+            top: 0;
+            right: 0;
+            font-size: 12px;
+            text-align: left;
+            cursor: pointer;
+            line-height: 15px;
+            display: none;
+            &:hover {
+                color: darken(@colortheme_base, 15%);
+            }
+        }
+        .cp-corner-minimize {
+            display: inline;
         }
+        &.cp-minimized {
+            transition: transform 0.8s ease-in-out;
+            transform: scale(0.1);
+            animation: none;
+            .cp-corner-text, .cp-corner-actions, .cp-corner-footer {
+                display: none;
+            }
+            .cp-corner-maximize {
+                display: inline;
+                font-size: 130px;
+                width: 180px;
+                height: 200px;
+                line-height: 200px;
+            }
+        }
+
         .cp-corner-actions {
             min-height: 30px;
             margin: 15px auto;
@@ -48,6 +90,12 @@
         .cp-corner-footer {
             font-style: italic;
             font-size: 0.8em;
+            a {
+                color: @corner-link;
+                &:hover {
+                    color: darken(@corner-link, 20%);
+                }
+            }
         }
 
         button {

customize.dist/translations/messages.js

@@ -565,6 +565,14 @@ define(function () {
     out.settings_importConfirm = "Are you sure you want to import recent pads from this browser to your user account's CryptDrive?";
     out.settings_importDone = "Import completed";
 
+    out.settings_autostoreTitle = "Pad storage in CryptDrive";
+    out.settings_autostoreHint = "<b>Automatic</b> pad storage results in all the pads you visit being stored in your CryptDrive.<br>" +
+                                 "<b>Manual (always ask)</b> results in the pads not being stored but a reminder will appear to ask you if you want to store them in CryptDrive.<br>" +
+                                 "<b>Manual (never ask)</b> results in the pads not being stored and option to store them will be available but in a hidden way.";
+    out.settings_autostoreYes = "Automatic";
+    out.settings_autostoreNo = "Manual (never ask)";
+    out.settings_autostoreMaybe = "Manual (always ask)";
+
     out.settings_userFeedbackTitle = "Feedback";
     out.settings_userFeedbackHint1 = "CryptPad provides some very basic feedback to the server, to let us know how to improve your experience. ";
     out.settings_userFeedbackHint2 = "Your pad's content will never be shared with the server.";
@@ -1227,10 +1235,13 @@ define(function () {
     out.sharedFolders_share = "Share this URL with other registered users to give them access to the shared folder. Once they open this URL, the shared folder will be added to the root directory of their CryptDrive.";
 
     // Manual pad storage popup
-    out.manual_notstored = "This pad is not stored in your drive. Do you want to store it now?"; // XXX
+    out.autostore_notstored = "This pad is not in your CryptDrive. Do you want to store it now?"; // XXX
-    out.manual_settings = "You can enable automatic pad storage in your Settings page!"; // XXX
+    out.autostore_settings = "You can enable automatic pad storage in your <a href=\"/settings/\">Settings</a> page!"; // XXX
-    out.manual_store = "Store";
+    out.autostore_store = "Store";
-    out.manual_hide = "Don't store";
+    out.autostore_hide = "Don't store";
+    out.autostore_error = "Unexpected error: we were unable to store this pad, please try again.";
+    out.autostore_saved = "The pad was successfully stored in your CryptDrive!";
+    out.autostore_forceSave = "Store the file in CryptDrive"; // File upload modal
 
     return out;
 });

www/common/common-interface.js

@@ -879,9 +879,12 @@ define([
 
     UI.createRadio = Pages.createRadio;
 
-    UI.cornerPopup = function (text, actions, footer) {
+    UI.cornerPopup = function (text, actions, footer, startHidden) {
-        // XXX create "minimize" icon
+        var minimize = h('div.cp-corner-minimize.fa.fa-window-minimize');
+        var maximize = h('div.cp-corner-maximize.fa.fa-window-maximize');
         var popup = h('div.cp-corner-container', [
+            minimize,
+            maximize,
             h('div.cp-corner-filler', { style: "width:130px;" }),
             h('div.cp-corner-filler', { style: "width:90px;" }),
             h('div.cp-corner-filler', { style: "width:60px;" }),
@@ -889,9 +892,20 @@ define([
             h('div.cp-corner-filler', { style: "width:20px;" }),
             h('div.cp-corner-text', text),
             h('div.cp-corner-actions', actions),
-            h('div.cp-corner-footer', footer)
+            Pages.setHTML(h('div.cp-corner-footer'), footer)
         ]);
 
+        $(minimize).click(function () {
+            $(popup).addClass('cp-minimized');
+        });
+        $(maximize).click(function () {
+            $(popup).removeClass('cp-minimized');
+        });
+
+        if (startHidden) {
+            $(popup).addClass('cp-minimized');
+        }
+
         var hide = function () {
             $(popup).hide();
         };
@@ -905,6 +919,7 @@ define([
         $('body').append(popup);
 
         return {
+            popup: popup,
             hide: hide,
             show: show,
             delete: deletePopup

www/common/common-ui-elements.js

@@ -2309,22 +2309,27 @@ define([
     };
 
     var storePopupState = false;
-    UIElements.displayStorePadPopup = function (common) {
+    UIElements.displayStorePadPopup = function (common, data) {
         if (storePopupState) { return; }
         storePopupState = true;
 
-        var text = Messages.manual_notstored;
+        var text = Messages.autostore_notstored;
-        var footer = Messages.manual_settings;
+        var footer = Messages.autostore_settings;
 
-        var hide = h('button.cp-corner-cancel', Messages.manual_hide);
+        var hide = h('button.cp-corner-cancel', Messages.autostore_hide);
-        var store = h('button.cp-corner-primary', Messages.manual_store);
+        var store = h('button.cp-corner-primary', Messages.autostore_store);
         var actions = h('div', [
             store,
             hide,
         ]);
 
-        console.log(text, footer);
+        var initialHide = data && data.autoStore && data.autoStore === -1;
-        var modal = UI.cornerPopup(text, actions, footer);
+        var modal = UI.cornerPopup(text, actions, footer, initialHide);
+
+        $(modal.popup).find('.cp-corner-footer a').click(function (e) {
+            e.preventDefault();
+            common.openURL('/settings/');
+        });
 
         $(hide).click(function () {
             modal.delete();
@@ -2334,9 +2339,9 @@ define([
             common.getSframeChannel().query("Q_AUTOSTORE_STORE", null, function (err, obj) {
                 if (err || (obj && obj.error)) {
                     console.error(err || obj.error);
-                    return void UI.warn("Error"); // XXX
+                    return void UI.warn(Messages.autostore_error);
                 }
-                UI.log("Saved"); // XXX
+                UI.log(Messages.autostore_saved);
             });
         });
 

www/common/outer/async-store.js

@@ -767,12 +767,11 @@ define([
             if (!contains) {
                 var autoStore = Util.find(store.proxy, ['settings', 'general', 'autostore']);
                 if (autoStore !== 1 && !data.forceSave && !data.path) {
-                    // XXX
                     // send event to inner to display the corner popup
                     postMessage(clientId, "AUTOSTORE_DISPLAY_POPUP", {
                         autoStore: autoStore
                     });
-                    return void cb({error: "EAUTH"});
+                    return void cb();
                 } else {
                     var roHref;
                     if (h.mode === "view") {

www/common/outer/upload.js

@@ -17,6 +17,7 @@ define([
         var path = file.path;
 
         var password = file.password;
+        var forceSave = file.forceSave;
         var hash, secret, key, id, href;
 
         var getNewHash = function () {
@@ -94,7 +95,7 @@ define([
                         password: password,
                         channel: id,
                         owners: metadata.owners,
-                        // XXX FORCESAVE ??
+                        forceSave: forceSave
                     };
                     common.setPadTitle(data, function (err) {
                         if (err) { return void console.error(err); }

www/common/sframe-common-file.js

@@ -233,6 +233,13 @@ define([
                 return q;
             };
 
+            var privateData = common.getMetadataMgr().getPrivateData();
+            var autoStore = Util.find(privateData, ['settings', 'general', 'autostore']) || 0;
+            var manualStore = autoStore === 1 ? undefined :
+                UI.createCheckbox('cp-upload-store', Messages.autostore_forceSave, true, {
+                    input: { disabled: true }
+                });
+
             // Ask for name, password and owner
             var content = h('div', [
                 h('h4', Messages.upload_modal_title),
@@ -247,8 +254,18 @@ define([
                     UI.createCheckbox('cp-upload-owned', Messages.upload_modal_owner, true),
                     createHelper('/faq.html#keywords-owned', Messages.creation_owned1)
                 ]),
+                manualStore
             ]);
 
+            $(content).find('#cp-upload-owned').on('change', function () {
+                var val = $(content).find('#cp-upload-owned').is(':checked');
+                if (val) {
+                    $(content).find('#cp-upload-store').prop('checked', true).prop('disabled', true);
+                } else {
+                    $(content).find('#cp-upload-store').prop('disabled', false);
+                }
+            });
+
             UI.confirm(content, function (yes) {
                 if (!yes) { return void cb(); }
 
@@ -256,6 +273,7 @@ define([
                 var newName = $(content).find('#cp-upload-name').val();
                 var password = $(content).find('#cp-upload-password').val() || undefined;
                 var owned = $(content).find('#cp-upload-owned').is(':checked');
+                var forceSave = owned || $(content).find('#cp-upload-store').is(':checked');
 
                 // Add extension to the name if needed
                 if (!newName || !newName.trim()) { newName = file.name; }
@@ -266,7 +284,8 @@ define([
                 cb({
                     name: newName,
                     password: password,
-                    owned: owned
+                    owned: owned,
+                    forceSave: forceSave
                 });
             });
         };
@@ -284,6 +303,7 @@ define([
             var name = file.name;
             var password;
             var owned = true;
+            var forceSave;
             var finish = function (abort) {
                 if (!abort) {
                     var metadata = {
@@ -296,6 +316,7 @@ define([
                         metadata: metadata,
                         password: password,
                         owned: owned,
+                        forceSave: forceSave,
                         dropEvent: e
                     });
                 }
@@ -316,6 +337,7 @@ define([
                     name = obj.name;
                     password = obj.password;
                     owned = obj.owned;
+                    forceSave = obj.forceSave;
                     finish();
                 });
             };

www/common/sframe-common.js

@@ -452,8 +452,8 @@ define([
                 UI.errorLoadingScreen($err, true, true);
             });
 
-            ctx.sframeChan.on('EV_AUTOSTORE_DISPLAY_POPUP', function () {
+            ctx.sframeChan.on('EV_AUTOSTORE_DISPLAY_POPUP', function (data) {
-                UIElements.displayStorePadPopup(funcs);
+                UIElements.displayStorePadPopup(funcs, data);
             });
 
             ctx.metadataMgr.onReady(waitFor());

www/settings/app-settings.less

@@ -52,6 +52,16 @@
                     width: @sidebar_button-width;
                 }
             }
+
+            .cp-settings-autostore-radio {
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                label {
+                    margin-right: 40px;
+                }
+            }
+
             .cp-settings-change-password {
                 [type="password"], [type="text"] {
                     width: @sidebar_button-width;

www/settings/inner.js

@@ -47,8 +47,7 @@ define([
             'cp-settings-displayname',
             'cp-settings-language-selector',
             'cp-settings-logout-everywhere',
-            'cp-settings-resettips',
+            'cp-settings-autostore',
-            'cp-settings-thumbnails',
             'cp-settings-userfeedback',
             'cp-settings-change-password',
             'cp-settings-delete'
@@ -60,6 +59,8 @@ define([
             'cp-settings-creation-template'
         ],
         'drive': [
+            'cp-settings-resettips',
+            'cp-settings-thumbnails',
             'cp-settings-drive-backup',
             'cp-settings-drive-import-local',
             'cp-settings-drive-reset'
@@ -208,71 +209,56 @@ define([
         return $div;
     };
 
-    create['resettips'] = function () {
+    create['autostore'] = function () {
-        var $div = $('<div>', {'class': 'cp-settings-resettips cp-sidebarlayout-element'});
+        var $div = $('<div>', { 'class': 'cp-settings-autostore cp-sidebarlayout-element'});
-        $('<label>').text(Messages.settings_resetTips).appendTo($div);
-        $('<span>', {'class': 'cp-sidebarlayout-description'})
-            .text(Messages.settings_resetTipsButton).appendTo($div);
-        var $button = $('<button>', {'id': 'cp-settings-resettips', 'class': 'btn btn-primary'})
-            .text(Messages.settings_resetTipsAction).appendTo($div);
-
-        var localStore = window.cryptpadStore;
-        $button.click(function () {
-            Object.keys(localStore).forEach(function (k) {
-                if(k.slice(0, 9) === "hide-info") {
-                    localStore.put(k, undefined);
-                }
-            });
-            UI.alert(Messages.settings_resetTipsDone);
-        });
-
-        return $div;
-    };
 
-    create['thumbnails'] = function () {
+        $('<span>', {'class': 'label'}).text(Messages.settings_autostoreTitle).appendTo($div);
-        var $div = $('<div>', {'class': 'cp-settings-thumbnails cp-sidebarlayout-element'});
-        $('<label>').text(Messages.settings_thumbnails).appendTo($div);
 
-        // Disable
         $('<span>', {'class': 'cp-sidebarlayout-description'})
-            .text(Messages.settings_disableThumbnailsDescription).appendTo($div);
+            .append(Messages.settings_autostoreHint).appendTo($div);
 
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $cbox = $(UI.createCheckbox('disableThumbnails',
+        var opt1 = UI.createRadio('cp-settings-autostore', 'cp-settings-autostore-no',
-                                   Messages.settings_disableThumbnailsAction,
+                                Messages.settings_autostoreNo, false, {
-                                   false, { label: {class: 'noTitle'} }));
+                                    input: { value: -1 },
-        var $checkbox = $cbox.find('input').on('change', function () {
+                                    label: { class: 'noTitle' }
+                                });
+        var opt2 = UI.createRadio('cp-settings-autostore', 'cp-settings-autostore-maybe',
+                                Messages.settings_autostoreMaybe, true, {
+                                    input: { value: 0 },
+                                    label: { class: 'noTitle' }
+                                });
+        var opt3 = UI.createRadio('cp-settings-autostore', 'cp-settings-autostore-yes',
+                                Messages.settings_autostoreYes, false, {
+                                    input: { value: 1 },
+                                    label: { class: 'noTitle' }
+                                });
+        var $div2 = $(h('div.cp-settings-autostore-radio', [
+            opt1,
+            opt2,
+            opt3
+        ])).appendTo($div);
+
+        $div.find('input[type="radio"]').on('change', function () {
             $spinner.show();
             $ok.hide();
-            var val = $checkbox.is(':checked') || false;
+            var val = $('input:radio[name="cp-settings-autostore"]:checked').val();
-            common.setAttribute(['general', 'disableThumbnails'], val, function () {
+            val = Number(val) || 0;
+            common.setAttribute(['general', 'autostore'], val, function () {
                 $spinner.hide();
                 $ok.show();
             });
         });
 
-        $cbox.appendTo($div);
+        $ok.hide().appendTo($div2);
-
+        $spinner.hide().appendTo($div2);
-        $ok.hide().appendTo($cbox);
-        $spinner.hide().appendTo($cbox);
 
-        common.getAttribute(['general', 'disableThumbnails'], function (e, val) {
+        common.getAttribute(['general', 'autostore'], function (err, val) {
-            $checkbox[0].checked = typeof(val) === "undefined" || val;
+            if (val === 1) { return void $('#cp-settings-autostore-yes').prop('checked', true); }
-        });
+            if (val === -1) { return void $('#cp-settings-autostore-no').prop('checked', true); }
-
+            $('#cp-settings-autostore-maybe').prop('checked', true);
-        // Reset
-        $('<span>', {'class': 'cp-sidebarlayout-description'})
-            .text(Messages.settings_resetThumbnailsDescription).appendTo($div);
-        var $button = $('<button>', {'id': 'resetThumbnails', 'class': 'btn btn-primary'})
-            .text(Messages.settings_resetThumbnailsAction).appendTo($div);
-
-        $button.click(function () {
-            sframeChan.query("Q_THUMBNAIL_CLEAR", null, function (err) {
-                if (err) { return void console.error("Cannot clear localForage"); }
-                UI.alert(Messages.settings_resetThumbnailsDone);
-            });
         });
 
         return $div;
@@ -759,6 +745,76 @@ define([
 
     // Drive settings
 
+    create['resettips'] = function () {
+        var $div = $('<div>', {'class': 'cp-settings-resettips cp-sidebarlayout-element'});
+        $('<label>').text(Messages.settings_resetTips).appendTo($div);
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages.settings_resetTipsButton).appendTo($div);
+        var $button = $('<button>', {'id': 'cp-settings-resettips', 'class': 'btn btn-primary'})
+            .text(Messages.settings_resetTipsAction).appendTo($div);
+
+        var localStore = window.cryptpadStore;
+        $button.click(function () {
+            Object.keys(localStore).forEach(function (k) {
+                if(k.slice(0, 9) === "hide-info") {
+                    localStore.put(k, undefined);
+                }
+            });
+            UI.alert(Messages.settings_resetTipsDone);
+        });
+
+        return $div;
+    };
+
+    create['thumbnails'] = function () {
+        var $div = $('<div>', {'class': 'cp-settings-thumbnails cp-sidebarlayout-element'});
+        $('<label>').text(Messages.settings_thumbnails).appendTo($div);
+
+        // Disable
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages.settings_disableThumbnailsDescription).appendTo($div);
+
+        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
+        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
+
+        var $cbox = $(UI.createCheckbox('disableThumbnails',
+                                   Messages.settings_disableThumbnailsAction,
+                                   false, { label: {class: 'noTitle'} }));
+        var $checkbox = $cbox.find('input').on('change', function () {
+            $spinner.show();
+            $ok.hide();
+            var val = $checkbox.is(':checked') || false;
+            common.setAttribute(['general', 'disableThumbnails'], val, function () {
+                $spinner.hide();
+                $ok.show();
+            });
+        });
+
+        $cbox.appendTo($div);
+
+        $ok.hide().appendTo($cbox);
+        $spinner.hide().appendTo($cbox);
+
+        common.getAttribute(['general', 'disableThumbnails'], function (e, val) {
+            $checkbox[0].checked = typeof(val) === "undefined" || val;
+        });
+
+        // Reset
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages.settings_resetThumbnailsDescription).appendTo($div);
+        var $button = $('<button>', {'id': 'resetThumbnails', 'class': 'btn btn-primary'})
+            .text(Messages.settings_resetThumbnailsAction).appendTo($div);
+
+        $button.click(function () {
+            sframeChan.query("Q_THUMBNAIL_CLEAR", null, function (err) {
+                if (err) { return void console.error("Cannot clear localForage"); }
+                UI.alert(Messages.settings_resetThumbnailsDone);
+            });
+        });
+
+        return $div;
+    };
+
     create['drive-backup'] = function () {
         var $div = $('<div>', {'class': 'cp-settings-drive-backup cp-sidebarlayout-element'});
 
@@ -1052,9 +1108,19 @@ define([
 
         // Content
         var $rightside = APP.$rightside;
-        for (var f in create) {
+        /*for (var f in create) {
             if (typeof create[f] !== "function") { continue; }
             $rightside.append(create[f]());
+        }*/
+        var addItem = function (cssClass) {
+            var item = cssClass.slice(12); // remove 'cp-settings-'
+            if (typeof (create[item]) === "function") {
+                $rightside.append(create[item]());
+            }
+        };
+        for (var cat in categories) {
+            if (!Array.isArray(categories[cat])) { continue; }
+            categories[cat].forEach(addItem);
         }
 
         // TODO RPC