refactor(pages): tweak login page

it looks a bit nicer and uses functions from the `useAuth` composable to manage the session

pages/login.vue

@@ -1,31 +1,73 @@
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+	import { ref, reactive } from "vue";
-import useApiFetch from '../composables/useApiFetch';
+	import useApiFetch from "../composables/useApiFetch";
+	import { notification } from "ant-design-vue";
 	interface FormState {
 		username: string;
 		password: string;
 	}
+	definePageMeta({
+		auth: {
+			unauthenticatedOnly: true,
+			navigateAuthenticatedTo: "/",
+		},
+	});
+
 	const formState = reactive<FormState>({
 		username: "",
-		password: ""
+		password: "",
-	})
+	});
+
 	const onFinish = async (values: any) => {
-		await useApiFetch("/auth/login", {
+		const { signIn, data } = useAuth();
-			method: "post",
+
-			body: values,
+		let reso: any;
-		})
+		try {
+			reso = await signIn(values);
+		} catch (e: any) {
+			if (e.data) {
+				notification["error"]({
+					message: h("div", { innerHTML: e.data.message }),
+				});
 			}
+		}
+
+		await navigateTo({
+			path: "/",
+		});
+	};
 </script>
 <template>
-	<a-form :model="formState" name="basic" :label-col="{span: 8}" autocomplete="off" @finish="onFinish">
+	<a-form
-		<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Username required!' }]">
+		: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 v-model:value="formState.username" />
 		</a-form-item>
-		<a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Password required!' }]">
+		<a-form-item
+			:colon="false"
+			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-row :justify="'center'" :align="'middle'">
+				<a-col>
 					<a-button type="primary" html-type="submit">Log in</a-button>
+				</a-col>
+			</a-row>
 		</a-form-item>
 	</a-form>
 </template>