31 lines
1016 B
Vue
31 lines
1016 B
Vue
<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> |