<template>
  <div class="registration-page">
    <q-card class="registration-card">
      <q-card-title class="registration-title">
        <div class="registration-color2">
          <span class="text-h6">Вход в Universo</span>
        </div>
        <div class="registration-color">
          <span class="q-pt-none">Страница авторизации</span>
        </div>
      </q-card-title>
      <div class="registration-line"></div>
      <v-divider></v-divider>

      <q-card-text class="registration-title-text">
        <div class="registration-color">
          <span class="q-pt-none" style="margin-left: 20px"
            >Укажите адрес электронной почты</span
          >
        </div>
        <q-input
          v-model="email"
          type="email"
          label="Введите Email"
          outlined
          class="q-mb-md registration-input"
          style="margin-left: 20px"
        />
        <div class="registration-color">
          <span class="q-pt-none" style="margin-left: 20px"
            >Укажите пароль</span
          >
        </div>
        <q-input
          v-model="password"
          type="password"
          label="Введите пароль"
          outlined
          class="q-mb-md registration-input"
          style="margin-left: 20px"
        />
      </q-card-text>

      <v-divider class="registration-line"></v-divider>

      <q-card-actions class="registration-actions">
        <q-btn
          to="/zareg"
          outline
          color="green"
          label="Зарегистрировать аккаунт"
          dense
        />
        <q-btn outline color="blue" label="Войти" dense @click="onLogin" />
        <q-btn
          outline
          color="red"
          label="Выйти из аккаунта"
          dense
          @click="onLogout"
        />
      </q-card-actions>
    </q-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useAuthStore } from 'src/stores/auth.js';
import { mapActions } from 'pinia';
export default defineComponent({
  name: 'RegistrationPage',
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    ...mapActions(useAuthStore, ['login']),
    ...mapActions(useAuthStore, ['logout']),
    onLogin() {
      this.login(this.email, this.password, true)
        .then(() => {
          this.$router.push('/avtoriz');
        })
        .catch((error) => {
          console.log(error.message);
        });
    },

    onLogout() {
      this.logout().then(() => {
        this.$router.push('/profil');
      });
    },
  },
});
</script>

<style scoped>
.registration-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: center;
  margin-top: 30px;
}

.registration-card {
  width: 700px;
  position: relative;

  flex-direction: column;
  align-items: flex-start;
}

.registration-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 10px;
  margin-left: 20px;
  margin-block-end: 15px;
}

.registration-title-text {
  font-size: 15px;
}

.registration {
  margin-top: 100 px;
  margin-bottom: px;
}

.registration-input {
  width: 95%;
}

.registration-actions {
  margin: 10px;
  display: flex;
  justify-content: space-between;
}

.registration-button {
  margin-left: 10px;
}

.registration-line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 10px;
  margin-bottom: 15px;
}
.registration-color {
  color: #646262;
}
.registration-color2 {
  color: #000000;
  width: 200px;
}
</style>
