chore: Extract common cloud sign-in hook

https://harperdb.atlassian.net/browse/STUDIO-588

Author: dawsontoth

src/features/auth/ClusterInstanceSignIn.tsx

@@ -15,7 +15,7 @@ import { getClusterInfoQueryOptions } from '@/features/cluster/queries/getCluste
 import { useInstanceLoginMutation } from '@/features/instance/operations/mutations/useInstanceLoginMutation';
 import { getInstanceHealthQueryOptions } from '@/features/instance/operations/queries/getInstanceHealth';
 import { getInstanceUserInfo } from '@/features/instance/operations/queries/getInstanceUserInfo';
-import { SignInSchema } from '@/features/instance/operations/schemas/signInSchema';
+import { UsernameSignInSchema } from '@/features/instance/operations/schemas/signInSchema';
 import { CrossLocalhostIssueType, detectCrossLocalhostUrls } from '@/lib/urls/detectCrossLocalhostUrls';
 import { getOperationsUrlForCluster } from '@/lib/urls/getOperationsUrlForCluster';
 import { getOperationsUrlForInstance } from '@/lib/urls/getOperationsUrlForInstance';
@@ -67,7 +67,7 @@ export function ClusterInstanceSignIn() {
 	);
 
 	const methods = useForm({
-		resolver: zodResolver(SignInSchema),
+		resolver: zodResolver(UsernameSignInSchema),
 		defaultValues: {
 			username: '',
 			password: '',
@@ -81,7 +81,7 @@ export function ClusterInstanceSignIn() {
 
 	const { mutate: submitInstanceLogin, isPending } = useInstanceLoginMutation();
 
-	const submitForm = useCallback(async (formData: z.infer<typeof SignInSchema>) => {
+	const submitForm = useCallback(async (formData: z.infer<typeof UsernameSignInSchema>) => {
 		submitInstanceLogin(
 			{
 				...formData,

src/features/auth/SignIn.tsx

@@ -6,71 +6,26 @@ import { FormItem } from '@/components/ui/form/FormItem';
 import { FormLabel } from '@/components/ui/form/FormLabel';
 import { FormMessage } from '@/components/ui/form/FormMessage';
 import { Input } from '@/components/ui/input';
-import { loginSuccessDatadogAction } from '@/integrations/datadog/datadog';
-import { reoClient } from '@/integrations/reo/reo';
-import { parseCompanyFromEmail } from '@/lib/string/parseCompanyFromEmail';
-import { getDefaultSignedInCloudRouteForUser } from '@/lib/urls/getDefaultSignedInCloudRouteForUser';
-import { zodRequireEmail } from '@/lib/zod/email';
-import { zodRequirePassword } from '@/lib/zod/password';
+import { EmailSignInSchema } from '@/features/instance/operations/schemas/signInSchema';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useQueryClient } from '@tanstack/react-query';
-import { Link, useNavigate, useRouter, useSearch } from '@tanstack/react-router';
-import { useEffect } from 'react';
+import { Link, useSearch } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useLoginMutation } from './hooks/useSignIn';
-import { currentUserQueryKey } from './queries/getCurrentUser';
-import { authStore, OverallAppSignIn } from './store/authStore';
-
-const SignInSchema = z.object({
-	email: zodRequireEmail,
-	password: zodRequirePassword,
-});
+import { useCloudSignIn } from './hooks/useCloudSignIn';
 
 export function SignIn() {
-	const navigate = useNavigate();
 	const { me: formPersistenceEmail } = useSearch({ strict: false });
-	const router = useRouter();
-	const queryClient = useQueryClient();
-	const { redirect } = useSearch({ strict: false });
 
 	const methods = useForm({
-		resolver: zodResolver(SignInSchema),
+		resolver: zodResolver(EmailSignInSchema),
 		defaultValues: {
 			email: formPersistenceEmail || '',
 			password: '',
 		},
 	});
-
+	const { handleSubmit, control } = methods;
 	const email = methods.watch('email');
-	const { handleSubmit, control, setFocus } = methods;
-
-	useEffect(() => {
-		setFocus('email');
-	}, [setFocus]);
-
-	const { mutate: submitLoginData, isPending } = useLoginMutation();
-
-	const submitForm = (formData: z.infer<typeof SignInSchema>) => {
-		submitLoginData(formData, {
-			onSuccess: async (data) => {
-				authStore.setUserForEntity(OverallAppSignIn, data);
-				const defaultCloudRoute = getDefaultSignedInCloudRouteForUser(data);
-
-				loginSuccessDatadogAction(data);
 
-				const company = parseCompanyFromEmail(data.email);
-				reoClient?.identify?.({
-					username: data.email,
-					type: 'email',
-					...(company ? { company } : {}),
-				});
-				await queryClient.invalidateQueries({ queryKey: currentUserQueryKey, refetchType: 'none' });
-				void router.invalidate();
-				await navigate({ to: redirect?.startsWith('/') ? redirect : defaultCloudRoute });
-			},
-		});
-	};
+	const { submitForm, isPending } = useCloudSignIn();
 
 	return (
 		<div className="text-white w-xs">
@@ -86,6 +41,7 @@ export function SignIn() {
 								<FormControl>
 									<Input
 										type="email"
+										autoFocus={true}
 										className="bg-purple-400 border-purple-400 dark:bg-black dark:border-black"
 										{...field}
 									/>

src/features/auth/SignUp.tsx

@@ -12,12 +12,12 @@ import { zodRequireEmail } from '@/lib/zod/email';
 import { zodRequirePassword } from '@/lib/zod/password';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Link, useNavigate, useSearch } from '@tanstack/react-router';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { useSignUpMutation } from './hooks/useSignUp';
 
-const SignInSchema = z.object({
+const SignUpSchema = z.object({
 	email: zodRequireEmail
 		.max(80, { error: 'Email cannot be longer than 80 characters.' }),
 	firstname: z
@@ -43,7 +43,7 @@ export function SignUp() {
 	const navigate = useNavigate();
 	const { email: searchEmail, me: formPersistenceEmail } = useSearch({ strict: false });
 	const methods = useForm({
-		resolver: zodResolver(SignInSchema),
+		resolver: zodResolver(SignUpSchema),
 		defaultValues: {
 			firstname: '',
 			lastname: '',
@@ -62,7 +62,7 @@ export function SignUp() {
 
 	const { mutate: submitSignUpData } = useSignUpMutation();
 
-	const submitForm = async (formData: z.infer<typeof SignInSchema>) => {
+	const submitForm = useCallback(async (formData: z.infer<typeof SignUpSchema>) => {
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		const { confirmPassword, ...userData } = formData;
 		submitSignUpData(userData, {
@@ -78,7 +78,7 @@ export function SignUp() {
 				void navigate({ to: '/verifying?email=' + encodeURIComponent(userData.email) });
 			},
 		});
-	};
+	}, [navigate, submitSignUpData]);
 
 	return (
 		<div className="text-white w-xs">

src/features/auth/hooks/useCloudSignIn.ts

@@ -0,0 +1,67 @@
+import { apiClient } from '@/config/apiClient';
+import { currentUserQueryKey } from '@/features/auth/queries/getCurrentUser';
+import { authStore, OverallAppSignIn } from '@/features/auth/store/authStore';
+import { EmailSignInSchema } from '@/features/instance/operations/schemas/signInSchema';
+import { loginSuccessDatadogAction } from '@/integrations/datadog/datadog';
+import { reoClient } from '@/integrations/reo/reo';
+import { User } from '@/lib/api.patch';
+import { parseCompanyFromEmail } from '@/lib/string/parseCompanyFromEmail';
+import { getDefaultSignedInCloudRouteForUser } from '@/lib/urls/getDefaultSignedInCloudRouteForUser';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNavigate, useRouter, useSearch } from '@tanstack/react-router';
+import { useCallback } from 'react';
+import { z } from 'zod';
+
+export function useCloudSignIn() {
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+	const router = useRouter();
+	const { mutate: submitLoginData, isPending } = useLoginMutation();
+	const { redirect } = useSearch({ strict: false });
+
+	const submitForm = useCallback((formData: z.infer<typeof EmailSignInSchema>) => {
+		submitLoginData(formData, {
+			onSuccess: async (data) => {
+				// TODO: Detect and fallback to session storage and basic auth if necessary.
+				authStore.setUserForEntity(OverallAppSignIn, data);
+				const defaultCloudRoute = getDefaultSignedInCloudRouteForUser(data);
+
+				loginSuccessDatadogAction(data);
+
+				const company = parseCompanyFromEmail(data.email);
+				reoClient?.identify?.({
+					username: data.email,
+					type: 'email',
+					...(company ? { company } : {}),
+				});
+				await queryClient.invalidateQueries({ queryKey: currentUserQueryKey, refetchType: 'none' });
+				void router.invalidate();
+				await navigate({ to: redirect?.startsWith('/') ? redirect : defaultCloudRoute });
+			},
+		});
+	}, [navigate, queryClient, redirect, router, submitLoginData]);
+	return {
+		isPending,
+		submitForm,
+	};
+}
+
+function useLoginMutation() {
+	return useMutation<User, Error, z.infer<typeof EmailSignInSchema>>({
+		mutationFn: (loginData) => onLoginSubmit(loginData),
+	});
+}
+
+async function onLoginSubmit({ email, password }: z.infer<typeof EmailSignInSchema>) {
+	// TODO: The OpenAPI request body for this endpoint isn't defined.
+	const { data } = await apiClient.post('/Login/', {
+		email,
+		password,
+	});
+	if (data) {
+		// TODO: The OpenAPI response for this endpoint isn't defined.
+		return data as unknown as User;
+	} else {
+		throw new Error('Something went wrong');
+	}
+}

src/features/auth/hooks/useClusterInstanceSignIn.ts

@@ -1,8 +1,14 @@
+import { zodRequireEmail } from '@/lib/zod/email';
 import { zodRequirePassword } from '@/lib/zod/password';
 import { zodRequireUsername } from '@/lib/zod/username';
 import { z } from 'zod';
 
-export const SignInSchema = z.object({
+export const UsernameSignInSchema = z.object({
 	username: zodRequireUsername,
 	password: zodRequirePassword,
 });
+
+export const EmailSignInSchema = z.object({
+	email: zodRequireEmail,
+	password: zodRequirePassword,
+});