refactor: reduce cyclomatic complexity in RegisterForm #38369

sahil2448 · 2026-01-27T15:30:42Z

What was the problem?

RegisterForm.tsx had excessive cyclomatic complexity, forcing the usage of an ESLint disable directive:
/* eslint-disable complexity */

The component (~316 lines) combined several distinct responsibilities:

Inline form validation logic
Complex API error handling with multiple conditionals
Settings-based rendering logic
Repetitive JSX for input fields
Tightly coupled UI and business logic

This accumulation of logic made the file difficult to read, test, and maintain without risking regressions.

What does this PR do?

This PR performs a pure refactor to decouple logic and reduce complexity, with zero functional or UI changes.

Key changes

Removed eslint-disable complexity
- The component now complies with the linter rules naturally.
Extracted validation logic into a custom hook
- useRegistrationValidation
- Centralizes all field rules (Name, Email, Password, etc.)
- Maintains strict compatibility with react-hook-form
Extracted error handling logic
- useRegistrationErrors
- Centralizes API error mapping, toast notifications, and routing side effects
- Preserves all original error messages and flows
Reduced repetitive JSX
- Introduced FormField component to handle label, input wrapping, and error display
- Standardized accessibility attributes (aria-*) across all inputs
Simplified RegisterForm.tsx
- Reduced file size significantly (~200 lines)
- Component now focuses purely on layout and composition

What this PR does NOT do

No functional changes
No UX or visual changes
No new dependencies
No validation rule modifications
No error message text changes

This is strictly a refactor to improve code quality.

Why this approach?

Enables strict linting rules instead of bypassing them
Separates business logic from presentation (separation of concerns)
Aligns with modular patterns used elsewhere in the codebase
Reduces cognitive load for future maintainers

Files changed

Modified

packages/web-ui-registration/src/RegisterForm.tsx

Added

packages/web-ui-registration/src/hooks/useRegistrationValidation.ts
packages/web-ui-registration/src/hooks/useRegistrationErrors.ts
packages/web-ui-registration/src/components/FormField.tsx

dionisio-bot · 2026-01-27T15:30:46Z

Looks like this PR is not ready to merge, because of the following issues:

This PR is missing the 'stat: QA assured' label
This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

changeset-bot · 2026-01-27T15:30:48Z

⚠️ No Changeset found

Latest commit: 538c408

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

CLAassistant · 2026-01-27T15:30:49Z

All committers have signed the CLA.

coderabbitai · 2026-01-27T15:31:31Z

Walkthrough

The changes refactor the registration form by introducing a reusable FormField wrapper component and centralizing validation and error handling logic into two new custom hooks (useRegistrationValidation and useRegistrationErrors), replacing previous inline field wiring and error management patterns.

Changes

Cohort / File(s)	Summary
Configuration `.gitignore`	Added trailing slash to `node_modules` pattern for directory matching semantics.
Form Field Component `packages/web-ui-registration/src/components/FormField.tsx`	New reusable FormField wrapper component that composes Field, FieldLabel, FieldRow, and FieldError with props for label, required, htmlFor, children, error, and errorId.
Registration Form Refactor `packages/web-ui-registration/src/RegisterForm.tsx`	Replaces low-level field component usage with new FormField wrapper for all form inputs. Integrates useRegistrationValidation and useRegistrationErrors hooks for centralized validation and error orchestration. Adds explicit ReactElement return type. Removes useToastMessageDispatch dependency.
Validation Hook `packages/web-ui-registration/src/hooks/useRegistrationValidation.ts`	New hook providing getter functions for field-specific validation rules (name, email, username, password, password confirmation, reason). Exposes passwordIsValid flag. Respects app settings for conditional field requirements and applies localized error messages.
Error Handling Hook `packages/web-ui-registration/src/hooks/useRegistrationErrors.ts`	New hook centralizing registration error mapping and handling. Maps server errors to field-specific validations, dispatches toasts for rate limiting, routes to login on activation flow, and propagates custom server errors.

Sequence Diagram

sequenceDiagram
    participant User
    participant RegisterForm
    participant useRegistrationValidation as Validation Hook
    participant useRegistrationErrors as Error Hook
    participant FormField
    participant Server

    User->>RegisterForm: Input form data
    RegisterForm->>useRegistrationValidation: Get validation rules for fields
    useRegistrationValidation-->>RegisterForm: Return field validators & passwordIsValid
    RegisterForm->>FormField: Render with validation rules
    FormField->>User: Display form field

    User->>RegisterForm: Submit form
    RegisterForm->>RegisterForm: Validate with rules from hook
    
    alt Validation passes
        RegisterForm->>Server: Send registration request
        Server-->>RegisterForm: Success or error response
        
        alt Server error received
            RegisterForm->>useRegistrationErrors: handleRegistrationError(error)
            useRegistrationErrors->>useRegistrationErrors: Map error to field or flow
            
            alt Field-specific error
                useRegistrationErrors-->>RegisterForm: Set field error
                RegisterForm->>FormField: Update with error
                FormField-->>User: Display field error
            else Rate limit or activation flow
                useRegistrationErrors-->>RegisterForm: Toast & routing
                RegisterForm-->>User: Show toast & navigate
            else Custom server error
                useRegistrationErrors-->>RegisterForm: Set server error state
                RegisterForm-->>User: Display server error
            end
        end
    else Validation fails
        RegisterForm->>FormField: Mark fields with errors
        FormField-->>User: Display validation errors
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Poem

🐰 Hops and Fields Now Organized!

Fields wrapped tight in FormField's dance,
Validation rules now get their chance,
Errors flow through hooks so clear,
Registration flows throughout the year! 🎉

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main objective of the PR: refactoring RegisterForm to reduce cyclomatic complexity through extraction of validation and error handling logic.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

cubic-dev-ai

No issues found across 5 files

sahil2448 · 2026-01-27T16:25:43Z

fixes #38364