Add a file upload modal

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

@@ -203,6 +203,10 @@
                 padding: @alertify_padding-base;
             }
 
+            span.cp-password-container {
+                margin-bottom: 15px;
+            }
+
             input[type="checkbox"], input[type="radio"] {
                 width: auto;
                 padding: 0;

customize.dist/src/less2/include/password-input.less

@@ -5,6 +5,7 @@
         input {
             flex: 1;
             min-width: 0;
+            margin-bottom: 0 !important; // Override margin from alertify
         }
         label, .fa {
             margin-left: 10px;

customize.dist/translations/messages.fr.js

@@ -597,11 +597,9 @@ define(function () {
     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. "+
-                        "Ce nom sera permanent et visible par les autres utilisateurs</em>.";
-    out.upload_password = "Souhaitez-vous protéger ce fichier avec un mot de passe ?<br>" +
-                          "Choisir <em>Ne plus demander</em> implique qu'aucun fichier importé durant cette session n'aura de mot de passe.";
+    out.upload_modal_title = "Options d'importation du fichier";
+    out.upload_modal_filename = "Nom (extension <em>{0}</em> ajoutée automatiquement)";
+    out.upload_modal_owner = "Être propriétaire du fichier";
     out.upload_serverError = "Erreur interne: impossible d'importer le fichier pour l'instant.";
     out.upload_uploadPending = "Vous avez déjà un fichier en cours d'importation. Souhaitez-vous l'annuler et importer ce nouveau fichier ?";
     out.upload_success = "Votre fichier ({0}) a été importé avec succès et ajouté à votre CryptDrive.";

customize.dist/translations/messages.js

@@ -601,11 +601,9 @@ define(function () {
     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. "+
-                        "This name will be permanent and visible to other users.</em>";
-    out.upload_password = "Do you want to protect your file with a password?<br>" +
-                          "If you choose <em>Do not ask me again</em>, uploaded files won't have a password.";
+    out.upload_modal_title = "File upload options";
+    out.upload_modal_filename = "File name (extension <em>{0}</em> added automatically)";
+    out.upload_modal_owner = "Owned file";
     out.upload_serverError = "Server Error: unable to upload your file at this time.";
     out.upload_uploadPending = "You already have an upload in progress. Cancel it and upload your new file?";
     out.upload_success = "Your file ({0}) has been successfully uploaded and added to your drive.";

www/common/common-interface.js

@@ -429,10 +429,6 @@ define([
         var input = opt.password ? $(inputBlock).find('input')[0] : inputBlock;
         input.value = typeof(def) === 'string'? def: '';
 
-        if (opt.password) {
-            $(inputBlock).find('.cp-checkmark').css('margin-bottom', '15px');
-        }
-
         var message;
         if (typeof(msg) === 'string') {
             if (!force) { msg = Util.fixHTML(msg); }

www/common/common-ui-elements.js

@@ -162,7 +162,6 @@ define([
             $pwInput.val(data.password).click(function () {
                 $pwInput[0].select();
             });
-            $(password).find('.cp-checkmark').css('margin-bottom', '15px');
             $d.append(password);
         }
 
@@ -957,7 +956,7 @@ define([
         };
     };
 
-    var setHTML = function (e, html) {
+    var setHTML = UIElements.setHTML = function (e, html) {
         e.innerHTML = html;
         return e;
     };

www/common/sframe-common-file.js

@@ -3,11 +3,13 @@ define([
     '/file/file-crypto.js',
     '/common/common-thumbnail.js',
     '/common/common-interface.js',
+    '/common/common-ui-elements.js',
     '/common/common-util.js',
+    '/common/hyperscript.js',
     '/customize/messages.js',
 
     '/bower_components/tweetnacl/nacl-fast.min.js',
-], function ($, FileCrypto, Thumb, UI, Util, Messages) {
+], function ($, FileCrypto, Thumb, UI, UIElements, Util, h, Messages) {
     var Nacl = window.nacl;
     var module = {};
 
@@ -26,6 +28,7 @@ define([
 
     module.create = function (common, config) {
         var File = {};
+        var origin = common.getMetadataMgr().getPrivateData().origin;
 
         var queue = File.queue = {
             queue: [],
@@ -213,43 +216,59 @@ define([
             queue.next();
         };
 
-        // Don't show the rename and password prompts if we don't store the file in the drive
-        // e.g. avatar
-        var showNamePrompt = !config.noStore;
-        var showPasswordPrompt = !config.noStore;
-
-        var promptName = function (file, cb) {
+        // Get the upload options
+        var fileUploadModal = function (file, cb) {
             var extIdx = file.name.lastIndexOf('.');
             var name = extIdx !== -1 ? file.name.slice(0,extIdx) : file.name;
             var ext = extIdx !== -1 ? file.name.slice(extIdx) : "";
-            var msg = Messages._getKey('upload_rename', [
-                Util.fixHTML(file.name),
-                Util.fixHTML(ext)
+
+            var createHelper = function (href, text) {
+                var q = h('a.fa.fa-question-circle', {
+                    style: 'text-decoration: none !important;',
+                    title: text,
+                    href: origin + href,
+                    target: "_blank",
+                    'data-tippy-placement': "right"
+                });
+                return q;
+            };
+
+            // Ask for name, password and owner
+            var content = h('div', [
+                h('h4', Messages.upload_modal_title),
+                UIElements.setHTML(h('label', {for: 'cp-upload-name'}),
+                                   Messages._getKey('upload_modal_filename', [ext])),
+                h('input#cp-upload-name', {type: 'text', placeholder: name}),
+                h('label', {for: 'cp-upload-password'}, Messages.creation_passwordValue),
+                UI.passwordInput({id: 'cp-upload-password'}),
+                h('span', {
+                    style: 'display:flex;align-items:center;justify-content:space-between'
+                }, [
+                    UI.createCheckbox('cp-upload-owned', Messages.upload_modal_owner, true),
+                    createHelper('/faq.html#keywords-owned', Messages.creation_owned1)
+                ]),
             ]);
-            UI.prompt(msg, name, function (newName) {
-                if (newName === null) {
-                    // "Don't ask me again"
-                    showNamePrompt = false;
-                    return void cb (file.name);
-                }
-                if (!newName || !newName.trim()) { return void cb (file.name); }
+
+            UI.confirm(content, function (yes) {
+                if (!yes) { return void cb(); }
+
+                // Get the values
+                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');
+
+                // Add extension to the name if needed
+                if (!newName || !newName.trim()) { newName = file.name; }
                 var newExtIdx = newName.lastIndexOf('.');
                 var newExt = newExtIdx !== -1 ? newName.slice(newExtIdx) : "";
                 if (newExt !== ext) { newName += ext; }
-                cb(newName);
-            }, {cancel: Messages.doNotAskAgain}, true);
-        };
 
-        var promptPassword = function (file, cb) {
-            var msg = Messages.upload_password;
-            UI.prompt(msg, '', function (password) {
-                if (password === null) {
-                    // "Don't ask me again"
-                    showPasswordPrompt = false;
-                    return void cb ();
-                }
-                cb(password);
-            }, {cancel: Messages.doNotAskAgain, password: true}, true);
+                cb({
+                    name: newName,
+                    password: password,
+                    owned: owned
+                });
+            });
         };
 
         var handleFileState = {
@@ -264,7 +283,9 @@ define([
             var file_arraybuffer;
             var name = file.name;
             var password;
-            var finish = function () {
+            var owned = true;
+            var finish = function (abort) {
+                if (!abort) {
                     var metadata = {
                         name: name,
                         type: file.type,
@@ -274,26 +295,28 @@ define([
                         blob: file_arraybuffer,
                         metadata: metadata,
                         password: password,
+                        owned: owned,
                         dropEvent: e
                     });
+                }
                 handleFileState.inProgress = false;
                 if (handleFileState.queue.length) {
                     var next = handleFileState.queue.shift();
                     handleFile(next[0], next[1]);
                 }
             };
-            var getPassword = function () {
-                if (!showPasswordPrompt) { return void finish(); }
-                promptPassword(file, function (pw) {
-                    password = pw;
-                    finish();
-                });
-            };
             var getName = function () {
-                if (!showNamePrompt) { return void getPassword(); }
-                promptName(file, function (newName) {
-                    name = newName;
-                    getPassword();
+                // If "noStore", it means we don't want to store this file in our drive (avatar)
+                // In this case, we don't want a password or a filename, and we own the file
+                if (config.noStore) { return void finish(); }
+
+                // Otherwise, ask for password, name and ownership
+                fileUploadModal(file, function (obj) {
+                    if (!obj) { return void finish(true); }
+                    name = obj.name;
+                    password = obj.password;
+                    owned = obj.owned;
+                    finish();
                 });
             };