jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(pack): optimize dependencies, reduce bundle size

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-06-05 13:52:05 -04:00
parent 74323247c9
commit 31ba18fa8d
145 changed files with 992 additions and 15921 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
frontend/src/views/profile/ProfilePage.vue
View File

@@ -1,9 +1,8 @@
<script setup>
import {ref, markRaw} from 'vue';
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import {useClient} from '@/plugins/api.js';
import {useRouter} from 'vue-router';
import { ref, markRaw } from 'vue';
import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
import { useUserProfileStore } from "@/stores/userProfileStore.js";
import { useClient } from '@/plugins/api.js';
import SocialsDialog from './creators/SocialsDialog.vue';
import AliasDialog from "@/views/profile/account/AliasDialog.vue";
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
@@ -23,11 +22,11 @@ import Linkedin from "@/views/svg/Linkedin.vue";
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 { useI18n } from 'vue-i18n';
import QRCodeVue from 'qrcode.vue';
import { mdiChevronRight, mdiCreditCard, mdiCreditCardOff, mdiDownload, mdiCheck, mdiContentCopy } from '@mdi/js';
const {t} = useI18n();
const router = useRouter();
const { t } = useI18n();
const userProfileStore = useUserProfileStore()
const creatorProfileStore = useCreatorProfileStore();
const baseURL = window.location.origin;
@@ -143,10 +142,10 @@ function handleDelete() {
function downloadQRCode() {
try {
// Get the SVG element
const svgElement = document.querySelector('.qr-code svg') ||
document.querySelector('.qr-container svg') ||
document.querySelector('svg[class*="qr"]');
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;
@@ -162,43 +161,43 @@ function downloadQRCode() {
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) {
@@ -221,7 +220,7 @@ async function deconfigureStripe() {
<template>
<div class="min-h-screen w-full">
<div class="flex flex-col items-center gap-4 m-4">
<div class="m-4 flex flex-col items-center gap-4">
<div class="card">
@@ -230,20 +229,20 @@ async function deconfigureStripe() {
</div>
<div class="content">
<button
class="action"
@click="openEditFullname">
<button class="action" @click="openEditFullname">
<span class="label">{{ t('fullName') }}</span>
<span class="value">{{ userProfileStore.fullname }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<button
class="action"
@click="openEditAlias">
<button class="action" @click="openEditAlias">
<span class="label">{{ t('alias') }}</span>
<span class="value">{{ userProfileStore.user.alias }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
</div>
@@ -251,7 +250,9 @@ async function deconfigureStripe() {
<button class="action" @click="openDialog('EmailDialog')">
<span class="label">{{ t('email') }}</span>
<span class="value">{{ userProfileStore.user.email }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
</div>
@@ -259,10 +260,12 @@ async function deconfigureStripe() {
<button class="action" @click="openDialog('ChangePasswordDialog')">
<span class="label">{{ t('changePassword') }}</span>
<span class="value">••••••••</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
</div>
</div>
<template v-if="creatorProfileStore.hasCreator">
@@ -275,29 +278,31 @@ async function deconfigureStripe() {
<div class="action" @click="openDialog('ChangeSlugDialog')">
<span class="label">{{ t('handle') }}</span>
<span class="value">{{ baseURL }}/@{{ creatorProfileStore.creator.slug }}</span>
<button
ref="copyButtonRef"
class="copy-button"
@click.stop="copyCreatorUrl"
:class="{ 'success': copySuccess }"
>
<v-icon>{{ copySuccess ? 'mdi-check' : 'mdi-content-copy' }}</v-icon>
<button ref="copyButtonRef" class="copy-button" @click.stop="copyCreatorUrl"
:class="{ 'success': copySuccess }">
<v-icon :icon="copySuccess ? mdiCheck : mdiContentCopy" />
</button>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</div>
<!-- NAME -->
<button class="action" @click="openDialog('ChangeNameDialog')">
<span class="label">{{ t('name') }}</span>
<span class="value">{{ creatorProfileStore.creator.name }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<!-- TITLE -->
<button class="action" @click="openDialog('ChangeTitleDialog')">
<span class="label">{{ t('title') }}</span>
<span class="value">{{ creatorProfileStore.creator.title }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<!-- PHONE NUMBER -->
@@ -306,7 +311,9 @@ async function deconfigureStripe() {
<span class="value" :class="{ 'not-set': !creatorProfileStore.creator.presentation?.phoneNumber }">
{{ creatorProfileStore.creator.presentation?.phoneNumber || t('notSet') }}
</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<!-- EMAIL -->
@@ -315,9 +322,10 @@ async function deconfigureStripe() {
<span class="value" :class="{ 'not-set': !creatorProfileStore.creator.presentation?.email }">
{{ creatorProfileStore.creator.presentation?.email || t('notSet') }}
</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
</div>
</div>
@@ -335,13 +343,12 @@ async function deconfigureStripe() {
</span>
<div class="stripe-actions">
<button class="configure-stripe-button" @click="openDialog('ChangeStripeIdDialog')">
<v-icon>mdi-credit-card</v-icon>
<v-icon :icon="mdiCreditCard" />
{{ t('configureStripe') }}
</button>
<button v-if="creatorProfileStore.creator.acceptDonation"
class="deconfigure-stripe-button"
@click="deconfigureStripe">
<v-icon>mdi-credit-card-off</v-icon>
<button v-if="creatorProfileStore.creator.acceptDonation" class="deconfigure-stripe-button"
@click="deconfigureStripe">
<v-icon :icon="mdiCreditCardOff"/>
{{ t('deconfigureStripe') }}
</button>
</div>
@@ -361,7 +368,9 @@ async function deconfigureStripe() {
<facebook class="social-icon"></facebook>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
@@ -369,7 +378,9 @@ async function deconfigureStripe() {
<instagram class="social-icon"></instagram>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
@@ -377,7 +388,9 @@ async function deconfigureStripe() {
<x class="social-icon"></x>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
@@ -385,7 +398,9 @@ async function deconfigureStripe() {
<linkedin class="social-icon"></linkedin>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
@@ -393,7 +408,9 @@ async function deconfigureStripe() {
<tiktok class="social-icon"></tiktok>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
@@ -401,7 +418,9 @@ async function deconfigureStripe() {
<youtube class="social-icon"></youtube>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
@@ -409,7 +428,9 @@ async function deconfigureStripe() {
<reddit class="social-icon"></reddit>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
<button class="action" @click="openDialog('SocialsDialog')">
@@ -417,7 +438,9 @@ async function deconfigureStripe() {
<web class="social-icon"></web>
</span>
<span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
<span class="chevron">
<v-icon :icon="mdiChevronRight" />
</span>
</button>
</div>
@@ -430,20 +453,10 @@ async function deconfigureStripe() {
<div class="content">
<div class="qr-container">
<p class="qr-text">{{ t('qrCodeDescription') }}</p>
<QRCodeVue
v-if="creatorProfileStore.creator"
:value="baseURL + '/@' + creatorProfileStore.creator.slug"
:size="200"
level="H"
render-as="svg"
class="qr-code"
/>
<button
v-if="creatorProfileStore.creator"
class="download-button"
@click="downloadQRCode"
>
<v-icon>mdi-download</v-icon>
<QRCodeVue v-if="creatorProfileStore.creator" :value="baseURL + '/@' + creatorProfileStore.creator.slug"
:size="200" level="H" render-as="svg" class="qr-code" />
<button v-if="creatorProfileStore.creator" class="download-button" @click="downloadQRCode">
<v-icon :icon="mdiDownload" />
{{ t('downloadQRCode') }}
</button>
</div>
@@ -459,14 +472,11 @@ async function deconfigureStripe() {
{{ t('dangerZoneWarning') }}
</span>
<div class="p-2">
<button v-if="!creatorProfileStore.creator.isDeleted"
class="primary danger-action"
@click="deleteDialogShown = true">
<button v-if="!creatorProfileStore.creator.isDeleted" class="primary danger-action"
@click="deleteDialogShown = true">
{{ t('deleteCreatorPage') }}
</button>
<button v-else
class="primary safe-action"
@click="restoreDialogShown = true">
<button v-else class="primary safe-action" @click="restoreDialogShown = true">
{{ t('restoreCreatorPage') }}
</button>
</div>
@@ -478,27 +488,16 @@ async function deconfigureStripe() {
</div>
<v-dialog v-model="dialogEditFullnameShown">
<FullnameDialog
:firstname="userProfileStore.user.firstname"
:lastname="userProfileStore.user.lastname"
@close="handleCloseEditFullname"
@save="handleSaveEditFullname"
/>
<FullnameDialog :firstname="userProfileStore.user.firstname" :lastname="userProfileStore.user.lastname"
@close="handleCloseEditFullname" @save="handleSaveEditFullname" />
</v-dialog>
<v-dialog v-model="dialogEditAliasShown">
<alias-dialog
:alias="userProfileStore.user.alias"
@close="handleCloseEditAlias"
@save="handleSaveEditAlias"
></alias-dialog>
<alias-dialog :alias="userProfileStore.user.alias" @close="handleCloseEditAlias"
@save="handleSaveEditAlias"></alias-dialog>
</v-dialog>
<v-dialog v-model="dialogShown">
<component
:is="currentComponent"
:creator="creatorProfileStore.creator"
:email="userProfileStore.user.email"
@closeRequested="closeDialog"
></component>
<component :is="currentComponent" :creator="creatorProfileStore.creator" :email="userProfileStore.user.email"
@closeRequested="closeDialog"></component>
</v-dialog>
<v-dialog v-model="restoreDialogShown">
<div class="card dialog">
@@ -760,4 +759,4 @@ async function deconfigureStripe() {
"deconfigureStripe": "Eliminar Stripe"
}
}
</i18n>
</i18n>