next/pages/auth/login.vue

<script lang="ts" setup>
	import { reactive } from "vue";
	import { notification } from "ant-design-vue";
	interface FormState {
		username: string;
		password: string;
	}
	definePageMeta({
		auth: {
			unauthenticatedOnly: true,
			navigateAuthenticatedTo: "/",
		},
		middleware: ["auth"],
	});

	const formState = reactive<FormState>({
		username: "",
		password: "",
	});

	const onFinish = async (values: any) => {
		const { signIn, data } = useAuth();

		let reso: any;
		try {
			reso = await signIn(values);

			await navigateTo({
				path: "/",
			});
		} catch (e: any) {
			if (e.data) {
				notification["error"]({
					message: h("div", { innerHTML: e.data.message }),
				});
			}
		}
	};
</script>
<template>
	<a-form :model="formState" name="basic" :label-col="{ span: 8 }" autocomplete="off" :colon="false" layout="vertical" @finish="onFinish">
		<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Username required!' }]">
			<a-input data-testid="login.username" v-model:value="formState.username" />
		</a-form-item>
		<a-form-item :colon="false" label="Password" name="password" :rules="[{ required: true, message: 'Password required!' }]">
			<a-input-password data-testid="login.password" v-model:value="formState.password" />
		</a-form-item>
		<a-form-item>
			<a-row :justify="'center'" :align="'middle'">
				<a-col>
					<a-button data-testid="login.submit" type="primary" html-type="submit">Log in</a-button>
				</a-col>
			</a-row>
		</a-form-item>
	</a-form>
</template>