From fd6f60f4f4431e7596e945f41e40d54bcb597456 Mon Sep 17 00:00:00 2001
From: Asep Haryana Saputra <90584806+MythEclipse@users.noreply.github.com>
Date: Fri, 22 May 2026 16:55:47 +0000
Subject: [PATCH] fix: clear auth form errors

- Clear error state before submitting credentials in login page
- Clear error state before submitting registration in register page
- Add optional onFieldChange callback to AuthForm to clear parent errors when fields change
- Add role="alert" to error paragraph for accessibility

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 apps/web/src/components/auth-form.tsx | 20 +++++++++++++++-----
 apps/web/src/pages/login-page.tsx     |  6 +++++-
 apps/web/src/pages/register-page.tsx  |  6 +++++-
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/auth-form.tsx b/apps/web/src/components/auth-form.tsx
index b04f02f..0f08635 100644
--- a/apps/web/src/components/auth-form.tsx
+++ b/apps/web/src/components/auth-form.tsx
@@ -10,9 +10,10 @@ type AuthFormProps = {
   error: string | null;
   googleOAuthEnabled: boolean;
   onSubmit: (payload: { name?: string; email: string; password: string }) => Promise<unknown>;
+  onFieldChange?: () => void;
 };
 
-export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubmit }: AuthFormProps) {
+export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubmit, onFieldChange }: AuthFormProps) {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -37,18 +38,27 @@ export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubm
           {mode === 'register' && (
             <div className="space-y-2">
               <Label htmlFor="name">Nama</Label>
-              <Input id="name" value={name} onChange={(event) => setName(event.target.value)} required />
+              <Input id="name" value={name} onChange={(event) => {
+                setName(event.target.value);
+                onFieldChange?.();
+              }} required />
             </div>
           )}
           <div className="space-y-2">
             <Label htmlFor="email">Email</Label>
-            <Input id="email" type="email" value={email} onChange={(event) => setEmail(event.target.value)} required />
+            <Input id="email" type="email" value={email} onChange={(event) => {
+              setEmail(event.target.value);
+              onFieldChange?.();
+            }} required />
           </div>
           <div className="space-y-2">
             <Label htmlFor="password">Password</Label>
-            <Input id="password" type="password" minLength={8} value={password} onChange={(event) => setPassword(event.target.value)} required />
+            <Input id="password" type="password" minLength={8} value={password} onChange={(event) => {
+              setPassword(event.target.value);
+              onFieldChange?.();
+            }} required />
           </div>
-          {error && <p className="text-sm text-red-600">{error}</p>}
+          {error && <p className="text-sm text-red-600" role="alert">{error}</p>}
           <Button className="w-full" type="submit" disabled={isSubmitting}>
             {isSubmitting ? 'Memproses...' : mode === 'login' ? 'Masuk' : 'Daftar'}
           </Button>
diff --git a/apps/web/src/pages/login-page.tsx b/apps/web/src/pages/login-page.tsx
index 4123020..94aef67 100644
--- a/apps/web/src/pages/login-page.tsx
+++ b/apps/web/src/pages/login-page.tsx
@@ -30,7 +30,11 @@ export function LoginPage() {
           isSubmitting={mutation.isPending}
           error={error}
           googleOAuthEnabled={Boolean(meQuery.data?.features.googleOAuthEnabled)}
-          onSubmit={async ({ email, password }) => mutation.mutateAsync({ email, password })}
+          onSubmit={async ({ email, password }) => {
+            setError(null);
+            return mutation.mutateAsync({ email, password });
+          }}
+          onFieldChange={() => setError(null)}
         />
         <p className="text-center text-sm text-muted-foreground">
           Belum punya akun? <Link className="text-primary" to="/register">Daftar</Link>
diff --git a/apps/web/src/pages/register-page.tsx b/apps/web/src/pages/register-page.tsx
index b162b2c..ddf2670 100644
--- a/apps/web/src/pages/register-page.tsx
+++ b/apps/web/src/pages/register-page.tsx
@@ -30,7 +30,11 @@ export function RegisterPage() {
           isSubmitting={mutation.isPending}
           error={error}
           googleOAuthEnabled={Boolean(meQuery.data?.features.googleOAuthEnabled)}
-          onSubmit={async ({ name, email, password }) => mutation.mutateAsync({ name: name ?? '', email, password })}
+          onSubmit={async ({ name, email, password }) => {
+            setError(null);
+            return mutation.mutateAsync({ name: name ?? '', email, password });
+          }}
+          onFieldChange={() => setError(null)}
         />
         <p className="text-center text-sm text-muted-foreground">
           Sudah punya akun? <Link className="text-primary" to="/login">Masuk</Link>