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

feat(auth): integrate codice-fiscale-js for fiscal code validation in registration

Browse Source
This commit is contained in:
michelangelo
2026-06-14 19:54:18 +02:00 Unverified
parent 762a42196c
commit 038a399e93
7 changed files with 895 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/MessageComposer.vue
+103 -36
View File
@@ -42,28 +42,17 @@ const removeFile = (idx: number) => {
</script>
<template>
<div class="message-composer mt-4 border-top pt-3">
<div class="message-composer mt-3">
<form @submit.prevent="handleSubmit">
<!-- Preview Allegati -->
<div v-if="files.length > 0" class="mb-3 d-flex flex-wrap gap-2">
<div v-for="(file, idx) in files" :key="idx" class="badge bg-light text-dark border p-2 d-flex align-items-center gap-2">
<div v-if="files.length > 0" class="message-files mb-3">
<div v-for="(file, idx) in files" :key="idx" class="message-file-chip">
<BIIcon name="it-clip" size="xs" />
<span class="text-truncate" style="max-width: 150px;">{{ file.name }}</span>
<button type="button" class="btn-close ms-2" style="font-size: 0.5rem;" @click="removeFile(idx)" aria-label="Rimuovi allegato"></button>
<span class="text-truncate file-name">{{ file.name }}</span>
<button type="button" class="btn-close btn-close-sm" @click="removeFile(idx)" aria-label="Rimuovi allegato"></button>
</div>
</div>
<div class="input-group align-items-end">
<button
type="button"
class="btn btn-outline-secondary me-2 rounded"
title="Allega file (max 5)"
@click="fileInputRef?.click()"
:disabled="isSubmitting || files.length >= 5"
>
<BIIcon name="it-clip" size="sm" />
</button>
<div class="composer-shell">
<input
ref="fileInputRef"
type="file"
@@ -73,26 +62,38 @@ const removeFile = (idx: number) => {
accept="image/*,video/*,.pdf,.doc,.docx"
/>
<textarea
v-model="message"
class="form-control rounded"
placeholder="Scrivi un messaggio... (Ctrl+Enter per inviare)"
rows="2"
:disabled="isSubmitting"
@keydown="handleKeydown"
/>
<button
type="submit"
class="btn btn-primary ms-2 rounded"
:disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
type="button"
class="btn btn-outline-secondary btn-icon composer-attach"
title="Allega file"
@click="fileInputRef?.click()"
:disabled="isSubmitting || files.length >= 5"
>
<BIIcon name="it-clip" size="sm" />
</button>
<textarea
v-model="message"
class="form-control composer-textarea"
placeholder="Scrivi aggiornamento o domanda"
rows="2"
:disabled="isSubmitting"
@keydown="handleKeydown"
/>
<button
type="submit"
class="btn btn-primary composer-submit"
:disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
>
<span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<BIIcon v-else name="it-arrow-right" size="sm" color="white" class="me-1" />
Invia
</button>
</div>
<small class="text-muted d-block mt-2">
💡 <strong>Tip:</strong> Premi Ctrl+Enter per inviare velocemente
`Ctrl` + `Invio` per inviare. Fino a 5 allegati.
</small>
</form>
</div>
@@ -100,13 +101,79 @@ const removeFile = (idx: number) => {
<style scoped>
.message-composer {
background-color: #f9f9f9;
border-radius: 0.5rem;
padding: 1rem;
border-top: 1px solid #d9e3ee;
padding-top: 1rem;
}
textarea {
resize: vertical;
font-family: inherit;
.message-files {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
</style>
.message-file-chip {
align-items: center;
background: #f2f7fc;
border: 1px solid #d9e3ee;
border-radius: 999px;
display: inline-flex;
gap: 0.5rem;
max-width: 100%;
padding: 0.4rem 0.75rem;
}
.file-name {
max-width: 14rem;
}
.composer-shell {
align-items: flex-end;
background: #fff;
border: 1px solid #c5d0db;
border-radius: 8px;
display: grid;
gap: 0.75rem;
grid-template-columns: auto minmax(0, 1fr) auto;
padding: 0.75rem;
}
.composer-shell:focus-within {
border-color: #06c;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
}
.composer-attach {
flex-shrink: 0;
}
.composer-textarea {
border: 0;
box-shadow: none;
min-height: 3rem;
padding: 0;
resize: vertical;
}
.composer-submit {
min-width: 7rem;
}
.btn-close-sm {
font-size: 0.55rem;
}
@media (max-width: 767.98px) {
.composer-shell {
grid-template-columns: auto 1fr;
}
.composer-textarea {
grid-column: 1 / -1;
}
.composer-submit {
grid-column: 2;
justify-self: end;
}
}
</style>
app/components/MessageList.vue
+106 -30
View File
@@ -28,6 +28,9 @@ const formatDate = (dateString: string): string => {
const auth = useAuth()
const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userId
const senderInitials = (msg: Message): string =>
`${msg.first_name?.[0] || ''}${msg.last_name?.[0] || ''}`.toUpperCase() || '?'
</script>
<template>
@@ -38,38 +41,46 @@ const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userI
</div>
</div>
<div v-else-if="messages.length === 0" class="alert alert-info text-center" role="alert">
Nessun messaggio disponibile. Sii il primo a scrivere!
<div v-else-if="messages.length === 0" class="message-empty-state" role="alert">
<BIIcon name="it-comment" size="lg" color="primary" class="mb-2" />
<strong class="d-block mb-1">Nessun messaggio</strong>
<span>Usa chat per aggiornamenti rapidi tra cittadino e operatori.</span>
</div>
<div v-else class="messages-container">
<div
v-for="msg in messages"
:key="msg.id"
class="message-bubble mb-3 d-flex"
:class="{ 'justify-content-end': isCurrentUser(msg.user_id), 'justify-content-start': !isCurrentUser(msg.user_id) }"
<div
v-for="msg in messages"
:key="msg.id"
class="message-row"
:class="{ 'is-current-user': isCurrentUser(msg.user_id) }"
>
<div v-if="!isCurrentUser(msg.user_id)" class="message-avatar" aria-hidden="true">
{{ senderInitials(msg) }}
</div>
<div
class="message-bubble-content p-3 rounded-3"
class="message-bubble-content"
:class="{
'bg-primary text-white': isCurrentUser(msg.user_id),
'bg-light border': !isCurrentUser(msg.user_id)
'message-bubble-outgoing': isCurrentUser(msg.user_id),
'message-bubble-incoming': !isCurrentUser(msg.user_id)
}"
>
<!-- Nome mittente (solo per messaggi non miei) -->
<div v-if="!isCurrentUser(msg.user_id)" class="small font-weight-bold mb-2 text-primary">
<div class="message-meta">
<span v-if="!isCurrentUser(msg.user_id)" class="message-author">
{{ msg.first_name }} {{ msg.last_name }}
</span>
<span v-else class="message-author">Tu</span>
<span class="message-time">
{{ formatDate(msg.created_at) }}
</span>
</div>
<div v-if="!isCurrentUser(msg.user_id)" class="small font-weight-bold mb-2 text-primary d-none">
{{ msg.first_name }} {{ msg.last_name }}
</div>
<!-- Corpo messaggio -->
<div class="message-body" :class="{ 'text-break': true }">
<div class="message-body">
{{ msg.body }}
</div>
<!-- Timestamp -->
<div class="small mt-2" :class="{ 'text-white-50': isCurrentUser(msg.user_id), 'text-muted': !isCurrentUser(msg.user_id) }">
{{ formatDate(msg.created_at) }}
</div>
</div>
</div>
</div>
@@ -78,34 +89,99 @@ const isCurrentUser = (userId: number): boolean => auth.user.value?.id === userI
<style scoped>
.message-list {
max-height: 500px;
background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
border: 1px solid #d9e3ee;
border-radius: 8px;
max-height: 34rem;
overflow-y: auto;
padding: 1rem;
background-color: #f9f9f9;
border-radius: 0.5rem;
border: 1px solid #e9ecef;
}
.messages-container {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.message-bubble {
.message-empty-state {
align-items: center;
color: #5c6f82;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 14rem;
padding: 2rem 1rem;
text-align: center;
}
.message-row {
align-items: flex-end;
display: flex;
gap: 0.75rem;
justify-content: flex-start;
}
.message-row.is-current-user {
justify-content: flex-end;
}
.message-avatar {
align-items: center;
background: #dceeff;
border-radius: 999px;
color: #17324d;
display: inline-flex;
flex: 0 0 2.25rem;
font-size: 0.75rem;
font-weight: 700;
height: 2.25rem;
justify-content: center;
}
.message-bubble-content {
max-width: 75%;
word-wrap: break-word;
border-radius: 8px;
max-width: min(100%, 40rem);
padding: 0.875rem 1rem;
word-break: break-word;
}
.message-bubble-incoming {
background: #fff;
border: 1px solid #d9e3ee;
color: #17324d;
}
.message-bubble-outgoing {
background: #06c;
color: #fff;
}
.message-meta {
align-items: center;
display: flex;
font-size: 0.8125rem;
gap: 0.75rem;
justify-content: space-between;
margin-bottom: 0.375rem;
}
.message-author {
font-weight: 700;
}
.message-time {
opacity: 0.78;
white-space: nowrap;
}
.message-body {
white-space: pre-wrap;
line-height: 1.4;
white-space: pre-wrap;
}
@media (max-width: 767.98px) {
.message-bubble-content {
max-width: calc(100% - 3rem);
}
}
</style>