docs/sprint-artifacts/tech-spec-browser-integration.md
CHANGED
|
@@ -8,12 +8,11 @@
|
|
| 8 |
### Problem Statement
|
| 9 |
Users experience friction in two main areas:
|
| 10 |
1. **Authentication**: Browser password managers fail to auto-fill or suggest saving credentials because the login and registration forms lack semantic `autocomplete` attributes.
|
| 11 |
-
|
| 12 |
|
| 13 |
### Solution
|
| 14 |
1. **Form Optimization**: Enhance `<input>` tags with standard `autocomplete` values to enable native browser credential management.
|
| 15 |
-
|
| 16 |
-
3. **Content Bookmarklet**: Provide a "Send to Lin" bookmarklet that allows users to instantly push selected text or the current page title/URL from any website into the Lin post editor.
|
| 17 |
|
| 18 |
### Scope (In/Out)
|
| 19 |
- **In**:
|
|
|
|
| 8 |
### Problem Statement
|
| 9 |
Users experience friction in two main areas:
|
| 10 |
1. **Authentication**: Browser password managers fail to auto-fill or suggest saving credentials because the login and registration forms lack semantic `autocomplete` attributes.
|
| 11 |
+
|
| 12 |
|
| 13 |
### Solution
|
| 14 |
1. **Form Optimization**: Enhance `<input>` tags with standard `autocomplete` values to enable native browser credential management.
|
| 15 |
+
|
|
|
|
| 16 |
|
| 17 |
### Scope (In/Out)
|
| 18 |
- **In**:
|
frontend/src/pages/Login.jsx
CHANGED
|
@@ -187,7 +187,7 @@ const Login = () => {
|
|
| 187 |
required
|
| 188 |
aria-required="true"
|
| 189 |
aria-label="Email address"
|
| 190 |
-
|
| 191 |
/>
|
| 192 |
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
| 193 |
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
|
@@ -220,7 +220,7 @@ const Login = () => {
|
|
| 220 |
required
|
| 221 |
aria-required="true"
|
| 222 |
aria-label="Password"
|
| 223 |
-
|
| 224 |
/>
|
| 225 |
<button
|
| 226 |
type="button"
|
|
|
|
| 187 |
required
|
| 188 |
aria-required="true"
|
| 189 |
aria-label="Email address"
|
| 190 |
+
autoComplete="username"
|
| 191 |
/>
|
| 192 |
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
| 193 |
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
|
|
|
| 220 |
required
|
| 221 |
aria-required="true"
|
| 222 |
aria-label="Password"
|
| 223 |
+
autoComplete="current-password"
|
| 224 |
/>
|
| 225 |
<button
|
| 226 |
type="button"
|
frontend/src/pages/Register.jsx
CHANGED
|
@@ -220,7 +220,7 @@ const Register = () => {
|
|
| 220 |
required
|
| 221 |
aria-required="true"
|
| 222 |
aria-label="Email address"
|
| 223 |
-
|
| 224 |
/>
|
| 225 |
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
| 226 |
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
|
@@ -319,7 +319,7 @@ const Register = () => {
|
|
| 319 |
required
|
| 320 |
aria-required="true"
|
| 321 |
aria-label="Password"
|
| 322 |
-
|
| 323 |
/>
|
| 324 |
<button
|
| 325 |
type="button"
|
|
@@ -334,7 +334,7 @@ const Register = () => {
|
|
| 334 |
</svg>
|
| 335 |
) : (
|
| 336 |
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
|
| 337 |
-
<path fillRule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.
|
| 338 |
<path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
|
| 339 |
</svg>
|
| 340 |
)}
|
|
@@ -407,7 +407,7 @@ const Register = () => {
|
|
| 407 |
</svg>
|
| 408 |
) : (
|
| 409 |
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
|
| 410 |
-
<path fillRule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.
|
| 411 |
<path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
|
| 412 |
</svg>
|
| 413 |
)}
|
|
|
|
| 220 |
required
|
| 221 |
aria-required="true"
|
| 222 |
aria-label="Email address"
|
| 223 |
+
autoComplete="email"
|
| 224 |
/>
|
| 225 |
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
| 226 |
<svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
|
|
|
| 319 |
required
|
| 320 |
aria-required="true"
|
| 321 |
aria-label="Password"
|
| 322 |
+
autoComplete="new-password"
|
| 323 |
/>
|
| 324 |
<button
|
| 325 |
type="button"
|
|
|
|
| 334 |
</svg>
|
| 335 |
) : (
|
| 336 |
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
|
| 337 |
+
<path fillRule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.514a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clipRule="evenodd" />
|
| 338 |
<path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
|
| 339 |
</svg>
|
| 340 |
)}
|
|
|
|
| 407 |
</svg>
|
| 408 |
) : (
|
| 409 |
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor" viewBox="0 0 20 20">
|
| 410 |
+
<path fillRule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.514a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clipRule="evenodd" />
|
| 411 |
<path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
|
| 412 |
</svg>
|
| 413 |
)}
|