feat(password): add details field to validate password endpoint

defelmnq · defelmnq · commit f33eac2bb8f7 · 2024-10-28T17:45:07.000Z
diff --git a/coderd/users_test.go b/coderd/users_test.go
@@ -1109,8 +1109,6 @@ func TestUpdateUserPassword(t *testing.T) {
 		require.Equal(t, database.AuditActionWrite, auditor.AuditLogs()[numLogs-1].Action)
 	})
 
-	// FIXME: Re-enable the tests once real logic changed
-	// Currently there's no check in code to validate that users have to put the old password
 	t.Run("MemberCantUpdateOwnPasswordWithoutOldPassword", func(t *testing.T) {
 		t.Parallel()
 		client := coderdtest.New(t, nil)
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1322,11 +1322,13 @@ class ApiMethods {
 		await this.axios.put(`/api/v2/users/${userId}/password`, updatePassword);
 	};
 
-	validateUserPassword = async (password: string): Promise<boolean> => {
+	validateUserPassword = async (
+		password: string,
+	): Promise<TypesGen.ValidateUserPasswordResponse> => {
 		const response = await this.axios.post("/api/v2/users/validate-password", {
 			password,
 		});
-		return response.data.valid;
+		return response.data;
 	};
 
 	getRoles = async (): Promise<Array<TypesGen.AssignableRoles>> => {
diff --git a/site/src/pages/CreateUserPage/CreateUserForm.tsx b/site/src/pages/CreateUserPage/CreateUserForm.tsx
@@ -64,7 +64,7 @@ export interface CreateUserFormProps {
 	onSubmit: (user: TypesGen.CreateUserRequestWithOrgs) => void;
 	onCancel: () => void;
 	onPasswordChange: (password: string) => void;
-	passwordIsValid: boolean;
+	passwordValidator: TypesGen.ValidateUserPasswordResponse;
 	error?: unknown;
 	isLoading: boolean;
 	authMethods?: TypesGen.AuthMethods;
@@ -91,7 +91,7 @@ export const CreateUserForm: FC<
 	onSubmit,
 	onCancel,
 	onPasswordChange,
-	passwordIsValid,
+	passwordValidator,
 	error,
 	isLoading,
 	authMethods,
@@ -206,15 +206,15 @@ export const CreateUserForm: FC<
 								(form.values.login_type !== "password" &&
 									"No password required for this login type") ||
 								(form.values.password !== "" &&
-									!passwordIsValid &&
-									"password is not strong enough."),
+									!passwordValidator.valid &&
+									passwordValidator.details),
 						})}
 						autoComplete="current-password"
 						fullWidth
 						id="password"
 						data-testid="password-input"
 						disabled={form.values.login_type !== "password"}
-						error={!!(form.values.password !== "" && !passwordIsValid)}
+						error={!!(form.values.password !== "" && !passwordValidator.valid)}
 						label={Language.passwordLabel}
 						type="password"
 					/>
diff --git a/site/src/pages/CreateUserPage/CreateUserPage.tsx b/site/src/pages/CreateUserPage/CreateUserPage.tsx
@@ -20,12 +20,15 @@ export const CreateUserPage: FC = () => {
 	const authMethodsQuery = useQuery(authMethods());
 	const validatePasswordMutation = useMutation(validatePassword());
 
-	const [passwordIsValid, setPasswordIsValid] = useState(false);
+	const [passwordValidator, setPasswordValidator] = useState({
+		valid: false,
+		details: "",
+	});
 
 	const validateUserPassword = async (password: string) => {
 		validatePasswordMutation.mutate(password, {
 			onSuccess: (data) => {
-				setPasswordIsValid(data);
+				setPasswordValidator({ valid: data.valid, details: data.details });
 			},
 		});
 	};
@@ -53,7 +56,7 @@ export const CreateUserPage: FC = () => {
 					navigate("..", { relative: "path" });
 				}}
 				onPasswordChange={debouncedValidateUserPassword}
-				passwordIsValid={passwordIsValid}
+				passwordValidator={passwordValidator}
 				isLoading={createUserMutation.isLoading}
 			/>
 		</Margins>
diff --git a/site/src/pages/SetupPage/SetupPage.test.tsx b/site/src/pages/SetupPage/SetupPage.test.tsx
@@ -49,6 +49,32 @@ describe("Setup Page", () => {
 		);
 	});
 
+	it("renders the password validation error", async () => {
+		server.use(
+			http.post("/api/v2/users/validate-password", () => {
+				return HttpResponse.json({
+					valid: false,
+					details: "Password is too short",
+				});
+			}),
+		);
+
+		renderWithRouter(
+			createMemoryRouter(
+				[
+					{
+						path: "/setup",
+						element: <SetupPage />,
+					},
+				],
+				{ initialEntries: ["/setup"] },
+			),
+		);
+		await waitForLoaderToBeRemoved();
+		await fillForm({ password: "short" });
+		await waitFor(() => screen.findByText("Password is too short"));
+	});
+
 	it("redirects to the app when setup is successful", async () => {
 		let userHasBeenCreated = false;
 
@@ -99,6 +125,7 @@ describe("Setup Page", () => {
 		await fillForm();
 		await waitFor(() => screen.findByText("Templates"));
 	});
+
 	it("calls sendBeacon with telemetry", async () => {
 		const sendBeacon = jest.fn();
 		Object.defineProperty(window.navigator, "sendBeacon", {
diff --git a/site/src/pages/SetupPage/SetupPage.tsx b/site/src/pages/SetupPage/SetupPage.tsx
@@ -29,7 +29,10 @@ export const SetupPage: FC = () => {
 	const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
 	const navigate = useNavigate();
 
-	const [passwordIsValid, setPasswordIsValid] = useState(false);
+	const [passwordValidator, setPasswordValidator] = useState({
+		valid: false,
+		details: "",
+	});
 
 	useEffect(() => {
 		if (!buildInfoQuery.data) {
@@ -43,7 +46,7 @@ export const SetupPage: FC = () => {
 	const validateUserPassword = async (password: string) => {
 		validatePasswordMutation.mutate(password, {
 			onSuccess: (data) => {
-				setPasswordIsValid(data);
+				setPasswordValidator({ valid: data.valid, details: data.details });
 			},
 		});
 	};
@@ -74,7 +77,7 @@ export const SetupPage: FC = () => {
 			</Helmet>
 			<SetupPageView
 				onPasswordChange={debouncedValidateUserPassword}
-				passwordIsValid={passwordIsValid}
+				passwordValidator={passwordValidator}
 				isLoading={isSigningIn || createFirstUserMutation.isLoading}
 				error={createFirstUserMutation.error}
 				onSubmit={async (firstUser) => {
diff --git a/site/src/pages/SetupPage/SetupPageView.stories.tsx b/site/src/pages/SetupPage/SetupPageView.stories.tsx
@@ -31,6 +31,12 @@ export const TrialError: Story = {
 	},
 };
 
+export const PasswordValidation: Story = {
+	args: {
+		passwordValidator: { valid: false, details: "Password is too short" },
+	},
+};
+
 export const Loading: Story = {
 	args: {
 		isLoading: true,
diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx
@@ -84,15 +84,15 @@ const numberOfDevelopersOptions = [
 export interface SetupPageViewProps {
 	onSubmit: (firstUser: TypesGen.CreateFirstUserRequest) => void;
 	onPasswordChange?: (password: string) => void;
-	passwordIsValid?: boolean;
+	passwordValidator: TypesGen.ValidateUserPasswordResponse;
 	error?: unknown;
 	isLoading?: boolean;
 }
 
 export const SetupPageView: FC<SetupPageViewProps> = ({
 	onSubmit,
 	onPasswordChange,
-	passwordIsValid = true,
+	passwordValidator,
 	error,
 	isLoading,
 }) => {
@@ -183,9 +183,9 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 						id="password"
 						label={Language.passwordLabel}
 						type="password"
-						error={!!(form.values.password !== "" && !passwordIsValid)}
+						error={!!(form.values.password !== "" && !passwordValidator.valid)}
 						helperText={
-							!passwordIsValid ? "Password is not strong enough." : ""
+							!passwordValidator.valid ? passwordValidator.details : ""
 						}
 					/>
 					<label
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityForm.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityForm.tsx
@@ -1,5 +1,6 @@
 import LoadingButton from "@mui/lab/LoadingButton";
 import TextField from "@mui/material/TextField";
+import type * as TypesGen from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Form, FormFields } from "components/Form/Form";
@@ -42,7 +43,7 @@ export interface SecurityFormProps {
 	disabled: boolean;
 	isLoading: boolean;
 	onPasswordChange: (password: string) => void;
-	passwordIsValid: boolean;
+	passwordValidator: TypesGen.ValidateUserPasswordResponse;
 	onSubmit: (values: SecurityFormValues) => void;
 	error?: unknown;
 }
@@ -51,7 +52,7 @@ export const SecurityForm: FC<SecurityFormProps> = ({
 	disabled,
 	isLoading,
 	onPasswordChange,
-	passwordIsValid,
+	passwordValidator,
 	onSubmit,
 	error,
 }) => {
@@ -96,10 +97,10 @@ export const SecurityForm: FC<SecurityFormProps> = ({
 						autoComplete="password"
 						fullWidth
 						label={Language.newPasswordLabel}
-						error={!!(form.values.password !== "" && !passwordIsValid)}
+						error={!!(form.values.password !== "" && !passwordValidator.valid)}
 						helperText={
-							form.values.password !== "" && !passwordIsValid
-								? "Password is not strong enough."
+							form.values.password !== "" && !passwordValidator.valid
+								? passwordValidator.details
 								: ""
 						}
 						type="password"
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx
@@ -29,12 +29,15 @@ export const SecurityPage: FC = () => {
 	});
 	const singleSignOnSection = useSingleSignOnSection();
 
-	const [passwordIsValid, setPasswordIsValid] = useState(false);
+	const [passwordValidator, setPasswordValidator] = useState({
+		valid: false,
+		details: "",
+	});
 
 	const validateUserPassword = async (password: string) => {
 		validatePasswordMutation.mutate(password, {
 			onSuccess: (data) => {
-				setPasswordIsValid(data);
+				setPasswordValidator({ valid: data.valid, details: data.details });
 			},
 		});
 	};
@@ -56,7 +59,7 @@ export const SecurityPage: FC = () => {
 					error: updatePasswordMutation.error,
 					isLoading: updatePasswordMutation.isLoading,
 					onPasswordChange: debouncedValidateUserPassword,
-					passwordIsValid: passwordIsValid,
+					passwordValidator: passwordValidator,
 					onSubmit: async (data) => {
 						await updatePasswordMutation.mutateAsync({
 							userId: me.id,
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx
@@ -16,7 +16,7 @@ const defaultArgs: ComponentProps<typeof SecurityPageView> = {
 			isLoading: false,
 			onSubmit: action("onSubmit"),
 			onPasswordChange: (password: string) => {},
-			passwordIsValid: false,
+			passwordValidator: { valid: false, details: "" },
 		},
 	},
 	oidc: {
