Tell the user when they don't give us an address

Issue: #25

ts/rmo/components/ErrorNotification.vue

@@ -1,80 +1,80 @@
 <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;
+	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;
+	font-size: 1.25rem;
+	flex-shrink: 0;
 }
 .error-text {
-    color: #721c24;
-    flex: 1;
+	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;
+	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;
+	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>
+	<div v-if="visible" class="error-notification" role="alert">
+		<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,
-    },
+	defineProps<{
+		message?: string;
+		dismissible?: boolean;
+	}>(),
+	{
+		message:
+			"Something went wrong. Your request could not be completed. Please try again.",
+		dismissible: true,
+	},
 );
 
 const emit = defineEmits<{
-    dismissed: [];
+	dismissed: [];
 }>();
 
 const visible = ref(true);
 
 function dismiss() {
-    visible.value = false;
-    emit("dismissed");
+	visible.value = false;
+	emit("dismissed");
 }
 
 function show() {
-    visible.value = true;
+	visible.value = true;
 }
 
 defineExpose({ show, dismiss });

ts/rmo/content/Nuisance.vue

@@ -477,6 +477,7 @@ import { useStoreLocal } from "@/store/local";
 import { useStorePublicReport } from "@/store/publicreport";
 import type { Marker } from "@/types";
 import {
+	type APIError,
 	type Geocode,
 	type GeocodeSuggestion,
 	type PublicReport,
@@ -535,7 +536,16 @@ async function doSubmit() {
 			// 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.";
+			if (resp.status == 400) {
+				const data: APIError = (await resp.json()) as APIError;
+				if (data.message == "empty-address") {
+					errorMessage.value =
+						"You must provide either an address, or a location on the map, otherwise we don't have much to work with.";
+				}
+			} else {
+				errorMessage.value =
+					"Something went wrong. Your request could not be completed. Please try again.";
+			}
 			return;
 		}
 		const data: PublicReport = (await resp.json()) as PublicReport;