fix: download links and base64 links in ios instead of copying

Author: x0sina

dashboard/src/components/ActionButtons.tsx

@@ -235,9 +235,21 @@ const ActionButtons: FC<ActionButtonsProps> = ({ user }) => {
 
   const handleLinksCopy = async (subLink: SubscribeLink) => {
     try {
-      const content = await fetchContent(subLink.link)
-      copy(content)
-      toast.success(t('usersTable.copied', { defaultValue: 'Copied to clipboard' }))
+      if (isIOS()) {
+        // iOS: redirect/open in new tab instead of copying
+        const newWindow = window.open(subLink.link, '_blank')
+        if (!newWindow) {
+          const content = await fetchContent(subLink.link)
+          showManualCopyAlert(content, 'url')
+        } else {
+          toast.success(t('downloadSuccess', { defaultValue: 'Configuration opened in new tab' }))
+        }
+      } else {
+        // Non-iOS: copy content as before
+        const content = await fetchContent(subLink.link)
+        await copy(content)
+        toast.success(t('usersTable.copied', { defaultValue: 'Copied to clipboard' }))
+      }
     } catch (error) {
       console.error('Failed to fetch and copy content:', error)
       // Fallback: copy the URL instead
@@ -247,7 +259,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({ user }) => {
 
   const handleUrlCopy = async (url: string) => {
     try {
-      copy(url)
+      await copy(url)
       toast.success(t('usersTable.copied', { defaultValue: 'URL copied to clipboard' }))
     } catch (error) {
       toast.error(t('copyFailed', { defaultValue: 'Failed to copy content' }))

dashboard/src/components/CopyButton.tsx

@@ -19,10 +19,10 @@ export function CopyButton({ value, className, copiedMessage = 'Copied!', defaul
 
   const { copy, copied } = useClipboard({ timeout: 1500 })
   const handleCopy = useCallback(
-    (e: React.MouseEvent) => {
+    async (e: React.MouseEvent) => {
       e.preventDefault()
       e.stopPropagation()
-      copy(value)
+      await copy(value)
       onClick?.(e)
     },
     [copy, value, onClick],

dashboard/src/components/dialogs/UserAllIPsModal.tsx

@@ -32,8 +32,8 @@ const NodeIPCard = React.memo(({ nodeId, nodeName, ips }: NodeIPCardProps) => {
   const { copy } = useClipboard()
 
   const handleCopyIP = useCallback(
-    (ip: string) => {
-      copy(ip)
+    async (ip: string) => {
+      await copy(ip)
       toast.success(t('userAllIPs.ipCopied', { defaultValue: 'IP address copied to clipboard' }))
     },
     [copy, t],

dashboard/src/components/ui/variables-popover.tsx

@@ -20,8 +20,8 @@ export function VariablesPopover({ includeProtocolTransport = false, side = 'rig
   const { t } = useTranslation()
   const { copy } = useClipboard()
 
-  const handleCopy = (text: string) => {
-    copy(text)
+  const handleCopy = async (text: string) => {
+    await copy(text)
     toast.success(t('usersTable.copied'))
   }
 
@@ -82,8 +82,8 @@ export function VariablesList({ includeProtocolTransport = false }: { includePro
   const { t } = useTranslation()
   const { copy } = useClipboard()
 
-  const handleCopy = (text: string) => {
-    copy(text)
+  const handleCopy = async (text: string) => {
+    await copy(text)
     toast.success(t('usersTable.copied'))
   }
 

dashboard/src/hooks/use-clipboard.ts

@@ -1,15 +1,23 @@
 import { useState, useCallback } from 'react'
 
-function copyToClipboard(text: string): boolean {
+async function copyToClipboard(text: string): Promise<boolean> {
+  // Try modern clipboard API first (required for iOS)
   if (navigator.clipboard && window.isSecureContext) {
-    navigator.clipboard.writeText(text)
-    return true
+    try {
+      await navigator.clipboard.writeText(text)
+      return true
+    } catch (err) {
+      console.error('Clipboard API failed:', err)
+      // Fall through to fallback method
+    }
   }
 
+  // Fallback: use execCommand for older browsers
   const input = document.createElement('input')
   input.value = text
   input.style.position = 'fixed'
   input.style.left = '-9999px'
+  input.style.top = '-9999px'
   document.body.appendChild(input)
   input.focus()
   input.select()
@@ -36,12 +44,19 @@ export function useClipboard({ timeout = 1500 } = {}) {
   }
 
   const copy = useCallback(
-    (text: string) => {
-      const success = copyToClipboard(text)
-      if (success) {
-        handleCopyResult(true)
-      } else {
-        setError(new Error('useClipboard: copyToClipboard failed'))
+    async (text: string) => {
+      try {
+        const success = await copyToClipboard(text)
+        if (success) {
+          handleCopyResult(true)
+          setError(null)
+        } else {
+          setError(new Error('useClipboard: copyToClipboard failed'))
+          handleCopyResult(false)
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('useClipboard: copyToClipboard failed'))
+        handleCopyResult(false)
       }
     },
     [timeout],

dashboard/src/pages/_dashboard._index.tsx

@@ -243,9 +243,9 @@ const Dashboard = () => {
     queryClient.invalidateQueries({ queryKey: ['/api/users/'] })
   }
 
-  const handleCreateUserSuccess = (user: UserResponse) => {
+  const handleCreateUserSuccess = async (user: UserResponse) => {
     if (user.subscription_url) {
-      copy(user.subscription_url)
+      await copy(user.subscription_url)
       toast.success(t('userSettings.subscriptionUrlCopied'))
     }
     refreshAllUserData()