feat(password): WIP

defelmnq · defelmnq · commit 7903ca3e8396 · 2024-10-22T16:59:31.000+02:00
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -66,11 +66,8 @@ export const updatePassword = () => {
 
 export const validatePassword = () => {
 	return {
-		mutationFn: ({
-			...request
-		}: ValidateUserPasswordRequest) =>
-			API.validateUserPassword(request.password),
-	};
+		mutationFn: API.validateUserPassword,
+	}
 }
 
 export const createUser = (queryClient: QueryClient) => {
diff --git a/site/src/pages/SetupPage/SetupPage.tsx b/site/src/pages/SetupPage/SetupPage.tsx
@@ -6,14 +6,13 @@ import { useAuthContext } from "contexts/auth/AuthProvider";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
-import { useMutation, useQuery } from "react-query";
+import { useMutation, useQuery, useQueryClient } from "react-query";
 import { Navigate, useNavigate } from "react-router-dom";
 import { pageTitle } from "utils/page";
 import { sendDeploymentEvent } from "utils/telemetry";
 import { SetupPageView } from "./SetupPageView";
 import { useDebouncedFunction } from "hooks/debounce";
 
-
 export const SetupPage: FC = () => {
 	const {
 		isLoading,
@@ -23,12 +22,16 @@ export const SetupPage: FC = () => {
 		isSigningIn,
 	} = useAuthContext();
 	const createFirstUserMutation = useMutation(createFirstUser());
+	const validatePasswordMutation = useMutation(validatePassword());
+
 	const setupIsComplete = !isConfiguringTheFirstUser;
 	const { metadata } = useEmbeddedMetadata();
 	const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
-	const validatePasswordQuery = useQuery({...validatePassword(), enabled: true});
+	const queryClient = useQueryClient();
 	const navigate = useNavigate();
 
+	const [passwordIsValid, setPasswordIsValid] = useState(false);
+
 	useEffect(() => {
 		if (!buildInfoQuery.data) {
 			return;
@@ -53,7 +56,11 @@ export const SetupPage: FC = () => {
 	}
 
 	const validateUserPassword = async (password: string) => {
-		const isValid = await validateUserPassword(password);
+		const isValid = validatePasswordMutation.mutate({password}, {
+			onSuccess: (data) => {
+				setPasswordIsValid(data.isValid);
+			},
+		})
 	};
 
 	const { debounced: debouncedValidateUserPassword } = useDebouncedFunction(validateUserPassword, 500);
@@ -65,6 +72,7 @@ export const SetupPage: FC = () => {
 			</Helmet>
 			<SetupPageView
 				onPasswordChange={debouncedValidateUserPassword}
+				passwordIsValid={passwordIsValid}
 				isLoading={isSigningIn || createFirstUserMutation.isLoading}
 				error={createFirstUserMutation.error}
 				onSubmit={async (firstUser) => {
diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx
@@ -84,15 +84,17 @@ const numberOfDevelopersOptions = [
 ];
 
 export interface SetupPageViewProps {
-	onPasswordChange?: (password: string) => void;
 	onSubmit: (firstUser: TypesGen.CreateFirstUserRequest) => void;
+	onPasswordChange?: (password: string) => void;
+	passwordIsValid?: boolean;
 	error?: unknown;
 	isLoading?: boolean;
 }
 
 export const SetupPageView: FC<SetupPageViewProps> = ({
-	onPasswordChange,
 	onSubmit,
+	onPasswordChange,
+	passwordIsValid = true,
 	error,
 	isLoading,
 }) => {
@@ -183,8 +185,8 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 						id="password"
 						label={Language.passwordLabel}
 						type="password"
-						error={isPasswordValid === false} // Show error if password is invalid
-						helperText={isPasswordValid === false ? "Password is not strong enough." : ""} // Provide feedback
+						error={!passwordIsValid} // Show error if password is invalid
+						helperText={!passwordIsValid ? "Password is not strong enough." : ""} // Provide feedback
 					/>
 					<label
 						htmlFor="trial"
