Browse Source
- Deleted ContactScanView.vue and its route from the router. - Renamed ContactQRScanView.vue to ContactQRScanFullView.vue. - Updated all router paths, names, and references for consistency. - Fixed related links and imports to use the new view/component name.
Matt Raymer
6 months ago
5 changed files with 567 additions and 95 deletions
@ -0,0 +1,430 @@ |
|||
<template> |
|||
<!-- CONTENT --> |
|||
<section id="Content" class="relativew-[100vw] h-[100vh]"> |
|||
<div |
|||
class="absolute inset-x-0 bottom-0 bg-black/50 p-6 pb-[calc(env(safe-area-inset-bottom)+1.5rem)]" |
|||
> |
|||
<p class="text-center text-white mb-3"> |
|||
Point your camera at a TimeSafari contact QR code to scan it |
|||
automatically. |
|||
</p> |
|||
|
|||
<p v-if="error" class="text-center text-rose-300 mb-3">{{ error }}</p> |
|||
|
|||
<div class="flex justify-center items-center"> |
|||
<button |
|||
class="text-center text-slate-600 leading-none bg-white p-2 rounded-full drop-shadow-lg" |
|||
@click="handleBack" |
|||
> |
|||
<font-awesome icon="xmark" class="size-6"></font-awesome> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Vue } from "vue-facing-decorator"; |
|||
import { Router } from "vue-router"; |
|||
import { logger } from "../utils/logger"; |
|||
import { QRScannerFactory } from "../services/QRScanner/QRScannerFactory"; |
|||
import QuickNav from "../components/QuickNav.vue"; |
|||
import { NotificationIface } from "../constants/app"; |
|||
import { db } from "../db/index"; |
|||
import { Contact } from "../db/tables/contacts"; |
|||
import { getContactJwtFromJwtUrl } from "../libs/crypto"; |
|||
import { decodeEndorserJwt } from "../libs/crypto/vc"; |
|||
import { retrieveSettingsForActiveAccount } from "../db/index"; |
|||
import { setVisibilityUtil } from "../libs/endorserServer"; |
|||
|
|||
interface QRScanResult { |
|||
rawValue?: string; |
|||
barcode?: string; |
|||
} |
|||
|
|||
@Component({ |
|||
components: { |
|||
QuickNav, |
|||
}, |
|||
}) |
|||
export default class ContactQRScan extends Vue { |
|||
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|||
$router!: Router; |
|||
|
|||
isScanning = false; |
|||
error: string | null = null; |
|||
activeDid = ""; |
|||
apiServer = ""; |
|||
|
|||
// Add new properties to track scanning state |
|||
private lastScannedValue: string = ""; |
|||
private lastScanTime: number = 0; |
|||
private readonly SCAN_DEBOUNCE_MS = 2000; // Prevent duplicate scans within 2 seconds |
|||
|
|||
// Add cleanup tracking |
|||
private isCleaningUp = false; |
|||
private isMounted = false; |
|||
|
|||
async created() { |
|||
try { |
|||
const settings = await retrieveSettingsForActiveAccount(); |
|||
this.activeDid = settings.activeDid || ""; |
|||
this.apiServer = settings.apiServer || ""; |
|||
} catch (error) { |
|||
logger.error("Error initializing component:", { |
|||
error: error instanceof Error ? error.message : String(error), |
|||
stack: error instanceof Error ? error.stack : undefined, |
|||
}); |
|||
this.$notify({ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Initialization Error", |
|||
text: "Failed to initialize QR scanner. Please try again.", |
|||
}); |
|||
} |
|||
} |
|||
|
|||
async startScanning() { |
|||
if (this.isCleaningUp) { |
|||
logger.debug("Cannot start scanning during cleanup"); |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
this.error = null; |
|||
this.isScanning = true; |
|||
this.lastScannedValue = ""; |
|||
this.lastScanTime = 0; |
|||
|
|||
const scanner = QRScannerFactory.getInstance(); |
|||
|
|||
// Check if scanning is supported first |
|||
if (!(await scanner.isSupported())) { |
|||
this.error = |
|||
"Camera access requires HTTPS. Please use a secure connection."; |
|||
this.isScanning = false; |
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "warning", |
|||
title: "HTTPS Required", |
|||
text: "Camera access requires a secure (HTTPS) connection", |
|||
}, |
|||
5000, |
|||
); |
|||
return; |
|||
} |
|||
|
|||
// Check permissions first |
|||
if (!(await scanner.checkPermissions())) { |
|||
const granted = await scanner.requestPermissions(); |
|||
if (!granted) { |
|||
this.error = "Camera permission denied"; |
|||
this.isScanning = false; |
|||
// Show notification for better visibility |
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "warning", |
|||
title: "Camera Access Required", |
|||
text: "Camera permission denied", |
|||
}, |
|||
5000, |
|||
); |
|||
return; |
|||
} |
|||
} |
|||
|
|||
// Add scan listener |
|||
scanner.addListener({ |
|||
onScan: this.onScanDetect, |
|||
onError: this.onScanError, |
|||
}); |
|||
|
|||
// Start scanning |
|||
await scanner.startScan(); |
|||
} catch (error) { |
|||
this.error = error instanceof Error ? error.message : String(error); |
|||
this.isScanning = false; |
|||
logger.error("Error starting scan:", { |
|||
error: error instanceof Error ? error.message : String(error), |
|||
stack: error instanceof Error ? error.stack : undefined, |
|||
}); |
|||
} |
|||
} |
|||
|
|||
async stopScanning() { |
|||
try { |
|||
const scanner = QRScannerFactory.getInstance(); |
|||
await scanner.stopScan(); |
|||
} catch (error) { |
|||
logger.error("Error stopping scan:", { |
|||
error: error instanceof Error ? error.message : String(error), |
|||
stack: error instanceof Error ? error.stack : undefined, |
|||
}); |
|||
} finally { |
|||
this.isScanning = false; |
|||
this.lastScannedValue = ""; |
|||
this.lastScanTime = 0; |
|||
} |
|||
} |
|||
|
|||
async cleanupScanner() { |
|||
if (this.isCleaningUp) { |
|||
return; |
|||
} |
|||
|
|||
this.isCleaningUp = true; |
|||
try { |
|||
logger.info("Cleaning up QR scanner resources"); |
|||
await this.stopScanning(); |
|||
await QRScannerFactory.cleanup(); |
|||
} catch (error) { |
|||
logger.error("Error during scanner cleanup:", { |
|||
error: error instanceof Error ? error.message : String(error), |
|||
stack: error instanceof Error ? error.stack : undefined, |
|||
}); |
|||
} finally { |
|||
this.isCleaningUp = false; |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Handle QR code scan result with debouncing to prevent duplicate scans |
|||
*/ |
|||
async onScanDetect(result: string | QRScanResult) { |
|||
try { |
|||
// Extract raw value from different possible formats |
|||
const rawValue = |
|||
typeof result === "string" |
|||
? result |
|||
: result?.rawValue || result?.barcode; |
|||
if (!rawValue) { |
|||
logger.warn("Invalid scan result - no value found:", result); |
|||
return; |
|||
} |
|||
|
|||
// Debounce duplicate scans |
|||
const now = Date.now(); |
|||
if ( |
|||
rawValue === this.lastScannedValue && |
|||
now - this.lastScanTime < this.SCAN_DEBOUNCE_MS |
|||
) { |
|||
logger.info("Ignoring duplicate scan:", rawValue); |
|||
return; |
|||
} |
|||
|
|||
// Update scan tracking |
|||
this.lastScannedValue = rawValue; |
|||
this.lastScanTime = now; |
|||
|
|||
logger.info("Processing QR code scan result:", rawValue); |
|||
|
|||
// Extract JWT |
|||
const jwt = getContactJwtFromJwtUrl(rawValue); |
|||
if (!jwt) { |
|||
logger.warn("Invalid QR code format - no JWT found in URL"); |
|||
this.$notify({ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Invalid QR Code", |
|||
text: "This QR code does not contain valid contact information. Please scan a TimeSafari contact QR code.", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// Process JWT and contact info |
|||
logger.info("Decoding JWT payload from QR code"); |
|||
const decodedJwt = await decodeEndorserJwt(jwt); |
|||
if (!decodedJwt?.payload?.own) { |
|||
logger.warn("Invalid JWT payload - missing 'own' field"); |
|||
this.$notify({ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Invalid Contact Info", |
|||
text: "The contact information is incomplete or invalid.", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
const contactInfo = decodedJwt.payload.own; |
|||
if (!contactInfo.did) { |
|||
logger.warn("Invalid contact info - missing DID"); |
|||
this.$notify({ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Invalid Contact", |
|||
text: "The contact DID is missing.", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// Create contact object |
|||
const contact = { |
|||
did: contactInfo.did, |
|||
name: contactInfo.name || "", |
|||
email: contactInfo.email || "", |
|||
phone: contactInfo.phone || "", |
|||
company: contactInfo.company || "", |
|||
title: contactInfo.title || "", |
|||
notes: contactInfo.notes || "", |
|||
}; |
|||
|
|||
// Add contact and stop scanning |
|||
logger.info("Adding new contact to database:", { |
|||
did: contact.did, |
|||
name: contact.name, |
|||
}); |
|||
await this.addNewContact(contact); |
|||
await this.stopScanning(); |
|||
this.$router.back(); // Return to previous view after successful scan |
|||
} catch (error) { |
|||
logger.error("Error processing contact QR code:", { |
|||
error: error instanceof Error ? error.message : String(error), |
|||
stack: error instanceof Error ? error.stack : undefined, |
|||
}); |
|||
this.$notify({ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Error", |
|||
text: |
|||
error instanceof Error |
|||
? error.message |
|||
: "Could not process QR code. Please try again.", |
|||
}); |
|||
} |
|||
} |
|||
|
|||
onScanError(error: Error) { |
|||
this.error = error.message; |
|||
logger.error("QR code scan error:", { |
|||
error: error.message, |
|||
stack: error.stack, |
|||
}); |
|||
} |
|||
|
|||
async setVisibility(contact: Contact, visibility: boolean) { |
|||
const result = await setVisibilityUtil( |
|||
this.activeDid, |
|||
this.apiServer, |
|||
this.axios, |
|||
db, |
|||
contact, |
|||
visibility, |
|||
); |
|||
if (result.error) { |
|||
this.$notify({ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Error Setting Visibility", |
|||
text: result.error as string, |
|||
}); |
|||
} else if (!result.success) { |
|||
logger.warn("Unexpected result from setting visibility:", result); |
|||
} |
|||
} |
|||
|
|||
async addNewContact(contact: Contact) { |
|||
try { |
|||
logger.info("Opening database connection for new contact"); |
|||
await db.open(); |
|||
|
|||
// Check if contact already exists |
|||
const existingContacts = await db.contacts.toArray(); |
|||
const existingContact = existingContacts.find( |
|||
(c) => c.did === contact.did, |
|||
); |
|||
|
|||
if (existingContact) { |
|||
logger.info("Contact already exists", { did: contact.did }); |
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "warning", |
|||
title: "Contact Exists", |
|||
text: "This contact has already been added to your list.", |
|||
}, |
|||
3000, |
|||
); |
|||
return; |
|||
} |
|||
|
|||
// Add new contact |
|||
await db.contacts.add(contact); |
|||
|
|||
if (this.activeDid) { |
|||
logger.info("Setting contact visibility", { did: contact.did }); |
|||
await this.setVisibility(contact, true); |
|||
contact.seesMe = true; |
|||
} |
|||
|
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "success", |
|||
title: "Contact Added", |
|||
text: this.activeDid |
|||
? "They were added, and your activity is visible to them." |
|||
: "They were added.", |
|||
}, |
|||
3000, |
|||
); |
|||
} catch (error) { |
|||
logger.error("Error saving contact to database:", { |
|||
did: contact.did, |
|||
error: error instanceof Error ? error.message : String(error), |
|||
stack: error instanceof Error ? error.stack : undefined, |
|||
}); |
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Contact Error", |
|||
text: "Could not save contact. Check if it already exists.", |
|||
}, |
|||
5000, |
|||
); |
|||
} |
|||
} |
|||
|
|||
// Lifecycle hooks |
|||
mounted() { |
|||
this.isMounted = true; |
|||
document.addEventListener("pause", this.handleAppPause); |
|||
document.addEventListener("resume", this.handleAppResume); |
|||
this.startScanning(); // Automatically start scanning when view is mounted |
|||
} |
|||
|
|||
beforeDestroy() { |
|||
this.isMounted = false; |
|||
document.removeEventListener("pause", this.handleAppPause); |
|||
document.removeEventListener("resume", this.handleAppResume); |
|||
this.cleanupScanner(); |
|||
} |
|||
|
|||
async handleAppPause() { |
|||
if (!this.isMounted) return; |
|||
|
|||
logger.info("App paused, stopping scanner"); |
|||
await this.stopScanning(); |
|||
} |
|||
|
|||
handleAppResume() { |
|||
if (!this.isMounted) return; |
|||
|
|||
logger.info("App resumed, scanner can be restarted by user"); |
|||
this.isScanning = false; |
|||
} |
|||
|
|||
async handleBack() { |
|||
await this.cleanupScanner(); |
|||
this.$router.back(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.aspect-square { |
|||
aspect-ratio: 1 / 1; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue