submit form complete

app/pages/index.vue

@@ -1,11 +1,28 @@
 <script setup lang="ts">
+  import * as z from 'zod'
+  import type { FormSubmitEvent } from '@nuxt/ui'
 
   const { loggedIn } = useUserSession()
 
   const video = ref(0);
   const url = ref("");
   const in_url = ref("");
-  const output_name = ref("");
+
+  const music_params_schema = z.object({
+    song: z.string("Song name required"),
+    artist: z.string("Artist name required"),
+    album: z.string().optional()
+  })
+
+
+  type musicParamsSchema = z.output<typeof music_params_schema>
+
+
+  const music_params = reactive<Partial<musicParamsSchema>>({
+    song: undefined,
+    artist: undefined,
+    album: undefined
+  })
 
   function get_yt_vid() {
     url.value = in_url.value
@@ -13,7 +30,7 @@
     else video.value = 0
   }
 
-  function start_conversion() {
+  async function start_conversion(event: FormSubmitEvent<musicParamsSchema>) {
     return fetch("/convert", {
         method: "POST",
         headers: {
@@ -21,10 +38,14 @@
         },
         body: JSON.stringify({
           url: url.value,
-          name: output_name.value,
+          name: music_params.song,
+          artist: music_params.artist,
+          album: music_params.album
         })
       }).then(r => {
-        if(r.status == 401) navigateTo("/login")
+        console.log(r.status)
+        if(r.status == 401) 
+           window.location.href = "/login"
       })
     }
 
@@ -37,32 +58,37 @@
 
          <div class="w-full flex self-center justify-center">
         <UInput
-            class="self-center geist-mono mt-5 mb-5 max-sm:6/7 max-md:w-4/5 max-lg:w-4/5 lg:w-2/3 max-w-300" 
+            class="self-center geist-mono mt-5 mb-5 max-sm:w-[92%] max-md:w-4/5 max-lg:w-4/5 lg:w-2/3 max-w-300" 
             :ui="{ base: 'rounded-2xl h-15 text-toned', trailing: 'p-0' }"
             placeholder="Search for a YouTube video..."
             v-model="in_url" >
             <template #trailing>
-              <UButton class="self-end rounded-r-2xl h-15 px-3" icon="lucide:search" @click="get_yt_vid" />
+              <UButton class="self-end rounded-r-2xl h-15 px-3 hover:cursor-pointer" icon="lucide:search" @click="get_yt_vid" />
             </template>
         </UInput>
         
         </div>
     </div>
-    <div class="w-full max-w-md mx-auto mt-8 p-6 light:bg-zinc-50 dark:bg-zinc-950 rounded-xl" v-if="video">
+    <div class="w-full max-w-md mx-auto mt-8 mb-5 p-7 light:bg-zinc-50 dark:bg-zinc-950 rounded-2xl" v-if="video">
         
       <div class="video-container">
           <LazyYoutube :src="url" />
       </div>
 
-      <!---<UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
+      <UForm :schema="music_params_schema" :state="music_params" @submit="start_conversion()">
-          <UInput type="text" :value="url" class="w-full" />
+        <UFormField name="song" class="w-full mt-4 mb-3" label="Track Name:">
-      </UFormField>-->
+            <UInput type="text" v-model="music_params.song" class="w-full" />
-      <UFormField id="outputFile" class="w-full mt-4 mb-3" label="Output File Name:">
+        </UFormField>
-          <UInput type="text" v-model="output_name" class="w-full" />
+        <UFormField name="artist" class="w-full mt-4 mb-3" label="Artist Name:">
-      </UFormField>
+            <UInput type="text" v-model="music_params.artist"class="w-full" />
-      <div class="text-center">
+        </UFormField>
-          <UButton class="mt-4 rounded-md px-6 py-3 text-white" loading-auto @click="start_conversion()">Convert to MP3</UButton>
+        <UFormField name="album" class="w-full mt-4 mb-3" label="Album Name:">
-      </div>
+            <UInput type="text" v-model="music_params.album" class="w-full" />
+        </UFormField>
+        <div class="text-center">
+            <UButton class="mt-4 rounded-2xl px-9 w-2/3 py-3 justify-center text-center " loading-auto type="submit">Convert to MP3</UButton>
+        </div>
+    </UForm>
     </div>
 
 </template>