Skip to content

Enhance SignupForm with Debounced Validation #3345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 21, 2025
Merged

Enhance SignupForm with Debounced Validation #3345

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
62d5883
Enhance SignupForm with Debounced Validation
Jatin24062005 Feb 17, 2025
8edec76
adding arial label and removing comment as per conversation
Jatin24062005 Feb 21, 2025
0bbe7ee
Merge branch 'develop' into Jatin-issue-#3235
raclim Feb 21, 2025
1e08aab
Arial label and arial live fixed and removes comment
Jatin24062005 Feb 21, 2025
5fdacc7
fix linting
Jatin24062005 Feb 21, 2025
8d74f52
add aria-hidden for eye icon
raclim Feb 21, 2025
0305dc4
Merge branch 'develop' into Jatin-issue-#3235
raclim Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 64 additions & 42 deletions client/modules/User/components/SignupForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,49 +9,62 @@ import Button from '../../../common/Button';
import apiClient from '../../../utils/apiClient';
import useSyncFormTranslations from '../../../common/useSyncFormTranslations';

function asyncValidate(fieldToValidate, value) {
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.';
}
}

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']}
Expand All @@ -62,12 +75,13 @@ 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')}
Expand All @@ -79,18 +93,20 @@ function SignupForm() {
id="username"
autoComplete="username"
autoCapitalize="none"
{...field.input}
{...input}
/>
{field.meta.touched && field.meta.error && (
{meta.touched && meta.error && (
<span className="form-error" aria-live="polite">
{field.meta.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')}
Expand All @@ -101,18 +117,20 @@ function SignupForm() {
type="email"
id="email"
autoComplete="email"
{...field.input}
{...input}
/>
{field.meta.touched && field.meta.error && (
{meta.touched && meta.error && (
<span className="form-error" aria-live="polite">
{field.meta.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')}
Expand All @@ -124,7 +142,7 @@ function SignupForm() {
type={showPassword ? 'text' : 'password'}
id="password"
autoComplete="new-password"
{...field.input}
{...input}
/>
<button
className="form__eye__icon"
Expand All @@ -139,28 +157,30 @@ function SignupForm() {
)}
</button>
</div>
{field.meta.touched && field.meta.error && (
{meta.touched && meta.error && (
<span className="form-error" aria-live="polite">
{field.meta.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')}
</label>
<div className="form__field__password">
<input
className="form__input"
type={showConfirmPassword ? 'text' : 'password'}
aria-label={t('SignupForm.ConfirmPasswordARIA')}
id="confirmPassword" // Match the id with htmlFor
type={showConfirmPassword ? 'text' : 'password'}
id="confirmPassword"
autoComplete="new-password"
{...field.input}
{...input}
/>
<button
className="form__eye__icon"
Expand All @@ -175,14 +195,16 @@ function SignupForm() {
)}
</button>
</div>
{field.meta.touched && field.meta.error && (
{meta.touched && meta.error && (
<span className="form-error" aria-live="polite">
{field.meta.error}
{meta.error}
</span>
)}
</div>
)}
</Field>

{/* Submit Button */}
<Button type="submit" disabled={submitting || invalid || pristine}>
{t('SignupForm.SubmitSignup')}
</Button>
Expand Down