From ef480fea79c6e1b6eaa761af16c6a413a2f1c746 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 11 Jan 2018 16:02:05 +0100
Subject: [PATCH] Add a settings category for the pad creation screen

---
 .../src/less2/include/sidebar-layout.less     |   3 +
 customize.dist/translations/messages.fr.js    |   9 +
 customize.dist/translations/messages.js       |  11 +-
 www/common/common-ui-elements.js              |  33 +-
 www/common/sframe-app-framework.js            |  11 +-
 www/common/sframe-common.js                   |   8 +
 www/drive/inner.js                            |   2 -
 www/settings/app-settings.less                |  76 +-
 www/settings/inner.js                         | 655 ++++++++++++------
 9 files changed, 595 insertions(+), 213 deletions(-)

diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less
index 89d23d946..ede03942e 100644
--- a/customize.dist/src/less2/include/sidebar-layout.less
+++ b/customize.dist/src/less2/include/sidebar-layout.less
@@ -48,6 +48,9 @@
                     display: block;
                     color: @description-color;
                     margin-bottom: 5px;
+                    p {
+                        margin-bottom: 0;
+                    }
                 }
                 margin-bottom: 20px;
             }
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index ee8a1a4d2..c79e07708 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -487,6 +487,7 @@ define(function () {
     out.settings_cat_drive = "CryptDrive";
     out.settings_cat_code = "Code";
     out.settings_cat_pad = "Documents texte";
+    out.settings_cat_creation = "Nouveau pad";
     out.settings_title = "Préférences";
     out.settings_save = "Sauver";
 
@@ -547,6 +548,14 @@ define(function () {
     out.settings_padWidthHint = "L'éditeur de documents texte occupe toute la largeur de l'écran disponible par défaut, ce qui peut rendre le texte difficile à lire. Vous pouvez ici réduire la largeur de l'éditeur.";
     out.settings_padWidthLabel = "Réduire la largeur de l'éditeur";
 
+    out.settings_creationSkip = "Passer l'écran de création de pad";
+    out.settings_creationSkipHint = "L'écran de création de pad offre de nouvelles options pour créer un pad, permettant d'avoir plus de contrôle et de sécurité concernant vos données. Toutefois, il peut ralentir votre travail en ajoutant une étape supplémentaire et donc, ici, vous avez la possibilité de choisir de passer cet écran et d'utiliser les paramètres par défaut choisis au-dessus.";
+    out.settings_creationSkipTrue = "Passer";
+    out.settings_creationSkipFalse = "Afficher";
+
+    out.settings_templateSkip = "Passer la fenêtre de choix d'un modèle";
+    out.settings_templateSkipHint = "Quand vous créez un nouveau pad, et si vous possédez des modèles pour ce type de pad, une fenêtre peut apparaître pour demander si vous souhaitez importer un modèle. Ici vous pouvez choisir de ne jamais montrer cette fenêtre et donc de ne jamais utiliser de modèle.";
+
     out.upload_title = "Hébergement de fichiers";
     out.upload_rename = "Souhaitez-vous renommer <b>{0}</b> avant son stockage en ligne ?<br>" +
                         "<em>L'extension du fichier ({1}) sera ajoutée automatiquement. "+
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 84dbdde0e..3261f4b3b 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -493,6 +493,7 @@ define(function () {
     out.settings_cat_drive = "CryptDrive";
     out.settings_cat_code = "Code";
     out.settings_cat_pad = "Rich text";
+    out.settings_cat_creation = "New pad";
     out.settings_title = "Settings";
     out.settings_save = "Save";
 
@@ -553,6 +554,14 @@ define(function () {
     out.settings_padWidthHint = "Rich text pads use by default the maximum available width on your screen and it can be difficult to read. You can reduce the editor's width here.";
     out.settings_padWidthLabel = "Reduce the editor's width";
 
+    out.settings_creationSkip = "Skip the pad creation screen";
+    out.settings_creationSkipHint = "The pad creation screen offers new options to create a pad, providing you more control and security over your data. However, it may slow down your workflow by adding one additionnal step so, here, you have the option to skip this screen and use the default settings selected above.";
+    out.settings_creationSkipTrue = "Skip";
+    out.settings_creationSkipFalse = "Display";
+
+    out.settings_templateSkip = "Skip the template selection modal";
+    out.settings_templateSkipHint = "When you create a new empty pad, if you have stored templates for this type of pad, a modal appears to ask if you want to use a template. Here you can choose to never show this modal and so to never use a template.";
+
     out.upload_title = "File upload";
     out.upload_rename = "Do you want to rename <b>{0}</b> before uploading it to the server?<br>" +
                         "<em>The file extension ({1}) will be added automatically. "+
@@ -819,7 +828,7 @@ define(function () {
     out.creation_expireHours = "Hours";
     out.creation_expireDays = "Days";
     out.creation_expireMonths = "Months";
-    out.creation_expire1 = "By default, a pad stored by a registered users will never be removed from the server, unless it is requested by its owner.";
+    out.creation_expire1 = "By default, a pad stored by a registered user will never be removed from the server, unless it is requested by its owner.";
     out.creation_expire2 = "If you prefer, you can set a life time to make sure the pad will be permanently deleted from the server and unavailable after the specified date.";
     out.creation_createTitle = "Create a pad";
     out.creation_createFromTemplate = "From template";
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index f49491ebf..2c1c38efb 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1317,7 +1317,29 @@ define([
         });
     };
 
-    UIElements.getPadCreationScreen = function (common, cb) {
+    UIElements.setExpirationValue = function (val, $expire) {
+        if (val && typeof (val) === "number") {
+            $expire.find('#cp-creation-expire-true').attr('checked', true);
+            if (val % (3600 * 24 * 30) === 0) {
+                $expire.find('#cp-creation-expire-unit').val("month");
+                $expire.find('#cp-creation-expire-val').val(val / (3600 * 24 * 30));
+                return;
+            }
+            if (val % (3600 * 24) === 0) {
+                $expire.find('#cp-creation-expire-unit').val("day");
+                $expire.find('#cp-creation-expire-val').val(val / (3600 * 24));
+                return;
+            }
+            if (val % 3600 === 0) {
+                $expire.find('#cp-creation-expire-unit').val("hour");
+                $expire.find('#cp-creation-expire-val').val(val / 3600);
+                return;
+            }
+            // if we're here, it means we don't have a valid value so we should check unlimited
+            $expire.find('#cp-creation-expire-false').attr('checked', true);
+        }
+    };
+    UIElements.getPadCreationScreen = function (common, cfg, cb) {
         if (!common.isLoggedIn()) { return void cb(); }
         var sframeChan = common.getSframeChannel();
         var metadataMgr = common.getMetadataMgr();
@@ -1372,6 +1394,11 @@ define([
         ]);
         $creation.append(owned);
 
+        // If set to "open pad" or not set, check "open pad"
+        if (!cfg.owned && typeof cfg.owned !== "undefined") {
+            $creation.find('#cp-creation-owned-false').attr('checked', true);
+        }
+
         // Life time
         var expire = h('div.cp-creation-expire', [
             h('h2', [
@@ -1413,6 +1440,8 @@ define([
         ]);
         $creation.append(expire);
 
+        UIElements.setExpirationValue(cfg.expire, $creation);
+
         // Create the pad
         var create = function (template) {
             // Type of pad
@@ -1430,7 +1459,7 @@ define([
                 expireVal = ($('#cp-creation-expire-val').val() || 0) * unit;
             }
 
-            sframeChan.query("Q_CREATE_PAD", {
+            common.createPad({
                 owned: ownedVal,
                 expire: expireVal,
                 template: template
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index 04f924c14..b5fb42466 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -300,7 +300,9 @@ define([
                 }
             }
 
-            if (newPad && !AppConfig.displayCreationScreen) {
+            var skipTemp = Util.find(privateDat, ['settings', 'general', 'creation', 'noTemplate']);
+            var skipCreation = Util.find(privateDat, ['settings', 'general', 'creation', 'skip']);
+            if (newPad && (!skipTemp && skipCreation)) {
                 common.openTemplatePicker();
             }
         };
@@ -402,8 +404,11 @@ define([
         }).nThen(function (waitFor) {
             Test.registerInner(common.getSframeChannel());
             if (!AppConfig.displayCreationScreen) { return; }
-            if (common.getMetadataMgr().getPrivateData().isNewFile) {
-                common.getPadCreationScreen(waitFor());
+            var priv = common.getMetadataMgr().getPrivateData();
+            if (priv.isNewFile) {
+                var c = (priv.settings.general && priv.settings.general.creation) || {};
+                if (c.skip) { return void common.createPad(c, waitFor()); }
+                common.getPadCreationScreen(c, waitFor());
             }
         }).nThen(function (waitFor) {
             cpNfInner = common.startRealtime({
diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js
index 634b0506a..103359da8 100644
--- a/www/common/sframe-common.js
+++ b/www/common/sframe-common.js
@@ -165,6 +165,14 @@ define([
     };
 
     // Store
+    funcs.createPad = function (cfg, cb) {
+        ctx.sframeChan.query("Q_CREATE_PAD", {
+            owned: cfg.owned,
+            expire: cfg.expire,
+            template: cfg.template
+        }, cb);
+    };
+
     funcs.sendAnonRpcMsg = function (msg, content, cb) {
         ctx.sframeChan.query('Q_ANON_RPC_MESSAGE', {
             msg: msg,
diff --git a/www/drive/inner.js b/www/drive/inner.js
index 381eb5e94..afa12fdec 100644
--- a/www/drive/inner.js
+++ b/www/drive/inner.js
@@ -2604,7 +2604,6 @@ define([
                 moveElements(pathsList, [TRASH], false, refresh);
             }
             else if ($(this).hasClass('cp-app-drive-context-deleteowned')) {
-                var pathsListD = [];
                 var msgD = Messages.fm_deleteOwnedPads;
                 UI.confirm(msgD, function(res) {
                     $(window).focus();
@@ -2716,7 +2715,6 @@ define([
                 moveElements(pathsList, [TRASH], false, refresh);
             }
             else if ($(this).hasClass('cp-app-drive-context-deleteowned')) {
-                var pathsListD = [];
                 var msgD = Messages.fm_deleteOwnedPads;
                 UI.confirm(msgD, function(res) {
                     $(window).focus();
diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index 072c37e91..b6fec0158 100644
--- a/www/settings/app-settings.less
+++ b/www/settings/app-settings.less
@@ -5,6 +5,7 @@
 @import (once) '../../customize/src/less2/include/alertify.less';
 @import (once) '../../customize/src/less2/include/sidebar-layout.less';
 @import (once) "../../customize/src/less2/include/limit-bar.less";
+@import (once) "../../customize/src/less2/include/creation.less";
 
 .toolbar_main(
     @bg-color: @colortheme_settings-bg,
@@ -14,6 +15,7 @@
 .alertify_main();
 .sidebar-layout_main();
 .limit-bar_main();
+.creation_main();
 
 // body
 &.cp-app-settings {
@@ -55,7 +57,7 @@
                     width: @sidebar_button-width;
                 }
             }
-            .cp-settings-backup-drive {
+            .cp-settings-drive-backup {
                 button {
                     span.fa {
                         margin-right: 5px;
@@ -63,6 +65,78 @@
                     margin-right: 5px;
                 }
             }
+            .cp-settings-creation-owned, .cp-settings-creation-expire,
+            .cp-settings-creation-skip, .cp-settings-creation-template {
+                input[type="radio"] {
+                    display: none;
+                    &:checked {
+                        & + label {
+                            font-weight: bold;
+                            background-color: lighten(@colortheme_loading-bg, 20%);
+                            cursor: default;
+                            border: 1px solid #c1158e;
+                            color: @colortheme_loading-color;
+                            &:hover {
+                                background-color: lighten(@colortheme_loading-bg, 20%);
+                            }
+                        }
+                    }
+                }
+                input[type="radio"] + label {
+                    .tools_unselectable();
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 200px;
+                    height: 50px;
+                    padding: 5px;
+                    margin: 0 20px;
+                    border: 1px solid black;
+                    cursor: pointer;
+                    &:hover {
+                        background-color: lighten(@colortheme_loading-bg, 10%);
+                    }
+                }
+                .fa {
+                    display: none;
+                    margin-left: 50px;
+                }
+            }
+            .cp-settings-creation-skipped {
+                display: none !important; // we have to override an inline style attribute
+            }
+            .cp-settings-creation-expire {
+                #cp-creation-expire-true {
+                    display: none;
+                    &:checked {
+                        & + label {
+                            height: 100px;
+                            .cp-creation-expire-picker {
+                                display: inline;
+                            }
+                        }
+                    }
+                }
+                label[for="cp-creation-expire-true"] {
+                    flex-wrap: wrap;
+                    .cp-creation-expire-picker {
+                        display: none;
+                    }
+                    input {
+                        width: 70px;
+                    }
+                    select {
+                        width: 100px;
+                    }
+                    input, select {
+                        border: none;
+                        height: 30px;
+                        background: @colortheme_loading-bg;
+                        color: @colortheme_loading-color;
+                        border-radius: 3px;
+                    }
+                }
+            }
         }
     }
 }
diff --git a/www/settings/inner.js b/www/settings/inner.js
index f2c4fb483..22d4b4be5 100644
--- a/www/settings/inner.js
+++ b/www/settings/inner.js
@@ -4,9 +4,11 @@ define([
     '/bower_components/nthen/index.js',
     '/common/sframe-common.js',
     '/common/common-interface.js',
+    '/common/common-ui-elements.js',
     '/common/common-util.js',
     '/common/common-hash.js',
     '/customize/messages.js',
+    '/common/hyperscript.js',
 
     '/bower_components/file-saver/FileSaver.min.js',
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
@@ -18,9 +20,11 @@ define([
     nThen,
     SFCommon,
     UI,
+    UIElements,
     Util,
     Hash,
-    Messages
+    Messages,
+    h
     )
 {
     var saveAs = window.saveAs;
@@ -41,21 +45,31 @@ define([
             'cp-settings-thumbnails',
             'cp-settings-userfeedback'
         ],
+        'creation': [
+            'cp-settings-creation-owned',
+            'cp-settings-creation-expire',
+            'cp-settings-creation-skip',
+            'cp-settings-creation-template'
+        ],
         'drive': [
-            'cp-settings-backup-drive',
-            'cp-settings-import-local-pads',
-            'cp-settings-reset-drive'
+            'cp-settings-drive-backup',
+            'cp-settings-drive-import-local',
+            'cp-settings-drive-reset'
         ],
         'pad': [
             'cp-settings-pad-width',
         ],
         'code': [
-            'cp-settings-indent-unit',
-            'cp-settings-indent-type'
+            'cp-settings-code-indent-unit',
+            'cp-settings-code-indent-type'
         ]
     };
 
-    var createInfoBlock = function () {
+    var create = {};
+
+    // Account settings
+
+    create['info-block'] = function () {
         var $div = $('<div>', {'class': 'cp-settings-info-block'});
 
         var $account = $('<div>', {'class': 'cp-sidebarlayout-element'}).appendTo($div);
@@ -81,7 +95,7 @@ define([
     };
 
     // Create the block containing the display name field
-    var createDisplayNameInput = function () {
+    create['displayname'] = function () {
         var $div = $('<div>', {'class': 'cp-settings-displayname cp-sidebarlayout-element'});
         $('<label>', {'for' : 'cp-settings-displayname'}).text(Messages.user_displayName).appendTo($div);
         var $inputBlock = $('<div>', {'class': 'cp-sidebarlayout-input-block'}).appendTo($div);
@@ -124,111 +138,49 @@ define([
         return $div;
     };
 
-    var createIndentUnitSelector = function () {
-        var $div = $('<div>', {
-            'class': 'cp-settings-indent-unit cp-sidebarlayout-element'
-        });
-        $('<label>').text(Messages.settings_codeIndentation).appendTo($div);
-
-        var $inputBlock = $('<div>', {
-            'class': 'cp-sidebarlayout-input-block',
-        }).appendTo($div);
-
-        var $input = $('<input>', {
-            'min': 1,
-            'max': 8,
-            type: 'number',
-        }).on('change', function () {
-            var val = parseInt($input.val());
-            if (typeof(val) !== 'number') { return; }
-            common.setAttribute(['codemirror', 'indentUnit'], val);
-        }).appendTo($inputBlock);
-
-        common.getAttribute(['codemirror', 'indentUnit'], function (e, val) {
-            if (e) { return void console.error(e); }
-            if (typeof(val) !== 'number') {
-                $input.val(2);
-            } else {
-                $input.val(val);
-            }
-        });
-        return $div;
-    };
-
-    var createIndentTypeSelector = function () {
-        var key = 'indentWithTabs';
-
-        var $div = $('<div>', {
-            'class': 'cp-settings-indent-type cp-sidebarlayout-element'
-        });
-        $('<label>').text(Messages.settings_codeUseTabs).appendTo($div);
-
-        var $inputBlock = $('<div>', {
-            'class': 'cp-sidebarlayout-input-block',
-        }).css('flex-flow', 'column')
-        .appendTo($div);
-
-        var $input = $('<input>', {
-            type: 'checkbox',
-        }).on('change', function () {
-            var val = $input.is(':checked');
-            if (typeof(val) !== 'boolean') { return; }
-            common.setAttribute(['codemirror', key], val);
-        }).appendTo($inputBlock);
-
-        /*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
-            $input[0].checked = !!n;
-        });*/
-
-        common.getAttribute(['codemirror', key], function (e, val) {
-            if (e) { return void console.error(e); }
-            $input[0].checked = !!val;
-        });
+    create['language-selector'] = function () {
+        var $div = $('<div>', {'class': 'cp-settings-language-selector cp-sidebarlayout-element'});
+        $('<label>').text(Messages.language).appendTo($div);
+        var $b = common.createLanguageSelector($div);
+        $b.find('button').addClass('btn btn-secondary');
         return $div;
     };
 
-    var createPadWidthSelector = function () {
-        var $div = $('<div>', {
-            'class': 'cp-settings-pad-width cp-sidebarlayout-element'
-        });
-        $('<span>', {'class': 'label'}).text(Messages.settings_padWidth).appendTo($div);
-
+    create['logout-everywhere'] = function () {
+        if (!common.isLoggedIn()) { return; }
+        var $div = $('<div>', { 'class': 'cp-settings-logout-everywhere cp-sidebarlayout-element'});
+        $('<label>', { 'for': 'cp-settings-logout-everywhere'})
+            .text(Messages.settings_logoutEverywhereTitle).appendTo($div);
         $('<span>', {'class': 'cp-sidebarlayout-description'})
-            .text(Messages.settings_padWidthHint).appendTo($div);
-
-        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
-        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
-
-        var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
-                    .text(Messages.settings_padWidthLabel);
-        var $input = $('<input>', {
-            type: 'checkbox',
-            id: 'cp-settings-padwidth'
-        }).on('change', function () {
-            $spinner.show();
-            $ok.hide();
-            var val = $input.is(':checked');
-            common.setAttribute(['pad', 'width'], val, function () {
-                $spinner.hide();
-                $ok.show();
-            });
-        }).appendTo($div);
-        $label.appendTo($div);
+            .text(Messages.settings_logoutEverywhere).appendTo($div);
+        var $button = $('<button>', {
+            id: 'cp-settings-logout-everywhere',
+            'class': 'btn btn-primary'
+        }).text(Messages.settings_logoutEverywhereButton)
+            .appendTo($div);
+        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
+        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
 
-        $ok.hide().appendTo($div);
-        $spinner.hide().appendTo($div);
+        $button.click(function () {
 
+            UI.confirm(Messages.settings_logoutEverywhereConfirm, function (yes) {
+                if (!yes) { return; }
+                $spinner.show();
+                $ok.hide();
 
-        common.getAttribute(['pad', 'width'], function (e, val) {
-            if (e) { return void console.error(e); }
-            if (val) {
-                $input.attr('checked', 'checked');
-            }
+                sframeChan.query('Q_SETTINGS_LOGOUT', null, function () {
+                    $spinner.hide();
+                    $ok.show();
+                    window.setTimeout(function () {
+                        $ok.fadeOut(1500);
+                    }, 2500);
+                });
+            });
         });
         return $div;
     };
 
-    var createResetTips = function () {
+    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'})
@@ -249,7 +201,7 @@ define([
         return $div;
     };
 
-    var createThumbnails = function () {
+    create['thumbnails'] = function () {
         var $div = $('<div>', {'class': 'cp-settings-thumbnails cp-sidebarlayout-element'});
         $('<label>').text(Messages.settings_thumbnails).appendTo($div);
 
@@ -301,8 +253,286 @@ define([
         return $div;
     };
 
-    var createBackupDrive = function () {
-        var $div = $('<div>', {'class': 'cp-settings-backup-drive cp-sidebarlayout-element'});
+    create['userfeedback'] = function () {
+        var $div = $('<div>', { 'class': 'cp-settings-userfeedback cp-sidebarlayout-element'});
+
+        $('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
+
+        var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
+            .text(Messages.settings_userFeedback);
+
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .append(Messages.settings_userFeedbackHint1)
+            .append(Messages.settings_userFeedbackHint2).appendTo($div);
+
+        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
+        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
+
+        var $checkbox = $('<input>', {
+            'type': 'checkbox',
+            id: 'cp-settings-userfeedback'
+        }).on('change', function () {
+            $spinner.show();
+            $ok.hide();
+            var val = $checkbox.is(':checked') || false;
+            common.setAttribute(['general', 'allowUserFeedback'], val, function () {
+                $spinner.hide();
+                $ok.show();
+            });
+        });
+
+        $checkbox.appendTo($div);
+        $label.appendTo($div);
+
+        $ok.hide().appendTo($div);
+        $spinner.hide().appendTo($div);
+
+        if (privateData.feedbackAllowed) {
+            $checkbox[0].checked = true;
+        }
+        return $div;
+    };
+
+    // Pad Creation settings
+
+    var setHTML = function (e, html) {
+        e.innerHTML = html;
+        return e;
+    };
+    create['creation-owned'] = function () {
+        if (!common.isLoggedIn()) { return; }
+        var owned = h('div.cp-settings-creation-owned.cp-sidebarlayout-element', [
+            h('label', [
+                Messages.creation_ownedTitle
+            ]),
+            setHTML(h('p.cp-sidebarlayout-description'),
+                    Messages.creation_owned1 + '<br>' + Messages.creation_owned2),
+            h('input#cp-creation-owned-true.cp-creation-owned-value', {
+                type: 'radio',
+                name: 'cp-creation-owned',
+                value: 1,
+            }),
+            h('label', { 'for': 'cp-creation-owned-true' }, Messages.creation_ownedTrue),
+            h('input#cp-creation-owned-false.cp-creation-owned-value', {
+                type: 'radio',
+                name: 'cp-creation-owned',
+                value: 0,
+                checked: 'checked'
+            }),
+            h('label', { 'for': 'cp-creation-owned-false' }, Messages.creation_ownedFalse),
+            h('span.fa.fa-check', {title: Messages.saved}),
+            h('span.fa.fa-spinner.fa-pulse'),
+        ]);
+
+        var $owned = $(owned);
+
+        var $ok = $owned.find('.fa-check');
+        var $spinner = $owned.find('.fa-spinner');
+
+        $owned.find('input').change(function () {
+            $spinner.show();
+            $ok.hide();
+            var val = parseInt($owned.find('[name="cp-creation-owned"]:checked').val());
+            common.setAttribute(['general', 'creation', 'owned'], val, function (e) {
+                if (e) { return void console.error(e); }
+                $spinner.hide();
+                $ok.show();
+            });
+        });
+        common.getAttribute(['general', 'creation', 'owned'], function (e, val) {
+            if (val) {
+                $owned.find('#cp-creation-owned-true').attr('checked', true);
+            }
+        });
+
+        return $owned;
+    };
+    create['creation-expire'] = function () {
+        if (!common.isLoggedIn()) { return; }
+        var expire = h('div.cp-settings-creation-expire.cp-sidebarlayout-element', [
+            h('label', [
+                Messages.creation_expireTitle
+            ]),
+            setHTML(h('p.cp-sidebarlayout-description'),
+                    Messages.creation_expire1 + '<br>' + Messages.creation_expire2),
+            h('input#cp-creation-expire-false.cp-creation-expire-value', {
+                type: 'radio',
+                name: 'cp-creation-expire',
+                value: 0,
+                checked: 'checked'
+            }),
+            h('label', { 'for': 'cp-creation-expire-false' }, Messages.creation_expireFalse),
+            h('input#cp-creation-expire-true.cp-creation-expire-value', {
+                type: 'radio',
+                name: 'cp-creation-expire',
+                value: 1
+            }),
+            h('label', { 'for': 'cp-creation-expire-true' }, [
+                Messages.creation_expireTrue,
+                h('span.cp-creation-expire-picker', [
+                    h('input#cp-creation-expire-val', {
+                        type: "number",
+                        min: 1,
+                        max: 100,
+                        value: 3
+                    }),
+                    h('select#cp-creation-expire-unit', [
+                        h('option', { value: 'hour' }, Messages.creation_expireHours),
+                        h('option', { value: 'day' }, Messages.creation_expireDays),
+                        h('option', {
+                            value: 'month',
+                            selected: 'selected'
+                        }, Messages.creation_expireMonths)
+                    ])
+                ])
+            ]),
+            h('span.fa.fa-check', {title: Messages.saved}),
+            h('span.fa.fa-spinner.fa-pulse'),
+        ]);
+
+        var $expire = $(expire);
+
+        var $ok = $expire.find('.fa-check');
+        var $spinner = $expire.find('.fa-spinner');
+
+        var getValue = function () {
+            if(!parseInt($expire.find('[name="cp-creation-expire"]:checked').val())) { return 0; }
+            var unit = 0;
+            switch ($expire.find('#cp-creation-expire-unit').val()) {
+                case "hour" : unit = 3600;           break;
+                case "day"  : unit = 3600 * 24;      break;
+                case "month": unit = 3600 * 24 * 30; break;
+                default: unit = 0;
+            }
+            return ($expire.find('#cp-creation-expire-val').val() || 0) * unit;
+        };
+        $expire.find('input, select').change(function () {
+            $spinner.show();
+            $ok.hide();
+            common.setAttribute(['general', 'creation', 'expire'], getValue(), function (e) {
+                if (e) { return void console.error(e); }
+                $spinner.hide();
+                $ok.show();
+            });
+        });
+        common.getAttribute(['general', 'creation', 'expire'], function (e, val) {
+            UIElements.setExpirationValue(val, $expire);
+        });
+
+        return $expire;
+    };
+    create['creation-skip'] = function () {
+        if (!common.isLoggedIn()) { return; }
+        var skip = h('div.cp-settings-creation-skip.cp-sidebarlayout-element', [
+            h('label', [
+                Messages.settings_creationSkip
+            ]),
+            setHTML(h('p.cp-sidebarlayout-description'), Messages.settings_creationSkipHint),
+            h('input#cp-creation-skip-true.cp-creation-skip-value', {
+                type: 'radio',
+                name: 'cp-creation-skip',
+                value: 1,
+            }),
+            h('label', { 'for': 'cp-creation-skip-true' }, Messages.settings_creationSkipTrue),
+            h('input#cp-creation-skip-false.cp-creation-skip-value', {
+                type: 'radio',
+                name: 'cp-creation-skip',
+                value: 0,
+                checked: 'checked'
+            }),
+            h('label', { 'for': 'cp-creation-skip-false' }, Messages.settings_creationSkipFalse),
+            h('span.fa.fa-check', {title: Messages.saved}),
+            h('span.fa.fa-spinner.fa-pulse'),
+        ]);
+
+        var $div = $(skip);
+
+        var $ok = $div.find('.fa-check');
+        var $spinner = $div.find('.fa-spinner');
+
+        $div.find('input').change(function () {
+            $spinner.show();
+            $ok.hide();
+            var val = parseInt($div.find('[name="cp-creation-skip"]:checked').val());
+            // If we don't skip the pad creation screen, we dont' need settings to hide the templates
+            // modal
+            if (!val) {
+                $('.cp-settings-creation-template').addClass('cp-settings-creation-skipped');
+            } else {
+                $('.cp-settings-creation-template').removeClass('cp-settings-creation-skipped');
+            }
+            common.setAttribute(['general', 'creation', 'skip'], val, function (e) {
+                if (e) { return void console.error(e); }
+                $spinner.hide();
+                $ok.show();
+            });
+        });
+        common.getAttribute(['general', 'creation', 'skip'], function (e, val) {
+            if (val) {
+                $div.find('#cp-creation-skip-true').attr('checked', true);
+                return;
+            }
+            // If we don't skip the pad creation screen, we dont' need settings to hide the templates
+            // modal
+            $('.cp-settings-creation-template').addClass('cp-settings-creation-skipped');
+        });
+
+        return $div;
+    };
+    create['creation-template'] = function () {
+        var skip = h('div.cp-settings-creation-template.cp-sidebarlayout-element', [
+            h('label', [
+                Messages.settings_templateSkip
+            ]),
+            setHTML(h('p.cp-sidebarlayout-description'), Messages.settings_templateSkipHint),
+            h('input#cp-creation-template-true.cp-creation-template-value', {
+                type: 'radio',
+                name: 'cp-creation-template',
+                value: 1,
+            }),
+            h('label', { 'for': 'cp-creation-template-true' }, Messages.settings_creationSkipTrue),
+            h('input#cp-creation-template-false.cp-creation-template-value', {
+                type: 'radio',
+                name: 'cp-creation-template',
+                value: 0,
+                checked: 'checked'
+            }),
+            h('label', { 'for': 'cp-creation-template-false' }, Messages.settings_creationSkipFalse),
+            h('span.fa.fa-check', {title: Messages.saved}),
+            h('span.fa.fa-spinner.fa-pulse'),
+        ]);
+
+        var $div = $(skip);
+
+        var $ok = $div.find('.fa-check');
+        var $spinner = $div.find('.fa-spinner');
+
+        $div.find('input').change(function () {
+            $spinner.show();
+            $ok.hide();
+            var val = parseInt($div.find('[name="cp-creation-template"]:checked').val());
+            common.setAttribute(['general', 'creation', 'noTemplate'], val, function (e) {
+                if (e) { return void console.error(e); }
+                $spinner.hide();
+                $ok.show();
+            });
+        });
+        common.getAttribute(['general', 'creation', 'noTemplate'], function (e, val) {
+            if (val) {
+                $div.find('#cp-creation-template-true').attr('checked', true);
+            }
+        });
+
+        return $div;
+    };
+
+
+
+
+    // Drive settings
+
+    create['drive-backup'] = function () {
+        var $div = $('<div>', {'class': 'cp-settings-drive-backup cp-sidebarlayout-element'});
 
         var accountName = privateData.accountName;
         var displayName = metadataMgr.getUserData().name || '';
@@ -350,8 +580,38 @@ define([
         return $div;
     };
 
-    var createResetDrive = function () {
-        var $div = $('<div>', {'class': 'cp-settings-reset-drive cp-sidebarlayout-element'});
+    create['drive-import-local'] = function () {
+        if (!common.isLoggedIn()) { return; }
+        var $div = $('<div>', {'class': 'cp-settings-drive-import-local cp-sidebarlayout-element'});
+        $('<label>', {'for' : 'cp-settings-import-local-pads'})
+            .text(Messages.settings_import).appendTo($div);
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages.settings_importTitle).appendTo($div);
+        var $button = $('<button>', {
+            'id': 'cp-settings-import-local-pads',
+            'class': 'btn btn-primary'
+        }).text(Messages.settings_import).appendTo($div);
+        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
+        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
+
+        $button.click(function () {
+            UI.confirm(Messages.settings_importConfirm, function (yes) {
+                if (!yes) { return; }
+                $spinner.show();
+                $ok.hide();
+                sframeChan.query('Q_SETTINGS_IMPORT_LOCAL', null, function () {
+                    $spinner.hide();
+                    $ok.show();
+                    UI.alert(Messages.settings_importDone);
+                });
+            }, undefined, true);
+        });
+
+        return $div;
+    };
+
+    create['drive-reset'] = function () {
+        var $div = $('<div>', {'class': 'cp-settings-drive-reset cp-sidebarlayout-element'});
         $('<label>').text(Messages.settings_resetNewTitle).appendTo($div);
         $('<span>', {'class': 'cp-sidebarlayout-description'})
             .text(Messages.settings_reset).appendTo($div);
@@ -374,124 +634,122 @@ define([
         return $div;
     };
 
-    var createUserFeedbackToggle = function () {
-        var $div = $('<div>', { 'class': 'cp-settings-userfeedback cp-sidebarlayout-element'});
-
-        $('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
+    // Rich text pads settings
 
-        var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
-            .text(Messages.settings_userFeedback);
+    create['pad-width'] = function () {
+        var $div = $('<div>', {
+            'class': 'cp-settings-pad-width cp-sidebarlayout-element'
+        });
+        $('<span>', {'class': 'label'}).text(Messages.settings_padWidth).appendTo($div);
 
         $('<span>', {'class': 'cp-sidebarlayout-description'})
-            .append(Messages.settings_userFeedbackHint1)
-            .append(Messages.settings_userFeedbackHint2).appendTo($div);
+            .text(Messages.settings_padWidthHint).appendTo($div);
 
         var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
         var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
 
-        var $checkbox = $('<input>', {
-            'type': 'checkbox',
-            id: 'cp-settings-userfeedback'
+        var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
+                    .text(Messages.settings_padWidthLabel);
+        var $input = $('<input>', {
+            type: 'checkbox',
+            id: 'cp-settings-padwidth'
         }).on('change', function () {
             $spinner.show();
             $ok.hide();
-            var val = $checkbox.is(':checked') || false;
-            common.setAttribute(['general', 'allowUserFeedback'], val, function () {
+            var val = $input.is(':checked');
+            common.setAttribute(['pad', 'width'], val, function () {
                 $spinner.hide();
                 $ok.show();
             });
-        });
-
-        $checkbox.appendTo($div);
+        }).appendTo($div);
         $label.appendTo($div);
 
         $ok.hide().appendTo($div);
         $spinner.hide().appendTo($div);
 
-        if (privateData.feedbackAllowed) {
-            $checkbox[0].checked = true;
-        }
+
+        common.getAttribute(['pad', 'width'], function (e, val) {
+            if (e) { return void console.error(e); }
+            if (val) {
+                $input.attr('checked', 'checked');
+            }
+        });
         return $div;
     };
 
-    var createUsageButton = function () {
-        common.createUsageBar(function (err, $bar) {
-            if (err) { return void console.error(err); }
-            APP.$usage.html('').append($bar);
-        }, true);
-    };
+    // Code settings
 
-    var createLogoutEverywhere = function () {
-        var $div = $('<div>', { 'class': 'cp-settings-logout-everywhere cp-sidebarlayout-element'});
-        $('<label>', { 'for': 'cp-settings-logout-everywhere'})
-            .text(Messages.settings_logoutEverywhereTitle).appendTo($div);
-        $('<span>', {'class': 'cp-sidebarlayout-description'})
-            .text(Messages.settings_logoutEverywhere).appendTo($div);
-        var $button = $('<button>', {
-            id: 'cp-settings-logout-everywhere',
-            'class': 'btn btn-primary' 
-        }).text(Messages.settings_logoutEverywhereButton)
-            .appendTo($div);
-        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
-        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
+    create['code-indent-unit'] = function () {
+        var $div = $('<div>', {
+            'class': 'cp-settings-code-indent-unit cp-sidebarlayout-element'
+        });
+        $('<label>').text(Messages.settings_codeIndentation).appendTo($div);
 
-        $button.click(function () {
+        var $inputBlock = $('<div>', {
+            'class': 'cp-sidebarlayout-input-block',
+        }).appendTo($div);
 
-            UI.confirm(Messages.settings_logoutEverywhereConfirm, function (yes) {
-                if (!yes) { return; }
-                $spinner.show();
-                $ok.hide();
+        var $input = $('<input>', {
+            'min': 1,
+            'max': 8,
+            type: 'number',
+        }).on('change', function () {
+            var val = parseInt($input.val());
+            if (typeof(val) !== 'number') { return; }
+            common.setAttribute(['codemirror', 'indentUnit'], val);
+        }).appendTo($inputBlock);
 
-                sframeChan.query('Q_SETTINGS_LOGOUT', null, function () {
-                    $spinner.hide();
-                    $ok.show();
-                    window.setTimeout(function () {
-                        $ok.fadeOut(1500);
-                    }, 2500);
-                });
-            });
+        common.getAttribute(['codemirror', 'indentUnit'], function (e, val) {
+            if (e) { return void console.error(e); }
+            if (typeof(val) !== 'number') {
+                $input.val(2);
+            } else {
+                $input.val(val);
+            }
         });
         return $div;
     };
 
-    var createImportLocalPads = function () {
-        if (!common.isLoggedIn()) { return; }
-        var $div = $('<div>', {'class': 'cp-settings-import-local-pads cp-sidebarlayout-element'});
-        $('<label>', {'for' : 'cp-settings-import-local-pads'})
-            .text(Messages.settings_import).appendTo($div);
-        $('<span>', {'class': 'cp-sidebarlayout-description'})
-            .text(Messages.settings_importTitle).appendTo($div);
-        var $button = $('<button>', {
-            'id': 'cp-settings-import-local-pads',
-            'class': 'btn btn-primary'
-        }).text(Messages.settings_import).appendTo($div);
-        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide().appendTo($div);
-        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide().appendTo($div);
+    create['code-indent-type'] = function () {
+        var key = 'indentWithTabs';
 
-        $button.click(function () {
-            UI.confirm(Messages.settings_importConfirm, function (yes) {
-                if (!yes) { return; }
-                $spinner.show();
-                $ok.hide();
-                sframeChan.query('Q_SETTINGS_IMPORT_LOCAL', null, function () {
-                    $spinner.hide();
-                    $ok.show();
-                    UI.alert(Messages.settings_importDone);
-                });
-            }, undefined, true);
+        var $div = $('<div>', {
+            'class': 'cp-settings-code-indent-type cp-sidebarlayout-element'
         });
+        $('<label>').text(Messages.settings_codeUseTabs).appendTo($div);
 
-        return $div;
-    };
+        var $inputBlock = $('<div>', {
+            'class': 'cp-sidebarlayout-input-block',
+        }).css('flex-flow', 'column')
+        .appendTo($div);
 
-    var createLanguageSelector = function () {
-        var $div = $('<div>', {'class': 'cp-settings-language-selector cp-sidebarlayout-element'});
-        $('<label>').text(Messages.language).appendTo($div);
-        var $b = common.createLanguageSelector($div);
-        $b.find('button').addClass('btn btn-secondary');
+        var $input = $('<input>', {
+            type: 'checkbox',
+        }).on('change', function () {
+            var val = $input.is(':checked');
+            if (typeof(val) !== 'boolean') { return; }
+            common.setAttribute(['codemirror', key], val);
+        }).appendTo($inputBlock);
+
+        /*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
+            $input[0].checked = !!n;
+        });*/
+
+        common.getAttribute(['codemirror', key], function (e, val) {
+            if (e) { return void console.error(e); }
+            $input[0].checked = !!val;
+        });
         return $div;
     };
 
+    // Settings app
+
+    var createUsageButton = function () {
+        common.createUsageBar(function (err, $bar) {
+            if (err) { return void console.error(err); }
+            APP.$usage.html('').append($bar);
+        }, true);
+    };
 
     var hideCategories = function () {
         APP.$rightside.find('> div').hide();
@@ -514,6 +772,7 @@ define([
             if (key === 'drive') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
             if (key === 'code') { $category.append($('<span>', {'class': 'fa fa-file-code-o' })); }
             if (key === 'pad') { $category.append($('<span>', {'class': 'fa fa-file-word-o' })); }
+            if (key === 'creation') { $category.append($('<span>', {'class': 'fa fa-plus-circle' })); }
 
             if (key === active) {
                 $category.addClass('cp-leftside-active');
@@ -561,22 +820,10 @@ define([
 
         // Content
         var $rightside = APP.$rightside;
-        $rightside.append(createInfoBlock());
-        $rightside.append(createDisplayNameInput());
-        $rightside.append(createLanguageSelector());
-        $rightside.append(createIndentUnitSelector());
-        $rightside.append(createIndentTypeSelector());
-
-        if (common.isLoggedIn()) {
-            $rightside.append(createLogoutEverywhere());
+        for (var f in create) {
+            if (typeof create[f] !== "function") { continue; }
+            $rightside.append(create[f]());
         }
-        $rightside.append(createResetTips());
-        $rightside.append(createThumbnails());
-        $rightside.append(createBackupDrive());
-        $rightside.append(createImportLocalPads());
-        $rightside.append(createResetDrive());
-        $rightside.append(createUserFeedbackToggle());
-        $rightside.append(createPadWidthSelector());
 
         // TODO RPC
         //obj.proxy.on('change', [], refresh);