New Features page

customize.dist/pages.js

@@ -2,17 +2,15 @@ define([
     '/api/config',
     '/common/hyperscript.js',
     '/common/common-language.js',
+    '/common/common-interface.js',
     '/customize/messages.js',
     'jquery',
     '/customize/application_config.js',
-], function (Config, h, Language, Msg, $, AppConfig) {
+], function (Config, h, Language, UI, Msg, $, AppConfig) {
     var Pages = {};
     var urlArgs = Config.requireConf.urlArgs;
 
-    var setHTML = Pages.setHTML = function (e, html) {
+    var setHTML = UI.setHTML;
-        e.innerHTML = html;
-        return e;
-    };
 
     var languageSelector = function () {
         var options = [];
@@ -267,7 +265,16 @@ define([
         ]);
     };
 
+    var origin = encodeURIComponent(window.location.hostname);
+    var accounts = {
+        donateURL: 'https://accounts.cryptpad.fr/#/donate?on=' + origin,
+        upgradeURL: 'https://accounts.cryptpad.fr/#/?on=' + origin,
+    };
     Pages['/features.html'] = function () {
+        Msg.features_f_apps_note = AppConfig.availablePadTypes.map(function (app) {
+            if (AppConfig.registeredOnlyTypes.indexOf(app) !== -1) { return; }
+            return Msg.type[app];
+        }).filter(function (x) { return x; }).join(', ');
         return h('div#cp-main', [
             infopageTopbar(),
             h('div.container-fluid.cp_cont_features',[
@@ -277,74 +284,77 @@ define([
             ]),
             h('div.container',[
                 h('div.row.cp-container.cp-features-web.justify-content-sm-center',[
-                    h('div.col-12.col-sm-6.cp-anon-user',[
+                    h('div.col-12.col-sm-4.cp-anon-user',[
                         h('div.card',[
                             h('div.card-body',[
                                 h('h3.text-center',Msg.features_anon)
                             ]),
-                            h('ul.list-group.list-group-flush', [
+                            h('ul.list-group.list-group-flush',
-                                h('li.list-group-item.text-center', Msg.features_f_pad , [
+                                ['apps', 'core', 'file0', 'cryptdrive0', 'storage0'].map(function (f) {
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_pad_notes}, h('i.fa.fa-question'))
+                                    return h('li.list-group-item', [
-                                ]),
+                                        h('div.cp-check'),
-                                h('li.list-group-item.text-center', Msg.features_f_history, [
+                                        h('div.cp-content', [
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_history_notes }, h('i.fa.fa-question') )
+                                            h('div.cp-feature', Msg['features_f_' + f]),
-                                ]),
+                                            h('div.cp-note', Msg['features_f_' + f + '_note'])
-                                h('li.list-group-item.text-center', Msg.features_f_export, [
+                                        ])
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_export_notes }, h('i.fa.fa-question'))
+                                    ]);
-                                ]),
+                                })
-                                h('li.list-group-item.text-center', Msg.features_f_todo),
+                            ),
-                                h('li.list-group-item.text-center', Msg.features_f_viewFiles),
+                        ]),
-                                h('li.list-group-item.text-center', Msg.features_f_drive),
-                                h('li.list-group-item.text-center', Msg.features_f_storage_anon),
-                            ]),
-                        ]),  
                     ]),
-                    h('div.col-12.col-sm-6.cp-regis-user',[
+                    h('div.col-12.col-sm-4.cp-regis-user',[
                         h('div.card',[
                             h('div.card-body',[
                                 h('h3.text-center',Msg.features_registered)
                             ]),
                             h('ul.list-group.list-group-flush', [
-                                h('li.list-group-item.text-center', Msg.features_f_pad, [
+                                ['anon', 'social', 'file1', 'cryptdrive1', 'devices', 'storage1'].map(function (f) {
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_pad_notes}, h('i.fa.fa-question'))
+                                    return h('li.list-group-item', [
-                                ]),
+                                        h('div.cp-check'),
-                                h('li.list-group-item.text-center', Msg.features_f_history, [
+                                        h('div.cp-content', [
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_history_notes }, h('i.fa.fa-question'))
+                                            h('div.cp-feature', Msg['features_f_' + f]),
-                                ]),
+                                            h('div.cp-note', Msg['features_f_' + f + '_note'])
-                                h('li.list-group-item.text-center', Msg.features_f_export, [
+                                        ])
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_export_notes }, h('i.fa.fa-question'))
+                                    ]);
-                                ]),
+                                }),
-                                h('li.list-group-item.text-center', Msg.features_f_todo),
-                                h('li.list-group-item.text-center', Msg.features_f_viewFiles),
-                                h('li.list-group-item.text-center', Msg.features_f_drive_full),
-                                h('li.list-group-item.text-center', Msg.features_f_uploadFiles),
-                                h('li.list-group-item.text-center', Msg.features_f_embedFiles),
-                                h('li.list-group-item.text-center', Msg.features_f_multiple, [
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_multiple_notes }, h('i.fa.fa-question'))
-                                ]),
-                                h('li.list-group-item.text-center', Msg.features_f_logoutEverywhere),
-                                h('li.list-group-item.text-center', Msg.features_f_templates, [
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_templates_notes }, h('i.fa.fa-question'))
-                                ]),
-                                h('li.list-group-item.text-center', Msg.features_f_profile, [
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_profile_notes }, h('i.fa.fa-question'))
-                                ]),
-                                h('li.list-group-item.text-center', Msg.features_f_tags, [
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_tags_notes }, h('i.fa.fa-question'))
-                                ]),
-                                h('li.list-group-item.text-center', Msg.features_f_contacts, [
-                                    h('a.voted', {href: '#', 'data-toggle' : 'tooltip', 'data-placement': 'bottom', title : Msg.features_f_contacts_notes }, h('i.fa.fa-question'))
-                                ]),
-                                h('li.list-group-item.text-center', setHTML(h('div'), Msg.features_f_storage_registered)),
                             ]),
                             h('div.card-body',[
-                                h('div#cp-features-register', [
+                                h('div.cp-features-register#cp-features-register', [
                                     h('a', {
                                         href: '/register/'
                                     }, h('button.cp-features-register-button', Msg.features_f_register))
                                 ]),
+                                h('div.cp-note', Msg.features_f_register_note)
                             ]),
-                        ]), 
+                        ]),
+                    ]),
+                    h('div.col-12.col-sm-4.cp-anon-user',[
+                        h('div.card',[
+                            h('div.card-body',[
+                                h('h3.text-center',Msg.features_premium)
+                            ]),
+                            h('ul.list-group.list-group-flush', [
+                                ['reg', 'storage2', 'support', 'supporter'/*, 'project'*/].map(function (f) { // XXX
+                                    return h('li.list-group-item', [
+                                        h('div.cp-check'),
+                                        h('div.cp-content', [
+                                            h('div.cp-feature', Msg['features_f_' + f]),
+                                            h('div.cp-note', Msg['features_f_' + f + '_note'])
+                                        ])
+                                    ]);
+                                }),
+                            ]),
+                            h('div.card-body',[
+                                h('div.cp-features-register#cp-features-subscribe', [
+                                    h('a', {
+                                        href: accounts.upgradeURL,
+                                        target: '_blank',
+                                        rel: 'noopener noreferrer'
+                                    }, h('button.cp-features-register-button', Msg.features_f_subscribe))
+                                ]),
+                                h('div.cp-note', Msg.features_f_subscribe_note)
+                            ]),
+                        ]),
                     ]),
                 ]),
             ]),
@@ -658,93 +668,6 @@ define([
         ];
     };
 
-    Pages.createCheckbox = function (id, labelTxt, checked, opts) {
-        opts = opts|| {};
-        // Input properties
-        var inputOpts = {
-            type: 'checkbox',
-            id: id
-        };
-        if (checked) { inputOpts.checked = 'checked'; }
-        $.extend(inputOpts, opts.input || {});
-
-        // Label properties
-        var labelOpts = {};
-        $.extend(labelOpts, opts.label || {});
-        if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
-
-        // Mark properties
-        var markOpts = { tabindex: 0 };
-        $.extend(markOpts, opts.mark || {});
-
-        var input = h('input', inputOpts);
-        var mark = h('span.cp-checkmark-mark', markOpts);
-        var label = h('span.cp-checkmark-label', labelTxt);
-
-        $(mark).keydown(function (e) {
-            if (e.which === 32) {
-                e.stopPropagation();
-                e.preventDefault();
-                $(input).prop('checked', !$(input).is(':checked'));
-                $(input).change();
-            }
-        });
-
-        $(input).change(function () { $(mark).focus(); });
-
-        return h('label.cp-checkmark', labelOpts, [
-            input,
-            mark,
-            label
-        ]);
-    };
-
-    Pages.createRadio = function (name, id, labelTxt, checked, opts) {
-        opts = opts|| {};
-        // Input properties
-        var inputOpts = {
-            type: 'radio',
-            id: id,
-            name: name
-        };
-        if (checked) { inputOpts.checked = 'checked'; }
-        $.extend(inputOpts, opts.input || {});
-
-        // Label properties
-        var labelOpts = {};
-        $.extend(labelOpts, opts.label || {});
-        if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
-
-        // Mark properties
-        var markOpts = { tabindex: 0 };
-        $.extend(markOpts, opts.mark || {});
-
-        var input = h('input', inputOpts);
-        var mark = h('span.cp-radio-mark', markOpts);
-        var label = h('span.cp-checkmark-label', labelTxt);
-
-        $(mark).keydown(function (e) {
-            if (e.which === 32) {
-                e.stopPropagation();
-                e.preventDefault();
-                $(input).prop('checked', !$(input).is(':checked'));
-                $(input).change();
-            }
-        });
-
-        $(input).change(function () { $(mark).focus(); });
-
-        var radio =  h('label', labelOpts, [
-            input,
-            mark,
-            label
-        ]);
-
-        $(radio).addClass('cp-radio');
-
-        return radio;
-    };
-
     Pages['/user/'] = Pages['/user/index.html'] = function () {
         return h('div#container');
     };
@@ -788,10 +711,10 @@ define([
                         placeholder: Msg.login_confirm,
                     }),
                     h('div.checkbox-container', [
-                        Pages.createCheckbox('import-recent', Msg.register_importRecent, true)
+                        UI.createCheckbox('import-recent', Msg.register_importRecent, true)
                     ]),
                     h('div.checkbox-container', [
-                        $(Pages.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0]
+                        $(UI.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0]
                     ]),
                     h('button#register.btn.cp-login-register', Msg.login_register)
                 ])
@@ -832,7 +755,7 @@ define([
                             placeholder: Msg.login_password,
                         }),
                         h('div.checkbox-container', [
-                            Pages.createCheckbox('import-recent', Msg.register_importRecent),
+                            UI.createCheckbox('import-recent', Msg.register_importRecent),
                         ]),
                         h('div.extra', [
                             h('button.login.first.btn', Msg.login_login)

customize.dist/src/less2/pages/page-features.less

@@ -19,7 +19,7 @@
             color: #fff;
         }
     }
-    #cp-features-register {
+    .cp-features-register {
         text-align: center;
         padding: 20px;
     }
@@ -39,24 +39,51 @@
         .card {
             box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3);
             border: none;
+            .card-body {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-flow: column;
+                h3 {
+                    margin: 0;
+                }
+            }
         }
         h3 {
             color: #fff;
         }
         .list-group {
             li {
-                &:before {
+                display: flex;
-                    content: "\f00c";
+                padding-left: 0;
-                    font-family: "FontAwesome";
+                padding-right: 5px;
-                    font-size: 14px;
-                    color: @cryptpad_color_blue;
-                    padding-right: 10px;
-                }
             }
             div {
-                display: inline;
+                &.cp-check {
+                    width: 30px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    &:before {
+                        content: "\f00c";
+                        font-family: "FontAwesome";
+                        font-size: 14px;
+                        color: @cryptpad_color_blue;
+                    }
+                }
+                &.cp-content {
+                    flex: 1;
+                    display: flex;
+                    flex-flow: column;
+                }
+                &.cp-feature {
+                    font-weight: bold;
+                }
             }
         }
+        div.cp-note {
+            font-size: 0.8em;
+        }
         a.voted {
             opacity: 0.6;
             margin-left: 15px;
@@ -70,7 +97,9 @@
     }
     .cp-anon-user {
         .card-body {
-            background-color: @cryptpad_color_blue;
+            &:first-of-type {
+                background-color: @cryptpad_color_blue;
+            }
         }
     }
     .cp-regis-user {

customize.dist/translations/messages.fr.js

@@ -789,7 +789,7 @@ define(function () {
     out.features_f_history_notes = "Voir et restaurer n'importe quelle version d'un pad";
     out.features_f_todo = "Créer une TODO-list";
     out.features_f_drive = "Fonctionnalités CryptDrive limitées";
-    out.features_f_drive_full = "Fonctionnalités CryptDrive limitées";
+    out.features_f_drive_full = "Fonctionnalités CryptDrive complètes";
     out.features_f_export = "Export/Import";
     out.features_f_export_notes = "Pour les pads et CryptDrive";
     out.features_f_viewFiles = "Voir des fichiers";

customize.dist/translations/messages.js

@@ -793,7 +793,48 @@ define(function () {
     out.features_feature = "Feature";
     out.features_anon = "Anonymous user";
     out.features_registered = "Registered user";
+    out.features_premium = "Premium user";
     out.features_notes = "Notes";
+    // XXX
+    out.features_f_apps = "Access to the main applications";
+    out.features_f_core = "Common features for the applications";
+    out.features_f_core_note = "Edit, Import & Export, History, Userlist, Chat";
+    out.features_f_file0 = "Open files";
+    out.features_f_file0_note = "View and download files shared by other users";
+    out.features_f_cryptdrive0 = "Limited access to CryptDrive";
+    out.features_f_cryptdrive0_note = "Ability to store visited pads in your browser to be able to open them later";
+    out.features_f_storage0 = "Limited storage time";
+    out.features_f_storage0_note = "Created pads risk deletion after 3 months of inactivity";
+
+    out.features_f_anon = "All anonymous users features";
+    out.features_f_anon_note = "With better usability and more power over your pads";
+    out.features_f_cryptdrive1 = "Complete CryptDrive functionalities";
+    out.features_f_cryptdrive1_note = "Folders, shared folders, templates, tags";
+    out.features_f_devices = "Your pads on all your devices";
+    out.features_f_devices_note = "Access your CryptDrive everywhere with your user account";
+    out.features_f_social = "Social applications";
+    out.features_f_social_note = "Create a profile, use an avatar, chat with contacts";
+    out.features_f_file1 = "Upload and share files";
+    out.features_f_file1_note = "Share files with your friends or embed them in your pads";
+    out.features_f_storage1 = "Permanent storage (50MB)";
+    out.features_f_storage1_note = "Pads stored in your CryptDrive are never deleted for inactivity";
+    out.features_f_register = "Register for free";
+    out.features_f_register_note = "No email or personal information required";
+
+    out.features_f_reg = "All registered users features";
+    out.features_f_reg_note = "And help CryptPad's developement";
+    out.features_f_storage2 = "Extra storage space";
+    out.features_f_storage2_note = "From 5GB to 50GB depending on the selected plan";
+    out.features_f_support = "Faster support";
+    out.features_f_support_note = "Professional email support with the Team plan";
+    out.features_f_supporter = "Become a privacy supporter";
+    out.features_f_supporter_note = "Help us show that privacy-enhancing softwares should be the norm";
+    out.features_f_project = "Keep the project alive";
+    out.features_f_project_note = "Help us keep this open-source project running by funding its hosting and developement";
+    out.features_f_subscribe = "Subscribe to premium";
+    out.features_f_subscribe_note = "You need to be logged in to CryptPad first";
+    // End XXX
+
     out.features_f_pad = "Create/edit/view a pad";
     out.features_f_pad_notes = "Rich Text, Code, Slide, Poll and Whiteboard applications";
     out.features_f_history = "History";
@@ -822,7 +863,6 @@ define(function () {
     out.features_f_storage = "Storage";
     out.features_f_storage_anon = "Pads are deleted after 3 months";
     out.features_f_storage_registered = "Free: 50MB<br>Premium: 5GB/20GB/50GB";
-    out.features_f_register = "Register for free";
 
     // faq.html
 

www/common/common-interface.js

@@ -16,7 +16,6 @@ define([
     '/customize/application_config.js',
     '/bower_components/alertifyjs/dist/js/alertify.js',
     '/common/tippy/tippy.min.js',
-    '/customize/pages.js',
     '/common/hyperscript.js',
     '/customize/loading.js',
     '/common/test.js',
@@ -26,7 +25,7 @@ define([
     'css!/common/tippy/tippy.css',
     'css!/common/jquery-ui/jquery-ui.min.css'
 ], function ($, Messages, Util, Hash, Notifier, AppConfig,
-            Alertify, Tippy, Pages, h, Loading, Test) {
+            Alertify, Tippy, h, Loading, Test) {
     var UI = {};
 
     /*
@@ -37,6 +36,11 @@ define([
     // set notification timeout
     Alertify._$$alertify.delay = AppConfig.notificationTimeout || 5000;
 
+    var setHTML = UI.setHTML = function (e, html) {
+        e.innerHTML = html;
+        return e;
+    };
+
     var findCancelButton = UI.findCancelButton = function (root) {
         if (root) {
             return $(root).find('button.cancel').last();
@@ -875,9 +879,92 @@ define([
         });
     };
 
-    UI.createCheckbox = Pages.createCheckbox;
+    UI.createCheckbox = function (id, labelTxt, checked, opts) {
+        opts = opts|| {};
+        // Input properties
+        var inputOpts = {
+            type: 'checkbox',
+            id: id
+        };
+        if (checked) { inputOpts.checked = 'checked'; }
+        $.extend(inputOpts, opts.input || {});
 
-    UI.createRadio = Pages.createRadio;
+        // Label properties
+        var labelOpts = {};
+        $.extend(labelOpts, opts.label || {});
+        if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
+
+        // Mark properties
+        var markOpts = { tabindex: 0 };
+        $.extend(markOpts, opts.mark || {});
+
+        var input = h('input', inputOpts);
+        var mark = h('span.cp-checkmark-mark', markOpts);
+        var label = h('span.cp-checkmark-label', labelTxt);
+
+        $(mark).keydown(function (e) {
+            if (e.which === 32) {
+                e.stopPropagation();
+                e.preventDefault();
+                $(input).prop('checked', !$(input).is(':checked'));
+                $(input).change();
+            }
+        });
+
+        $(input).change(function () { $(mark).focus(); });
+
+        return h('label.cp-checkmark', labelOpts, [
+            input,
+            mark,
+            label
+        ]);
+    };
+
+    UI.createRadio = function (name, id, labelTxt, checked, opts) {
+        opts = opts|| {};
+        // Input properties
+        var inputOpts = {
+            type: 'radio',
+            id: id,
+            name: name
+        };
+        if (checked) { inputOpts.checked = 'checked'; }
+        $.extend(inputOpts, opts.input || {});
+
+        // Label properties
+        var labelOpts = {};
+        $.extend(labelOpts, opts.label || {});
+        if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
+
+        // Mark properties
+        var markOpts = { tabindex: 0 };
+        $.extend(markOpts, opts.mark || {});
+
+        var input = h('input', inputOpts);
+        var mark = h('span.cp-radio-mark', markOpts);
+        var label = h('span.cp-checkmark-label', labelTxt);
+
+        $(mark).keydown(function (e) {
+            if (e.which === 32) {
+                e.stopPropagation();
+                e.preventDefault();
+                $(input).prop('checked', !$(input).is(':checked'));
+                $(input).change();
+            }
+        });
+
+        $(input).change(function () { $(mark).focus(); });
+
+        var radio =  h('label', labelOpts, [
+            input,
+            mark,
+            label
+        ]);
+
+        $(radio).addClass('cp-radio');
+
+        return radio;
+    };
 
     UI.cornerPopup = function (text, actions, footer, opts) {
         opts = opts || {};
@@ -892,9 +979,9 @@ define([
             h('div.cp-corner-filler', { style: "width:60px;" }),
             h('div.cp-corner-filler', { style: "width:40px;" }),
             h('div.cp-corner-filler', { style: "width:20px;" }),
-            Pages.setHTML(h('div.cp-corner-text'), text),
+            setHTML(h('div.cp-corner-text'), text),
             h('div.cp-corner-actions', actions),
-            Pages.setHTML(h('div.cp-corner-footer'), footer)
+            setHTML(h('div.cp-corner-footer'), footer)
         ]);
 
         $(minimize).click(function () {

www/common/cryptpad-common.js

@@ -38,6 +38,7 @@ define([
         }
     };
 
+    // Upgrade and donate URLs duplicated in pages.js
     var origin = encodeURIComponent(window.location.hostname);
     var common = window.Cryptpad = {
         Messages: Messages,