<script setup>
import { useAuthStore } from '@/stores/Auth.js';
import { reactive, ref} from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const authStore = useAuthStore();
// сюда будем записывать текст ошибки
const errorMessage = ref(null)
const state = reactive({
  login: '',
  password: '',
});

const handleLogin = async () => {
  // сбрасываем старую ошибку
  errorMessage.value = ''

  const { error } = await authStore.login({
    login:    state.login,
    password: state.password
  })

  if (error) {
    // если бэкенд вернул текст ошибки — показываем его, иначе дефолт
    errorMessage.value = error.data?.message || 'Неверный логин или пароль'
  } else {
    // успешно — переходим
    router.push({ name: 'home' })
  }
}





</script>

<template>
    <main class="d-flex align-items-center justify-content-center py-4 bg-body-tertiary form-signin w-100 h-100 m-auto">
        <form @submit.prevent="handleLogin" style="width: 260px">
            <h1 class="h3 mb-3 fw-normal">Вход в систему</h1>

            <div class="form-floating mb-3">
                <input
                    v-model="state.login"
                    type="text"
                    class="form-control"
                    id="floatingInput"
                    placeholder="name@example.com"
                />
                <label for="floatingInput">Логин</label>
            </div>
            <div class="form-floating mb-3">
                <input
                    v-model="state.password"
                    type="password"
                    class="form-control"
                    id="floatingPassword"
                    placeholder="Password"
                />
                <label for="floatingPassword">Пароль</label>
            </div>
          <!-- Блок с ошибкой -->
          <div v-if="errorMessage" class="alert alert-danger mb-3">
            {{ errorMessage }}
          </div>

          <button class="btn btn-primary w-100 py-2" type="submit">Вход</button>
        </form>
    </main>
</template>

<style scoped></style>
