diff --git a/pages/edit.vue b/pages/edit.vue index 2cd8217..a8fc941 100644 --- a/pages/edit.vue +++ b/pages/edit.vue @@ -4,40 +4,80 @@ import { toTypedSchema } from '@vee-validate/yup' import * as yup from 'yup' import type { UserData } from '@/composables/api' +const { t } = useI18n() const { userData, update } = await useUserInfo() -const { handleSubmit, setFieldError } = useForm({ +const loading: Ref = ref(false) +const feedback: Ref<{ + variant: 'success' | 'warning' | 'error' + icon: string + message: string +} | null> = ref(null) + +const { handleSubmit, setFieldError, resetForm, meta } = useForm({ validationSchema: toTypedSchema( yup.object({ - username: yup.string().required(), + // username: yup.string().required(), fullname: yup.string().required().min(2), - mailalias: yup.array().of(yup.string().email().required()), - mailforward: yup.array().of(yup.string().email().required()), + mailalias: yup.array().of(yup.string().email().required()).required(), + mailforward: yup.array().of(yup.string().email().required()).required(), }), ), initialValues: { - username: userData.value.username, + // username: userData.value.username, fullname: userData.value.fullname, - mailalias: userData.value.mailalias.length - ? userData.value.mailalias - : [''], - mailforward: userData.value.mailforward.length - ? userData.value.mailforward - : [''], + mailalias: userData.value.mailalias, + mailforward: userData.value.mailforward, }, }) +watch( + () => meta.value.touched, + (value) => { + // remove loading and feedback on edition + if (value) { + loading.value = null + feedback.value = null + } + }, +) + const onSubmit = handleSubmit(async (form) => { - const { data, error } = await useApi('/update', { + loading.value = true + + const { error, data } = await useApi< + Pick + >('/update', { method: 'PUT', body: form, }) if (error.value) { - setFieldError(error.value.data.path, error.value.data.error_key) + const errData = error.value.data + if (errData.path) { + setFieldError(errData.path, errData.error) + } else { + feedback.value = { + variant: 'error', + icon: 'mdi:alert', + message: errData.error, + } + } } else if (data.value) { update(data.value) + resetForm({ + values: data.value, + touched: Object.fromEntries( + ['fullname', 'mailalias', 'mailforward'].map((key) => [key, false]), + ), + }) + feedback.value = { + variant: 'success', + icon: 'mdi:thumb-up', + message: t('user_profile_updated'), + } } + loading.value = false }) @@ -46,9 +86,11 @@ const onSubmit = handleSubmit(async (form) => {
-
-
- + + +
+
+ {
-
+
{
+ + +
{{ $t('change_password') }} - + {{ $t('cancel') }} - +