opnform/client/pages/settings/profile.vue

53 lines
1.1 KiB
Vue
Raw Normal View History

2023-12-09 14:47:03 +00:00
<template>
<div>
<h3 class="font-semibold text-2xl text-gray-900">
Profile details
</h3>
<small class="text-gray-600">Update your username and manage your account details.</small>
<form class="mt-3" @submit.prevent="update" @keydown="form.onKeydown($event)">
<!-- Name -->
<text-input name="name" :form="form" label="Name" :required="true" />
<!-- Email -->
<text-input name="email" :form="form" label="Email" :required="true" />
<!-- Submit Button -->
<v-button :loading="form.busy" class="mt-4">
Save changes
</v-button>
</form>
</div>
</template>
<script setup>
const authStore = useAuthStore()
const user = computed(() => authStore.user)
useOpnSeoMeta({
title: 'Profile'
})
definePageMeta({
middleware: "auth"
})
let form = useForm({
name: '',
email: ''
})
const update = () => {
form.patch('/settings/profile').then((response) => {
authStore.updateUser(response)
useAlert().success('Your info has been updated!')
})
2023-12-09 14:47:03 +00:00
}
onBeforeMount(() => {
// Fill the form with user data.
form.keys().forEach(key => {
form[key] = user.value[key]
})
})
2023-12-09 14:47:03 +00:00
</script>