<script lang="ts" setup>
import { ref, reactive } from 'vue'
import useApiFetch from '../composables/useApiFetch';
	interface FormState {
		username: string;
		password: string;
	}
	const formState = reactive<FormState>({
		username: "",
		password: ""
	})
	const onFinish = async (values: any) => {
		await useApiFetch("/auth/login", {
			method: "post",
			body: values,
		})
	}
</script>
<template>
	<a-form :model="formState" name="basic" :label-col="{span: 8}" autocomplete="off" @finish="onFinish">
		<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Username required!' }]">
			<a-input v-model:value="formState.username"/>
		</a-form-item>
		<a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Password required!' }]">
			<a-input-password v-model:value="formState.password"/>
		</a-form-item>
		<a-form-item>
			<a-button type="primary" html-type="submit">Log in</a-button>
		</a-form-item>
	</a-form>
</template>