frontend/app/pages/auth/change-password.vue

<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="container my-5">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-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>Per motivi di sicurezza, imposta una nuova password per il tuo account.</p>
        </div>

        <div class="card card-bg shadow-sm">
          <div class="card-body p-4">
            <h3 class="card-title h4 mb-4">Cambia la tua password</h3>

            <form @submit.prevent="handleSubmit">
              <div class="form-group mb-3">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <div class="input-group-text"><BIIcon name="it-lock" size="sm" /></div>
                  </div>
                  <input
                      :type="showCurrent ? 'text' : 'password'"
                      class="form-control"
                      id="current_password"
                      v-model="formData.current_password"
                  >
                  <!-- FIX: Aggiunta classe 'active' dinamica per evitare sovrapposizione placeholder -->
                  <label for="current_password" :class="{ 'active': formData.current_password }">Password attuale</label>
                  <div class="input-group-append">
                    <button type="button" class="btn btn-primary btn-sm" @click="showCurrent = !showCurrent">
                      <BIIcon :name="showCurrent ? 'it-password-visible' : 'it-password-invisible'" size="sm" color="white" />
                    </button>
                  </div>
                </div>
              </div>

              <hr class="my-4">

              <!-- 2. NUOVA PASSWORD -->
              <div class="form-group mb-3">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <div class="input-group-text"><BIIcon name="it-lock" size="sm" /></div>
                  </div>
                  <input
                      :type="showNew ? 'text' : 'password'"
                      class="form-control"
                      id="new_password"
                      v-model="formData.new_password"
                  >
                  <label for="new_password" :class="{ 'active': formData.new_password }">Nuova password</label>
                  <div class="input-group-append">
                    <button type="button" class="btn btn-primary btn-sm" @click="showNew = !showNew">
                      <BIIcon :name="showNew ? 'it-password-visible' : 'it-password-invisible'" size="sm" color="white" />
                    </button>
                  </div>
                </div>
                <small class="form-text text-muted">Minimo 8 caratteri.</small>
              </div>

              <!-- 3. CONFERMA PASSWORD -->
              <div class="form-group mb-4">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <div class="input-group-text"><BIIcon name="it-lock" size="sm" /></div>
                  </div>
                  <input
                      :type="showConfirm ? 'text' : 'password'"
                      class="form-control"
                      :class="{ 'is-invalid': formData.confirm_password && formData.confirm_password !== formData.new_password }"
                      id="confirm_password"
                      v-model="formData.confirm_password"
                  >
                  <label for="confirm_password" :class="{ 'active': formData.confirm_password }">Conferma nuova password</label>
                  <div class="input-group-append">
                    <button type="button" class="btn btn-primary btn-sm" @click="showConfirm = !showConfirm">
                      <BIIcon :name="showConfirm ? 'it-password-visible' : 'it-password-invisible'" size="sm" color="white" />
                    </button>
                  </div>
                </div>
              </div>

              <div v-if="errorMessage" class="alert alert-danger mb-4" 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>
                <span v-else>Aggiorna Password</span>
              </button>

            </form>
          </div>
        </div>

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

<style scoped>
/* Correzione per i bottoni occhio in Bootstrap Italia */
.input-group-append .btn {
  z-index: 4;
  height: 100%;
}

/* Stile per gestire correttamente le label di Bootstrap Italia che si sovrappongono */
.form-group label.active {
  transform: translateY(-140%) scale(0.9);
  color: #006f9d;
}

.input-group-text {
  background-color: #f0f0f0;
  border-right: none;
}

.form-control:focus + label {
  color: #006f9d;
}
</style>