@electerm/electerm-react 3.3.8 → 3.6.6

package/client/components/rdp/rdp-session.jsx

@@ -8,23 +8,30 @@ import {
 } from '../../common/constants'
 import {
   ReloadOutlined,
-  EditOutlined
+  EditOutlined,
+  UploadOutlined,
+  DownloadOutlined
 } from '@ant-design/icons'
 import {
   Spin,
   Select,
-  Switch
+  Switch,
+  Tooltip
 } from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import scanCode from './code-scan'
 import resolutions from './resolutions'
 import { readClipboardAsync } from '../../common/clipboard'
 import RemoteFloatControl from '../common/remote-float-control'
+import HelpIcon from '../common/help-icon'
+import { FileTransferManager, createFileLogger } from './file-transfer'
+import { notification } from '../common/notification'
+import message from '../common/message'
+import ShowItem from '../common/show-item'
 import './rdp.styl'
 
 const { Option } = Select
 
-// IronRDP WASM module imports — loaded dynamically
 async function loadWasmModule () {
   if (window.ironRdp) return
   console.debug('[RDP-CLIENT] Loading IronRDP WASM module...')
@@ -55,9 +62,15 @@ export default class RdpSession extends PureComponent {
     this.state = {
       loading: false,
       scaleViewport,
-      ...resObj
+      ...resObj,
+      hasRemoteFiles: false,
+      downloadBtnDisabled: true,
+      uploadReady: false
     }
     this.session = null
+    this.fileTransfer = null
+    this.fileUploadInProgress = false
+    this.log = createFileLogger()
   }
 
   componentDidMount () {
@@ -69,16 +82,18 @@ export default class RdpSession extends PureComponent {
   }
 
   cleanup = () => {
-    console.debug('[RDP-CLIENT] cleanup() called')
     if (this.session) {
       try {
         this.session.shutdown()
-        console.debug('[RDP-CLIENT] session.shutdown() called')
       } catch (e) {
-        console.debug('[RDP-CLIENT] session.shutdown() error:', e)
+        this.log(`session.shutdown() error: ${e.message}`, 'error')
       }
       this.session = null
     }
+    if (this.fileTransfer) {
+      this.fileTransfer.cleanup()
+      this.fileTransfer = null
+    }
   }
 
   runInitScript = () => { }
@@ -126,7 +141,6 @@ export default class RdpSession extends PureComponent {
       ...tab
     })
 
-    console.debug('[RDP-CLIENT] Creating RDP session term, host=', tab.host, 'port=', tab.port)
     const r = await createTerm(opts)
       .catch(err => {
         const text = err.message
@@ -135,7 +149,6 @@ export default class RdpSession extends PureComponent {
     if (!r) {
       this.setState({ loading: false })
       this.setStatus(statusMap.error)
-      console.error('[RDP-CLIENT] createTerm failed')
       return
     }
 
@@ -143,18 +156,15 @@ export default class RdpSession extends PureComponent {
       pid, port
     } = r
     this.pid = pid
-    console.debug('[RDP-CLIENT] Term created, pid=', pid, 'port=', port)
 
-    // Build the WebSocket proxy address for IronRDP WASM
     const { width, height } = this.state
-    // IronRDP connects to the proxy address, which then proxies via RDCleanPath
     const extra = `&width=${width}&height=${height}`
     const proxyAddress = this.buildWsUrl(port, 'rdp', extra)
-    // Load WASM module if not already loaded
+
     try {
       await loadWasmModule()
     } catch (e) {
-      console.error('[RDP-CLIENT] Failed to load WASM module:', e)
+      this.log(`Failed to load WASM module: ${e.message}`, 'error')
       this.setState({ loading: false })
       this.setStatus(statusMap.error)
       return
@@ -162,11 +172,10 @@ export default class RdpSession extends PureComponent {
 
     this.setStatus(statusMap.success)
 
-    // Connect using IronRDP SessionBuilder
     try {
       const canvas = this.canvasRef.current
       if (!canvas) {
-        console.error('[RDP-CLIENT] Canvas ref not available')
+        this.log('Canvas ref not available', 'error')
         this.setState({ loading: false })
         return
       }
@@ -177,12 +186,6 @@ export default class RdpSession extends PureComponent {
       const username = tab.username || ''
       const password = tab.password || ''
 
-      console.debug('[RDP-CLIENT] Building IronRDP session...')
-      console.debug('[RDP-CLIENT] destination:', destination)
-      console.debug('[RDP-CLIENT] username:', username)
-      console.debug('[RDP-CLIENT] proxyAddress:', proxyAddress)
-      console.debug('[RDP-CLIENT] desktopSize:', width, 'x', height)
-
       const desktopSize = new window.ironRdp.DesktopSize(width, height)
       const enableCredsspExt = new window.ironRdp.Extension('enable_credssp', true)
 
@@ -196,7 +199,40 @@ export default class RdpSession extends PureComponent {
       builder.renderCanvas(canvas)
       builder.extension(enableCredsspExt)
 
-      // Clipboard callbacks
+      this.fileTransfer = new FileTransferManager(
+        () => this.session,
+        this.log,
+        (inProgress) => {
+          this.fileUploadInProgress = inProgress
+        },
+        () => {
+          this.setState({ uploadReady: false })
+        },
+        (filePath, fileName, fileSize) => {
+          notification.success({
+            message: 'File downloaded from remote',
+            description: (
+              <ShowItem to={filePath}>
+                {`${fileName} (${this.fileTransfer.formatFileSize(fileSize)})`}
+              </ShowItem>
+            ),
+            duration: 0
+          })
+        }
+      )
+
+      this.fileTransfer.setStateChangeCallback((state) => {
+        this.setState({
+          hasRemoteFiles: state.hasRemoteFiles,
+          downloadBtnDisabled: !state.hasRemoteFiles
+        })
+      })
+
+      const fileTransferExtensions = this.fileTransfer.createExtensions()
+      fileTransferExtensions.forEach((ext) => {
+        builder.extension(ext)
+      })
+
       builder.remoteClipboardChangedCallback((clipboardData) => {
         try {
           if (clipboardData.isEmpty()) {
@@ -204,14 +240,14 @@ export default class RdpSession extends PureComponent {
           }
           const items = clipboardData.items()
           for (const item of items) {
-            if (item.mimeType() === 'text/plain') {
+            const mimeType = item.mimeType()
+            if (mimeType === 'text/plain') {
               const text = item.value()
-              console.debug('[RDP-CLIENT] Received clipboard text:', text)
               window.pre.writeClipboard(text)
             }
           }
         } catch (e) {
-          console.error('[RDP-CLIENT] Clipboard error:', e)
+          this.log(`Clipboard error: ${e.message}`, 'error')
         }
       })
 
@@ -219,19 +255,15 @@ export default class RdpSession extends PureComponent {
         this.syncLocalToRemote()
       })
 
-      // Cursor style callback
       builder.setCursorStyleCallbackContext(canvas)
       builder.setCursorStyleCallback(function (style) {
         canvas.style.cursor = style || 'default'
       })
 
-      console.debug('[RDP-CLIENT] Calling builder.connect()...')
       this.session = await builder.connect()
 
       const ds = this.session.desktopSize()
-      console.debug('[RDP-CLIENT] Connected! Desktop:', ds.width, 'x', ds.height)
 
-      // Update canvas size to match actual desktop size
       canvas.width = ds.width
       canvas.height = ds.height
 
@@ -241,17 +273,15 @@ export default class RdpSession extends PureComponent {
 
       canvas.focus()
 
-      // Run the session event loop (renders frames, handles protocol)
-      console.debug('[RDP-CLIENT] Starting session.run() event loop')
       this.session.run().then((info) => {
-        console.debug('[RDP-CLIENT] Session ended:', info.reason())
+        this.log(`Session ended: ${info.reason()}`, 'info')
         this.onSessionEnd()
       }).catch((e) => {
-        console.error('[RDP-CLIENT] Session error:', this.formatError(e))
+        this.log(`Session error: ${this.formatError(e)}`, 'error')
         this.onSessionEnd()
       })
     } catch (e) {
-      console.error('[RDP-CLIENT] Connection failed:', this.formatError(e))
+      this.log(`Connection failed: ${this.formatError(e)}`, 'error')
       this.setState({ loading: false })
       this.setStatus(statusMap.error)
     }
@@ -278,7 +308,9 @@ export default class RdpSession extends PureComponent {
   }
 
   syncLocalToRemote = async () => {
-    if (!this.session) return
+    if (!this.session || this.fileUploadInProgress) {
+      return
+    }
     try {
       const text = await readClipboardAsync()
       if (text) {
@@ -287,12 +319,11 @@ export default class RdpSession extends PureComponent {
         await this.session.onClipboardPaste(data)
       }
     } catch (e) {
-      console.error('[RDP-CLIENT] Local clipboard sync error:', e)
+      this.log(`Local clipboard sync error: ${e.message}`, 'error')
     }
   }
 
   onSessionEnd = () => {
-    console.debug('[RDP-CLIENT] onSessionEnd called')
     this.session = null
     this.setStatus(statusMap.error)
   }
@@ -301,7 +332,6 @@ export default class RdpSession extends PureComponent {
     const canvas = this.canvasRef.current
     if (!canvas || this._inputHandlersSetup) return
     this._inputHandlersSetup = true
-    console.debug('[RDP-CLIENT] Setting up input handlers')
 
     canvas.addEventListener('keydown', (e) => {
       e.preventDefault()
@@ -315,7 +345,7 @@ export default class RdpSession extends PureComponent {
         tx.addEvent(event)
         this.session.applyInputs(tx)
       } catch (err) {
-        console.error('[RDP-CLIENT] Key press error:', err)
+        this.log(`Key press error: ${err.message}`, 'error')
       }
     })
 
@@ -331,7 +361,7 @@ export default class RdpSession extends PureComponent {
         tx.addEvent(event)
         this.session.applyInputs(tx)
       } catch (err) {
-        console.error('[RDP-CLIENT] Key release error:', err)
+        this.log(`Key release error: ${err.message}`, 'error')
       }
     })
 
@@ -381,7 +411,7 @@ export default class RdpSession extends PureComponent {
         tx.addEvent(event)
         this.session.applyInputs(tx)
       } catch (err) {
-        console.error('[RDP-CLIENT] Mouse down error:', err)
+        this.log(`Mouse down error: ${err.message}`, 'error')
       }
     })
 
@@ -394,7 +424,7 @@ export default class RdpSession extends PureComponent {
         tx.addEvent(event)
         this.session.applyInputs(tx)
       } catch (err) {
-        console.error('[RDP-CLIENT] Mouse up error:', err)
+        this.log(`Mouse up error: ${err.message}`, 'error')
       }
     })
 
@@ -417,14 +447,15 @@ export default class RdpSession extends PureComponent {
           this.session.applyInputs(tx)
         }
       } catch (err) {
-        console.error('[RDP-CLIENT] Wheel error:', err)
+        this.log(`Wheel error: ${err.message}`, 'error')
       }
     }, { passive: false })
 
     canvas.addEventListener('contextmenu', (e) => e.preventDefault())
 
-    canvas.addEventListener('paste', () => {
-      this.syncLocalToRemote()
+    canvas.addEventListener('paste', (e) => {
+      e.preventDefault()
+      this.handlePasteEvent()
     })
 
     canvas.addEventListener('focus', () => {
@@ -432,7 +463,6 @@ export default class RdpSession extends PureComponent {
     })
   }
 
-  // Get PS/2 scancode from keyboard event code using existing code-scan module
   getScancode = (code) => {
     const sc = scanCode({ code })
     return sc !== undefined ? sc : null
@@ -443,7 +473,6 @@ export default class RdpSession extends PureComponent {
   }
 
   handleReInit = () => {
-    console.debug('[RDP-CLIENT] handleReInit called')
     this.cleanup()
     this.props.reloadTab(
       this.props.tab
@@ -492,9 +521,9 @@ export default class RdpSession extends PureComponent {
     return {
       isFullScreen: this.props.fullscreen,
       onSendCtrlAltDel: this.handleSendCtrlAltDel,
-      screens: [], // RDP doesn't have multi-screen support like VNC
+      screens: [],
       currentScreen: null,
-      onSelectScreen: () => { }, // No-op for RDP
+      onSelectScreen: () => { },
       fixedPosition,
       showExitFullscreen,
       className
@@ -504,37 +533,87 @@ export default class RdpSession extends PureComponent {
   handleSendCtrlAltDel = () => {
     if (!this.session) return
     try {
-      // Send Ctrl+Alt+Del sequence using IronRDP
       const tx = new window.ironRdp.InputTransaction()
-
-      // Ctrl key press
-      const ctrlScancode = 0x1D // Left Ctrl scancode
+      const ctrlScancode = 0x1D
       tx.addEvent(window.ironRdp.DeviceEvent.keyPressed(ctrlScancode))
-
-      // Alt key press
-      const altScancode = 0x38 // Left Alt scancode
+      const altScancode = 0x38
       tx.addEvent(window.ironRdp.DeviceEvent.keyPressed(altScancode))
-
-      // Del key press
-      const delScancode = 0x53 // Delete scancode
+      const delScancode = 0x53
       tx.addEvent(window.ironRdp.DeviceEvent.keyPressed(delScancode))
-
-      // Del key release
       tx.addEvent(window.ironRdp.DeviceEvent.keyReleased(delScancode))
-
-      // Alt key release
       tx.addEvent(window.ironRdp.DeviceEvent.keyReleased(altScancode))
-
-      // Ctrl key release
       tx.addEvent(window.ironRdp.DeviceEvent.keyReleased(ctrlScancode))
-
       this.session.applyInputs(tx)
-      console.log('[RDP-CLIENT] Sent Ctrl+Alt+Del')
     } catch (err) {
-      console.error('[RDP-CLIENT] Failed to send Ctrl+Alt+Del:', err)
+      this.log(`Failed to send Ctrl+Alt+Del: ${err.message}`, 'error')
     }
   }
 
+  handleUploadButtonClick = async () => {
+    const properties = [
+      'openFile',
+      'multiSelections',
+      'showHiddenFiles',
+      'noResolveAliases',
+      'treatPackageAsDirectory',
+      'dontAddToRecent'
+    ]
+
+    const files = await window.api.openDialog({
+      title: 'Choose files to upload to remote desktop',
+      message: 'Choose files to upload',
+      properties
+    }).catch((err) => {
+      this.log(`File dialog error: ${err.message}`, 'error')
+      return false
+    })
+
+    if (!files || !files.length) {
+      return
+    }
+
+    message.info('Ready to paste on remote to upload files', 5)
+    this.setState({ uploadReady: true })
+
+    if (this.fileTransfer) {
+      await this.fileTransfer.uploadFromPaths(files)
+    }
+  }
+
+  handleDownloadButtonClick = () => {
+    if (this.fileTransfer) {
+      this.fileTransfer.downloadFiles()
+    }
+  }
+
+  handlePasteEvent = async () => {
+    const text = await readClipboardAsync()
+
+    if (!text) {
+      this.syncLocalToRemote()
+      return
+    }
+
+    const fileRegWin = /^\w:\\.+/
+    const fileReg = /^\/.+/
+    const lines = text.split('\n')
+
+    const filePaths = lines.filter(line => fileReg.test(line) || fileRegWin.test(line))
+
+    if (filePaths.length === 0) {
+      this.syncLocalToRemote()
+      return
+    }
+
+    if (this.fileTransfer) {
+      await this.fileTransfer.uploadFromPaths(filePaths)
+    }
+  }
+
+  componentDidUpdate () {
+    this.setupInputHandlers()
+  }
+
   renderControl = () => {
     const contrlProps = this.getControlProps({
       fixedPosition: false,
@@ -542,7 +621,9 @@ export default class RdpSession extends PureComponent {
       className: 'mg1l'
     })
     const {
-      id
+      id,
+      hasRemoteFiles,
+      uploadReady
     } = this.state
     const sleProps = {
       value: id,
@@ -556,6 +637,8 @@ export default class RdpSession extends PureComponent {
       checkedChildren: window.translate('scaleViewport'),
       className: 'mg1l'
     }
+    const uploadTitle = window.translate('upload') || 'Upload files to remote'
+    const downloadTitle = window.translate('download') || 'Download files from remote'
     return (
       <div
         className='pd1 fix session-v-info block'
@@ -587,10 +670,25 @@ export default class RdpSession extends PureComponent {
             className='mg2r mg1l pointer'
           />
           {this.renderInfo()}
-          {this.renderHelp()}
           <Switch
             {...scaleProps}
           />
+          <Tooltip title={uploadTitle}>
+            <UploadOutlined
+              onClick={this.handleUploadButtonClick}
+              className={`mg1r mg2l pointer rdp-file-transfer-btn${uploadReady ? ' rdp-download-flash' : ''}`}
+            />
+          </Tooltip>
+          <Tooltip title={downloadTitle}>
+            <DownloadOutlined
+              onClick={this.handleDownloadButtonClick}
+              className={`mg2r mg1l pointer rdp-file-transfer-btn${hasRemoteFiles ? ' rdp-download-flash' : ' rdp-download-disabled'}`}
+            />
+          </Tooltip>
+          <HelpIcon
+            link='https://github.com/electerm/electerm/wiki/RDP-File-Transfer'
+            className='mg2r mg1l'
+          />
         </div>
         <div className='fright'>
           {this.props.fullscreenIcon()}
@@ -613,11 +711,6 @@ export default class RdpSession extends PureComponent {
     )
   }
 
-  componentDidUpdate () {
-    // Set up native input handlers after canvas is rendered
-    this.setupInputHandlers()
-  }
-
   render () {
     const { width: w, height: h } = this.props
     const { width, height, loading, scaleViewport } = this.state

package/client/components/rdp/rdp.styl

@@ -32,4 +32,31 @@
   background var(--main)
   z-index 299
 
+.rdp-file-transfer-btn
+  font-size: 16px
+  color: var(--text)
+  transition: color 0.2s
+  &:hover
+    color: var(--primary)
+
+.rdp-download-disabled
+  opacity: 0.4
+  cursor: not-allowed
+  &:hover
+    color: var(--text)
+
+canvas
+  outline: none
+
+@keyframes rdp-download-flash
+  0%, 100%
+    color: var(--primary)
+    transform: scale(1)
+  50%
+    color: var(--success)
+    transform: scale(1.2)
+
+.rdp-download-flash
+  animation: rdp-download-flash 1s ease-in-out infinite
+
 

package/client/components/sftp/address-bar.jsx

@@ -1,3 +1,4 @@
+import React, { useRef, useEffect } from 'react'
 import {
   ArrowUpOutlined,
   EyeInvisibleFilled,
@@ -134,15 +135,28 @@ export default function AddressBar (props) {
   const GoIcon = isLoadingRemote
     ? LoadingOutlined
     : (realPath === path ? ReloadOutlined : ArrowRightOutlined)
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    const wrapEl = inputRef.current
+    if (!wrapEl) return
+    const inputEl = wrapEl.querySelector('input')
+    if (!inputEl) return
+    const handler = () => props.onInputFocus(type)
+    inputEl.addEventListener('click', handler)
+    return () => {
+      inputEl.removeEventListener('click', handler)
+    }
+  }, [type])
+
   return (
     <div className='pd1y sftp-title-wrap'>
-      <div className='sftp-title'>
+      <div className='sftp-title' ref={inputRef}>
         <Input
           value={path}
           onChange={e => props.onChange(e, n)}
           onPressEnter={e => props.onGoto(type, e)}
           prefix={renderAddonBefore(props, realPath)}
-          onFocus={() => props.onInputFocus(type)}
           onBlur={() => props.onInputBlur(type)}
           disabled={loadingSftp}
           suffix={

package/client/components/shortcuts/shortcut-control.jsx

@@ -172,6 +172,15 @@ class ShortcutControl extends React.PureComponent {
     window.store.onNewSsh()
   }, 500)
 
+  newTabShortcut = throttle((e) => {
+    e.stopPropagation()
+    if (window.store.hasNodePty) {
+      window.store.addTab()
+    } else {
+      window.store.onNewSsh()
+    }
+  }, 500)
+
   toggleAddBtnShortcut = throttle((e) => {
     e.stopPropagation()
     const { currentLayoutBatch } = window.store

package/client/components/shortcuts/shortcuts-defaults.js

@@ -36,6 +36,11 @@ export default () => {
       shortcut: 'ctrl+n',
       shortcutMac: 'meta+n'
     },
+    {
+      name: 'app_newTab',
+      shortcut: 'alt+q',
+      shortcutMac: 'alt+q'
+    },
     {
       name: 'app_toggleAddBtn',
       shortcut: 'alt+n',

package/client/components/sidebar/info-modal.jsx

@@ -42,8 +42,10 @@ export default auto(function InfoModal (props) {
       upgradeInfo
     } = props
     const onCheckUpdating = upgradeInfo.checkingRemoteVersion || upgradeInfo.upgrading
+    const { noUpdateMessage, noUpdateMessageExpires } = upgradeInfo
+    const showMessage = noUpdateMessage && noUpdateMessageExpires && Date.now() < noUpdateMessageExpires
     return (
-      <p className='mg1b mg2t'>
+      <div className='mg1b mg2t'>
         <Button
           type='primary'
           loading={onCheckUpdating}
@@ -51,7 +53,10 @@ export default auto(function InfoModal (props) {
         >
           {e('checkForUpdate')}
         </Button>
-      </p>
+        {showMessage && (
+          <span className='mg1l update-msg'>{noUpdateMessage}</span>
+        )}
+      </div>
     )
   }
 

package/client/components/ssh-config/load-ssh-configs.jsx

@@ -1,5 +1,4 @@
 import {
-  Modal,
   Spin,
   Button,
   Empty
@@ -9,6 +8,7 @@ import * as ls from '../../common/safe-local-storage'
 import {
   sshConfigLoadKey
 } from '../../common/constants'
+import Modal from '../common/modal'
 import { ReloadOutlined } from '@ant-design/icons'
 import LoadSshConfigsItem from './load-ssh-configs-item'
 import './ssh-config.styl'

package/client/components/sys-menu/menu-btn.jsx

@@ -76,7 +76,8 @@ class MenuBtn extends PureComponent {
       items.push({
         func: 'addTab',
         icon: 'RightSquareFilled',
-        text: e('newTab')
+        text: e('newTab'),
+        subText: this.getShortcut('app_newTab')
       })
     }
     // {

package/client/store/app-upgrade.js

@@ -5,8 +5,8 @@
 import { refsStatic } from '../components/common/ref'
 
 export default Store => {
-  Store.prototype.onCheckUpdate = (noSkip = true) => {
-    refsStatic.get('upgrade')?.appUpdateCheck(noSkip)
+  Store.prototype.onCheckUpdate = (isManual = false) => {
+    refsStatic.get('upgrade')?.appUpdateCheck(isManual)
   }
   Store.prototype.getProxySetting = function () {
     const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "3.3.8",
+  "version": "3.6.6",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",