login complete (fr)

app/components/main_header.vue

@@ -15,11 +15,26 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: true
+  },
+  logged_in: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 
+
+
 })
 
-
+  function logout() {
+    return fetch("/logout").then(
+      (response) => {
+        if (response.ok) {
+          window.location.reload;
+        }
+      }
+    )
+  }
 
 
 </script>
@@ -33,10 +48,10 @@ const props = defineProps({
             <!----<UDropdownMenu :items="ui_colors_dropdown">
                 <UButton icon="lucide:palette" variant="ghost" color="neutral" />
             </UDropdownMenu>-->
-            <UButton icon="lucide:settings" variant="ghost" color="neutral" :to="props.settings_link ? '/settings/general' : undefined" v-if="loggedIn" />
+            <UButton icon="lucide:settings" variant="ghost" color="neutral" :to="props.settings_link ? '/settings/general' : undefined" v-if="props.logged_in" />
             <UModal :ui="{ overlay: 'bg-black opacity-75', content: 'bg-zinc-950 py-3'}" v-model:open="logout_prompt">
 
-              <UButton icon="lucide:log-out" variant="ghost" color="error" class="hover:cursor-pointer" v-if="loggedIn" />
+              <UButton icon="lucide:log-out" variant="ghost" color="error" class="hover:cursor-pointer" v-if="props.logged_in" />
               
               <template #content>
                 <div class="p-4 text-center">
@@ -46,13 +61,13 @@ const props = defineProps({
                   </p>
                   <div class="flex gap-4 flex-col justify-end">
                     <UButton class="w-full hover:cursor-pointer dark:bg-zinc-900 hover:dark:bg-zinc-800 active:dark:bg-black" variant="soft" color="neutral" @click="logout_prompt = false">No</UButton>
-                    <UButton class="w-full" variant="soft" color="error" to="/logout">Yes</UButton>
+                    <UButton class="w-full" variant="soft" color="error" loading-auto @click="logout()">Yes</UButton>
                   </div>
                 </div>
               </template>
 
             </UModal>
-            <UButton icon="lucide:log-in" variant="soft" color="success" v-if="!loggedIn" to="/login">Login</UButton>
+            <UButton icon="lucide:log-in" variant="soft" color="success" v-if="!props.logged_in" to="/login">Login</UButton>
           </template>
     </UHeader>
 </template>

app/pages/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 
+  const { loggedIn } = useUserSession()
+
   const video = ref(0);
   const url = ref("");
   const in_url = ref("");
@@ -29,7 +31,7 @@
 </script>
 
 <template>
-    <MainHeader/>
+    <MainHeader :logged_in="loggedIn"/>
     <div class="justify-center flex flex-col max-sm:mt-5 max-md:mt-7 max-lg:mt-10 lg:mt-15 mb-4 w-full">
         <h1 class="inter font-bold text-center mt-3 mb-3 text-white white-glow max-sm:text-5xl sm:text-6xl md:text-7xl xl:text-8xl rgb-text">Youtube to MP3</h1>
 

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>