From 7a0a3c887be38c537bb109091e39a944be05302d Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 20 May 2026 23:08:43 +0000
Subject: [PATCH] feat: add ErrorNotification and API error handling to Water
 form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add ErrorNotification component to Water.vue submit section
- Add resp.ok check in doSubmit() to catch HTTP error responses
  and prevent workflow from proceeding on failure
- Add :disabled binding to submit button (was missing, unlike Nuisance)
- Fix typo: borwser → browser

Issue: #8
---
 ts/rmo/content/Water.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/ts/rmo/content/Water.vue b/ts/rmo/content/Water.vue
index 6d8eff51..dfc299d0 100644
--- a/ts/rmo/content/Water.vue
+++ b/ts/rmo/content/Water.vue
@@ -492,7 +492,16 @@ select.tall {
 							</p>
 						</div>
 						<div class="col-md-4 text-md-end mt-3 mt-md-0">
-							<button type="submit" class="btn btn-primary btn-lg">
+							<ErrorNotification
+								v-if="errorMessage"
+								:message="errorMessage"
+								@dismissed="errorMessage = ''"
+							/>
+							<button
+								type="submit"
+								class="btn btn-primary btn-lg"
+								:disabled="isSubmitting"
+							>
 								Submit Report
 							</button>
 						</div>
@@ -584,6 +593,7 @@ import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import ImageUpload, { Image } from "@/components/ImageUpload.vue";
 import AddressAndMapLocator from "@/rmo/components/AddressAndMapLocator.vue";
+import ErrorNotification from "@/rmo/components/ErrorNotification.vue";
 import Tooltip from "@/components/Tooltip.vue";
 import { useStoreGeocode } from "@/store/geocode";
 import { useStoreLocal } from "@/store/local";
@@ -658,8 +668,12 @@ async function doSubmit() {
 		const resp = await fetch("/api/rmo/water", {
 			method: "POST",
 			body: formData,
-			// Don't set Content-Type, the borwser should do it
+			// Don't set Content-Type, the browser should do it
 		});
+		if (!resp.ok) {
+			errorMessage.value = "Something went wrong. Your request could not be completed. Please try again.";
+			return;
+		}
 		const data: PublicReport = (await resp.json()) as PublicReport;
 		storePublicReport.add(data);
 		router.push("/submitted/" + data.public_id);