chore/gui-v2-user-management-removed-copyTextToClipboard-miscUtils

packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ApiTokenType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
+import { useClipboard } from '@vueuse/core'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import MdiPlusIcon from '~icons/mdi/plus'
 import CloseIcon from '~icons/material-symbols/close-rounded'
@@ -10,7 +11,6 @@ import VisibilityCloseIcon from '~icons/material-symbols/visibility-off'
 import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import MdiContentCopyIcon from '~icons/mdi/content-copy'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { copyTextToClipboard } from '~/utils/miscUtils'
 
 const toast = useToast()
 
@@ -20,6 +20,7 @@ interface ApiToken extends ApiTokenType {
 
 const { $api, $e } = useNuxtApp()
 const { project } = $(useProject())
+const { copy } = useClipboard()
 
 let tokensInfo = $ref<ApiToken[] | undefined>([])
 let showNewTokenModal = $ref(false)
@@ -40,7 +41,7 @@ const openNewTokenModal = () => {
 const copyToken = (token: string | undefined) => {
   if (!token) return
 
-  copyTextToClipboard(token)
+  copy(token)
   toast.info('Copied to clipboard')
 
   $e('c:api-token:copy')
@@ -165,7 +166,7 @@ onMounted(() => {
             </a-tooltip>
             <a-tooltip placement="bottom">
               <template #title> Copy token to clipboard </template>
-              <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
+              <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
                 <template #icon>
                   <MdiContentCopyIcon height="1rem" class="flex mx-auto" />
                 </template>

packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue

@@ -7,7 +7,7 @@ import MidAccountIcon from '~icons/mdi/account-outline'
 import ReloadIcon from "~icons/mdi/reload"
 import MdiEditIcon from '~icons/ic/round-edit'
 import SearchIcon from '~icons/ic/round-search'
-import { copyTextToClipboard } from '~/utils/miscUtils'
+import { useClipboard } from '@vueuse/core'
 import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import EmailIcon from '~icons/eva/email-outline'
 import MdiPlusIcon from '~icons/mdi/plus'
@@ -22,6 +22,7 @@ const toast = useToast()
 
 const { $api, $e } = useNuxtApp()
 const { project } = useProject()
+const { copy } = useClipboard()
 
 let users = $ref<null | User[]>(null)
 let selectedUser = $ref<null | User>(null)
@@ -122,7 +123,7 @@ const copyInviteUrl = (user: User) => {
 
   const getInviteUrl = (token: string) => `${location.origin}${location.pathname}#/user/authentication/signup/${token}`;
 
-  copyTextToClipboard(getInviteUrl(user.invite_token) );
+  copy(getInviteUrl(user.invite_token) );
   toast.success('Invite url copied to clipboard');
 }
 

packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
+import { useClipboard } from '@vueuse/core'
 import OpenInNewIcon from '~icons/mdi/open-in-new'
 import { dashboardUrl } from '~/utils/urlUtils'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@@ -7,7 +8,6 @@ import MdiReload from '~icons/mdi/reload'
 import DownIcon from '~icons/ic/round-keyboard-arrow-down'
 import ContentCopyIcon from '~icons/mdi/content-copy'
 import MdiXmlIcon from '~icons/mdi/xml'
-import { copyTextToClipboard } from '~/utils/miscUtils'
 const toast = useToast()
 
 interface ShareBase {
@@ -25,6 +25,7 @@ const { $api, $e } = useNuxtApp()
 let base = $ref<null | ShareBase>(null)
 const showEditBaseDropdown = $ref(false)
 const { project } = useProject()
+const { copy } = useClipboard()
 
 const url = $computed(() => (base && base.uuid ? `${dashboardUrl()}#/nc/base/${base.uuid}` : null))
 
@@ -95,7 +96,7 @@ const recreate = async () => {
 const copyUrl = async () => {
   if (!url) return
 
-  copyTextToClipboard(url)
+  copy(url)
   toast.success('Copied shareable base url to clipboard!')
 
   $e('c:shared-base:copy-url')
@@ -112,7 +113,7 @@ const navigateToSharedBase = () => {
 const generateEmbeddableIframe = () => {
   if (!url) return
 
-  copyTextToClipboard(`<iframe
+  copy(`<iframe
 class="nc-embed"
 src="${url}?embed"
 frameborder="0"

packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
 import { Form } from 'ant-design-vue'
+import { useClipboard } from '@vueuse/core'
 import ShareBase from './ShareBase.vue'
 import SendIcon from '~icons/material-symbols/send-outline'
 import CloseIcon from '~icons/material-symbols/close-rounded'
@@ -9,7 +10,6 @@ import ContentCopyIcon from '~icons/mdi/content-copy'
 import type { User } from '~/lib/types'
 import { ProjectRole } from '~/lib/enums'
 import { projectRoleTagColors } from '~/utils/userUtils'
-import { copyTextToClipboard } from '~/utils/miscUtils'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { isEmail } from '~/utils/validation'
 
@@ -30,6 +30,7 @@ const toast = useToast()
 
 const { project } = useProject()
 const { $api, $e } = useNuxtApp()
+const { copy } = useClipboard()
 
 const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Guest, invitationToken: undefined })
 const formRef = ref()
@@ -107,7 +108,7 @@ const inviteUrl = $computed(() =>
 const copyUrl = async () => {
   if (!inviteUrl) return
 
-  copyTextToClipboard(inviteUrl)
+  copy(inviteUrl)
   toast.success('Copied shareable base url to clipboard!')
 
   $e('c:shared-base:copy-url')

packages/nc-gui-v2/utils/miscUtils.ts

@@ -1,56 +0,0 @@
-export const copyTextToClipboard = (text: string) => {
-  const textArea = document.createElement('textarea')
-
-  //
-  // *** This styling is an extra step which is likely not required. ***
-  //
-  // Why is it here? To ensure:
-  // 1. the element is able to have focus and selection.
-  // 2. if element was to flash render it has minimal visual impact.
-  // 3. less flakyness with selection and copying which **might** occur if
-  //    the textarea element is not visible.
-  //
-  // The likelihood is the element won't even render, not even a
-  // flash, so some of these are just precautions. However in
-  // Internet Explorer the element is visible whilst the popup
-  // box asking the user for permission for the web page to
-  // copy to the clipboard.
-  //
-
-  // Place in top-left corner of screen regardless of scroll position.
-  textArea.style.position = 'fixed'
-  textArea.style.top = '0'
-  textArea.style.left = '0'
-
-  // Ensure it has a small width and height. Setting to 1px / 1em
-  // doesn't work as this gives a negative w/h on some browsers.
-  textArea.style.width = '2em'
-  textArea.style.height = '2em'
-
-  // We don't need padding, reducing the size if it does flash render.
-  textArea.style.padding = '0'
-
-  // Clean up any borders.
-  textArea.style.border = 'none'
-  textArea.style.outline = 'none'
-  textArea.style.boxShadow = 'none'
-
-  // Avoid flash of white box if rendered for any reason.
-  textArea.style.background = 'transparent'
-
-  textArea.addEventListener('focusin', (e) => e.stopPropagation())
-
-  textArea.value = text
-
-  document.body.appendChild(textArea)
-  textArea.focus()
-  textArea.select()
-
-  try {
-    document.execCommand('copy')
-  } catch (err) {
-    console.log('Oops, unable to copy')
-  }
-
-  document.body.removeChild(textArea)
-}