From 06e8de800aa0657d4100c647b62816bd83c174dc Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 20 May 2026 21:53:44 +0000
Subject: [PATCH] feat: add ErrorNotification component and API error handling
 in Nuisance form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add ts/rmo/components/ErrorNotification.vue — reusable error alert
  with dismiss support, accessible markup, and configurable message
- Replace inline error div in Nuisance.vue with ErrorNotification
- Add resp.ok check in doSubmit() so HTTP error responses are caught
  and the workflow stops instead of proceeding to /submitted
- Fix typo: borwser → browser

Issue: #8
---
 ts/rmo/components/ErrorNotification.vue | 81 +++++++++++++++++++++++++
 ts/rmo/content/Nuisance.vue             | 15 +++--
 2 files changed, 92 insertions(+), 4 deletions(-)
 create mode 100644 ts/rmo/components/ErrorNotification.vue

diff --git a/ts/rmo/components/ErrorNotification.vue b/ts/rmo/components/ErrorNotification.vue
new file mode 100644
index 00000000..0ebec4e9
--- /dev/null
+++ b/ts/rmo/components/ErrorNotification.vue
@@ -0,0 +1,81 @@
+<style scoped>
+.error-notification {
+    background-color: #f8d7da;
+    border: 1px solid #f5c6cb;
+    border-radius: 0.375rem;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+.error-icon {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+}
+.error-text {
+    color: #721c24;
+    flex: 1;
+}
+.error-dismiss {
+    background: none;
+    border: none;
+    color: #721c24;
+    font-size: 1.25rem;
+    cursor: pointer;
+    padding: 0 0.25rem;
+    line-height: 1;
+    opacity: 0.7;
+}
+.error-dismiss:hover {
+    opacity: 1;
+}
+</style>
+
+<template>
+    <div v-if="visible" class="error-notification" role="alert">
+        <span class="error-icon" aria-hidden="true">✗</span>
+        <span class="error-text">{{ message }}</span>
+        <button
+            v-if="dismissible"
+            type="button"
+            class="error-dismiss"
+            aria-label="Dismiss error"
+            @click="dismiss"
+        >
+            ×
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = withDefaults(
+    defineProps<{
+        message?: string;
+        dismissible?: boolean;
+    }>(),
+    {
+        message: "Something went wrong. Your request could not be completed. Please try again.",
+        dismissible: true,
+    },
+);
+
+const emit = defineEmits<{
+    dismissed: [];
+}>();
+
+const visible = ref(true);
+
+function dismiss() {
+    visible.value = false;
+    emit("dismissed");
+}
+
+function show() {
+    visible.value = true;
+}
+
+defineExpose({ show, dismiss });
+</script>
diff --git a/ts/rmo/content/Nuisance.vue b/ts/rmo/content/Nuisance.vue
index ca283deb..4350de40 100644
--- a/ts/rmo/content/Nuisance.vue
+++ b/ts/rmo/content/Nuisance.vue
@@ -444,9 +444,11 @@ select.tall {
 							</p>
 						</div>
 						<div class="col-md-4 text-md-end mt-3 mt-md-0">
-							<div v-if="errorMessage" class="error-message">
-								✗ {{ errorMessage }}
-							</div>
+							<ErrorNotification
+								v-if="errorMessage"
+								:message="errorMessage"
+								@dismissed="errorMessage = ''"
+							/>
 							<button
 								type="submit"
 								class="btn btn-primary btn-lg"
@@ -469,6 +471,7 @@ import AddressSuggestion from "@/components/AddressSuggestion.vue";
 import ImageUpload, { Image } from "@/components/ImageUpload.vue";
 import MapLocator from "@/components/MapLocator.vue";
 import AddressAndMapLocator from "@/rmo/components/AddressAndMapLocator.vue";
+import ErrorNotification from "@/rmo/components/ErrorNotification.vue";
 import { useStoreGeocode } from "@/store/geocode";
 import { useStoreLocal } from "@/store/local";
 import { useStorePublicReport } from "@/store/publicreport";
@@ -529,8 +532,12 @@ async function doSubmit() {
 		const resp = await fetch("/api/rmo/nuisance", {
 			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);