diff --git a/customize.dist/about.html b/customize.dist/about.html index e8fc94ff0..1062982f0 100644 --- a/customize.dist/about.html +++ b/customize.dist/about.html @@ -30,6 +30,7 @@ + About diff --git a/customize.dist/contact.html b/customize.dist/contact.html index 7ed8e1ef0..f1c62e688 100644 --- a/customize.dist/contact.html +++ b/customize.dist/contact.html @@ -30,6 +30,7 @@ + About diff --git a/customize.dist/index.html b/customize.dist/index.html index 9714857ef..92def9f0e 100644 --- a/customize.dist/index.html +++ b/customize.dist/index.html @@ -30,6 +30,7 @@ + About diff --git a/customize.dist/main.css b/customize.dist/main.css index 8cf9e6796..73952d4e3 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -448,6 +448,9 @@ margin: 0px 10px; line-height: 40px; } +#cryptpadTopBar .right button .buttonTitle .fa-user { + margin-right: 5px; +} #cryptpadTopBar .right a { font-weight: 500; font-size: 0.75em; diff --git a/customize.dist/main.js b/customize.dist/main.js index 766977f0d..58bbe4838 100644 --- a/customize.dist/main.js +++ b/customize.dist/main.js @@ -21,6 +21,14 @@ define([ $sel.find('button').addClass('btn').addClass('btn-secondary'); $sel.show(); + // User admin menu + var $userMenu = $('#user-menu'); + var userMenuCfg = { + $initBlock: $userMenu + }; + var $userAdmin = Cryptpad.createUserAdminMenu(userMenuCfg); + $userAdmin.find('button').addClass('btn').addClass('btn-secondary'); + $(window).click(function () { $('.cryptpad-dropdown').hide(); }); diff --git a/customize.dist/privacy.html b/customize.dist/privacy.html index 6547009ba..11986f334 100644 --- a/customize.dist/privacy.html +++ b/customize.dist/privacy.html @@ -30,6 +30,7 @@ + About diff --git a/customize.dist/src/fragments/topbar.html b/customize.dist/src/fragments/topbar.html index 044db621f..b68570bad 100644 --- a/customize.dist/src/fragments/topbar.html +++ b/customize.dist/src/fragments/topbar.html @@ -7,6 +7,7 @@ + About diff --git a/customize.dist/src/less/topbar.less b/customize.dist/src/less/topbar.less index 64cad7a28..b10309f61 100644 --- a/customize.dist/src/less/topbar.less +++ b/customize.dist/src/less/topbar.less @@ -47,6 +47,13 @@ margin: 0px 10px; line-height: 40px; + button { + .buttonTitle { + .fa-user { + margin-right: 5px; + } + } + } a { font-weight: 500; font-size: 0.75em; diff --git a/customize.dist/terms.html b/customize.dist/terms.html index ffeee2434..f35437018 100644 --- a/customize.dist/terms.html +++ b/customize.dist/terms.html @@ -30,6 +30,7 @@ + About diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index ff667437b..c6a301445 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -246,6 +246,7 @@ define(function () { out.login_nologin = "Voir les documents récents"; out.login_register = "Inscription"; out.logoutButton = "Déconnexion"; + out.settingsButton = "Préférences"; out.login_migrate = "Souhaitez-vous importer les données existantes de votre session anonyme ?"; @@ -304,6 +305,20 @@ define(function () { "" ]; + // Settings + out.settings_title = "Préférences"; + out.settings_save = "Sauver"; + out.settings_backupTitle = "Créer ou restaurer une sauvegarde de vos données"; + out.settings_backup = "Créer une sauvegarde"; + out.settings_restore = "Restaurer une sauvegarde"; + out.settings_resetTitle = "Vider votre drive"; + out.settings_reset = "Supprimer tous les fichiers et dossiers de votre CryptDrive"; + out.settings_resetPrompt = "Cette action va supprimer tous les documents de votre drive.
"+ + "Êtes-vous sûr de vouloir continuer ?
" + + "Tapez “I love CryptPad” pour confirmer."; + out.settings_resetDone = "Votre drive est désormais vide!"; + + // index.html //out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel zero knowledge. Le chiffrement est effectué depuis votre navigateur, ce qui protège les données contre le serveur, le cloud, et la NSA. La clé de chiffrement est stockée dans l\'identifieur de fragment de l\'URL qui n\'est jamais envoyée au serveur mais est accessible depuis javascript, de sorte qu\'en partageant l\'URL, vous donnez l\'accès au pad à ceux qui souhaitent participer.'; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index a15882234..44163eb43 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -247,6 +247,7 @@ define(function () { out.login_nologin = "Browse local pads"; out.login_register = "Sign up"; out.logoutButton = "Log out"; + out.settingsButton = "Settings"; out.login_migrate = "Would you like to migrate existing data from your anonymous session?"; @@ -305,6 +306,19 @@ define(function () { "" ]; + // Settings + out.settings_title = "Settings"; + out.settings_save = "Save"; + out.settings_backupTitle = "Backup or restore all your data"; + out.settings_backup = "Backup"; + out.settings_restore = "Restore"; + out.settings_resetTitle = "Clean your drive"; + out.settings_reset = "Remove all the files and folders from your CryptDrive"; + out.settings_resetPrompt = "This action will remove all the pads from your drive.
"+ + "Are you sure you want to continue?
" + + "Type “I love CryptPad” to confirm."; + out.settings_resetDone = "Your drive is now empty!"; + // index.html //out.main_p1 = 'CryptPad is the zero knowledge realtime collaborative editor. Encryption carried out in your web browser protects the data from the server, the cloud, and the NSA. The secret encryption key is stored in the URL fragment identifier which is never sent to the server but is available to javascript so by sharing the URL, you give authorization to others who want to participate.'; diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 26b772c1f..d25142ae3 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -1090,6 +1090,117 @@ define([ Messages._initSelector($block); }; + var createUserAdminMenu = common.createUserAdminMenu = function (config) { + var $displayedName = $('', {'class': config.displayNameCls || 'displayName'}); + var accountName = localStorage[common.userNameKey]; + var account = isLoggedIn(); + var $userAdminContent = $('

'); + if (account) { + var $userAccount = $('', {'class': 'userAccount'}).append(Messages.user_accountName + ': ' + accountName); + $userAdminContent.append($userAccount); + $userAdminContent.append($('
')); + } + var $userName = $('', {'class': 'userDisplayName'}); + if (config.displayName) { + // Hide "Display name:" in read only mode + $userName.append(Messages.user_displayName + ': '); + $userName.append($displayedName.clone()); + } + //$userName.append($displayedName.clone()); TODO remove ? + $userAdminContent.append($userName); + var options = []; + if (config.displayNameCls) { + options.push({ + tag: 'p', + attributes: {'class': 'accountData'}, + content: $userAdminContent.html() + }); + } + // Add the change display name button if not in read only mode + if (config.changeNameButtonCls && config.displayChangeName) { //readOnly !== 1) { TODO + options.push({ + tag: 'a', + attributes: {'class': config.changeNameButtonCls}, + content: Messages.user_rename + }); + } + var parsed = parsePadUrl(window.location.href); + if (parsed && (!parsed.type || parsed.type && parsed.type !== 'drive')) { + options.push({ + tag: 'a', + attributes: { + 'target': '_blank', + 'href': '/drive/' + }, + content: Messages.login_accessDrive + }); + } + // Add login or logout button depending on the current status + if (account) { + if (parsed && parsed.type && parsed.type !== 'settings') { + options.push({ + tag: 'a', + attributes: {'class': 'settings'}, + content: Messages.settingsButton + }); + } + options.push({ + tag: 'a', + attributes: {'class': 'logout'}, + content: Messages.logoutButton + }); + } else { + options.push({ + tag: 'a', + attributes: {'class': 'login'}, + content: Messages.login_login + }); + options.push({ + tag: 'a', + attributes: {'class': 'register'}, + content: Messages.login_register + }); + } + var $icon = $('', {'class': 'fa fa-user'}); + var $userbig = $('', {'class': 'big'}).append($displayedName.clone()); + var $userButton = $('

').append($icon).append($userbig); + if (account && config.displayNameCls) { + $userbig.append($('', {'class': 'account-name'}).text('(' + accountName + ')')); + } else if (account) { + // If no display name, do not display the parentheses + $userbig.append($('', {'class': 'account-name'}).text(accountName)); + } + var dropdownConfigUser = { + text: $userButton.html(), // Button initial text + options: options, // Entries displayed in the menu + left: true, // Open to the left of the button + container: config.$initBlock // optional + }; + var $userAdmin = createDropdown(dropdownConfigUser); + + $userAdmin.find('a.logout').click(function (e) { + Cryptpad.logout(); + window.location.href = '/'; + }); + $userAdmin.find('a.settings').click(function (e) { + if (parsed && parsed.type) { + window.open('/settings/'); + } else { + window.location.href = '/settings/'; + } + }); + $userAdmin.find('a.login').click(function (e) { + sessionStorage.redirectTo = window.location.href; + window.location.href = '/login/'; + }); + $userAdmin.find('a.register').click(function (e) { + sessionStorage.redirectTo = window.location.href; + window.location.href = '/register/'; + }); + + return $userAdmin; + }; + /* * Alertifyjs */ diff --git a/www/common/toolbar.js b/www/common/toolbar.js index 6784661d6..1cc265ddc 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -386,100 +386,25 @@ define([ throw new Error("You must provide a `userName` object containing `setName` (function) " + "and `lastName` (object) if you want to display the user admin menu."); } - var $displayedName = $('', {'class': USERNAME_CLS}); - var accountName = Cryptpad.getStore().getLoginName ? Cryptpad.getStore().getLoginName() : null; - var account = typeof accountName === "string"; - var $userAdminContent = $('

'); - if (account) { - var $userAccount = $('', {'class': 'userAccount'}).append(Messages.user_accountName + ': ' + accountName); - $userAdminContent.append($userAccount); - $userAdminContent.append($('
')); - } - var $userName = $('', {'class': 'userDisplayName'}); - if (readOnly !== 1) { - // Hide "Display name:" in read only mode - $userName.append(Messages.user_displayName + ': '); - } - $userName.append($displayedName.clone()); - $userAdminContent.append($userName); - var options = [{ - tag: 'p', - attributes: {'class': 'accountData'}, - content: $userAdminContent.html() - }]; - // Add the change display name button if not in read only mode + + var userMenuCfg = { + displayNameCls: USERNAME_CLS, + changeNameButtonCls: USERBUTTON_CLS, + }; if (readOnly !== 1) { - options.push({ - tag: 'a', - attributes: {'class': USERBUTTON_CLS}, - content: Messages.user_rename - }); - } - var parsed = Cryptpad.parsePadUrl(window.location.href); - if (parsed && parsed.type && parsed.type !== 'drive') { - options.push({ - tag: 'a', - attributes: { - 'target': '_blank', - 'href': '/drive/' - }, - content: Messages.login_accessDrive - }); - } - // Add login or logout button depending on the current status - if (account) { - options.push({ - tag: 'a', - attributes: {'class': 'logout'}, - content: Messages.logoutButton - }); - } else { - options.push({ - tag: 'a', - attributes: {'class': 'login'}, - content: Messages.login_login - }); - options.push({ - tag: 'a', - attributes: {'class': 'register'}, - content: Messages.login_register - }); - } - var $icon = $('', {'class': 'fa fa-user'}); - var $userbig = $('', {'class': 'big'}).append($displayedName.clone()); - var $userButton = $('

').append($icon).append($userbig); - if (account) { - $userbig.append($('', {'class': 'account-name'}).text('(' + accountName + ')')); + userMenuCfg.displayName = 1; + userMenuCfg.displayChangeName = 1; } - var dropdownConfigUser = { - text: $userButton.html(), // Button initial text - options: options, // Entries displayed in the menu - left: true, // Open to the left of the button - }; - var $userAdmin = Cryptpad.createDropdown(dropdownConfigUser); + var $userAdmin = Cryptpad.createUserAdminMenu(userMenuCfg); + $userAdmin.attr('id', 'userDropdown'); $userContainer.append($userAdmin); - $userAdmin.find('a.logout').click(function (e) { - Cryptpad.logout(); - window.location.href = '/'; - }); - $userAdmin.find('a.login').click(function (e) { - sessionStorage.redirectTo = window.location.href; - window.location.href = '/login/'; - }); - $userAdmin.find('a.register').click(function (e) { - sessionStorage.redirectTo = window.location.href; - window.location.href = '/register/'; - }); - - if (config.userName && config.userName.setName && config.userName.lastName) { - $userAdmin.find('a.' + USERBUTTON_CLS).click(function (e) { - Cryptpad.prompt(Messages.changeNamePrompt, config.userName.lastName.lastName || '', function (newName) { - config.userName.setName(newName); - }); + $userAdmin.find('a.' + USERBUTTON_CLS).click(function (e) { + Cryptpad.prompt(Messages.changeNamePrompt, config.userName.lastName.lastName || '', function (newName) { + config.userName.setName(newName); }); - } + }); } return $userContainer; diff --git a/www/settings/index.html b/www/settings/index.html index 9938f7b13..5257175c5 100644 --- a/www/settings/index.html +++ b/www/settings/index.html @@ -31,6 +31,7 @@ + About diff --git a/www/settings/main.js b/www/settings/main.js index 38cf106e2..3650c09e4 100644 --- a/www/settings/main.js +++ b/www/settings/main.js @@ -14,6 +14,8 @@ define([ _onRefresh: [] }; + var Messages = Cryptpad.Messages; + var redirectToMain = function () { window.location.href = '/'; }; @@ -33,7 +35,7 @@ define([ // Title block var createTitle = function () { - return $('

').text('Settings'); //XXX + return $('

').text(Messages.settings_title); }; var createInfoBlock = function (store) { @@ -42,7 +44,7 @@ define([ var accountName = obj.login_name; if (!accountName) { return; } - var $label = $('', {'class': 'label'}).text('Account name:'); // XXX + var $label = $('', {'class': 'label'}).text(Messages.login_username_label); var $name = $('').text(accountName); $div.append($label).append($name); @@ -53,13 +55,13 @@ define([ var createDisplayNameInput = function (store) { var obj = store.proxy; var $div = $('
', {'class': 'displayName'}); - var $label = $('