frontend/app/pages/auth/register.vue

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

definePageMeta({
  middleware: 'guest'
})

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

const { register } = useAuth()
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
})

const computeSurnameCode = (surname = '') => {
  const s = surname.toUpperCase().replace(/[^A-Z]/g, '')
  const consonants = s.replace(/[AEIOU]/g, '')
  const vowels = s.replace(/[^AEIOU]/g, '')
  return (consonants + vowels + 'XXX').slice(0, 3)
}

const computeNameCode = (name = '') => {
  const s = name.toUpperCase().replace(/[^A-Z]/g, '')
  const consonants = s.replace(/[AEIOU]/g, '')
  const vowels = s.replace(/[^AEIOU]/g, '')
  if (consonants.length >= 4) {
    return consonants.charAt(0) + consonants.charAt(2) + consonants.charAt(3)
  }
  return (consonants + vowels + 'XXX').slice(0, 3)
}

const handleRegister = async () => {
  if (!form.value.privacy) {
    errorMessage.value = "È necessario accettare l'informativa sulla privacy."
    return
  }

  const expected = computeSurnameCode(form.value.last_name) + computeNameCode(form.value.first_name)
  if (form.value.fiscal_code.trim().length >= 6) {
    const provided = form.value.fiscal_code.trim().toUpperCase().slice(0, 6)
    if (provided !== expected) {
      errorMessage.value = `Il Codice Fiscale non sembra corrispondere a nome/cognome. Atteso: ${expected}`
      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
    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>
  <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-lg-8">

          <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>

          <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">
                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>

                <!-- FIX LAYOUT: form-group separato da col -->
                <div class="row mb-4">
                  <div class="col-12 col-md-6 mb-4 mb-md-0">
                    <div class="form-group">
                      <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>
                  <div class="col-12 col-md-6">
                    <div class="form-group">
                      <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>

                <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 mb-4">
                  <div class="col-12 col-md-6 mb-4 mb-md-0">
                    <div class="form-group">
                      <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">
                  <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.
                  </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>

<style scoped>
/* Previene che il testo finisca sotto l'icona */
.pe-5 {
  padding-right: 3rem !important;
}
</style>