diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5926739..72c10ef 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -19,6 +19,7 @@ "i18n": "^0.15.1", "jwt-decode": "^4.0.0", "pinia": "^2.1.7", + "qrcode.vue": "^3.6.0", "uuid": "^10.0.0", "vue": "^3.4.15", "vue-advanced-cropper": "^2.8.9", @@ -4373,6 +4374,15 @@ "node": ">=6" } }, + "node_modules/qrcode.vue": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-3.6.0.tgz", + "integrity": "sha512-vQcl2fyHYHMjDO1GguCldJxepq2izQjBkDEEu9NENgfVKP6mv/e2SU62WbqYHGwTgWXLhxZ1NCD1dAZKHQq1fg==", + "license": "MIT", + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/qs": { "version": "6.14.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index d7419b2..eea7f4c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,6 +20,7 @@ "i18n": "^0.15.1", "jwt-decode": "^4.0.0", "pinia": "^2.1.7", + "qrcode.vue": "^3.6.0", "uuid": "^10.0.0", "vue": "^3.4.15", "vue-advanced-cropper": "^2.8.9", diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue index a6e8098..bf8579c 100644 --- a/frontend/src/views/profile/ProfilePage.vue +++ b/frontend/src/views/profile/ProfilePage.vue @@ -19,9 +19,12 @@ import Tiktok from "@/views/svg/Tiktok.vue"; import Instagram from "@/views/svg/Instagram.vue"; import Facebook from "@/views/svg/Facebook.vue"; import {useI18n} from 'vue-i18n'; +import QRCodeVue from 'qrcode.vue'; const {t} = useI18n(); const userProfileStore = useUserProfileStore() +const creatorProfileStore = useCreatorProfileStore(); +const baseURL = window.location.origin; // ### Fullname const dialogEditFullnameShown = ref(false) @@ -71,8 +74,6 @@ function handleSaveEditEmail(firstname, lastname) { dialogEditEmailShown.value = false } -const creatorProfileStore = useCreatorProfileStore(); - const dialogShown = ref(false); const currentComponent = ref(''); const restoreDialogShown = ref(false); @@ -270,6 +271,25 @@ function handleDelete() { +
+
+ {{ t('qrCode') }} +
+
+
+

{{ t('qrCodeDescription') }}

+ +
+
+
+
{{ t('dangerZone') }} @@ -402,6 +422,18 @@ function handleDelete() { .safe-action { @apply bg-green-800 hover:bg-green-700 active:bg-green-600; } + +.qr-container { + @apply flex flex-col items-center gap-4 p-4; +} + +.qr-code { + @apply bg-white p-4 rounded-lg; +} + +.qr-text { + @apply text-hOnBackground text-center; +} @@ -421,7 +453,9 @@ function handleDelete() { "restoreCreatorPage": "Restore Creator Page", "stripeAccountId": "Stripe Account ID", "socialNetworks": "Social Networks", - "handle": "Creator Handle" + "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." }, "fr": { "personalInfo": "Informations Personnelles", @@ -438,7 +472,9 @@ function handleDelete() { "restoreCreatorPage": "Restaurer la Page Créateur", "stripeAccountId": "ID de Compte Stripe", "socialNetworks": "Réseaux Sociaux", - "handle": "Identifiant du créateur" + "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." }, "es": { "personalInfo": "Información Personal", @@ -455,7 +491,9 @@ function handleDelete() { "restoreCreatorPage": "Restaurar Página de Creador", "stripeAccountId": "ID de Cuenta Stripe", "socialNetworks": "Redes Sociales", - "handle": "Identificador del creador" + "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." } } \ No newline at end of file