# Targeted Edits Guide - Exact Search & Replace Instructions

## ⚠️ IMPORTANT: Read Before Starting
1. **Backup your `crm/index.js` file first**
2. Use your IDE's "Find & Replace" feature
3. Make ONE change at a time and test after each
4. If something breaks, restore from backup

---

## REQUEST 1: Modify useUserLogin Store (Add authMode)

### Step 1.1: Find the Store Definition

**SEARCH FOR THIS EXACT STRING:**
```
const Id={estado:!1,login:"",senha:"",token:""},sr=Ke()(n=>({user:Id,
```

**OR SEARCH FOR (if above doesn't match):**
```
sr=Ke()(n=>({user:Id,
```

**OR SEARCH FOR (alternative pattern):**
```
user:Id,setUser:
```

### Step 1.2: Replace With This Code

**FIND THIS BLOCK:**
```javascript
const Id={estado:!1,login:"",senha:"",token:""},
sr=Ke()(n=>({
  user:Id,
  setUser:s=>{
```

**REPLACE WITH:**
```javascript
const Id={estado:!1,login:"",senha:"",token:""},
sr=Ke()(n=>({
  user:Id,
  authMode:'login',
  setAuthMode:(mode)=>n(c=>({...c,authMode:mode})),
  setUser:s=>{
```

**OR if your code is minified on one line, find:**
```
user:Id,setUser:s=>
```

**REPLACE WITH:**
```
user:Id,authMode:'login',setAuthMode:(mode)=>n(c=>({...c,authMode:mode})),setUser:s=>
```

---

## REQUEST 2: Modify openRendertype Function (Add Register Case)

### Step 2.1: Find the openRendertype Function

**SEARCH FOR THIS EXACT STRING:**
```
openRendertype:(s,l=!0,c={mounted:null,desmouted:null})=>{
```

**OR SEARCH FOR:**
```
case"login":h=r.jsx(qa,{});break;
```

**OR SEARCH FOR:**
```
case"user_free":h=r.jsx(ep,{});break;
```

### Step 2.2: Add Register Case

**FIND THIS BLOCK (the switch statement inside openRendertype):**
```javascript
switch(s){
  case"user_free":h=r.jsx(ep,{});break;
  case"assinatura":h=r.jsx(S0,{});break;
  case"login":h=r.jsx(qa,{});break;
}
```

**REPLACE WITH:**
```javascript
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:(msg)=>{N({type:"Success",message:msg,position:"top-right"}),sr.getState().setAuthMode('login'),setTimeout(()=>{jt.getState().openRendertype("login")},1500)}});break;
  case"login":h=r.jsx(qa,{});break;
}
```

**IMPORTANT:** You'll need to add the RegisterForm import at the top of the file first (see Request 3).

---

## REQUEST 3: Import RegisterForm Component

### Step 3.1: Find Import Section

**SEARCH FOR THIS (near top of file):**
```
import{j as r}from
```

**OR SEARCH FOR:**
```
from"./63ff95b2
```

**OR SEARCH FOR (if you see other component imports):**
```
import.*from.*\.js
```

### Step 3.2: Add RegisterForm Import

**ADD THIS LINE near the top with other imports:**

**Option A: If using ES6 imports (unbundled source):**
```javascript
import RegisterForm from './src/RegisterForm.jsx';
```

**Option B: If using dynamic imports (bundled):**
You'll need to add RegisterForm as a lazy-loaded component. Find where other lazy components are defined and add:

```javascript
const RegisterFormLazy=r.lazy(()=>__vitePreload(()=>import(chrome.runtime.getURL("crm/src/RegisterForm.jsx")),[]));
```

Then in the switch case, use:
```javascript
case"register":h=r.jsx(r.Suspense,{fallback:r.jsx(r.Fragment,{}),children:r.jsx(RegisterFormLazy,{onSwitchToLogin:()=>{sr.getState().setAuthMode('login'),jt.getState().openRendertype("login")},onRegisterSuccess:(msg)=>{N({type:"Success",message:msg,position:"top-right"}),sr.getState().setAuthMode('login'),setTimeout(()=>{jt.getState().openRendertype("login")},1500)}})});break;
```

---

## REQUEST 4: Add "Sign Up" Button to Login Form

### Step 4.1: Find Login Form Component

**SEARCH FOR THIS (in the login component, likely named `qa` or similar):**
```
type="submit"
```

**OR SEARCH FOR:**
```
Sign In|Entrar|Login
```

**OR SEARCH FOR (if you can find the login form JSX):**
```
onSubmit.*preventDefault
```

### Step 4.2: Add Sign Up Button

**FIND THIS (the submit button in login form):**
```javascript
<button type="submit" ...>Sign In</button>
```

**OR FIND THIS (closing form tag):**
```javascript
</form>
```

**ADD THIS RIGHT BEFORE THE CLOSING `</form>` TAG:**

```javascript
<button type="button" onClick={()=>{sr.getState().setAuthMode('register'),jt.getState().openRendertype("register")}} className="text-sm text-[var(--primaria)] hover:underline mt-4 text-center w-full" style={{background:'transparent',border:'none',cursor:'pointer'}}>Don't have an account? <span className="font-semibold">Sign Up</span></button>
```

**OR if your code is minified, find:**
```
</form>
```

**REPLACE WITH:**
```
n.jsx("button",{type:"button",onClick:()=>{sr.getState().setAuthMode("register"),jt.getState().openRendertype("register")},className:"text-sm text-[var(--primaria)] hover:underline mt-4 text-center w-full",style:{background:"transparent",border:"none",cursor:"pointer"},children:["Don't have an account? ",n.jsx("span",{className:"font-semibold",children:"Sign Up"})]}),</form>
```

---

## ALTERNATIVE: If You Can't Find Exact Matches

If the search strings above don't work because your code is heavily minified, try these broader searches:

### For Store:
1. Search for: `setUser:s=>`
2. Look for the line that starts with `sr=Ke()` or `useUserLogin`
3. Add `authMode:'login',setAuthMode:(mode)=>n(c=>({...c,authMode:mode})),` right after `user:Id,`

### For Modal:
1. Search for: `case"login"`
2. Add the register case right before it

### For Login Button:
1. Search for: `type="submit"` or `type:"submit"`
2. Look for the button that says "Sign In" or "Login"
3. Add the Sign Up button right after it (before closing form)

---

## Testing Checklist

After making changes:

- [ ] Extension loads without errors
- [ ] Login form displays correctly
- [ ] "Sign Up" button appears on login form
- [ ] Clicking "Sign Up" shows registration form
- [ ] Registration form fields work
- [ ] Registration API call succeeds
- [ ] "Sign In" button on registration form works
- [ ] Success message appears after registration
- [ ] Redirect to login form works

---

## Troubleshooting

**Error: "RegisterForm is not defined"**
- Solution: Make sure you added the import (Request 3)

**Error: "setAuthMode is not a function"**
- Solution: Make sure you added authMode to the store (Request 1)

**Button doesn't appear**
- Solution: Check that you added the button code before the closing `</form>` tag

**Modal doesn't switch**
- Solution: Verify the openRendertype case was added correctly (Request 2)

