Made edit user modal independent

backend/logic/actions/users.js

@@ -712,6 +712,60 @@ export default {
 			});
 	},
 
+	/**
+	 * Gets a user from a userId
+	 *
+	 * @param {object} session - the session object automatically added by socket.io
+	 * @param {string} userId - the userId of the person we are trying to get the username from
+	 * @param {Function} cb - gets called with the result
+	 */
+	getUserFromId: isAdminRequired(async function getUserFromId(session, userId, cb) {
+		const userModel = await DBModule.runJob("GET_MODEL", { modelName: "user" }, this);
+		userModel
+			.findById(userId)
+			.then(user => {
+				if (user) {
+					this.log("SUCCESS", "GET_USER_FROM_ID", `Found user for userId "${userId}".`);
+
+					return cb({
+						status: "success",
+						data: {
+							_id: user._id,
+							username: user.username,
+							role: user.role,
+							liked: user.liked,
+							disliked: user.disliked,
+							songsRequested: user.statistics.songsRequested,
+							email: {
+								address: user.email.address,
+								verified: user.email.verified
+							},
+							hasPassword: !!user.services.password,
+							services: { github: user.services.github }
+						}
+					});
+				}
+
+				this.log(
+					"ERROR",
+					"GET_USER_FROM_ID",
+					`Getting the user from userId "${userId}" failed. User not found.`
+				);
+
+				return cb({
+					status: "failure",
+					message: "Couldn't find the user."
+				});
+			})
+			.catch(async err => {
+				if (err && err !== true) {
+					err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
+					this.log("ERROR", "GET_USER_FROM_ID", `Getting the user from userId "${userId}" failed. "${err}"`);
+					cb({ status: "failure", message: err });
+				}
+			});
+	}),
+
 	// TODO Fix security issues
 	/**
 	 * Gets user info from session

frontend/src/pages/Admin/EditUser.vue

@@ -1,10 +1,10 @@
 <template>
 	<div>
 		<modal title="Edit User">
-			<div slot="body">
+			<div slot="body" v-if="user && user._id">
 				<p class="control has-addons">
 					<input
-						v-model="editing.username"
+						v-model="user.username"
 						class="input is-expanded"
 						type="text"
 						placeholder="Username"
@@ -16,7 +16,7 @@
 				</p>
 				<p class="control has-addons">
 					<input
-						v-model="editing.email.address"
+						v-model="user.email.address"
 						class="input is-expanded"
 						type="text"
 						placeholder="Email Address"
@@ -28,7 +28,7 @@
 				</p>
 				<p class="control has-addons">
 					<span class="select">
-						<select v-model="editing.role">
+						<select v-model="user.role">
 							<option>default</option>
 							<option>admin</option>
 						</select>
@@ -75,7 +75,7 @@
 					class="button is-danger"
 					@click="
 						closeModal({
-							sector: 'admin',
+							sector: this.sector,
 							modal: 'editUser'
 						})
 					"
@@ -97,6 +97,10 @@ import validation from "../../validation";
 
 export default {
 	components: { Modal },
+	props: {
+		userId: { type: String, default: "" },
+		sector: { type: String, default: "admin" }
+	},
 	data() {
 		return {
 			ban: {
@@ -105,22 +109,27 @@ export default {
 		};
 	},
 	computed: {
-		...mapState("admin/users", {
-			editing: state => state.editing
-		}),
-		...mapState({
-			userId: state => state.user.auth.userId
+		...mapState("editUserModal", {
+			user: state => state.user
 		})
 	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
+
+			this.socket.emit(`users.getUserFromId`, this.userId, res => {
+				if (res.status === "success") {
+					const user = res.data;
+					this.editUser(user);
+				}
+			});
+
 			return socket;
 		});
 	},
 	methods: {
 		updateUsername() {
-			const { username } = this.editing;
+			const { username } = this.user;
 			if (!validation.isLength(username, 2, 32))
 				return new Toast({
 					content: "Username must have between 2 and 32 characters.",
@@ -135,7 +144,7 @@ export default {
 
 			return this.socket.emit(
 				`users.updateUsername`,
-				this.editing._id,
+				this.user._id,
 				username,
 				res => {
 					new Toast({ content: res.message, timeout: 4000 });
@@ -143,7 +152,7 @@ export default {
 			);
 		},
 		updateEmail() {
-			const email = this.editing.email.address;
+			const email = this.user.email.address;
 			if (!validation.isLength(email, 3, 254))
 				return new Toast({
 					content: "Email must have between 3 and 254 characters.",
@@ -161,7 +170,7 @@ export default {
 
 			return this.socket.emit(
 				`users.updateEmail`,
-				this.editing._id,
+				this.user._id,
 				email,
 				res => {
 					new Toast({ content: res.message, timeout: 4000 });
@@ -171,16 +180,10 @@ export default {
 		updateRole() {
 			this.socket.emit(
 				`users.updateRole`,
-				this.editing._id,
-				this.editing.role,
+				this.user._id,
+				this.user.role,
 				res => {
 					new Toast({ content: res.message, timeout: 4000 });
-					if (
-						res.status === "success" &&
-						this.editing.role === "default" &&
-						this.editing._id === this.userId
-					)
-						window.location.reload();
 				}
 			);
 		},
@@ -200,7 +203,7 @@ export default {
 
 			return this.socket.emit(
 				`users.banUserById`,
-				this.editing._id,
+				this.user._id,
 				this.ban.reason,
 				this.ban.expiresAt,
 				res => {
@@ -209,10 +212,11 @@ export default {
 			);
 		},
 		removeSessions() {
-			this.socket.emit(`users.removeSessions`, this.editing._id, res => {
+			this.socket.emit(`users.removeSessions`, this.user._id, res => {
 				new Toast({ content: res.message, timeout: 4000 });
 			});
 		},
+		...mapActions("editUserModal", ["editUser"]),
 		...mapActions("modals", ["closeModal"])
 	}
 };

frontend/src/pages/Admin/tabs/Users.vue

@@ -13,8 +13,8 @@
 						<td>Role</td>
 						<td>Email Address</td>
 						<td>Email Verified</td>
-						<td>Likes</td>
-						<td>Dislikes</td>
+						<!-- <td>Likes</td>
+						<td>Dislikes</td> -->
 						<td>Songs Requested</td>
 						<td>Options</td>
 					</tr>
@@ -42,8 +42,8 @@
 						<td>{{ user.role }}</td>
 						<td>{{ user.email.address }}</td>
 						<td>{{ user.email.verified }}</td>
-						<td>{{ user.liked.length }}</td>
-						<td>{{ user.disliked.length }}</td>
+						<!-- <td>{{ user.liked.length }}</td>
+						<td>{{ user.disliked.length }}</td> -->
 						<td>{{ user.songsRequested }}</td>
 						<td>
 							<button
@@ -57,7 +57,11 @@
 				</tbody>
 			</table>
 		</div>
-		<edit-user v-if="modals.editUser" />
+		<edit-user
+			v-if="modals.editUser"
+			:user-id="editingUserId"
+			sector="admin"
+		/>
 	</div>
 </template>
 
@@ -71,6 +75,7 @@ export default {
 	components: { EditUser },
 	data() {
 		return {
+			editingUserId: "",
 			users: []
 		};
 	},
@@ -90,7 +95,7 @@ export default {
 	},
 	methods: {
 		edit(user) {
-			this.editUser(user);
+			this.editingUserId = user._id;
 			this.openModal({ sector: "admin", modal: "editUser" });
 		},
 		init() {
@@ -108,7 +113,6 @@ export default {
 			});
 			this.socket.emit("apis.joinAdminRoom", "users", () => {});
 		},
-		...mapActions("admin/users", ["editUser"]),
 		...mapActions("modals", ["openModal"])
 	}
 };

frontend/src/store/index.js

@@ -8,6 +8,7 @@ import station from "./modules/station";
 import admin from "./modules/admin";
 import editSongModal from "./modules/editSongModal";
 import editStationModal from "./modules/editStationModal";
+import editUserModal from "./modules/editUserModal";
 
 Vue.use(Vuex);
 
@@ -19,7 +20,8 @@ export default new Vuex.Store({
 		station,
 		admin,
 		editSongModal,
-		editStationModal
+		editStationModal,
+		editUserModal
 	},
 	strict: false
 });

frontend/src/store/modules/admin.js

@@ -41,14 +41,10 @@ const modules = {
 	stations: {
 		namespaced: true,
 		state: {
-			stations: [],
-			station: {},
-			editing: {}
+			stations: []
 		},
 		getters: {},
 		actions: {
-			editStation: ({ commit }, station) =>
-				commit("editStation", station),
 			loadStations: ({ commit }, stations) =>
 				commit("loadStations", stations),
 			stationRemoved: ({ commit }, stationId) =>
@@ -57,10 +53,6 @@ const modules = {
 				commit("stationAdded", station)
 		},
 		mutations: {
-			editStation(state, station) {
-				state.station = station;
-				state.editing = JSON.parse(JSON.stringify(station));
-			},
 			loadStations(state, stations) {
 				state.stations = stations;
 			},
@@ -120,18 +112,10 @@ const modules = {
 	},
 	users: {
 		namespaced: true,
-		state: {
-			editing: {}
-		},
+		state: {},
 		getters: {},
-		actions: {
-			editUser: ({ commit }, user) => commit("editUser", user)
-		},
-		mutations: {
-			editUser(state, user) {
-				state.editing = user;
-			}
-		}
+		actions: {},
+		mutations: {}
 	},
 	news: {
 		namespaced: true,

frontend/src/store/modules/editUserModal.js

@@ -0,0 +1,17 @@
+/* eslint no-param-reassign: 0 */
+
+export default {
+	namespaced: true,
+	state: {
+		user: {}
+	},
+	getters: {},
+	actions: {
+		editUser: ({ commit }, user) => commit("editUser", user)
+	},
+	mutations: {
+		editUser(state, user) {
+			state.user = user;
+		}
+	}
+};