100 lines
2.6 KiB
Vue
100 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
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<any>("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: "emerald",
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
const { refresh: onSubmit, status: accountUpdateStatus } = useFetch<any>("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: "emerald",
|
|
});
|
|
|
|
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" @submit="onSubmit" class="space-y-4">
|
|
<UFormGroup label="" name="avatar" class="flex">
|
|
<InputUploadAvatar
|
|
v-model="state.avatar"
|
|
accept=".png, .jpg, .jpeg, .webp"
|
|
entity="avatars"
|
|
max-size="2"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Name" name="name" required>
|
|
<UInput v-model="state.name" type="text" />
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Email" name="email" required>
|
|
<UInput
|
|
v-model="state.email"
|
|
placeholder="you@example.com"
|
|
icon="i-heroicons-envelope"
|
|
trailing
|
|
type="email"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UAlert
|
|
v-if="auth.user.must_verify_email"
|
|
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: 'gray',
|
|
loading: resendEmailStatus === 'pending',
|
|
click: sendEmailVerification,
|
|
},
|
|
]"
|
|
/>
|
|
|
|
<div class="pt-2">
|
|
<UButton type="submit" label="Save" :loading="accountUpdateStatus === 'pending'" />
|
|
</div>
|
|
</UForm>
|
|
</template>
|