From ba0e000808e237f1add75035f341e7b9c05ccd60 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 31 May 2018 13:26:06 +0200 Subject: [PATCH] Add a file upload modal --- .../src/less2/include/alertify.less | 4 + .../src/less2/include/password-input.less | 1 + customize.dist/translations/messages.fr.js | 8 +- customize.dist/translations/messages.js | 8 +- www/common/common-interface.js | 4 - www/common/common-ui-elements.js | 3 +- www/common/sframe-common-file.js | 129 +++++++++++------- 7 files changed, 88 insertions(+), 69 deletions(-) diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 24c63e570..ebc0b1383 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/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; diff --git a/customize.dist/src/less2/include/password-input.less b/customize.dist/src/less2/include/password-input.less index 8836476fd..015f364aa 100644 --- a/customize.dist/src/less2/include/password-input.less +++ b/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; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 970fc815e..059ab4314 100644 --- a/customize.dist/translations/messages.fr.js +++ b/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 {0} avant son stockage en ligne ?
" + - "L'extension du fichier ({1}) sera ajoutée automatiquement. "+ - "Ce nom sera permanent et visible par les autres utilisateurs."; - out.upload_password = "Souhaitez-vous protéger ce fichier avec un mot de passe ?
" + - "Choisir Ne plus demander 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 {0} 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."; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 21e1b1817..3b955847a 100644 --- a/customize.dist/translations/messages.js +++ b/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 {0} before uploading it to the server?
" + - "The file extension ({1}) will be added automatically. "+ - "This name will be permanent and visible to other users."; - out.upload_password = "Do you want to protect your file with a password?
" + - "If you choose Do not ask me again, uploaded files won't have a password."; + out.upload_modal_title = "File upload options"; + out.upload_modal_filename = "File name (extension {0} 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."; diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 2653c71b3..e65742d0f 100644 --- a/www/common/common-interface.js +++ b/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); } diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 2169e1640..c16fd7e15 100644 --- a/www/common/common-ui-elements.js +++ b/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; }; diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js index ff604b189..83127d886 100644 --- a/www/common/sframe-common-file.js +++ b/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,36 +283,40 @@ define([ var file_arraybuffer; var name = file.name; var password; - var finish = function () { - var metadata = { - name: name, - type: file.type, - }; - if (thumb) { metadata.thumbnail = thumb; } - queue.push({ - blob: file_arraybuffer, - metadata: metadata, - password: password, - dropEvent: e - }); + var owned = true; + var finish = function (abort) { + if (!abort) { + var metadata = { + name: name, + type: file.type, + }; + if (thumb) { metadata.thumbnail = thumb; } + queue.push({ + 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(); }); };