# Tech-Spec: Browser Integration (Saved Passwords & Text)

**Created:** 2025-12-20
**Status:** Ready for Development

## Overview

### Problem Statement
Users experience friction in two main areas:
1.  **Authentication**: Browser password managers fail to auto-fill or suggest saving credentials because the login and registration forms lack semantic `autocomplete` attributes.


### Solution
1.  **Form Optimization**: Enhance `<input>` tags with standard `autocomplete` values to enable native browser credential management.


### Scope (In/Out)
-   **In**:
    -   Modifying `Login.jsx` and `Register.jsx` to support auto-fill.
    -   Implementing Clipboard API support in `Posts.jsx`.
    -   Adding a new "Tools" page to host instructions and the draggable bookmarklet.
    -   Handling URL parameters for content pre-filling.
-   **Out**:
    -   Native browser extensions (Chrome Web Store, etc.).
    -   Multi-browser sync of the bookmarklet itself.

## Context for Development

### Codebase Patterns
-   **Frontend**: React (Vite-based) with Tailwind CSS for styling.
-   **Routing**: `react-router-dom` v6 for navigation.
-   **State**: Redux Toolkit used for posts and authentication state.
-   **API**: Backend communication via `apiClient` (axios).

### Files to Reference
-   [Login.jsx](file:///c:/Users/othil/Documents/Project/flux%20rss%20ai/Lin/frontend/src/pages/Login.jsx)
-   [Register.jsx](file:///c:/Users/othil/Documents/Project/flux%20rss%20ai/Lin/frontend/src/pages/Register.jsx)
-   [Posts.jsx](file:///c:/Users/othil/Documents/Project/flux%20rss%20ai/Lin/frontend/src/pages/Posts.jsx)
-   [App.jsx](file:///c:/Users/othil/Documents/Project/flux%20rss%20ai/Lin/frontend/src/App.jsx)

### Technical Decisions
-   **Bookmarklet URL**: The bookmarklet will use `window.location.href` to redirect to `https://[your-lin-url]/posts?text=[content]`.
-   **Clipboard Permissions**: Will use `navigator.clipboard.readText()`, handling the potential `PermissionDenied` error with a graceful fallback (manual paste instruction).

## Implementation Plan

### Tasks

- [ ] **Task 1: Enhance Auth Forms for Password Managers**
  - Add `autocomplete="username"` / `autocomplete="current-password"` to `Login.jsx`.
  - Add `autocomplete="email"` / `autocomplete="new-password"` to `Register.jsx`.
- [ ] **Task 2: Integrate Clipboard and URL Pre-fill in Posts**
  - Extract `text` from URL search parameters on component mount.
  - Add "Paste from Clipboard" button with icon in the `postContent` area.
  - Implement error handling for clipboard access.
- [ ] **Task 3: Create Tools/Bookmarklet Page**
  - Add a New `Tools.jsx` page.
  - Implement a draggable link with the bookmarklet script.
  - Update `Sidebar.jsx` and `App.jsx` to include the new Tools route.

### Acceptance Criteria

- [ ] **AC 1**: When visiting the login page, browsers with saved credentials offer to auto-fill.
- [ ] **AC 2**: After registration or login, the browser asks "Would you like to save this password?".
- [ ] **AC 3**: Clicking "Paste" in the post editor successfully populates the textarea with the clipboard content (after permission is granted).
- [ ] **AC 4**: Using the bookmarklet on any webpage redirects the user to Lin with the text field pre-populated.

## Additional Context

### Dependencies
-   Standard browser Web APIs (Clipboard, URLSearchParams).

### Testing Strategy
-   **Manual**: Test in Chrome and Firefox for credential handling.
-   **Manual**: Verify the bookmarklet from a local file or a live site.

### Notes
-   Ensure the bookmarklet URL is dynamically generated or configurable to match the user's current environment (dev vs prod).