From 794f6e835acd90b8186c5537ad8d3b2270db6677 Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Fri, 12 Jun 2026 19:04:19 +0200
Subject: [PATCH] refactor: integrate auth state and action buttons in Header

- Use useAuth composable in Header to query user profile details and handle logout action
- Conditionally render User Profile or login/logout action buttons based on auth state
- Update design elements to use BIIcon component
- Fix minor typo in brand tagline text
---
 app/components/Header.vue | 53 ++++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 17 deletions(-)

diff --git a/app/components/Header.vue b/app/components/Header.vue
index 57580b3..47dfcea 100644
--- a/app/components/Header.vue
+++ b/app/components/Header.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import BIIcon from "~/components/BIIcon.vue";
 
 const route = useRoute()
-
 const isMobileMenuOpen = ref(false)
 
 watch(() => route.path, () => {
@@ -18,7 +17,7 @@ const navLinks = [
   { name: 'Come funziona', path: '/info' }
 ]
 
-const isAuthenticated = ref(false) // Replace with: const token = useCookie('auth_token'); computed(() => !!token.value)
+const { isAuthenticated, user, logout } = useAuth()
 </script>
 
 <template>
@@ -29,36 +28,56 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
           <div class="col-12">
             <div class="it-header-slim-wrapper-content">
               <a class="d-none d-lg-block navbar-brand"
-                 href="https://www.interno.gov.it/it/ministero/dipartimenti/dipartimento-pubblica-sicurezza">Dipartimento
-                della Pubblica Sicurezza</a>
+                 href="https://www.interno.gov.it/it/ministero/dipartimenti/dipartimento-pubblica-sicurezza">
+                Dipartimento della Pubblica Sicurezza
+              </a>
               <div class="nav-mobile">
                 <nav aria-label="Navigazione secondaria">
                   <a class="it-opener d-lg-none" data-bs-toggle="collapse"
                      href="https://www.interno.gov.it/it/ministero/dipartimenti/dipartimento-pubblica-sicurezza"
                      role="button" aria-expanded="false">
-                    <span>Dipartmento della Pubblica Sicureazza</span>
+                    <span>Dipartimento della Pubblica Sicurezza</span>
                     <BIIcon name="it-expand"/>
                   </a>
                 </nav>
               </div>
+
               <div class="header-slim-right-zone" role="navigation">
-                <a class="btn btn-primary btn-icon btn-full" href="/auth/login"
-                   data-element="personal-area-login" data-focus-mouse="false">
+                <!-- Utente Autenticato: Bottone Utente + Bottone Esci -->
+                <div v-if="isAuthenticated" class="d-flex align-items-center gap-2">
+                  <NuxtLink class="btn btn-primary btn-icon btn-full" to="/dashboard"
+                            data-element="personal-area-dashboard" data-focus-mouse="false">
+                    <span class="rounded-icon" aria-hidden="true">
+                      <BIIcon name="it-user" />
+                    </span>
+                    <span class="d-none d-lg-block">{{ user?.first_name }}</span>
+                  </NuxtLink>
+
+                  <button class="btn btn-primary btn-icon btn-full border-0" @click="logout"
+                          data-element="personal-area-logout" data-focus-mouse="false">
+                    <span class="rounded-icon" aria-hidden="true">
+                      <BIIcon name="it-logout" /> <!-- usa it-unlocked se it-logout non è presente -->
+                    </span>
+                    <span class="d-none d-lg-block">Esci</span>
+                  </button>
+                </div>
+
+                <!-- Utente NON Autenticato: Bottone Login -->
+                <NuxtLink v-else class="btn btn-primary btn-icon btn-full" to="/auth/login"
+                          data-element="personal-area-login" data-focus-mouse="false">
                   <span class="rounded-icon" aria-hidden="true">
-                    <svg class="custom-rounded-icon icon-primary">
-                                          <use
-                                              xlink:href="https://www.cartaidentita.interno.gov.it/./wp-content/themes/design-italia/lib/bootstrap-italia/svg/sprite.svg#it-user"></use>
-                    </svg>
+                    <BIIcon name="it-user" />
                   </span>
                   <span class="d-none d-lg-block">Login</span>
-                </a></div>
+                </NuxtLink>
+              </div>
+
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- CENTER HEADER (Brand) -->
     <div class="it-nav-wrapper">
       <div class="it-header-center-wrapper">
         <div class="container-xxl">
@@ -70,7 +89,7 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
                     <BIIcon name="it-pa"/>
                     <div class="it-brand-text">
                       <div class="it-brand-title">Visione</div>
-                      <div class="it-brand-tagline d-none d-md-block">Un'occhio per la sicurezza del cittadino.</div>
+                      <div class="it-brand-tagline d-none d-md-block">Un occhio per la sicurezza del cittadino.</div>
                     </div>
                   </NuxtLink>
                 </div>
@@ -153,8 +172,8 @@ const isAuthenticated = ref(false) // Replace with: const token = useCookie('aut
   background-color: rgb(0, 76.5, 153);
 }
 
-:deep(.it-header-slim-wrapper .it-header-slim-wrapper-content .header-slim-right-zone a) {
-
+:deep(.it-header-slim-wrapper .it-header-slim-wrapper-content .header-slim-right-zone a),
+:deep(.it-header-slim-wrapper .it-header-slim-wrapper-content .header-slim-right-zone button) {
   background-color: rgb(0, 76.5, 153);
 }