SnitchItaly/frontend
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor: integrate auth state and action buttons in Header

Browse Source 
- 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
This commit is contained in:
reloia
2026-06-12 19:04:19 +02:00 Unverified
parent cfb5d629c7
commit 794f6e835a
1 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Header.vue
+36 -17
View File
@@ -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);
}