feat: consistent error messages and nonempty handling

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

Author: dawsontoth

src/features/auth/ClusterInstanceSignIn.tsx

@@ -12,6 +12,7 @@ import { useInstanceClient } from '@/config/useInstanceClient';
 import { getClusterInfoQueryOptions } from '@/features/cluster/queries/getClusterInfoQuery';
 import { useInstanceLoginMutation } from '@/features/instance/operations/mutations/useInstanceLoginMutation';
 import { getInstanceUserInfo } from '@/features/instance/operations/queries/getInstanceUserInfo';
+import { SignInSchema } from '@/features/instance/operations/schemas/signInSchema';
 import { authStore, OverallAppSignIn } from '@/lib/authStore';
 import { CrossLocalhostIssueType, detectCrossLocalhostUrls } from '@/lib/urls/detectCrossLocalhostUrls';
 import { getOperationsUrlForCluster } from '@/lib/urls/getOperationsUrlForCluster';
@@ -25,20 +26,6 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-const SignInSchema = z.object({
-	username: z
-		.string({
-			error: 'Please enter your username.',
-		})
-		.max(75, { error: 'Username must be less than 75 characters' }),
-	password: z
-		.string({
-			error: 'Please enter your password',
-		})
-		.min(1, { error: 'Password is required' })
-		.max(50, { error: 'Password must be less than 50 characters' }),
-});
-
 export function ClusterInstanceSignIn() {
 	const navigate = useNavigate();
 	const router = useRouter();

src/features/auth/ForgotPassword.tsx

@@ -16,9 +16,9 @@ import { toast } from 'sonner';
 const ForgotPasswordSchema = z.object({
 	email: z
 		.email({
-			error: 'Please enter a valid email address',
+			error: 'Please enter a valid email address.',
 		})
-		.max(75, { error: 'Email must be less than 75 characters' }),
+		.max(75, { error: 'Email cannot be longer than 75 characters.' }),
 });
 
 export function ForgotPassword() {

src/features/auth/ResetPassword.tsx

@@ -17,15 +17,13 @@ import { useResetPasswordMutation } from './hooks/useResetPassword';
 const ResetPasswordSchema = z
 	.object({
 		password: z
-			.string({
-				error: 'Please enter your new password.',
-			})
-			.min(8, { error: 'Password must be at least 8 characters' })
-			.max(50, { error: 'Password must be less than 50 characters.' }),
+			.string()
+			.min(8, { error: 'Password must be at least 8 characters long.' })
+			.max(50, { error: 'Password cannot be longer than 50 characters.' }),
 		confirmPassword: z.string(),
 	})
 	.refine((data) => data.password === data.confirmPassword, {
-		error: 'Passwords do not match',
+		error: 'Passwords do not match.',
 		path: ['confirmPassword'],
 	});
 

src/features/auth/SignIn.tsx

@@ -22,14 +22,10 @@ const SignInSchema = z.object({
 	email: z
 		.email({
 			error: 'Please enter a valid email address.',
-		})
-		.max(75, { error: 'Email must be less than 75 characters' }),
+		}),
 	password: z
-		.string({
-			error: 'Please enter your password',
-		})
-		.min(1, { error: 'Password is required' })
-		.max(50, { error: 'Password must be less than 50 characters' }),
+		.string()
+		.nonempty({ error: 'Please enter your password.' }),
 });
 
 export function SignIn() {

src/features/auth/SignUp.tsx

@@ -15,28 +15,22 @@ import { z } from 'zod';
 
 const SignInSchema = z.object({
 	firstname: z
-		.string({
-			error: 'Please enter your first name.',
-		})
-		.min(2, { error: 'First name is required.' })
-		.max(50, { error: 'First name must be less than 50 characters.' }),
+		.string()
+		.min(2, { error: 'Please enter your first name.' })
+		.max(50, { error: 'First name cannot be longer than 50 characters.' }),
 	lastname: z
-		.string({
-			error: 'Please enter your last name.',
-		})
-		.min(2, { error: 'Last name is required.' })
-		.max(50, { error: 'Last name must be less than 50 characters.' }),
+		.string()
+		.min(2, { error: 'Please enter your last name.' })
+		.max(50, { error: 'Last name cannot be longer than 50 characters.' }),
 	email: z
 		.email({
 			error: 'Please enter a valid email address.',
 		})
-		.max(75, { error: 'Email must be less than 75 characters.' }),
+		.max(75, { error: 'Email cannot be longer than 75 characters.' }),
 	password: z
-		.string({
-			error: 'Please enter your password.',
-		})
-		.min(8, { error: 'Password must be 8 characters or more.' })
-		.max(50, { error: 'Password must be less than 50 characters.' }),
+		.string()
+		.min(8, { error: 'Password must be at least 8 characters long.' })
+		.max(50, { error: 'Password cannot be longer than 50 characters.' }),
 });
 
 export function SignUp() {

src/features/auth/VerifyEmail.tsx

@@ -1,26 +1,26 @@
+import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form/Form';
 import { FormControl } from '@/components/ui/form/FormControl';
 import { FormField } from '@/components/ui/form/FormField';
 import { FormItem } from '@/components/ui/form/FormItem';
 import { FormLabel } from '@/components/ui/form/FormLabel';
 import { FormMessage } from '@/components/ui/form/FormMessage';
-import { useNavigate, useSearch } from '@tanstack/react-router';
+import { Input } from '@/components/ui/input';
 import { useVerifyEmailMutation, VerifyEmailToken } from '@/features/auth/hooks/useVerifyEmail';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useNavigate, useSearch } from '@tanstack/react-router';
 import { useCallback, useEffect } from 'react';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
 import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
 import { z } from 'zod';
 import { useResendEmailVerification } from './hooks/useResendEmailVerification';
-import { toast } from 'sonner';
 
 const VerifyEmailSchema = z.object({
 	email: z
 		.email({
-			error: 'Please enter a valid email address',
+			error: 'Please enter a valid email address.',
 		})
-		.max(75, { error: 'Email must be less than 75 characters' }),
+		.max(75, { error: 'Email cannot be longer than 75 characters.' }),
 });
 
 function SendEmailVerification() {
@@ -101,7 +101,7 @@ export function VerifyEmail() {
 				},
 			});
 		},
-		[submitEmailVerificationToken, navigate]
+		[submitEmailVerificationToken, navigate],
 	);
 
 	useEffect(() => {

src/features/cluster/ClusterSetPassword.tsx

@@ -14,6 +14,7 @@ import {
 	useInstanceResetPasswordMutation,
 } from '@/features/instance/operations/mutations/useInstanceResetPasswordMutation';
 import { getInstanceUserInfo } from '@/features/instance/operations/queries/getInstanceUserInfo';
+import { AddUserFormSchema } from '@/features/instance/operations/schemas/addUserFormSchema';
 import { authStore } from '@/lib/authStore';
 import { getOperationsUrlForCluster } from '@/lib/urls/getOperationsUrlForCluster';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -24,25 +25,6 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
-const ClusterSetPasswordSchema = z
-	.object({
-		username: z.string({
-			error: 'Please enter a username.',
-			// TODO: usernames must have only letters, numbers, hyphens, and underscores
-		}).min(1, { error: 'Please enter a username.' }),
-		password: z
-			.string({
-				error: 'Please enter your password',
-			})
-			.min(1, { error: 'Password is required' })
-			.max(50, { error: 'Password must be less than 50 characters' }),
-		confirmPassword: z.string(),
-	})
-	.refine((data) => data.password === data.confirmPassword, {
-		error: 'Passwords do not match',
-		path: ['confirmPassword'],
-	});
-
 const route = getRouteApi('');
 
 export function ClusterSetPassword() {
@@ -59,18 +41,19 @@ export function ClusterSetPassword() {
 	const router = useRouter();
 
 	const form = useForm({
-		resolver: zodResolver(ClusterSetPasswordSchema),
+		resolver: zodResolver(AddUserFormSchema),
 		defaultValues: {
-			username: '',
-			password: '',
 			confirmPassword: '',
+			password: '',
+			role: 'super_user',
+			username: '',
 		},
 	});
 	const tempPassword = cluster?.instances?.find(i => i.tempPassword)?.tempPassword;
 
 	const { mutate: submitInstanceResetPassword, isPending } = useInstanceResetPasswordMutation();
 
-	const submitForm = useCallback(async (formData: z.infer<typeof ClusterSetPasswordSchema>) => {
+	const submitForm = useCallback(async (formData: z.infer<typeof AddUserFormSchema>) => {
 		if (!operationsUrl) {
 			toast.error('Cluster is not yet fully loaded, please wait a moment before trying to sign in.');
 			return;
@@ -87,7 +70,7 @@ export function ClusterSetPassword() {
 				toast.success(response.message);
 				const user = await getInstanceUserInfo({ instanceClient });
 				authStore.setUserForEntity(cluster || null, user);
-				router.invalidate();
+				void router.invalidate();
 				await navigate({ to: redirect?.startsWith('/') ? redirect : defaultInstanceRouteUpOne });
 			},
 		});
@@ -97,7 +80,6 @@ export function ClusterSetPassword() {
 		return <Navigate to="../sign-in" replace={true} />;
 	}
 
-	// TODO: There's a lot we can DRY up between the sign in form variants.
 	return (
 		<>
 			<nav className="fixed top-20 w-full h-12 z-39 px-4 md:px-12 bg-grey-700 flex items-center">

src/features/clusters/upsert/upsertClusterSchema.tsx

@@ -4,8 +4,8 @@ import { z } from 'zod';
 
 export const UpsertClusterSchema = z.object({
 	systemName: z.string()
-		.min(1, 'Must be at least 1 character long.')
-		.max(255, 'Must be at most 255 characters long.'),
+		.nonempty('Please enter a system name.')
+		.max(255, 'System name cannot be longer than 255 characters long.'),
 	abbreviatedName: z
 		.string()
 		.max(10, 'Must be at most 10 characters long.')
@@ -15,8 +15,8 @@ export const UpsertClusterSchema = z.object({
 		.regex(hostNameRegex, 'Please enter a valid host name without the port or any path.')
 		.optional(),
 
-	deploymentDescription: z.string().min(1, 'Please select a deployment tier.'),
-	performanceDescription: z.string().min(1, 'Please select a performance tier.'),
+	deploymentDescription: z.string().nonempty('Please select a deployment tier.'),
+	performanceDescription: z.string().nonempty('Please select a performance tier.'),
 
 	regionPlans: z.array(
 		z.object({

src/features/instance/applications/modals/AddFolderFileModal.tsx

@@ -34,14 +34,12 @@ export function AddFolderFileModal({
 }) {
 	const NewFileFolderSchema = z.object({
 		name: z
-			.string({
-				error: 'Please enter a valid name',
+			.string()
+			.nonempty({ error: 'Please enter a valid name.' })
+			.regex(/^[a-zA-Z0-9_\- .]*$/, {
+				error: 'Names can only contain letters, numbers, underscores, hyphens, periods, and spaces.',
 			})
-			.min(1, { error: 'Must be at least 1 character long' })
-			.regex(/^[a-zA-Z0-9_\- .]+$/, {
-				error: 'Names can only contain letters, numbers, underscores, hyphens, periods, and spaces',
-			})
-			.max(50, { error: 'Must be less than 50 characters' })
+			.max(50, { error: 'Names cannot be longer than 50 characters.' })
 			.trim(),
 	});
 

src/features/instance/applications/new/CreateNewProjectForm.tsx

@@ -20,9 +20,9 @@ import { z } from 'zod';
 const NewProjectSchema = z.object({
 	newApplicationName: z
 		.string()
-		.min(1, { error: 'Project name is required' })
-		.max(75, { error: 'Project name must be less than 75 characters' })
-		.regex(/^[a-zA-Z0-9-_]+$/, { error: 'Can only contain letters, numbers, dashes and underscores' }),
+		.nonempty({ error: 'Project name is required.' })
+		.max(75, { error: 'Project name cannot be longer than 75 characters.' })
+		.regex(/^[a-zA-Z0-9-_]*$/, { error: 'Can only contain letters, numbers, dashes and underscores.' }),
 	replicated: z.boolean(),
 });