edit: add error handling and rename keys

composables/api.ts

@@ -50,8 +50,8 @@ export interface UserData {
   username: string
   fullname: string
   mail: string
-  'mail-aliases': string[]
+  mailalias: string[]
-  'mail-forward': string[]
+  mailforward: string[]
   groups: string[]
   apps: Record<string, { label: string; url: string }>
 }
@@ -65,5 +65,13 @@ export async function useUserInfo() {
     const { data } = await useApi('/me')
     userData.value = data.value as UserData
   }
-  return userData as Ref<UserData>
+
+  const update = (data: Partial<UserData>) => {
+    Object.assign(userData.value as UserData, data)
+  }
+
+  return {
+    userData: userData as Ref<UserData>,
+    update,
+  }
 }

layouts/default.vue

@@ -5,7 +5,7 @@ const head = useLocaleHead({
 })
 const { t } = useI18n()
 const isLoggedIn = useIsLoggedIn()
-const me = await useUserInfo()
+const { userData: me } = await useUserInfo()
 
 const colorMode = useColorMode()
 const themes = [

pages/edit.vue

@@ -2,32 +2,42 @@
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/yup'
 import * as yup from 'yup'
+import type { UserData } from '@/composables/api'
 
-const me = await useUserInfo()
+const { userData, update } = await useUserInfo()
 
-const { handleSubmit } = useForm({
+const { handleSubmit, setFieldError } = useForm({
   validationSchema: toTypedSchema(
     yup.object({
-      username: yup.string(),
+      username: yup.string().required(),
       fullname: yup.string().required().min(1),
-      mailAliases: yup.array().of(yup.string().email()),
+      mailalias: yup.array().of(yup.string().email().required()),
-      mailForward: yup.array().of(yup.string().email()),
+      mailforward: yup.array().of(yup.string().email().required()),
     }),
   ),
   initialValues: {
-    username: me.value.username,
+    username: userData.value.username,
-    fullname: me.value.fullname,
+    fullname: userData.value.fullname,
-    mailAliases: me.value['mail-aliases'].length
+    mailalias: userData.value.mailalias.length
-      ? me.value['mail-aliases']
+      ? userData.value.mailalias
       : [''],
-    mailForward: me.value['mail-forward'].length
+    mailforward: userData.value.mailforward.length
-      ? me.value['mail-forward']
+      ? userData.value.mailforward
       : [''],
   },
 })
 
-const onSubmit = handleSubmit((form) => {
+const onSubmit = handleSubmit(async (form) => {
-  console.log('SUBMIT user edit', form)
+  const { data, error } = await useApi<UserData>('/update', {
+    method: 'PUT',
+    body: form,
+  })
+
+  if (error.value) {
+    setFieldError(error.value.data.path, error.value.data.error_key)
+  } else if (data.value) {
+    update(data.value)
+  }
 })
 </script>
 
@@ -58,21 +68,17 @@ const onSubmit = handleSubmit((form) => {
       </div>
 
       <div class="basis-1/2">
-        <FormField
+        <FormField name="mailalias" :label="$t('mail_addresses')" class="mb-10">
-          name="mailAliases"
-          :label="$t('mail_addresses')"
-          class="mb-10"
-        >
           <TextInputList
-            name="mailAliases"
+            name="mailalias"
             type="text"
             :placeholder="$t('new_mail')"
           />
         </FormField>
 
-        <FormField name="mailForward" :label="$t('mail_forward')">
+        <FormField name="mailforward" :label="$t('mail_forward')">
           <TextInputList
-            name="mailForward"
+            name="mailforward"
             type="text"
             :placeholder="$t('new_forward')"
           />

pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { t } = useI18n()
-const userData = await useUserInfo()
+const { userData } = await useUserInfo()
 
 const me = computed(() => {
   const appTileColors = [