<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
                variant="outlined"
              ></v-text-field>
              <v-text-field
                v-model="password"
                label="Password"
                type="password"
                required
                variant="outlined"
              ></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>(
      import.meta.env.VITE_BACKEND_URL + "/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>
