feat: update authentication flow and user navigation

2026-06-13 17:15:59 +02:00
parent ab6455345e
commit a66339a7fc
18 changed files with 662 additions and 759 deletions
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { CreateReportRequest } from '~/types/api'
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+useHead({ title: 'Nuova segnalazione - Visione' })
+
+const router = useRouter()
+const { createReport, uploadMedia } = useReports()
+const { getCategories } = useAdmin()
+const { user } = useAuth()
+
+const { data: categoriesData } = await useAsyncData('categories', () => getCategories())
+const categories = computed(() => categoriesData.value?.categories || [])
+
+const isLoading = ref(false)
+const errorMessage = ref('')
+
+const handleReportSubmit = async (reportData: CreateReportRequest, mediaFiles: File[]) => {
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    const response = await createReport({
+      ...reportData,
+      media: [],
+    })
+
+    if (response.ok && response.report_id) {
+      if (mediaFiles.length > 0) {
+        try {
+          const formData = new FormData()
+          mediaFiles.forEach((file) => formData.append('files', file))
+          await uploadMedia(response.report_id, formData)
+        } catch (error) {
+          console.error('Media upload failed:', error)
+        }
+      }
+
+      await router.push(`/reports/${response.report_id}`)
+    }
+  } catch (error: any) {
+    errorMessage.value = error.data?.message || 'Errore durante la creazione della segnalazione. Riprova.'
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="it-hero-wrapper it-primary-bg hero-compact">
+      <div class="container">
+        <div class="row">
+          <div class="col-12">
+            <div class="it-hero-text-wrapper p-4">
+              <h1 class="text-white font-weight-bold">Nuova segnalazione</h1>
+              <p class="text-white mt-2 lead">
+                Descrivi il problema urbano, indica la posizione e allega eventuali media.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container my-5">
+      <div class="row g-4">
+        <div class="col-12 col-lg-8">
+          <div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show" role="alert">
+            {{ errorMessage }}
+            <button type="button" class="btn-close" aria-label="Chiudi" @click="errorMessage = ''"></button>
+          </div>
+
+          <ReportForm :categories="categories" :is-loading="isLoading" @submit="handleReportSubmit" />
+        </div>
+
+        <aside class="col-12 col-lg-4">
+          <div class="card card-bg mb-4">
+            <div class="card-body">
+              <h2 class="h6 card-title mb-3">Account segnalante</h2>
+              <p class="mb-1"><strong>{{ user?.first_name }} {{ user?.last_name }}</strong></p>
+              <p class="small text-muted mb-0">{{ user?.email }}</p>
+            </div>
+          </div>
+
+          <div class="callout callout-highlight callout-primary">
+            <div class="callout-title d-flex align-items-center">
+              <BIIcon name="it-info-circle" size="sm" color="primary" class="me-2" />
+              Privacy
+            </div>
+            <p>
+              I tuoi dati personali non saranno pubblicati. Gli operatori li useranno solo per gestire la segnalazione.
+            </p>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>