closes #3817

package.json

@@ -49,8 +49,8 @@
     "nodebb-plugin-spam-be-gone": "0.4.2",
     "nodebb-rewards-essentials": "0.0.5",
     "nodebb-theme-lavender": "2.0.12",
-    "nodebb-theme-persona": "4.0.19",
+    "nodebb-theme-persona": "4.0.20",
-    "nodebb-theme-vanilla": "5.0.4",
+    "nodebb-theme-vanilla": "5.0.5",
     "nodebb-widget-essentials": "2.0.3",
     "npm": "^2.1.4",
     "passport": "^0.3.0",

public/src/client/account/edit.js

@@ -74,66 +74,107 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'],
 	function handleImageChange() {
 
 		$('#changePictureBtn').on('click', function() {
-			templates.parse('partials/modals/change_picture_modal', {uploadedpicture: uploadedPicture}, function(html) {
+			socket.emit('user.getProfilePictures', function(err, pictures) {
-				translator.translate(html, function(html) {
+				templates.parse('partials/modals/change_picture_modal', {
-					function updateImages() {
+					pictures: pictures,
-						var currentPicture = $('#user-current-picture').attr('src'),
+					uploaded: !!ajaxify.data.uploadedpicture
-							userIcon = modal.find('.user-icon');
+				}, function(html) {
-
+					translator.translate(html, function(html) {
-						userIcon
+						var modal = bootbox.dialog({
-							.css('background-color', ajaxify.data['icon:bgColor'])
+							className: 'picture-switcher',
-							.text(ajaxify.data['icon:text']);
+							title: '[[user:change_picture]]',
-
+							message: html,
-						if (uploadedPicture) {
+							show: true,
-							modal.find('#user-uploaded-picture').attr('src', uploadedPicture);
+							buttons: {
-						}
+								update: {
-
+									label: '[[global:save_changes]]',
-						modal.find('#uploaded-box').toggle(!!uploadedPicture);
+									callback: saveSelection
-
+								}
-						modal.find('#default-box .fa-check').toggle(currentPicture !== uploadedPicture);
-						modal.find('#uploaded-box .fa-check').toggle(currentPicture === uploadedPicture);
-					}
-
-					function selectImageType(type) {
-						modal.find('#default-box .fa-check').toggle(type === 'default');
-						modal.find('#uploaded-box .fa-check').toggle(type === 'uploaded');
-						selectedImageType = type;
-					}
-
-					var modal = $(html);
-					modal.on('hidden.bs.modal', function() {
-						modal.remove();
-					});
-					selectedImageType = '';
-					updateImages();
-
-					modal.modal('show');
-
-					modal.find('#default-box').on('click', function() {
-						selectImageType('default');
-					});
-
-					modal.find('#uploaded-box').on('click', function() {
-						selectImageType('uploaded');
-					});
-
-					handleImageUpload(modal);
-
-					modal.find('#savePictureChangesBtn').on('click', function() {
-
-						modal.modal('hide');
-
-						if (!selectedImageType) {
-							return;
-						}
-						changeUserPicture(selectedImageType, function(err) {
-							if (err) {
-								return app.alertError(err.message);
 							}
-
-							updateHeader(selectedImageType === 'uploaded' ? uploadedPicture : '');
-							ajaxify.refresh();
 						});
+
+						modal.on('shown.bs.modal', updateImages);
+						modal.on('click', '.list-group-item', selectImageType);
+						handleImageUpload(modal);
+
+						function updateImages() {
+							var currentPicture = $('#user-current-picture').attr('src'),
+								userIcon = modal.find('.user-icon');
+
+							userIcon
+								.css('background-color', ajaxify.data['icon:bgColor'])
+								.text(ajaxify.data['icon:text']);
+
+							// Check to see which one is the active picture
+							if (!ajaxify.data.picture) {
+								modal.find('.list-group-item .user-icon').parents('.list-group-item').addClass('active');
+							} else {
+								modal.find('.list-group-item img').each(function() {
+									if (this.getAttribute('src') === ajaxify.data.picture) {
+										$(this).parents('.list-group-item').addClass('active');
+									}
+								})
+							}
+							// if (uploadedPicture) {
+							// 	modal.find('#user-uploaded-picture').attr('src', uploadedPicture);
+							// }
+
+							// modal.find('#uploaded-box').toggle(!!uploadedPicture);
+							// modal.find('#default-box .fa-check').toggle(currentPicture !== uploadedPicture);
+							// modal.find('#uploaded-box .fa-check').toggle(currentPicture === uploadedPicture);
+						}
+
+						function selectImageType() {
+							modal.find('.list-group-item').removeClass('active');
+							$(this).addClass('active');
+						}
+
+						function saveSelection() {
+							var type = modal.find('.list-group-item.active').attr('data-type'),
+								src = modal.find('.list-group-item.active img').attr('src');
+							changeUserPicture(type, function(err) {
+								if (err) {
+									return app.alertError(err.message);
+								}
+
+								updateHeader(type === 'default' ? '' : src);
+								ajaxify.refresh();
+							});
+						}
+
+						// var modal = $(html);
+						// modal.on('hidden.bs.modal', function() {
+						// 	modal.remove();
+						// });
+						// selectedImageType = '';
+						// updateImages();
+
+						// modal.modal('show');
+
+						// modal.find('#default-box').on('click', function() {
+						// 	selectImageType('default');
+						// });
+
+						// modal.find('#uploaded-box').on('click', function() {
+						// 	selectImageType('uploaded');
+						// });
+
+						// modal.find('#savePictureChangesBtn').on('click', function() {
+
+						// 	modal.modal('hide');
+
+						// 	if (!selectedImageType) {
+						// 		return;
+						// 	}
+						// 	changeUserPicture(selectedImageType, function(err) {
+						// 		if (err) {
+						// 			return app.alertError(err.message);
+						// 		}
+
+						// 		updateHeader(selectedImageType === 'uploaded' ? uploadedPicture : '');
+						// 		ajaxify.refresh();
+						// 	});
+						// });
 					});
 				});
 			});
@@ -185,7 +226,7 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'],
 			uploadedPicture = '';
 		}
 
-		modal.find('#uploadPictureBtn').on('click', function() {
+		modal.find('[data-action="upload"]').on('click', function() {
 			modal.modal('hide');
 			uploader.open(config.relative_path + '/api/user/' + ajaxify.data.userslug + '/uploadpicture', {}, config.maximumProfileImageSize, function(imageUrlOnServer) {
 				onUploadComplete(imageUrlOnServer);
@@ -194,7 +235,7 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'],
 			return false;
 		});
 
-		modal.find('#uploadFromUrlBtn').on('click', function() {
+		modal.find('[data-action="upload-url"]').on('click', function() {
 			modal.modal('hide');
 			templates.parse('partials/modals/upload_picture_from_url_modal', {}, function(html) {
 				translator.translate(html, function(html) {
@@ -223,7 +264,7 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'],
 			return false;
 		});
 
-		modal.find('#removeUploadedPictureBtn').on('click', function() {
+		modal.find('[data-action="remove-uploaded"]').on('click', function() {
 			socket.emit('user.removeUploadedPicture', {uid: ajaxify.data.theirid}, function(err, imageUrlOnServer) {
 				modal.modal('hide');
 				if (err) {

public/src/overrides.js

@@ -112,7 +112,11 @@ if ('undefined' !== typeof window) {
 			confirm = bootbox.confirm;
 
 		function translate(modal) {
-			var footer = modal.find('.modal-footer');
+			var header = modal.find('.modal-header'),
+				footer = modal.find('.modal-footer');
+			translator.translate(header.html(), function(html) {
+				header.html(html);
+			});
 			translator.translate(footer.html(), function(html) {
 				footer.html(html);
 			});

src/socket.io/user/picture.js

@@ -4,6 +4,7 @@ var async = require('async');
 var winston = require('winston');
 
 var user = require('../../user');
+var plugins = require('../../plugins');
 
 module.exports = function(SocketUser) {
 
@@ -18,23 +19,36 @@ module.exports = function(SocketUser) {
 
 		var type = data.type;
 
-		if (type === 'default') {
+		// if (type === 'default') {
-			type = null;
+		// 	type = null;
-		} else if (type === 'uploaded') {
+		// } else if (type === 'uploaded') {
-			type = 'uploadedpicture';
+		// 	type = 'uploadedpicture';
-		} else {
+		// } else {
-			return callback(new Error('[[error:invalid-image-type, ' + ['default', 'uploadedpicture'].join(', ') + ']]'));
+		// 	return callback(new Error('[[error:invalid-image-type, ' + ['default', 'uploadedpicture'].join(', ') + ']]'));
-		}
+		// }
 
 		async.waterfall([
 			function (next) {
 				user.isAdminOrSelf(socket.uid, data.uid, next);
 			},
 			function (next) {
-				if (!type) {
+				switch(type) {
-					next(null, '');
+					case 'default':
+						next(null, '');
+						break;
+					case 'uploaded':
+						user.getUserField(data.uid, 'uploadedpicture', next);
+						break;
+					default:
+						plugins.fireHook('filter:user.getPicture', {
+							uid: socket.uid,
+							type: type,
+							picture: undefined
+						}, function(err, returnData) {
+							next(null, returnData.picture || '');
+						});
+						break;
 				}
-				user.getUserField(data.uid, type, next);
 			},
 			function (picture, next) {
 				user.setUserField(data.uid, 'picture', picture, next);
@@ -84,4 +98,28 @@ module.exports = function(SocketUser) {
 			}
 		], callback);
 	};
+
+	SocketUser.getProfilePictures = function(socket, data, callback) {
+		async.parallel({
+			list: async.apply(plugins.fireHook, 'filter:user.listPictures', {
+				uid: socket.uid,
+				pictures: []
+			}),
+			uploaded: async.apply(user.getUserField, socket.uid, 'uploadedpicture')
+		}, function(err, data) {
+			if (err) {
+				return callback(err);
+			}
+
+			if (data.uploaded) {
+				data.list.pictures.push({
+					type: 'uploaded',
+					url: data.uploaded,
+					text: '[[user:uploaded_picture]]'
+				});
+			}
+
+			callback(null, data.list.pictures);
+		})
+	};
 };