change basic form to form context

src/components/form/admin-set-password-form.tsx

@@ -1,16 +1,15 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { m } from '@/paraglide/messages';
 import { usersQueries } from '@/service/queries';
 import { setUserPassword } from '@/service/user.api';
 import { userSetPasswordSchema } from '@/service/user.schema';
 import { ReturnError } from '@/types/common';
-import { useForm } from '@tanstack/react-form';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { UserWithRole } from 'better-auth/plugins';
 import { toast } from 'sonner';
 import { Button } from '../ui/button';
 import { DialogClose, DialogFooter } from '../ui/dialog';
-import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
-import { Input } from '../ui/input';
+import { Field, FieldGroup } from '../ui/field';
 
 type FormProps = {
   data: UserWithRole;
@@ -39,7 +38,7 @@ const AdminSetPasswordForm = ({ data, onSubmit }: FormProps) => {
     },
   });
 
-  const form = useForm({
+  const form = useAppForm({
     defaultValues: {
       id: data.id,
       password: '',
@@ -62,49 +61,14 @@ const AdminSetPasswordForm = ({ data, onSubmit }: FormProps) => {
       }}
     >
       <FieldGroup>
-        <form.Field
-          name="id"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <Input
-                  type="hidden"
-                  name={field.name}
-                  id={field.name}
-                  value={field.state.value}
-                  aria-invalid={isInvalid}
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-        <form.Field
-          name="password"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>
-                  {m.change_password_form_new_password()}
-                </FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  type="password"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
+        <form.AppField name="id">
+          {(field) => <field.HiddenField />}
+        </form.AppField>
+        <form.AppField name="password">
+          {(field) => (
+            <field.TextField label={m.change_password_form_new_password()} />
+          )}
+        </form.AppField>
         <Field>
           <DialogFooter>
             <DialogClose asChild>
@@ -112,7 +76,9 @@ const AdminSetPasswordForm = ({ data, onSubmit }: FormProps) => {
                 {m.ui_cancel_btn()}
               </Button>
             </DialogClose>
-            <Button type="submit">{m.ui_save_btn()}</Button>
+            <form.AppForm>
+              <form.SubscribeButton label={m.ui_save_btn()} />
+            </form.AppForm>
           </DialogFooter>
         </Field>
       </FieldGroup>