forms complete

app/pages/settings/general.vue

@@ -1,11 +1,69 @@
 <script setup lang="ts">
+    import * as z from 'zod'
+    import type { FormSubmitEvent } from '@nuxt/ui'
+
     definePageMeta({
         layout: "settings",
         middleware: ["login-required"]
     })
 
+    const { data: user_data, refresh: userRefresh } = useFetch("/me");
+    const loading_btn = ref(false)
+
+    const schema = z.object({
+        first_name: z.string(),
+        last_name: z.string(),
+        email: z.email()
+    })
+
+    type Schema = z.output<typeof schema>
+
+    async function submitChanges(event: FormSubmitEvent<Schema>) {
+        loading_btn.value = true
+        await $fetch("/settings/edit_user", {
+            method: "POST",
+            body: {
+                first_name: user_data.value.first_name,
+                last_name: user_data.value.last_name,
+                email: user_data.value.email
+            }
+        })  
+        loading_btn.value = false
+    }
 </script>
 
 <template>
+    <UContainer class="max-w-4xl">
+        <UForm :schema="schema" :state="user_data" @submit="submitChanges">
+        <div class="gap-3 justify-between">
+            <div class="flex-1 w-full gap-2 mt-5 mb-5">
+                <UFormField label="First Name" orientation="horizontal" name="first_name">
+                    <UInput v-if="user_data" v-model="user_data.first_name"/>
+                    <USkeleton v-else class="w-53 h-7" />
+                </UFormField>
+            </div> 
+            <div class="flex-1 w-full gap-2 mt-5 mb-5">
+                <UFormField label="Last Name" orientation="horizontal">
+                    <UInput v-if="user_data" v-model="user_data.last_name" required/>
+                    <USkeleton v-else class="w-53 h-7" />
+     
+                </UFormField>
+            </div>
+            <div class="flex-1 w-full gap-2 mt-5 mb-5">
+                <UFormField label="E-mail" orientation="horizontal" name="email">
+                    <UInput v-if="user_data" v-model="user_data.email" required/>
+                    <USkeleton v-else class="w-53 h-7" />
+                </UFormField>
+            </div>
+            <div class="text-center justify-items-center">
+                <UButton variant="soft" icon="lucide:circle-check-big" :loading="loading_btn" type="submit" size="lg" :block="true" class="max-w-4/5 mt-4 mb-4 rounded-full">Submit</UButton>
+            </div>
+        </div>
+        </UForm>
+    </UContainer>
 
-</template>
+</template>
+
+<style>
+    
+</style>