From ea01c02764458db5d4129f6a0f8e98f86da9b766 Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Sun, 14 Jun 2026 22:16:57 +0200
Subject: [PATCH] feat: add user profile settings page and fix navigation link

---
 app/pages/profile.vue          |   2 +-
 app/pages/settings/profile.vue | 199 +++++++++++++++++++++++++++++++++
 2 files changed, 200 insertions(+), 1 deletion(-)
 create mode 100644 app/pages/settings/profile.vue

diff --git a/app/pages/profile.vue b/app/pages/profile.vue
index 907ed45..daaed76 100644
--- a/app/pages/profile.vue
+++ b/app/pages/profile.vue
@@ -132,7 +132,7 @@ const formatDate = (dateString: string) =>
               <div class="d-grid gap-2">
                 <NuxtLink to="/reports/new" class="btn btn-primary">Nuova segnalazione</NuxtLink>
                 <NuxtLink to="/notifications" class="btn btn-outline-primary">Notifiche</NuxtLink>
-                <NuxtLink to="/settings/password" class="btn btn-outline-secondary">Cambia password</NuxtLink>
+                <NuxtLink to="/auth/change-password" class="btn btn-outline-secondary">Cambia password</NuxtLink>
                 <button type="button" class="btn btn-outline-danger" @click="logout">
                   Logout
                 </button>
diff --git a/app/pages/settings/profile.vue b/app/pages/settings/profile.vue
new file mode 100644
index 0000000..1e6f9e7
--- /dev/null
+++ b/app/pages/settings/profile.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth'
+})
+
+useHead({ title: 'Modifica Profilo - Visione' })
+
+const { user, updateProfile, syncUser } = useAuth()
+const router = useRouter()
+
+const formData = reactive({
+  first_name: user.value?.first_name || '',
+  last_name: user.value?.last_name || '',
+  phone: user.value?.phone || ''
+})
+
+const isLoading = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+
+const canSubmit = computed(() => {
+  return formData.first_name.trim().length > 0 && formData.last_name.trim().length > 0
+})
+
+const handleSubmit = async () => {
+  if (!canSubmit.value) return
+
+  isLoading.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  try {
+    const res = await updateProfile({
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      phone: formData.phone || undefined
+    })
+
+    if (res.ok || res.user) {
+      await syncUser()
+      successMessage.value = 'Profilo aggiornato con successo.'
+      setTimeout(() => {
+        router.push('/profile')
+      }, 1500)
+    }
+  } catch (error: any) {
+    errorMessage.value = error.data?.message || 'Errore durante l\'aggiornamento del profilo.'
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="py-5">
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-12 col-lg-8 col-xl-6">
+          <div class="card card-bg border-0 shadow-sm">
+            <div class="card-body p-4 p-lg-5">
+              <div class="d-flex align-items-center mb-3">
+                <NuxtLink to="/profile" class="btn btn-sm btn-link text-decoration-none ps-0 me-3">
+                  <BIIcon name="it-arrow-left" size="sm" />
+                </NuxtLink>
+                <h1 class="h3 mb-0">Modifica Profilo</h1>
+              </div>
+              <p class="text-muted mb-4">
+                Aggiorna i tuoi dati personali. Email e Codice Fiscale non sono modificabili.
+              </p>
+
+              <form @submit.prevent="handleSubmit" class="d-grid gap-4">
+                <div class="input-field">
+                  <label for="first_name" class="form-label">Nome</label>
+                  <div class="input-field-control">
+                    <BIIcon name="it-user" size="sm" class="input-field-icon" />
+                    <input
+                      id="first_name"
+                      v-model="formData.first_name"
+                      type="text"
+                      class="form-control"
+                      required
+                    >
+                  </div>
+                </div>
+
+                <div class="input-field">
+                  <label for="last_name" class="form-label">Cognome</label>
+                  <div class="input-field-control">
+                    <BIIcon name="it-user" size="sm" class="input-field-icon" />
+                    <input
+                      id="last_name"
+                      v-model="formData.last_name"
+                      type="text"
+                      class="form-control"
+                      required
+                    >
+                  </div>
+                </div>
+
+                <div class="input-field">
+                  <label for="phone" class="form-label">Telefono (opzionale)</label>
+                  <div class="input-field-control">
+                    <BIIcon name="it-telephone" size="sm" class="input-field-icon" />
+                    <input
+                      id="phone"
+                      v-model="formData.phone"
+                      type="tel"
+                      class="form-control"
+                    >
+                  </div>
+                </div>
+
+                <div class="input-field opacity-50">
+                  <label class="form-label">Email</label>
+                  <div class="input-field-control">
+                    <BIIcon name="it-mail" size="sm" class="input-field-icon" />
+                    <input
+                      type="email"
+                      class="form-control disabled"
+                      :value="user?.email"
+                      disabled
+                    >
+                  </div>
+                </div>
+
+                <div class="input-field opacity-50">
+                  <label class="form-label">Codice Fiscale</label>
+                  <div class="input-field-control">
+                    <BIIcon name="it-card" size="sm" class="input-field-icon" />
+                    <input
+                      type="text"
+                      class="form-control disabled"
+                      :value="user?.fiscal_code"
+                      disabled
+                    >
+                  </div>
+                </div>
+
+                <div v-if="errorMessage" class="alert alert-danger mb-0" role="alert">
+                  {{ errorMessage }}
+                </div>
+                
+                <div v-if="successMessage" class="alert alert-success mb-0" role="alert">
+                  {{ successMessage }}
+                </div>
+
+                <button
+                  type="submit"
+                  class="btn btn-primary w-100 py-2 mt-2"
+                  :disabled="!canSubmit || isLoading"
+                >
+                  <span v-if="isLoading" class="spinner-border spinner-border-sm me-2"></span>
+                  {{ isLoading ? 'Aggiornamento in corso...' : 'Salva modifiche' }}
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.input-field {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.input-field-control {
+  align-items: center;
+  background: #fff;
+  border: 1px solid #c5d0db;
+  border-radius: 8px;
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: auto minmax(0, 1fr);
+  padding-left: 0.875rem;
+}
+
+.input-field-control:focus-within {
+  border-color: #06c;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.16);
+}
+
+.input-field-icon {
+  color: #5c6f82;
+}
+
+.input-field-control .form-control {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  min-width: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+</style>