<template>
  <div class='ion-padding'>
          <ion-input label="Username"  v-model="username" label-placement="floating" fill="outline" placeholder="Example, john"
                                                                                                ></ion-input>
          <ion-input label="Password" label-placement='floating' fill='outline' v-model="password" type="password" placeholder="Password"></ion-input>
          <ion-text color="danger" v-if="formError">{{ formError }}</ion-text>
          <ion-button @click="login" class=' ion-margin-top' expand='full'>Login</ion-button>
  </div>
</template>
<script setup>

import {  IonButton, IonList,IonLabel,
IonItem, IonInput, toastController, useIonRouter, IonText } from '@ionic/vue';
import { defineComponent, onMounted } from 'vue';

import { userLogin } from '@/composable/settings';

import { ref } from 'vue';

const username = ref()
const password = ref()
const formError = ref(null)

const emit = defineEmits(['userLogin'])
onMounted( () => {
  
})
const login = async () => {
  try{
    const data = await userLogin(username.value, password.value)
    emit('userLogin', {key:data.key})
  }
  catch(error){
    console.info("error ", error)
    formError.value = error.response.data.non_field_errors[0]
    emit('userLogin', {error:error})
  }
}
</script>
