UI: Set 404 page when loading a non-existent message

server/ui-src/mixins/CommonMixins.js

@@ -67,28 +67,6 @@ export default {
 			return q
 		},
 
-		// Ajax error message
-		handleError: function (error) {
-			// handle error
-			if (error.response && error.response.data) {
-				// The request was made and the server responded with a status code
-				// that falls out of the range of 2xx
-				if (error.response.data.Error) {
-					alert(error.response.data.Error)
-				} else {
-					alert(error.response.data)
-				}
-			} else if (error.request) {
-				// The request was made but no response was received
-				// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-				// http.ClientRequest in node.js
-				alert('Error sending data to the server. Please try again.')
-			} else {
-				// Something happened in setting up the request that triggered an Error
-				alert(error.message)
-			}
-		},
-
 		// generic modal get/set function
 		modal: function (id) {
 			let e = document.getElementById(id)
@@ -113,13 +91,20 @@ export default {
 		 * @params string   url
 		 * @params array    array parameters Object/array
 		 * @params function callback function
+		 * @params function error callback function
 		 */
-		get: function (url, values, callback) {
+		get: function (url, values, callback, errorCallback) {
 			let self = this
 			self.loading++
 			axios.get(url, { params: values })
 				.then(callback)
-				.catch(self.handleError)
+				.catch(function (err) {
+					if (typeof errorCallback == 'function') {
+						return errorCallback(err)
+					}
+
+					self.handleError(err)
+				})
 				.then(function () {
 					// always executed
 					if (self.loading > 0) {
@@ -191,6 +176,26 @@ export default {
 				})
 		},
 
+		// Ajax error message
+		handleError: function (error) {
+			// handle error
+			if (error.response && error.response.data) {
+				// The request was made and the server responded with a status code
+				// that falls out of the range of 2xx
+				if (error.response.data.Error) {
+					alert(error.response.data.Error)
+				} else {
+					alert(error.response.data)
+				}
+			} else if (error.request) {
+				// The request was made but no response was received
+				alert('Error sending data to the server. Please try again.')
+			} else {
+				// Something happened in setting up the request that triggered an Error
+				alert(error.message)
+			}
+		},
+
 		allAttachments: function (message) {
 			let a = []
 			for (let i in message.Attachments) {

server/ui-src/views/MessageView.vue

@@ -26,6 +26,7 @@ export default {
 			message: false,
 			prevLink: false,
 			nextLink: false,
+			errorMessage: false,
 		}
 	},
 
@@ -45,6 +46,8 @@ export default {
 			this.message = false
 			let uri = self.resolve('/api/v1/message/' + this.$route.params.id)
 			self.get(uri, false, function (response) {
+				self.errorMessage = false
+
 				let d = response.data
 
 				if (self.wasUnread(d.ID)) {
@@ -94,6 +97,22 @@ export default {
 				self.message = d
 
 				self.detectPrevNext()
+			},
+				function (error) {
+					self.errorMessage = true
+					if (error.response && error.response.data) {
+						if (error.response.data.Error) {
+							self.errorMessage = error.response.data.Error
+						} else {
+							self.errorMessage = error.response.data
+						}
+					} else if (error.request) {
+						// The request was made but no response was received
+						self.errorMessage = 'Error sending data to the server. Please refresh the page.'
+					} else {
+						// Something happened in setting up the request that triggered an Error
+						self.errorMessage = error.message
+					}
 				})
 		},
 
@@ -194,7 +213,7 @@ export default {
 				<span class="ms-2 d-none d-sm-inline">Mailpit</span>
 			</RouterLink>
 		</div>
-		<div class="col col-md-4k col-lg-5 col-xl-6">
+		<div class="col col-md-4k col-lg-5 col-xl-6" v-if="!errorMessage">
 			<button @click="goBack()" class="btn btn-outline-light me-3 me-sm-4 d-md-none" title="Return to messages">
 				<i class="bi bi-arrow-return-left"></i>
 			</button>
@@ -209,8 +228,7 @@ export default {
 				<i class="bi bi-trash-fill"></i> <span class="d-none d-md-inline">Delete</span>
 			</button>
 		</div>
-		<div class="col-auto col-lg-4 col-xl-4 text-end">
+		<div class="col-auto col-lg-4 col-xl-4 text-end" v-if="!errorMessage">
-
 			<div class="dropdown d-inline-block" id="DownloadBtn">
 				<button type="button" class="btn btn-outline-light dropdown-toggle" data-bs-toggle="dropdown"
 					aria-expanded="false">
@@ -286,13 +304,13 @@ export default {
 					<i class="bi bi-arrow-return-left me-1"></i>
 					<span class="ms-1">Return</span>
 					<span class="badge rounded-pill ms-1 float-end text-bg-secondary" title="Unread messages"
-						v-if="mailbox.unread">
+						v-if="mailbox.unread && !errorMessage">
 						{{ formatNumber(mailbox.unread) }}
 					</span>
 				</button>
 			</div>
 
-			<div class="card mt-4">
+			<div class="card mt-4" v-if="!errorMessage">
 				<div class="card-body text-body-secondary small">
 					<p class="card-text">
 						<b>Message date:</b><br>
@@ -311,7 +329,12 @@ export default {
 
 		<div class="col-xl-10 col-md-9 mh-100 ps-0 ps-md-2 pe-0">
 			<div class="mh-100" style="overflow-y: auto;" id="message-page">
-				<Message v-if="message" :key="message.ID" :message="message" />
+				<template v-if="errorMessage">
+					<h3 class="text-center my-3">
+						{{ errorMessage }}
+					</h3>
+				</template>
+				<Message v-else-if="message" :key="message.ID" :message="message" />
 			</div>
 		</div>
 	</div>