Added account settings management and avatars

This commit is contained in:
Marcin Kurczewski
2014-09-07 00:33:46 +02:00
parent bfee96c59e
commit ee2ca7fbaf
40 changed files with 1178 additions and 175 deletions

View File

@ -31,20 +31,20 @@ App.Presenters.RegistrationPresenter = function(
e.preventDefault();
messagePresenter.hideMessages($messages);
registrationData = {
userName: $el.find('[name=user]').val(),
password: $el.find('[name=password1]').val(),
passwordConfirmation: $el.find('[name=password2]').val(),
formData = {
userName: $el.find('[name=userName]').val(),
password: $el.find('[name=password]').val(),
passwordConfirmation: $el.find('[name=passwordConfirmation]').val(),
email: $el.find('[name=email]').val(),
};
if (!validateRegistrationData(registrationData))
if (!validateRegistrationFormData(formData))
return;
api.post('/users', registrationData)
api.post('/users', formData)
.then(function(response) {
registrationSuccess(response);
}).catch(function(response) {
}).fail(function(response) {
registrationFailure(response);
});
}
@ -62,18 +62,18 @@ App.Presenters.RegistrationPresenter = function(
messagePresenter.showError($messages, apiResponse.json && apiResponse.json.error || apiResponse);
}
function validateRegistrationData(registrationData) {
if (registrationData.userName.length == 0) {
function validateRegistrationFormData(formData) {
if (formData.userName.length == 0) {
messagePresenter.showError($messages, 'User name cannot be empty.');
return false;
}
if (registrationData.password.length == 0) {
if (formData.password.length == 0) {
messagePresenter.showError($messages, 'Password cannot be empty.');
return false;
}
if (registrationData.password != registrationData.passwordConfirmation) {
if (formData.password != formData.passwordConfirmation) {
messagePresenter.showError($messages, 'Passwords must be the same.');
return false;
}

View File

@ -0,0 +1,78 @@
var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.UserAccountRemovalPresenter = function(
jQuery,
util,
promise,
api,
auth,
router,
messagePresenter) {
var target;
var template;
var user;
var privileges = {};
function init(args) {
return promise.make(function(resolve, reject) {
user = args.user;
target = args.target;
privileges.canDeleteAccount =
auth.hasPrivilege(auth.privileges.deleteAllAccounts) ||
(auth.hasPrivilege(auth.privileges.deleteOwnAccount) && auth.isLoggedIn(user.name));
promise.wait(util.promiseTemplate('account-removal')).then(function(html) {
template = _.template(html);
render();
resolve();
});
});
}
function render() {
$el = jQuery(target);
$el.html(template({
user: user,
canDeleteAccount: privileges.canDeleteAccount}));
$el.find('form').submit(accountRemovalFormSubmitted);
}
function getPrivileges() {
return privileges;
}
function accountRemovalFormSubmitted(e) {
e.preventDefault();
$messages = jQuery(target).find('.messages');
messagePresenter.hideMessages($messages);
if (!$el.find('input[name=confirmation]:visible').prop('checked')) {
messagePresenter.showError($messages, 'Must confirm to proceed.');
return;
}
api.delete('/users/' + user.name)
.then(function() {
auth.logout();
var $messageDiv = messagePresenter.showInfo($messages, 'Account deleted. <a href="">Back to main page</a>');
$messageDiv.find('a').click(mainPageLinkClicked);
}).fail(function(response) {
messagePresenter.showError($messages, response.json && response.json.error || response);
});
}
function mainPageLinkClicked(e) {
e.preventDefault();
router.navigateToMainPage();
}
return {
init: init,
render: render,
getPrivileges: getPrivileges
};
};
App.DI.register('userAccountRemovalPresenter', App.Presenters.UserAccountRemovalPresenter);

View File

@ -0,0 +1,154 @@
var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.UserAccountSettingsPresenter = function(
jQuery,
util,
promise,
api,
auth,
messagePresenter) {
var $messages;
var target;
var template;
var user;
var privileges;
var avatarContent;
function init(args) {
return promise.make(function(resolve, reject) {
user = args.user;
target = args.target;
privileges = {
canChangeAccessRank:
auth.hasPrivilege(auth.privileges.changeAccessRank),
canChangeAvatarStyle:
auth.hasPrivilege(auth.privileges.changeAllAvatarStyles) ||
(auth.hasPrivilege(auth.privileges.changeOwnAvatarStyle) && auth.isLoggedIn(user.name)),
canChangeName:
auth.hasPrivilege(auth.privileges.changeAllNames) ||
(auth.hasPrivilege(auth.privileges.changeOwnName) && auth.isLoggedIn(user.name)),
canChangeEmailAddress:
auth.hasPrivilege(auth.privileges.changeAllEmailAddresses) ||
(auth.hasPrivilege(auth.privileges.changeOwnEmailAddress) && auth.isLoggedIn(user.name)),
canChangePassword:
auth.hasPrivilege(auth.privileges.changeAllPasswords) ||
(auth.hasPrivilege(auth.privileges.changeOwnPassword) && auth.isLoggedIn(user.name)),
};
promise.wait(util.promiseTemplate('account-settings')).then(function(html) {
template = _.template(html);
render();
resolve();
});
});
}
function render() {
var $el = jQuery(target);
$el.html(template(_.extend({user: user}, privileges)));
$el.find('form').submit(accountSettingsFormSubmitted);
$el.find('form [name=avatar-style]').change(avatarStyleChanged);
avatarStyleChanged();
new App.Controls.FileDropper($el.find('[name=avatar-content]'), false, avatarContentChanged, jQuery);
}
function getPrivileges() {
return privileges;
}
function avatarStyleChanged(e) {
var $el = jQuery(target);
var $target = $el.find('.avatar-content .file-handler');
if ($el.find('[name=avatar-style]:checked').val() == 'manual') {
$target.show();
} else {
$target.hide();
}
}
function avatarContentChanged(files) {
if (files.length == 1) {
var reader = new FileReader();
reader.onloadend = function() {
avatarContent = reader.result;
var $el = jQuery(target);
var $target = $el.find('.avatar-content .file-handler');
$target.html(files[0].name);
}
reader.readAsDataURL(files[0]);
}
}
function accountSettingsFormSubmitted(e) {
e.preventDefault();
var $el = jQuery(target);
var $messages = jQuery(target).find('.messages');
messagePresenter.hideMessages($messages);
var formData = {};
if (privileges.canChangeAvatarStyle) {
formData.avatarStyle = $el.find('[name=avatar-style]:checked').val();
if (avatarContent)
formData.avatarContent = avatarContent;
}
if (privileges.canChangeName) {
formData.userName = $el.find('[name=userName]').val();
}
if (privileges.canChangeEmailAddress) {
formData.email = $el.find('[name=email]').val();
}
if (privileges.canChangePassword) {
formData.password = $el.find('[name=password]').val();
formData.passwordConfirmation = $el.find('[name=passwordConfirmation]').val();
}
if (privileges.canChangeAccessRank) {
formData.accessRank = $el.find('[name=access-rank]').val();
}
if (!validateAccountSettingsFormData($messages, formData)) {
return;
}
if (!formData.password) {
delete formData.password;
delete formData.passwordConfirmation;
}
api.put('/users/' + user.name, formData)
.then(function(response) {
editSuccess($messages, response);
}).fail(function(response) {
editFailure($messages, response);
});
}
function editSuccess($messages, apiResponse) {
//todo: tell user if it turned out that he needs to confirm his e-mail
var message = 'Account settings updated!';
messagePresenter.showInfo($messages, message);
}
function editFailure($messages, apiResponse) {
messagePresenter.showError($messages, apiResponse.json && apiResponse.json.error || apiResponse);
}
function validateAccountSettingsFormData($messages, formData) {
if (formData.password != formData.passwordConfirmation) {
messagePresenter.showError($messages, 'Passwords must be the same.');
return false;
}
return true;
}
return {
init: init,
render: render,
getPrivileges: getPrivileges,
};
}
App.DI.register('userAccountSettingsPresenter', App.Presenters.UserAccountSettingsPresenter);

View File

@ -0,0 +1,46 @@
var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.UserBrowsingSettingsPresenter = function(
jQuery,
util,
promise,
auth) {
var target;
var template;
var user;
var privileges = {};
function init(args) {
return promise.make(function(resolve, reject) {
user = args.user;
target = args.target;
privileges.canChangeBrowsingSettings = auth.isLoggedIn(user.name) && user.name == auth.getCurrentUser().name;
promise.wait(util.promiseTemplate('browsing-settings')).then(function(html) {
template = _.template(html);
render();
resolve();
});
});
}
function render() {
$el = jQuery(target);
$el.html(template({user: user}));
}
function getPrivileges() {
return privileges;
}
return {
init: init,
render: render,
getPrivileges: getPrivileges,
};
}
App.DI.register('userBrowsingSettingsPresenter', App.Presenters.UserBrowsingSettingsPresenter);

View File

@ -8,14 +8,14 @@ App.Presenters.UserPresenter = function(
api,
auth,
topNavigationPresenter,
userBrowsingSettingsPresenter,
userAccountSettingsPresenter,
userAccountRemovalPresenter,
messagePresenter) {
var $el = jQuery('#content');
var $messages = $el;
var template;
var accountSettingsTemplate;
var accountRemovalTemplate;
var browsingSettingsTemplate;
var user;
var userName;
@ -25,23 +25,22 @@ App.Presenters.UserPresenter = function(
promise.waitAll(
util.promiseTemplate('user'),
util.promiseTemplate('account-settings'),
util.promiseTemplate('account-removal'),
util.promiseTemplate('browsing-settings'),
api.get('/users/' + userName))
.then(function(
userHtml,
accountSettingsHtml,
accountRemovalHtml,
browsingSettingsHtml,
response) {
$messages = $el.find('.messages');
template = _.template(userHtml);
accountSettingsTemplate = _.template(accountSettingsHtml);
accountRemovalTemplate = _.template(accountRemovalHtml);
browsingSettingsTemplate = _.template(browsingSettingsHtml);
user = response.json;
render();
var extendedContext = _.extend(args, {user: user});
promise.waitAll(
userBrowsingSettingsPresenter.init(_.extend(extendedContext, {target: '#browsing-settings-target'})),
userAccountSettingsPresenter.init(_.extend(extendedContext, {target: '#account-settings-target'})),
userAccountRemovalPresenter.init(_.extend(extendedContext, {target: '#account-removal-target'})))
.then(render);
}).fail(function(response) {
$el.empty();
messagePresenter.showError($messages, response.json && response.json.error || response);
@ -49,37 +48,16 @@ App.Presenters.UserPresenter = function(
}
function render() {
var context = {
$el.html(template({
user: user,
canDeleteAccount: auth.hasPrivilege(auth.privileges.deleteAllAccounts) ||
(auth.isLoggedIn(userName) && auth.hasPrivilege(auth.privileges.deleteOwnAccount)),
};
$el.html(template(context));
$el.find('.browsing-settings').html(browsingSettingsTemplate(context));
$el.find('.account-settings').html(accountSettingsTemplate(context));
$el.find('.account-removal').html(accountRemovalTemplate(context));
$el.find('.account-removal form').submit(accountRemovalFormSubmitted);
$messages = $el.find('.messages');
canChangeBrowsingSettings: userBrowsingSettingsPresenter.getPrivileges().canChangeBrowsingSettings,
canChangeAccountSettings: _.any(userAccountSettingsPresenter.getPrivileges()),
canDeleteAccount: userAccountRemovalPresenter.getPrivileges().canDeleteAccount}));
userBrowsingSettingsPresenter.render();
userAccountSettingsPresenter.render();
userAccountRemovalPresenter.render();
};
function accountRemovalFormSubmitted(e) {
e.preventDefault();
$messages = $el.find('.account-removal .messages');
messagePresenter.hideMessages($messages);
if (!$el.find('.account-removal input[name=confirmation]:visible').prop('checked')) {
messagePresenter.showError($messages, 'Must confirm to proceed.');
return;
}
api.delete('/users/' + user.name)
.then(function() {
auth.logout();
var $messageDiv = messagePresenter.showInfo($messages, 'Account deleted. <a href="">Back to main page</a>');
$messageDiv.find('a').click(mainPageLinkClicked);
}).fail(function(response) {
messagePresenter.showError($messages, response.json && response.json.error || response);
});
}
return {
init: init,
render: render