feat(password): WIP

defelmnq · defelmnq · commit d50eb1d65dc2 · 2024-10-22T14:44:18.000Z
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -8,6 +8,7 @@ import type {
 	UpdateUserProfileRequest,
 	User,
 	UsersRequest,
+	ValidateUserPasswordRequest,
 } from "api/typesGenerated";
 import {
 	type MetadataState,
@@ -63,6 +64,15 @@ export const updatePassword = () => {
 	};
 };
 
+export const validatePassword = () => {
+	return {
+		mutationFn: ({
+			...request
+		}: ValidateUserPasswordRequest) =>
+			API.validateUserPassword(request.password),
+	};
+}
+
 export const createUser = (queryClient: QueryClient) => {
 	return {
 		mutationFn: API.createUser,
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/pages/SetupPage/SetupPage.tsx b/site/src/pages/SetupPage/SetupPage.tsx
@@ -1,4 +1,5 @@
 import { buildInfo } from "api/queries/buildInfo";
+import { validatePassword } from "api/queries/users";
 import { createFirstUser } from "api/queries/users";
 import { Loader } from "components/Loader/Loader";
 import { useAuthContext } from "contexts/auth/AuthProvider";
@@ -25,10 +26,9 @@ export const SetupPage: FC = () => {
 	const setupIsComplete = !isConfiguringTheFirstUser;
 	const { metadata } = useEmbeddedMetadata();
 	const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
+	const validatePasswordQuery = useQuery({...validatePassword(), enabled: true});
 	const navigate = useNavigate();
 
-	const [isPasswordValid, setIsPasswordValid] = useState<boolean | null>(null);
-
 	useEffect(() => {
 		if (!buildInfoQuery.data) {
 			return;
@@ -54,7 +54,6 @@ export const SetupPage: FC = () => {
 
 	const validateUserPassword = async (password: string) => {
 		const isValid = await validateUserPassword(password);
-		setIsPasswordValid(isValid);
 	};
 
 	const { debounced: debouncedValidateUserPassword } = useDebouncedFunction(validateUserPassword, 500);
@@ -65,7 +64,7 @@ export const SetupPage: FC = () => {
 				<title>{pageTitle("Set up your account")}</title>
 			</Helmet>
 			<SetupPageView
-				onPasswordChange={validateUserPassword}
+				onPasswordChange={debouncedValidateUserPassword}
 				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,24 +84,18 @@ const numberOfDevelopersOptions = [
 ];
 
 export interface SetupPageViewProps {
+	onPasswordChange?: (password: string) => void;
 	onSubmit: (firstUser: TypesGen.CreateFirstUserRequest) => void;
 	error?: unknown;
 	isLoading?: boolean;
 }
 
 export const SetupPageView: FC<SetupPageViewProps> = ({
+	onPasswordChange,
 	onSubmit,
 	error,
 	isLoading,
 }) => {
-	const [isPasswordValid, setIsPasswordValid] = useState<boolean | null>(null);
-
-	// Debounce function to validate password
-	const validatePassword = debounce(async (password: string) => {
-		const isValid = await validateUserPassword(password);
-		setIsPasswordValid(isValid); // Update state based on response
-	}, 500); // Adjust debounce time as needed
-
 	const form: FormikContextType<TypesGen.CreateFirstUserRequest> =
 		useFormik<TypesGen.CreateFirstUserRequest>({
 			initialValues: {
@@ -129,11 +123,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 	);
 
 	useEffect(() => {
-		if (form.values.password) {
-			validatePassword(form.values.password); // Call the debounce function
-		} else {
-			setIsPasswordValid(null); // Reset validation state if password is empty
-		}
+		onPasswordChange?.(form.values.password);
 	}, [form.values.password]); // Run effect when password changes
 
 	return (
