fix(lint-staged): run format for css files & parallel tsgo check

frontend/package.json

@@ -239,10 +239,12 @@
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": [
-      "oxlint --fix",
-      "oxfmt --write",
       "sh -c tsgo --noEmit"
     ],
+    "*.(js|jsx|ts|tsx|scss|css)": [
+      "oxlint --fix --quiet --no-error-on-unmatched-pattern",
+      "oxfmt --write"
+    ],
     "*.(scss|css)": [
       "stylelint"
     ]

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 } from 'lucide-react';
+import { ArrowRight, CircleAlert } from 'lucide-react';
 import APIError from 'types/api/error';
 
 import tvUrl from '@/assets/svgs/tv.svg';
@@ -28,8 +28,9 @@ 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();
@@ -83,10 +84,35 @@ function SignUp(): JSX.Element {
 		})();
 	};
 
-	const isPasswordMismatch =
-		Boolean(confirmPassword) && password !== confirmPassword;
+	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 showPasswordMismatchError = confirmPasswordTouched && isPasswordMismatch;
+			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 isValidForm = useMemo(
 		(): boolean =>
@@ -94,8 +120,8 @@ function SignUp(): JSX.Element {
 			Boolean(email?.trim()) &&
 			Boolean(password?.trim()) &&
 			Boolean(confirmPassword?.trim()) &&
-			password === confirmPassword,
-		[loading, email, password, confirmPassword],
+			!confirmPasswordError,
+		[loading, email, password, confirmPassword, confirmPasswordError],
 	);
 
 	return (
@@ -114,7 +140,12 @@ function SignUp(): JSX.Element {
 					</Typography.Paragraph>
 				</div>
 
-				<FormContainer onFinish={handleSubmit} form={form} className="signup-form">
+				<FormContainer
+					onFinish={handleSubmit}
+					onValuesChange={handleValuesChange}
+					form={form}
+					className="signup-form"
+				>
 					<div className="signup-form-container">
 						<div className="signup-form-fields">
 							<div className="signup-field-container">
@@ -144,6 +175,7 @@ function SignUp(): JSX.Element {
 										placeholder="Enter new password"
 										disabled={loading}
 										className="signup-antd-input"
+										onBlur={handlePasswordBlur}
 									/>
 								</FormContainer.Item>
 							</div>
@@ -153,12 +185,6 @@ 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
@@ -167,7 +193,7 @@ function SignUp(): JSX.Element {
 										placeholder="Confirm your new password"
 										disabled={loading}
 										className="signup-antd-input"
-										onBlur={() => setConfirmPasswordTouched(true)}
+										onBlur={handleConfirmPasswordBlur}
 									/>
 								</FormContainer.Item>
 							</div>
@@ -179,7 +205,19 @@ function SignUp(): JSX.Element {
 						your admin for an invite link
 					</Callout>
 
-					{formError && <AuthError error={formError} />}
+					{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} />}
 
 					<div className="signup-form-actions">
 						<Button