fix(frontend): simplify password matching logic (#11174)

* fix(frontend): simplify password matching logic

* fix(frontend): address review comments on validation feedback

* refactor(signup): remove redundant password mismatch check

frontend/src/pages/SignUp/SignUp.tsx

@@ -8,7 +8,7 @@ import afterLogin from 'AppRoutes/utils';
 import AuthError from 'components/AuthError/AuthError';
 import AuthPageContainer from 'components/AuthPageContainer';
 import { useNotifications } from 'hooks/useNotifications';
-import { ArrowRight, CircleAlert } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
 import APIError from 'types/api/error';
 
 import tvUrl from '@/assets/svgs/tv.svg';
@@ -28,9 +28,8 @@ type FormValues = {
 
 function SignUp(): JSX.Element {
 	const [loading, setLoading] = useState(false);
+	const [confirmPasswordTouched, setConfirmPasswordTouched] = useState(false);
 
-	const [confirmPasswordError, setConfirmPasswordError] =
-		useState<boolean>(false);
 	const [formError, setFormError] = useState<APIError | null>();
 
 	const { notifications } = useNotifications();
@@ -84,35 +83,10 @@ function SignUp(): JSX.Element {
 		})();
 	};
 
-	const handleValuesChange: (changedValues: Partial<FormValues>) => void = (
-		changedValues,
-	) => {
-		// Clear error if passwords match while typing (but don't set error until blur)
-		if ('password' in changedValues || 'confirmPassword' in changedValues) {
-			const { password, confirmPassword } = form.getFieldsValue();
+	const isPasswordMismatch =
+		Boolean(confirmPassword) && password !== confirmPassword;
 
-			if (password && confirmPassword && password === confirmPassword) {
-				setConfirmPasswordError(false);
-			}
-		}
-	};
-
-	const handlePasswordBlur = (): void => {
-		const { password, confirmPassword } = form.getFieldsValue();
-		// Only validate if confirm password has a value
-		if (confirmPassword) {
-			const isSamePassword = password === confirmPassword;
-			setConfirmPasswordError(!isSamePassword);
-		}
-	};
-
-	const handleConfirmPasswordBlur = (): void => {
-		const { password, confirmPassword } = form.getFieldsValue();
-		if (password && confirmPassword) {
-			const isSamePassword = password === confirmPassword;
-			setConfirmPasswordError(!isSamePassword);
-		}
-	};
+	const showPasswordMismatchError = confirmPasswordTouched && isPasswordMismatch;
 
 	const isValidForm = useMemo(
 		(): boolean =>
@@ -120,8 +94,8 @@ function SignUp(): JSX.Element {
 			Boolean(email?.trim()) &&
 			Boolean(password?.trim()) &&
 			Boolean(confirmPassword?.trim()) &&
-			!confirmPasswordError,
-		[loading, email, password, confirmPassword, confirmPasswordError],
+			password === confirmPassword,
+		[loading, email, password, confirmPassword],
 	);
 
 	return (
@@ -140,12 +114,7 @@ function SignUp(): JSX.Element {
 					</Typography.Paragraph>
 				</div>
 
-				<FormContainer
-					onFinish={handleSubmit}
-					onValuesChange={handleValuesChange}
-					form={form}
-					className="signup-form"
-				>
+				<FormContainer onFinish={handleSubmit} form={form} className="signup-form">
 					<div className="signup-form-container">
 						<div className="signup-form-fields">
 							<div className="signup-field-container">
@@ -175,7 +144,6 @@ function SignUp(): JSX.Element {
 										placeholder="Enter new password"
 										disabled={loading}
 										className="signup-antd-input"
-										onBlur={handlePasswordBlur}
 									/>
 								</FormContainer.Item>
 							</div>
@@ -185,6 +153,12 @@ function SignUp(): JSX.Element {
 								<FormContainer.Item
 									name="confirmPassword"
 									validateTrigger="onBlur"
+									validateStatus={showPasswordMismatchError ? 'error' : undefined}
+									help={
+										showPasswordMismatchError
+											? "Passwords don't match. Please try again."
+											: undefined
+									}
 									rules={[{ required: true, message: 'Please enter confirm password!' }]}
 								>
 									<AntdInput.Password
@@ -193,7 +167,7 @@ function SignUp(): JSX.Element {
 										placeholder="Confirm your new password"
 										disabled={loading}
 										className="signup-antd-input"
-										onBlur={handleConfirmPasswordBlur}
+										onBlur={() => setConfirmPasswordTouched(true)}
 									/>
 								</FormContainer.Item>
 							</div>
@@ -205,19 +179,7 @@ function SignUp(): JSX.Element {
 						your admin for an invite link
 					</Callout>
 
-					{confirmPasswordError && (
-						<Callout
-							type="error"
-							size="small"
-							showIcon
-							icon={<CircleAlert size={12} />}
-							className="signup-error-callout"
-						>
-							Passwords don&apos;t match. Please try again.
-						</Callout>
-					)}
-
-					{formError && !confirmPasswordError && <AuthError error={formError} />}
+					{formError && <AuthError error={formError} />}
 
 					<div className="signup-form-actions">
 						<Button