refractor(auth): removed password from everywhere
This commit is contained in:
gabdevele
@@ -1,217 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({ title: 'Cambio Password - Visione' })
|
||||
|
||||
const { changePassword, user, syncUser } = useAuth()
|
||||
const router = useRouter()
|
||||
|
||||
const formData = reactive({
|
||||
current_password: '',
|
||||
new_password: '',
|
||||
confirm_password: ''
|
||||
})
|
||||
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
|
||||
const showCurrent = ref(false)
|
||||
const showNew = ref(false)
|
||||
const showConfirm = ref(false)
|
||||
|
||||
const canSubmit = computed(() => {
|
||||
return (
|
||||
formData.current_password.length > 0 &&
|
||||
formData.new_password.length >= 8 &&
|
||||
formData.new_password === formData.confirm_password
|
||||
)
|
||||
})
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!canSubmit.value) return
|
||||
|
||||
isLoading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const res = await changePassword({
|
||||
current_password: formData.current_password,
|
||||
new_password: formData.new_password
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
await syncUser()
|
||||
await router.push('/profile')
|
||||
}
|
||||
} catch (error: any) {
|
||||
errorMessage.value = error.data?.message || 'Errore. Verifica la password attuale.'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="py-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-8 col-xl-6">
|
||||
<div v-if="user?.must_change_password" class="callout callout-highlight callout-warning mb-4">
|
||||
<div class="callout-title d-flex align-items-center">
|
||||
<BIIcon name="it-warning-circle" size="sm" color="warning" class="me-2" />
|
||||
Azione richiesta
|
||||
</div>
|
||||
<p class="mb-0">Per motivi di sicurezza, imposta una nuova password per il tuo account.</p>
|
||||
</div>
|
||||
|
||||
<div class="card card-bg border-0 shadow-sm">
|
||||
<div class="card-body p-4 p-lg-5">
|
||||
<h1 class="h3 mb-3">Cambia password</h1>
|
||||
<p class="text-muted mb-4">
|
||||
Aggiorna credenziali prima di continuare. Password nuova deve essere diversa da quella attuale.
|
||||
</p>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="d-grid gap-4">
|
||||
<div class="password-field">
|
||||
<label for="current_password" class="form-label">Password attuale</label>
|
||||
<div class="password-field-control">
|
||||
<BIIcon name="it-lock" size="sm" class="password-field-icon" />
|
||||
<input
|
||||
id="current_password"
|
||||
v-model="formData.current_password"
|
||||
:type="showCurrent ? 'text' : 'password'"
|
||||
class="form-control"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-password-toggle"
|
||||
:aria-label="showCurrent ? 'Nascondi password attuale' : 'Mostra password attuale'"
|
||||
@click="showCurrent = !showCurrent"
|
||||
>
|
||||
<BIIcon :name="showCurrent ? 'it-password-visible' : 'it-password-invisible'" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="password-field">
|
||||
<label for="new_password" class="form-label">Nuova password</label>
|
||||
<div class="password-field-control">
|
||||
<BIIcon name="it-lock" size="sm" class="password-field-icon" />
|
||||
<input
|
||||
id="new_password"
|
||||
v-model="formData.new_password"
|
||||
:type="showNew ? 'text' : 'password'"
|
||||
class="form-control"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-password-toggle"
|
||||
:aria-label="showNew ? 'Nascondi nuova password' : 'Mostra nuova password'"
|
||||
@click="showNew = !showNew"
|
||||
>
|
||||
<BIIcon :name="showNew ? 'it-password-visible' : 'it-password-invisible'" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-text">Minimo 8 caratteri.</div>
|
||||
</div>
|
||||
|
||||
<div class="password-field">
|
||||
<label for="confirm_password" class="form-label">Conferma nuova password</label>
|
||||
<div class="password-field-control">
|
||||
<BIIcon name="it-lock" size="sm" class="password-field-icon" />
|
||||
<input
|
||||
id="confirm_password"
|
||||
v-model="formData.confirm_password"
|
||||
:type="showConfirm ? 'text' : 'password'"
|
||||
:class="{ 'is-invalid': formData.confirm_password && formData.confirm_password !== formData.new_password }"
|
||||
class="form-control"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-password-toggle"
|
||||
:aria-label="showConfirm ? 'Nascondi conferma password' : 'Mostra conferma password'"
|
||||
@click="showConfirm = !showConfirm"
|
||||
>
|
||||
<BIIcon :name="showConfirm ? 'it-password-visible' : 'it-password-invisible'" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="errorMessage" class="alert alert-danger mb-0" role="alert">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary w-100 py-2"
|
||||
:disabled="!canSubmit || isLoading"
|
||||
>
|
||||
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2"></span>
|
||||
{{ isLoading ? 'Aggiornamento in corso' : 'Aggiorna password' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.password-field {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.password-field-control {
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border: 1px solid #c5d0db;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
padding-left: 0.875rem;
|
||||
}
|
||||
|
||||
.password-field-control:focus-within {
|
||||
border-color: #06c;
|
||||
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.16);
|
||||
}
|
||||
|
||||
.password-field-icon {
|
||||
color: #5c6f82;
|
||||
}
|
||||
|
||||
.password-field-control .form-control {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
min-width: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.btn-password-toggle {
|
||||
align-items: center;
|
||||
color: #06c;
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
min-height: 3rem;
|
||||
padding: 0 0.875rem;
|
||||
}
|
||||
|
||||
.btn-password-toggle:hover,
|
||||
.btn-password-toggle:focus {
|
||||
background: rgba(0, 102, 204, 0.08);
|
||||
color: #06c;
|
||||
}
|
||||
</style>
|
||||
+23
-81
@@ -7,20 +7,15 @@ definePageMeta({
|
||||
|
||||
useHead({ title: 'Accedi - Visione' })
|
||||
|
||||
const { requestOtp, verifyOtp, loginWithPassword, handleLoginSuccess } = useAuth()
|
||||
const router = useRouter()
|
||||
const { requestOtp, verifyOtp, handleLoginSuccess } = useAuth()
|
||||
|
||||
// UI State
|
||||
const loginMethod = ref<'otp' | 'password'>('otp')
|
||||
const otpStep = ref<1 | 2>(1)
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
|
||||
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const otpCode = ref('')
|
||||
const showPassword = ref(false)
|
||||
|
||||
const handleRequestOtp = async () => {
|
||||
isLoading.value = true
|
||||
@@ -47,19 +42,6 @@ const handleVerifyOtp = async () => {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handlePasswordLogin = async () => {
|
||||
isLoading.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
const res = await loginWithPassword({ email: email.value, password: password.value })
|
||||
await handleLoginSuccess(res.token)
|
||||
} catch (err: any) {
|
||||
errorMessage.value = 'Credenziali non valide.'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -94,73 +76,33 @@ const handlePasswordLogin = async () => {
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="loginMethod === 'otp'">
|
||||
<form v-if="otpStep === 1" @submit.prevent="handleRequestOtp">
|
||||
<div class="form-group mb-4">
|
||||
<input type="email" class="form-control" id="email" v-model="email" required>
|
||||
<label for="email" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Ricevi codice OTP
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form v-else @submit.prevent="handleVerifyOtp">
|
||||
<div class="alert alert-success mb-4 small">
|
||||
Abbiamo inviato un codice OTP a <strong>{{ email }}</strong>.
|
||||
</div>
|
||||
<div class="form-group mb-4">
|
||||
<input type="text" class="form-control text-center text-tracking-widest fs-4" id="otp" v-model="otpCode" required maxlength="6" autocomplete="one-time-code">
|
||||
<label for="otp" :class="{ 'active': otpCode.length > 0 }">Codice a 6 cifre</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Verifica e Accedi
|
||||
</button>
|
||||
<div class="text-center">
|
||||
<a href="#" class="small text-decoration-none" @click.prevent="otpStep = 1">Modifica indirizzo email</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<form v-else @submit.prevent="handlePasswordLogin">
|
||||
<form v-if="otpStep === 1" @submit.prevent="handleRequestOtp">
|
||||
<div class="form-group mb-4">
|
||||
<input type="email" class="form-control" id="emailPwd" v-model="email" required>
|
||||
<label for="emailPwd" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
|
||||
<input type="email" class="form-control" id="email" v-model="email" required>
|
||||
<label for="email" :class="{ 'active': email.length > 0 }">Indirizzo Email</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group mb-4 position-relative">
|
||||
<input :type="showPassword ? 'text' : 'password'" class="form-control pe-5" id="password" v-model="password" required>
|
||||
<label for="password" :class="{ 'active': password.length > 0 }">Password</label>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn bg-transparent border-0 shadow-none position-absolute p-2"
|
||||
style="right: 0; top: 2px; z-index: 10;"
|
||||
@click="showPassword = !showPassword"
|
||||
:aria-pressed="showPassword"
|
||||
aria-label="Mostra/Nascondi password"
|
||||
>
|
||||
<BIIcon :name="showPassword ? 'it-password-visible' : 'it-password-invisible'" color="primary" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
|
||||
<button type="submit" class="btn btn-primary w-100" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Accedi
|
||||
Ricevi codice OTP
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a href="#" class="small text-decoration-none" @click.prevent="loginMethod = loginMethod === 'otp' ? 'password' : 'otp'; errorMessage = ''">
|
||||
{{ loginMethod === 'otp' ? 'Vuoi usare la password? Clicca qui' : 'Usa il login sicuro senza password (OTP)' }}
|
||||
</a>
|
||||
</div>
|
||||
<form v-else @submit.prevent="handleVerifyOtp">
|
||||
<div class="alert alert-success mb-4 small">
|
||||
Abbiamo inviato un codice OTP a <strong>{{ email }}</strong>.
|
||||
</div>
|
||||
<div class="form-group mb-4">
|
||||
<input type="text" class="form-control text-center text-tracking-widest fs-4" id="otp" v-model="otpCode" required maxlength="6" autocomplete="one-time-code">
|
||||
<label for="otp" :class="{ 'active': otpCode.length > 0 }">Codice a 6 cifre</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100 mb-3" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Verifica e Accedi
|
||||
</button>
|
||||
<div class="text-center">
|
||||
<a href="#" class="small text-decoration-none" @click.prevent="otpStep = 1">Modifica indirizzo email</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -182,4 +124,4 @@ const handlePasswordLogin = async () => {
|
||||
.pe-5 {
|
||||
padding-right: 3rem !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -14,14 +14,12 @@ const router = useRouter()
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const successMessage = ref(false)
|
||||
const showPassword = ref(false)
|
||||
|
||||
const form = ref({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
fiscal_code: '',
|
||||
email: '',
|
||||
password: '',
|
||||
phone: '',
|
||||
privacy: false
|
||||
})
|
||||
@@ -56,7 +54,6 @@ const handleRegister = async () => {
|
||||
last_name: form.value.last_name,
|
||||
fiscal_code: fiscalCode,
|
||||
email: form.value.email,
|
||||
password: form.value.password,
|
||||
phone: form.value.phone || undefined
|
||||
})
|
||||
|
||||
@@ -89,7 +86,7 @@ const handleRegister = async () => {
|
||||
<div class="card-body p-4 p-md-5">
|
||||
|
||||
<div v-if="successMessage" class="alert alert-success" role="alert">
|
||||
Registrazione completata con successo! Reindirizzamento al login...
|
||||
Registrazione completata con successo! Reindirizzamento all'accesso con OTP...
|
||||
</div>
|
||||
|
||||
<div v-if="errorMessage" class="alert alert-danger mb-4" role="alert">
|
||||
@@ -122,33 +119,15 @@ const handleRegister = async () => {
|
||||
<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>
|
||||
<h2 class="h5 text-primary font-weight-bold mt-5 mb-4 border-bottom pb-2">Contatti</h2>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-12 col-md-6 mb-4 mb-md-0">
|
||||
<div class="form-group">
|
||||
<div class="col-12">
|
||||
<div class="form-group position-relative">
|
||||
<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>
|
||||
<div class="col-12 col-md-6">
|
||||
<!-- INPUT PASSWORD FIXATO -->
|
||||
<div class="form-group position-relative">
|
||||
<input :type="showPassword ? 'text' : 'password'" class="form-control pe-5" id="regPwd" v-model="form.password" required minlength="10">
|
||||
<label for="regPwd" :class="{ 'active': form.password.length > 0 }">Password (min. 10 crt)</label>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn bg-transparent border-0 shadow-none position-absolute p-2"
|
||||
style="right: 0; top: 2px; z-index: 10;"
|
||||
@click="showPassword = !showPassword"
|
||||
:aria-pressed="showPassword"
|
||||
aria-label="Mostra/Nascondi password"
|
||||
>
|
||||
<BIIcon :name="showPassword ? 'it-password-visible' : 'it-password-invisible'" color="primary" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-5">
|
||||
@@ -169,6 +148,9 @@ const handleRegister = async () => {
|
||||
<span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Registra Profilo
|
||||
</button>
|
||||
<p class="small text-muted mt-3 mb-0">
|
||||
Dopo la registrazione potrai accedere usando OTP via email o CIE, quando disponibile.
|
||||
</p>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
@@ -185,8 +167,4 @@ const handleRegister = async () => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Previene che il testo finisca sotto l'icona */
|
||||
.pe-5 {
|
||||
padding-right: 3rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user