From 6c4e62b3d0ca9fbb55cadcca5a35b4d3ca082997 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Tue, 10 Oct 2023 22:41:54 -0400
Subject: [PATCH] refactor(pages): tweak login page

it looks a bit nicer and uses functions from the `useAuth` composable to manage the session
---
 pages/login.vue | 104 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 73 insertions(+), 31 deletions(-)

diff --git a/pages/login.vue b/pages/login.vue
index a787bbd..6aa8666 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,31 +1,73 @@
-<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>
\ No newline at end of file
+<script lang="ts" setup>
+	import { ref, reactive } from "vue";
+	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: "",
+	});
+
+	const onFinish = async (values: any) => {
+		const { signIn, data } = useAuth();
+
+		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"
+		: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
+			: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>