From 29de865509a53f3147db035f7161dcc3b6646180 Mon Sep 17 00:00:00 2001
From: Ho Ngoc Hai <hongochai10@icloud.com>
Date: Mon, 5 Jan 2026 09:58:56 +0700
Subject: [PATCH] =?UTF-8?q?refactor:=20C=E1=BA=ADp=20nh=E1=BA=ADt=20c?=
 =?UTF-8?q?=C3=A1c=20tr=C6=B0=E1=BB=9Dng=20nh=E1=BA=ADp=20li=E1=BB=87u=20f?=
 =?UTF-8?q?orm=20=C4=91=E1=BB=83=20s=E1=BB=AD=20d=E1=BB=A5ng=20React=20Hoo?=
 =?UTF-8?q?k=20Form=20Controller=20v=C3=A0=20s=E1=BB=ADa=20l=E1=BB=97i=20k?=
 =?UTF-8?q?h=C3=B4ng=20kh=E1=BB=9Bp=20hydration=20c=E1=BB=A7a=20n=C3=BAt?=
 =?UTF-8?q?=20chuy=E1=BB=83n=20=C4=91=E1=BB=95i=20ch=E1=BB=A7=20=C4=91?=
 =?UTF-8?q?=E1=BB=81.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/(auth)/forgot-password/page.tsx   | 10 ++-
 apps/web-client/src/app/(auth)/login/page.tsx | 81 +++++++++++--------
 .../components/theme-toggle-enhanced.tsx      | 28 ++++++-
 3 files changed, 79 insertions(+), 40 deletions(-)

diff --git a/apps/web-client/src/app/(auth)/forgot-password/page.tsx b/apps/web-client/src/app/(auth)/forgot-password/page.tsx
index ab86ff6e..3b1ec812 100644
--- a/apps/web-client/src/app/(auth)/forgot-password/page.tsx
+++ b/apps/web-client/src/app/(auth)/forgot-password/page.tsx
@@ -243,10 +243,12 @@ export default function ForgotPasswordPage() {
                 placeholder="you@example.com"
                 isInvalid={!!errors.email}
                 errorMessage={errors.email?.message}
-                {...register('email')}
-                onChange={(e) => {
-                  register('email').onChange(e);
-                  setValue('email', e.target.value);
+                name={register('email').name}
+                onBlur={register('email').onBlur}
+                onChange={(value) => {
+                  // EN: React Aria onChange receives value string, not event
+                  // VI: React Aria onChange nhận value string, không phải event
+                  setValue('email', value);
                 }}
                 autoComplete="email"
                 autoFocus
diff --git a/apps/web-client/src/app/(auth)/login/page.tsx b/apps/web-client/src/app/(auth)/login/page.tsx
index b9188cff..2db6e5b1 100644
--- a/apps/web-client/src/app/(auth)/login/page.tsx
+++ b/apps/web-client/src/app/(auth)/login/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useRouter } from 'next/navigation';
@@ -70,9 +70,8 @@ export default function LoginPage() {
   // EN: React Hook Form setup with Zod resolver
   // VI: Setup React Hook Form với Zod resolver
   const {
-    register,
+    control,
     handleSubmit,
-    setValue,
     formState: { errors, isSubmitting },
   } = useForm<LoginFormData>({
     resolver: zodResolver(loginSchema),
@@ -173,44 +172,60 @@ export default function LoginPage() {
 
             <div className="space-y-4">
               {/* EN: Email input field / VI: Trường nhập email */}
-              <Input
-                type="email"
-                label={t('auth.login.email')}
-                placeholder="you@example.com"
-                isInvalid={!!errors.email}
-                errorMessage={errors.email?.message}
-                {...register('email')}
-                onChange={(e) => {
-                  register('email').onChange(e);
-                  setValue('email', e.target.value);
-                }}
-                autoComplete="email"
-                aria-required="true"
+              <Controller
+                name="email"
+                control={control}
+                render={({ field }) => (
+                  <Input
+                    type="email"
+                    label={t('auth.login.email')}
+                    placeholder="you@example.com"
+                    isInvalid={!!errors.email}
+                    errorMessage={errors.email?.message}
+                    value={field.value}
+                    onChange={field.onChange}
+                    onBlur={field.onBlur}
+                    autoComplete="email"
+                    aria-required="true"
+                  />
+                )}
               />
 
               {/* EN: Password input field / VI: Trường nhập mật khẩu */}
               <div className="space-y-1">
-                <Input
-                  type="password"
-                  label={t('auth.login.password')}
-                  placeholder={t('auth.login.password')}
-                  isInvalid={!!errors.password}
-                  errorMessage={errors.password?.message}
-                  {...register('password')}
-                  onChange={(e) => {
-                    register('password').onChange(e);
-                    setValue('password', e.target.value);
-                  }}
-                  autoComplete="current-password"
-                  aria-required="true"
+                <Controller
+                  name="password"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      type="password"
+                      label={t('auth.login.password')}
+                      placeholder={t('auth.login.password')}
+                      isInvalid={!!errors.password}
+                      errorMessage={errors.password?.message}
+                      value={field.value}
+                      onChange={field.onChange}
+                      onBlur={field.onBlur}
+                      autoComplete="current-password"
+                      aria-required="true"
+                    />
+                  )}
                 />
 
                 <div className="flex items-center justify-between pt-2">
                   <label className="flex items-center gap-2 cursor-pointer group">
-                    <input
-                      type="checkbox"
-                      {...register('rememberMe')}
-                      className="w-4 h-4 rounded border-glass bg-glass-subtle text-accent-primary focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary cursor-pointer transition-all"
+                    <Controller
+                      name="rememberMe"
+                      control={control}
+                      render={({ field }) => (
+                        <input
+                          type="checkbox"
+                          checked={field.value}
+                          onChange={field.onChange}
+                          onBlur={field.onBlur}
+                          className="w-4 h-4 rounded border-glass bg-glass-subtle text-accent-primary focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary cursor-pointer transition-all"
+                        />
+                      )}
                     />
                     <span className="text-sm text-text-secondary group-hover:text-text-primary transition-colors">
                       {t('auth.login.rememberMe')}
diff --git a/apps/web-client/src/features/theme/components/theme-toggle-enhanced.tsx b/apps/web-client/src/features/theme/components/theme-toggle-enhanced.tsx
index 618f0bae..fe4add69 100644
--- a/apps/web-client/src/features/theme/components/theme-toggle-enhanced.tsx
+++ b/apps/web-client/src/features/theme/components/theme-toggle-enhanced.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTheme } from '@/features/theme';
 import { Sun, Moon, Monitor } from 'lucide-react';
 import { Button } from '@/features/shared/components/ui/button';
@@ -22,6 +22,7 @@ import { cn } from '@/shared/lib/utils';
  * - Icons from lucide-react
  * - Smooth transitions
  * - Keyboard accessible
+ * - Prevents hydration mismatch
  * 
  * @example
  * ```tsx
@@ -31,13 +32,23 @@ import { cn } from '@/shared/lib/utils';
 export function ThemeToggle() {
     const { theme, setTheme, resolvedTheme } = useTheme();
 
+    // EN: Track mounted state to prevent hydration mismatch
+    // VI: Theo dõi trạng thái mounted để tránh hydration mismatch
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
     const themeOptions = [
         { value: 'light' as const, label: 'Light', icon: Sun },
         { value: 'dark' as const, label: 'Dark', icon: Moon },
         { value: 'system' as const, label: 'System', icon: Monitor },
     ];
 
-    const currentIcon = resolvedTheme === 'dark' ? Moon : Sun;
+    // EN: Use Monitor icon during SSR to prevent mismatch
+    // VI: Sử dụng icon Monitor trong SSR để tránh mismatch
+    const currentIcon = !mounted ? Monitor : (resolvedTheme === 'dark' ? Moon : Sun);
     const CurrentIcon = currentIcon;
 
     return (
@@ -95,7 +106,18 @@ export function ThemeToggle() {
  */
 export function ThemeToggleButton() {
     const { toggleTheme, resolvedTheme } = useTheme();
-    const Icon = resolvedTheme === 'dark' ? Sun : Moon;
+
+    // EN: Track mounted state to prevent hydration mismatch
+    // VI: Theo dõi trạng thái mounted để tránh hydration mismatch
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    // EN: Use Monitor icon during SSR to prevent mismatch
+    // VI: Sử dụng icon Monitor trong SSR để tránh mismatch
+    const Icon = !mounted ? Monitor : (resolvedTheme === 'dark' ? Sun : Moon);
 
     return (
         <Button