refractor(auth): removed password from everywhere
This commit is contained in:
gabdevele
+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>
|
||||
|
||||
Reference in New Issue
Block a user