129 lines
2.9 KiB
Vue
129 lines
2.9 KiB
Vue
<script lang="ts" setup>
|
|
import type { IAccountUpdateResponse, IVerificationNotificationResponse } from '~/types/account'
|
|
|
|
const form = ref()
|
|
const auth = useAuthStore()
|
|
|
|
const state = reactive({
|
|
...{
|
|
email: auth.user.email,
|
|
name: auth.user.name,
|
|
avatar: auth.user.avatar,
|
|
},
|
|
})
|
|
|
|
const { refresh: sendEmailVerification, status: resendEmailStatus } = useFetch<IVerificationNotificationResponse>('verification-notification', {
|
|
method: 'POST',
|
|
body: { email: state.email },
|
|
immediate: false,
|
|
watch: false,
|
|
onResponse({ response }) {
|
|
if (response._data?.ok) {
|
|
useToast().add({
|
|
icon: 'i-heroicons-check-circle-20-solid',
|
|
title: response._data.message,
|
|
color: 'primary',
|
|
})
|
|
}
|
|
},
|
|
})
|
|
|
|
const { refresh: onSubmit, status: accountUpdateStatus } = useFetch<IAccountUpdateResponse>('account/update', {
|
|
method: 'POST',
|
|
body: state,
|
|
immediate: false,
|
|
watch: false,
|
|
async onResponse({ response }) {
|
|
if (response?.status === 422) {
|
|
form.value.setErrors(response._data?.errors)
|
|
}
|
|
else if (response._data?.ok) {
|
|
useToast().add({
|
|
icon: 'i-heroicons-check-circle-20-solid',
|
|
title: 'Account details have been successfully updated.',
|
|
color: 'primary',
|
|
})
|
|
|
|
await auth.fetchUser()
|
|
|
|
state.name = auth.user.name
|
|
state.email = auth.user.email
|
|
state.avatar = auth.user.avatar
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UForm
|
|
ref="form"
|
|
:state="state"
|
|
class="space-y-4"
|
|
@submit="onSubmit"
|
|
>
|
|
<UFormField
|
|
label=""
|
|
name="avatar"
|
|
class="flex"
|
|
>
|
|
<InputUploadAvatar
|
|
v-model="state.avatar"
|
|
accept=".png, .jpg, .jpeg, .webp"
|
|
entity="avatars"
|
|
max-size="2"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Name"
|
|
name="name"
|
|
required
|
|
>
|
|
<UInput
|
|
v-model="state.name"
|
|
type="text"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UFormField
|
|
label="Email"
|
|
name="email"
|
|
required
|
|
>
|
|
<UInput
|
|
v-model="state.email"
|
|
placeholder="you@example.com"
|
|
icon="i-heroicons-envelope"
|
|
trailing
|
|
type="email"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UAlert
|
|
v-if="auth.user.must_verify_email"
|
|
variant="subtle"
|
|
color="warning"
|
|
icon="i-heroicons-information-circle-20-solid"
|
|
title="Please confirm your email address."
|
|
description="A confirmation email has been sent to your email address. Please click on the confirmation link in the email to verify your email address."
|
|
:actions="[
|
|
{
|
|
label: 'Resend verification email',
|
|
variant: 'solid',
|
|
color: 'neutral',
|
|
loading: resendEmailStatus === 'pending',
|
|
onClick: () => sendEmailVerification(),
|
|
},
|
|
]"
|
|
/>
|
|
|
|
<div class="pt-2">
|
|
<UButton
|
|
type="submit"
|
|
label="Save"
|
|
:loading="accountUpdateStatus === 'pending'"
|
|
/>
|
|
</div>
|
|
</UForm>
|
|
</template>
|