update edit view with feedback

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<boolean | null> = 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<UserData>('/update', {
+  loading.value = true
+
+  const { error, data } = await useApi<
+    Pick<UserData, 'fullname' | 'mailalias' | 'mailforward'>
+  >('/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
 })
 </script>
 
@@ -46,9 +86,11 @@ const onSubmit = handleSubmit(async (form) => {
     <PageTitle :text="$t('footerlink_edit')" />
 
     <form novalidate class="my-10" @submit="onSubmit">
-      <div class="sm:flex sm:justify-between">
-        <div class="sm:w-1/3">
-          <FormField name="username" :label="$t('username')" class="mb-3">
+      <BaseAlert v-show="feedback" v-bind="feedback" class="mb-10" />
+
+      <div class="lg:flex lg:justify-between">
+        <div class="lg:w-1/2 lg:me-20">
+          <!-- <FormField name="username" :label="$t('username')" class="mb-3">
             <TextInput
               name="username"
               type="text"
@@ -56,7 +98,7 @@ const onSubmit = handleSubmit(async (form) => {
               disabled
               class="w-full"
             />
-          </FormField>
+          </FormField> -->
 
           <FormField name="fullname" :label="$t('fullname')">
             <TextInput
@@ -69,7 +111,7 @@ const onSubmit = handleSubmit(async (form) => {
           </FormField>
         </div>
 
-        <div class="basis-1/2 mt-10 sm:mt-0">
+        <div class="basis-1/2 mt-10 lg:mt-0">
           <TextInputList
             name="mailalias"
             type="email"
@@ -89,14 +131,21 @@ const onSubmit = handleSubmit(async (form) => {
         </div>
       </div>
 
+      <!-- SR "loading" announcement -->
+      <BaseAlert
+        :message="loading ? $t('api.processing') : ''"
+        class="sr-only"
+        assertive
+      />
+
       <div class="flex mt-10">
         <NuxtLink to="/password" class="btn btn-primary">
           {{ $t('change_password') }}
         </NuxtLink>
-        <NuxtLink to="/" class="btn ml-auto mr-2">
+        <NuxtLink to="/" class="btn ml-auto me-2">
           {{ $t('cancel') }}
         </NuxtLink>
-        <YButton :text="$t('save')" type="submit" variant="success" />
+        <SubmitButton :loading="loading" variant="success" />
       </div>
     </form>
   </div>