Added ability to change avatar color from settings page

backend/logic/actions/users.js

@@ -1794,14 +1794,14 @@ export default {
 	}),
 
 	/**
-	 * Updates the type of a user's avatar
+	 * Updates a user's avatar
 	 *
 	 * @param {object} session - the session object automatically added by the websocket
 	 * @param {string} updatingUserId - the updating user's id
-	 * @param {string} newType - the new type
+	 * @param {string} newAvatar - the new avatar object
 	 * @param {Function} cb - gets called with the result
 	 */
-	updateAvatarType: isLoginRequired(async function updateAvatarType(session, updatingUserId, newAvatar, cb) {
+	updateAvatar: isLoginRequired(async function updateAvatarType(session, updatingUserId, newAvatar, cb) {
 		const userModel = await DBModule.runJob("GET_MODEL", { modelName: "user" }, this);
 
 		async.waterfall(
@@ -1831,8 +1831,8 @@ export default {
 					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
 					this.log(
 						"ERROR",
-						"UPDATE_AVATAR_TYPE",
-						`Couldn't update avatar type for user "${updatingUserId}" to type "${newAvatar.type}". "${err}"`
+						"UPDATE_AVATAR",
+						`Couldn't update avatar for user "${updatingUserId}" to type "${newAvatar.type}" and color "${newAvatar.color}". "${err}"`
 					);
 					return cb({ status: "error", message: err });
 				}
@@ -1840,18 +1840,18 @@ export default {
 				ActivitiesModule.runJob("ADD_ACTIVITY", {
 					userId: updatingUserId,
 					type: "user__edit_avatar",
-					payload: { message: `Changed avatar to use ${newAvatar.type}` }
+					payload: { message: `Changed avatar to use ${newAvatar.type} and ${newAvatar.color}` }
 				});
 
 				this.log(
 					"SUCCESS",
-					"UPDATE_AVATAR_TYPE",
-					`Updated avatar type for user "${updatingUserId}" to type "${newAvatar.type}".`
+					"UPDATE_AVATAR",
+					`Updated avatar for user "${updatingUserId}" to type "${newAvatar.type} and color ${newAvatar.color}".`
 				);
 
 				return cb({
 					status: "success",
-					message: "Avatar type updated successfully"
+					message: "Avatar updated successfully"
 				});
 			}
 		);

frontend/src/pages/Settings/Tabs/Profile.vue

@@ -27,6 +27,15 @@
 						<option value="initials">Based on initials</option>
 					</select>
 				</div>
+				<div class="select" v-if="modifiedUser.avatar.type === 'initials'">
+					<select v-model="modifiedUser.avatar.color">
+						<option value="blue">Blue</option>
+						<option value="orange">Orange</option>
+						<option value="green">Green</option>
+						<option value="purple">Purple</option>
+						<option value="teal">Teal</option>
+					</select>
+				</div>
 			</div>
 		</div>
 		<p class="control is-expanded margin-top-zero">
@@ -96,21 +105,6 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
-	watch: {
-		"modifiedUser.avatar.type": function watchAvatarType(newType, oldType) {
-			if (
-				oldType &&
-				this.modifiedUser.avatar.type !==
-					this.originalUser.avatar.type &&
-				newType === "initials"
-			) {
-				const colors = ["blue", "orange", "green", "purple", "teal"];
-				const color = colors[Math.floor(Math.random() * colors.length)];
-
-				this.modifiedUser.avatar.color = color;
-			}
-		}
-	},
 	methods: {
 		saveChanges() {
 			const nameChanged =
@@ -119,12 +113,12 @@ export default {
 				this.modifiedUser.location !== this.originalUser.location;
 			const bioChanged = this.modifiedUser.bio !== this.originalUser.bio;
 			const avatarChanged =
-				this.modifiedUser.avatar.type !== this.originalUser.avatar.type;
+				this.modifiedUser.avatar.type !== this.originalUser.avatar.type || this.modifiedUser.avatar.color !== this.originalUser.avatar.color;
 
 			if (nameChanged) this.changeName();
 			if (locationChanged) this.changeLocation();
 			if (bioChanged) this.changeBio();
-			if (avatarChanged) this.changeAvatarType();
+			if (avatarChanged) this.changeAvatar();
 
 			if (
 				!avatarChanged &&
@@ -238,13 +232,13 @@ export default {
 				}
 			);
 		},
-		changeAvatarType() {
+		changeAvatar() {
 			const { avatar } = this.modifiedUser;
 
 			this.$refs.saveButton.status = "disabled";
 
 			return this.socket.dispatch(
-				"users.updateAvatarType",
+				"users.updateAvatar",
 				this.userId,
 				avatar,
 				res => {
@@ -252,7 +246,7 @@ export default {
 						new Toast(res.message);
 						this.$refs.saveButton.handleFailedSave();
 					} else {
-						new Toast("Successfully updated avatar type");
+						new Toast("Successfully updated avatar");
 
 						this.updateOriginalUser({
 							property: "avatar",
@@ -292,6 +286,14 @@ export default {
 		align-items: center;
 		margin-top: 5px;
 
+		.select {
+			margin-right: 8px;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+
 		.profile-picture {
 			margin-right: 10px;
 			width: 50px;