From 7a52c109d9e7815101ff7aacc394c09a750c6063 Mon Sep 17 00:00:00 2001
From: Rudo Kemper <rtakemper@gmail.com>
Date: Wed, 3 Sep 2025 22:30:41 -0400
Subject: [PATCH 1/2] fix: dont allow map request submission for wrong map
 style + token combo

---
 components/GenerateMap.vue            | 57 +++++++++++++++++++++
 components/GenerateMap/MapCanvas.vue  | 22 +++++++-
 components/GenerateMap/MapSidebar.vue | 72 +++++++++++++++++++++++++--
 i18n/locales/en.json                  | 14 ++++--
 i18n/locales/es.json                  | 14 ++++--
 i18n/locales/nl.json                  | 14 ++++--
 i18n/locales/pt.json                  | 14 ++++--
 7 files changed, 183 insertions(+), 24 deletions(-)

diff --git a/components/GenerateMap.vue b/components/GenerateMap.vue
index 5fd8a40..8606104 100644
--- a/components/GenerateMap.vue
+++ b/components/GenerateMap.vue
@@ -32,6 +32,8 @@ const selectedLongitude = ref(props.mapLongitude);
 const selectedStyle = ref(props.availableMapStyles[0].url);
 const selectedZoom = ref(props.mapZoom);
 const showModal = ref(false);
+const customMapboxStyleRendered = ref(false);
+const mapLoadError = ref(false);
 
 const emit = defineEmits(["updateMapParams", "handleMapRequest"]);
 
@@ -63,6 +65,14 @@ const updateMapParams = (updateObj: UpdateMapParams) => {
         selectedStyle.value = value as string;
         osmEnabled.value = false;
         emit("updateMapParams", { param: "OsmEnabled", value: false });
+        // Reset custom mapbox style rendered state if switching to non-custom style
+        if (
+          typeof value === "string" &&
+          (!value.includes("mapbox://styles/") ||
+            value.includes("mapbox://styles/mapbox/"))
+        ) {
+          customMapboxStyleRendered.value = false;
+        }
         break;
       case "Zoom":
         selectedZoom.value = value as number;
@@ -71,6 +81,27 @@ const updateMapParams = (updateObj: UpdateMapParams) => {
   }
 };
 
+/** Handles map style loaded event. */
+const handleMapStyleLoaded = (data: {
+  style: string;
+  success: boolean;
+  error?: string;
+}) => {
+  // Check if this is a custom mapbox style
+  if (
+    data.style.includes("mapbox://styles/") &&
+    !data.style.includes("mapbox://styles/mapbox/")
+  ) {
+    if (data.success) {
+      customMapboxStyleRendered.value = true;
+      mapLoadError.value = false;
+    } else {
+      customMapboxStyleRendered.value = false;
+      mapLoadError.value = true;
+    }
+  }
+};
+
 /** Handles form submission and navigates to the home page. */
 const handleFormSubmit = (formData: FormData) => {
   emit("handleMapRequest", formData);
@@ -79,6 +110,27 @@ const handleFormSubmit = (formData: FormData) => {
     router.push("/");
   }, 3000);
 };
+
+/** Resets the map load error state. */
+const resetMapLoadError = () => {
+  mapLoadError.value = false;
+};
+
+/** Resets the map rendered state. */
+const resetMapRendered = () => {
+  customMapboxStyleRendered.value = false;
+};
+
+// Watch for access token changes to reset error state
+watch(
+  () => localMapboxAccessToken.value,
+  (newVal) => {
+    // Reset error state when access token changes
+    if (newVal !== props.mapboxAccessToken) {
+      mapLoadError.value = false;
+    }
+  },
+);
 </script>
 
 <template>
@@ -89,8 +141,12 @@ const handleFormSubmit = (formData: FormData) => {
       :map-style="selectedStyle"
       :mapbox-access-token="localMapboxAccessToken"
       :osm-enabled="osmEnabled"
+      :custom-mapbox-style-rendered="customMapboxStyleRendered"
+      :map-load-error="mapLoadError"
       @form-submitted="handleFormSubmit"
       @update-map-params="updateMapParams"
+      @reset-map-load-error="resetMapLoadError"
+      @reset-map-rendered="resetMapRendered"
     />
     <MapNavigation
       :map-latitude="selectedLatitude"
@@ -106,6 +162,7 @@ const handleFormSubmit = (formData: FormData) => {
       :map-zoom="selectedZoom"
       :osm-enabled="osmEnabled"
       @update-map-params="updateMapParams"
+      @map-style-loaded="handleMapStyleLoaded"
     />
     <div v-if="showModal" class="overlay"></div>
     <div v-if="showModal" class="modal">
diff --git a/components/GenerateMap/MapCanvas.vue b/components/GenerateMap/MapCanvas.vue
index 631661e..181387b 100644
--- a/components/GenerateMap/MapCanvas.vue
+++ b/components/GenerateMap/MapCanvas.vue
@@ -47,7 +47,7 @@ const selectedLatitude = ref(props.mapLatitude);
 const selectedLongitude = ref(props.mapLongitude);
 const selectedZoom = ref(props.mapZoom);
 
-const emit = defineEmits(["updateMapParams"]);
+const emit = defineEmits(["updateMapParams", "mapStyleLoaded"]);
 
 onMounted(() => {
   if (!props.mapboxAccessToken) {
@@ -231,6 +231,17 @@ const setMapStyle = (newVal: string) => {
   if (map.value && props.mapboxAccessToken) {
     mapboxgl.accessToken = props.mapboxAccessToken;
     map.value.setStyle(newVal);
+
+    // Listen for the style to load and emit the event
+    map.value.once("styledata", () => {
+      emit("mapStyleLoaded", { style: newVal, success: true });
+    });
+
+    // Listen for style loading errors
+    map.value.once("error", (e) => {
+      console.error("Map style loading error:", e);
+      emit("mapStyleLoaded", { style: newVal, success: false, error: e.error });
+    });
   }
 };
 
@@ -256,6 +267,15 @@ watch(
     if (newVal) setMapStyle(newVal);
   },
 );
+watch(
+  () => props.mapboxAccessToken,
+  (newVal?: string) => {
+    if (newVal && map.value && props.mapStyle) {
+      // Reload the current style with the new token
+      setMapStyle(props.mapStyle);
+    }
+  },
+);
 watch(
   () => props.mapZoom,
   (newVal) => {
diff --git a/components/GenerateMap/MapSidebar.vue b/components/GenerateMap/MapSidebar.vue
index 3f14dc9..ae61178 100644
--- a/components/GenerateMap/MapSidebar.vue
+++ b/components/GenerateMap/MapSidebar.vue
@@ -18,6 +18,8 @@ const props = defineProps<{
   mapboxAccessToken: string;
   mapBounds: string;
   mapStyle: string;
+  customMapboxStyleRendered: boolean;
+  mapLoadError: boolean;
 }>();
 
 const { t } = useI18n();
@@ -30,6 +32,7 @@ const customMapboxStyleUrl = ref("");
 const localMapboxAccessToken = ref(props.mapboxAccessToken);
 const localMapStyle = ref(props.mapStyle);
 const mapStyles = ref<MapStyleWithValue[]>([]);
+const hasClickedRender = ref(false);
 const form = reactive<FormData>({
   title: "",
   description: null,
@@ -60,6 +63,13 @@ const fetchMapStyles = () => {
 /** Renders a custom Mapbox style if the URL is valid. */
 const renderCustomStyle = () => {
   if (/^mapbox:\/\/styles\/[^/]+\/[^/]+$/.test(customMapboxStyleUrl.value)) {
+    // Reset ALL validation states on each render attempt
+    hasClickedRender.value = true;
+
+    // Reset error state and rendered state to force fresh validation
+    emit("resetMapLoadError");
+    emit("resetMapRendered");
+
     form.selectedStyle = customMapboxStyleUrl.value;
     form.selectedStyleKey = "mapbox-custom";
     emit("updateMapParams", {
@@ -115,7 +125,25 @@ const isValidMapboxStyleAndToken = computed(() => {
   return isValidStyle && isValidToken;
 });
 
-const emit = defineEmits(["updateMapParams", "formSubmitted"]);
+/** Computes whether the form can be submitted for mapbox-custom style. */
+const canSubmitMapboxCustom = computed(() => {
+  if (selectedStyleKey.value !== "mapbox-custom") {
+    return true;
+  }
+  return hasClickedRender.value && props.customMapboxStyleRendered;
+});
+
+/** Computes whether the submit button should be disabled. */
+const isSubmitDisabled = computed(() => {
+  return estimatedTiles.value > 275000 || !canSubmitMapboxCustom.value;
+});
+
+const emit = defineEmits([
+  "updateMapParams",
+  "formSubmitted",
+  "resetMapLoadError",
+  "resetMapRendered",
+]);
 
 /** Toggles the OpenStreetMap layer. */
 const toggleOSM = () => {
@@ -203,6 +231,16 @@ watch(
     }
   },
 );
+
+watch(
+  () => selectedStyleKey.value,
+  (newVal) => {
+    // Reset validation state when switching away from mapbox-custom
+    if (newVal !== "mapbox-custom") {
+      hasClickedRender.value = false;
+    }
+  },
+);
 </script>
 
 <template>
@@ -276,6 +314,34 @@ watch(
         >
           {{ t("render") }}
         </button>
+
+        <div v-if="selectedStyleKey === 'mapbox-custom'" class="mt-2">
+          <div v-if="!hasClickedRender" class="text-yellow-600 text-sm">
+            {{ t("clickRenderToValidate") }}
+          </div>
+          <div
+            v-else-if="
+              hasClickedRender &&
+              !props.customMapboxStyleRendered &&
+              !props.mapLoadError
+            "
+            class="text-blue-600 text-sm"
+          >
+            {{ t("renderingMap") }}
+          </div>
+          <div
+            v-else-if="hasClickedRender && props.mapLoadError"
+            class="text-red-600 text-sm"
+          >
+            {{ t("mapLoadError") }}
+          </div>
+          <div
+            v-else-if="hasClickedRender && props.customMapboxStyleRendered"
+            class="text-green-600 text-sm"
+          >
+            {{ t("mapRenderedSuccessfully") }}
+          </div>
+        </div>
       </div>
 
       <div
@@ -401,9 +467,9 @@ watch(
 
       <button
         type="submit"
-        :disabled="estimatedTiles > 275000"
+        :disabled="isSubmitDisabled"
         class="submit-button"
-        :class="{ 'submit-button-disabled': estimatedTiles > 275000 }"
+        :class="{ 'submit-button-disabled': isSubmitDisabled }"
       >
         {{ t("submitRequest") }}
       </button>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 5192dd5..449c5ff 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,17 +1,18 @@
 {
-  "authMessage": "Please sign up or log in to access this application",
   "auth0LoginError": "Error logging in with Auth0",
+  "authMessage": "Please sign up or log in to access this application",
   "availableOfflineMaps": "Available Offline Maps",
   "buttonThenDraw": "button on the top right of the screen, and draw an area on the map",
   "centerLat": "Center lat",
   "centerLong": "Center long",
   "clickOrPressThe": "Click or press the",
+  "clickRenderToValidate": "Click 'Render' to validate your custom style",
   "copied": "Copied",
   "copyLink": "Copy Link",
-  "errorMessage": "Error Message",
-  "estimatedNumberOfTiles": "Estimated number of tiles",
   "description": "Description",
   "download": "Download",
+  "errorMessage": "Error Message",
+  "estimatedNumberOfTiles": "Estimated number of tiles",
   "failed": "Failed",
   "fileSize": "File Size",
   "finishedOn": "Finished on",
@@ -19,15 +20,17 @@
   "generateMap": "Generate Map",
   "generateOfflineMap": "Generate Offline Map",
   "includeOSMData": "Include OSM Data (labels not shown)",
-  "loginButton": "Sign up or log in",
   "login": "Log in",
+  "loginButton": "Sign up or log in",
   "loginError": "An error occurred while trying to log in",
   "mapControls": "Map Controls",
   "mapDeleteConfirmation": "Are you sure you want to delete this offline map? This action cannot be undone",
   "mapDeleted": "Offline map request successfully resubmitted",
-  "mapWithFilesDeleted": "Offline map request (and associated files) deleted",
+  "mapLoadError": "Failed to load map style. Please check your URL and access token.",
+  "mapRenderedSuccessfully": "Map rendered successfully! You can now submit your request.",
   "mapRequestResubmitted": "Offline map request successfully resubmitted",
   "mapStyle": "Map Style",
+  "mapWithFilesDeleted": "Offline map request (and associated files) deleted",
   "maximumZoomLevel": "Maximum Zoom Level",
   "metadata": "Metadata",
   "noCoordinatesProvided": "No coordinates provided",
@@ -45,6 +48,7 @@
   "pleaseGenerateANewMap": "Please generate a new map",
   "processing": "Processing",
   "render": "Render",
+  "renderingMap": "Rendering map...",
   "requestedOn": "Requested on",
   "resubmit": "Resubmit",
   "status": "Status",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
index 9242f8f..eea0b7f 100644
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@@ -1,17 +1,18 @@
 {
-  "authMessage": "Por favor, regístrese o inicie sesión para acceder a esta aplicación",
   "auth0LoginError": "Error al iniciar sesión con Auth0",
+  "authMessage": "Por favor, regístrese o inicie sesión para acceder a esta aplicación",
   "availableOfflineMaps": "Mapas offline disponibles",
   "buttonThenDraw": "botón en la esquina superior derecha de la pantalla y dibuja un área en el mapa",
   "centerLat": "Centro lat",
   "centerLong": "Centro long",
   "clickOrPressThe": "Haz clic o presiona el",
+  "clickRenderToValidate": "Haz clic en 'Renderizar' para validar tu estilo personalizado",
   "copied": "Copiado",
   "copyLink": "Copiar enlace",
-  "errorMessage": "Mensaje de error",
-  "estimatedNumberOfTiles": "Número estimado de tiles",
   "description": "Descripción",
   "download": "Descargar",
+  "errorMessage": "Mensaje de error",
+  "estimatedNumberOfTiles": "Número estimado de tiles",
   "failed": "Fallido",
   "fileSize": "Tamaño del archivo",
   "finishedOn": "Terminado en",
@@ -19,15 +20,17 @@
   "generateMap": "Generar mapa",
   "generateOfflineMap": "Generar mapa offline",
   "includeOSMData": "Incluir datos OSM (etiquetas no mostradas)",
-  "loginButton": "Regístrate o inicia sesión",
   "login": "Iniciar sesión",
+  "loginButton": "Regístrate o inicia sesión",
   "loginError": "Ocurrió un error al intentar iniciar sesión",
   "mapControls": "Controles del mapa",
   "mapDeleteConfirmation": "¿Estás seguro de que quieres eliminar este mapa offline? Esta acción no puede deshacerse",
   "mapDeleted": "Solicitud de mapa offline reenviada con éxito",
+  "mapLoadError": "Error al cargar el estilo del mapa. Por favor, verifica tu URL y token de acceso.",
+  "mapRenderedSuccessfully": "¡Mapa renderizado con éxito! Ya puedes enviar tu solicitud.",
   "mapRequestResubmitted": "Solicitud de mapa offline reenviada con éxito",
-  "mapWithFilesDeleted": "Solicitud de mapa offline (y archivos asociados) eliminada",
   "mapStyle": "Estilo del mapa",
+  "mapWithFilesDeleted": "Solicitud de mapa offline (y archivos asociados) eliminada",
   "maximumZoomLevel": "Nivel máximo de zoom",
   "metadata": "Metadatos",
   "noCoordinatesProvided": "No se proporcionaron coordenadas",
@@ -45,6 +48,7 @@
   "pleaseGenerateANewMap": "Por favor, genera un nuevo mapa",
   "processing": "Procesando",
   "render": "Renderizar",
+  "renderingMap": "Renderizando mapa...",
   "requestedOn": "Solicitado en",
   "resubmit": "Reenviar",
   "status": "Estado",
diff --git a/i18n/locales/nl.json b/i18n/locales/nl.json
index ad31e7b..cca9e8f 100644
--- a/i18n/locales/nl.json
+++ b/i18n/locales/nl.json
@@ -1,17 +1,18 @@
 {
-  "authMessage": "Meld u aan of log in om toegang te krijgen tot deze applicatie",
   "auth0LoginError": "Fout bij inloggen met Auth0",
+  "authMessage": "Meld u aan of log in om toegang te krijgen tot deze applicatie",
   "availableOfflineMaps": "Beschikbare offline kaarten",
   "buttonThenDraw": "knop rechtsboven op het scherm en teken een gebied op de kaart",
   "centerLat": "Centrum breedtegraad",
   "centerLong": "Centrum lengtegraad",
   "clickOrPressThe": "Klik of druk op de",
+  "clickRenderToValidate": "Klik op 'Renderen' om uw aangepaste stijl te valideren",
   "copied": "Gekopieerd",
   "copyLink": "Link kopiëren",
-  "errorMessage": "Foutmelding",
-  "estimatedNumberOfTiles": "Geschat aantal tegels",
   "description": "Beschrijving",
   "download": "Download",
+  "errorMessage": "Foutmelding",
+  "estimatedNumberOfTiles": "Geschat aantal tegels",
   "failed": "Mislukt",
   "fileSize": "Bestandsgrootte",
   "finishedOn": "Voltooid op",
@@ -19,15 +20,17 @@
   "generateMap": "Kaart genereren",
   "generateOfflineMap": "Offline kaart genereren",
   "includeOSMData": "OSM-gegevens opnemen (labels niet getoond)",
-  "loginButton": "Meld u aan of log in",
   "login": "Aanmelden",
+  "loginButton": "Meld u aan of log in",
   "loginError": "Er is een fout opgetreden bij het inloggen",
   "mapControls": "Kaartbediening",
   "mapDeleteConfirmation": "Weet u zeker dat u deze offline kaart wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt",
   "mapDeleted": "Offline kaartverzoek succesvol opnieuw ingediend",
+  "mapLoadError": "Fout bij het laden van de kaartstijl. Controleer uw URL en toegangstoken.",
+  "mapRenderedSuccessfully": "Kaart succesvol gerenderd! U kunt nu uw verzoek indienen.",
   "mapRequestResubmitted": "Offline kaartverzoek succesvol opnieuw ingediend",
-  "mapWithFilesDeleted": "Offline kaartverzoek (en bijbehorende bestanden) verwijderd",
   "mapStyle": "Kaartstijl",
+  "mapWithFilesDeleted": "Offline kaartverzoek (en bijbehorende bestanden) verwijderd",
   "maximumZoomLevel": "Maximaal zoomniveau",
   "metadata": "Metadata",
   "noCoordinatesProvided": "Geen coördinaten opgegeven",
@@ -45,6 +48,7 @@
   "pleaseGenerateANewMap": "Genereer alstublieft een nieuwe kaart",
   "processing": "Verwerken",
   "render": "Renderen",
+  "renderingMap": "Kaart renderen...",
   "requestedOn": "Aangevraagd op",
   "resubmit": "Opnieuw indienen",
   "status": "Status",
diff --git a/i18n/locales/pt.json b/i18n/locales/pt.json
index 5317293..1842e23 100644
--- a/i18n/locales/pt.json
+++ b/i18n/locales/pt.json
@@ -1,17 +1,18 @@
 {
-  "authMessage": "Por favor, cadastre-se ou faça login para acessar este aplicativo",
   "auth0LoginError": "Erro ao fazer login com Auth0",
+  "authMessage": "Por favor, cadastre-se ou faça login para acessar este aplicativo",
   "availableOfflineMaps": "Mapas offline disponíveis",
   "buttonThenDraw": "botão no canto superior direito da tela e desenhe uma área no mapa",
   "centerLat": "Centro lat",
   "centerLong": "Centro long",
   "clickOrPressThe": "Clique ou pressione o",
+  "clickRenderToValidate": "Clique em 'Renderizar' para validar seu estilo personalizado",
   "copied": "Copiado",
   "copyLink": "Copiar link",
-  "errorMessage": "Mensagem de erro",
-  "estimatedNumberOfTiles": "Número estimado de tiles",
   "description": "Descrição",
   "download": "Baixar",
+  "errorMessage": "Mensagem de erro",
+  "estimatedNumberOfTiles": "Número estimado de tiles",
   "failed": "Falhou",
   "fileSize": "Tamanho do arquivo",
   "finishedOn": "Terminado em",
@@ -19,15 +20,17 @@
   "generateMap": "Gerar mapa",
   "generateOfflineMap": "Gerar mapa offline",
   "includeOSMData": "Incluir dados OSM (rótulos não mostrados)",
-  "loginButton": "Cadastre-se ou faça o login",
   "login": "Login",
+  "loginButton": "Cadastre-se ou faça o login",
   "loginError": "Ocorreu um erro ao tentar fazer login",
   "mapControls": "Controles do mapa",
   "mapDeleteConfirmation": "Tem certeza de que deseja excluir este mapa offline? Esta ação não pode ser desfeita",
   "mapDeleted": "Pedido de mapa offline reenviado com sucesso",
-  "mapWithFilesDeleted": "Pedido de mapa offline (e arquivos associados) excluído",
+  "mapLoadError": "Falha ao carregar o estilo do mapa. Verifique sua URL e token de acesso.",
+  "mapRenderedSuccessfully": "Mapa renderizado com sucesso! Você pode enviar seu pedido agora.",
   "mapRequestResubmitted": "Pedido de mapa offline reenviado com sucesso",
   "mapStyle": "Estilo do mapa",
+  "mapWithFilesDeleted": "Pedido de mapa offline (e arquivos associados) excluído",
   "maximumZoomLevel": "Nível máximo de zoom",
   "metadata": "Metadados",
   "noCoordinatesProvided": "Nenhuma coordenada fornecida",
@@ -45,6 +48,7 @@
   "pleaseGenerateANewMap": "Por favor, gere um novo mapa",
   "processing": "Processando",
   "render": "Renderizar",
+  "renderingMap": "Renderizando mapa...",
   "requestedOn": "Solicitado em",
   "resubmit": "Reenviar",
   "status": "Status",

From 93d84f9916796be8ae7ba1cc84b233c1dbac0483 Mon Sep 17 00:00:00 2001
From: Rudo Kemper <rtakemper@gmail.com>
Date: Wed, 3 Sep 2025 22:36:18 -0400
Subject: [PATCH 2/2] Cleanup

---
 components/GenerateMap.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/GenerateMap.vue b/components/GenerateMap.vue
index 8606104..f724656 100644
--- a/components/GenerateMap.vue
+++ b/components/GenerateMap.vue
@@ -81,13 +81,12 @@ const updateMapParams = (updateObj: UpdateMapParams) => {
   }
 };
 
-/** Handles map style loaded event. */
+/** Passes map style loaded event and any errors to the map sidebar. */
 const handleMapStyleLoaded = (data: {
   style: string;
   success: boolean;
   error?: string;
 }) => {
-  // Check if this is a custom mapbox style
   if (
     data.style.includes("mapbox://styles/") &&
     !data.style.includes("mapbox://styles/mapbox/")
@@ -111,17 +110,14 @@ const handleFormSubmit = (formData: FormData) => {
   }, 3000);
 };
 
-/** Resets the map load error state. */
 const resetMapLoadError = () => {
   mapLoadError.value = false;
 };
 
-/** Resets the map rendered state. */
 const resetMapRendered = () => {
   customMapboxStyleRendered.value = false;
 };
 
-// Watch for access token changes to reset error state
 watch(
   () => localMapboxAccessToken.value,
   (newVal) => {