From ce44cd03b9dc28117322e3c20aea469d4315e0e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Fri, 5 Dec 2025 17:39:57 +0100
Subject: [PATCH] Enhance signin flow: add toast notifications for error
 handling and update background color variable

---
 app/app.vue                | 1 +
 app/composables/useAuth.ts | 2 ++
 app/pages/auth/signin.vue  | 7 ++++++-
 app/styles/_variables.scss | 2 +-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 34112cc..ac86994 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,4 +1,5 @@
 <template>
+	<ToastContainer />
 	<NuxtLayout>
 		<NuxtPage />
 	</NuxtLayout>
diff --git a/app/composables/useAuth.ts b/app/composables/useAuth.ts
index f5ee2e4..7c2f9b1 100644
--- a/app/composables/useAuth.ts
+++ b/app/composables/useAuth.ts
@@ -28,6 +28,8 @@ export const useAuth = () => {
 			)
 
 			refreshToken.value = res.data.refreshToken
+
+			await navigateTo("/")
 		} catch (e) {
 			if (axios.isAxiosError(e) && e.response?.data?.message) {
 				throw new Error(e.response.data.message)
diff --git a/app/pages/auth/signin.vue b/app/pages/auth/signin.vue
index 25629bd..47739bf 100644
--- a/app/pages/auth/signin.vue
+++ b/app/pages/auth/signin.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const auth = useAuth()
+const toast = useToast()
 
 const submit = async (e: any) => {
 	let data: any
@@ -8,7 +9,11 @@ const submit = async (e: any) => {
 		data = Object.fromEntries(new FormData(e?.target as HTMLFormElement))
 	} catch {}
 
-	await auth.signin(data.email, data.password, data.remember)
+	try {
+		await auth.signin(data.email, data.password, data.remember)
+	} catch (e: string | any) {
+		toast.show(e, "error")
+	}
 }
 </script>
 
diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
index 8cb30c7..5045e02 100644
--- a/app/styles/_variables.scss
+++ b/app/styles/_variables.scss
@@ -1,5 +1,5 @@
 $color-accent: rgb(255, 69, 58);
-$color-background: #1a202c;
+$color-background: oklch(14.1% 0.005 285.823); // #1a202c
 $color-text: rgba(255, 255, 255, 0.92);
 $color-placeholder-text: rgba(255, 255, 255, 0.44);
 $color-border: rgba(255, 255, 255, 0.16);