changes

app/components/main_header.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
+import { ui_colors_dropdown } from '~/composables/set_colors';
 
+const loggedIn = ref(true);
 
 const props = defineProps({
-  ui_colors: {
+
-    type: Array,
-    required: true
-  },
   title: {
     type: String,
     required: false,
@@ -22,10 +21,28 @@ const props = defineProps({
         </template>
         <template #right>
             <UColorModeButton />
-            <UDropdownMenu :items="props.ui_colors">
+            <UDropdownMenu :items="ui_colors_dropdown">
                 <UButton icon="lucide:palette" variant="ghost" color="neutral" />
             </UDropdownMenu>
-        </template>
+            <UButton icon="lucide:settings" variant="ghost" color="neutral" v-if="loggedIn" />
+            <UModal :ui="{ overlay: 'bg-black opacity-75'}">
+              <UButton icon="lucide:log-out" variant="ghost" color="error" v-if="loggedIn" />
+              
+              <template #content>
+                <div class="p-4 text-center">
+                  <h2 class="text-lg font-semibold mb-4 geist">Are you sure?</h2>
+                  <p class="mb-4">
+                    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" variant="soft" color="error">Yes</UButton>
+                  </div>
+                </div>
+              </template>
+            </UModal>
+            <UButton icon="lucide:log-in" variant="soft" color="success" v-if="!loggedIn" >Login</UButton>
+          </template>
     </UHeader>
 </template>
 

app/pages/index.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 
-  const video = ref(1);
+  const video = ref(0);
+  const url = ref("");
+  const in_url = ref("");
+
+  function get_yt_vid() {
+    url.value = in_url.value
+    video.value = 1
+  }
 
 </script>
 
 <template>
-    <MainHeader :ui_colors="ui_colors_dropdown"/>
+    <MainHeader/>
     <div class="justify-center flex flex-col mt-4 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>
 
@@ -13,9 +20,10 @@
         <UInput
             class="self-center geist-mono mt-3 mb-3 max-md:w-3/4 w-2/3 2xl:w-1/2" 
             :ui="{ base: 'rounded-2xl h-15 text-toned', trailing: 'p-0' }"
-            placeholder="Search for a YouTube video..." >
+            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" />
+              <UButton class="self-end rounded-r-2xl h-15 px-3" icon="lucide:search" @click="get_yt_vid" />
             </template>
         </UInput>
         
@@ -24,11 +32,11 @@
     <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="video-container">
-          <LazyYoutube src="https://www.youtube.com/watch?v=-B48W6H2YHE&list=RD-B48W6H2YHE&start_radio=1" />
+          <LazyYoutube :src="url" />
       </div>
 
       <UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
-          <UInput type="text" value="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="w-full" />
+          <UInput type="text" :value="url" class="w-full" />
       </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" />

app/pages/login.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
+
+const toast = useToast()
+
+const fields: AuthFormField[] = [{
+  name: 'email',
+  type: 'email',
+  label: 'Email',
+  placeholder: 'Enter your email',
+  required: true
+}, {
+  name: 'password',
+  label: 'Password',
+  type: 'password',
+  placeholder: 'Enter your password',
+  required: true
+} , {
+  name: 'remember',
+  label: 'Remember me',
+  type: 'checkbox'
+}]
+
+const otp_fields: AuthFormField[] = [{
+  name: 'otp',
+  type: 'otp',
+  length: 6,
+  placeholder: '*'
+}]
+
+
+const schema = z.object({
+  email: z.email('Invalid email'),
+  password: z.string('Password is required').min(8, 'Must be at least 8 characters')
+})
+
+type Schema = z.output<typeof schema>
+
+function onSubmit(payload: FormSubmitEvent<Schema>) {
+  console.log('Submitted', payload)
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-4 p-4 mt-7">
+    <UPageCard class="w-full max-w-md dark:bg-zinc-950 rounded-3xl">
+      <UAuthForm
+        :schema="schema"
+        title="Login"
+        description="Enter your credentials to access your account."
+        icon="i-lucide-user"
+        :fields="fields"
+        :submit="{
+          label: 'Login',
+          class: 'rounded-full',
+          variant: 'solid'
+        }"
+    />
+    </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>
+