From ff2140b9ef150045b7d4c1bed2e3233406741316 Mon Sep 17 00:00:00 2001
From: Sam <luu.dat.tham@gmail.com>
Date: Fri, 23 Jan 2026 16:49:24 +0700
Subject: [PATCH] change basic form to form context

---
 messages/en.json                              |   1 +
 messages/vi.json                              |   1 +
 src/components/form/admin-ban-user-form.tsx   | 142 +++---------
 .../form/admin-create-user-form.tsx           | 157 +++----------
 .../form/admin-set-password-form.tsx          |  62 ++---
 .../form/admin-set-user-role-form.tsx         |  90 ++------
 .../form/admin-update-user-info-form.tsx      |  60 +----
 src/components/form/change-password-form.tsx  | 148 +++---------
 src/components/form/form-components.tsx       | 218 ++++++++++++++++++
 src/components/form/profile-form.tsx          |  75 ++----
 src/components/form/settings-form.tsx         | 101 ++------
 src/components/form/signin-form.tsx           |  82 ++-----
 src/components/form/user-settings-form.tsx    |  76 ++----
 src/components/user/add-new-user-dialog.tsx   |   6 +-
 src/hooks/use-app-form.ts                     |  29 +++
 src/routeTree.gen.ts                          |  21 --
 src/routes/(app)/route.tsx                    |  12 +
 src/routes/(auth)/sign-up.tsx                 |  20 --
 src/service/queries.ts                        |  11 +-
 src/service/setting.api.ts                    |  20 ++
 src/service/user.schema.ts                    |  30 +++
 21 files changed, 558 insertions(+), 804 deletions(-)
 create mode 100644 src/components/form/form-components.tsx
 create mode 100644 src/hooks/use-app-form.ts
 delete mode 100644 src/routes/(auth)/sign-up.tsx

diff --git a/messages/en.json b/messages/en.json
index e355932..d10d513 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -93,6 +93,7 @@
   "settings_form_description": "Description",
   "settings_form_keywords": "keywords",
   "settings_form_language": "Language",
+  "settings_form_select_language": "Please select language",
   "settings_ui_title": "Settings",
   "settings_messages_update_success": "Updated settings successfully!",
   "settings_messages_update_fail": "Update fail!",
diff --git a/messages/vi.json b/messages/vi.json
index b76505f..4239ace 100644
--- a/messages/vi.json
+++ b/messages/vi.json
@@ -93,6 +93,7 @@
   "settings_form_description": "Mô tả website",
   "settings_form_keywords": "Từ khóa",
   "settings_form_language": "Ngôn ngữ",
+  "settings_form_select_language": "Hãy chọn ngôn ngữ",
   "settings_ui_title": "Cài đặt",
   "settings_messages_update_success": "Cập nhật cài đặt thành công!",
   "settings_messages_update_fail": "Cập nhật cài đặt thất bại!",
diff --git a/src/components/form/admin-ban-user-form.tsx b/src/components/form/admin-ban-user-form.tsx
index 815ba55..1d09900 100644
--- a/src/components/form/admin-ban-user-form.tsx
+++ b/src/components/form/admin-ban-user-form.tsx
@@ -1,21 +1,12 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { m } from '@/paraglide/messages';
 import { userBanSchema } from '@/service/user.schema';
 import { WarningIcon } from '@phosphor-icons/react';
-import { useForm } from '@tanstack/react-form';
 import { UserWithRole } from 'better-auth/plugins';
 import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
 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 {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
-import { Textarea } from '../ui/textarea';
+import { Field, FieldGroup } from '../ui/field';
 import { useBanContext } from '../user/ban-user-dialog';
 
 type FormProps = {
@@ -25,7 +16,7 @@ type FormProps = {
 const BanUserForm = ({ data }: FormProps) => {
   const { setSubmitData, setOpen, setOpenConfirm } = useBanContext();
 
-  const form = useForm({
+  const form = useAppForm({
     defaultValues: {
       id: data.id,
       banReason: '',
@@ -59,99 +50,33 @@ const BanUserForm = ({ data }: FormProps) => {
           <AlertTitle>
             {m.profile_form_name()}: {data.name}
           </AlertTitle>
-          <AlertDescription className="sr-only">adá</AlertDescription>
+          <AlertDescription className="sr-only">{data.name}</AlertDescription>
         </Alert>
-        <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="banReason"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid} className="col-span-2">
-                <FieldLabel htmlFor={field.name}>
-                  {m.users_page_ui_form_ban_reason()}:
-                </FieldLabel>
-                <Textarea
-                  id={field.name}
-                  name={field.name}
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  rows={4}
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-        <form.Field
-          name="banExp"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>
-                  {m.users_page_ui_form_ban_exp()}
-                </FieldLabel>
-                <Select
-                  name={field.name}
-                  value={String(field.state.value)}
-                  onValueChange={(value) => field.handleChange(Number(value))}
-                >
-                  <SelectTrigger aria-invalid={isInvalid}>
-                    <SelectValue
-                      placeholder={m.users_page_ui_select_placeholder_ban_exp()}
-                    />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="1">
-                      {m.exp_time({ time: '1' })}
-                    </SelectItem>
-                    <SelectItem value="7">
-                      {m.exp_time({ time: '7' })}
-                    </SelectItem>
-                    <SelectItem value="15">
-                      {m.exp_time({ time: '15' })}
-                    </SelectItem>
-                    <SelectItem value="30">
-                      {m.exp_time({ time: '30' })}
-                    </SelectItem>
-                    <SelectItem value="180">
-                      {m.exp_time({ time: '180' })}
-                    </SelectItem>
-                    <SelectItem value="365">
-                      {m.exp_time({ time: '365' })}
-                    </SelectItem>
-                    <SelectItem value="99999">
-                      {m.exp_time({ time: '99999' })}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </Field>
-            );
-          }}
-        />
+        <form.AppField name="id">
+          {(field) => <field.HiddenField />}
+        </form.AppField>
+        <form.AppField name="banReason">
+          {(field) => (
+            <field.TextArea label={m.users_page_ui_form_ban_reason()} />
+          )}
+        </form.AppField>
+        <form.AppField name="banExp">
+          {(field) => (
+            <field.SelectNumber
+              label={m.users_page_ui_form_ban_exp()}
+              values={[
+                { label: m.exp_time({ time: '1' }), value: '1' },
+                { label: m.exp_time({ time: '7' }), value: '7' },
+                { label: m.exp_time({ time: '15' }), value: '15' },
+                { label: m.exp_time({ time: '30' }), value: '30' },
+                { label: m.exp_time({ time: '180' }), value: '180' },
+                { label: m.exp_time({ time: '365' }), value: '365' },
+                { label: m.exp_time({ time: '99999' }), value: '99999' },
+              ]}
+              placeholder={m.users_page_ui_select_placeholder_ban_exp()}
+            />
+          )}
+        </form.AppField>
         <Field>
           <DialogFooter>
             <DialogClose asChild>
@@ -159,9 +84,12 @@ const BanUserForm = ({ data }: FormProps) => {
                 {m.ui_cancel_btn()}
               </Button>
             </DialogClose>
-            <Button type="submit" variant="destructive">
-              {m.ui_ban_btn()}
-            </Button>
+            <form.AppForm>
+              <form.SubscribeButton
+                label={m.ui_ban_btn()}
+                variant="destructive"
+              />
+            </form.AppForm>
           </DialogFooter>
         </Field>
       </FieldGroup>
diff --git a/src/components/form/admin-create-user-form.tsx b/src/components/form/admin-create-user-form.tsx
index 0f8cfd4..9343b54 100644
--- a/src/components/form/admin-create-user-form.tsx
+++ b/src/components/form/admin-create-user-form.tsx
@@ -1,22 +1,14 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { m } from '@/paraglide/messages';
 import { usersQueries } from '@/service/queries';
 import { createUser } from '@/service/user.api';
-import { RoleEnum, userCreateSchema } from '@/service/user.schema';
+import { userCreateSchema } from '@/service/user.schema';
 import { ReturnError } from '@/types/common';
-import { useForm } from '@tanstack/react-form';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 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 {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
+import { Field, FieldGroup } from '../ui/field';
 
 type FormProps = {
   onSubmit: (open: boolean) => void;
@@ -44,7 +36,7 @@ const AdminCreateUserForm = ({ onSubmit }: FormProps) => {
     },
   });
 
-  const form = useForm({
+  const form = useAppForm({
     defaultValues: {
       email: '',
       password: '',
@@ -70,114 +62,33 @@ const AdminCreateUserForm = ({ onSubmit }: FormProps) => {
       }}
     >
       <FieldGroup>
-        <form.Field
-          name="email"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid} className="col-span-2">
-                <FieldLabel htmlFor={field.name}>
-                  {m.login_page_form_email()}:
-                </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="email"
-                />
-                {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.login_page_form_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.Field
-          name="name"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>
-                  {m.profile_form_name()}
-                </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="text"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-        <form.Field
-          name="role"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>
-                  {m.profile_form_role()}
-                </FieldLabel>
-                <Select
-                  name={field.name}
-                  value={field.state.value}
-                  onValueChange={(value) =>
-                    field.handleChange(RoleEnum.parse(value))
-                  }
-                >
-                  <SelectTrigger aria-invalid={isInvalid}>
-                    <SelectValue
-                      placeholder={m.users_page_ui_select_placeholder_role()}
-                    />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="admin">
-                      {m.role_tags({ role: 'admin' })}
-                    </SelectItem>
-                    <SelectItem value="user">
-                      {m.role_tags({ role: 'user' })}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
+        <form.AppField name="email">
+          {(field) => <field.TextField label={m.login_page_form_email()} />}
+        </form.AppField>
+        <form.AppField name="password">
+          {(field) => (
+            <field.TextField
+              label={m.login_page_form_password()}
+              type="password"
+            />
+          )}
+        </form.AppField>
+        <form.AppField name="name">
+          {(field) => <field.TextField label={m.profile_form_name()} />}
+        </form.AppField>
+        <form.AppField name="role">
+          {(field) => (
+            <field.Select
+              label={m.profile_form_role()}
+              placeholder={m.users_page_ui_select_placeholder_role()}
+              isRole
+              values={[
+                { value: 'admin', label: m.role_tags({ role: 'admin' }) },
+                { value: 'user', label: m.role_tags({ role: 'user' }) },
+              ]}
+            />
+          )}
+        </form.AppField>
         <Field>
           <DialogFooter>
             <DialogClose asChild>
@@ -185,9 +96,9 @@ const AdminCreateUserForm = ({ onSubmit }: FormProps) => {
                 {m.ui_cancel_btn()}
               </Button>
             </DialogClose>
-            <Button type="submit" variant="destructive">
-              {m.ui_signup_btn()}
-            </Button>
+            <form.AppForm>
+              <form.SubscribeButton label={m.ui_signup_btn()} />
+            </form.AppForm>
           </DialogFooter>
         </Field>
       </FieldGroup>
diff --git a/src/components/form/admin-set-password-form.tsx b/src/components/form/admin-set-password-form.tsx
index 830b31e..a0a3f4c 100644
--- a/src/components/form/admin-set-password-form.tsx
+++ b/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>
diff --git a/src/components/form/admin-set-user-role-form.tsx b/src/components/form/admin-set-user-role-form.tsx
index 6f8031e..00c3094 100644
--- a/src/components/form/admin-set-user-role-form.tsx
+++ b/src/components/form/admin-set-user-role-form.tsx
@@ -1,23 +1,15 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { m } from '@/paraglide/messages';
 import { usersQueries } from '@/service/queries';
 import { setUserRole } from '@/service/user.api';
-import { RoleEnum, userUpdateRoleSchema } from '@/service/user.schema';
+import { userUpdateRoleSchema } 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 {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
+import { Field, FieldGroup } from '../ui/field';
 
 type SetRoleFormProps = {
   data: UserWithRole;
@@ -51,7 +43,7 @@ const AdminSetUserRoleForm = ({ data, onSubmit }: SetRoleFormProps) => {
     },
   });
 
-  const form = useForm({
+  const form = useAppForm({
     defaultValues: userUpdateRoleSchema.parse(defaultFormValues),
     validators: {
       onChange: userUpdateRoleSchema,
@@ -72,61 +64,21 @@ const AdminSetUserRoleForm = ({ data, onSubmit }: SetRoleFormProps) => {
       }}
     >
       <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="role"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>
-                  {m.profile_form_role()}
-                </FieldLabel>
-                <Select
-                  name={field.name}
-                  value={field.state.value}
-                  onValueChange={(value) =>
-                    field.handleChange(RoleEnum.parse(value))
-                  }
-                >
-                  <SelectTrigger aria-invalid={isInvalid}>
-                    <SelectValue
-                      placeholder={m.users_page_ui_select_placeholder_role()}
-                    />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="admin">
-                      {m.role_tags({ role: 'admin' })}
-                    </SelectItem>
-                    <SelectItem value="user">
-                      {m.role_tags({ role: 'user' })}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
+        <form.AppField name="id">
+          {(field) => <field.HiddenField />}
+        </form.AppField>
+        <form.AppField name="role">
+          {(field) => (
+            <field.Select
+              label={m.profile_form_role()}
+              placeholder={m.users_page_ui_select_placeholder_role()}
+              values={[
+                { value: 'admin', label: m.role_tags({ role: 'admin' }) },
+                { value: 'user', label: m.role_tags({ role: 'user' }) },
+              ]}
+            />
+          )}
+        </form.AppField>
         <Field>
           <DialogFooter>
             <DialogClose asChild>
@@ -134,7 +86,9 @@ const AdminSetUserRoleForm = ({ data, onSubmit }: SetRoleFormProps) => {
                 {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>
diff --git a/src/components/form/admin-update-user-info-form.tsx b/src/components/form/admin-update-user-info-form.tsx
index bf5f4b0..e16b08f 100644
--- a/src/components/form/admin-update-user-info-form.tsx
+++ b/src/components/form/admin-update-user-info-form.tsx
@@ -1,16 +1,15 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { m } from '@/paraglide/messages';
 import { usersQueries } from '@/service/queries';
 import { updateUserInformation } from '@/service/user.api';
 import { userUpdateInfoSchema } 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 UpdateUserFormProps = {
   data: UserWithRole;
@@ -38,7 +37,7 @@ const AdminUpdateUserInfoForm = ({ data, onSubmit }: UpdateUserFormProps) => {
       });
     },
   });
-  const form = useForm({
+  const form = useAppForm({
     defaultValues: {
       id: data.id,
       name: data.name,
@@ -61,49 +60,12 @@ const AdminUpdateUserInfoForm = ({ data, onSubmit }: UpdateUserFormProps) => {
       }}
     >
       <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="name"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>
-                  {m.profile_form_name()}
-                </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="text"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
+        <form.AppField name="id">
+          {(field) => <field.HiddenField />}
+        </form.AppField>
+        <form.AppField name="name">
+          {(field) => <field.TextField label={m.profile_form_name()} />}
+        </form.AppField>
         <Field>
           <DialogFooter>
             <DialogClose asChild>
@@ -111,7 +73,9 @@ const AdminUpdateUserInfoForm = ({ data, onSubmit }: UpdateUserFormProps) => {
                 {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>
diff --git a/src/components/form/change-password-form.tsx b/src/components/form/change-password-form.tsx
index 6ea2ca7..25eaa92 100644
--- a/src/components/form/change-password-form.tsx
+++ b/src/components/form/change-password-form.tsx
@@ -1,43 +1,14 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { authClient } from '@/lib/auth-client';
 import { m } from '@/paraglide/messages';
+import {
+  ChangePassword,
+  ChangePasswordFormSchema,
+} from '@/service/user.schema';
 import { KeyIcon } from '@phosphor-icons/react';
-import { useForm } from '@tanstack/react-form';
 import { toast } from 'sonner';
-import z from 'zod';
-import { Button } from '../ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
-import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
-import { Input } from '../ui/input';
-
-const ChangePasswordFormSchema = z
-  .object({
-    currentPassword: z.string().nonempty(
-      m.common_is_required({
-        field: m.change_password_form_current_password(),
-      }),
-    ),
-    newPassword: z.string().nonempty(
-      m.common_is_required({
-        field: m.change_password_form_new_password(),
-      }),
-    ),
-    confirmPassword: z.string().nonempty(
-      m.common_is_required({
-        field: m.change_password_form_confirm_password(),
-      }),
-    ),
-  })
-  .superRefine((data, ctx) => {
-    if (data.newPassword !== data.confirmPassword) {
-      ctx.addIssue({
-        path: ['confirmPassword'],
-        code: z.ZodIssueCode.custom,
-        message: m.change_password_messages_password_not_match(),
-      });
-    }
-  });
-
-type ChangePassword = z.infer<typeof ChangePasswordFormSchema>;
+import { Field, FieldGroup } from '../ui/field';
 
 const defaultValues: ChangePassword = {
   currentPassword: '',
@@ -46,7 +17,7 @@ const defaultValues: ChangePassword = {
 };
 
 const ChangePasswordForm = () => {
-  const form = useForm({
+  const form = useAppForm({
     defaultValues,
     validators: {
       onSubmit: ChangePasswordFormSchema,
@@ -98,86 +69,33 @@ const ChangePasswordForm = () => {
           }}
         >
           <FieldGroup>
-            <form.Field
-              name="currentPassword"
-              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_current_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.Field
-              name="newPassword"
-              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.Field
-              name="confirmPassword"
-              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_confirm_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="currentPassword">
+              {(field) => (
+                <field.TextField
+                  label={m.change_password_form_current_password()}
+                />
+              )}
+            </form.AppField>
+            <form.AppField name="newPassword">
+              {(field) => (
+                <field.TextField
+                  label={m.change_password_form_new_password()}
+                  type="password"
+                />
+              )}
+            </form.AppField>
+            <form.AppField name="confirmPassword">
+              {(field) => (
+                <field.TextField
+                  label={m.change_password_form_confirm_password()}
+                  type="password"
+                />
+              )}
+            </form.AppField>
             <Field>
-              <Button type="submit">{m.ui_change_password_btn()}</Button>
+              <form.AppForm>
+                <form.SubscribeButton label={m.ui_change_password_btn()} />
+              </form.AppForm>
             </Field>
           </FieldGroup>
         </form>
diff --git a/src/components/form/form-components.tsx b/src/components/form/form-components.tsx
new file mode 100644
index 0000000..a0b046e
--- /dev/null
+++ b/src/components/form/form-components.tsx
@@ -0,0 +1,218 @@
+import { useFieldContext, useFormContext } from '@/hooks/use-app-form';
+import { RoleEnum } from '@/service/user.schema';
+import { useStore } from '@tanstack/react-form';
+import { type VariantProps } from 'class-variance-authority';
+import { Button, buttonVariants } from '../ui/button';
+import { Field, FieldError, FieldLabel } from '../ui/field';
+import { Input } from '../ui/input';
+import * as ShadcnSelect from '../ui/select';
+import { Textarea } from '../ui/textarea';
+
+export function SubscribeButton({
+  label,
+  variant = 'default',
+}: {
+  label: string;
+} & VariantProps<typeof buttonVariants>) {
+  const form = useFormContext();
+  return (
+    <form.Subscribe selector={(state) => state.isSubmitting}>
+      {(isSubmitting) => (
+        <Button type="submit" disabled={isSubmitting} variant={variant}>
+          {label}
+        </Button>
+      )}
+    </form.Subscribe>
+  );
+}
+
+export function HiddenField() {
+  const field = useFieldContext<string>();
+  const errors = useStore(field.store, (state) => state.meta.errors);
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
+  return (
+    <Field data-invalid={isInvalid}>
+      <Input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        aria-invalid={isInvalid}
+        type="hidden"
+      />
+      {isInvalid && <FieldError errors={errors} />}
+    </Field>
+  );
+}
+
+export function TextField({
+  label,
+  placeholder,
+  type = 'text',
+}: {
+  label: string;
+  placeholder?: string;
+  type?: string;
+}) {
+  const field = useFieldContext<string>();
+  const errors = useStore(field.store, (state) => state.meta.errors);
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
+  return (
+    <Field data-invalid={isInvalid}>
+      <FieldLabel htmlFor={field.name}>{label}:</FieldLabel>
+      <Input
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        placeholder={placeholder}
+        onChange={(e) => field.handleChange(e.target.value)}
+        aria-invalid={isInvalid}
+        type={type}
+      />
+      {isInvalid && <FieldError errors={errors} />}
+    </Field>
+  );
+}
+
+export function FileField({
+  label,
+  className,
+  ...props
+}: {
+  label: string;
+  className?: string;
+} & React.ComponentProps<'input'>) {
+  const field = useFieldContext<string>();
+  const errors = useStore(field.store, (state) => state.meta.errors);
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
+  return (
+    <Field data-invalid={isInvalid} className={className}>
+      <FieldLabel htmlFor={field.name}>{label}:</FieldLabel>
+      <Input
+        type="file"
+        id={field.name}
+        name={field.name}
+        aria-invalid={isInvalid}
+        {...props}
+      />
+      {isInvalid && <FieldError errors={errors} />}
+    </Field>
+  );
+}
+
+export function TextArea({
+  label,
+  rows = 4,
+}: {
+  label: string;
+  rows?: number;
+}) {
+  const field = useFieldContext<string>();
+  const errors = useStore(field.store, (state) => state.meta.errors);
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
+  return (
+    <Field data-invalid={isInvalid} className="col-span-2">
+      <FieldLabel htmlFor={field.name}>{label}:</FieldLabel>
+      <Textarea
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.value)}
+        aria-invalid={isInvalid}
+        rows={rows}
+      />
+      {isInvalid && <FieldError errors={errors} />}
+    </Field>
+  );
+}
+
+export function Select({
+  label,
+  values,
+  placeholder,
+  isRole = false,
+}: {
+  label: string;
+  values: Array<{ label: string; value: string }>;
+  placeholder?: string;
+  isRole?: boolean;
+}) {
+  const field = useFieldContext<string>();
+  const errors = useStore(field.store, (state) => state.meta.errors);
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
+  return (
+    <Field data-invalid={isInvalid} className="col-span-2">
+      <FieldLabel htmlFor={field.name}>{label}:</FieldLabel>
+      <ShadcnSelect.Select
+        name={field.name}
+        value={String(field.state.value)}
+        onValueChange={(value) =>
+          isRole
+            ? field.handleChange(RoleEnum.parse(value))
+            : field.handleChange(value)
+        }
+      >
+        <ShadcnSelect.SelectTrigger aria-invalid={isInvalid}>
+          <ShadcnSelect.SelectValue placeholder={placeholder} />
+        </ShadcnSelect.SelectTrigger>
+        <ShadcnSelect.SelectContent>
+          <ShadcnSelect.SelectGroup>
+            <ShadcnSelect.SelectLabel>{label}</ShadcnSelect.SelectLabel>
+            {values.map((value) => (
+              <ShadcnSelect.SelectItem key={value.value} value={value.value}>
+                {value.label}
+              </ShadcnSelect.SelectItem>
+            ))}
+          </ShadcnSelect.SelectGroup>
+        </ShadcnSelect.SelectContent>
+      </ShadcnSelect.Select>
+      {isInvalid && <FieldError errors={errors} />}
+    </Field>
+  );
+}
+
+export function SelectNumber({
+  label,
+  values,
+  placeholder,
+}: {
+  label: string;
+  values: Array<{ label: string; value: string }>;
+  placeholder?: string;
+}) {
+  const field = useFieldContext<number>();
+  const errors = useStore(field.store, (state) => state.meta.errors);
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+
+  return (
+    <Field data-invalid={isInvalid} className="col-span-2">
+      <FieldLabel htmlFor={field.name}>{label}:</FieldLabel>
+      <ShadcnSelect.Select
+        name={field.name}
+        value={field.state.value === 0 ? String('') : String(field.state.value)}
+        onValueChange={(value) => field.handleChange(Number(value))}
+      >
+        <ShadcnSelect.SelectTrigger aria-invalid={isInvalid}>
+          <ShadcnSelect.SelectValue placeholder={placeholder} />
+        </ShadcnSelect.SelectTrigger>
+        <ShadcnSelect.SelectContent>
+          <ShadcnSelect.SelectGroup>
+            <ShadcnSelect.SelectLabel>{label}</ShadcnSelect.SelectLabel>
+            {values.map((value) => (
+              <ShadcnSelect.SelectItem key={value.value} value={value.value}>
+                {value.label}
+              </ShadcnSelect.SelectItem>
+            ))}
+          </ShadcnSelect.SelectGroup>
+        </ShadcnSelect.SelectContent>
+      </ShadcnSelect.Select>
+      {isInvalid && <FieldError errors={errors} />}
+    </Field>
+  );
+}
diff --git a/src/components/form/profile-form.tsx b/src/components/form/profile-form.tsx
index 3f707fc..fdb8d7b 100644
--- a/src/components/form/profile-form.tsx
+++ b/src/components/form/profile-form.tsx
@@ -1,18 +1,17 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { authClient } from '@/lib/auth-client';
 import { m } from '@/paraglide/messages';
 import { uploadProfileImage } from '@/service/profile.api';
 import { ProfileInput, profileUpdateSchema } from '@/service/profile.schema';
 import { UserCircleIcon } from '@phosphor-icons/react';
-import { useForm } from '@tanstack/react-form';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRef } from 'react';
 import { toast } from 'sonner';
 import { useAuth } from '../auth/auth-provider';
 import AvatarUser from '../avatar/avatar-user';
 import RoleBadge from '../avatar/role-badge';
-import { Button } from '../ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
-import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
+import { Field, FieldGroup, FieldLabel } from '../ui/field';
 import { Input } from '../ui/input';
 
 const defaultValues: ProfileInput = {
@@ -25,7 +24,7 @@ const ProfileForm = () => {
   const { data: session, isPending } = useAuth();
   const queryClient = useQueryClient();
 
-  const form = useForm({
+  const form = useAppForm({
     defaultValues: {
       ...defaultValues,
       name: session?.user?.name || '',
@@ -102,58 +101,20 @@ const ProfileForm = () => {
           <FieldGroup>
             <div className="grid grid-cols-3 gap-3">
               <AvatarUser className="h-20 w-20" textSize="2xl" />
-              <form.Field
-                name="image"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid;
-                  return (
-                    <Field data-invalid={isInvalid} className="col-span-2">
-                      <FieldLabel htmlFor={field.name}>Avatar</FieldLabel>
-                      <Input
-                        type="file"
-                        id={field.name}
-                        name={field.name}
-                        accept=".jpg, .jpeg, .png, .webp"
-                        ref={fileInputRef}
-                        onChange={(e) =>
-                          field.handleChange(e.target.files?.[0])
-                        }
-                        aria-invalid={isInvalid}
-                      />
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  );
-                }}
-              />
+              <form.AppField name="image">
+                {(field) => (
+                  <field.FileField
+                    label="Avatar"
+                    className="col-span-2"
+                    accept=".jpg, .jpeg, .png, .webp"
+                    onChange={(e) => field.handleChange(e.target.files?.[0])}
+                  />
+                )}
+              </form.AppField>
             </div>
-            <form.Field
-              name="name"
-              children={(field) => {
-                const isInvalid =
-                  field.state.meta.isTouched && !field.state.meta.isValid;
-                return (
-                  <Field data-invalid={isInvalid}>
-                    <FieldLabel htmlFor={field.name}>
-                      {m.profile_form_name()}
-                    </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}
-                    />
-                    {isInvalid && (
-                      <FieldError errors={field.state.meta.errors} />
-                    )}
-                  </Field>
-                );
-              }}
-            />
+            <form.AppField name="name">
+              {(field) => <field.TextField label={m.profile_form_name()} />}
+            </form.AppField>
             <Field>
               <FieldLabel htmlFor="name">{m.profile_form_email()}</FieldLabel>
               <Input
@@ -171,7 +132,9 @@ const ProfileForm = () => {
               </div>
             </Field>
             <Field>
-              <Button type="submit">{m.ui_update_btn()}</Button>
+              <form.AppForm>
+                <form.SubscribeButton label={m.ui_update_btn()} />
+              </form.AppForm>
             </Field>
           </FieldGroup>
         </form>
diff --git a/src/components/form/settings-form.tsx b/src/components/form/settings-form.tsx
index 4eea632..11e7e70 100644
--- a/src/components/form/settings-form.tsx
+++ b/src/components/form/settings-form.tsx
@@ -1,18 +1,15 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { m } from '@/paraglide/messages';
 import { settingQueries } from '@/service/queries';
 import { updateAdminSettings } from '@/service/setting.api';
 import { settingSchema, SettingsInput } from '@/service/setting.schema';
 import { ReturnError } from '@/types/common';
 import { GearIcon } from '@phosphor-icons/react';
-import { useForm } from '@tanstack/react-form';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
-import { Button } from '../ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
-import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
-import { Input } from '../ui/input';
+import { Field, FieldGroup } from '../ui/field';
 import { Skeleton } from '../ui/skeleton';
-import { Textarea } from '../ui/textarea';
 
 const defaultValues: SettingsInput = {
   site_name: '',
@@ -41,7 +38,7 @@ const SettingsForm = () => {
     },
   });
 
-  const form = useForm({
+  const form = useAppForm({
     defaultValues: {
       ...defaultValues,
       site_name: settings?.site_name?.value || '',
@@ -78,85 +75,21 @@ const SettingsForm = () => {
           }}
         >
           <FieldGroup>
-            <form.Field
-              name="site_name"
-              children={(field) => {
-                const isInvalid =
-                  field.state.meta.isTouched && !field.state.meta.isValid;
-                return (
-                  <Field data-invalid={isInvalid} className="col-span-2">
-                    <FieldLabel htmlFor={field.name}>
-                      {m.settings_form_name()}
-                    </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}
-                    />
-                    {isInvalid && (
-                      <FieldError errors={field.state.meta.errors} />
-                    )}
-                  </Field>
-                );
-              }}
-            />
-            <form.Field
-              name="site_description"
-              children={(field) => {
-                const isInvalid =
-                  field.state.meta.isTouched && !field.state.meta.isValid;
-                return (
-                  <Field data-invalid={isInvalid} className="col-span-2">
-                    <FieldLabel htmlFor={field.name}>
-                      {m.settings_form_description()}
-                    </FieldLabel>
-                    <Textarea
-                      id={field.name}
-                      name={field.name}
-                      value={field.state.value}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      aria-invalid={isInvalid}
-                      rows={4}
-                    />
-                    {isInvalid && (
-                      <FieldError errors={field.state.meta.errors} />
-                    )}
-                  </Field>
-                );
-              }}
-            />
-            <form.Field
-              name="site_keywords"
-              children={(field) => {
-                const isInvalid =
-                  field.state.meta.isTouched && !field.state.meta.isValid;
-                return (
-                  <Field data-invalid={isInvalid} className="col-span-2">
-                    <FieldLabel htmlFor={field.name}>
-                      {m.settings_form_keywords()}
-                    </FieldLabel>
-                    <Textarea
-                      id={field.name}
-                      name={field.name}
-                      value={field.state.value}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                      aria-invalid={isInvalid}
-                      rows={4}
-                    />
-                    {isInvalid && (
-                      <FieldError errors={field.state.meta.errors} />
-                    )}
-                  </Field>
-                );
-              }}
-            />
+            <form.AppField name="site_name">
+              {(field) => <field.TextField label={m.settings_form_name()} />}
+            </form.AppField>
+            <form.AppField name="site_description">
+              {(field) => (
+                <field.TextArea label={m.settings_form_description()} />
+              )}
+            </form.AppField>
+            <form.AppField name="site_keywords">
+              {(field) => <field.TextArea label={m.settings_form_keywords()} />}
+            </form.AppField>
             <Field>
-              <Button type="submit">{m.ui_update_btn()}</Button>
+              <form.AppForm>
+                <form.SubscribeButton label={m.ui_update_btn()} />
+              </form.AppForm>
             </Field>
           </FieldGroup>
         </form>
diff --git a/src/components/form/signin-form.tsx b/src/components/form/signin-form.tsx
index 51e96bd..115af79 100644
--- a/src/components/form/signin-form.tsx
+++ b/src/components/form/signin-form.tsx
@@ -1,14 +1,13 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { authClient } from '@/lib/auth-client';
 import { m } from '@/paraglide/messages';
-import { useForm } from '@tanstack/react-form';
 import { useQueryClient } from '@tanstack/react-query';
 import { createLink, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import z from 'zod';
 import { Button } from '../ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
-import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
-import { Input } from '../ui/input';
+import { Field, FieldGroup } from '../ui/field';
 
 const SignInFormSchema = z.object({
   email: z
@@ -27,7 +26,8 @@ const ButtonLink = createLink(Button);
 const SignInForm = () => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const form = useForm({
+
+  const form = useAppForm({
     defaultValues: {
       email: '',
       password: '',
@@ -91,62 +91,26 @@ const SignInForm = () => {
                 </Button>
               </Field>
               <FieldSeparator>Or continue with</FieldSeparator> */}
-              <form.Field
-                name="email"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid;
-                  return (
-                    <Field data-invalid={isInvalid}>
-                      <FieldLabel htmlFor={field.name}>
-                        {m.login_page_form_email()}
-                      </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="email"
-                        placeholder="m@example.com"
-                        autoComplete="off"
-                      />
-                      {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.login_page_form_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="email">
+                {(field) => (
+                  <field.TextField
+                    label={m.login_page_form_email()}
+                    type="email"
+                  />
+                )}
+              </form.AppField>
+              <form.AppField name="password">
+                {(field) => (
+                  <field.TextField
+                    type="password"
+                    label={m.login_page_form_password()}
+                  />
+                )}
+              </form.AppField>
               <Field>
-                <Button type="submit">{m.ui_login_btn()}</Button>
+                <form.AppForm>
+                  <form.SubscribeButton label={m.ui_login_btn()} />
+                </form.AppForm>
                 <ButtonLink to="/" variant="outline">
                   {m.ui_cancel_btn()}
                 </ButtonLink>
diff --git a/src/components/form/user-settings-form.tsx b/src/components/form/user-settings-form.tsx
index 6f5f04a..4e3c314 100644
--- a/src/components/form/user-settings-form.tsx
+++ b/src/components/form/user-settings-form.tsx
@@ -1,3 +1,4 @@
+import { useAppForm } from '@/hooks/use-app-form';
 import { m } from '@/paraglide/messages';
 import { Locale, setLocale } from '@/paraglide/runtime';
 import { settingQueries } from '@/service/queries';
@@ -5,20 +6,11 @@ import { updateUserSettings } from '@/service/setting.api';
 import { UserSettingInput, userSettingSchema } from '@/service/setting.schema';
 import { ReturnError } from '@/types/common';
 import { GearIcon } from '@phosphor-icons/react';
-import { useForm } from '@tanstack/react-form';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { toast } from 'sonner';
-import { Button } from '../ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
-import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
+import { Field, FieldGroup } from '../ui/field';
 import { Skeleton } from '../ui/skeleton';
 
 const defaultValues: UserSettingInput = {
@@ -49,7 +41,7 @@ const UserSettingsForm = () => {
     },
   });
 
-  const form = useForm({
+  const form = useAppForm({
     defaultValues,
     validators: {
       onSubmit: userSettingSchema,
@@ -68,6 +60,13 @@ const UserSettingsForm = () => {
     }
   }, [data, form]);
 
+  if (isLoading)
+    return (
+      <div>
+        <Skeleton className="h-40 w-full" />
+      </div>
+    );
+
   return (
     <Card className="@container/card col-span-1 @xl/main:col-span-2">
       <CardHeader>
@@ -86,47 +85,22 @@ const UserSettingsForm = () => {
           }}
         >
           <FieldGroup>
-            {isLoading ? (
-              <div className="col-span-2 space-y-2">
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-10 w-full" />
-              </div>
-            ) : (
-              <form.Field
-                name="language"
-                children={(field) => {
-                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid;
-                  return (
-                    <Field data-invalid={isInvalid} className="col-span-2">
-                      <FieldLabel htmlFor={field.name}>
-                        {m.settings_form_language()}
-                      </FieldLabel>
-                      <Select
-                        name={field.name}
-                        value={field.state.value}
-                        onValueChange={(value) => field.handleChange(value)}
-                      >
-                        <SelectTrigger aria-invalid={isInvalid}>
-                          <SelectValue placeholder="Select Language" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="en">English</SelectItem>
-                          <SelectItem value="vi">Vietnamese</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      {isInvalid && (
-                        <FieldError errors={field.state.meta.errors} />
-                      )}
-                    </Field>
-                  );
-                }}
-              />
-            )}
+            <form.AppField name="language">
+              {(field) => (
+                <field.Select
+                  label={m.settings_form_language()}
+                  placeholder={m.settings_form_select_language()}
+                  values={[
+                    { value: 'en', label: 'English' },
+                    { value: 'vi', label: 'Tiếng Việt' },
+                  ]}
+                />
+              )}
+            </form.AppField>
             <Field>
-              <Button type="submit" disabled={isLoading}>
-                {m.ui_update_btn()}
-              </Button>
+              <form.AppForm>
+                <form.SubscribeButton label={m.ui_update_btn()} />
+              </form.AppForm>
             </Field>
           </FieldGroup>
         </form>
diff --git a/src/components/user/add-new-user-dialog.tsx b/src/components/user/add-new-user-dialog.tsx
index 164716a..9ff36f0 100644
--- a/src/components/user/add-new-user-dialog.tsx
+++ b/src/components/user/add-new-user-dialog.tsx
@@ -18,8 +18,8 @@ const AddNewUserButton = () => {
   const prevent = usePreventAutoFocus();
 
   return (
-    <Dialog>
-      <DialogTrigger>
+    <Dialog open={_open} onOpenChange={_setOpen}>
+      <DialogTrigger asChild>
         <Button type="button" variant="default">
           <PlusIcon />
           {m.nav_add_new()}
@@ -39,7 +39,7 @@ const AddNewUserButton = () => {
             {m.nav_add_new()}
           </DialogDescription>
         </DialogHeader>
-        <AdminCreateUserForm />
+        <AdminCreateUserForm onSubmit={_setOpen} />
       </DialogContent>
     </Dialog>
   );
diff --git a/src/hooks/use-app-form.ts b/src/hooks/use-app-form.ts
new file mode 100644
index 0000000..407e82f
--- /dev/null
+++ b/src/hooks/use-app-form.ts
@@ -0,0 +1,29 @@
+import {
+  FileField,
+  HiddenField,
+  Select,
+  SelectNumber,
+  SubscribeButton,
+  TextArea,
+  TextField,
+} from '@/components/form/form-components';
+import { createFormHook, createFormHookContexts } from '@tanstack/react-form';
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+  createFormHookContexts();
+
+export const { useAppForm } = createFormHook({
+  fieldComponents: {
+    HiddenField,
+    TextField,
+    TextArea,
+    Select,
+    SelectNumber,
+    FileField,
+  },
+  formComponents: {
+    SubscribeButton,
+  },
+  fieldContext,
+  formContext,
+});
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 6695d4d..57876cb 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -11,7 +11,6 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as appRouteRouteImport } from './routes/(app)/route'
 import { Route as appIndexRouteImport } from './routes/(app)/index'
-import { Route as authSignUpRouteImport } from './routes/(auth)/sign-up'
 import { Route as authSignInRouteImport } from './routes/(auth)/sign-in'
 import { Route as appauthRouteRouteImport } from './routes/(app)/(auth)/route'
 import { Route as ApiAuthSplatRouteImport } from './routes/api.auth.$'
@@ -36,11 +35,6 @@ const appIndexRoute = appIndexRouteImport.update({
   path: '/',
   getParentRoute: () => appRouteRoute,
 } as any)
-const authSignUpRoute = authSignUpRouteImport.update({
-  id: '/(auth)/sign-up',
-  path: '/sign-up',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const authSignInRoute = authSignInRouteImport.update({
   id: '/(auth)/sign-in',
   path: '/sign-in',
@@ -114,7 +108,6 @@ const appauthAccountChangePasswordRoute =
 
 export interface FileRoutesByFullPath {
   '/sign-in': typeof authSignInRoute
-  '/sign-up': typeof authSignUpRoute
   '/': typeof appIndexRoute
   '/account': typeof appauthAccountRouteRouteWithChildren
   '/kanri': typeof appauthKanriRouteRouteWithChildren
@@ -131,7 +124,6 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/sign-in': typeof authSignInRoute
-  '/sign-up': typeof authSignUpRoute
   '/': typeof appIndexRoute
   '/dashboard': typeof appauthDashboardRoute
   '/api/auth/$': typeof ApiAuthSplatRoute
@@ -149,7 +141,6 @@ export interface FileRoutesById {
   '/(app)': typeof appRouteRouteWithChildren
   '/(app)/(auth)': typeof appauthRouteRouteWithChildren
   '/(auth)/sign-in': typeof authSignInRoute
-  '/(auth)/sign-up': typeof authSignUpRoute
   '/(app)/': typeof appIndexRoute
   '/(app)/(auth)/account': typeof appauthAccountRouteRouteWithChildren
   '/(app)/(auth)/kanri': typeof appauthKanriRouteRouteWithChildren
@@ -168,7 +159,6 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/sign-in'
-    | '/sign-up'
     | '/'
     | '/account'
     | '/kanri'
@@ -185,7 +175,6 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/sign-in'
-    | '/sign-up'
     | '/'
     | '/dashboard'
     | '/api/auth/$'
@@ -202,7 +191,6 @@ export interface FileRouteTypes {
     | '/(app)'
     | '/(app)/(auth)'
     | '/(auth)/sign-in'
-    | '/(auth)/sign-up'
     | '/(app)/'
     | '/(app)/(auth)/account'
     | '/(app)/(auth)/kanri'
@@ -221,7 +209,6 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   appRouteRoute: typeof appRouteRouteWithChildren
   authSignInRoute: typeof authSignInRoute
-  authSignUpRoute: typeof authSignUpRoute
   ApiAuthSplatRoute: typeof ApiAuthSplatRoute
 }
 
@@ -241,13 +228,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof appIndexRouteImport
       parentRoute: typeof appRouteRoute
     }
-    '/(auth)/sign-up': {
-      id: '/(auth)/sign-up'
-      path: '/sign-up'
-      fullPath: '/sign-up'
-      preLoaderRoute: typeof authSignUpRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/(auth)/sign-in': {
       id: '/(auth)/sign-in'
       path: '/sign-in'
@@ -416,7 +396,6 @@ const appRouteRouteWithChildren = appRouteRoute._addFileChildren(
 const rootRouteChildren: RootRouteChildren = {
   appRouteRoute: appRouteRouteWithChildren,
   authSignInRoute: authSignInRoute,
-  authSignUpRoute: authSignUpRoute,
   ApiAuthSplatRoute: ApiAuthSplatRoute,
 }
 export const routeTree = rootRouteImport
diff --git a/src/routes/(app)/route.tsx b/src/routes/(app)/route.tsx
index 9d5a3ce..b3ba338 100644
--- a/src/routes/(app)/route.tsx
+++ b/src/routes/(app)/route.tsx
@@ -2,13 +2,25 @@ import { AuthProvider } from '@/components/auth/auth-provider';
 import Header from '@/components/Header';
 import AppSidebar from '@/components/sidebar/app-sidebar';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import { Locale, setLocale } from '@/paraglide/runtime';
+import { settingQueries } from '@/service/queries';
+import { useQuery } from '@tanstack/react-query';
 import { createFileRoute, Outlet } from '@tanstack/react-router';
+import { useEffect } from 'react';
 
 export const Route = createFileRoute('/(app)')({
   component: RouteComponent,
 });
 
 function RouteComponent() {
+  const { data: language } = useQuery(
+    settingQueries.getCurrentUserLanguageSetting(),
+  );
+  useEffect(() => {
+    if (language) {
+      setLocale(language as Locale);
+    }
+  }, [language]);
   return (
     <AuthProvider>
       <SidebarProvider defaultOpen={false}>
diff --git a/src/routes/(auth)/sign-up.tsx b/src/routes/(auth)/sign-up.tsx
deleted file mode 100644
index 655253b..0000000
--- a/src/routes/(auth)/sign-up.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import SignupForm from '@/components/form/signup-form'
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/(auth)/sign-up')({
-  component: RouteComponent,
-})
-
-function RouteComponent() {
-  return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
-      <div className="flex w-full max-w-sm flex-col gap-6">
-        <h1 className="text-xl font-semibold flex items-center gap-2 self-center">
-          <img src="/logo.svg" alt="Fuware Logo" className="h-8" />
-          Fuware
-        </h1>
-        <SignupForm />
-      </div>
-    </div>
-  )
-}
diff --git a/src/service/queries.ts b/src/service/queries.ts
index 2a7a627..c8bbadd 100644
--- a/src/service/queries.ts
+++ b/src/service/queries.ts
@@ -1,7 +1,11 @@
 import { getSession } from '@/lib/auth/session';
 import { queryOptions } from '@tanstack/react-query';
 import { getAllAudit } from './audit.api';
-import { getAdminSettings, getUserSettings } from './setting.api';
+import {
+  getAdminSettings,
+  getCurrentUserLanguage,
+  getUserSettings,
+} from './setting.api';
 import { getAllUser } from './user.api';
 
 export const sessionQueries = {
@@ -27,6 +31,11 @@ export const settingQueries = {
       queryKey: [...settingQueries.all, 'listUser'],
       queryFn: () => getUserSettings(),
     }),
+  getCurrentUserLanguageSetting: () =>
+    queryOptions({
+      queryKey: [...settingQueries.all, 'language'],
+      queryFn: () => getCurrentUserLanguage(),
+    }),
 };
 
 export const auditQueries = {
diff --git a/src/service/setting.api.ts b/src/service/setting.api.ts
index afefad5..7636dcc 100644
--- a/src/service/setting.api.ts
+++ b/src/service/setting.api.ts
@@ -12,6 +12,24 @@ export const getAdminSettings = createServerFn({ method: 'GET' })
     return await getAllAdminSettings();
   });
 
+export const getCurrentUserLanguage = createServerFn({ method: 'GET' })
+  .middleware([authMiddleware])
+  .handler(async ({ context }) => {
+    try {
+      const setting = await prisma.setting.findUniqueOrThrow({
+        where: { key: context.user.id, relation: 'user' },
+        select: { value: true },
+      });
+
+      const value = JSON.parse(setting.value) as UserSetting;
+
+      return value.language;
+    } catch (error) {
+      console.log(error);
+      throw error;
+    }
+  });
+
 export const updateAdminSettings = createServerFn({ method: 'POST' })
   .inputValidator(settingSchema)
   .middleware([authMiddleware])
@@ -84,6 +102,7 @@ export const getUserSettings = createServerFn({ method: 'GET' })
         value: JSON.parse(settings.value) as UserSetting,
       };
     } catch (error) {
+      console.log(error);
       throw error;
     }
   });
@@ -128,6 +147,7 @@ export const updateUserSettings = createServerFn({ method: 'POST' })
 
       return { success: true };
     } catch (error) {
+      console.log(error);
       throw error;
     }
   });
diff --git a/src/service/user.schema.ts b/src/service/user.schema.ts
index 8ddc011..98c8db1 100644
--- a/src/service/user.schema.ts
+++ b/src/service/user.schema.ts
@@ -5,6 +5,36 @@ export const baseUser = z.object({
   id: z.string().nonempty(m.users_page_message_user_not_found()),
 });
 
+export const ChangePasswordFormSchema = z
+  .object({
+    currentPassword: z.string().nonempty(
+      m.common_is_required({
+        field: m.change_password_form_current_password(),
+      }),
+    ),
+    newPassword: z.string().nonempty(
+      m.common_is_required({
+        field: m.change_password_form_new_password(),
+      }),
+    ),
+    confirmPassword: z.string().nonempty(
+      m.common_is_required({
+        field: m.change_password_form_confirm_password(),
+      }),
+    ),
+  })
+  .superRefine((data, ctx) => {
+    if (data.newPassword !== data.confirmPassword) {
+      ctx.addIssue({
+        path: ['confirmPassword'],
+        code: z.ZodIssueCode.custom,
+        message: m.change_password_messages_password_not_match(),
+      });
+    }
+  });
+
+export type ChangePassword = z.infer<typeof ChangePasswordFormSchema>;
+
 export const userListSchema = z.object({
   page: z.coerce.number().min(1).default(1),
   limit: z.coerce.number().min(10).max(100).default(10),