From f4e12cd4fa813dd6e21704e7037c6f2d10770714 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Thu, 24 Apr 2025 04:58:19 -0400
Subject: [PATCH] feat: Implement URL copy functionality for creator profile
 and update email handling in EmailDialog.vue

---
 frontend/src/views/profile/ProfilePage.vue    | 57 ++++++++++++++++++-
 .../src/views/profile/account/EmailDialog.vue |  6 +-
 2 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue
index 34bb0d9..b506fd7 100644
--- a/frontend/src/views/profile/ProfilePage.vue
+++ b/frontend/src/views/profile/ProfilePage.vue
@@ -30,6 +30,23 @@ const creatorProfileStore = useCreatorProfileStore();
 const baseURL = window.location.origin;
 const client = useClient();
 
+// Copy URL state
+const copySuccess = ref(false);
+const copyButtonRef = ref(null);
+
+async function copyCreatorUrl() {
+  try {
+    const url = `${baseURL}/@${creatorProfileStore.creator.slug}`;
+    await navigator.clipboard.writeText(url);
+    copySuccess.value = true;
+    setTimeout(() => {
+      copySuccess.value = false;
+    }, 2000);
+  } catch (err) {
+    console.error('Failed to copy:', err);
+  }
+}
+
 // ### Fullname
 const dialogEditFullnameShown = ref(false)
 
@@ -73,8 +90,8 @@ function handleCloseEditEmail() {
   dialogEditEmailShown.value = false
 }
 
-function handleSaveEditEmail(firstname, lastname) {
-  userProfileStore.changeEmail(firstname, lastname)
+function handleSaveEditEmail(email) {
+  userProfileStore.changeEmail(email)
   dialogEditEmailShown.value = false
 }
 
@@ -245,7 +262,15 @@ async function deconfigureStripe() {
 
             <button class="action" @click="openDialog('ChangeSlugDialog')">
               <span class="label">{{ t('handle') }}</span>
-              <span class="value">@{{ creatorProfileStore.creator.slug }}</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>
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
 
@@ -522,6 +547,32 @@ async function deconfigureStripe() {
   @apply flex items-center justify-start;
 }
 
+.copy-button {
+  @apply ml-2 p-1 rounded-full hover:bg-hSurface;
+  @apply transition-all duration-300;
+  @apply relative overflow-hidden;
+}
+
+.copy-button::after {
+  content: '';
+  @apply absolute inset-0 bg-white/20;
+  @apply scale-0 rounded-full;
+  @apply transition-transform duration-300;
+}
+
+.copy-button:active::after {
+  @apply scale-150;
+  @apply opacity-0;
+}
+
+.copy-button.success {
+  @apply bg-green-500/20;
+}
+
+.copy-button:hover {
+  @apply bg-hSurface;
+}
+
 .value {
   @apply text-hOnBackground flex-1 text-center;
   @apply flex items-center justify-center;
diff --git a/frontend/src/views/profile/account/EmailDialog.vue b/frontend/src/views/profile/account/EmailDialog.vue
index d31a3ae..f691c2a 100644
--- a/frontend/src/views/profile/account/EmailDialog.vue
+++ b/frontend/src/views/profile/account/EmailDialog.vue
@@ -35,9 +35,6 @@ const props = defineProps({
   email: {
     required: true,
     type: String
-  },
-  creator: {
-    required: true
   }
 });
 
@@ -49,12 +46,11 @@ const client = useClient();
 const save = async () => {
   try {
     await client.post(
-        `/api/creators/${props.creator.id}/email`,
+        `/api/users/email`,
         {
           email: email.value
         });
 
-    props.creator.email = email.value;
     emits('closeRequested');
   } catch (error) {
     console.error(error);