fix: Bypass modal prevention checks if user/song/station or access to is removed

frontend/src/App.vue

@@ -266,11 +266,7 @@ onMounted(async () => {
 	<div class="upper-container">
 		<banned-page v-if="banned" />
 		<div v-else class="upper-container">
-			<router-view
-				:key="$route.fullPath"
-				class="main-container"
-				:class="{ 'main-container-modal-active': aModalIsOpen2 }"
-			/>
+			<router-view :key="$route.fullPath" class="main-container" />
 		</div>
 		<falling-snow v-if="christmas" />
 		<modal-manager />
@@ -745,11 +741,6 @@ textarea {
 	flex-direction: column;
 	max-width: 100%;
 
-	&.main-container-modal-active {
-		height: 100% !important;
-		overflow: hidden !important;
-	}
-
 	> .container {
 		position: relative;
 		flex: 1 0 auto;

frontend/src/components/modals/Confirm.vue

@@ -6,7 +6,7 @@ const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 
 const props = defineProps({
 	modalUuid: { type: String, required: true },
-	message: { type: String || Array, required: true },
+	message: { type: [String, Array], required: true },
 	onCompleted: { type: Function, required: true }
 });
 

frontend/src/components/modals/EditSong/index.vue

@@ -907,7 +907,7 @@ watch(
 watch(
 	() => hasPermission("songs.update"),
 	value => {
-		if (!value) closeCurrentModal();
+		if (!value) closeCurrentModal(true);
 	}
 );
 
@@ -1206,6 +1206,7 @@ onMounted(async () => {
 			res => {
 				if (res.data.songId === song.value._id) {
 					songDeleted.value = true;
+					if (!bulk.value) closeCurrentModal(true);
 				}
 			},
 			{ modalUuid: props.modalUuid }

frontend/src/components/modals/EditUser.vue

@@ -219,7 +219,7 @@ const removeSessions = () => {
 watch(
 	() => hasPermission("users.get") && hasPermission("users.update"),
 	value => {
-		if (!value) closeCurrentModal();
+		if (!value) closeCurrentModal(true);
 	}
 );
 
@@ -244,7 +244,7 @@ onMounted(() => {
 					"event:user.removed",
 					res => {
 						if (res.data.userId === props.userId)
-							closeCurrentModal();
+							closeCurrentModal(true);
 					},
 					{ modalUuid: props.modalUuid }
 				);

frontend/src/components/modals/ManageStation/index.vue

@@ -119,7 +119,7 @@ const findTabOrClose = () => {
 				station.value.privacy === "public")
 		)
 	)
-		return closeCurrentModal();
+		return closeCurrentModal(true);
 	return null;
 };
 
@@ -288,7 +288,7 @@ onMounted(() => {
 							new Toast(
 								`The station you were editing was deleted.`
 							);
-							closeCurrentModal();
+							closeCurrentModal(true);
 						},
 						{ modalUuid: props.modalUuid }
 					);

frontend/src/stores/modals.ts

@@ -32,7 +32,7 @@ export const useModalsStore = defineStore("modals", {
 			this.activeModals.push(uuid);
 			return { uuid };
 		},
-		closeModal(uuid: string) {
+		closeModal(uuid: string, force = false) {
 			Object.entries(this.modals).forEach(([_uuid, modal]) => {
 				if (uuid === _uuid) {
 					if (modal.modal === "register")
@@ -49,12 +49,18 @@ export const useModalsStore = defineStore("modals", {
 							1
 						);
 						delete this.modals[uuid];
+						delete this.preventCloseCbs[uuid];
+						delete this.preventCloseUnsaved[uuid];
 					};
-					if (typeof this.preventCloseCbs[uuid] !== "undefined")
+					if (
+						!force &&
+						typeof this.preventCloseCbs[uuid] !== "undefined"
+					)
 						this.preventCloseCbs[uuid]().then(() => {
 							close();
 						});
 					else if (
+						!force &&
 						typeof this.preventCloseUnsaved[uuid] !== "undefined" &&
 						this.preventCloseUnsaved[uuid]()
 					) {
@@ -70,10 +76,10 @@ export const useModalsStore = defineStore("modals", {
 				}
 			});
 		},
-		closeCurrentModal() {
+		closeCurrentModal(force = false) {
 			const currentlyActiveModalUuid =
 				this.activeModals[this.activeModals.length - 1];
-			this.closeModal(currentlyActiveModalUuid);
+			this.closeModal(currentlyActiveModalUuid, force);
 		},
 		closeAllModals() {
 			const { socket } = useWebsocketsStore();