feat: more authentication failchecks

app/pages/admin/areas.vue

@@ -21,6 +21,7 @@ const formData = reactive({
 })
 const jsonError = ref('')
 const actionError = ref('')
+const modalError = ref('')
 const deletingAreaId = ref<number | null>(null)
 const areaPendingDelete = ref<any | null>(null)
 
@@ -121,13 +122,15 @@ const renderExistingAreasInModal = (L: any, currentMap: any) => {
           },
           interactive: false
         }).addTo(currentMap)
-      } catch(e) {}
+      } catch (e) {
+      }
     }
   })
 }
 
 const openCreateModal = () => {
   actionError.value = ''
+  modalError.value = ''
   editingAreaId.value = null
   formData.name = ''
   formData.description = ''
@@ -171,6 +174,7 @@ const openCreateModal = () => {
       }
 
       jsonError.value = ''
+      modalError.value = ''
       mapPoints.value.push([e.latlng.lat, e.latlng.lng])
       polygon.setLatLngs(mapPoints.value)
       updateGeojson()
@@ -197,6 +201,7 @@ const loadPolygonFromGeoJson = (boundaryGeojson: any) => {
 
 const openEditModal = (area: any) => {
   actionError.value = ''
+  modalError.value = ''
   editingAreaId.value = area.id
   formData.name = area.name || ''
   formData.description = area.description || ''
@@ -250,6 +255,7 @@ const openEditModal = (area: any) => {
       }
 
       jsonError.value = ''
+      modalError.value = ''
       mapPoints.value.push([e.latlng.lat, e.latlng.lng])
       polygon.setLatLngs(mapPoints.value)
       updateGeojson()
@@ -263,6 +269,7 @@ const clearMap = () => {
     polygon.setLatLngs([])
   }
   formData.geojson = ''
+  modalError.value = ''
 }
 
 const updateGeojson = () => {
@@ -270,7 +277,7 @@ const updateGeojson = () => {
     formData.geojson = ''
     return
   }
-  const coords = mapPoints.value.map(p => [p[1], p[0]] as [number, number]) // Lng, Lat
+  const coords = mapPoints.value.map(p => [p[1], p[0]] as [number, number])
   if (coords[0]) {
     coords.push([...coords[0]])
   }
@@ -297,6 +304,7 @@ onBeforeUnmount(() => {
 
 const handleCreate = async () => {
   jsonError.value = ''
+  modalError.value = ''
   let parsedGeojson = null
 
   try {
@@ -331,9 +339,16 @@ const handleCreate = async () => {
       closeCreateModal()
       actionError.value = ''
     }
-  } catch (err) {
+  } catch (err: any) {
     console.error('Failed to save area', err)
-    actionError.value = 'Errore durante il salvataggio dell\'area.'
+
+    const backendError = err?.data?.error || err?.response?.data?.error || err?.response?._data?.error;
+
+    if (backendError === 'area_outside_allowed_boundary') {
+      modalError.value = "Attenzione: l'area disegnata esce dai confini consentiti per il Comune di Bari.";
+    } else {
+      modalError.value = err?.data?.message || err?.message || "Errore durante il salvataggio dell'area.";
+    }
   }
 }
 
@@ -379,7 +394,7 @@ const handleDeleteArea = async () => {
       <div>
         <NuxtLink to="/dashboard" class="btn btn-outline-secondary btn-sm me-2">Torna al pannello admin</NuxtLink>
         <button class="btn btn-primary btn-sm" @click="openCreateModal">
-          <BIIcon name="it-plus" size="xs" class="me-1" />
+          <BIIcon class="me-1" name="it-plus" size="xs"/>
           Nuova Area
         </button>
       </div>
@@ -441,7 +456,8 @@ const handleDeleteArea = async () => {
       </div>
     </template>
 
-    <div v-if="isCreating" class="modal-backdrop fade show d-block" style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
+    <div v-if="isCreating" class="modal-backdrop fade show d-block"
+         style="background: rgba(0,0,0,0.5); z-index: 1040;"></div>
     <div v-if="isCreating" class="modal fade show d-block" tabindex="-1" style="z-index: 1050;">
       <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
         <div class="modal-content">
@@ -450,12 +466,19 @@ const handleDeleteArea = async () => {
             <button type="button" class="btn-close" @click="closeCreateModal"></button>
           </div>
           <div class="modal-body">
+
+            <!-- ALERT ERRORE DEL BACKEND -->
+            <div v-if="modalError" class="alert alert-danger mb-4 d-flex align-items-center" role="alert">
+              <strong>Errore:</strong>&nbsp;{{ modalError }}
+            </div>
+
             <form @submit.prevent="handleCreate">
               <div class="row">
                 <div class="col-md-5">
                   <div class="mb-3">
                     <label class="form-label">Nome Area</label>
-                    <input type="text" class="form-control" v-model="formData.name" required placeholder="Es. Centro Storico" />
+                    <input v-model="formData.name" class="form-control" placeholder="Es. Centro Storico" required
+                           type="text"/>
                   </div>
                   <div class="mb-3">
                     <label class="form-label">Descrizione (opzionale)</label>
@@ -483,7 +506,8 @@ const handleDeleteArea = async () => {
                     </button>
                   </div>
                   <div class="alert alert-light border small mb-2 p-2">
-                    Clicca sulla mappa per aggiungere vertici al poligono. Sono necessari almeno 3 punti. Sono ammessi solo punti nel Comune di Bari.
+                    Clicca sulla mappa per aggiungere vertici al poligono. Sono necessari almeno 3 punti. Sono ammessi
+                    solo punti nel Comune di Bari.
                   </div>
                   <div id="areaMap" class="rounded border" style="height: 400px; width: 100%; z-index: 1;"></div>
                 </div>
@@ -492,7 +516,8 @@ const handleDeleteArea = async () => {
           </div>
           <div class="modal-footer d-flex justify-content-end gap-2">
             <button type="button" class="btn btn-outline-secondary" @click="closeCreateModal">Annulla</button>
-            <button type="button" class="btn btn-primary" :disabled="!formData.name || !formData.geojson" @click="handleCreate">
+            <button :disabled="!formData.name || !formData.geojson" class="btn btn-primary" type="button"
+                    @click="handleCreate">
               {{ submitLabel }}
             </button>
           </div>
@@ -519,6 +544,6 @@ const handleDeleteArea = async () => {
 }
 
 .modal-dialog {
-  margin-block: 0!important;
+  margin-block: 0 !important;
 }
-</style>
+</style>

app/pages/index.vue

@@ -3,6 +3,8 @@ import BIIcon from "~/components/BIIcon.vue";
 
 const { getOpenDataReports } = usePublic()
 
+const { user } = useAuth();
+
 const stats = {
   total_reports: 14523,
   resolved_reports: 13890,
@@ -38,7 +40,7 @@ const getStatusBadge = (status: string) => {
                 e monitora l'intervento in totale trasparenza.
               </p>
               <div class="it-btn-container d-flex justify-content-center gap-3">
-                <NuxtLink class="btn btn-primary" to="/auth/login">
+                <NuxtLink v-if="isCitizen(user.value?.role)" class="btn btn-primary" to="/auth/login">
                   Fai una segnalazione
                 </NuxtLink>
                 <NuxtLink class="btn btn-outline-primary" to="/open-data">

app/pages/open-data.vue

@@ -122,7 +122,6 @@ const initMap = async () => {
 watch(currentView, async (view) => {
   if (view !== 'map') return
   await nextTick()
-  // Inizializza la mappa se non esiste, altrimenti aggiornane solo dimensioni e dati
   if (!map) {
     await initMap()
   } else {

app/pages/profile.vue

@@ -130,7 +130,8 @@ const formatDate = (dateString: string) =>
             <div class="card-body">
               <h2 class="h6 card-title mb-3">Azioni account</h2>
               <div class="d-grid gap-2">
-                <NuxtLink to="/reports/new" class="btn btn-primary">Nuova segnalazione</NuxtLink>
+                <NuxtLink v-if="isCitizen(user?.role)" class="btn btn-primary" to="/reports/new">Nuova segnalazione
+                </NuxtLink>
                 <NuxtLink to="/notifications" class="btn btn-outline-primary">Notifiche</NuxtLink>
                 <button type="button" class="btn btn-outline-danger" @click="logout">
                   Logout