Skip to content
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.

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

Fix: Switch to shadcn form in userResetPassword #9708

Conversation

AdityaJ2305
Copy link
Contributor

@AdityaJ2305 AdityaJ2305 commented Jan 3, 2025

Proposed Changes

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

  • Add specs that demonstrate bug / test a new feature.
  • Update product documentation.
  • Ensure that UI text is kept in I18n files.
  • Prep screenshot or demo video for changelog entry, and attach it to issue.
  • Request for Peer Reviews
  • Completion of QA

Summary by CodeRabbit

Release Notes

  • New Features

    • Added a new PasswordInput component with password visibility toggle.
    • Enhanced password input handling across multiple forms.
    • Implemented a new password validation mechanism for user password resets.
  • Improvements

    • Updated password reset and user creation forms with improved validation.
    • Refined error handling for structured API errors.
    • Improved localization messages for password management.
    • Streamlined form submission logic for user password updates.
    • Enhanced flexibility of the Input component's onFocus behavior.
  • Bug Fixes

    • Corrected password validation and submission processes.
  • Chores

    • Removed deprecated form management components.
    • Removed unused FormContext and related types.
    • Removed the Form component from the application.
    • Removed the ExtendPatientRegisterForm component type from supported plugins.

Copy link
Contributor

coderabbitai bot commented Jan 3, 2025

Walkthrough

This pull request introduces significant changes to form handling, password management, and user interface components. The primary modifications include removing the custom Form component, implementing a new PasswordInput component with eye toggle functionality, updating the UserResetPassword component to use react-hook-form and zod validation, and enhancing error handling across various components. The changes streamline form interactions, improve password input security, and provide more consistent validation messaging.

Changes

File Change Summary
src/components/Form/Form.tsx Entire file removed
src/components/Form/FormContext.ts Deleted context implementation for form state management
src/pluginTypes.ts Removed ExtendPatientRegisterFormComponentType
src/components/Users/UserResetPassword.tsx Refactored to use react-hook-form, zod validation, and new UI components
src/components/ui/input-password.tsx New PasswordInput component with password visibility toggle
src/Utils/request/errorHandler.ts Added new error handling functions for structured errors
src/Utils/request/types.ts Introduced StructuredError type
public/locale/en.json Updated localization messages for password management

Assessment against linked issues

Objective Addressed Explanation
Migrate UserResetPassword.tsx to shadcn's form
Delete old custom Form component
Add eye toggle functionality to password input
Enhance layout and validation messaging

Suggested labels

needs review, needs testing, P1

Suggested reviewers

  • rithviknishad
  • Jacobjeevan

Poem

🐰 A rabbit's tale of forms reborn,
With passwords hidden, no longer forlorn
Eye toggle dancing, validation bright
Code refactored with pure delight
Shadcn's magic makes forms take flight! 🔐


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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

netlify bot commented Jan 3, 2025

Deploy Preview for care-ohc ready!

Name Link
🔨 Latest commit 408d747
🔍 Latest deploy log https://app.netlify.com/sites/care-ohc/deploys/6781e065be13c60008b78912
😎 Deploy Preview https://deploy-preview-9708--care-ohc.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@AdityaJ2305 AdityaJ2305 marked this pull request as ready for review January 3, 2025 14:58
@AdityaJ2305 AdityaJ2305 requested a review from a team as a code owner January 3, 2025 14:58
Copy link
Member

@rithviknishad rithviknishad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you missed one step, one more file was said to be deleted in the issue

src/components/Users/UserResetPassword.tsx Outdated Show resolved Hide resolved
src/components/Users/UserResetPassword.tsx Show resolved Hide resolved
src/components/Users/UserResetPassword.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (3)
src/components/Users/UserResetPassword.tsx (3)

28-50: Use i18n for user-facing error messages
The validation messages within the PasswordSchema (e.g., "Please enter current password", "New password must be at least 8 characters long", etc.) are hardcoded. To maintain consistency with the rest of the application and support localization, consider using t() or otherwise integrating them into your i18n workflow.


136-160: Avoid duplicate validations
You are using both zod to validate passwords and the validateRule function to check password requirements on focus. This might create unnecessary duplication and potential maintenance overhead. Consider consolidating all password checks in one place (preferably zod) and displaying those error messages consistently.


95-197: Consider adding a “show/hide password” toggle
The current form effectively captures password input and provides helpful validation. However, offering a “show/hide password” toggle can enhance user experience and reduce entry errors.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ed05fc0 and d2cfca6.

📒 Files selected for processing (2)
  • src/components/Form/Form.tsx (0 hunks)
  • src/components/Users/UserResetPassword.tsx (3 hunks)
💤 Files with no reviewable changes (1)
  • src/components/Form/Form.tsx
🔇 Additional comments (1)
src/components/Users/UserResetPassword.tsx (1)

200-208: Good approach to toggling edit mode
Toggling the password edit state with setIsEditing is a clean, straightforward approach and helps keep the UI clear. No issues found here.

src/components/Users/UserResetPassword.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (3)
src/components/Users/UserResetPassword.tsx (3)

29-51: Add i18n support for validation messages

The validation messages in the schema are hardcoded in English. Consider using the translation function to support internationalization.

const PasswordSchema = z
  .object({
    current_password: z
      .string()
-      .min(1, { message: "Please enter current password" }),
+      .min(1, { message: t("please_enter_current_password") }),
    new_password_1: z
      .string()
-      .min(8, { message: "New password must be at least 8 characters long" })
+      .min(8, { message: t("password_length_validation") })
-      .regex(/\d/, { message: "Password must contain at least one number" })
+      .regex(/\d/, { message: t("password_number_validation") })
      .regex(/[a-z]/, {
-        message: "Password must contain at least one lowercase letter",
+        message: t("password_lowercase_validation"),
      })
      .regex(/[A-Z]/, {
-        message: "Password must contain at least one uppercase letter",
+        message: t("password_uppercase_validation"),
      }),
    new_password_2: z
      .string()
-      .min(1, { message: "Please confirm your new password" }),
+      .min(1, { message: t("please_confirm_password") }),
  })

70-90: Enhance mutation implementation and error handling

A few suggestions to improve the mutation implementation:

  1. Use isPending from useMutation instead of managing loading state manually
  2. Consider not resetting the form on error to allow users to fix mistakes
  3. Add type safety for the error response
- const { mutate: resetUserPasswordMutate } = useMutation({
+ const { mutate: resetUserPasswordMutate, isPending } = useMutation({
    mutationFn: async (formData: UpdatePasswordForm) => {
      const response = await mutate(routes.updatePassword, { silent: true })(
        formData,
      );
      if ("errors" in response) {
        throw response;
      }
      return response;
    },
    onSuccess: (data: any) => {
      Notification.Success({ msg: data?.message as string });
      resetPasswordForm.reset();
    },
    onError: (error: any) => {
+     type ErrorResponse = {
+       response?: {
+         data?: {
+           message?: string;
+         };
+       };
+     };
+     const typedError = error as ErrorResponse;
      const errorMessage =
-       error?.response?.data?.message || t("password_update_error");
+       typedError?.response?.data?.message || t("password_update_error");
      Notification.Error({ msg: errorMessage });
-     resetPasswordForm.reset();
    },
  });

212-220: Use shadcn's button variants for consistent styling

Instead of custom styling, consider using shadcn's button variants for consistent styling across the application.

  <Button
    onClick={() => setIsEditing(!isEditing)}
    type="button"
    id="change-edit-password-button"
-   className="flex items-center gap-2 rounded-sm border border-gray-100 bg-white px-3 py-1.5 text-sm text-[#009D48] shadow-sm hover:bg-gray-50"
+   variant="outline"
+   className="flex items-center gap-2"
  >
    <CareIcon icon={isEditing ? "l-times" : "l-edit"} className="h-4 w-4" />
    {isEditing ? t("cancel") : t("change_password")}
  </Button>
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d2cfca6 and c170f70.

📒 Files selected for processing (1)
  • src/components/Users/UserResetPassword.tsx (1 hunks)
🔇 Additional comments (1)
src/components/Users/UserResetPassword.tsx (1)

92-100: Unify password field naming convention

The form uses current_password while the API expects old_password. This creates unnecessary mapping and potential confusion.

Consider unifying the naming convention throughout the codebase:

  1. Update the API to use current_password, or
  2. Update the form to use old_password

src/components/Users/UserResetPassword.tsx Outdated Show resolved Hide resolved
src/components/Users/UserResetPassword.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
src/components/Users/UserResetPassword.tsx (1)

136-161: 🛠️ Refactor suggestion

Remove duplicate password validation logic.

The password requirements are already defined in the zod schema. The manual validation here duplicates that logic and could become inconsistent.

Use the form's built-in error display instead:

- {isPasswordFieldFocused && (
-   <div
-     className="text-small mt-2 pl-2 text-secondary-500"
-     aria-live="polite"
-   >
-     {validateRule(
-       field.value.length >= 8,
-       t("password_length_validation"),
-       !field.value,
-     )}
-     {validateRule(
-       /[a-z]/.test(field.value),
-       t("password_lowercase_validation"),
-       !field.value,
-     )}
-     {validateRule(
-       /[A-Z]/.test(field.value),
-       t("password_uppercase_validation"),
-       !field.value,
-     )}
-     {validateRule(
-       /\d/.test(field.value),
-       t("password_number_validation"),
-       !field.value,
-     )}
-   </div>
- )}
+ <FormMessage />
🧹 Nitpick comments (1)
src/components/Users/UserResetPassword.tsx (1)

29-51: LGTM! Well-structured password validation schema.

The zod schema implementation is clean and includes all necessary validation rules. The error messages are clear and user-friendly.

Consider using t() for internationalization in error messages to maintain consistency with the rest of the application:

    old_password: z
      .string()
-     .min(1, { message: "Please enter current password" }),
+     .min(1, { message: t("please_enter_current_password") }),
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c170f70 and 0da92f6.

📒 Files selected for processing (2)
  • public/locale/en.json (1 hunks)
  • src/components/Users/UserResetPassword.tsx (1 hunks)
🔇 Additional comments (2)
src/components/Users/UserResetPassword.tsx (1)

189-196: LGTM! Proper button state handling.

The submit button correctly uses:

  • isDirty for the disabled state
  • isPending for the loading state
public/locale/en.json (1)

1266-1266: Verify the terminology change impact.

The change from "current_password" to "old_password" should be verified across the application to ensure consistency.

Run this script to check for any remaining usages of "current_password":

✅ Verification successful

The previous search might have missed some occurrences. Let's try a broader search pattern to catch variations in naming and also look at the AST to find password-related fields. This will help us better understand the password terminology usage across the codebase.


Terminology change is consistent with implementation

The search results confirm that the change from "current_password" to "old_password" is actually consistent with the codebase implementation. The form component UserResetPassword.tsx already uses old_password in:

  • Form schema validation
  • Form field definitions
  • API request model (UpdatePasswordForm)
  • Form field rendering

The change in the locale file from "current_password" to "old_password" aligns with the existing implementation, making the terminology consistent between the code and the UI.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for remaining "current_password" occurrences
echo "Searching for 'current_password' in code..."
rg "current_password" -g "!*.json"

echo "Searching for CurrentPassword in code..."
rg "CurrentPassword" -g "!*.json"

Length of output: 262


Script:

#!/bin/bash
# Let's try a more comprehensive search for password-related terms
echo "Searching for password-related terms in code files..."
rg -i "(?:old|current)[\s_-]?password" --type-not json -A 2 -B 2

echo -e "\nSearching for password form field references..."
ast-grep --pattern 'password'

Length of output: 4163

src/components/Users/UserResetPassword.tsx Outdated Show resolved Hide resolved
Copy link
Member

@rithviknishad rithviknishad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

repeating the second time, do delete the other file that was mentioned in the issue

src/components/Users/UserResetPassword.tsx Outdated Show resolved Hide resolved
src/components/Users/UserResetPassword.tsx Outdated Show resolved Hide resolved
src/components/Users/UserResetPassword.tsx Outdated Show resolved Hide resolved
@AdityaJ2305
Copy link
Contributor Author

repeating the second time, do delete the other file that was mentioned in the issue

the context file is used by other file like pluginTypes.ts

@rithviknishad
Copy link
Member

delete those usages 🙂 we don't need it. let's get rid of weird things.

@AdityaJ2305
Copy link
Contributor Author

delete those usages 🙂 we don't need it. let's get rid of weird things.

field: FormContextValue<PatientForm>;

@rithviknishad
Copy link
Member

rithviknishad commented Jan 3, 2025

yup, you can remove that patient register form extension thing....

export type ExtendPatientRegisterFormComponentType = React.FC<{
facilityId: string;
patientId?: string;
state: {
form: {
[key: string]: any;
};
errors: {
[key: string]: string;
};
};
dispatch: React.Dispatch<any>;
field: FormContextValue<PatientForm>;
}>;

cc @gigincg

@github-actions github-actions bot added the Deploy-Failed Deplyment is not showing preview label Jan 10, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🔭 Outside diff range comments (1)
src/components/Auth/ResetPassword.tsx (1)

Missing translation key in password reset form

The translation key password_match is missing from en.json. This key is used to show feedback when passwords match in the confirm password field.

🔗 Analysis chain

Line range hint 1-211: Verify I18n text completeness

As mentioned in PR comments, ensure all translation keys are present in the locale files.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Extract all t() calls and verify their presence in en.json

# Extract all translation keys used in the file
echo "Checking translation keys..."
KEYS=$(rg "t\([\"'](.*?)[\"']\)" -o --replace '$1' src/components/Auth/ResetPassword.tsx)

# Check if each key exists in en.json
echo "Found keys:"
echo "$KEYS"
echo "Verifying presence in en.json..."
for key in $KEYS; do
  rg "\"$key\":" public/locale/en.json || echo "Missing translation for: $key"
done

Length of output: 3788

♻️ Duplicate comments (1)
src/Utils/request/errorHandler.ts (1)

88-99: 🛠️ Refactor suggestion

Display all error messages instead of returning early.

The current implementation only shows the first encountered error message due to early returns. Users should see all error messages to address multiple issues at once.

 function handleStructuredErrors(cause: StructuredError) {
   for (const value of Object.values(cause)) {
     if (Array.isArray(value)) {
       value.forEach((err) => toast.error(err));
-      return;
     }
     if (typeof value === "string") {
       toast.error(value);
-      return;
     }
   }
 }
🧹 Nitpick comments (2)
src/Utils/request/errorHandler.ts (1)

84-86: Enhance type safety with a more specific return type.

The type guard can be more precise by explicitly defining the return type.

-function isStructuredError(err: HTTPError["cause"]): err is StructuredError {
+function isStructuredError(err: HTTPError["cause"]): err is Record<string, string | string[]> {
   return typeof err === "object" && !Array.isArray(err);
 }
src/components/Auth/ResetPassword.tsx (1)

Line range hint 36-43: Consider simplifying the handleChange implementation

The current implementation can be made more concise while maintaining the same functionality.

-const handleChange = (e: any) => {
-  const { value, name } = e.target;
-  const fieldValue = Object.assign({}, form);
-  const errorField = Object.assign({}, errors);
-  if (errorField[name]) {
-    errorField[name] = null;
-    setErrors(errorField);
-  }
-  fieldValue[name] = value;
-  setForm(fieldValue);
+const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const { value, name } = e.target;
+  setForm(prev => ({ ...prev, [name]: value }));
+  setErrors(prev => ({ ...prev, [name]: null }));
};
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 52321c8 and 881e80b.

📒 Files selected for processing (5)
  • public/locale/en.json (7 hunks)
  • src/Utils/request/errorHandler.ts (4 hunks)
  • src/components/Auth/Login.tsx (2 hunks)
  • src/components/Auth/ResetPassword.tsx (3 hunks)
  • src/components/Users/CreateUserForm.tsx (6 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
  • src/components/Users/CreateUserForm.tsx
  • src/components/Auth/Login.tsx
  • public/locale/en.json
🔇 Additional comments (4)
src/Utils/request/errorHandler.ts (3)

78-81: LGTM! Type definitions align with backend error structure.

The optional properties in PydanticError type correctly reflect that loc, input, and url may not always be present in backend responses.


112-117: LGTM! Robust error message handling.

The implementation correctly handles:

  • Both string and object message types
  • Cases where location is undefined
  • Proper error message formatting with type and location

Also applies to: 120-122


40-45: LGTM! Clean integration of structured error handling.

The structured error check and handling is well-integrated into the existing error handling flow, maintaining consistency with the established pattern.

src/components/Auth/ResetPassword.tsx (1)

7-7: LGTM: Successful migration to shadcn form components

The switch to PasswordInput from the UI component library aligns with the modernization goals.

src/components/Auth/ResetPassword.tsx Show resolved Hide resolved
src/components/Auth/ResetPassword.tsx Show resolved Hide resolved
@github-actions github-actions bot removed the merge conflict pull requests with merge conflict label Jan 10, 2025
Copy link

👋 Hi, @AdityaJ2305,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.


This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

@github-actions github-actions bot removed the merge conflict pull requests with merge conflict label Jan 10, 2025
Copy link
Member

@rithviknishad rithviknishad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, some minor things. let's get it merged after that

src/components/Users/CreateUserForm.tsx Outdated Show resolved Hide resolved
src/components/Users/CreateUserForm.tsx Outdated Show resolved Hide resolved
src/components/ui/input-password.tsx Outdated Show resolved Hide resolved
@AdityaJ2305
Copy link
Contributor Author

@rithviknishad done with the minor changes

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
src/components/Users/CreateUserForm.tsx (2)

49-90: Consider enhancing password validation and adding type documentation.

The validation schema is well-structured, but consider these improvements:

  1. Add special character requirement for passwords
  2. Add JSDoc comments to document the schema type
+ /**
+  * Schema for user creation form
+  * @property {string} user_type - Type of user (doctor, nurse, staff, volunteer)
+  * @property {string} username - Unique username (4-16 chars)
+  * @property {string} password - Strong password with specific requirements
+  * ...other properties
+  */
  const userFormSchema = z
    .object({
      // ... other fields
      password: z
        .string()
        .min(8, t("password_length_validation"))
        .regex(/[a-z]/, t("password_lowercase_validation"))
        .regex(/[A-Z]/, t("password_uppercase_validation"))
        .regex(/[0-9]/, t("password_number_validation"))
+       .regex(/[!@#$%^&*(),.?":{}|<>]/, t("password_special_char_validation")),

132-140: Use more descriptive variable naming.

isInitialRender could be renamed to better reflect its purpose.

- const isInitialRender = usernameInput === "";
+ const isUsernameEmpty = usernameInput === "";
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a805808 and 3d3f325.

📒 Files selected for processing (3)
  • public/locale/en.json (11 hunks)
  • src/components/Users/CreateUserForm.tsx (7 hunks)
  • src/components/ui/input-password.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/components/ui/input-password.tsx
  • public/locale/en.json
🔇 Additional comments (3)
src/components/Users/CreateUserForm.tsx (3)

22-22: LGTM! The PasswordInput component import is correctly placed with other UI imports.


119-119: Simplify query destructuring.

Since this is not the primary API of this component, consider skipping the destructuring or using an alias.

- const { isLoading: isUsernameChecking, isError: isUsernameTaken } = useQuery({
+ const usernameCheckQuery = useQuery({

Line range hint 268-285: Ensure PasswordInput component meets accessibility requirements.

The PasswordInput component should include proper accessibility attributes:

  • Add aria-label for the visibility toggle button
  • Include aria-pressed state
  • Add aria-controls for input association
  • Maintain visible focus indication
#!/bin/bash
# Verify accessibility attributes in PasswordInput component
ast-grep --pattern 'export function PasswordInput' -A 20

@rithviknishad
Copy link
Member

for required fields, we reuse "field_required" instead of creating very specific translations for each field

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
public/locale/en.json (1)

2002-2009: Consider consistent phrasing for username validation messages.

While the messages are clear, consider rephrasing for consistency with the positive language pattern used in password validation:

-  "username_characters_validation": "Only lowercase letters, numbers, and . _ - are allowed",
+  "username_characters_validation": "Use lowercase letters, numbers, and . _ - only",
-  "username_consecutive_validation": "Cannot contain consecutive special characters",
+  "username_consecutive_validation": "Use non-consecutive special characters",
-  "username_start_end_validation": "Must start and end with a letter or number",
+  "username_start_end_validation": "Start and end with a letter or number"
src/components/Users/CreateUserForm.tsx (1)

49-90: Consider enhancing password validation rules.

While the current password validation is good, consider adding these common security requirements:

  • Special characters requirement
  • Maximum length limit
  • Prevention of common patterns
 password: z
   .string()
   .min(8, t("password_length_validation"))
+  .max(128, t("password_max_length_validation"))
   .regex(/[a-z]/, t("password_lowercase_validation"))
   .regex(/[A-Z]/, t("password_uppercase_validation"))
   .regex(/[0-9]/, t("password_number_validation"))
+  .regex(/[!@#$%^&*(),.?":{}|<>]/, t("password_special_char_validation"))
+  .refine(
+    (val) => !/(123|abc|password|admin)/i.test(val),
+    t("password_common_pattern_validation")
+  ),
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3d3f325 and 408d747.

📒 Files selected for processing (2)
  • public/locale/en.json (9 hunks)
  • src/components/Users/CreateUserForm.tsx (7 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: cypress-run (1)
  • GitHub Check: OSSAR-Scan
🔇 Additional comments (6)
public/locale/en.json (2)

1413-1419: LGTM! Clear and consistent password validation messages.

The password validation messages follow best practices:

  • Use positive, action-oriented language
  • Provide clear success indicators
  • Maintain consistent structure

Also applies to: 1426-1428


1283-1284: LGTM! Clear password change validation messages.

The messages effectively communicate password change requirements while maintaining security best practices.

src/components/Users/CreateUserForm.tsx (4)

22-22: LGTM!

The import follows the project's conventions and is correctly placed with other UI component imports.


119-119: Consider aliasing the destructured query properties.

While the change from error to isError is correct for tanstack-query v5, consider aliasing the destructured properties for better clarity:

-  const { isLoading: isUsernameChecking, isError: isUsernameTaken } = useQuery({
+  const { 
+    isLoading: isUsernameChecking, 
+    isError: isUsernameTaken 
+  } = useQuery({

Line range hint 132-159: LGTM! Improved validation UX.

The addition of isInitialRender and updated validation logic improves the user experience by preventing premature validation feedback.


268-268: Verify accessibility improvements in PasswordInput component.

Please ensure that the PasswordInput component addresses these accessibility requirements:

  • ARIA labels for the visibility toggle
  • Keyboard navigation support
  • Visible focus indicators
#!/bin/bash
# Check if PasswordInput component has accessibility attributes
echo "=== Checking PasswordInput component for accessibility attributes ==="
ast-grep --pattern 'export function PasswordInput' -A 30

echo -e "\n=== Checking for ARIA attributes ==="
rg -i "aria-|role=" src/components/ui/input-password.tsx

Also applies to: 282-285

@rithviknishad rithviknishad merged commit 544ee22 into ohcnetwork:develop Jan 11, 2025
17 checks passed
Copy link

@AdityaJ2305 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! 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
9 participants