docs/sprint-artifacts/tech-spec-browser-integration.md

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
• Register.jsx
• Posts.jsx
• 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).