File size: 3,666 Bytes
0f62534 f97685e 0f62534 f97685e 0f62534 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
# 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).
|