Merge branch 'autostore' into staging

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

@@ -0,0 +1,123 @@
+@import (reference) "./colortheme-all.less";
+
+.corner_main() {
+    --LessLoader_require: LessLoader_currentFile();
+};
+& {
+    @corner-button-ok: #2c9b00;
+    @corner-button-cancel: #990000;
+    @corner-link: #ffff7a;
+
+    @keyframes appear {
+        0% {
+            transform: scale(0.1);
+        }
+        100% {
+            transform: scale(1.0);
+        }
+    }
+    @keyframes minimize {
+        0% {
+            transform: scale(1.0);
+        }
+        100% {
+            transform: scale(0.1);
+        }
+    }
+
+    .cp-corner-container {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 300px;
+        height: 200px;
+        border-top-left-radius: 200px;
+        padding: 15px;
+        text-align: right;
+        background-color: @colortheme_logo-1;
+        color: @colortheme_base;
+        z-index: 999;
+        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-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;
+            display: inline-block;
+        }
+        .cp-corner-footer {
+            font-style: italic;
+            font-size: 0.8em;
+            a {
+                color: @corner-link;
+                &:hover {
+                    color: darken(@corner-link, 20%);
+                }
+            }
+        }
+
+        button {
+            color: white;
+            border: 0px;
+            padding: 5px;
+            color: @colortheme_base;
+            &.cp-corner-primary {
+                background-color: @corner-button-ok;
+                font-weight: bold;
+                &:hover {
+                    background-color: lighten(@corner-button-ok, 10%);
+                }
+            }
+            &.cp-corner-cancel {
+                background-color: @corner-button-cancel;
+                margin-left: 10px;
+                &:hover {
+                    background-color: lighten(@corner-button-cancel, 10%);
+                }
+            }
+        }
+    }
+}
+

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

@@ -2,6 +2,7 @@
 @import (reference) "./toolbar.less";
 @import (reference) './fileupload.less';
 @import (reference) './alertify.less';
+@import (reference) './corner.less';
 @import (reference) './tokenfield.less';
 @import (reference) './creation.less';
 @import (reference) './tippy.less';
@@ -27,6 +28,7 @@
         @color: @color
     );
     .alertify_main();
+    .corner_main();
     .fileupload_main();
     .tokenfield_main();
     .tippy_main();
@@ -60,6 +62,7 @@
     );
     .fileupload_main();
     .alertify_main();
+    .corner_main();
     .tippy_main();
     .checkmark_main(20px);
     .password_main();

customize.dist/translations/messages.js

@@ -568,6 +568,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.";
@@ -1231,5 +1239,16 @@ 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.";
 
     out.chrome68 = "It seems that you're using the browser Chrome or Chromium version 68. It contains a bug resulting in the page turning completely white after a few seconds or the page being unresponsive to clicks. To fix this issue, you can switch to another tab and come back, or try to scroll in the page. This bug should be fixed in the next version of your browser.";
+
+    // Manual pad storage popup
+    out.autostore_notstored = "This pad is not in your CryptDrive. Do you want to store it now?"; // XXX
+    out.autostore_settings = "You can enable automatic pad storage in your <a href=\"/settings/\">Settings</a> page!"; // XXX
+    out.autostore_store = "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
+    out.autostore_notAvailable = "You must store this pad in your CryptDrive before being able to use this feature."; // Properties/tags/move to trash
+
     return out;
 });

www/common/common-interface.js

@@ -879,5 +879,52 @@ define([
 
     UI.createRadio = Pages.createRadio;
 
+    UI.cornerPopup = function (text, actions, footer, startHidden) {
+        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;" }),
+            h('div.cp-corner-filler', { style: "width:40px;" }),
+            h('div.cp-corner-filler', { style: "width:20px;" }),
+            h('div.cp-corner-text', text),
+            h('div.cp-corner-actions', actions),
+            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();
+        };
+        var show = function () {
+            $(popup).show();
+        };
+        var deletePopup = function () {
+            $(popup).remove();
+        };
+
+        $('body').append(popup);
+
+        return {
+            popup: popup,
+            hide: hide,
+            show: show,
+            delete: deletePopup
+        };
+    };
+
     return UI;
 });

www/common/common-ui-elements.js

@@ -722,6 +722,10 @@ define([
                 button
                 .click(common.prepareFeedback(type))
                 .click(function() {
+                    common.isPadStored(function (err, data) {
+                        if (!data) {
+                            return void UI.alert(Messages.autostore_notAvailable);
+                        }
                         sframeChan.query('Q_IS_ONLY_IN_SHARED_FOLDER', null, function (err, res) {
                             if (err || res.error) { return void console.log(err || res.error); }
                             var msg = Messages.forgetPrompt;
@@ -745,6 +749,7 @@ define([
 
                         });
                     });
+                });
                 break;
             case 'present':
                 button = $('<button>', {
@@ -807,7 +812,14 @@ define([
                     title: Messages.tags_title,
                 })
                 .click(common.prepareFeedback(type))
-                .click(function () { UIElements.updateTags(common, null); });
+                .click(function () {
+                    common.isPadStored(function (err, data) {
+                        if (!data) {
+                            return void UI.alert(Messages.autostore_notAvailable);
+                        }
+                        UIElements.updateTags(common, null);
+                    });
+                });
                 break;
             case 'toggle':
                 button = $('<button>', {
@@ -844,6 +856,10 @@ define([
                 .text(Messages.propertiesButton))
                 .click(common.prepareFeedback(type))
                 .click(function () {
+                    common.isPadStored(function (err, data) {
+                        if (!data) {
+                            return void UI.alert(Messages.autostore_notAvailable);
+                        }
                         getPropertiesData(common, function (e, data) {
                             if (e) { return void console.error(e); }
                             UIElements.getProperties(common, data, function (e, $prop) {
@@ -852,6 +868,7 @@ define([
                             });
                         });
                     });
+                });
                 break;
             default:
                 data = data || {};
@@ -2308,5 +2325,44 @@ define([
         $(password).find('.cp-password-input').focus();
     };
 
+    var storePopupState = false;
+    UIElements.displayStorePadPopup = function (common, data) {
+        if (storePopupState) { return; }
+        storePopupState = true;
+
+        var text = Messages.autostore_notstored;
+        var footer = Messages.autostore_settings;
+
+        var hide = h('button.cp-corner-cancel', Messages.autostore_hide);
+        var store = h('button.cp-corner-primary', Messages.autostore_store);
+        var actions = h('div', [
+            store,
+            hide,
+        ]);
+
+        var initialHide = data && data.autoStore && data.autoStore === -1;
+        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();
+        });
+        $(store).click(function () {
+            modal.delete();
+            common.getSframeChannel().query("Q_AUTOSTORE_STORE", null, function (err, obj) {
+                if (err || (obj && obj.error)) {
+                    console.error(err || obj.error);
+                    return void UI.warn(Messages.autostore_error);
+                }
+                UI.log(Messages.autostore_saved);
+            });
+        });
+
+    };
+
     return UIElements;
 });

www/common/cryptpad-common.js

@@ -547,7 +547,7 @@ define([
 
         postMessage("SET_PAD_TITLE", data, function (obj) {
             if (obj && obj.error) {
-                console.log("unable to set pad title");
+                if (obj.error !== "EAUTH") { console.log("unable to set pad title"); }
                 return void cb(obj.error);
             }
             cb();
@@ -925,6 +925,10 @@ define([
     common.loading = {};
     common.loading.onDriveEvent = Util.mkEvent();
 
+    // (Auto)store pads
+    common.autoStore = {};
+    common.autoStore.onStoreRequest = Util.mkEvent();
+
     common.getFullHistory = function (data, cb) {
         postMessage("GET_FULL_HISTORY", data, cb);
     };
@@ -1070,7 +1074,9 @@ define([
         // Account deletion
         DELETE_ACCOUNT: common.startAccountDeletion,
         // Loading
-        LOADING_DRIVE: common.loading.onDriveEvent.fire
+        LOADING_DRIVE: common.loading.onDriveEvent.fire,
+        // AutoStore
+        AUTOSTORE_DISPLAY_POPUP: common.autoStore.onStoreRequest.fire,
     };
 
     common.hasCSSVariables = function () {

www/common/outer/async-store.js

@@ -772,6 +772,15 @@ define([
 
             // Add the pad if it does not exist in our drive
             if (!contains) {
+                var autoStore = Util.find(store.proxy, ['settings', 'general', 'autostore']);
+                var ownedByMe = Array.isArray(owners) && owners.indexOf(store.proxy.edPublic) !== -1;
+                if (autoStore !== 1 && !data.forceSave && !data.path && !ownedByMe) {
+                    // send event to inner to display the corner popup
+                    postMessage(clientId, "AUTOSTORE_DISPLAY_POPUP", {
+                        autoStore: autoStore
+                    });
+                    return void cb();
+                } else {
                     var roHref;
                     if (h.mode === "view") {
                         roHref = href;
@@ -788,6 +797,7 @@ define([
                         path: data.path
                     }, cb);
                     return;
+                }
             } else {
                 sendDriveEvent('DRIVE_CHANGE', {
                     path: ['drive', UserObject.FILES_DATA]

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 () {
@@ -93,7 +94,8 @@ define([
                         path: path,
                         password: password,
                         channel: id,
-                        owners: metadata.owners
+                        owners: metadata.owners,
+                        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-outer.js

@@ -358,6 +358,27 @@ define([
                 setDocumentTitle();
             });
 
+            Cryptpad.autoStore.onStoreRequest.reg(function (data) {
+                sframeChan.event("EV_AUTOSTORE_DISPLAY_POPUP", data);
+            });
+            sframeChan.on('Q_AUTOSTORE_STORE', function (obj, cb) {
+                var data = {
+                    password: password,
+                    title: currentTitle,
+                    channel: secret.channel,
+                    path: initialPathInDrive, // Where to store the pad if we don't have it in our drive
+                    forceSave: true
+                };
+                Cryptpad.setPadTitle(data, function (err) {
+                    cb(err);
+                });
+            });
+            sframeChan.on('Q_IS_PAD_STORED', function (data, cb) {
+                Cryptpad.getPadAttribute('title', function (err, data) {
+                    cb (!err && typeof (data) === "string");
+                });
+            });
+
 
             sframeChan.on('Q_SETTINGS_SET_DISPLAY_NAME', function (newName, cb) {
                 Cryptpad.setDisplayName(newName, function (err) {
@@ -399,6 +420,7 @@ define([
                 Cryptpad.saveAsTemplate(Cryptget.put, data, cb);
             });
 
+            // Messaging
             sframeChan.on('Q_SEND_FRIEND_REQUEST', function (netfluxId, cb) {
                 Cryptpad.inviteFromUserlist(netfluxId, cb);
             });
@@ -411,6 +433,7 @@ define([
                 sframeChan.event('EV_FRIEND_REQUEST', data);
             });
 
+            // History
             sframeChan.on('Q_GET_FULL_HISTORY', function (data, cb) {
                 var crypto = Crypto.createEncryptor(secret.keys);
                 Cryptpad.getFullHistory({
@@ -452,6 +475,7 @@ define([
                 });
             });
 
+            // Store
             sframeChan.on('Q_GET_PAD_ATTRIBUTE', function (data, cb) {
                 var href;
                 if (readOnly && hashes.editHash) {

www/common/sframe-common.js

@@ -206,6 +206,12 @@ define([
         }, cb);
     };
 
+    funcs.isPadStored = function (cb) {
+        ctx.sframeChan.query("Q_IS_PAD_STORED", null, function (err, obj) {
+            cb (err || (obj && obj.error), obj);
+        });
+    };
+
     funcs.sendAnonRpcMsg = function (msg, content, cb) {
         ctx.sframeChan.query('Q_ANON_RPC_MESSAGE', {
             msg: msg,
@@ -452,6 +458,10 @@ define([
                 UI.errorLoadingScreen($err, true, true);
             });
 
+            ctx.sframeChan.on('EV_AUTOSTORE_DISPLAY_POPUP', function (data) {
+                UIElements.displayStorePadPopup(funcs, data);
+            });
+
             ctx.metadataMgr.onReady(waitFor());
         }).nThen(function () {
             try {

www/common/sframe-protocol.js

@@ -257,4 +257,8 @@ define({
     // Get all existing tags
     'Q_GET_ALL_TAGS': true,
 
+    // Store pads in the drive
+    'EV_AUTOSTORE_DISPLAY_POPUP': true,
+    'Q_AUTOSTORE_STORE': true,
+    'Q_IS_PAD_STORED': true,
 });

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;
+        $('<span>', {'class': 'label'}).text(Messages.settings_autostoreTitle).appendTo($div);
-        $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);
+            .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) {
-            $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 () {
+        common.getAttribute(['general', 'autostore'], function (err, val) {
-            sframeChan.query("Q_THUMBNAIL_CLEAR", null, function (err) {
+            if (val === 1) { return void $('#cp-settings-autostore-yes').prop('checked', true); }
-                if (err) { return void console.error("Cannot clear localForage"); }
+            if (val === -1) { return void $('#cp-settings-autostore-no').prop('checked', true); }
-                UI.alert(Messages.settings_resetThumbnailsDone);
+            $('#cp-settings-autostore-maybe').prop('checked', true);
-            });
         });
 
         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