|
|
@ -1,18 +1,25 @@ |
|
|
|
<template> |
|
|
|
<QuickNav selected="Profile" /> |
|
|
|
<!-- CONTENT --> |
|
|
|
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
|
|
|
<div class="mb-2"> |
|
|
|
<h1 class="text-2xl text-center font-semibold relative px-7"> |
|
|
|
<!-- Back --> |
|
|
|
<a |
|
|
|
class="text-lg text-center font-light px-2 py-1 absolute -left-2 -top-1" |
|
|
|
@click="$router.back()" |
|
|
|
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" |
|
|
|
@click="handleBack" |
|
|
|
> |
|
|
|
<font-awesome icon="chevron-left" class="fa-fw" /> |
|
|
|
</a> |
|
|
|
|
|
|
|
Your Contact Info |
|
|
|
<!-- Quick Help --> |
|
|
|
<a |
|
|
|
class="text-2xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1" |
|
|
|
@click="toastQRCodeHelp()" |
|
|
|
> |
|
|
|
<font-awesome icon="circle-question" class="fa-fw" /> |
|
|
|
</a> |
|
|
|
|
|
|
|
Share Contact Info |
|
|
|
</h1> |
|
|
|
</div> |
|
|
|
|
|
|
@ -35,7 +42,7 @@ |
|
|
|
|
|
|
|
<div |
|
|
|
v-if="activeDid && activeDid.startsWith(ETHR_DID_PREFIX)" |
|
|
|
class="block w-[67vw] max-w-[33vh] mx-auto my-2" |
|
|
|
class="block w-[90vw] max-w-[40vh] mx-auto my-4 border border-slate-500" |
|
|
|
@click="onCopyUrlToClipboard()" |
|
|
|
> |
|
|
|
<!-- |
|
|
@ -49,11 +56,8 @@ |
|
|
|
:corners-square-options="{ type: 'square' }" |
|
|
|
:dots-options="{ type: 'square', color: '#000' }" |
|
|
|
/> |
|
|
|
<div class="text-center text-sm text-gray-500"> |
|
|
|
Click the QR code to copy your contact info to your clipboard. |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else-if="activeDid" class="text-center"> |
|
|
|
<div v-else-if="activeDid" class="text-center my-4"> |
|
|
|
<!-- Not an ETHR DID so force them to paste it. (Passkey Peer DIDs are too big.) --> |
|
|
|
<span class="text-blue-500" @click="onCopyDidToClipboard()"> |
|
|
|
Click here to copy your DID to your clipboard. |
|
|
@ -62,7 +66,7 @@ |
|
|
|
Then give it to them so they can paste it in their list of People. |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<div v-else class="text-center"> |
|
|
|
<div v-else class="text-center my-4"> |
|
|
|
You have no identitifiers yet, so |
|
|
|
<router-link |
|
|
|
:to="{ name: 'start' }" |
|
|
@ -74,13 +78,10 @@ |
|
|
|
If you don't that first, these contacts won't see your activity. |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
|
<h2 class="text-2xl text-center font-semibold mt-6 mb-2"> |
|
|
|
Scan Contact Info |
|
|
|
</h2> |
|
|
|
<div class="text-center my-6"> |
|
|
|
<div |
|
|
|
v-if="isScanning" |
|
|
|
class="relative aspect-square rounded-xl overflow-hidden bg-slate-800 w-[67vw] max-w-[33vh] mx-auto" |
|
|
|
class="relative aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[40vh] mx-auto" |
|
|
|
> |
|
|
|
<!-- Status Message --> |
|
|
|
<div |
|
|
@ -153,27 +154,38 @@ |
|
|
|
|
|
|
|
<!-- Camera Switch Button --> |
|
|
|
<button |
|
|
|
class="absolute bottom-4 right-4 bg-white rounded-full p-2 leading-none shadow-lg" |
|
|
|
class="absolute bottom-4 left-4 bg-white rounded-full p-2 leading-none shadow-lg" |
|
|
|
title="Switch camera" |
|
|
|
@click="toggleCamera" |
|
|
|
> |
|
|
|
<font-awesome icon="camera-rotate" class="size-6 text-gray-600" /> |
|
|
|
</button> |
|
|
|
|
|
|
|
<!-- Camera Stop Button --> |
|
|
|
<button |
|
|
|
class="absolute bottom-4 right-4 bg-white rounded-full p-2 leading-none shadow-lg" |
|
|
|
title="Stop camera" |
|
|
|
@click="stopScanning" |
|
|
|
> |
|
|
|
<font-awesome icon="xmark" class="size-6 text-gray-600" /> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div v-else class="mt-4"> |
|
|
|
<div |
|
|
|
v-else |
|
|
|
class="flex items-center justify-center aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[40vh] mx-auto"> |
|
|
|
<button |
|
|
|
v-if="isNativePlatform" |
|
|
|
class="bg-blue-500 text-white px-4 py-2 rounded-md" |
|
|
|
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white text-lg px-3 py-2 rounded-lg" |
|
|
|
@click="$router.push({ name: 'contact-qr-scan' })" |
|
|
|
> |
|
|
|
Start Scanning |
|
|
|
Scan QR Code |
|
|
|
</button> |
|
|
|
<button |
|
|
|
v-else |
|
|
|
class="bg-blue-500 text-white px-4 py-2 rounded-md" |
|
|
|
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white text-lg px-3 py-2 rounded-lg" |
|
|
|
@click="startScanning" |
|
|
|
> |
|
|
|
Start Scanning |
|
|
|
Scan QR Code |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -187,6 +199,7 @@ import { Component, Vue } from "vue-facing-decorator"; |
|
|
|
import { useClipboard } from "@vueuse/core"; |
|
|
|
import { Capacitor } from "@capacitor/core"; |
|
|
|
import { QrcodeStream } from "vue-qrcode-reader"; |
|
|
|
import type { RouteLocationNormalized, NavigationGuardNext } from "vue-router"; |
|
|
|
|
|
|
|
import QuickNav from "../components/QuickNav.vue"; |
|
|
|
import UserNameDialog from "../components/UserNameDialog.vue"; |
|
|
@ -292,6 +305,11 @@ export default class ContactQRScanShow extends Vue { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
async handleBack(): Promise<void> { |
|
|
|
await this.cleanupScanner(); |
|
|
|
this.$router.back(); |
|
|
|
} |
|
|
|
|
|
|
|
async startScanning() { |
|
|
|
if (this.isCleaningUp) { |
|
|
|
logger.debug("Cannot start scanning during cleanup"); |
|
|
@ -649,6 +667,17 @@ export default class ContactQRScanShow extends Vue { |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
toastQRCodeHelp() { |
|
|
|
this.$notify( |
|
|
|
{ |
|
|
|
group: "alert", |
|
|
|
type: "info", |
|
|
|
text: "Click the QR code to copy your contact info to your clipboard.", |
|
|
|
}, |
|
|
|
5000, |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
onCopyDidToClipboard() { |
|
|
|
//this.onScanDetect([{ rawValue: this.qrValue }]); // good for testing |
|
|
|
useClipboard() |
|
|
|