binect-chrome/RECENT_CHANGES.md

# Recent Changes - BinectChrome

## Summary

Three new features have been implemented:
1. ✅ Password visibility toggle with eye icon
2. ✅ Default badge on extension icon
3. ✅ Enhanced API error logging for debugging

## 1. Password Visibility Toggle

**Location:** Login form in popup

**What it does:**
- Adds an eye icon button next to the password field
- Click to toggle between showing and hiding password
- Icon changes: 👁️ (show) ↔ 🚫👁️ (hide)

**Files changed:**
- `src/popup/popup.html` - Added password wrapper and eye icon SVGs
- `src/popup/popup.css` - Styled the toggle button
- `src/popup/popup.ts` - Added toggle functionality

**How to use:**
1. Open the extension popup
2. Enter username
3. Start typing password
4. Click the eye icon to reveal/hide password

## 2. Default Badge on Extension Icon

**What it does:**
- Extension icon now always shows a blue dot (•) badge
- Badge changes to "1" when PDF is detected
- Badge resets to dot (•) after PDF is sent or cleared
- Makes extension more visible in the toolbar

**Files changed:**
- `src/background/service-worker.ts` - Added `initializeBadge()` function

**Badge states:**
- `•` (blue dot) - Extension active, no PDF detected
- `1` (blue) - PDF detected and ready to send
- Returns to `•` after sending or clearing

**Visual:**
- Before: No badge (extension hard to notice)
- Now: Blue dot always visible (easy to spot in toolbar)

## 3. Enhanced API Error Logging

**What it does:**
- Detailed console logging for all Binect API calls
- Shows request details (URL, username, payload)
- Logs response status and headers
- Captures and displays error responses
- Better error messages for common issues

**Files changed:**
- `src/utils/binect-api.ts` - Added console logging throughout

**Console output example (authentication):**
```
[Binect API] Authenticating with Binect API...
[Binect API] URL: https://api.binect.de/auth/login
[Binect API] Username: testuser
[Binect API] Response status: 200
[Binect API] Response content-type: application/json
[Binect API] Authentication successful!
[Binect API] Response data: {token: "...", expiresAt: "..."}
```

**Console output example (error):**
```
[Binect API] Authenticating with Binect API...
[Binect API] URL: https://api.binect.de/auth/login
[Binect API] Username: wronguser
[Binect API] Response status: 401
[Binect API] Error response body: {"error": "Invalid credentials"}
[Binect API] Authentication error: BinectAPIError: Invalid credentials
```

**Error improvements:**
- Network errors now show: "Cannot reach Binect API at https://api.binect.de. Please check your internet connection."
- Auth errors show: "Invalid credentials" (401)
- Upload errors show specific issue (file format, size limit, etc.)

## How to Test

### 1. Reload Extension
```bash
# Extension is already built
# Just reload at chrome://extensions/
```

### 2. Test Password Toggle
1. Click extension icon
2. If not logged in, you'll see the login form
3. Type in the password field
4. Click the eye icon - password should become visible
5. Click again - password should hide

### 3. Test Default Badge
1. Look at your Chrome toolbar
2. Find the BinectChrome icon
3. Should see a small blue dot (•) badge
4. Download or view a PDF
5. Badge should change to "1"

### 4. Test API Error Logging
1. Right-click popup → "Inspect" (opens DevTools)
2. Go to Console tab
3. Try to sign in (with wrong or correct credentials)
4. Watch for `[Binect API]` log messages
5. All API calls are now logged with details

## Debugging Binect API Login Issues

**With the new logging, you can now:**

1. **See the exact error from Binect:**
   - Open popup DevTools (right-click → Inspect)
   - Try to sign in
   - Check console for `[Binect API] Error response body:`
   - This shows what the Binect API actually returned

2. **Verify the request is correct:**
   - Console shows the URL being called
   - Shows the username being sent
   - Confirms request format

3. **Check network connectivity:**
   - If you see "Cannot reach Binect API", it's a network issue
   - If you see status codes (401, 400, etc.), the API is reachable but rejecting the request

**Common login issues:**

| Console Log | Problem | Solution |
|------------|---------|----------|
| "Cannot reach Binect API" | Network issue | Check internet connection |
| "Response status: 401" + "Invalid credentials" | Wrong username/password | Verify credentials |
| "Response status: 404" | API endpoint changed | Check API_BASE_URL in code |
| "Response status: 500" | Server error | Check Binect API status |
| "TypeError: Failed to fetch" | CORS or network | Check browser permissions |

## Testing Checklist

- [ ] Extension icon shows blue dot badge
- [ ] Password field has eye icon
- [ ] Clicking eye icon toggles password visibility
- [ ] Console shows `[Binect API]` logs when signing in
- [ ] Error messages are clear and helpful
- [ ] Badge updates when PDF detected
- [ ] Badge resets after sending PDF

## Next Steps for API Debugging

1. **Try to sign in with your Binect credentials**
2. **Open popup DevTools** (right-click popup → Inspect)
3. **Check the Console tab** for `[Binect API]` messages
4. **Share the console output** if login fails

The detailed logs will show exactly what's happening with the API request and response, making it much easier to diagnose the login problem.

## Files Modified

```
src/popup/popup.html          - Added password toggle UI
src/popup/popup.css           - Styled password toggle
src/popup/popup.ts            - Added toggle functionality
src/background/service-worker.ts - Added default badge
src/utils/binect-api.ts       - Enhanced error logging
```

## Build Info

- Build completed successfully
- Extension size: ~17KB (popup.js: 10.4KB, background.js: 4.18KB)
- All assets compiled and minified
- Ready for testing!