Develop Code sync up #788
Develop Code sync up #788
Conversation
…assword,added error message, upgraded to formcomposerv2 in forgotpassword & change password
PFM-5822:Fixed forgot password not redirecting,added validation for password,added error message, upgraded to formcomposerv2 in forgotpassword & change password
This reverts commit 022b3d2.
PFM-5842: Fixed category & subcategory value showing null
PFM-5968:Login Screen – Forget Password – Select city
PFM-5969: Added select all for roles dropdown
PFM-5983: Password length max set to 10, Fixed uppercase not giving hint
PFM-5973 Added conditions to open any dashboard in new tab
PFM-5971 added filter for current tenant
PFM-5996: Fixed employee side bar not working
…766 ) PFM-5971 Added a default function to select a default jurisdiction fo…
…775 ) ISTE-20: Added sarpanch,revenue collector, secretory & Updated role
ISTE-19: Fixed forgot password issue
ISTE-20: Fixed count not reflecting
ISTE-9 changes in top bar for type of user
ISTE-10 Validation added while creating employee
ISTE-8 Modification in Multiselect dropdown
ISTE-8 Modified Tag for Division user
ISTE-8 Modification in all select for Multiselect
ISTE-22 Modification in Change city dropdown
ISTE-11: Added css to hide breadcrum
WalkthroughThe recent updates enhance user interface interactions and role management across multiple components in the frontend, with tweaks in password management and consumer details handling. Changes also include CSS adjustments and the removal of specific filters in service logic, reflecting a refined approach to user experience and system functionality. Changes
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 as PR comments)
Additionally, you can add CodeRabbit Configration 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: 10
Out of diff range and nitpick comments (8)
frontend/micro-ui/web/micro-ui-internals/example/public/index.html (4)
19-19: Consider using a more specific CSS selector for#logo-img-container.Using IDs for styling can lead to specificity issues in larger projects. Consider using classes or more specific selectors if this style is intended to be more flexible or reusable.
23-23: Ensure consistent CSS formatting.The CSS property
margin: 0lacks a semicolon at the end. While some browsers may interpret this correctly, it's best practice to include semicolons after each property for consistency and to avoid potential issues in different environments.
27-27: Ensure consistent CSS formatting.The CSS property
margin: 0lacks a semicolon at the end. It's best practice to include semicolons after each property for consistency and to avoid potential issues in different environments.
31-31: Ensure consistent CSS formatting.The CSS property
margin: 0;correctly includes a semicolon. Ensure that all CSS properties in this file follow this consistent formatting.frontend/micro-ui/web/public/index.html (4)
15-17: Consider using a more specific CSS selector for#logo-img-container.Using IDs for styling can lead to specificity issues in larger projects. Consider using classes or more specific selectors if this style is intended to be more flexible or reusable.
19-19: Ensure consistent CSS formatting.The CSS property
margin: 0lacks a semicolon at the end. While some browsers may interpret this correctly, it's best practice to include semicolons after each property for consistency and to avoid potential issues in different environments.
23-23: Ensure consistent CSS formatting.The CSS property
margin: 0lacks a semicolon at the end. It's best practice to include semicolons after each property for consistency and to avoid potential issues in different environments.
27-27: Ensure consistent CSS formatting.The CSS property
margin: 0;correctly includes a semicolon. Ensure that all CSS properties in this file follow this consistent formatting.
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (31)
- frontend/mgramseva/lib/providers/consumer_details_provider.dart (1 hunks)
- frontend/mgramseva/lib/screeens/change_password/change_password.dart (3 hunks)
- frontend/mgramseva/lib/utils/constants/i18_key_constants.dart (2 hunks)
- frontend/mgramseva/lib/utils/role_actions.dart (1 hunks)
- frontend/mgramseva/lib/widgets/password_hint.dart (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/example/public/index.html (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/services/molecules/Store/service.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/ChangeCity.js (5 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/TopBarSideBar/TopBar.js (2 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/TopBarSideBar/index.js (2 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/Home/UserProfile.js (8 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/ChangePassword/changePassword.js (5 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/ChangePassword/config.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/ForgotPassword/forgotPassword.js (6 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Login/login.js (2 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/EmployeeModuleCard.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/hrmscard.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/Multiselect.js (2 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/jurisdiction.js (9 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/pages/Inbox.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/pages/createEmployee.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/MobileNumber.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/Password.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/SVG.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/StringManipulator.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/TextInput.js (1 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/svgindex.js (2 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/FormComposerV2.js (19 hunks)
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/index.js (2 hunks)
- frontend/micro-ui/web/public/index.html (1 hunks)
- municipal-services/ws-calculator/src/main/resources/application.properties (1 hunks)
Files skipped from review due to trivial changes (7)
- frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/services/molecules/Store/service.js
- frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/ChangePassword/config.js
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/MobileNumber.js
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/SVG.js
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/TextInput.js
- frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/index.js
- municipal-services/ws-calculator/src/main/resources/application.properties
Additional Context Used
Learnings (1)
frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/pages/createEmployee.js (1)
User: siddhant-nawale-egov PR: egovernments/DIGIT-Frontend#214 File: micro-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/pages/employee/Upload.js:14-17 Timestamp: 2024-03-15T12:20:50.090Z Learning: The `geojsonValidations` is a utility developed within the DIGIT-Frontend project, not an external dependency.
Additional comments not posted (32)
frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/TopBarSideBar/index.js (1)
Line range hint
60-72: Ensure that theshowSidebarflag is properly managed.The conditional rendering based on the
showSidebarflag seems appropriate. However, ensure that this flag is being correctly set and managed throughout the application to avoid UI inconsistencies.Verification successful
The management of the
showSidebarflag across the application appears to be consistent and appropriate. The flag is used to control the visibility of the sidebar in different contexts, such as for different user roles (citizen and employee), and is managed based on conditions relevant to those contexts. Here are the specific usages found:
- In
citizen/index.js, the sidebar is always shown (showSidebar={true}).- In
employee/index.js, the sidebar visibility depends on whether the user profile is being viewed (showSidebar={isUserProfile ? true : false}).- In
TopBarSideBar/index.js, the sidebar is conditionally rendered based on theshowSidebarflag, which is set totrueby default.This setup ensures that the sidebar's visibility is flexible and can be adjusted based on the application's requirements and user interactions.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the management of the `showSidebar` flag across the application. # Test: Search for the usage of `showSidebar`. Expect: Proper management and consistent usage. rg --type js 'showSidebar'Length of output: 539
frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/Password.js (1)
1-51: Review the use of session storage for user type determination.The component retrieves the user type from session storage to conditionally style the input field. While this approach works, consider the security implications of storing user type in session storage. Verify if there's a more secure way to handle this, possibly by using context or Redux for state management.
frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/hrmscard.js (1)
18-18: Review the roles string for potential typos.The roles string includes various roles separated by commas. Ensure that there are no typos or incorrect role names that could lead to authorization issues. It might be beneficial to maintain these role names in a centralized location or configuration to avoid hardcoding and potential errors.
Verification successful
The role names used in the
HRMSCardcomponent appear to be consistent with their usage across other parts of the application, indicating that there are no typos or incorrect role names in the context of this specific component. However, the roles are hardcoded in several places, which could lead to potential errors if changes are needed in the future. It might be beneficial to consider centralizing these role names in a configuration file or service to improve maintainability and ease of updates.
- Consider centralizing role management: To avoid hardcoding and potential errors, consider maintaining these role names in a centralized location or configuration. This approach can simplify updates and ensure consistency across the application.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the role names used in the application. # Test: Search for the usage of role names. Expect: Consistent and correct usage. rg --type js 'roles:'Length of output: 10250
frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/ForgotPassword/forgotPassword.js (1)
59-66: Ensure proper validation for mobile number input.The mobile number input field uses a custom
typeattribute value "mobileNumber" which is not a standard HTML input type. Ensure that this custom type is properly handled in the form component to validate and manage mobile number inputs correctly.Verification successful
The verification process has confirmed that the custom input type "mobileNumber" is indeed handled and validated across various components in the codebase. The
FormComposerV2andRenderFormFieldscomponents specifically handle the "mobileNumber" type by rendering aMobileNumbercomponent, which includes validation logic. This ensures that the mobile number input is correctly managed and validated.Here are the specific files and components that handle the "mobileNumber" type:
FormComposerV2.jsandRenderFormFields.jsin thereact-componentspackage render aMobileNumbercomponent for inputs of type "mobileNumber".- Various pages and components across the application utilize this setup, ensuring consistent handling of mobile number inputs.
This confirms that the custom input type "mobileNumber" is properly managed and validated throughout the application.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the handling of custom input types in the application. # Test: Search for the usage of custom input types. Expect: Proper handling and validation. rg --type js 'type: "mobileNumber"'Length of output: 981
Script:
#!/bin/bash # Description: Search for common validation or handling mechanisms for the custom input type "mobileNumber". # Test: Search for functions or components that handle "mobileNumber". Expect: Functions or components that include validation logic. rg --type js 'mobileNumber' -C 10Length of output: 240844
frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/ChangeCity.js (1)
26-29: Ensure proper error handling and state management when fetching user data.frontend/mgramseva/lib/widgets/password_hint.dart (1)
102-116: Ensure the new password hint for uppercase letters is correctly integrated and displayed based on the password input.frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/ChangePassword/changePassword.js (1)
Line range hint
57-100: Ensure that the maximum length restriction on password fields does not conflict with existing password policies.Verification successful
The verification process has confirmed that the maximum length restriction of 10 characters for password fields in the
changePassword.jsfile aligns with similar settings found in other parts of the codebase, such as the login page configurations. This suggests that the change is consistent with the general password policy used within the application.
- Location:
frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/Login/config.jsScripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the maximum length restriction aligns with the password policy. # Test: Search for password policy settings in the application. rg --type js $'passwordPolicy'Length of output: 29
Script:
#!/bin/bash # Description: Search for alternative keywords related to password settings and check common configuration files. # Search for keywords like 'minLength', 'maxLength', 'passwordRules', 'passwordRequirements' in JavaScript files. rg --type js -e 'minLength' -e 'maxLength' -e 'passwordRules' -e 'passwordRequirements' # Check common configuration file locations for password policy settings. cat config/*.js 2>/dev/null cat .env 2>/dev/nullLength of output: 5519
frontend/mgramseva/lib/utils/role_actions.dart (1)
92-143: Verify that the newly added roles are correctly integrated into the role-based access control system.Verification successful
The output from the executed script shows that the new roles
SARPANCH,SECRETARY, andREVENUE_COLLECTORare indeed present in therole_actions.dartfile across various cases in the role-based access control system. This confirms that these roles have been integrated into the system as intended.Given this information, it appears that the integration of the new roles in the role-based access control system has been successfully verified. There are no indications of issues or misconfigurations related to the addition of these roles in the provided context.
Final response:
The new roles
SARPANCH,SECRETARY, andREVENUE_COLLECTORhave been successfully integrated into the role-based access control system inrole_actions.dart. The verification confirms that these roles are correctly used across various routes and functionalities within the application.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify integration of new roles in the access control system. # Test: Search for usage of new roles in the application. rg --type dart $'SARPANCH|SECRETARY|REVENUE_COLLECTOR'Length of output: 2676
frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/employee/Login/login.js (1)
102-113: Ensure that the password validation changes are consistent with the application's security requirements.Verification successful
The password validation changes in the
login.jsfile, which set a maximum length of 10 characters, appear to be consistent with the application's security requirements. This is supported by the documentation found inbusiness-services/egov-hrms/README.md, which mentions a default password length of 10 characters for employee creation, indicating that this length is in line with the overall password policy of the application.
- Relevant Documentation Reference:
business-services/egov-hrms/README.mdmentions the default password length of 10 characters, which should be in sync with the egov-user password policy.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistency of password validation with security requirements. # Test: Search for security requirements documentation in the application. rg --type markdown $'security_requirements'Length of output: 42
Script:
#!/bin/bash # Broaden the search to find any documentation or references related to password validation and security requirements. rg --type md,txt $'password|validation|security'Length of output: 80
Script:
#!/bin/bash # Correcting the syntax error and broadening the search to find any documentation or references related to password validation and security requirements. rg --type md --type txt $'password|validation|security'Length of output: 6025
frontend/mgramseva/lib/screeens/change_password/change_password.dart (1)
Line range hint
88-110: Confirm that the maximum length setting for password fields aligns with the application's password policy.frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/TopBarSideBar/TopBar.js (1)
Line range hint
110-127: Ensure that the conditional rendering of user roles in the top bar is correctly implemented and does not leak sensitive information.frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/pages/Inbox.js (1)
31-31: Verify that the updated role-based search parameters are correctly implemented and align with the application's access control policies.frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/Multiselect.js (1)
93-93: Ensure proper handling ofi18textandcodeproperties infnToSelectOptionThroughProvidedSelection.frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/pages/createEmployee.js (1)
115-116: Ensure that the form validation logic is correctly implemented for jurisdictions.frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/jurisdiction.js (3)
237-237: Ensure that the role data retrieval logic is correctly implemented.Verification successful
The function
getroledatais indeed present and used within thejurisdiction.jsfile. It is defined, passed as a prop, and utilized to generate options based on a role option. This confirms that the role data retrieval logic is implemented in the specified component.Conclusion:
The role data retrieval logic using thegetroledatafunction is correctly implemented in thejurisdiction.jsfile. The function is actively used in the component, ensuring that role data is fetched and utilized as expected.
Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the role data retrieval logic is correctly implemented in `getroledata`. # Test: Search for the function usage. Expect: Correct implementation. rg --type javascript $'getroledata'Length of output: 69
Script:
#!/bin/bash # Description: Verify that the role data retrieval logic is correctly implemented in `getroledata`. # Test: Search for the function usage. Expect: Correct implementation. rg --type js 'getroledata'Length of output: 743
431-431: Check the implementation ofi18textproperty setting inselectrole.Verification successful
The implementation of the
i18textproperty within theselectrolefunction in thejurisdiction.jsfile has been successfully verified. The function sets thei18textproperty for eachresDataobject in the arrayresas"ACCESSCONTROL_ROLES_ROLES_" + resData.code, which aligns with the expected behavior described in the review comment.
- Location:
frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/jurisdiction.jsScripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the `i18text` property is correctly set in the `selectrole` function. # Test: Search for the function usage. Expect: Correct implementation. rg --type javascript $'selectrole'Length of output: 68
Script:
#!/bin/bash # Description: Verify that the `i18text` property is correctly set in the `selectrole` function. # Test: Search for the function usage. Expect: Correct implementation. rg --type js $'selectrole'Length of output: 313
Script:
#!/bin/bash # Description: Extract the body of the `selectrole` function to verify the setting of the `i18text` property. # Test: Extract and display the function body. rg --type js --context 10 'const selectrole = \(e\) => {' frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/jurisdiction.jsLength of output: 290
Script:
#!/bin/bash # Description: Correctly extract the body of the `selectrole` function to verify the setting of the `i18text` property. # Test: Extract and display the function body with corrected regex. rg --type js --context 10 'const selectrole = \(e\) => \{' frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/jurisdiction.jsLength of output: 798
453-453: Verify the logic for selecting the default jurisdiction inselectedboundary.Verification successful
The logic for selecting the default jurisdiction in the
selectedboundaryfunction has been verified. The function correctly checks ifjurisdiction?.boundaryis provided and uses it; otherwise, it defaults todefaultjurisdiction(). This behavior is consistent across its usage in the codebase.
- Location:
frontend/micro-ui/web/micro-ui-internals/packages/modules/hrms/src/components/pageComponents/jurisdiction.jsScripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the logic for selecting the default jurisdiction in the `selectedboundary` function. # Test: Search for the function usage. Expect: Correct logic. rg --type javascript $'selectedboundary'Length of output: 74
Script:
#!/bin/bash # Description: Verify the logic for selecting the default jurisdiction in the `selectedboundary` function. # Test: Search for the function usage. Expect: Correct logic. rg --type js 'selectedboundary'Length of output: 736
frontend/mgramseva/lib/providers/consumer_details_provider.dart (2)
531-531: LGTM! The update toonChangeOfCategorycorrectly synchronizes the UI and data model.
538-538: LGTM! The update toonChangeOfSubCategorycorrectly synchronizes the UI and data model.frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/Home/UserProfile.js (3)
159-159: LGTM! The update tosetUserNewPasswordcorrectly enforces the new password requirements.
169-169: LGTM! The update tosetUserConfirmPasswordcorrectly enforces the new password requirements.
220-220: LGTM! The additional password validation inupdateProfileenhances security by ensuring passwords meet the specified requirements.frontend/mgramseva/lib/utils/constants/i18_key_constants.dart (1)
264-265: New constant addition for password hint is consistent with existing naming conventions and structure.frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/FormComposerV2.js (8)
33-33: Import ofPasswordcomponent added.This aligns with the PR's objective to enhance password management across the application.
90-97: Enhanced error handling by clearing errors when the form category changes.This change improves user experience by ensuring that errors from a previously selected category do not persist when a new category is selected.
99-103: Show error toast when there are form errors after a submission attempt.This is a good user experience enhancement, making it clear to users that there are issues that need their attention.
141-167: IntroducedPasswordcomponent in the form fields.This change is consistent with the PR's focus on enhancing password management. Ensure that the
Passwordcomponent is thoroughly tested, especially its integration with the form management logic.
Line range hint
319-334: Checkbox handling logic simplified.The simplification of the checkbox handling logic should make the component more maintainable and potentially less error-prone.
630-636: Auto-closing of error toast after 3 seconds.Automatically closing the toast improves the user interface by not requiring manual intervention to close notifications, which can be overlooked.
813-824: Logic to set the default active navigation link based on configuration.This addition enhances the navigation experience by automatically selecting the appropriate section based on the configuration, which can be particularly useful in complex forms or settings.
876-904: Conditional rendering logic for form sections based on navigation configuration.This is a flexible approach that allows the form to adapt its layout based on the navigation configuration, supporting a dynamic user interface that can change based on the context.
frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/svgindex.js (1)
1905-1908: Export of new SVG components looks correct.
| const PasswordEyeEnableSvg = ({ className, fill = "white", style = {} }) => ( | ||
| <svg width="24" height="24" class=" digit-text-input-customIcon " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_105_1205)"><path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="#505A5F"></path></g><defs><clipPath id="clip0_105_1205"><rect width="24" height="24" fill="white"></rect></clipPath></defs></svg> | ||
| ); | ||
|
|
||
| const PasswordEyeDisableSvg = ({ className, fill = "white", style = {} }) => ( | ||
| <svg width="24" height="24" class=" digit-text-input-customIcon " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_105_1208)"><path d="M12 7C14.76 7 17 9.24 17 12C17 12.65 16.87 13.26 16.64 13.83L19.56 16.75C21.07 15.49 22.26 13.86 22.99 12C21.26 7.61 16.99 4.5 11.99 4.5C10.59 4.5 9.25 4.75 8.01 5.2L10.17 7.36C10.74 7.13 11.35 7 12 7ZM2 4.27L4.28 6.55L4.74 7.01C3.08 8.3 1.78 10.02 1 12C2.73 16.39 7 19.5 12 19.5C13.55 19.5 15.03 19.2 16.38 18.66L16.8 19.08L19.73 22L21 20.73L3.27 3L2 4.27ZM7.53 9.8L9.08 11.35C9.03 11.56 9 11.78 9 12C9 13.66 10.34 15 12 15C12.22 15 12.44 14.97 12.65 14.92L14.2 16.47C13.53 16.8 12.79 17 12 17C9.24 17 7 14.76 7 12C7 11.21 7.2 10.47 7.53 9.8V9.8ZM11.84 9.02L14.99 12.17L15.01 12.01C15.01 10.35 13.67 9.01 12.01 9.01L11.84 9.02Z" fill="#505A5F"></path></g><defs><clipPath id="clip0_105_1208"><rect width="24" height="24" fill="white"></rect></clipPath></defs></svg> | ||
| ); | ||
|
|
There was a problem hiding this comment.
Ensure unique IDs for SVG clip paths to avoid conflicts in the DOM.
- <g clip-path="url(#clip0_105_1205)">
+ <g clip-path="url(#clip0_105_1205_${uniqueId})">
- <clipPath id="clip0_105_1205">
+ <clipPath id="clip0_105_1205_${uniqueId}">
- <g clip-path="url(#clip0_105_1208)">
+ <g clip-path="url(#clip0_105_1208_${uniqueId})">
- <clipPath id="clip0_105_1208">
+ <clipPath id="clip0_105_1208_${uniqueId}">Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| const PasswordEyeEnableSvg = ({ className, fill = "white", style = {} }) => ( | |
| <svg width="24" height="24" class=" digit-text-input-customIcon " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_105_1205)"><path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="#505A5F"></path></g><defs><clipPath id="clip0_105_1205"><rect width="24" height="24" fill="white"></rect></clipPath></defs></svg> | |
| ); | |
| const PasswordEyeDisableSvg = ({ className, fill = "white", style = {} }) => ( | |
| <svg width="24" height="24" class=" digit-text-input-customIcon " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_105_1208)"><path d="M12 7C14.76 7 17 9.24 17 12C17 12.65 16.87 13.26 16.64 13.83L19.56 16.75C21.07 15.49 22.26 13.86 22.99 12C21.26 7.61 16.99 4.5 11.99 4.5C10.59 4.5 9.25 4.75 8.01 5.2L10.17 7.36C10.74 7.13 11.35 7 12 7ZM2 4.27L4.28 6.55L4.74 7.01C3.08 8.3 1.78 10.02 1 12C2.73 16.39 7 19.5 12 19.5C13.55 19.5 15.03 19.2 16.38 18.66L16.8 19.08L19.73 22L21 20.73L3.27 3L2 4.27ZM7.53 9.8L9.08 11.35C9.03 11.56 9 11.78 9 12C9 13.66 10.34 15 12 15C12.22 15 12.44 14.97 12.65 14.92L14.2 16.47C13.53 16.8 12.79 17 12 17C9.24 17 7 14.76 7 12C7 11.21 7.2 10.47 7.53 9.8V9.8ZM11.84 9.02L14.99 12.17L15.01 12.01C15.01 10.35 13.67 9.01 12.01 9.01L11.84 9.02Z" fill="#505A5F"></path></g><defs><clipPath id="clip0_105_1208"><rect width="24" height="24" fill="white"></rect></clipPath></defs></svg> | |
| ); | |
| const PasswordEyeEnableSvg = ({ className, fill = "white", style = {}, uniqueId }) => ( | |
| <svg width="24" height="24" class=" digit-text-input-customIcon " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_105_1205_${uniqueId})"><path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="#505A5F"></path></g><defs><clipPath id="clip0_105_1205_${uniqueId}"><rect width="24" height="24" fill="white"></rect></clipPath></defs></svg> | |
| ); | |
| const PasswordEyeDisableSvg = ({ className, fill = "white", style = {}, uniqueId }) => ( | |
| <svg width="24" height="24" class=" digit-text-input-customIcon " viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_105_1208_${uniqueId})"><path d="M12 7C14.76 7 17 9.24 17 12C17 12.65 16.87 13.26 16.64 13.83L19.56 16.75C21.07 15.49 22.26 13.86 22.99 12C21.26 7.61 16.99 4.5 11.99 4.5C10.59 4.5 9.25 4.75 8.01 5.2L10.17 7.36C10.74 7.13 11.35 7 12 7ZM2 4.27L4.28 6.55L4.74 7.01C3.08 8.3 1.78 10.02 1 12C2.73 16.39 7 19.5 12 19.5C13.55 19.5 15.03 19.2 16.38 18.66L16.8 19.08L19.73 22L21 20.73L3.27 3L2 4.27ZM7.53 9.8L9.08 11.35C9.03 11.56 9 11.78 9 12C9 13.66 10.34 15 12 15C12.22 15 12.44 14.97 12.65 14.92L14.2 16.47C13.53 16.8 12.79 17 12 17C9.24 17 7 14.76 7 12C7 11.21 7.2 10.47 7.53 9.8V9.8ZM11.84 9.02L14.99 12.17L15.01 12.01C15.01 10.35 13.67 9.01 12.01 9.01L11.84 9.02Z" fill="#505A5F"></path></g><defs><clipPath id="clip0_105_1208_${uniqueId}"><rect width="24" height="24" fill="white"></rect></clipPath></defs></svg> | |
| ); |
| useEffect(()=>{ | ||
| if (alreadyQueuedSelectedState?.length === filteredOptions?.length){ | ||
| setIsSelected(true) | ||
| }else{ | ||
| setIsSelected(false) | ||
|
|
||
| } | ||
| },[alreadyQueuedSelectedState]) |
There was a problem hiding this comment.
Consider optimizing the useEffect hook to avoid unnecessary re-renders.
- useEffect(()=>{
- if (alreadyQueuedSelectedState?.length === filteredOptions?.length){
- setIsSelected(true)
- }else{
- setIsSelected(false)
- }
- },[alreadyQueuedSelectedState])
+ useEffect(() => {
+ setIsSelected(alreadyQueuedSelectedState?.length === filteredOptions?.length);
+ }, [alreadyQueuedSelectedState, filteredOptions?.length]);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| useEffect(()=>{ | |
| if (alreadyQueuedSelectedState?.length === filteredOptions?.length){ | |
| setIsSelected(true) | |
| }else{ | |
| setIsSelected(false) | |
| } | |
| },[alreadyQueuedSelectedState]) | |
| useEffect(() => { | |
| setIsSelected(alreadyQueuedSelectedState?.length === filteredOptions?.length); | |
| }, [alreadyQueuedSelectedState, filteredOptions?.length]); |
| let teantsArray = [],filteredArray = []; | ||
| userData?.user[0].roles?.forEach((role) => teantsArray.push(role.tenantId)); |
There was a problem hiding this comment.
Optimize the role filtering logic to avoid potential performance issues with large user roles arrays.
- userData?.user[0].roles?.forEach((role) => teantsArray.push(role.tenantId));
+ teantsArray = userData?.user[0]?.roles?.map(role => role.tenantId) || [];Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| let teantsArray = [],filteredArray = []; | |
| userData?.user[0].roles?.forEach((role) => teantsArray.push(role.tenantId)); | |
| let teantsArray = [],filteredArray = []; | |
| teantsArray = userData?.user[0]?.roles?.map(role => role.tenantId) || []; |
| .employeeForgotPassword .employee-card-input { | ||
| margin-bottom: 24px !important; | ||
| border-left: none; | ||
| } | ||
| .workbench-bredcrumb { | ||
| display: none !important; | ||
| } |
There was a problem hiding this comment.
Review the necessity of !important in CSS.
The use of !important can make CSS maintenance challenging, as it overrides any other styles regardless of specificity. If possible, consider restructuring your CSS to avoid its use, unless absolutely necessary for overriding styles from external libraries.
| }; | ||
|
|
||
| StringManipulator.propTypes = { | ||
| functionName: PropTypes.func, |
There was a problem hiding this comment.
Incorrect PropType for functionName.
The functionName prop is expected to be a string that specifies the manipulation function to be used. However, it is incorrectly defined as PropTypes.func. It should be PropTypes.string.
- functionName: PropTypes.func,
+ functionName: PropTypes.string,Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| functionName: PropTypes.func, | |
| functionName: PropTypes.string, |
| const StringManipulator = (functionName, string, props) => { | ||
| const manipulateString = () => { | ||
| if (!string) return null; | ||
|
|
||
| switch (functionName) { | ||
| case "toSentenceCase": | ||
| return toSentenceCase(string); | ||
| case "capitalizeFirstLetter": | ||
| return capitalizeFirstLetter(string); | ||
| case "toTitleCase": | ||
| return toTitleCase(string); | ||
| case "truncateString": | ||
| return truncateString(string, props?.maxLength); | ||
| default: | ||
| return string; | ||
| } | ||
| }; | ||
|
|
||
| const toSentenceCase = (str) => { | ||
| return str.toLowerCase().replace(/(^\s*\w|[\.\!\?]\s*\w)/g, (c) => { | ||
| return c.toUpperCase(); | ||
| }); | ||
| }; | ||
|
|
||
| const capitalizeFirstLetter = (str) => { | ||
| return str.charAt(0).toUpperCase() + str.slice(1); | ||
| }; | ||
|
|
||
| const toTitleCase = (str) => { | ||
| return str.toLowerCase().replace(/\b\w/g, (c) => { | ||
| return c.toUpperCase(); | ||
| }); | ||
| }; | ||
|
|
||
| const truncateString = (str, maxLength) => { | ||
| if (str.length > maxLength) { | ||
| return str.slice(0, maxLength) + "..."; | ||
| } | ||
| return str; | ||
| }; | ||
|
|
||
| return manipulateString(); | ||
| }; |
There was a problem hiding this comment.
Consider using useCallback for function definitions inside a functional component.
Defining functions like manipulateString, toSentenceCase, capitalizeFirstLetter, toTitleCase, and truncateString inside the component can lead to these functions being recreated on every render. Consider using useCallback to memoize these functions to improve performance.
| .employeeForgotPassword .employee-card-input { | ||
| margin-bottom: 24px !important; | ||
| border-left: none; |
There was a problem hiding this comment.
Review the necessity of !important in CSS.
The use of !important can make CSS maintenance challenging, as it overrides any other styles regardless of specificity. If possible, consider restructuring your CSS to avoid its use, unless absolutely necessary for overriding styles from external libraries.
| return ( | ||
| <React.Fragment> | ||
| <div className="field-container"> | ||
| <div className={`text-input ${user_type === "employee" ? "" : "text-mobile-input-width"} ${props.className}`}> | ||
| <input | ||
| type={passwordVisibleFlag ? "text" : "password"} | ||
| name={props.name} | ||
| id={props.id} | ||
| className={`${user_type ? "employee-card-input" : "citizen-card-input"} ${props.disable && "disabled"} focus-visible ${props.errorStyle && "employee-card-input-error"}`} | ||
| placeholder={props.placeholder} | ||
| onChange={onChange} | ||
| ref={props.inputRef} | ||
| value={props.value} | ||
| style={{ ...props.style }} | ||
| minLength={props.minlength} | ||
| maxLength={props.maxlength || 10} | ||
| max={props.max} | ||
| min={props.min} | ||
| readOnly={props.disable} | ||
| title={props.title} | ||
| step={props.step} | ||
| autoFocus={props.autoFocus} | ||
| /> | ||
| </div> | ||
| {!props.hideSpan ? ( | ||
| <span onClick={showPassword} style={{ maxWidth: "50px", paddingLeft: "5px", marginTop: "unset", border: "1px solid #464646", borderLeft: "none", cursor: "pointer" }} className="citizen-card-input citizen-card-input--front"> | ||
| {passwordVisibleFlag?<PasswordEyeDisableSvg />:<PasswordEyeEnableSvg/>} | ||
|
|
||
| </span> | ||
| ) : null} | ||
| </div> | ||
| </React.Fragment> | ||
| ); |
There was a problem hiding this comment.
Ensure accessibility in the password visibility toggle.
The span used for toggling password visibility should have an appropriate role attribute (e.g., button) and should be accessible via keyboard (i.e., it should handle onKeyPress events). This is important for accessibility reasons, allowing users who rely on keyboards and screen readers to use this functionality.
- <span onClick={showPassword} style={{ maxWidth: "50px", paddingLeft: "5px", marginTop: "unset", border: "1px solid #464646", borderLeft: "none", cursor: "pointer" }} className="citizen-card-input citizen-card-input--front">
+ <span role="button" tabIndex="0" onKeyPress={showPassword} onClick={showPassword} style={{ maxWidth: "50px", paddingLeft: "5px", marginTop: "unset", border: "1px solid #464646", borderLeft: "none", cursor: "pointer" }} className="citizen-card-input citizen-card-input--front">Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| return ( | |
| <React.Fragment> | |
| <div className="field-container"> | |
| <div className={`text-input ${user_type === "employee" ? "" : "text-mobile-input-width"} ${props.className}`}> | |
| <input | |
| type={passwordVisibleFlag ? "text" : "password"} | |
| name={props.name} | |
| id={props.id} | |
| className={`${user_type ? "employee-card-input" : "citizen-card-input"} ${props.disable && "disabled"} focus-visible ${props.errorStyle && "employee-card-input-error"}`} | |
| placeholder={props.placeholder} | |
| onChange={onChange} | |
| ref={props.inputRef} | |
| value={props.value} | |
| style={{ ...props.style }} | |
| minLength={props.minlength} | |
| maxLength={props.maxlength || 10} | |
| max={props.max} | |
| min={props.min} | |
| readOnly={props.disable} | |
| title={props.title} | |
| step={props.step} | |
| autoFocus={props.autoFocus} | |
| /> | |
| </div> | |
| {!props.hideSpan ? ( | |
| <span onClick={showPassword} style={{ maxWidth: "50px", paddingLeft: "5px", marginTop: "unset", border: "1px solid #464646", borderLeft: "none", cursor: "pointer" }} className="citizen-card-input citizen-card-input--front"> | |
| {passwordVisibleFlag?<PasswordEyeDisableSvg />:<PasswordEyeEnableSvg/>} | |
| </span> | |
| ) : null} | |
| </div> | |
| </React.Fragment> | |
| ); | |
| return ( | |
| <React.Fragment> | |
| <div className="field-container"> | |
| <div className={`text-input ${user_type === "employee" ? "" : "text-mobile-input-width"} ${props.className}`}> | |
| <input | |
| type={passwordVisibleFlag ? "text" : "password"} | |
| name={props.name} | |
| id={props.id} | |
| className={`${user_type ? "employee-card-input" : "citizen-card-input"} ${props.disable && "disabled"} focus-visible ${props.errorStyle && "employee-card-input-error"}`} | |
| placeholder={props.placeholder} | |
| onChange={onChange} | |
| ref={props.inputRef} | |
| value={props.value} | |
| style={{ ...props.style }} | |
| minLength={props.minlength} | |
| maxLength={props.maxlength || 10} | |
| max={props.max} | |
| min={props.min} | |
| readOnly={props.disable} | |
| title={props.title} | |
| step={props.step} | |
| autoFocus={props.autoFocus} | |
| /> | |
| </div> | |
| {!props.hideSpan ? ( | |
| <span role="button" tabIndex="0" onKeyPress={showPassword} onClick={showPassword} style={{ maxWidth: "50px", paddingLeft: "5px", marginTop: "unset", border: "1px solid #464646", borderLeft: "none", cursor: "pointer" }} className="citizen-card-input citizen-card-input--front"> | |
| {passwordVisibleFlag?<PasswordEyeDisableSvg />:<PasswordEyeEnableSvg/>} | |
| </span> | |
| ) : null} | |
| </div> | |
| </React.Fragment> | |
| ); |
| label.includes("Dashboard")?<a href={link} target="_blank"> | ||
| {label} | ||
| </a> : |
There was a problem hiding this comment.
Ensure consistent link target attributes for security.
The links generated for the label "Dashboard" open in a new tab (target="_blank") without specifying rel="noopener noreferrer", which can be a security risk. Ensure that all external links that open in a new tab include this attribute to prevent potential security vulnerabilities.
- <a href={link} target="_blank">
+ <a href={link} target="_blank" rel="noopener noreferrer">Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| label.includes("Dashboard")?<a href={link} target="_blank"> | |
| {label} | |
| </a> : | |
| label.includes("Dashboard")?<a href={link} target="_blank" rel="noopener noreferrer"> | |
| {label} | |
| </a> : |
| const onForgotPassword = async (data) => { | ||
| const requestData = { | ||
| otp: { | ||
| mobileNumber: data.mobileNumber, | ||
| userType: getUserType().toUpperCase(), | ||
| type: "passwordreset", | ||
| tenantId: data.city.code, | ||
| tenantId: tenantId, | ||
| }, | ||
| }; | ||
| try { | ||
| await Digit.UserService.sendOtp(requestData, data.city.code); | ||
| history.push(`/${window?.contextPath}/employee/user/change-password?mobile_number=${data.mobileNumber}&tenantId=${data.city.code}`); | ||
| await Digit.UserService.sendOtp(requestData, tenantId); | ||
| history.push(`/${window?.contextPath}/employee/user/change-password?mobile_number=${data.mobileNumber}&tenantId=${tenantId}`); |
There was a problem hiding this comment.
Review the error handling in the forgot password flow.
The error handling in the onForgotPassword function uses a generic error message ("Invalid login credentials!") which may not be appropriate for all error scenarios, especially since this function is used for sending an OTP. Consider using more specific error messages based on the error response to improve user experience and debugging.
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Style
Chores
Documentation