Browse Source
- 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/86b63xhz4get-get-hash
3 changed files with 116 additions and 13 deletions
@ -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. |
Loading…
Reference in new issue