frontend/app/pages/auth/login.vue

<script setup lang="ts">
import { ref } from 'vue'

definePageMeta({
  middleware: 'guest'
})

useHead({ title: 'Accedi - Visione' })

const { requestOtp, verifyOtp, loginWithPassword, handleLoginSuccess } = useAuth()
const router = useRouter()

// UI State
const loginMethod = ref<'otp' | 'password'>('otp')
const otpStep = ref<1 | 2>(1)
const isLoading = ref(false)
const errorMessage = ref('')

// Form State
const email = ref('')
const password = ref('')
const otpCode = ref('')
const showPassword = ref(false)

const handleRequestOtp = async () => {
  isLoading.value = true
  errorMessage.value = ''
  try {
    await requestOtp({ email: email.value })
    otpStep.value = 2
  } catch (err: any) {
    errorMessage.value = err.data?.message || 'Errore durante la richiesta OTP. Riprova.'
  } finally {
    isLoading.value = false
  }
}

const handleVerifyOtp = async () => {
  isLoading.value = true
  errorMessage.value = ''
  try {
    const res = await verifyOtp({ email: email.value, code: otpCode.value })
    await handleLoginSuccess(res.token)
  } catch (err: any) {
    errorMessage.value = 'Codice OTP non valido o scaduto.'
  } finally {
    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>
  <div class="d-flex align-items-center bg-light py-5">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-5">

          <!-- Intestazione istituzionale -->
          <div class="text-center mb-4">
            <BIIcon name="it-pa" size="xl" color="primary" class="mb-2" />
            <h1 class="h3 font-weight-bold">Accedi a Visione</h1>
            <p class="text-muted">Il portale delle segnalazioni urbane</p>
          </div>

          <div class="card card-bg shadow-sm">
            <div class="card-body p-4 p-md-5">

              <!-- Finto Bottone CIE -->
              <button class="btn btn-primary w-100 mb-4 d-flex align-items-center justify-content-center gap-2" disabled title="Integrazione CIE prevista per la fase successiva">
                <BIIcon name="it-card" size="sm" color="white" />
                Entra con CIE (Presto disponibile)
              </button>

              <div class="d-flex align-items-center my-4">
                <hr class="flex-grow-1">
                <span class="mx-3 text-muted small text-uppercase">Oppure</span>
                <hr class="flex-grow-1">
              </div>

              <div v-if="errorMessage" class="alert alert-danger mb-4" role="alert">
                {{ errorMessage }}
              </div>

              <!-- FLUSSO OTP -->
              <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>

              <!-- FLUSSO PASSWORD -->
              <form v-else @submit.prevent="handlePasswordLogin">
                <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>
                </div>

                <!-- INPUT PASSWORD FIXATO -->
                <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">
                  <span v-if="isLoading" class="spinner-border spinner-border-sm me-2" role="status"></span>
                  Accedi
                </button>
              </form>

              <!-- Switch Method -->
              <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>

            </div>
          </div>

          <div class="text-center mt-4">
            <p class="small text-muted">Non hai un account? <NuxtLink to="/auth/register" class="font-weight-bold">Registrati ora</NuxtLink></p>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.text-tracking-widest {
  letter-spacing: 0.5em;
}
.pe-5 {
  padding-right: 3rem !important;
}
</style>