<template>
  <section class="login_modal">
    <div class="login_field">
      <label for="userName">Username: </label>
      <input
        type="text"
        id="login-username"
        v-model="username"
        required
        />
    </div>
    <div class="login_field">
      <label for="password">Password: </label>
      <input
        type="password"
        id="login-password"
        v-model="password"
        required
        />
    </div>
    <div class="login_field">
      <button
        type="button"
        id="loginButton"
        v-on:click="login()"
        >Login</button>
    </div>
  </section>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'

const props = defineProps<{
  username:string
  password:string
}>()
const data = {
  username: useVModel(props, 'username', defineEmits(['update:username'])),
  password:useVModel(props, 'password', defineEmits(['update:password']))
}
</script>

<script lang="ts">
import { defineComponent, computed, PropType, defineProps, defineEmits} from 'vue';
import { LoginHelper, Session } from '../lib/session';
import { storage } from '../session_storage';

export default defineComponent({
  methods: {
    login: function() {
     new LoginHelper(this.username, this.password).login()
      .then((session)=>{
      console.log(session, "adding to storage")
      storage.AddSession(session)
      }).catch((e)=>{
        if(e.code == "ERR_BAD_REQUEST") {
          alert("invalid username/password")
          return
        }
        alert("unknown error, please report")
        console.log(e)
      })
    },
  },
});
</script>
