<template>
  <q-page padding class="">
    <q-card flat bordered style="max-width: 1200px" class="q-mx-auto">
      <q-card-section>
        <div class="text-h6">Вход в Universo</div>

        <div class="text-subtitle2 text-grey">Страница авторизации</div>
      </q-card-section>
      <q-separator />
      <q-card-section>
        <q-input
          type="email"
          class=""
          outlined
          v-model="email"
          label="Введите адрес электронной почты"
        />

        <q-input
          type="password"
          class="q-mt-lg"
          outlined
          v-model="password"
          label="Введите пароль"
        />
      </q-card-section>
      <q-card-section class="flex">
        <q-btn
          outline
          color="secondary"
          label="Зарегистрировать аккаунт"
          :to="{ name: 'registration' }"
        />
        <q-space />
        <q-btn outline color="primary" label="Войти" @click="onLogin" />
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useCurrentUserStore } from 'src/stores/current-user';
import { mapActions } from 'pinia';

export default defineComponent({
  name: 'LoginPage',
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    ...mapActions(useCurrentUserStore, ['login', 'getMe', 'logout']),

    onLogin() {
      this.login(this.email, this.password, true)
        .then((res) => {
          console.log('result', res);
          this.getMe().then(() => {
            this.$router.push({
              name: 'projects',
            });
          });
        })
        .catch((res) => {
          console.log('error', res);
        });
    },
  },
});
</script>
