Browse Source

Complete: unified QR display + capture

pull/133/head
Jose Olarte III 2 months ago
parent
commit
fdd1ff80ad
  1. 2
      src/lib/fontawesome.ts
  2. 2
      src/main.ts
  3. 70
      src/views/ContactQRScanShowView.vue

2
src/lib/fontawesome.ts

@ -17,6 +17,7 @@ import {
faBurst,
faCalendar,
faCamera,
faCameraRotate,
faCaretDown,
faChair,
faCheck,
@ -97,6 +98,7 @@ library.add(
faBurst,
faCalendar,
faCamera,
faCameraRotate,
faCaretDown,
faChair,
faCheck,

2
src/main.ts

@ -21,6 +21,7 @@ import {
faBurst,
faCalendar,
faCamera,
faCameraRotate,
faCaretDown,
faChair,
faCheck,
@ -101,6 +102,7 @@ library.add(
faBurst,
faCalendar,
faCamera,
faCameraRotate,
faCaretDown,
faChair,
faCheck,

70
src/views/ContactQRScanShowView.vue

@ -3,7 +3,7 @@
<!-- 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-light relative px-7">
<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"
@ -18,7 +18,7 @@
<p
v-if="!givenName"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 my-4"
>
<span class="text-red">Beware!</span>
You aren't sharing your name, so quickly
@ -35,7 +35,7 @@
<div
v-if="activeDid && activeDid.startsWith(ETHR_DID_PREFIX)"
class="text-center"
class="block w-[67vw] max-w-[33vh] mx-auto my-2"
@click="onCopyUrlToClipboard()"
>
<!--
@ -44,13 +44,14 @@
-->
<QRCodeVue3
:value="qrValue"
:corners-square-options="{ type: 'extra-rounded' }"
:dots-options="{ type: 'square' }"
class="flex justify-center"
:width="640"
:height="640"
:corners-square-options="{ type: 'square' }"
:dots-options="{ type: 'square', color: '#000' }"
/>
<span>
<div class="text-center text-sm text-gray-500">
Click the QR code to copy your contact info to your clipboard.
</span>
</div>
</div>
<div v-else-if="activeDid" class="text-center">
<!-- Not an ETHR DID so force them to paste it. (Passkey Peer DIDs are too big.) -->
@ -74,11 +75,11 @@
</div>
<div class="text-center">
<h1 class="text-2xl text-center font-light pt-6">Scan Contact Info</h1>
<div v-if="isScanning" class="relative aspect-square max-w-sm mx-auto">
<h2 class="text-2xl text-center font-semibold mt-6 mb-2">Scan Contact Info</h2>
<div v-if="isScanning" class="relative aspect-square rounded-xl overflow-hidden bg-slate-800 w-[67vw] max-w-[33vh] mx-auto">
<!-- Status Message -->
<div
class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 text-white text-center py-2 z-10"
class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 text-white text-sm text-center py-2 z-10"
>
<div
v-if="isInitializing"
@ -116,8 +117,8 @@
></span>
<span>Position QR code in the frame</span>
</p>
<p v-else-if="error" class="text-red-300">
<span class="font-medium">Error:</span> {{ error }}
<p v-else-if="error" class="text-red-400">
Error: {{ error }}
</p>
<p v-else class="flex items-center justify-center space-x-2">
<span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span>
@ -147,64 +148,31 @@
style="opacity: 0.5; pointer-events: none"
></div>
<!-- Debug Info -->
<div
class="absolute bottom-16 left-0 right-0 bg-black bg-opacity-50 text-white text-xs text-center py-1"
>
Camera: {{ preferredCamera === "user" ? "Front" : "Back" }} | Status:
{{ cameraStatus }}
</div>
<!-- Camera Switch Button -->
<button
class="absolute bottom-4 right-4 bg-white rounded-full p-2 shadow-lg"
class="absolute bottom-4 right-4 bg-white rounded-full p-2 leading-none shadow-lg"
title="Switch camera"
@click="toggleCamera"
>
<svg
class="h-6 w-6 text-gray-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0
011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0
01-2-2V9z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
<font-awesome icon="camera-rotate" class="size-6 text-gray-600" />
</button>
</div>
<div v-else>
<div class="mt-4" v-else>
<button
v-if="isNativePlatform"
class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
class="bg-blue-500 text-white px-4 py-2 rounded-md"
@click="$router.push({ name: 'contact-qr-scan' })"
>
Start Scanning
</button>
<button
v-else
class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
class="bg-blue-500 text-white px-4 py-2 rounded-md"
@click="startScanning"
>
Start Scanning
</button>
</div>
<span v-if="error" class="text-red-500 block mt-2">{{ error }}</span>
<span v-else class="block mt-2">
If you do not see a scanning camera window here, check your camera
permissions.
</span>
</div>
</section>
</template>

Loading…
Cancel
Save