Ensure movie detail responses are handled correctly. Validate given TMDb ID better when fetching details. Close movie modal if movie doesn't exist

src/app/components/modals/MovieModal.vue

@@ -37,13 +37,13 @@
 					<div class="p-4 space-y-4 md:hidden z-20" style="box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.10);" >
 						<div v-if="movie?.overview">
 							<h3 class="font-bold mb-2">Overview</h3>
-							<p>{{ movie?.overview }}</p>
+							<p>{{ movie.overview }}</p>
 						</div>
 						<div class="text-center">
-							<button v-if="movie.is_requested" class="py-2 px-4 rounded-full bg-red-500 text-white disabled:opacity-50"
-								:disabled="isRequesting" @click="request">View Request Status</button>
-							<button v-else class="py-2 px-8 rounded-full bg-red-500 text-white disabled:opacity-50"
-								:disabled="isRequesting" @click="request">{{isRequesting ? "Requesting..." : "Request"}}</button>
+							<button class="py-2 px-4 rounded-full bg-red-500 text-white disabled:opacity-50"
+								v-if="movie.is_requested">View Request Status</button>
+							<button v-else class="py-2 px-8 rounded-full shadow-sm bg-red-500 hover:bg-black transition-colors text-white disabled:opacity-50 disabled:cursor-default focus:outline-none ring-0 disabled:bg-black"
+								:disabled="isRequesting || isRequested" @click="request">{{isRequesting ? "Requesting..." : isRequested ? "Request Sent" : "Request"}}</button>
 						</div>
 					</div>
 				</div>
@@ -147,8 +147,13 @@ export default defineComponent({
 			this.rgb = <any>rgb;
 		},
 		async fetchMovieDetails() {
-			let response = <IApiMovieDetailsResponse> await (authFetch(`/api/movie/details/${this.movieId}`).then(response => response.json()));
-			this.movie = response.data;
+			let response = await (authFetch(`/api/movie/details/${this.movieId}`));
+			if (response.status != 200) {
+				this.close();
+				return;
+			}
+			let movie = <IApiMovieDetailsResponse> await response.json();
+			this.movie = movie.data;
 		},
 		async request() {
 			if (this.isRequesting || this.movie == null || this.movie.imdb_id == null || this.isRequested) {

src/server/services/WebServer/routes/api.ts

@@ -26,7 +26,7 @@ export default function register(factory: RouteRegisterFactory, app: Application
 			let query = <string>(<any>request.query)["query"];
 			let year = parseInt((<any>request.query)["year"]) || undefined;
 			let results = await app.service<MovieSearch>("Movie Search").search(query, year);
-			reply.send({ status: "success", data: results });
+			reply.send({ status: "Success", data: results });
 		});
 
 		/**
@@ -34,8 +34,13 @@ export default function register(factory: RouteRegisterFactory, app: Application
 		 */
 		factory.get("/movie/details/:id", async (request, reply) => {
 			let id = parseInt((<any>request.params)["id"]);
+			if (id.toString() !== (<any>request.params)["id"].trim()) {
+				reply.status(400);
+				reply.send({ "status": "Bad request" });
+				return;
+			}
 			let results = await app.service<MovieSearch>("Movie Search").details(id);
-			reply.send({ status: "success", data: results});
+			reply.send({ status: "Success", data: results});
 		});
 
 		// Movie Request ---------------------------------------------------------------------------
@@ -62,7 +67,7 @@ export default function register(factory: RouteRegisterFactory, app: Application
 				// Create the movie request ticket
 				let user = request.middlewareParams.auth.user;
 				let ticket = await MovieTicket.requestTmdb(user, tmdbId, movieDetails);
-				return reply.send({ status: "success", data: { ticket_id: ticket.id }});
+				return reply.send({ status: "Success", data: { ticket_id: ticket.id }});
 			}));
 
 			/**
@@ -86,7 +91,7 @@ export default function register(factory: RouteRegisterFactory, app: Application
 				// Create the movie request ticket
 				let user = request.middlewareParams.auth.user;
 				let ticket = await MovieTicket.requestImdb(user, imdbId, title);
-				return reply.send({ status: "success", data: { ticket_id: ticket.id }});
+				return reply.send({ status: "Success", data: { ticket_id: ticket.id }});
 			}));
 
 			/**
@@ -110,7 +115,7 @@ export default function register(factory: RouteRegisterFactory, app: Application
 			// 	// Create the movie request ticket
 			// 	let user =
 			// 	let ticket = await MovieTicket.requestTmdb(user, tmdbId, movieDetails);
-			// 	return reply.send({ status: "success", data: { ticket_id: ticket.id }});
+			// 	return reply.send({ status: "Success", data: { ticket_id: ticket.id }});
 			// });
 		});
 	});