login complete (fr)

app/pages/login.vue

@@ -35,7 +35,24 @@ const schema = z.object({
 type Schema = z.output<typeof schema>
 
 function onSubmit(payload: FormSubmitEvent<Schema>) {
-  console.log('Submitted', payload)
+  return fetch("/login", {
+    method: "POST",
+    headers: { 
+      "Content-Type" : "application/json"
+    },
+    body: JSON.stringify({
+      email: payload.data.email,
+      password: payload.data.password
+    })
+  }).then((response) => {
+    if (response.ok) 
+      window.location.href = "/";
+    else if (response.status == 401) {
+      wrong_login.value = true;
+      // show for 5 seconds
+      setTimeout(() => wrong_login.value = false, 5000);
+    }
+  })
 }
 </script>
 
@@ -50,17 +67,22 @@ function onSubmit(payload: FormSubmitEvent<Schema>) {
         :submit="{
           label: 'Login',
           class: 'rounded-full',
-          variant: 'soft'
+          variant: 'soft',
+          loadingAuto: true
         }"
+        @submit="onSubmit"
     >
-        <template #validation v-if="wrong_login">
-          <UAlert color="error"
-                  icon="lucide:circle-x" 
-                  variant="soft" 
-                  :ui="{ icon: 'self-center' }"
-                  title="Incorrect Login" 
-                  description="Either your e-mail or your password are wrong."/>
-        </template>
+      <template #validation>
+        <Transition name="slide-fade">
+        <UAlert v-if="wrong_login"
+                color="error"
+                icon="lucide:circle-x" 
+                variant="soft" 
+                :ui="{ icon: 'self-center' }"
+                title="Incorrect Login" 
+                description="Either your e-mail or your password are wrong."/>
+        </Transition>
+      </template>
     </UAuthForm>
     </UPageCard>
   </div>
@@ -68,3 +90,19 @@ function onSubmit(payload: FormSubmitEvent<Schema>) {
 
 </template>
 
+<style>
+.slide-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+.slide-fade-enter-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+.slide-fade-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+</style>