From fd0a84933698dce39697b613778d5ce1a0c1fd2f Mon Sep 17 00:00:00 2001
From: Mike <mike.tasset@gmail.com>
Date: Tue, 30 Jul 2024 09:26:42 +0200
Subject: [PATCH] Feat: Add distinct/user ID to settings (#2539)

---
 .../components/settings/user/Profile.vue      | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-2/components/settings/user/Profile.vue b/packages/frontend-2/components/settings/user/Profile.vue
index 211e7cf38..f456bcff4 100644
--- a/packages/frontend-2/components/settings/user/Profile.vue
+++ b/packages/frontend-2/components/settings/user/Profile.vue
@@ -7,6 +7,23 @@
       <SettingsUserProfileChangePassword :user="user" />
       <hr class="my-6 md:my-10" />
       <SettingsUserProfileDeleteAccount :user="user" />
+      <hr class="my-6 md:my-10" />
+      <div class="text-xs text-foreground-2 w-full flex flex-col space-y-2">
+        <div class="flex">
+          User ID: #{{ user.id }}
+          <ClipboardIcon
+            class="w-4 h-4 ml-2 cursor-pointer hover:text-foreground transition"
+            @click="copyUserId"
+          />
+        </div>
+        <div v-if="distinctId" class="flex">
+          {{ distinctId }}
+          <ClipboardIcon
+            class="w-4 h-4 ml-2 cursor-pointer hover:text-foreground transition"
+            @click="copyDistinctId"
+          />
+        </div>
+      </div>
     </div>
   </section>
 </template>
@@ -14,6 +31,8 @@
 <script setup lang="ts">
 import { graphql } from '~~/lib/common/generated/gql'
 import type { SettingsUserProfile_UserFragment } from '~~/lib/common/generated/gql/graphql'
+import { useActiveUser } from '~/lib/auth/composables/activeUser'
+import { ClipboardIcon } from '@heroicons/vue/24/outline'
 
 graphql(`
   fragment SettingsUserProfile_User on User {
@@ -23,7 +42,21 @@ graphql(`
   }
 `)
 
-defineProps<{
+const { distinctId } = useActiveUser()
+
+const props = defineProps<{
   user: SettingsUserProfile_UserFragment
 }>()
+
+const { copy } = useClipboard()
+
+const copyUserId = () => {
+  copy(props.user.id)
+}
+
+const copyDistinctId = () => {
+  if (distinctId.value) {
+    copy(distinctId.value)
+  }
+}
 </script>