RegisterForm Component
Relevant source files
The following files were used as context for generating this wiki page:
The RegisterForm component is a client-side React component designed to facilitate user registration within the CellarNode ecosystem. It provides a structured interface for capturing user details such as name, email, and phone number, specifically tailored for two user roles: "importer" and "producer".
The component handles the registration lifecycle, including form validation, submission via a specialized API client, and state management for loading, success, and error conditions. It integrates with the project's authentication architecture by utilizing the AuthApi interface to communicate with backend services.
Sources: src/react/register-form.tsx:1-24, src/types.ts:11-16
Component Architecture and Props
The RegisterForm is exported as a functional component that accepts a set of properties defined by the RegisterFormProps interface. This design allows the parent application to control navigation and provide the necessary API implementation.
Properties Interface
| Property | Type | Description |
|---|---|---|
userType | "importer" | "producer" | Defines the role the user is registering for. |
onRegistered | () => void | Callback function executed after a successful registration. |
onNavigateLogin | () => void | Callback function to redirect the user to the login view. |
authApi | AuthApi | An implementation of the AuthApi interface for backend communication. |
Sources: src/react/register-form.tsx:10-15, src/types.ts:68-74
Data Flow and Logic
The component manages local state for form inputs and submission status using React hooks. When a user submits the form, the handleSubmit function intercepts the event, prevents default browser behavior, and invokes the register method on the provided authApi instance.
Submission Flow
The following diagram illustrates the internal logic and data flow during the registration process:
The registration payload includes the userType prop and maps the optional phone field to undefined if empty before sending it to the API.
Sources: src/react/register-form.tsx:28-64, src/types.ts:11-16
Error Handling
RegisterForm includes specific logic to handle AuthError instances returned by the API. It maps backend error codes to user-friendly messages to improve the registration experience.
| Error Code | UI Message |
|---|---|
USER_ALREADY_EXISTS | "An account with this email already exists. Please log in instead." |
USER_DELETED | "This account has been deactivated. Please contact support." |
Other AuthError | Returns the raw error message from the API. |
| Non-Auth Error | "Registration failed" (or raw message if available). |
Sources: src/react/register-form.tsx:43-60, src/types.ts:35-46
UI States and Components
The component transitions between two primary views based on the success state:
1. Input View
Displays a form with fields for "Full name", "Email", and "Phone (optional)". It uses Tailwind CSS for styling and includes a loading spinner (Loader2) when isSubmitting is true.
2. Success View
Once setSuccess(true) is called, the form is replaced by a notification informing the user that a verification link has been sent to their email. It provides a "Go to Login" button that triggers the onNavigateLogin prop.
Integration with AuthApi
The component relies on the register method of the AuthApi. In a standard implementation, this method performs a POST request to /auth/register with skipAuth: true, ensuring that registration can occur without an existing session token.
Sources: src/auth-api.ts:16-27, src/types.ts:69
Conclusion
The RegisterForm component serves as a robust entry point for new users in the CellarNode dashboards. By abstracting the complexities of state management, error handling, and API communication, it provides a consistent and reactive registration experience. Its dependence on the AuthApi interface ensures it remains decoupled from specific API implementations, facilitating easier testing and maintenance.