[feat] add new credential validation

src/components/migration/accountDetailsForm.tsx

···
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { ServerDescription } from '../../lib/migration/serverDescription';
 import { validateHandle } from '../../lib/migration/accountDetailsValidation';
 
···
         const domainNames = Object.values(availableDomains);
         const { isUsingDefaultDomain, customHandle } = validateHandle(currentHandle, domainNames);
 
+
         setIsUsingDefaultDomain(isUsingDefaultDomain);
         if (isUsingDefaultDomain) {
             // Set initial handle value from current handle
···
         return '';
     };
 
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
+    // Debounced validation functions
+    const debouncedValidateHandle = useCallback((value: string) => {
+        const timeoutId = setTimeout(() => {
+            setHandleError(validateHandleInput(value));
+        }, 500);
+        return () => clearTimeout(timeoutId);
+    }, []);
 
-        // Reset errors
-        setEmailError('');
-        setPasswordError('');
-        setHandleError('');
+    const debouncedValidateEmail = useCallback((value: string) => {
+        const timeoutId = setTimeout(() => {
+            setEmailError(validateEmail(value) ? '' : 'Please enter a valid email address');
+        }, 500);
+        return () => clearTimeout(timeoutId);
+    }, []);
 
-        // Validate handle
+    const debouncedValidatePassword = useCallback((value: string) => {
+        const timeoutId = setTimeout(() => {
+            setPasswordError(validatePassword(value) ? '' : 'Password must be at least 8 characters long');
+        }, 500);
+        return () => clearTimeout(timeoutId);
+    }, []);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        
+        // Validate all fields
         const handleValidationError = validateHandleInput(handle);
-        if (handleValidationError) {
-            setHandleError(handleValidationError);
-            return;
-        }
-
-        // Validate email
-        if (!validateEmail(email)) {
-            setEmailError('Please enter a valid email address');
-            return;
-        }
-
-        // Validate password
-        if (!validatePassword(password)) {
-            setPasswordError('Password must be at least 8 characters long');
-            return;
+        const emailValidationError = !validateEmail(email) ? 'Please enter a valid email address' : '';
+        const passwordValidationError = !validatePassword(password) ? 'Password must be at least 8 characters long' : '';
+        
+        setHandleError(handleValidationError);
+        setEmailError(emailValidationError);
+        setPasswordError(passwordValidationError);
+        
+        // Only submit if all validations pass
+        if (!handleValidationError && !emailValidationError && !passwordValidationError) {
+            onSubmit(handle, email, password);
         }
-
-        onSubmit(handle, email, password);
     };
 
     // Get the first available domain from the new server description
···
                                 id="handle"
                                 value={handle}
                                 onChange={(e) => {
-                                    setHandle(e.target.value);
-                                    setHandleError('');
+                                    const newValue = e.target.value;
+                                    setHandle(newValue);
+                                    debouncedValidateHandle(newValue);
                                 }}
                                 placeholder="alice"
                                 className={`form-input ${handleError ? 'error' : ''}`}
···
                             <span className="handle-domain">{newFirstAvailableDomain}</span>
                         </div>
                         {handleError && <div className="error-message">{handleError}</div>}
+                        {handleError && <div className="error-message">{handleError}</div>}
                     </div>
                 </div>
             )}
···
                     id="email"
                     value={email}
                     onChange={(e) => {
-                        setEmail(e.target.value);
-                        setEmailError('');
+                        const newValue = e.target.value;
+                        setEmail(newValue);
+                        debouncedValidateEmail(newValue);
                     }}
                     placeholder="[e-mail]"
                     required
···
                     id="password"
                     value={password}
                     onChange={(e) => {
-                        setPassword(e.target.value);
-                        setPasswordError('');
+                        const newValue = e.target.value;
+                        setPassword(newValue);
+                        debouncedValidatePassword(newValue);
                     }}
                     placeholder="hunter2"
                     required
···
                 {passwordError && <div className="error-message">{passwordError}</div>}
             </div>
             <small>We recommend using a new, unique password for your new account.</small>
-            
+                        
             <div className="button-container">
                 <button
                     type="button"