<script setup>
defineProps({
  msg: {
    type: String,
    required: true,
  },
});
</script>

<template>
  <div>
    <el-form :model="form" label-width="auto">
      <el-form-item label="Username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password" show-password />
      </el-form-item>
    </el-form>
    <el-button @click="register">Register</el-button>
    <el-button @click="login">Login</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world!",
      apiBaseUrl: "http://localhost:8000",
      form: {
        username: "gourav",
        password: "hello123",
      },
    };
  },

  methods: {
    async login() {
      const url = `${this.apiBaseUrl}/login`;
      const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(this.form),
      };

      const response = await fetch(url, requestOptions)
        .then((response) => response.json())
        .then((data) => {
          console.log(data);
          return data;
        })
        .catch((err) => {
          console.log(err);
          return false;
        });
      console.log("response: ", response);
      if ("message" in response) {
        if (response.message === "authenticated") {
          const token = response.accessToken;
          localStorage.setItem("token", token);
          this.$emit("loggedin", true);
        }
      }
    },

    async register() {
      const url = `${this.apiBaseUrl}/register`;
      const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(this.form),
      };

      await fetch(url, requestOptions)
        .then((response) => response.json())
        .then((data) => console.log(data));
    },
  },
};
</script>
<style scoped></style>
