From 62d58834d75d525822183062dbac17fa40103635 Mon Sep 17 00:00:00 2001
From: JATIN <Jatin04072005@gmail.com>
Date: Mon, 17 Feb 2025 21:15:40 +0530
Subject: [PATCH 1/5] Enhance SignupForm with Debounced Validation

---
 client/modules/User/components/SignupForm.jsx | 120 ++++++++++--------
 1 file changed, 65 insertions(+), 55 deletions(-)

diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index fbb5c49b80..643a9adeb2 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -9,49 +9,64 @@ import Button from '../../../common/Button';
 import apiClient from '../../../utils/apiClient';
 import useSyncFormTranslations from '../../../common/useSyncFormTranslations';
 
-function asyncValidate(fieldToValidate, value) {
+// Debounce utility function
+const debounce = (func, delay) => {
+  let timer;
+  return (...args) =>
+    new Promise((resolve) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => resolve(func(...args)), delay);
+    });
+};
+
+// API Validation Function
+async function asyncValidate(fieldToValidate, value) {
   if (!value || value.trim().length === 0) {
     return '';
   }
-  const queryParams = {};
-  queryParams[fieldToValidate] = value;
-  queryParams.check_type = fieldToValidate;
-  return apiClient
-    .get('/signup/duplicate_check', { params: queryParams })
-    .then((response) => {
-      if (response.data.exists) {
-        return response.data.message;
-      }
-      return '';
+  const queryParams = {
+    [fieldToValidate]: value,
+    check_type: fieldToValidate
+  };
+
+  try {
+    const response = await apiClient.get('/signup/duplicate_check', {
+      params: queryParams
     });
+    return response.data.exists ? response.data.message : '';
+  } catch (error) {
+    return 'Error validating field.';
+  }
 }
 
+// Debounced Validators
+const debouncedAsyncValidate = debounce(asyncValidate, 300);
+
 function validateUsername(username) {
-  return asyncValidate('username', username);
+  return debouncedAsyncValidate('username', username);
 }
 
 function validateEmail(email) {
-  return asyncValidate('email', email);
+  return debouncedAsyncValidate('email', email);
 }
 
 function SignupForm() {
   const { t, i18n } = useTranslation();
-
   const dispatch = useDispatch();
-  function onSubmit(formProps) {
-    return dispatch(validateAndSignUpUser(formProps));
-  }
+  const formRef = useRef(null);
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const formRef = useRef(null);
-  const handleVisibility = () => {
-    setShowPassword(!showPassword);
-  };
-  const handleConfirmVisibility = () => {
-    setShowConfirmPassword(!showConfirmPassword);
-  };
+
   useSyncFormTranslations(formRef, i18n.language);
 
+  const handleVisibility = () => setShowPassword(!showPassword);
+  const handleConfirmVisibility = () =>
+    setShowConfirmPassword(!showConfirmPassword);
+
+  function onSubmit(formProps) {
+    return dispatch(validateAndSignUpUser(formProps));
+  }
+
   return (
     <Form
       fields={['username', 'email', 'password', 'confirmPassword']}
@@ -62,57 +77,56 @@ function SignupForm() {
         formRef.current = form;
         return (
           <form className="form" onSubmit={handleSubmit}>
+            {/* Username Field */}
             <Field
               name="username"
               validate={validateUsername}
               validateFields={[]}
             >
-              {(field) => (
+              {({ input, meta }) => (
                 <div className="form__field">
                   <label htmlFor="username" className="form__label">
                     {t('SignupForm.Title')}
                   </label>
                   <input
                     className="form__input"
-                    aria-label={t('SignupForm.TitleARIA')}
                     type="text"
                     id="username"
                     autoComplete="username"
                     autoCapitalize="none"
-                    {...field.input}
+                    {...input}
                   />
-                  {field.meta.touched && field.meta.error && (
-                    <span className="form-error" aria-live="polite">
-                      {field.meta.error}
-                    </span>
+                  {meta.touched && meta.error && (
+                    <span className="form-error">{meta.error}</span>
                   )}
                 </div>
               )}
             </Field>
+
+            {/* Email Field */}
             <Field name="email" validate={validateEmail} validateFields={[]}>
-              {(field) => (
+              {({ input, meta }) => (
                 <div className="form__field">
                   <label htmlFor="email" className="form__label">
                     {t('SignupForm.Email')}
                   </label>
                   <input
                     className="form__input"
-                    aria-label={t('SignupForm.EmailARIA')}
                     type="email"
                     id="email"
                     autoComplete="email"
-                    {...field.input}
+                    {...input}
                   />
-                  {field.meta.touched && field.meta.error && (
-                    <span className="form-error" aria-live="polite">
-                      {field.meta.error}
-                    </span>
+                  {meta.touched && meta.error && (
+                    <span className="form-error">{meta.error}</span>
                   )}
                 </div>
               )}
             </Field>
+
+            {/* Password Field */}
             <Field name="password">
-              {(field) => (
+              {({ input, meta }) => (
                 <div className="form__field">
                   <label htmlFor="password" className="form__label">
                     {t('SignupForm.Password')}
@@ -120,17 +134,15 @@ function SignupForm() {
                   <div className="form__field__password">
                     <input
                       className="form__input"
-                      aria-label={t('SignupForm.PasswordARIA')}
                       type={showPassword ? 'text' : 'password'}
                       id="password"
                       autoComplete="new-password"
-                      {...field.input}
+                      {...input}
                     />
                     <button
                       className="form__eye__icon"
                       type="button"
                       onClick={handleVisibility}
-                      aria-hidden="true"
                     >
                       {showPassword ? (
                         <AiOutlineEyeInvisible />
@@ -139,16 +151,16 @@ function SignupForm() {
                       )}
                     </button>
                   </div>
-                  {field.meta.touched && field.meta.error && (
-                    <span className="form-error" aria-live="polite">
-                      {field.meta.error}
-                    </span>
+                  {meta.touched && meta.error && (
+                    <span className="form-error">{meta.error}</span>
                   )}
                 </div>
               )}
             </Field>
+
+            {/* Confirm Password Field */}
             <Field name="confirmPassword">
-              {(field) => (
+              {({ input, meta }) => (
                 <div className="form__field">
                   <label htmlFor="confirmPassword" className="form__label">
                     {t('SignupForm.ConfirmPassword')}
@@ -157,16 +169,14 @@ function SignupForm() {
                     <input
                       className="form__input"
                       type={showConfirmPassword ? 'text' : 'password'}
-                      aria-label={t('SignupForm.ConfirmPasswordARIA')}
-                      id="confirmPassword" // Match the id with htmlFor
+                      id="confirmPassword"
                       autoComplete="new-password"
-                      {...field.input}
+                      {...input}
                     />
                     <button
                       className="form__eye__icon"
                       type="button"
                       onClick={handleConfirmVisibility}
-                      aria-hidden="true"
                     >
                       {showConfirmPassword ? (
                         <AiOutlineEyeInvisible />
@@ -175,14 +185,14 @@ function SignupForm() {
                       )}
                     </button>
                   </div>
-                  {field.meta.touched && field.meta.error && (
-                    <span className="form-error" aria-live="polite">
-                      {field.meta.error}
-                    </span>
+                  {meta.touched && meta.error && (
+                    <span className="form-error">{meta.error}</span>
                   )}
                 </div>
               )}
             </Field>
+
+            {/* Submit Button */}
             <Button type="submit" disabled={submitting || invalid || pristine}>
               {t('SignupForm.SubmitSignup')}
             </Button>

From 8edec764b54a912b84ac0534be8727af4835cec2 Mon Sep 17 00:00:00 2001
From: JATIN <Jatin04072005@gmail.com>
Date: Fri, 21 Feb 2025 15:29:29 +0530
Subject: [PATCH 2/5] adding  arial label and removing comment as per
 conversation

---
 client/modules/User/components/SignupForm.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index 643a9adeb2..dd41633a8b 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -9,7 +9,6 @@ import Button from '../../../common/Button';
 import apiClient from '../../../utils/apiClient';
 import useSyncFormTranslations from '../../../common/useSyncFormTranslations';
 
-// Debounce utility function
 const debounce = (func, delay) => {
   let timer;
   return (...args) =>
@@ -134,6 +133,7 @@ function SignupForm() {
                   <div className="form__field__password">
                     <input
                       className="form__input"
+                      aria-label={t('SignupForm.PasswordARIA')}
                       type={showPassword ? 'text' : 'password'}
                       id="password"
                       autoComplete="new-password"

From 1e08aabd410fb723dff3e4b28d5a6138c120ea0a Mon Sep 17 00:00:00 2001
From: JATIN <Jatin04072005@gmail.com>
Date: Fri, 21 Feb 2025 22:31:24 +0530
Subject: [PATCH 3/5] Arial label and arial live fixed and removes comment

---
 client/modules/User/components/SignupForm.jsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index dd41633a8b..fdf27fe137 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -89,6 +89,7 @@ function SignupForm() {
                   </label>
                   <input
                     className="form__input"
+                    aria-label={t('SignupForm.TitleARIA')}
                     type="text"
                     id="username"
                     autoComplete="username"
@@ -96,7 +97,7 @@ function SignupForm() {
                     {...input}
                   />
                   {meta.touched && meta.error && (
-                    <span className="form-error">{meta.error}</span>
+                    <span className="form-error" aria-live="polite">{meta.error}</span>
                   )}
                 </div>
               )}
@@ -111,13 +112,14 @@ function SignupForm() {
                   </label>
                   <input
                     className="form__input"
+                    aria-label={t('SignupForm.EmailARIA')}
                     type="email"
                     id="email"
                     autoComplete="email"
                     {...input}
                   />
                   {meta.touched && meta.error && (
-                    <span className="form-error">{meta.error}</span>
+                    <span className="form-error" aria-live="polite">{meta.error}</span>
                   )}
                 </div>
               )}
@@ -143,6 +145,7 @@ function SignupForm() {
                       className="form__eye__icon"
                       type="button"
                       onClick={handleVisibility}
+                      aria-hidden="true"
                     >
                       {showPassword ? (
                         <AiOutlineEyeInvisible />
@@ -152,7 +155,7 @@ function SignupForm() {
                     </button>
                   </div>
                   {meta.touched && meta.error && (
-                    <span className="form-error">{meta.error}</span>
+                    <span className="form-error" aria-live="polite">{meta.error}</span>
                   )}
                 </div>
               )}
@@ -168,6 +171,7 @@ function SignupForm() {
                   <div className="form__field__password">
                     <input
                       className="form__input"
+                      aria-label={t('SignupForm.ConfirmPasswordARIA')}
                       type={showConfirmPassword ? 'text' : 'password'}
                       id="confirmPassword"
                       autoComplete="new-password"
@@ -186,7 +190,7 @@ function SignupForm() {
                     </button>
                   </div>
                   {meta.touched && meta.error && (
-                    <span className="form-error">{meta.error}</span>
+                    <span className="form-error" aria-live="polite">{meta.error}</span>
                   )}
                 </div>
               )}

From 5fdacc706043f2d0c5ed1b58d02deacd467205ff Mon Sep 17 00:00:00 2001
From: JATIN <Jatin04072005@gmail.com>
Date: Fri, 21 Feb 2025 22:40:26 +0530
Subject: [PATCH 4/5] fix linting

---
 client/modules/User/components/SignupForm.jsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index fdf27fe137..63b2382077 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -38,7 +38,6 @@ async function asyncValidate(fieldToValidate, value) {
   }
 }
 
-// Debounced Validators
 const debouncedAsyncValidate = debounce(asyncValidate, 300);
 
 function validateUsername(username) {
@@ -97,7 +96,9 @@ function SignupForm() {
                     {...input}
                   />
                   {meta.touched && meta.error && (
-                    <span className="form-error" aria-live="polite">{meta.error}</span>
+                    <span className="form-error" aria-live="polite">
+                      {meta.error}
+                    </span>
                   )}
                 </div>
               )}
@@ -119,7 +120,9 @@ function SignupForm() {
                     {...input}
                   />
                   {meta.touched && meta.error && (
-                    <span className="form-error" aria-live="polite">{meta.error}</span>
+                    <span className="form-error" aria-live="polite">
+                      {meta.error}
+                    </span>
                   )}
                 </div>
               )}
@@ -155,7 +158,9 @@ function SignupForm() {
                     </button>
                   </div>
                   {meta.touched && meta.error && (
-                    <span className="form-error" aria-live="polite">{meta.error}</span>
+                    <span className="form-error" aria-live="polite">
+                      {meta.error}
+                    </span>
                   )}
                 </div>
               )}
@@ -190,7 +195,9 @@ function SignupForm() {
                     </button>
                   </div>
                   {meta.touched && meta.error && (
-                    <span className="form-error" aria-live="polite">{meta.error}</span>
+                    <span className="form-error" aria-live="polite">
+                      {meta.error}
+                    </span>
                   )}
                 </div>
               )}

From 8d74f52e3714db35016c190512fed413faf2643c Mon Sep 17 00:00:00 2001
From: raclim <raclim@nyu.edu>
Date: Fri, 21 Feb 2025 12:20:50 -0500
Subject: [PATCH 5/5] add aria-hidden for eye icon

---
 client/modules/User/components/SignupForm.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/modules/User/components/SignupForm.jsx b/client/modules/User/components/SignupForm.jsx
index 63b2382077..95181fe76d 100644
--- a/client/modules/User/components/SignupForm.jsx
+++ b/client/modules/User/components/SignupForm.jsx
@@ -186,6 +186,7 @@ function SignupForm() {
                       className="form__eye__icon"
                       type="button"
                       onClick={handleConfirmVisibility}
+                      aria-hidden="true"
                     >
                       {showConfirmPassword ? (
                         <AiOutlineEyeInvisible />