| # 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). | |