Display the owner and expiration time of a pad in the properties modal

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

@@ -153,6 +153,41 @@
                 margin-bottom: @alertify_padding-base;
                 margin: 0;
                 overflow: auto;
+                .alertify-tabs {
+                    .alertify-tabs-titles {
+                        height: 30px;
+                        display: flex;
+                        border-bottom: 1px solid @alertify-fore;
+                        margin-bottom: 20px;
+                        box-sizing: content-box;
+                        span {
+                            font-size: 20px;
+                            height: 30px;
+                            line-height: 30px;
+                            box-sizing: border-box;
+                            padding: 0 15px;
+                            border-left: 1px solid lighten(@alertify-base, 10%);
+                            border-right: 1px solid lighten(@alertify-base, 10%);
+                            cursor: pointer;
+                        }
+                        span.alertify-tabs-active {
+                            background-color: @alertify-fore;
+                            border-left: 1px solid @alertify-fore;
+                            border-right: 1px solid @alertify-fore;
+                            color: @alertify-base;
+                            font-weight: bold;
+                            cursor: default;
+                        }
+                    }
+                    .alertify-tabs-contents {
+                        & > div {
+                            display: none;
+                        }
+                        & > div.alertify-tabs-content-active {
+                            display: block;
+                        }
+                    }
+                }
             }
 
             input:not(.form-control), textarea {

customize.dist/translations/messages.fr.js

@@ -375,6 +375,7 @@ define(function () {
     out.fm_emptyTrashDialog = "Êtes-vous sûr de vouloir vider la corbeille ?";
     out.fm_removeSeveralPermanentlyDialog = "Êtes-vous sûr de vouloir supprimer ces {0} éléments de votre CryptDrive de manière permanente ?";
     out.fm_removePermanentlyDialog = "Êtes-vous sûr de vouloir supprimer cet élément de votre CryptDrive de manière permanente ?";
+    out.fm_deleteOwnedPads = "Êtes-vous sûr de vouloir supprimer définitivement ce pad du serveur ?";
     out.fm_restoreDialog = "Êtes-vous sûr de vouloir restaurer {0} à son emplacement précédent ?";
     out.fm_removeSeveralDialog = "Êtes-vous sûr de vouloir déplacer ces {0} éléments vers la corbeille ?";
     out.fm_removeDialog = "Êtes-vous sûr de vouloir déplacer {0} vers la corbeille ?";
@@ -391,6 +392,7 @@ define(function () {
     out.fm_info_allFiles = 'Contient tous les fichiers de "Documents", "Fichiers non triés" et "Corbeille". Vous ne pouvez pas supprimer ou déplacer des fichiers depuis cet endroit.'; // Same here
     out.fm_info_anonymous = 'Vous n\'êtes pas connecté, ces pads risquent donc d\'être supprimés (<a href="https://blog.cryptpad.fr/2017/05/17/You-gotta-log-in/" target="_blank">découvrez pourquoi</a>). ' +
                             '<a href="/register/">Inscrivez-vous</a> ou <a href="/login/">connectez-vous</a> pour les maintenir en vie.';
+    out.fm_info_owned = "Vous êtes propriétaire des pads affichés dans cette catégorie. Cela signifie que vous pouvez choisir de les supprimer définitivement du serveur à n'importe quel moment. Ils seront alors inaccessibles pour tous les autres utilisateurs.";
     out.fm_alert_backupUrl = "Lien de secours pour ce CryptDrive.<br>" +
                              "Il est <strong>fortement recommandé</strong> de garder ce lien pour vous-même.<br>" +
                              "Il vous servira en cas de perte des données de votre navigateur afin de retrouver vos fichiers.<br>" +
@@ -409,6 +411,8 @@ define(function () {
     out.fm_burnThisDriveButton = "Effacer toutes les informations stockées par CryptPad dans votre navigateur";
     out.fm_burnThisDrive = "Êtes-vous sûr de vouloir supprimmer tout ce qui est stocké par CryptPad dans votre navigateur ?<br>" +
                            "Cette action supprimera votre CryptDrive et son historique de votre navigateur, mais les pads existeront toujours (de manière chiffrée) sur notre serveur.";
+    out.fm_padIsOwned = "Vous êtes le propriétaire de ce pad";
+    out.fm_padIsOwnedOther = "Ce pad est la propriété d'un autre utilisateur";
     // File - Context menu
     out.fc_newfolder = "Nouveau dossier";
     out.fc_rename = "Renommer";
@@ -785,5 +789,13 @@ define(function () {
     out.feedback_privacy = "Nous prenons au sérieux le respect de votre vie privée, et en même temps nous souhaitons rendre CryptPad très simple à utiliser. Nous utilisons cette page pour comprendre quelles fonctionnalités dans l'interface comptent le plus pour les utilisateurs, en l'appelant avec un paramètre spécifiant quelle action a été réalisée.";
     out.feedback_optout = "Si vous le souhaitez, vous pouvez désactiver ces requêtes en vous rendant dans <a href='/settings/'>votre page de préférences</a>, où vous trouverez une case à cocher pour désactiver le retour d'expérience.";
 
+    // Creation page
+    // Properties about creation data
+    out.creation_owners = "Propriétaires";
+    out.creation_ownedByOther = "Possédé par un autre utilisateur";
+    out.creation_noOwner = "Pad de propriétaire";
+    out.creation_expiration = "Date d'expiration";
+    out.creation_propertiesTitle = "Disponibilité";
+
     return out;
 });

customize.dist/translations/messages.js

@@ -380,6 +380,7 @@ define(function () {
     out.fm_removePermanentlyDialog = "Are you sure you want to remove that element from your CryptDrive permanently?";
     out.fm_removeSeveralDialog = "Are you sure you want to move these {0} elements to the trash?";
     out.fm_removeDialog = "Are you sure you want to move {0} to the trash?";
+    out.fm_deleteOwnedPads = "Are you sure you want to remove permanently this pad from the server?";
     out.fm_restoreDialog = "Are you sure you want to restore {0} to its previous location?";
     out.fm_unknownFolderError = "The selected or last visited directory no longer exist. Opening the parent folder...";
     out.fm_contextMenuError = "Unable to open the context menu for that element. If the problem persist, try to reload the page.";
@@ -394,6 +395,7 @@ define(function () {
     out.fm_info_allFiles = 'Contains all the files from "Documents", "Unsorted" and "Trash". You can\'t move or remove files from here.'; // Same here
     out.fm_info_anonymous = 'You are not logged in so your pads will expire after 3 months (<a href="https://blog.cryptpad.fr/2017/05/17/You-gotta-log-in/" target="_blank">find out more</a>). ' +
                             '<a href="/register/">Sign up</a> or <a href="/login/">Log in</a> to keep them alive.';
+    out.fm_info_owned = "You are the owner of the pads displayed here. This means you can remove them permanently from the server whenever you want. If you do so, other users won't be able to access them anymore.";
     out.fm_alert_backupUrl = "Backup link for this drive.<br>" +
                              "It is <strong>highly recommended</strong> that you keep it secret.<br>" +
                              "You can use it to retrieve all your files in case your browser memory got erased.<br>" +
@@ -412,6 +414,8 @@ define(function () {
     out.fm_burnThisDriveButton = "Erase all information stored by CryptPad in your browser";
     out.fm_burnThisDrive = "Are you sure you want to remove everything stored by CryptPad in your browser?<br>" +
                            "This will remove your CryptDrive and its history from your browser, but your pads will still exist (encrypted) on our server.";
+    out.fm_padIsOwned = "You are the owner of this pad";
+    out.fm_padIsOwnedOther = "This pad is owned by another user";
     // File - Context menu
     out.fc_newfolder = "New folder";
     out.fc_rename = "Rename";
@@ -819,6 +823,12 @@ define(function () {
     out.creation_createTitle = "Create a pad";
     out.creation_createFromTemplate = "From template";
     out.creation_createFromScratch = "From scratch";
+    // Properties about creation data
+    out.creation_owners = "Owners";
+    out.creation_ownedByOther = "Owned by another user";
+    out.creation_noOwner = "No owner";
+    out.creation_expiration = "Expiration time";
+    out.creation_propertiesTitle = "Availability";
 
     return out;
 });

www/common/common-interface.js

@@ -128,6 +128,38 @@ define([
         ]);
     };
 
+    /**
+     * tabs is an array containing objects
+     * each object must have the following attributes:
+     *  - title: String
+     *  - content: DOMElement
+     */
+    dialog.tabs = function (tabs) {
+        var contents = [];
+        var titles = [];
+        tabs.forEach(function (tab) {
+            if (!tab.content || !tab.title) { return; }
+            var content = tab.content;
+            var title = h('span.alertify-tabs-title', tab.title);
+            $(title).click(function () {
+                titles.forEach(function (t) { $(t).removeClass('alertify-tabs-active'); });
+                contents.forEach(function (c) { $(c).removeClass('alertify-tabs-content-active'); });
+                $(title).addClass('alertify-tabs-active');
+                $(content).addClass('alertify-tabs-content-active');
+            });
+            titles.push(title);
+            contents.push(content);
+        });
+        if (contents.length) {
+            $(contents[0]).addClass('alertify-tabs-content-active');
+            $(titles[0]).addClass('alertify-tabs-active');
+        }
+        return h('div.alertify-tabs', [
+            h('div.alertify-tabs-titles', titles),
+            h('div.alertify-tabs-contents', contents),
+        ]);
+    };
+
     UI.tokenField = function (target) {
         var t = {
             element: target || h('input'),

www/common/common-ui-elements.js

@@ -89,17 +89,50 @@ define([
             common.getPadAttribute('tags', waitFor(function (err, val) {
                 data.tags = val;
             }));
+            common.getPadAttribute('owners', waitFor(function (err, val) {
+                data.owners = val;
+            }));
+            common.getPadAttribute('expire', waitFor(function (err, val) {
+                data.expire = val;
+            }));
         }).nThen(function () {
             cb(void 0, data);
         });
     };
-    UIElements.getProperties = function (common, data, cb) {
+    var getRightsProperties = function (common, data, cb) {
         var $d = $('<div>');
-        $('<strong>').text(Messages.fc_prop).appendTo($d);
+        if (!data) { return void cb(void 0, $d); }
+
+        $('<label>', {'for': 'cp-app-prop-owners'}).text(Messages.creation_owners)
+            .appendTo($d);
+        var owners = Messages.creation_noOwner;
+        var edPublic = common.getMetadataMgr().getPrivateData().edPublic;
+        if (data.owners && data.owners.length) {
+            if (data.owners.indexOf(edPublic) !== -1) {
+                owners = Messages.yourself;
+            } else {
+                owners = Messages.creation_ownedByOther;
+            }
+        }
+        $d.append(UI.dialog.selectable(owners, {
+            id: 'cp-app-prop-owners',
+        }));
 
+        var expire = Messages.creation_expireFalse;
+        if (data.expire && typeof (data.expire) === "number") {
+            expire = new Date(data.expire).toLocaleString();
+        }
+        $('<label>', {'for': 'cp-app-prop-expire'}).text(Messages.creation_expiration)
+            .appendTo($d);
+        $d.append(UI.dialog.selectable(expire, {
+            id: 'cp-app-prop-expire',
+        }));
+        cb(void 0, $d);
+    };
+    var getPadProperties = function (common, data, cb) {
+        var $d = $('<div>');
         if (!data || !data.href) { return void cb(void 0, $d); }
 
-        $('<br>').appendTo($d);
         if (data.href) {
             $('<label>', {'for': 'cp-app-prop-link'}).text(Messages.editShare).appendTo($d);
             $d.append(UI.dialog.selectable(data.href, {
@@ -162,6 +195,27 @@ define([
             cb(void 0, $d);
         }
     };
+    UIElements.getProperties = function (common, data, cb) {
+        var c1;
+        var c2;
+        NThen(function (waitFor) {
+            getPadProperties(common, data, waitFor(function (e, c) {
+                c1 = c[0];
+            }));
+            getRightsProperties(common, data, waitFor(function (e, c) {
+                c2 = c[0];
+            }));
+        }).nThen(function () {
+            var tabs = UI.dialog.tabs([{
+                title: Messages.fc_prop,
+                content: c1
+            }, {
+                title: Messages.creation_propertiesTitle,
+                content: c2
+            }]);
+            cb (void 0, $(tabs));
+        });
+    };
 
     UIElements.createButton = function (common, type, rightside, data, callback) {
         var AppConfig = common.getAppConfig();
@@ -1261,6 +1315,8 @@ define([
         var metadataMgr = common.getMetadataMgr();
         var type = metadataMgr.getMetadataLazy().type;
 
+        // XXX check text for pad creation screen + translate it in French
+
         var $body = $('body');
         var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body);
         var $creation = $('<div>', { id: 'cp-creation' }).appendTo($creationContainer);
@@ -1366,10 +1422,6 @@ define([
                 expireVal = ($('#cp-creation-expire-val').val() || 0) * unit;
             }
 
-            // XXX TODO remove these lines
-            //ownedVal = undefined;
-            //expire = undefined;
-
             sframeChan.query("Q_CREATE_PAD", {
                 owned: ownedVal,
                 expire: expireVal,

www/common/outer/async-store.js

@@ -362,6 +362,7 @@ define([
         if (!data.href) { return void cb({error:'NO_HREF'}); }
         var pad = makePad(data.href, data.title);
         if (data.owners) { pad.owners = data.owners; }
+        if (data.expire) { pad.expire = data.expire; }
         store.userObject.pushData(pad, function (e, id) {
             if (e) { return void cb({error: "Error while adding a template:"+ e}); }
             var path = data.path || ['root'];
@@ -527,6 +528,10 @@ define([
         if (Store.channel && Util.base64ToHex(h.channel) === Store.channel.wc.id) {
             owners = Store.channel.data.owners || undefined;
         }
+        var expire;
+        if (Store.channel && Util.base64ToHex(h.channel) === Store.channel.wc.id) {
+            expire = +Store.channel.data.expire || undefined;
+        }
 
         var allPads = Util.find(store.proxy, ['drive', 'filesData']) || {};
         var isStronger;
@@ -590,6 +595,7 @@ define([
                 href: href,
                 title: title,
                 owners: owners,
+                expire: expire,
                 path: data.path || (store.data && store.data.initialPath)
             }, cb);
             return;

www/common/outer/chainpad-netflux-worker.js

@@ -189,7 +189,6 @@ define([], function () {
                     expire: expire,
                     password: password
                 };
-                padData = cfg;
                 var msg = ['GET_HISTORY', wc.id, cfg];
                 // Add the validateKey if we are the channel creator and we have a validateKey
                 if (hk) { network.sendto(hk, JSON.stringify(msg)); }

www/drive/inner.js

@@ -1182,10 +1182,10 @@ define([
             }
             if (data.owners && data.owners.indexOf(edPublic) !== -1) {
                 var $owned = $ownedIcon.clone().appendTo($state);
-                $owned.attr('title', Messages.fm_padIsOwned || 'TODO: owned pad'); // XXX
+                $owned.attr('title', Messages.fm_padIsOwned);
             } else if (data.owners && data.owners.length) {
                 var $owner = $ownerIcon.clone().appendTo($state);
-                $owner.attr('title', Messages.fm_padIsOwned || 'TODO: owned pad'); // XXX
+                $owner.attr('title', Messages.fm_padIsOwnedOther);
             }
 
             var name = filesOp.getTitle(element);
@@ -1410,7 +1410,7 @@ define([
                     msg = Messages.fm_info_recent;
                     break;
                 case OWNED:
-                    msg = 'TODO: files deleted here are actually removed from the server...'; // XXX
+                    msg = Messages.fm_info_owned;
                     break;
                 default:
                     msg = undefined;
@@ -2693,13 +2693,13 @@ define([
                 // Remove owned pad from drive and remove from server
                 var pathsListD = [];
                 paths.forEach(function (p) { pathsListD.push(p.path); });
-                var msgD = Messages._getKey("fm_deleteOwnedPads"); // XXX
+                var msgD = Messages.fm_deleteOwnedPads;
                 UI.confirm(msgD, function(res) {
                     $(window).focus();
                     if (!res) { return; }
                     filesOp.delete(pathsListD, refresh);
-                    // TODO HERE
+                    // TODO XXX HERE
-                    // RPC to delete from server?
+                    // RPC to delete from server
                 });
                 return;
             }