update Edit + Password without BaseForm

pages/edit.vue

@@ -1,33 +1,39 @@
 <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 = {
-  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 = {
-  username: me.value.username,
-  fullname: me.value.fullname,
-  mailAliases: me.value['mail-aliases'].length
-    ? me.value['mail-aliases']
-    : [''],
-  mailForward: me.value['mail-forward'].length
-    ? me.value['mail-forward']
-    : [''],
-}
+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()),
+    }),
+  ),
+  initialValues: {
+    username: me.value.username,
+    fullname: me.value.fullname,
+    mailAliases: me.value['mail-aliases'].length
+      ? me.value['mail-aliases']
+      : [''],
+    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 = {
-  currentPassword: yup.string(),
-  newPassword: yup.string().required().min(8),
-  confirmNewPassword: yup
-    .string()
-    .oneOf([yup.ref('newPassword')])
-    .required(),
-}
+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>