diff --git a/src/routes/settings.tsx b/src/routes/settings.tsx index 1351354..ff13c83 100644 --- a/src/routes/settings.tsx +++ b/src/routes/settings.tsx @@ -3,12 +3,40 @@ import QRCode from "qrcode" import { useEffect, useState, useRef } from "react" import { APP_CONFIG, THEMES } from "../config" import serverConfig from "../server-config.json" +import { t } from "../utils/i18n" export const Route = createFileRoute("/settings")({ component: SettingsPage, }) +const copyWithFallback = (text: string) => { + const textArea = document.createElement("textarea") + textArea.value = text + textArea.setAttribute("readonly", "") + textArea.style.position = "absolute" + textArea.style.left = "-9999px" + + document.body.appendChild(textArea) + textArea.select() + textArea.setSelectionRange(0, text.length) + + try { + return document.execCommand("copy") + } finally { + document.body.removeChild(textArea) + } +} + function SettingsPage() { const [ip, setIp] = useState("") + const [copied, setCopied] = useState(false) + const [copyError, setCopyError] = useState("") + const copyTimerRef = useRef | null>(null) + + useEffect(() => { + return () => { + if (copyTimerRef.current) clearTimeout(copyTimerRef.current) + } + }, []) const [frontendPort, setFrontendPort] = useState("") const [originalPort] = useState(String(serverConfig.frontendPort)) const serverConfigChanged = @@ -356,12 +384,57 @@ function SettingsPage() { )} - - {shareUrl.replace(`${protocol}//`, "")} - +
+ + {shareUrl.replace(`${protocol}//`, "")} + + + {copyError && ( +

+ {copyError} +

+ )} +
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts index a71de6a..2ecd32a 100644 --- a/src/utils/i18n.ts +++ b/src/utils/i18n.ts @@ -4,6 +4,12 @@ export const i18n = { en: { + settings: { + copyLink: "Copy Link", + copied: "Copied!", + copyFailed: + "Could not copy the link automatically. Please copy it manually.", + }, screenMirror: { ariaLabel: "Remote desktop screen share", connecting: "Connecting to host...",