checks for username and username in card overflow fix #8940
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Jacobjeevan
added
needs testing
needs review
and removed
question
|
LGTM |
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
WalkthroughThe changes implemented in this pull request enhance validation and error handling across multiple components, including Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (6)
src/components/Auth/ResetPassword.tsx (1)
131-147: LGTM! Consider extracting validation rules to constants.The password validation implementation looks good and fixes the issue of premature validation messages. The rules provide comprehensive password strength requirements.
Consider extracting the validation rules to named constants for better maintainability:
const PASSWORD_VALIDATION_RULES = [ { validate: (password: string) => password.length >= 8, message: "Password should be atleast 8 characters long" }, // ... other rules ];src/components/ABDM/LinkAbhaNumber/CreateWithAadhaar.tsx (1)
685-700: Consider adding validation for consecutive special charactersThe current validation allows consecutive dots and underscores (e.g., "user..name" or "user__name"), which might not be desirable for an ABHA address.
Add an additional validation rule:
+ {validateRule( + !/[._]{2,}/.test(healthId), + t("abha_address_validation_consecutive_special_chars_error"), + false + )}🧰 Tools
🪛 Biome
[error] 688-688: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.(lint/suspicious/noGlobalIsNan)
src/components/Users/UserAdd.tsx (2)
798-819: Consider extracting regex patterns as constants.While the username validation rules are well-implemented, consider extracting the regex patterns as named constants at the top of the file. This would improve maintainability and make the patterns more reusable.
+const USERNAME_PATTERNS = { + ALLOWED_CHARS: /^[a-z0-9._-]*$/, + START_END: /^[a-z0-9].*[a-z0-9]$/i, + NO_CONSECUTIVE_SPECIAL: /(?:[._-]{2,})/ +};
851-866: Consider adding a password strength indicator.While the password validation rules are comprehensive, consider enhancing the user experience by:
- Adding a visual password strength indicator (weak/medium/strong)
- Implementing a more robust password strength algorithm
Example implementation:
const getPasswordStrength = (password: string): 'weak' | 'medium' | 'strong' => { const hasLength = password.length >= 8; const hasLower = password !== password.toUpperCase(); const hasUpper = password !== password.toLowerCase(); const hasNumber = /\d/.test(password); const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password); const score = [hasLength, hasLower, hasUpper, hasNumber, hasSpecial] .filter(Boolean).length; return score <= 2 ? 'weak' : score <= 4 ? 'medium' : 'strong'; };src/components/Users/UserProfile.tsx (2)
951-951: Improve password confirmation validation.The current implementation only validates password match when the confirmation field is focused. This could lead to a confusing user experience as the validation state is not immediately visible.
Consider showing the validation message whenever both password fields have values:
- {changePasswordForm.new_password_2.length > 0 && ( + {(changePasswordForm.new_password_1.length > 0 && changePasswordForm.new_password_2.length > 0) && ( <div className="text-small mb-2 hidden pl-2 text-secondary-500 peer-focus-within:block"> {validateRule( changePasswordForm.new_password_1 === changePasswordForm.new_password_2, "Confirm password should match the new password", !changePasswordForm.new_password_1, )} </div> )}
Line range hint
910-951: Add rate limiting for password change attempts.The current implementation doesn't protect against brute force attacks on the password change functionality.
Consider implementing rate limiting for password change attempts:
- Track failed password change attempts
- Implement exponential backoff
- Lock the account temporarily after multiple failed attempts
- Add CAPTCHA verification after a certain number of failures
Would you like me to provide a detailed implementation for these security enhancements?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
src/components/ABDM/LinkAbhaNumber/CreateWithAadhaar.tsx(1 hunks)src/components/Auth/ResetPassword.tsx(2 hunks)src/components/Users/ManageUsers.tsx(1 hunks)src/components/Users/UserAdd.tsx(4 hunks)src/components/Users/UserProfile.tsx(2 hunks)
🧰 Additional context used
🪛 Biome
src/components/ABDM/LinkAbhaNumber/CreateWithAadhaar.tsx
[error] 688-688: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.
(lint/suspicious/noGlobalIsNan)
🔇 Additional comments (5)
src/components/Auth/ResetPassword.tsx (1)
Line range hint 42-60: Verify server-side password validation.
While the client-side password validation is comprehensive, ensure that these same validation rules are enforced on the server side for security.
src/components/ABDM/LinkAbhaNumber/CreateWithAadhaar.tsx (1)
685-700: 🛠️ Refactor suggestion
Verify consistency between UI validation rules and submit validation
The validation rules displayed in the UI don't exactly match the regex pattern used in the submit button's disabled state (/^(?![\d.])[a-zA-Z0-9._]{4,}(?<!\.)$/). This could lead to user confusion where the UI shows all validations as passed, but the submit button remains disabled.
Consider extracting validation logic into a shared function:
+ const validateAbhaAddress = (value: string) => {
+ const rules = [
+ { valid: value.length >= 4, message: t("abha_address_validation_length_error") },
+ { valid: Number.isNaN(Number(value[0])) && value[0] !== ".", message: t("abha_address_validation_start_error") },
+ { valid: value[value.length - 1] !== ".", message: t("abha_address_validation_end_error") },
+ { valid: /^[0-9a-zA-Z._]+$/.test(value), message: t("abha_address_validation_character_error") }
+ ];
+ return {
+ isValid: rules.every(r => r.valid),
+ rules
+ };
+ };Then use it consistently:
- disabled={memory?.isLoading || !/^(?![\d.])[a-zA-Z0-9._]{4,}(?<!\.)$/.test(healthId)}
+ disabled={memory?.isLoading || !validateAbhaAddress(healthId).isValid}🧰 Tools
🪛 Biome
[error] 688-688: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.
(lint/suspicious/noGlobalIsNan)
src/components/Users/UserAdd.tsx (2)
148-166: LGTM! Well-implemented validation feedback system.
The enhanced validateRule function now provides better user feedback with three distinct states (initial, valid, invalid), improving the user experience through progressive disclosure.
887-887: LGTM! Confirm password validation is well-implemented.
The confirm password validation provides appropriate feedback and follows the consistent pattern used throughout the form.
src/components/Users/ManageUsers.tsx (1)
249-251: LGTM! Overflow fix implemented correctly.
The addition of max-w-full break-words classes effectively prevents username overflow in cards, addressing issue #8883.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/components/Users/UserProfile.tsx (1)
196-218: Consider enhancing password validation rules and performance.The password validation implementation could be improved in two ways:
- Add special character requirement for better security
- Memoize the rules array to prevent unnecessary re-creation on each render
const validatePassword = (password: string) => { - const rules = [ + const rules = useMemo(() => [ { test: (p: string) => p.length >= 8, message: "Password should be at least 8 characters long", }, { test: (p: string) => p !== p.toUpperCase(), message: "Password should contain at least 1 lowercase letter", }, { test: (p: string) => p !== p.toLowerCase(), message: "Password should contain at least 1 uppercase letter", }, { test: (p: string) => /\d/.test(p), message: "Password should contain at least 1 number", }, + { + test: (p: string) => /[!@#$%^&*(),.?":{}|<>]/.test(p), + message: "Password should contain at least 1 special character", + }, - ]; + ], []); return rules.map((rule) => validateRule(rule.test(password), rule.message, !password), ); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
src/components/ABDM/LinkAbhaNumber/CreateWithAadhaar.tsx(1 hunks)src/components/Auth/ResetPassword.tsx(2 hunks)src/components/Users/UserProfile.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/ABDM/LinkAbhaNumber/CreateWithAadhaar.tsx
- src/components/Auth/ResetPassword.tsx
🔇 Additional comments (1)
src/components/Users/UserProfile.tsx (1)
931-931: LGTM!
The password validation feedback implementation provides clear visual feedback to users.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/components/Users/UserProfile.tsx (1)
954-954: Consider UX improvements for password confirmation.The password confirmation validation works but could be enhanced:
- Use a more user-friendly message like "Passwords must match"
- Consider showing validation state persistently, not just on focus
Apply this diff to improve the message:
validateRule( changePasswordForm.new_password_1 === changePasswordForm.new_password_2, - "Confirm password should match the new password", + "Passwords must match", !changePasswordForm.new_password_2, )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/components/Users/UserProfile.tsx(3 hunks)
🔇 Additional comments (1)
src/components/Users/UserProfile.tsx (1)
931-931: LGTM!
The password validation UI implementation correctly displays validation rules to users.
|
@SwanandBhuskute Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
Fixes Issue in adding new user in users section #7307
Fixes Content overflows from the card in /users #8883
now, username and password check will display like this before entering text in the field and then normal green-red behaviour will be done (7307)
Username was overflowing from the card, so fixed it with simple css (8883)
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
These updates enhance user experience by providing clearer validation messages and improving overall functionality.