feat: update authentication flow and user navigation
This commit is contained in:
@@ -0,0 +1,156 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
|
||||
useHead({ title: 'Profilo - Visione' })
|
||||
|
||||
const { user, fetchRewards, logout } = useAuth()
|
||||
|
||||
const page = ref(1)
|
||||
const perPage = ref(10)
|
||||
|
||||
const { data: rewardsData } = await useAsyncData(
|
||||
'profile-rewards',
|
||||
() => fetchRewards({ page: page.value, per_page: perPage.value }),
|
||||
{ watch: [page] }
|
||||
)
|
||||
|
||||
const rewards = computed(() => rewardsData.value?.reward_events || [])
|
||||
const totalPoints = computed(() => rewardsData.value?.points || 0)
|
||||
const totalRewards = computed(() => rewards.value.length)
|
||||
|
||||
const formatDate = (dateString: string) =>
|
||||
new Date(dateString).toLocaleDateString('it-IT', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-light border-bottom py-4 mb-4">
|
||||
<div class="container">
|
||||
<h1 class="h3 font-weight-bold mb-1">Profilo</h1>
|
||||
<p class="text-muted mb-0">Dati account, punti cittadino e impostazioni personali.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mb-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-lg-8">
|
||||
<div class="card card-bg mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2 class="h5 card-title mb-0">Dati personali</h2>
|
||||
<NuxtLink to="/settings/profile" class="btn btn-outline-primary btn-sm">
|
||||
Modifica
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Nome</small>
|
||||
<strong>{{ user?.first_name }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Cognome</small>
|
||||
<strong>{{ user?.last_name }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Email</small>
|
||||
<strong>{{ user?.email }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<small class="text-muted d-block">Telefono</small>
|
||||
<strong>{{ user?.phone || 'Non fornito' }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-0">
|
||||
<small class="text-muted d-block">Codice fiscale</small>
|
||||
<strong>{{ user?.fiscal_code }}</strong>
|
||||
</div>
|
||||
<div class="col-md-6 mb-0">
|
||||
<small class="text-muted d-block">Ruolo</small>
|
||||
<span class="badge bg-info">{{ user?.role }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-bg">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2 class="h5 card-title mb-0">Cronologia punti</h2>
|
||||
<span class="badge bg-primary">{{ totalPoints }} punti</span>
|
||||
</div>
|
||||
|
||||
<div v-if="rewards.length === 0" class="alert alert-info mb-0" role="alert">
|
||||
Nessun punto registrato.
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col">Data</th>
|
||||
<th scope="col">Segnalazione</th>
|
||||
<th scope="col">Motivo</th>
|
||||
<th scope="col" class="text-end">Punti</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="reward in rewards" :key="reward.id">
|
||||
<td class="text-muted">{{ formatDate(reward.created_at) }}</td>
|
||||
<td>
|
||||
<NuxtLink :to="`/reports/${reward.report_id}`">#{{ reward.report_id }}</NuxtLink>
|
||||
</td>
|
||||
<td>{{ reward.reason }}</td>
|
||||
<td class="text-end">
|
||||
<span class="badge bg-success">+{{ reward.points }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Pagination
|
||||
v-if="totalRewards > perPage"
|
||||
:current-page="page"
|
||||
:per-page="perPage"
|
||||
:total-items="totalRewards"
|
||||
@page-change="page = $event"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="card card-bg mb-4">
|
||||
<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 to="/notifications" class="btn btn-outline-primary">Notifiche</NuxtLink>
|
||||
<NuxtLink to="/settings/password" class="btn btn-outline-secondary">Cambia password</NuxtLink>
|
||||
<button type="button" class="btn btn-outline-danger" @click="logout">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-bg">
|
||||
<div class="card-body">
|
||||
<h2 class="h6 card-title mb-2">Punti cittadino</h2>
|
||||
<div class="display-6 text-primary font-weight-bold mb-2">{{ totalPoints }}</div>
|
||||
<p class="small text-muted mb-0">
|
||||
I punti vengono accreditati sulle segnalazioni concluse con esito positivo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user