# Registration Form Integration Guide

## Overview
This guide explains how to integrate the new Registration Form component into the Chrome Extension's authentication system.

## Files Created
1. `crm/src/RegisterForm.jsx` - The registration form component

## Integration Steps

### Step 1: Import the RegisterForm Component

In `crm/index.js`, add the import for RegisterForm at the top with other imports:

```javascript
import RegisterForm from './src/RegisterForm.jsx';
```

### Step 2: Add Auth Mode State Management

Find the `useUserLogin` store (around line 47-75) and add an `authMode` state:

```javascript
const Id={estado:!1,login:"",senha:"",token:""},
sr=Ke()(n=>({
  user:Id,
  authMode: 'login', // Add this: 'login' or 'register'
  setAuthMode: (mode) => n(c => ({ ...c, authMode: mode })), // Add this
  setUser:s=>{
    const l=od.encryptData(s);
    to("wpp-client","client",[l]),
    chrome.runtime.sendMessage({action:"post-user",user:s}),
    n(c=>({...c,user:s}))
  },
  // ... rest of the store
}))
```

### Step 3: Modify the Modal System to Support Registration

Find the `openRendertype` function in the modal store (around line 47-60) and add a case for 'register':

```javascript
openRendertype:(s,l=!0,c={mounted:null,desmouted:null})=>{
  let h;
  switch(s){
    case"user_free":h=r.jsx(ep,{});break;
    case"assinatura":h=r.jsx(S0,{});break;
    case"register":h=r.jsx(RegisterForm,{
      onSwitchToLogin:()=>{
        sr.getState().setAuthMode('login');
        jt.getState().openRendertype("login");
      },
      onRegisterSuccess:(message)=>{
        // Show success message and switch to login
        // You can use your existing toast/notification system here
        sr.getState().setAuthMode('login');
        jt.getState().openRendertype("login");
      }
    });break;
    case"login":h=r.jsx(qa,{});break; // Existing login component
  }
  jt.getState().open(h,l,c)
}
```

### Step 4: Modify the Login Component to Add "Sign Up" Button

You need to find the login component (likely lazy-loaded as `qa` or `Pa`). In that component, add a button to switch to registration:

```javascript
// Inside the login form component, add this button:
<button
  type="button"
  onClick={() => {
    sr.getState().setAuthMode('register');
    jt.getState().openRendertype("register");
  }}
  className="text-sm text-[var(--primaria)] hover:underline mt-4"
>
  Don't have an account? Sign Up
</button>
```

### Step 5: Update API URL Configuration (Optional)

The RegisterForm component uses the hardcoded URL `https://crm.suhailtech.in/function/register-user.php`.

If you want to use the centralized backend URL from `background.js`, you can:

1. Pass the backend URL as a prop to RegisterForm
2. Or access it via chrome.runtime.sendMessage to get the config

Example modification to RegisterForm:

```javascript
// In RegisterForm.jsx, replace the hardcoded URL with:
const [apiUrl, setApiUrl] = useState('https://crm.suhailtech.in/function/register-user.php');

useEffect(() => {
  // Get backend URL from background script
  chrome.runtime.sendMessage({action: "get-backend-url"}, (response) => {
    if (response && response.url) {
      setApiUrl(`${response.url}function/register-user.php`);
    }
  });
}, []);
```

And in `background.js`, add a message listener:

```javascript
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "get-backend-url") {
    sendResponse({ url: w.backend });
    return true;
  }
});
```

## Testing Checklist

- [ ] Registration form displays correctly
- [ ] Form validation works (empty fields, email format, password length)
- [ ] API call succeeds with valid data
- [ ] Error messages display correctly
- [ ] Success redirects to login form
- [ ] "Sign Up" button on login form switches to registration
- [ ] "Sign In" button on registration form switches to login
- [ ] Loading states work correctly
- [ ] Form is disabled during submission

## Notes

- The registration API endpoint is: `https://crm.suhailtech.in/function/register-user.php`
- The API expects POST data with fields: `name`, `email`, `whatsapp`, `password`
- The API returns JSON with `status` (boolean) and `message` (string)
- On successful registration, users are assigned a 'Trial' plan with 7 days validity
- The backend sends an email notification to the admin when a new user registers

## Troubleshooting

1. **Component not found**: Ensure RegisterForm.jsx is in the correct location (`crm/src/RegisterForm.jsx`)
2. **Import errors**: Check that the import path matches your file structure
3. **API errors**: Verify the backend URL is correct and the endpoint is accessible
4. **Styling issues**: Ensure CSS variables are defined (e.g., `--primaria`, `--primary-strong`, etc.)

