From fc38e9a4ee2b7cfd7e7bd3bb08c9091740f6c165 Mon Sep 17 00:00:00 2001
From: temycodes <temycodes@gmail.com>
Date: Thu, 28 May 2026 19:38:49 +0100
Subject: [PATCH] feat(forms): enhance form validation and accessibility (#514)

---
 src/app/(auth)/login/page.tsx  |  8 ++++++--
 src/app/(auth)/signup/page.tsx | 35 +++++++++++++++++++++++++++++++---
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index a35892d4..be669db6 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -93,7 +93,9 @@ export default function LoginPage() {
               <input
                 type="email"
                 placeholder="john.doe@example.com"
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 outline-none transition-all"
+                className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:ring-2 focus:ring-cyan-500 outline-none transition-all`}
+                aria-invalid={!!errors.email}
+                aria-describedby="email-error"
                 {...register('email')}
               />
               <FieldError error={errors.email?.message} id="email-error" />
@@ -105,7 +107,9 @@ export default function LoginPage() {
                 <input
                   type={showPassword ? 'text' : 'password'}
                   placeholder="••••••••"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 outline-none transition-all pr-12"
+                  className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:ring-2 focus:ring-cyan-500 outline-none transition-all pr-12`}
+                  aria-invalid={!!errors.password}
+                  aria-describedby="password-error"
                   {...register('password')}
                 />
                 <button
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
index 4aed8fba..b9db503b 100644
--- a/src/app/(auth)/signup/page.tsx
+++ b/src/app/(auth)/signup/page.tsx
@@ -15,6 +15,7 @@ import { apiClient } from '@/lib/api';
 
 export default function SignupPage() {
   const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [successMessage, setSuccessMessage] = useState('');
   const router = useRouter();
 
@@ -95,7 +96,9 @@ export default function SignupPage() {
               <input
                 type="text"
                 placeholder="John Doe"
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all"
+                className={`w-full px-4 py-3 border ${errors.name ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all`}
+                aria-invalid={!!errors.name}
+                aria-describedby="name-error"
                 {...register('name')}
               />
               <FieldError error={errors.name?.message} id="name-error" />
@@ -106,7 +109,9 @@ export default function SignupPage() {
               <input
                 type="email"
                 placeholder="john.doe@example.com"
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all"
+                className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all`}
+                aria-invalid={!!errors.email}
+                aria-describedby="email-error"
                 {...register('email')}
               />
               <FieldError error={errors.email?.message} id="email-error" />
@@ -118,7 +123,9 @@ export default function SignupPage() {
                 <input
                   type={showPassword ? 'text' : 'password'}
                   placeholder="••••••••"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all pr-12"
+                  className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all pr-12`}
+                  aria-invalid={!!errors.password}
+                  aria-describedby="password-error"
                   {...register('password')}
                 />
                 <button
@@ -132,6 +139,28 @@ export default function SignupPage() {
               <FieldError error={errors.password?.message} id="password-error" />
             </div>
 
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Confirm Password</label>
+              <div className="relative">
+                <input
+                  type={showConfirmPassword ? 'text' : 'password'}
+                  placeholder="••••••••"
+                  className={`w-full px-4 py-3 border ${errors.confirmPassword ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-transparent outline-none transition-all pr-12`}
+                  aria-invalid={!!errors.confirmPassword}
+                  aria-describedby="confirmPassword-error"
+                  {...register('confirmPassword')}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                >
+                  {showConfirmPassword ? <EyeOff size={20} /> : <Eye size={20} />}
+                </button>
+              </div>
+              <FieldError error={errors.confirmPassword?.message} id="confirmPassword-error" />
+            </div>
+
             <FormError error={signupMutation.error?.message} id="signup-api-error" />
 
             {successMessage && (