Enhance signin flow: add toast notifications for error handling and update background color variable

app/app.vue

@@ -1,4 +1,5 @@
 <template>
+	<ToastContainer />
 	<NuxtLayout>
 		<NuxtPage />
 	</NuxtLayout>

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)

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>
 

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);