diff --git a/ts/rmo/view/ReportSubmitted.vue b/ts/rmo/view/ReportSubmitted.vue
index 0d1fd984..1750b021 100644
--- a/ts/rmo/view/ReportSubmitted.vue
+++ b/ts/rmo/view/ReportSubmitted.vue
@@ -46,6 +46,11 @@
Please provide your contact information in case the district has
any follow-up questions.
+
@@ -279,6 +288,7 @@ import { ref, onMounted } from "vue";
import { computedAsync } from "@vueuse/core";
import { useRouter } from "vue-router";
+import ErrorNotification from "@/rmo/components/ErrorNotification.vue";
import Tooltip from "@/components/Tooltip.vue";
import { formatReportID } from "@/format";
import { useRoutes } from "@/rmo/route/use";
@@ -302,6 +312,8 @@ interface Props {
const props = defineProps();
+const errorMessage = ref("");
+const isSubmitting = ref(false);
const formData = ref({
can_sms: true,
consent: true,
@@ -326,6 +338,8 @@ const district = computedAsync(async (): Promise => {
return await storeDistrict.byURI(report.value.district);
});
const handleSubmit = async () => {
+ isSubmitting.value = true;
+ errorMessage.value = "";
try {
const response = await fetch("/api/publicreport-notification", {
method: "POST",
@@ -339,14 +353,15 @@ const handleSubmit = async () => {
});
if (response.ok) {
- // Handle success (e.g., show a success message)
router.push(routes.RegisterNotificationsComplete(props.id));
} else {
- // Handle error
- console.error("Form submission failed");
+ errorMessage.value = "Something went wrong. Your request could not be completed. Please try again.";
}
} catch (error) {
- console.error("Error submitting form:", error);
+ errorMessage.value =
+ error instanceof Error ? error.message : "Upload failed";
+ } finally {
+ isSubmitting.value = false;
}
};