update Edit + Password without BaseForm

pages/edit.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/yup'
 import * as yup from 'yup'
 
 const me = await useUserInfo()
 
-const schema = {
+const { handleSubmit } = useForm({
+  validationSchema: toTypedSchema(
+    yup.object({
       username: yup.string(),
       fullname: yup.string().required().min(1),
       mailAliases: yup.array().of(yup.string().email()),
       mailForward: yup.array().of(yup.string().email()),
-}
+    }),
-const initialValues = {
+  ),
+  initialValues: {
     username: me.value.username,
     fullname: me.value.fullname,
     mailAliases: me.value['mail-aliases'].length
@@ -18,16 +23,17 @@ const initialValues = {
     mailForward: me.value['mail-forward'].length
       ? me.value['mail-forward']
       : [''],
-}
+  },
+})
 
-function onSubmit(form) {
+const onSubmit = handleSubmit((form) => {
   console.log('SUBMIT user edit', form)
-}
+})
 </script>
 
 <template>
   <!-- {{ initialValues }} -->
-  <BaseForm :schema="schema" :initial-values="initialValues" @submit="onSubmit">
+  <form novalidate @submit="onSubmit">
     <div class="flex justify-between">
       <div class="w-1/3">
         <FormField name="username" :label="$t('username')" class="mb-3">
@@ -45,6 +51,8 @@ function onSubmit(form) {
             name="fullname"
             type="text"
             :placeholder="$t('fullname')"
+            autocomplete="name"
+            class="w-full"
           />
         </FormField>
       </div>
@@ -81,5 +89,5 @@ function onSubmit(form) {
       </NuxtLink>
       <YButton :text="$t('ok')" type="submit" variant="success" />
     </div>
-  </BaseForm>
+  </form>
 </template>

pages/password.vue

@@ -1,22 +1,28 @@
 <script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/yup'
 import * as yup from 'yup'
 
-const schema = {
+const { handleSubmit } = useForm({
+  validationSchema: toTypedSchema(
+    yup.object({
       currentPassword: yup.string(),
       newPassword: yup.string().required().min(8),
       confirmNewPassword: yup
         .string()
         .oneOf([yup.ref('newPassword')])
         .required(),
-}
+    }),
+  ),
+})
 
-function onSubmit(form) {
+const onSubmit = handleSubmit((form) => {
   console.log('SUBMIT user password edit', form)
-}
+})
 </script>
 
 <template>
-  <BaseForm :schema="schema" @submit="onSubmit">
+  <form novalidate @submit="onSubmit">
     <!-- FIXME replace with accessible component -->
     <div role="alert" class="alert alert-warning mb-10">
       <Icon name="mdi:warning-outline" size="2em" />
@@ -26,20 +32,35 @@ function onSubmit(form) {
     <div class="md:flex">
       <div class="basis-1/2 mb-10 md:mr-10">
         <FormField name="currentPassword" :label="$t('current_password')">
-          <TextInput name="username" type="text" class="w-full" />
+          <TextInput
+            name="currentPassword"
+            type="text"
+            autocomplete="currrent-password"
+            class="w-full"
+          />
         </FormField>
       </div>
 
       <div class="basis-1/2 md:ml-10">
         <FormField name="newPassword" :label="$t('new_password')" class="mb-3">
-          <TextInput name="newPassword" type="text" class="w-full" />
+          <TextInput
+            name="newPassword"
+            type="text"
+            autocomplete="new-password"
+            class="w-full"
+          />
         </FormField>
 
         <FormField
           name="confirmNewPassword"
           :label="$t('confirm_new_password')"
         >
-          <TextInput name="confirmNewPassword" type="text" class="w-full" />
+          <TextInput
+            name="confirmNewPassword"
+            type="text"
+            autocomplete="new-password"
+            class="w-full"
+          />
         </FormField>
       </div>
     </div>
@@ -50,5 +71,5 @@ function onSubmit(form) {
       </NuxtLink>
       <YButton :text="$t('ok')" type="submit" variant="success" />
     </div>
-  </BaseForm>
+  </form>
 </template>