90 lines
3.0 KiB
Vue
90 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import * as z from 'zod'
|
|
import type { FormSubmitEvent } from '@nuxt/ui'
|
|
|
|
definePageMeta({
|
|
layout: "settings",
|
|
middleware: ["login-required"]
|
|
})
|
|
const toast = useToast()
|
|
|
|
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",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
first_name: user_data.value.first_name,
|
|
last_name: user_data.value.last_name,
|
|
email: user_data.value.email
|
|
})
|
|
}).then(async response => {
|
|
|
|
if (response.ok) {
|
|
toast.add({
|
|
title: "Done!",
|
|
description: "It's changed!",
|
|
color: "success"
|
|
})
|
|
}
|
|
else {
|
|
const body = await response.json()
|
|
toast.add({
|
|
title: 'Error',
|
|
description : body.data.detail || 'Something went wrong',
|
|
color: 'error'
|
|
})
|
|
}
|
|
})
|
|
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>
|
|
|
|
<style>
|
|
|
|
</style> |