fix(site): fix validation server error on change password form (#15170)

BrunoQuaresma · web-flow · commit 76bfa9ba17fb · 2024-10-21T16:22:29.000Z
Before: ![image](https://github.com/user-attachments/assets/4fd83c78-4d30-4a92-af2c-7c986a03b426) After: <img width="528" alt="Screenshot 2024-10-21 at 13 07 34" src="https://github.com/user-attachments/assets/797ddeaa-8fb4-4d22-9a1b-93809b92432b"> Fix #15152
diff --git a/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx b/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx
@@ -51,7 +51,7 @@ export const WrongConfirmationPassword: Story = {
 	},
 };
 
-export const ServerError: Story = {
+export const GeneralServerError: Story = {
 	play: async ({ canvasElement }) => {
 		const serverError =
 			"New password should be different from the old password";
@@ -71,3 +71,29 @@ export const ServerError: Story = {
 		await canvas.findByText(serverError);
 	},
 };
+
+export const ValidationServerError: Story = {
+	play: async ({ canvasElement }) => {
+		const validationDetail =
+			"insecure password, try including more special characters, using uppercase letters, using numbers or using a longer password";
+		const error = mockApiError({
+			message: "Invalid password.",
+			validations: [
+				{
+					field: "password",
+					detail: validationDetail,
+				},
+			],
+		});
+		spyOn(API, "changePasswordWithOTP").mockRejectedValueOnce(error);
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+		const newPasswordInput = await canvas.findByLabelText("Password *");
+		await user.type(newPasswordInput, "password");
+		const confirmPasswordInput =
+			await canvas.findByLabelText("Confirm password *");
+		await user.type(confirmPasswordInput, "password");
+		await user.click(canvas.getByRole("button", { name: /reset password/i }));
+		await canvas.findByText(validationDetail);
+	},
+};
diff --git a/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx b/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
@@ -2,6 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
+import { isApiError, isApiValidationError } from "api/errors";
 import { changePasswordWithOTP } from "api/queries/users";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { CustomLogo } from "components/CustomLogo/CustomLogo";
@@ -64,7 +65,7 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
 			}
 		},
 	});
-	const getFieldHelpers = getFormHelpers(form);
+	const getFieldHelpers = getFormHelpers(form, changePasswordMutation.error);
 
 	return (
 		<>
@@ -86,7 +87,8 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
 					>
 						Choose a new password
 					</h1>
-					{changePasswordMutation.error ? (
+					{changePasswordMutation.error &&
+					!isApiValidationError(changePasswordMutation.error) ? (
 						<ErrorAlert
 							error={changePasswordMutation.error}
 							css={{ marginBottom: 24 }}
diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts
@@ -375,6 +375,11 @@ export const components = {
 			sx: {
 				marginLeft: 0,
 				marginTop: 1,
+				"&::first-letter": {
+					// Server errors are returned in all lowercase. To display them as
+					// field errors in the UI, we capitalize the first letter.
+					textTransform: "uppercase",
+				},
 			},
 		},
 	},
