feat: add ErrorNotification and API error handling to Water form

- 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

@@ -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);