<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="12" sm="8" md="4">
        <v-card>
          <v-card-title class="text-h5">Login</v-card-title>
          <v-card-text>
            <v-form>
              <v-text-field v-model="email" label="Email" required></v-text-field>
              <v-text-field v-model="password" label="Password" type="password" required></v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-btn @click="login" color="primary">Login</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>



<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { store } from '@/store';

const email = ref('')
const password = ref('')

async function login() {
  try {
    const response = await axios.post<string>("http://localhost:8080/api/v1/auth/login", { email: email.value, password: password.value})
    if (response.status === 200) {
      store.setToken(response.data)
    } else {
      alert("Invalid Credentials")
    }

  } catch(err) {
    alert("Invalid Credentials")
  }

}


/*
setTimeout(() => {
  console.log(email.value)
  console.log(password.value)
}, 3000);
*/
</script>

<style scoped>

</style>
