feat: implement authentication pages with OTP support
- Create login page with OTP verification flow - Implement passwordless authentication with email OTP - Add fallback password login method - Create register page with user account creation - Integrate with useAuth() composable for auth logic - Add token management via useCookie for session persistence - Include error handling and loading states Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Copilot
+137
-4
@@ -1,11 +1,144 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
useHead({ title: 'Registrazione - Visione' })
|
||||
|
||||
const { register } = useAuth()
|
||||
const router = useRouter()
|
||||
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const successMessage = ref(false)
|
||||
|
||||
// Form State mappato sull'API RegisterCitizenRequest
|
||||
const form = ref({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
fiscal_code: '',
|
||||
email: '',
|
||||
password: '',
|
||||
phone: '',
|
||||
privacy: false
|
||||
})
|
||||
|
||||
const handleRegister = async () => {
|
||||
if (!form.value.privacy) {
|
||||
errorMessage.value = "È necessario accettare l'informativa sulla privacy."
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
await register({
|
||||
first_name: form.value.first_name,
|
||||
last_name: form.value.last_name,
|
||||
fiscal_code: form.value.fiscal_code.toUpperCase(),
|
||||
email: form.value.email,
|
||||
password: form.value.password,
|
||||
phone: form.value.phone || undefined
|
||||
})
|
||||
|
||||
successMessage.value = true
|
||||
// Ritarda il redirect per far leggere il messaggio
|
||||
setTimeout(() => {
|
||||
router.push('/auth/login')
|
||||
}, 3000)
|
||||
|
||||
} catch (err: any) {
|
||||
errorMessage.value = err.data?.message || 'Errore durante la registrazione. Controlla i dati inseriti.'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
$END$
|
||||
</template>
|
||||
<div class="d-flex align-items-center min-vh-100 bg-light py-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-8">
|
||||
|
||||
<style scoped>
|
||||
<div class="text-center mb-4">
|
||||
<BIIcon name="it-user" size="xl" color="primary" class="mb-2" />
|
||||
<h1 class="h3 font-weight-bold">Registrazione Cittadino</h1>
|
||||
<p class="text-muted">Crea il tuo profilo per iniziare a segnalare</p>
|
||||
</div>
|
||||
|
||||
</style>
|
||||
<div class="card card-bg shadow-sm">
|
||||
<div class="card-body p-4 p-md-5">
|
||||
|
||||
<div v-if="successMessage" class="alert alert-success" role="alert">
|
||||
<BIIcon name="it-check-circle" size="sm" class="me-2" />
|
||||
Registrazione completata con successo! Reindirizzamento al login...
|
||||
</div>
|
||||
|
||||
<div v-if="errorMessage" class="alert alert-danger mb-4" role="alert">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<form v-if="!successMessage" @submit.prevent="handleRegister">
|
||||
|
||||
<h2 class="h5 text-primary font-weight-bold mb-4 border-bottom pb-2">Dati Anagrafici</h2>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 form-group mb-4">
|
||||
<input type="text" class="form-control" id="nome" v-model="form.first_name" required>
|
||||
<label for="nome" :class="{ 'active': form.first_name.length > 0 }">Nome</label>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 form-group mb-4">
|
||||
<input type="text" class="form-control" id="cognome" v-model="form.last_name" required>
|
||||
<label for="cognome" :class="{ 'active': form.last_name.length > 0 }">Cognome</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-4">
|
||||
<input type="text" class="form-control text-uppercase" id="cf" v-model="form.fiscal_code" required maxlength="16">
|
||||
<label for="cf" :class="{ 'active': form.fiscal_code.length > 0 }">Codice Fiscale</label>
|
||||
<small class="form-text text-muted">Sarà utilizzato come identificativo univoco nel sistema PA.</small>
|
||||
</div>
|
||||
|
||||
<h2 class="h5 text-primary font-weight-bold mt-5 mb-4 border-bottom pb-2">Credenziali e Contatti</h2>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 form-group mb-4">
|
||||
<input type="email" class="form-control" id="regEmail" v-model="form.email" required>
|
||||
<label for="regEmail" :class="{ 'active': form.email.length > 0 }">Indirizzo Email</label>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 form-group mb-4">
|
||||
<input type="password" class="form-control" id="regPwd" v-model="form.password" required minlength="10">
|
||||
<label for="regPwd" :class="{ 'active': form.password.length > 0 }">Password (min. 10 crt)</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-5">
|
||||
<input type="tel" class="form-control" id="phone" v-model="form.phone">
|
||||
<label for="phone" :class="{ 'active': form.phone.length > 0 }">Numero di telefono (Opzionale)</label>
|
||||
<small class="form-text text-muted">Faciliterà il contatto da parte degli operatori comunali in caso di intervento.</small>
|
||||
</div>
|
||||
|
||||
<!-- Privacy Checkbox -->
|
||||
<div class="form-check mb-4">
|
||||
<input class="form-check-input" type="checkbox" id="privacyCheck" v-model="form.privacy" required>
|
||||
<label class="form-check-label small" for="privacyCheck">
|
||||
Dichiaro di aver letto l'<NuxtLink to="/privacy" target="_blank">Informativa sulla Privacy</NuxtLink> e accetto il trattamento dei dati personali ai fini dell'erogazione del servizio.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-100 btn-lg" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Registra Profilo
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<p class="small text-muted">Hai già un account? <NuxtLink to="/auth/login" class="font-weight-bold">Torna al Login</NuxtLink></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user