web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
yflory
2017-02-15 17:57:42 +01:00
parent 0e76b18278
commit 7497e0d1c5
15 changed files with 204 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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');