forked from trent_larson/crowd-funder-for-time-pwa
feat: switch ContactQRScanShowView to URL-based contact sharing
- Replace CSV QR value copying with URL generation for better UX - Add generateEndorserJwtUrlForAccount import and Account type - Implement proper error handling for URL generation failures - Maintain consistency with ContactQRScanFullView behavior - Add documentation for the URL solution implementation Recipients can now click shared URLs to add contacts directly instead of manually pasting CSV data into input fields. addresses: https://app.clickup.com/t/86b63xhz4
This commit is contained in:
84
docs/contact-sharing-url-solution.md
Normal file
84
docs/contact-sharing-url-solution.md
Normal file
@@ -0,0 +1,84 @@
|
||||
# Contact Sharing - URL Solution
|
||||
|
||||
## Overview
|
||||
|
||||
Simple implementation to switch ContactQRScanShowView from copying QR value (CSV) to copying a URL for better user experience.
|
||||
|
||||
## Problem
|
||||
|
||||
The ContactQRScanShowView was copying QR value (CSV content) to clipboard instead of a URL, making contact sharing less user-friendly.
|
||||
|
||||
## Solution
|
||||
|
||||
Updated the `onCopyUrlToClipboard()` method in ContactQRScanShowView.vue to generate and copy a URL instead of the QR value.
|
||||
|
||||
## Changes Made
|
||||
|
||||
### ContactQRScanShowView.vue
|
||||
|
||||
**Added Imports:**
|
||||
```typescript
|
||||
import { generateEndorserJwtUrlForAccount } from "../libs/endorserServer";
|
||||
import { Account } from "@/db/tables/accounts";
|
||||
```
|
||||
|
||||
**Updated Method:**
|
||||
```typescript
|
||||
async onCopyUrlToClipboard() {
|
||||
try {
|
||||
// Generate URL for sharing
|
||||
const account = (await libsUtil.retrieveFullyDecryptedAccount(
|
||||
this.activeDid,
|
||||
)) as Account;
|
||||
const jwtUrl = await generateEndorserJwtUrlForAccount(
|
||||
account,
|
||||
this.isRegistered,
|
||||
this.givenName,
|
||||
this.profileImageUrl,
|
||||
true,
|
||||
);
|
||||
|
||||
// Copy the URL to clipboard
|
||||
useClipboard()
|
||||
.copy(jwtUrl)
|
||||
.then(() => {
|
||||
this.notify.toast(
|
||||
"Copied",
|
||||
NOTIFY_QR_URL_COPIED.message,
|
||||
QR_TIMEOUT_MEDIUM,
|
||||
);
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error("Failed to generate contact URL:", error);
|
||||
this.notify.error("Failed to generate contact URL. Please try again.");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
1. **Better UX**: Recipients can click the URL to add contact directly
|
||||
2. **Consistency**: Both ContactQRScanShowView and ContactQRScanFullView now use URL format
|
||||
3. **Error Handling**: Graceful fallback if URL generation fails
|
||||
4. **Simple**: Minimal changes, no new components needed
|
||||
|
||||
## User Experience
|
||||
|
||||
**Before:**
|
||||
- Click QR code → Copy CSV data to clipboard
|
||||
- Recipient must paste CSV into input field
|
||||
|
||||
**After:**
|
||||
- Click QR code → Copy URL to clipboard
|
||||
- Recipient clicks URL → Contact added automatically
|
||||
|
||||
## Testing
|
||||
|
||||
- ✅ Linting passes
|
||||
- ✅ Error handling implemented
|
||||
- ✅ Consistent with ContactQRScanFullView behavior
|
||||
- ✅ Maintains existing notification system
|
||||
|
||||
## Deployment
|
||||
|
||||
Ready for deployment. No breaking changes, maintains backward compatibility.
|
||||
Reference in New Issue
Block a user