From 80dbd05468da1d5604160281b5cc088de93c4a6e 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: Sun, 8 Dec 2024 22:54:40 -0500
Subject: [PATCH] refactor(pages): login add loading indicator to button after
 submit

---
 pages/auth/login.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/pages/auth/login.vue b/pages/auth/login.vue
index c2c60a5..7cfe029 100644
--- a/pages/auth/login.vue
+++ b/pages/auth/login.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 	import { reactive } from "vue";
 	import { notification } from "ant-design-vue";
+
 	interface FormState {
 		username: string;
 		password: string;
@@ -15,23 +16,26 @@
 	useHead({
 		title: "Log In",
 	});
+	const loadRef = ref<boolean>(false);
 
 	const formState = reactive<FormState>({
 		username: "",
 		password: "",
 	});
-	const darkRef = inject<Ref<boolean>>("dark");
+	const darkRef = inject<Ref<boolean>>("dark")!;
 	const onFinish = async (values: any) => {
 		const { signIn } = useAuth();
 
 		try {
+			loadRef.value = true;
 			await signIn(values, { redirect: true, callbackUrl: "/" });
 			const { data } = useAuth();
-			darkRef.value = data.value.user.profile.nightMode;
-			if (darkRef.value) document.body.dataset.theme = "dark";
+			darkRef!.value = data.value?.user?.profile.nightMode || false;
+			if (darkRef!.value) document.body.dataset.theme = "dark";
 			await navigateTo("/");
 		} catch (e: any) {
 			if (e.data) {
+				loadRef.value = false;
 				notification["error"]({
 					message: h("div", { innerHTML: e.data.message }),
 				});
@@ -50,7 +54,7 @@
 		<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-button :loading="loadRef" data-testid="login.submit" type="primary" html-type="submit">Log in</a-button>
 				</a-col>
 			</a-row>
 		</a-form-item>