forked from jsnbuchanan/crowd-funder-for-time-pwa
6868a322f1
- 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
85 lines
2.2 KiB
Markdown
85 lines
2.2 KiB
Markdown
# 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.
|