From ff5c80252f49b013a0a0cfd05050a7cade91dc2f Mon Sep 17 00:00:00 2001
From: Parwat Kunwar <parwatkunwar08@gmail.com>
Date: Fri, 31 Jan 2025 02:57:02 -0400
Subject: [PATCH] Handle blur event to track password validation (#192)

- Shows validation when the focus is out.
- Creates an error if validation fails stopping to send the api request.
---
 Client/src/app/documents/components/CreateLink.tsx            | 4 +++-
 .../src/app/documents/components/SharingOptionsAccordion.tsx  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/Client/src/app/documents/components/CreateLink.tsx b/Client/src/app/documents/components/CreateLink.tsx
index c58ec7e..a7660d5 100644
--- a/Client/src/app/documents/components/CreateLink.tsx
+++ b/Client/src/app/documents/components/CreateLink.tsx
@@ -53,7 +53,7 @@ export default function CreateLink({ onClose, open, documentId }: CreateLinkProp
 		requiredUserDetailsOption: 1,
 	};
 
-	const { values, setValues, validateAll, getError } = useValidatedFormData<LinkFormValues>({
+	const { values, setValues, validateAll, getError, handleBlur } = useValidatedFormData<LinkFormValues>({
 		initialValues: initialFormValues,
 		validationRules
 	});
@@ -144,6 +144,7 @@ export default function CreateLink({ onClose, open, documentId }: CreateLinkProp
 	const { loading, handleSubmit, error, toast } = useFormSubmission({
 		onSubmit: async () => {
 			const hasError = validateAll();
+
 			if (hasError) {
 				throw new Error('Please correct any errors before generating a link.');
 			}
@@ -232,6 +233,7 @@ export default function CreateLink({ onClose, open, documentId }: CreateLinkProp
 							<SharingOptionsAccordion
 								getError={getError}
 								formValues={values}
+								handleBlur={handleBlur}
 								handleInputChange={handleInputChange}
 								isPasswordVisible={isPasswordVisible}
 								setIsPasswordVisible={setIsPasswordVisible}
diff --git a/Client/src/app/documents/components/SharingOptionsAccordion.tsx b/Client/src/app/documents/components/SharingOptionsAccordion.tsx
index 5343732..74d5135 100644
--- a/Client/src/app/documents/components/SharingOptionsAccordion.tsx
+++ b/Client/src/app/documents/components/SharingOptionsAccordion.tsx
@@ -16,6 +16,7 @@ interface SharingOptionsAccordionProps {
 	expirationType: string;
 	getError: (fieldName: keyof LinkFormValues) => string;
 	handleExpirationChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
 }
 
 const SharingOptionsAccordion = ({
@@ -25,6 +26,7 @@ const SharingOptionsAccordion = ({
 	isPasswordVisible,
 	setIsPasswordVisible,
 	expirationType,
+	handleBlur,
 	handleExpirationChange,
 }: SharingOptionsAccordionProps) => {
 	return (
@@ -77,7 +79,6 @@ const SharingOptionsAccordion = ({
 				mb={4}
 				ml={13}>
 				<FormInput
-
 					id='password'
 					minWidth={420}
 					value={formValues.password}
@@ -94,6 +95,7 @@ const SharingOptionsAccordion = ({
 					type={isPasswordVisible ? 'text' : 'password'}
 					disabled={!formValues.requirePassword}
 					errorMessage={getError('password')}
+					onBlur={handleBlur}
 				/>
 				<IconButton
 					size='large'