infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Add a dropdown user menu to the top bar in static pages

pull/1/head
yflory 2017-02-15 17:57:42 +01:00
parent 0e76b18278
commit 7497e0d1c5
15 changed files with 204 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
customize.dist/about.html
View File

@ -30,6 +30,7 @@
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="user-menu" class="right dropdown-bar"></span>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="link right">
<a href="/about.html" data-localization="about">About</a>

1
customize.dist/contact.html
View File

@ -30,6 +30,7 @@
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="user-menu" class="right dropdown-bar"></span>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="link right">
<a href="/about.html" data-localization="about">About</a>

1
customize.dist/index.html
View File

@ -30,6 +30,7 @@
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="user-menu" class="right dropdown-bar"></span>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="link right">
<a href="/about.html" data-localization="about">About</a>

3
customize.dist/main.css
View File

@ -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;

8
customize.dist/main.js
View File

@ -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();
});

1
customize.dist/privacy.html
View File

@ -30,6 +30,7 @@
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="user-menu" class="right dropdown-bar"></span>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="link right">
<a href="/about.html" data-localization="about">About</a>

1
customize.dist/src/fragments/topbar.html
View File

@ -7,6 +7,7 @@
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="user-menu" class="right dropdown-bar"></span>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="link right">
<a href="/about.html" data-localization="about">About</a>

7
customize.dist/src/less/topbar.less
View File

@ -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;

1
customize.dist/terms.html
View File

@ -30,6 +30,7 @@
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="user-menu" class="right dropdown-bar"></span>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="link right">
<a href="/about.html" data-localization="about">About</a>

15
customize.dist/translations/messages.fr.js
View File

@ -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 () {
"</ul>"
];
// 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.<br>"+
"Êtes-vous sûr de vouloir continuer ?<br>" +
"Tapez “<em>I love CryptPad</em>” 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 <strong>zero knowledge</strong>. 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\'<a href="https://fr.wikipedia.org/wiki/Identificateur_de_fragment">identifieur de fragment</a> 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.';

14
customize.dist/translations/messages.js
View File

@ -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 () {
"</ul>"
];
// 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.<br>"+
"Are you sure you want to continue?<br>" +
"Type “<em>I love CryptPad</em>” to confirm.";
out.settings_resetDone = "Your drive is now empty!";
// index.html
//out.main_p1 = 'CryptPad is the <strong>zero knowledge</strong> 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 <a href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> 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.';

111
www/common/cryptpad-common.js
View File

@ -1090,6 +1090,117 @@ define([
Messages._initSelector($block);
};
var createUserAdminMenu = common.createUserAdminMenu = function (config) {
var $displayedName = $('<span>', {'class': config.displayNameCls || 'displayName'});
var accountName = localStorage[common.userNameKey];
var account = isLoggedIn();
var $userAdminContent = $('<p>');
if (account) {
var $userAccount = $('<span>', {'class': 'userAccount'}).append(Messages.user_accountName + ': ' + accountName);
$userAdminContent.append($userAccount);
$userAdminContent.append($('<br>'));
}
var $userName = $('<span>', {'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 = $('<span>', {'class': 'fa fa-user'});
var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
var $userButton = $('<div>').append($icon).append($userbig);
if (account && config.displayNameCls) {
$userbig.append($('<span>', {'class': 'account-name'}).text('(' + accountName + ')'));
} else if (account) {
// If no display name, do not display the parentheses
$userbig.append($('<span>', {'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
*/

103
www/common/toolbar.js
View File

@ -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 = $('<span>', {'class': USERNAME_CLS});
var accountName = Cryptpad.getStore().getLoginName ? Cryptpad.getStore().getLoginName() : null;
var account = typeof accountName === "string";
var $userAdminContent = $('<p>');
if (account) {
var $userAccount = $('<span>', {'class': 'userAccount'}).append(Messages.user_accountName + ': ' + accountName);
$userAdminContent.append($userAccount);
$userAdminContent.append($('<br>'));
}
var $userName = $('<span>', {'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
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 = $('<span>', {'class': 'fa fa-user'});
var $userbig = $('<span>', {'class': 'big'}).append($displayedName.clone());
var $userButton = $('<div>').append($icon).append($userbig);
if (account) {
$userbig.append($('<span>', {'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
var userMenuCfg = {
displayNameCls: USERNAME_CLS,
changeNameButtonCls: USERBUTTON_CLS,
};
var $userAdmin = Cryptpad.createDropdown(dropdownConfigUser);
if (readOnly !== 1) {
userMenuCfg.displayName = 1;
userMenuCfg.displayChangeName = 1;
}
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;

1
www/settings/index.html
View File

@ -31,6 +31,7 @@
<!--<span class="slogan" data-localization="main_slogan"></span>-->
<span id="user-menu" class="right dropdown-bar"></span>
<span id="language-selector" class="right dropdown-bar"></span>
<span class="link right">
<a href="/about.html" data-localization="about">About</a>

37
www/settings/main.js
View File

@ -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 $('<h1>').text('Settings'); //XXX
return $('<h1>').text(Messages.settings_title);
};
var createInfoBlock = function (store) {
@ -42,7 +44,7 @@ define([
var accountName = obj.login_name;
if (!accountName) { return; }
var $label = $('<span>', {'class': 'label'}).text('Account name:'); // XXX
var $label = $('<span>', {'class': 'label'}).text(Messages.login_username_label);
var $name = $('<span>').text(accountName);
$div.append($label).append($name);
@ -53,13 +55,13 @@ define([
var createDisplayNameInput = function (store) {
var obj = store.proxy;
var $div = $('<div>', {'class': 'displayName'});
var $label = $('<label>', {'for' : 'displayName'}).text('DISPLAY NAME').appendTo($div); // XXX
var $label = $('<label>', {'for' : 'displayName'}).text(Messages.login_displayname_label).appendTo($div);
$('<br>').appendTo($div);
var $input = $('<input>', {
'type': 'text',
'id': 'displayName',
'placeholder': 'ANONYMOUS'}).appendTo($div); // XXX
var $save = $('<button>', {'class': 'btn btn-primary'}).text('SAVE').appendTo($div); // XXX
'placeholder': Messages.anonymous}).appendTo($div);
var $save = $('<button>', {'class': 'btn btn-primary'}).text(Messages.settings_save).appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check'}).appendTo($div);
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).appendTo($div);
@ -117,16 +119,16 @@ define([
});
};
var $label = $('<label>', {'for' : 'exportDrive'}).text('BACKUP/RESTORE MY DATA').appendTo($div); // XXX
var $label = $('<label>', {'for' : 'exportDrive'}).text(Messages.settings_backupTitle).appendTo($div);
$('<br>').appendTo($div);
/* add an export button */
var $export = Cryptpad.createButton('export', true, {}, exportFile);
$export.addClass('btn').addClass('btn-success').append('BACKUP'); // XXX
$export.addClass('btn').addClass('btn-success').append(Messages.settings_backup);
$div.append($export);
/* add an import button */
var $import = Cryptpad.createButton('import', true, {}, importFile);
$import.addClass('btn').addClass('btn-warning').append('RESTORE'); // XXX
$import.addClass('btn').addClass('btn-warning').append(Messages.settings_restore);
$div.append($import);
return $div;
@ -134,15 +136,16 @@ define([
var createResetDrive = function (obj) {
var $div = $('<div>', {'class': 'resetDrive'});
var $label = $('<label>', {'for' : 'resetDrive'}).text('CLEAN MY DRIVE').appendTo($div); // XXX
var $label = $('<label>', {'for' : 'resetDrive'}).text(Messages.settings_resetTitle).appendTo($div);
$('<br>').appendTo($div);
var $button = $('<button>', {'id': 'resetDrive', 'class': 'btn btn-danger'}).text('REMOVE ALL MY FILES AND FOLDERS').appendTo($div); // XXX
var $button = $('<button>', {'id': 'resetDrive', 'class': 'btn btn-danger'})
.text(Messages.settings_reset).appendTo($div);
$button.click(function () {
Cryptpad.prompt("Are you <b>really really</b> sure? That action is irreversible! Type `<em>I love CryptPad</em>` to confirm.", "", function (val) { // XXX
Cryptpad.prompt(Messages.settings_resetPrompt, "", function (val) {
if (val !== "I love CryptPad") { return; }
obj.proxy.drive = Cryptpad.getStore().getEmptyObject();
Cryptpad.alert("Your drive is now empty!"); // XXX
Cryptpad.alert(Messages.settings_resetDone);
});
});
@ -166,9 +169,19 @@ define([
Cryptpad.createLanguageSelector(undefined, $sel);
$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();
});
// main block is hidden in case javascript is disabled
$main.removeClass('hidden');