frontend/src/components/ModalRedefinirSenha.vue

<template>
  <Teleport to="body">
    <div class="fixed inset-0 z-[9999] flex items-center justify-center p-4" @click="!salvando && $emit('close')">
      <div class="absolute inset-0 bg-black/40 dark:bg-black/60" />
      <div
        class="relative w-full max-w-md overflow-hidden rounded-2xl border border-gray-200 bg-background text-foreground shadow-xl dark:border-gray-700"
        @click.stop
      >
        <div class="flex items-center justify-between gap-3 border-b border-gray-200 px-5 py-4 dark:border-gray-700">
          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">
            Redefinir senha de {{ usuario.Nome || usuario.Login }}
          </h3>
          <button
            type="button"
            :disabled="salvando"
            class="rounded-lg border border-transparent p-1.5 text-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-100 disabled:opacity-50 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:bg-white/5"
            @click="$emit('close')"
          >
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <form class="grid gap-4 p-5" @submit.prevent="onSubmit">
          <div class="grid gap-1.5">
            <label for="mrs-senha" class="text-sm font-medium text-gray-700 dark:text-gray-300">Nova senha</label>
            <input
              id="mrs-senha"
              v-model="senhaNova"
              type="password"
              placeholder="Mínimo 6 caracteres"
              required
              minlength="6"
              :disabled="salvando"
              autocomplete="new-password"
            />
          </div>

          <div class="grid gap-1.5">
            <label for="mrs-confirmacao" class="text-sm font-medium text-gray-700 dark:text-gray-300">Confirmar nova senha</label>
            <input
              id="mrs-confirmacao"
              v-model="confirmacao"
              type="password"
              placeholder="Repita a nova senha"
              required
              :disabled="salvando"
              autocomplete="new-password"
            />
          </div>

          <div v-if="erroForm" class="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300">
            {{ erroForm }}
          </div>

          <p class="text-xs text-gray-500 dark:text-gray-400">
            Comunique a nova senha ao usuário por canal interno.
          </p>

          <div class="flex justify-end gap-2 pt-1">
            <BaseButton variant="secondary" :disabled="salvando" @click="$emit('close')">
              Cancelar
            </BaseButton>
            <BaseButton type="submit" :disabled="salvando" :loading="salvando">
              Redefinir senha
            </BaseButton>
          </div>
        </form>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { ref } from "vue";
import { alterarSenhaUsuario } from "../api/users.js";
import BaseButton from "./base/BaseButton.vue";

const props = defineProps({
  usuario: { type: Object, required: true }
});

const emit = defineEmits(["close", "saved"]);

const senhaNova = ref("");
const confirmacao = ref("");
const salvando = ref(false);
const erroForm = ref("");

async function onSubmit() {
  erroForm.value = "";

  if (senhaNova.value.length < 6) {
    erroForm.value = "A nova senha deve ter no mínimo 6 caracteres.";
    return;
  }
  if (senhaNova.value !== confirmacao.value) {
    erroForm.value = "As senhas não conferem.";
    return;
  }

  salvando.value = true;
  try {
    await alterarSenhaUsuario(props.usuario.Id, { senhaNova: senhaNova.value });
    emit("saved");
  } catch (e) {
    erroForm.value = e?.message || "Erro ao redefinir a senha.";
  } finally {
    salvando.value = false;
  }
}
</script>