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

@@ -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>