From dc1ea64d024c20d81f380d5d9cb90aeb14b533ae Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Wed, 23 Apr 2025 23:27:20 -0400
Subject: [PATCH] feat: Implement QR code download functionality in profile
 page

---
 frontend/src/views/profile/ProfilePage.vue | 90 +++++++++++++++++++++-
 1 file changed, 87 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue
index bf8579c..0bce320 100644
--- a/frontend/src/views/profile/ProfilePage.vue
+++ b/frontend/src/views/profile/ProfilePage.vue
@@ -112,6 +112,72 @@ function handleDelete() {
   creatorProfileStore.removeCreatorPage();
   deleteDialogShown.value = false;
 }
+
+function downloadQRCode() {
+  try {
+    // Get the SVG element
+    const svgElement = document.querySelector('.qr-code svg') || 
+                      document.querySelector('.qr-container svg') ||
+                      document.querySelector('svg[class*="qr"]');
+    
+    if (!svgElement) {
+      console.error('QR code SVG element not found');
+      return;
+    }
+
+    // Create a Blob from the SVG
+    const svgData = new XMLSerializer().serializeToString(svgElement);
+    const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+    const svgUrl = URL.createObjectURL(svgBlob);
+
+    // Create an image element
+    const img = new Image();
+    img.onload = () => {
+      // Set padding
+      const padding = 20; // 20 pixels padding on each side
+      
+      // Create canvas with padding
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      
+      // Set canvas size to include padding
+      canvas.width = img.width + (padding * 2);
+      canvas.height = img.height + (padding * 2);
+      
+      // Fill white background for entire canvas (including padding)
+      ctx.fillStyle = 'white';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      
+      // Draw the image with padding offset
+      ctx.drawImage(img, padding, padding);
+      
+      // Convert to PNG
+      const pngUrl = canvas.toDataURL('image/png');
+      
+      // Create download link
+      const downloadLink = document.createElement('a');
+      downloadLink.href = pngUrl;
+      downloadLink.download = `hutopy-qr-${creatorProfileStore.creator.slug}.png`;
+      
+      // Trigger download
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+      
+      // Cleanup
+      URL.revokeObjectURL(svgUrl);
+    };
+    
+    img.onerror = (error) => {
+      console.error('Error loading SVG:', error);
+    };
+    
+    // Load the SVG into the image
+    img.src = svgUrl;
+  } catch (error) {
+    console.error('Error in downloadQRCode:', error);
+  }
+}
 </script>
 
 <template>
@@ -286,6 +352,14 @@ function handleDelete() {
                   render-as="svg"
                   class="qr-code"
               />
+              <button 
+                v-if="creatorProfileStore.creator"
+                class="download-button"
+                @click="downloadQRCode"
+              >
+                <v-icon>mdi-download</v-icon>
+                {{ t('downloadQRCode') }}
+              </button>
             </div>
           </div>
         </div>
@@ -434,6 +508,13 @@ function handleDelete() {
 .qr-text {
   @apply text-hOnBackground text-center;
 }
+
+.download-button {
+  @apply flex items-center gap-2 px-4 py-2 rounded-lg;
+  @apply bg-hutopyPrimary text-hOnPrimary;
+  @apply hover:bg-hutopySecondary;
+  @apply transition-colors duration-300;
+}
 </style>
 
 <i18n>
@@ -455,7 +536,8 @@ function handleDelete() {
     "socialNetworks": "Social Networks",
     "handle": "Creator Handle",
     "qrCode": "QR Code",
-    "qrCodeDescription": "Print this QR code to share your Hutopy with the world! Perfect for business cards, social media, and promotional materials."
+    "qrCodeDescription": "Print this QR code to share your Hutopy with the world! Perfect for business cards, social media, and promotional materials.",
+    "downloadQRCode": "Download QR Code"
   },
   "fr": {
     "personalInfo": "Informations Personnelles",
@@ -474,7 +556,8 @@ function handleDelete() {
     "socialNetworks": "Réseaux Sociaux",
     "handle": "Identifiant du créateur",
     "qrCode": "Code QR",
-    "qrCodeDescription": "Imprimez ce code QR pour partager votre Hutopy avec le monde ! Parfait pour les cartes de visite, les réseaux sociaux et les supports promotionnels."
+    "qrCodeDescription": "Imprimez ce code QR pour partager votre Hutopy avec le monde ! Parfait pour les cartes de visite, les réseaux sociaux et les supports promotionnels.",
+    "downloadQRCode": "Télécharger le Code QR"
   },
   "es": {
     "personalInfo": "Información Personal",
@@ -493,7 +576,8 @@ function handleDelete() {
     "socialNetworks": "Redes Sociales",
     "handle": "Identificador del creador",
     "qrCode": "Código QR",
-    "qrCodeDescription": "¡Imprime este código QR para compartir tu Hutopy con el mundo! Perfecto para tarjetas de presentación, redes sociales y materiales promocionales."
+    "qrCodeDescription": "¡Imprime este código QR para compartir tu Hutopy con el mundo! Perfecto para tarjetas de presentación, redes sociales y materiales promocionales.",
+    "downloadQRCode": "Descargar Código QR"
   }
 }
 </i18n>
\ No newline at end of file