From fed5e00fd16da35ce07f8314e4646b53a5742933 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 21 Oct 2024 16:06:17 +0000
Subject: [PATCH 1/2] fix(site): fix validation server error on change password
 form

---
 .../ChangePasswordPage.stories.tsx            | 27 ++++++++++++++++++-
 .../ResetPasswordPage/ChangePasswordPage.tsx  |  6 +++--
 site/src/theme/mui.ts                         |  5 ++++
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx b/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx
index d59ead3a59579..fc6ef7bda661e 100644
--- 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,28 @@ export const ServerError: Story = {
 		await canvas.findByText(serverError);
 	},
 };
+
+export const ValidationServerError: Story = {
+	play: async ({ canvasElement }) => {
+		const error = mockApiError({
+			message: "Invalid password.",
+			validations: [
+				{
+					field: "password",
+					detail:
+						"insecure password, try including more special characters, using uppercase letters, using numbers or using a longer password",
+				},
+			],
+		});
+		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(error.response.data.message);
+	},
+};
diff --git a/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx b/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
index 077bc39da82d4..2a633232c99b5 100644
--- 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
index 97c5785ebf9a0..78bb864b7eac4 100644
--- 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",
+				},
 			},
 		},
 	},

From ef183336e049e75ee52454a349cf62fa187f0b93 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 21 Oct 2024 16:14:49 +0000
Subject: [PATCH 2/2] Fix test

---
 .../pages/ResetPasswordPage/ChangePasswordPage.stories.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx b/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx
index fc6ef7bda661e..2768323ead15b 100644
--- a/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx
+++ b/site/src/pages/ResetPasswordPage/ChangePasswordPage.stories.tsx
@@ -74,13 +74,14 @@ export const GeneralServerError: Story = {
 
 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:
-						"insecure password, try including more special characters, using uppercase letters, using numbers or using a longer password",
+					detail: validationDetail,
 				},
 			],
 		});
@@ -93,6 +94,6 @@ export const ValidationServerError: Story = {
 			await canvas.findByLabelText("Confirm password *");
 		await user.type(confirmPasswordInput, "password");
 		await user.click(canvas.getByRole("button", { name: /reset password/i }));
-		await canvas.findByText(error.response.data.message);
+		await canvas.findByText(validationDetail);
 	},
 };

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/15170.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/15170.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/15170.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/15170.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>