refactor: Converted auth and reports api calls to composables

frontend/src/api/admin/index.ts

@@ -1,7 +0,0 @@
-import reports from "./reports";
-
-// when Pinia needs to interact with websockets
-
-export default {
-	reports
-};

frontend/src/api/auth.ts

@@ -1,98 +0,0 @@
-import Toast from "toasters";
-import ws from "@/ws";
-
-// when Pinia needs to interact with websockets
-
-export default {
-	register(user) {
-		return new Promise((resolve, reject) => {
-			const { username, email, password, recaptchaToken } = user;
-
-			ws.socket.dispatch(
-				"users.register",
-				username,
-				email,
-				password,
-				recaptchaToken,
-				res => {
-					if (res.status === "success") {
-						if (res.SID) {
-							return lofig.get("cookie").then(cookie => {
-								const date = new Date();
-								date.setTime(
-									new Date().getTime() +
-										2 * 365 * 24 * 60 * 60 * 1000
-								);
-
-								const secure = cookie.secure
-									? "secure=true; "
-									: "";
-
-								let domain = "";
-								if (cookie.domain !== "localhost")
-									domain = ` domain=${cookie.domain};`;
-
-								document.cookie = `${cookie.SIDname}=${
-									res.SID
-								}; expires=${date.toUTCString()}; ${domain}${secure}path=/`;
-
-								return resolve({
-									status: "success",
-									message: "Account registered!"
-								});
-							});
-						}
-
-						return reject(new Error("You must login"));
-					}
-
-					return reject(new Error(res.message));
-				}
-			);
-		});
-	},
-	login(user) {
-		return new Promise((resolve, reject) => {
-			const { email, password } = user;
-
-			ws.socket.dispatch("users.login", email, password, res => {
-				if (res.status === "success") {
-					return lofig.get("cookie").then(cookie => {
-						const date = new Date();
-						date.setTime(
-							new Date().getTime() + 2 * 365 * 24 * 60 * 60 * 1000
-						);
-
-						const secure = cookie.secure ? "secure=true; " : "";
-
-						let domain = "";
-						if (cookie.domain !== "localhost")
-							domain = ` domain=${cookie.domain};`;
-
-						document.cookie = `${cookie.SIDname}=${
-							res.data.SID
-						}; expires=${date.toUTCString()}; ${domain}${secure}path=/`;
-
-						return resolve({ status: "success" });
-					});
-				}
-
-				return reject(new Error(res.message));
-			});
-		});
-	},
-	logout() {
-		return new Promise((resolve, reject) => {
-			ws.socket.dispatch("users.logout", res => {
-				if (res.status === "success") {
-					return lofig.get("cookie").then(cookie => {
-						document.cookie = `${cookie.SIDname}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
-						return window.location.reload();
-					});
-				}
-				new Toast(res.message);
-				return reject(new Error(res.message));
-			});
-		});
-	}
-};

frontend/src/components/modals/ViewReport.vue

@@ -5,8 +5,8 @@ import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useModalsStore } from "@/stores/modals";
 import { useViewReportStore } from "@/stores/viewReport";
+import { useReports } from "@/composables/useReports";
 import ws from "@/ws";
-import admin from "@/api/admin/index";
 
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
@@ -26,6 +26,8 @@ const { reportId } = storeToRefs(viewReportStore);
 
 const { openModal, closeCurrentModal } = useModalsStore();
 
+const { resolveReport, removeReport } = useReports();
+
 const icons = ref({
 	duration: "timer",
 	video: "tv",
@@ -89,16 +91,14 @@ const init = () => {
 };
 
 const resolve = value =>
-	admin.reports
-		.resolve({ reportId: reportId.value, value })
+	resolveReport({ reportId: reportId.value, value })
 		.then(res => {
 			if (res.status !== "success") new Toast(res.message);
 		})
 		.catch(err => new Toast(err.message));
 
 const remove = () =>
-	admin.reports
-		.remove(reportId.value)
+	removeReport(reportId.value)
 		.then(res => {
 			if (res.status === "success") closeCurrentModal();
 		})

frontend/src/api/admin/reports.ts → frontend/src/composables/useReports.ts

@@ -1,8 +1,8 @@
 import Toast from "toasters";
 import ws from "@/ws";
 
-export default {
-	resolve({ reportId, value }) {
+export const useReports = () => {
+	const resolveReport = ({ reportId, value }) => {
 		return new Promise((resolve, reject) => {
 			ws.socket.dispatch("reports.resolve", reportId, value, res => {
 				new Toast(res.message);
@@ -11,8 +11,9 @@ export default {
 				return reject(new Error(res.message));
 			});
 		});
-	},
-	remove(reportId) {
+	};
+
+	const removeReport = reportId => {
 		return new Promise((resolve, reject) => {
 			ws.socket.dispatch("reports.remove", reportId, res => {
 				new Toast(res.message);
@@ -21,5 +22,10 @@ export default {
 				return reject(new Error(res.message));
 			});
 		});
-	}
+	};
+
+	return {
+		resolveReport,
+		removeReport
+	};
 };

frontend/src/pages/Admin/Reports.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref } from "vue";
 import Toast from "toasters";
-import admin from "@/api/admin/index";
 import { useModalsStore } from "@/stores/modals";
+import { useReports } from "@/composables/useReports";
 
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
@@ -145,9 +145,10 @@ const events = ref({
 
 const { openModal } = useModalsStore();
 
+const { resolveReport } = useReports();
+
 const resolve = (reportId, value) =>
-	admin.reports
-		.resolve({ reportId, value })
+	resolveReport({ reportId, value })
 		.then(res => {
 			if (res.status !== "success") new Toast(res.message);
 		})

frontend/src/stores/modals.ts

@@ -125,7 +125,8 @@ export const useModalsStore = defineStore("modals", {
 				default:
 					break;
 			}
-			if (typeof store.init === "function" && data) store.init(data);
+			if (store && typeof store.init === "function" && data)
+				store.init(data);
 
 			this.activeModals.push(uuid);
 

frontend/src/stores/userAuth.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
+import Toast from "toasters";
 import validation from "@/validation";
 import ws from "@/ws";
-import auth from "@/api/auth";
 
 export const useUserAuthStore = defineStore("userAuth", {
 	state: () => ({
@@ -20,12 +20,12 @@ export const useUserAuthStore = defineStore("userAuth", {
 	actions: {
 		register(user) {
 			return new Promise((resolve, reject) => {
-				const { username, email, password } = user;
+				const { username, email, password, recaptchaToken } = user;
 
 				if (!email || !username || !password)
-					reject(new Error("Please fill in all fields"));
+					return reject(new Error("Please fill in all fields"));
 				else if (!validation.isLength(email, 3, 254))
-					reject(
+					return reject(
 						new Error(
 							"Email must have between 3 and 254 characters."
 						)
@@ -34,67 +34,135 @@ export const useUserAuthStore = defineStore("userAuth", {
 					email.indexOf("@") !== email.lastIndexOf("@") ||
 					!validation.regex.emailSimple.test(email)
 				)
-					reject(new Error("Invalid email format."));
+					return reject(new Error("Invalid email format."));
 				else if (!validation.isLength(username, 2, 32))
-					reject(
+					return reject(
 						new Error(
 							"Username must have between 2 and 32 characters."
 						)
 					);
 				else if (!validation.regex.azAZ09_.test(username))
-					reject(
+					return reject(
 						new Error(
 							"Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _."
 						)
 					);
 				else if (username.replaceAll(/[_]/g, "").length === 0)
-					reject(
+					return reject(
 						new Error(
 							"Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _, and there has to be at least one letter or number."
 						)
 					);
 				else if (!validation.isLength(password, 6, 200))
-					reject(
+					return reject(
 						new Error(
 							"Password must have between 6 and 200 characters."
 						)
 					);
 				else if (!validation.regex.password.test(password))
-					reject(
+					return reject(
 						new Error(
 							"Invalid password format. Must have one lowercase letter, one uppercase letter, one number and one special character."
 						)
 					);
 				else
-					auth.register(user)
-						.then(res => resolve(res))
-						.catch(err => reject(new Error(err.message)));
+					return ws.socket.dispatch(
+						"users.register",
+						username,
+						email,
+						password,
+						recaptchaToken,
+						res => {
+							if (res.status === "success") {
+								if (res.SID) {
+									return lofig.get("cookie").then(cookie => {
+										const date = new Date();
+										date.setTime(
+											new Date().getTime() +
+												2 * 365 * 24 * 60 * 60 * 1000
+										);
+
+										const secure = cookie.secure
+											? "secure=true; "
+											: "";
+
+										let domain = "";
+										if (cookie.domain !== "localhost")
+											domain = ` domain=${cookie.domain};`;
+
+										document.cookie = `${cookie.SIDname}=${
+											res.SID
+										}; expires=${date.toUTCString()}; ${domain}${secure}path=/`;
+
+										return resolve({
+											status: "success",
+											message: "Account registered!"
+										});
+									});
+								}
+
+								return reject(new Error("You must login"));
+							}
+
+							return reject(new Error(res.message));
+						}
+					);
 			});
 		},
 		login(user) {
 			return new Promise((resolve, reject) => {
-				auth.login(user)
-					.then(() => {
-						lofig.get("cookie.SIDname").then(sid => {
+				const { email, password } = user;
+
+				ws.socket.dispatch("users.login", email, password, res => {
+					if (res.status === "success") {
+						return lofig.get("cookie").then(cookie => {
+							const date = new Date();
+							date.setTime(
+								new Date().getTime() +
+									2 * 365 * 24 * 60 * 60 * 1000
+							);
+
+							const secure = cookie.secure ? "secure=true; " : "";
+
+							let domain = "";
+							if (cookie.domain !== "localhost")
+								domain = ` domain=${cookie.domain};`;
+
+							document.cookie = `${cookie.SIDname}=${
+								res.data.SID
+							}; expires=${date.toUTCString()}; ${domain}${secure}path=/`;
+
 							const bc = new BroadcastChannel(
-								`${sid}.user_login`
+								`${cookie.SIDname}.user_login`
 							);
 							bc.postMessage(true);
 							bc.close();
+
+							return resolve({
+								status: "success",
+								message: "Logged in!"
+							});
 						});
-						resolve({
-							status: "success",
-							message: "Logged in!"
-						});
-					})
-					.catch(err => reject(new Error(err.message)));
+					}
+
+					return reject(new Error(res.message));
+				});
 			});
 		},
 		logout() {
-			return new Promise<void>((resolve, reject) => {
-				auth.logout()
-					.then(() => resolve())
-					.catch(() => reject());
+			return new Promise((resolve, reject) => {
+				ws.socket.dispatch("users.logout", res => {
+					if (res.status === "success") {
+						return resolve(
+							lofig.get("cookie").then(cookie => {
+								document.cookie = `${cookie.SIDname}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+								return window.location.reload();
+							})
+						);
+					}
+					new Toast(res.message);
+					return reject(new Error(res.message));
+				});
 			});
 		},
 		getBasicUser(userId) {