better ui

app/components/main_header.vue

@@ -2,6 +2,7 @@
 import { ui_colors_dropdown } from '~/composables/set_colors';
 
 const loggedIn = ref(true);
+const logout_prompt = ref(false);
 
 const props = defineProps({
 
@@ -9,10 +10,18 @@ const props = defineProps({
     type: String,
     required: false,
     default: "Home"
+  },
+  settings_link: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 
 })
 
+
+
+
 </script>
 <template>
  <UHeader :toggle="false" class="pop mb-4">
@@ -24,8 +33,9 @@ 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" v-if="loggedIn" />
+            <UButton icon="lucide:settings" variant="ghost" color="neutral" :to="props.settings_link ? '/settings/general' : undefined" v-if="loggedIn" />
-            <UModal :ui="{ overlay: 'bg-black opacity-75'}">
+            <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" v-if="loggedIn" />
               
               <template #content>
@@ -35,13 +45,14 @@ const props = defineProps({
                     You will have to login again.
                   </p>
                   <div class="flex gap-4 flex-col justify-end">
-                    <UButton class="w-full dark:bg-zinc-950 hover:dark:bg-zinc-900 active:dark:bg-black" variant="soft" color="neutral" >No</UButton>
+                    <UButton class="w-full 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">Yes</UButton>
+                    <UButton class="w-full" variant="soft" color="error" to="/logout">Yes</UButton>
                   </div>
                 </div>
               </template>
+
             </UModal>
-            <UButton icon="lucide:log-in" variant="soft" color="success" v-if="!loggedIn" >Login</UButton>
+            <UButton icon="lucide:log-in" variant="soft" color="success" v-if="!loggedIn" to="/login">Login</UButton>
           </template>
     </UHeader>
 </template>

app/layouts/settings.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+    const settings_submenu = ref([
+        {
+            label: "General",
+            icon: "lucide:settings",
+            to: "/settings/general"
+        },
+        {
+            label: "Security",
+            icon: "lucide:lock",
+            to: "/settings/security"
+        }
+    ])
+</script>
+
+<template>
+    <MainHeader class="mb-0" :settings_link="false"/>
+    <UNavigationMenu :items="settings_submenu" class="justify-center mt-2 mb-2"/>
+    <slot />
+</template>

app/pages/index.vue

@@ -3,22 +3,39 @@
   const video = ref(0);
   const url = ref("");
   const in_url = ref("");
+  const output_name = ref("");
 
   function get_yt_vid() {
     url.value = in_url.value
-    video.value = 1
+    if (in_url.value !== "") video.value = 1
+    else video.value = 0
   }
 
+  function start_conversion() {
+    return fetch("/convert", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          url: url.value,
+          name: output_name.value,
+        })
+      }).then(r => {
+        if(r.status == 401) navigateTo("/login")
+      })
+    }
+
 </script>
 
 <template>
     <MainHeader/>
-    <div class="justify-center flex flex-col mt-4 mb-4 w-full">
+    <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>
 
          <div class="w-full flex self-center justify-center">
         <UInput
-            class="self-center geist-mono mt-3 mb-3 max-md:w-3/4 w-2/3 2xl:w-1/2" 
+            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" 
             :ui="{ base: 'rounded-2xl h-15 text-toned', trailing: 'p-0' }"
             placeholder="Search for a YouTube video..."
             v-model="in_url" >
@@ -35,14 +52,14 @@
           <LazyYoutube :src="url" />
       </div>
 
-      <UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
+      <!---<UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
           <UInput type="text" :value="url" class="w-full" />
-      </UFormField>
+      </UFormField>-->
       <UFormField id="outputFile" class="w-full mt-4 mb-3" label="Output File Name:">
-          <UInput type="text" value="my_audio.mp3" class="w-full" />
+          <UInput type="text" v-model="output_name" class="w-full" />
       </UFormField>
       <div class="text-center">
-          <UButton class="mt-4 rounded-md px-6 py-3 text-white">Convert to MP3</UButton>
+          <UButton class="mt-4 rounded-md px-6 py-3 text-white" loading-auto @click="start_conversion()">Convert to MP3</UButton>
       </div>
     </div>
 
@@ -63,7 +80,7 @@
     var(--color-red-500)
   );
   background-size: 400% 100%;
-  animation: rgb 10s linear infinite;
+  animation: rgb 15s linear infinite;
 
   -webkit-background-clip: text;
   background-clip: text;

app/pages/login.vue

@@ -4,6 +4,8 @@ import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
 
 const toast = useToast()
 
+const wrong_login = ref(false)
+
 const fields: AuthFormField[] = [{
   name: 'email',
   type: 'email',
@@ -22,12 +24,7 @@ const fields: AuthFormField[] = [{
   type: 'checkbox'
 }]
 
-const otp_fields: AuthFormField[] = [{
+
-  name: 'otp',
-  type: 'otp',
-  length: 6,
-  placeholder: '*'
-}]
 
 
 const schema = z.object({
@@ -56,32 +53,19 @@ function onSubmit(payload: FormSubmitEvent<Schema>) {
           class: 'rounded-full',
           variant: 'solid'
         }"
-    />
+    >
+        <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>
+    </UAuthForm>
     </UPageCard>
   </div>
 
-  <!----<div class="flex flex-col items-center justify-center gap-4 p-4">
+
-    <UPageCard class="w-full max-w-md dark:bg-zinc-950 rounded-3xl">
-      <UAuthForm
-        :schema="schema"
-        title="Login"
-        description="Check the code sent to your e-mail"
-        icon="i-lucide-user"
-        :fields="otp_fields"
-        :submit="{
-          label: 'Submit',
-          class: 'rounded-full',
-          variant: 'solid'
-        }"
-        :ui="{
-          otp: 'justify-center'
-        }"
-    >
-    <template #footer>
-      <UButton icon="lucide:rotate-cw" class="w-full rounded-full justify-center" color="success">Resend</UButton>
-    </template>
-  </UAuthForm>
-    </UPageCard>
-  </div>-->
 </template>
 

app/pages/settings/general.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+    definePageMeta({
+        layout: "settings"
+    })
+
+</script>
+
+<template>
+
+</template>

app/pages/settings/index.vue

@@ -0,0 +1,4 @@
+<script setup lang="ts">
+    navigateTo("/settings/general");
+</script>
+

app/pages/settings/security.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+    definePageMeta({
+        layout: "settings"
+    })
+
+</script>
+
+<template>
+
+</template>