@electerm/electerm-react 3.15.110 → 3.15.121

package/client/common/key-control-pressed.js

@@ -2,12 +2,12 @@
  * check event if control/meta key pressed
  */
 
-import { isMac } from './constants'
+import { isMacJs } from './constants'
 export default e => {
   if (e.metaKey && e.ctrlKey) {
     return false
   }
-  return isMac
+  return isMacJs
     ? e.metaKey
     : e.ctrlKey
 }

package/client/common/normalize-remote-path.js

@@ -10,11 +10,14 @@ export default function normalizeRemotePath (path) {
   if (!path) return path
   // Fix mixed separators: /c:\windows → /c:/windows
   if (/^\/[a-zA-Z]:\\/.test(path)) {
-    return path.replace(/\\/g, '/')
+    path = path.replace(/\\/g, '/')
+  } else if (/^[a-zA-Z]:/.test(path)) {
+    // Add leading / to bare drive letters: c: → /c:, c:\windows → /c:/windows
+    path = '/' + path.replace(/\\/g, '/')
   }
-  // Add leading / to bare drive letters: c: → /c:, c:\windows → /c:/windows
-  if (/^[a-zA-Z]:/.test(path)) {
-    return '/' + path.replace(/\\/g, '/')
+  // Strip trailing slashes except for root path "/"
+  if (path.length > 1 && path.endsWith('/')) {
+    path = path.replace(/\/+$/, '')
   }
   return path
 }

package/client/components/bookmark-form/bookmark-form.styl

@@ -36,3 +36,20 @@
   overflow auto
   font-size 12px
   font-family monospace
+
+// Flash the add/save button when the form has unsaved edits,
+// so users remember to click it instead of losing their input.
+.btn-flash
+  animation add-btn-flash 1.1s ease-in-out infinite
+
+@keyframes add-btn-flash
+  0%, 100%
+    box-shadow 0 0 0 0 var(--primary)
+    transform scale(1)
+  50%
+    box-shadow 0 0 8px 2px var(--primary)
+    transform scale(1.04)
+
+@media (prefers-reduced-motion: reduce)
+  .btn-flash
+    animation none

package/client/components/bookmark-form/common/connection-hopping-form.jsx

@@ -36,6 +36,7 @@ export default function ConnectionHoppingForm (props) {
     isEdit
   } = props
   const [authType, setAuthType] = useState(initialValues.authType || authTypeMap.password)
+  const [dirty, setDirty] = useState(false)
 
   function onChangeAuthType (e) {
     setAuthType(e.target.value)
@@ -45,6 +46,17 @@ export default function ConnectionHoppingForm (props) {
     formChild.submit()
   }
 
+  // mark the form as edited so the add/save button can flash as a reminder
+  function handleValuesChange () {
+    setDirty(true)
+  }
+
+  // called on a successful (validated) submit; clears the flash
+  function onFinishLocal (data) {
+    setDirty(false)
+    onFinish(data)
+  }
+
   const authTypes = authTypesProp || Object.keys(authTypeMap).map(k => k)
 
   const treeProps = {
@@ -52,13 +64,14 @@ export default function ConnectionHoppingForm (props) {
       return d.host && d.port && d.username
     }),
     bookmarkGroups: store.bookmarkGroups,
-    onSelect: onFinish
+    onSelect: onFinishLocal
   }
 
   return (
     <Form
       form={formChild}
-      onFinish={onFinish}
+      onFinish={onFinishLocal}
+      onValuesChange={handleValuesChange}
       initialValues={initialValues}
       component='div'
     >
@@ -144,6 +157,7 @@ export default function ConnectionHoppingForm (props) {
           htmlType='button'
           icon={isEdit ? <SaveOutlined /> : <PlusOutlined />}
           onClick={onSubmit}
+          className={dirty ? 'btn-flash' : ''}
         >
           {isEdit ? e('save') : e('connectionHopping')}
         </Button>

package/client/components/bookmark-form/common/ssh-tunnel-form.jsx

@@ -34,6 +34,7 @@ export default function SshTunnelForm (props) {
   const [isDynamic, setIsDynamic] = useState(
     (initialValues?.sshTunnel || 'forwardRemoteToLocal') === 'dynamicForward'
   )
+  const [dirty, setDirty] = useState(false)
 
   function onChange (ev) {
     setIsDynamic(ev.target.value === 'dynamicForward')
@@ -43,6 +44,17 @@ export default function SshTunnelForm (props) {
     formChild.submit()
   }
 
+  // mark the form as edited so the add/save button can flash as a reminder
+  function handleValuesChange () {
+    setDirty(true)
+  }
+
+  // called on a successful (validated) submit; clears the flash
+  function onFinishLocal (data) {
+    setDirty(false)
+    onFinish(data)
+  }
+
   function renderSshTunnelFlow (direction) {
     const localToRemote = direction === 'localToRemote'
     const middle = localToRemote ? e('local') : e('remote')
@@ -101,7 +113,8 @@ export default function SshTunnelForm (props) {
   return (
     <Form
       form={formChild}
-      onFinish={onFinish}
+      onFinish={onFinishLocal}
+      onValuesChange={handleValuesChange}
       initialValues={initialValues}
       component='div'
     >
@@ -174,6 +187,7 @@ export default function SshTunnelForm (props) {
           htmlType='button'
           icon={isEdit ? <SaveOutlined /> : <PlusOutlined />}
           onClick={onSubmit}
+          className={dirty ? 'btn-flash' : ''}
         >
           {isEdit ? e('save') : e('sshTunnel')}
         </Button>

package/client/components/file-transfer/transfer.jsx

@@ -10,6 +10,7 @@ import {
   getFolderFromFilePath
 } from '../sftp/file-read'
 import resolve from '../../common/resolve'
+import sanitizeFilename from '../../common/sanitize-filename'
 import { refsTransfers, refsStatic, refs } from '../common/ref'
 import {
   zipCmd,
@@ -672,7 +673,7 @@ export default class TransportAction extends Component {
         }
 
         const fromItemPath = resolve(fromPath, file.name)
-        const toItemPath = resolve(toPath, file.name)
+        const toItemPath = resolve(toPath, sanitizeFilename(file.name))
 
         const itemTransfer = {
           ...transfer,
@@ -711,7 +712,7 @@ export default class TransportAction extends Component {
 
       const batchFolders = folders.slice(i, i + batch)
       const createFolderPromises = batchFolders.map(folder => {
-        const toItemPath = resolve(toPath, folder.name)
+        const toItemPath = resolve(toPath, sanitizeFilename(folder.name))
 
         // Create folder itself (don't process contents)
         const createTransfer = {
@@ -734,7 +735,7 @@ export default class TransportAction extends Component {
       }
 
       const fromItemPath = resolve(fromPath, folder.name)
-      const toItemPath = resolve(toPath, folder.name)
+      const toItemPath = resolve(toPath, sanitizeFilename(folder.name))
 
       const itemTransfer = {
         ...transfer,

package/client/components/main/main.jsx

@@ -2,6 +2,7 @@ import { auto } from 'manate/react'
 import { useEffect } from 'react'
 import Layout from '../layout/layout'
 import FileInfoModal from '../sftp/file-info-modal'
+import FileCompareModal from '../sftp/file-compare-modal'
 import UpdateCheck from './upgrade'
 import SettingModal from '../setting-panel/setting-modal'
 import TextEditor from '../text-editor/text-editor-entry'
@@ -263,6 +264,7 @@ export default auto(function Index (props) {
           installSrc={installSrc}
         />
         <FileInfoModal />
+        <FileCompareModal />
         <SettingModal store={store} />
         <MoveItemModal store={store} />
         <div

package/client/components/rdp/file-transfer.js

@@ -6,6 +6,7 @@
 import { getLocalFileInfo } from '../sftp/file-read'
 import { osResolve } from '../../common/resolve'
 import { filesize } from 'filesize'
+import sanitizeFilename from '../../common/sanitize-filename'
 
 const LOG_PREFIX = '[RDP-FILE-TRANSFER]'
 
@@ -245,7 +246,8 @@ export class FileTransferManager {
         return
       }
 
-      const fullPath = osResolve(savePath[0], fileInfo.name)
+      const safeName = sanitizeFilename(fileInfo.name)
+      const fullPath = osResolve(savePath[0], safeName)
 
       const fd = await new Promise((resolve, reject) => {
         window.fs.open(fullPath, O_WRONLY | O_CREAT | O_TRUNC, (err, fd) => {
@@ -272,12 +274,12 @@ export class FileTransferManager {
         })
       })
 
-      this.log(`Downloaded ${fileInfo.name} (${filesize(fileInfo._totalSize)}) to ${fullPath}`, 'success')
+      this.log(`Downloaded ${safeName} (${filesize(fileInfo._totalSize)}) to ${fullPath}`, 'success')
       this.hasRemoteFiles = false
       this.pendingDownloads.clear()
       this.notifyStateChange()
       if (this.onDownloadComplete) {
-        this.onDownloadComplete(fullPath, fileInfo.name, fileInfo._totalSize)
+        this.onDownloadComplete(fullPath, safeName, fileInfo._totalSize)
       }
     } catch (e) {
       this.log(`Failed to save file: ${e.message}`, 'error')

package/client/components/session/session.jsx

@@ -56,7 +56,9 @@ export default class SessionWrapper extends Component {
       broadcastInput: false,
       keepaliveEnabled: false
     }
-    props.tab.sshSftpSplitView = !!props.config.sshSftpSplitView
+    if (props.tab.sshSftpSplitView === undefined) {
+      props.tab.sshSftpSplitView = !!props.config.sshSftpSplitView
+    }
   }
 
   minWithForSplit = 640

package/client/components/setting-panel/setting-common.jsx

@@ -547,6 +547,7 @@ export default class SettingCommon extends Component {
 
         <div className='pd2b'>
           <span className='inline-title mg1r'>{e('customCss')}</span>
+          <HelpIcon link='https://github.com/electerm/electerm/wiki/Custom-CSS-examples' />
           <TextareaConfirm
             onChange={this.handleCustomCss}
             value={customCss}

package/client/components/sftp/file-compare-modal.jsx

@@ -0,0 +1,145 @@
+/**
+ * file compare modal - shows side by side comparison of two files' attributes
+ */
+
+import React from 'react'
+import Modal from '../common/modal'
+import resolve from '../../common/resolve'
+import time from '../../common/time'
+import { mode2permission, permission2mode } from '../../common/mode2permission'
+import FileIcon from './file-icon'
+import { filesize } from 'filesize'
+import { refsStatic } from '../common/ref'
+import './file-compare-modal.styl'
+
+const e = window.translate
+const formatTime = time
+
+export default class FileCompareModal extends React.PureComponent {
+  state = {
+    visible: false,
+    file1: {},
+    file2: {},
+    tab: null,
+    uidTree: {},
+    gidTree: {}
+  }
+
+  componentDidMount () {
+    refsStatic.add('file-compare-modal', this)
+  }
+
+  showFileCompareModal (data) {
+    this.setState({
+      ...data,
+      visible: true
+    })
+  }
+
+  onClose = () => {
+    this.setState({
+      file1: {},
+      file2: {},
+      visible: false
+    })
+  }
+
+  render () {
+    const {
+      visible,
+      file1,
+      file2,
+      tab = {},
+      uidTree = {},
+      gidTree = {}
+    } = this.state
+    if (!visible) {
+      return null
+    }
+    const {
+      host,
+      port,
+      username
+    } = tab
+    const title = e('compare')
+    const ps = {
+      open: visible,
+      width: 800,
+      title,
+      footer: null,
+      onCancel: this.onClose
+    }
+
+    const fp1 = resolve(file1.path, file1.name)
+    const fp2 = resolve(file2.path, file2.name)
+    const ffp1 = file1.type === 'local'
+      ? fp1
+      : `${username}@${host}:${port}:${fp1}`
+    const ffp2 = file2.type === 'local'
+      ? fp2
+      : `${username}@${host}:${port}:${fp2}`
+
+    const perms1 = mode2permission(file1.mode)
+    const perms2 = mode2permission(file2.mode)
+    const permission1 = permission2mode(perms1)
+    const permission2 = permission2mode(perms2)
+
+    const rows = [
+      [
+        e('name'),
+        (
+          <React.Fragment key='name1'>
+            <FileIcon file={file1} height={20} />
+            {' '}
+            {file1.isSymbolicLink ? <sup className='color-blue symbolic-link-icon'>*</sup> : null}
+            {file1.name}
+          </React.Fragment>
+        ),
+        (
+          <React.Fragment key='name2'>
+            <FileIcon file={file2} height={20} />
+            {' '}
+            {file2.isSymbolicLink ? <sup className='color-blue symbolic-link-icon'>*</sup> : null}
+            {file2.name}
+          </React.Fragment>
+        )
+      ],
+      [
+        e('type'),
+        file1.isDirectory ? e('folder') : e('file'),
+        file2.isDirectory ? e('folder') : e('file')
+      ],
+      [
+        e('size'),
+        file1.isDirectory ? '-' : filesize(file1.size || 0),
+        file2.isDirectory ? '-' : filesize(file2.size || 0)
+      ],
+      [e('mode'), permission1, permission2],
+      [e('fullPath'), ffp1, ffp2],
+      [e('owner'), uidTree['' + file1.owner] || file1.owner, uidTree['' + file2.owner] || file2.owner],
+      [e('group'), gidTree['' + file1.group] || file1.group, gidTree['' + file2.group] || file2.group],
+      [e('accessTime'), formatTime(file1.accessTime), formatTime(file2.accessTime)],
+      [e('modifyTime'), formatTime(file1.modifyTime), formatTime(file2.modifyTime)]
+    ]
+
+    return (
+      <Modal {...ps}>
+        <table className='file-compare-table'>
+          <tbody>
+            {rows.map(([label, v1, v2], i) => {
+              const same = String(v1 ?? '') === String(v2 ?? '')
+              const cls = same ? '' : 'file-compare-diff'
+              return (
+                <tr key={i}>
+                  <td className='bold file-compare-label'>{label}</td>
+                  <td className={cls}>{v1}</td>
+                  <td className={cls}>{v2}</td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </Modal>
+    )
+  }
+}

package/client/components/sftp/file-compare-modal.styl

@@ -0,0 +1,13 @@
+.file-compare-table
+  border-collapse collapse
+  width 100%
+  text-align left
+  td
+    border 1px solid var(--main-darker)
+    padding 4px 8px
+
+.file-compare-label
+  width 120px
+
+.file-compare-diff
+  color var(--warn)

package/client/components/sftp/file-info-modal.jsx

@@ -123,6 +123,13 @@ export default class FileMode extends React.PureComponent {
     return String(value).replace(/'/g, "''")
   }
 
+  escapePosixShellArg = (value) => {
+    // Within single quotes, the only special character is the single quote itself.
+    // Escape it by closing the quote, inserting an escaped quote, and reopening:
+    //   '  ->  '\''
+    return String(value).replace(/'/g, "'\\''")
+  }
+
   normalizeRemoteWindowsPath = (value) => {
     return String(value).replace(/^\/([a-zA-Z]:)/, '$1')
   }
@@ -161,9 +168,12 @@ export default class FileMode extends React.PureComponent {
   }
 
   calcLocal = async (folder) => {
+    const safeFolder = isWin
+      ? this.escapePowerShellPath(folder)
+      : this.escapePosixShellArg(folder)
     const cmd = isWin
-      ? `Get-ChildItem -Recurse '${folder}' | Measure-Object -Property Length -Sum`
-      : `du -sh '${folder}'`
+      ? `Get-ChildItem -Recurse '${safeFolder}' | Measure-Object -Property Length -Sum`
+      : `du -sh '${safeFolder}'`
     const func = isWin ? 'runWinCmd' : 'run'
     const res = await window.fs[func](cmd).catch(window.store.onError)
     return this.getSize(res)
@@ -174,7 +184,8 @@ export default class FileMode extends React.PureComponent {
     if (platform === 'windows') {
       return this.calcRemoteWin(folder)
     }
-    const cmd = `du -sh '${folder}'`
+    const safeFolder = this.escapePosixShellArg(folder)
+    const cmd = `du -sh '${safeFolder}'`
     const r = await runCmd(
       this.state.pid,
       cmd

package/client/components/sftp/file-item.jsx

@@ -25,7 +25,7 @@ import {
   fileOperationsMap,
   isWin, transferTypeMap, typeMap,
   paneMap,
-  isMac, maxEditFileSize, ctrlOrCmd
+  isMacJs, maxEditFileSize, ctrlOrCmd
 } from '../../common/constants'
 import sorter from '../../common/index-sorter'
 import { getFolderFromFilePath, getLocalFileInfo } from './file-read'
@@ -38,6 +38,7 @@ import generate from '../../common/uid'
 import sanitizeFilename from '../../common/sanitize-filename'
 import { refsStatic, refs, filesRef } from '../common/ref'
 import iconsMap from '../sys-menu/icons-map'
+import message from '../common/message'
 
 const e = window.translate
 
@@ -377,6 +378,46 @@ export default class FileSection extends React.Component {
     })
   }
 
+  getExt = (name = '') => {
+    const parts = String(name).split('.')
+    if (parts.length < 2) {
+      return ''
+    }
+    return parts[parts.length - 1].toLowerCase()
+  }
+
+  showCompare = () => {
+    const { type } = this.props
+    const selected = this.props.getSelectedFiles().filter(f => !f.isDirectory)
+    if (selected.length !== 2) {
+      return
+    }
+    refsStatic.get('file-compare-modal')?.showFileCompareModal({
+      file1: selected[0],
+      file2: selected[1],
+      tab: this.props.tab,
+      uidTree: this.props[`${type}UidTree`],
+      gidTree: this.props[`${type}GidTree`]
+    })
+  }
+
+  canCompare = () => {
+    const { selectedFiles } = this.props
+    if (!selectedFiles || selectedFiles.size !== 2) {
+      return false
+    }
+    const selected = this.props.getSelectedFiles()
+    if (selected.length !== 2) {
+      return false
+    }
+    if (selected.some(f => f.isDirectory || !f.id)) {
+      return false
+    }
+    const ext1 = this.getExt(selected[0].name)
+    const ext2 = this.getExt(selected[1].name)
+    return ext1 === ext2
+  }
+
   cancelNew = (type) => {
     let list = this.props[type]
     list = list.filter(p => p.id)
@@ -467,8 +508,8 @@ export default class FileSection extends React.Component {
     let selectedFiles = [file]
     if (isSameSide) {
       if (
-        (e.ctrlKey && !isMac) ||
-        (e.metaKey && isMac)
+        (e.ctrlKey && !isMacJs) ||
+        (e.metaKey && isMacJs)
       ) {
         const isSelected = some(
           selectedFilesOld,
@@ -617,9 +658,15 @@ export default class FileSection extends React.Component {
       tempPath = window.pre.resolve(path, name)
     } else {
       const id = generate()
+      const safeName = sanitizeFilename(name)
       tempPath = window.pre.resolve(
-        window.pre.tempDir, `electerm-temp-${id}-${name}`
+        window.pre.tempDir, `electerm-temp-${id}-${safeName}`
       )
+      // Defense-in-depth: verify the resolved path stays within tempDir
+      if (!tempPath.startsWith(window.pre.tempDir + window.pre.sep)) {
+        message.error(e('invalidTempFilePath'))
+        return
+      }
       await window.fs.writeFile(tempPath, text)
     }
     this.watchingFile = tempPath
@@ -637,9 +684,15 @@ export default class FileSection extends React.Component {
       tempPath = window.pre.resolve(path, name)
     } else {
       const id = generate()
+      const safeName = sanitizeFilename(name)
       tempPath = window.pre.resolve(
-        window.pre.tempDir, `electerm-temp-${id}-${name}`
+        window.pre.tempDir, `electerm-temp-${id}-${safeName}`
       )
+      // Defense-in-depth: verify the resolved path stays within tempDir
+      if (!tempPath.startsWith(window.pre.tempDir + window.pre.sep)) {
+        message.error(e('invalidTempFilePath'))
+        return
+      }
       await window.fs.writeFile(tempPath, text)
     }
     this.watchingFile = tempPath
@@ -1020,7 +1073,7 @@ export default class FileSection extends React.Component {
       res.push({
         func: 'doTransferSelected',
         icon: iconType,
-        text: `${e('selected')}(${len})`
+        text: `${transferText}:${e('selected')}(${len})`
       })
     }
     if (
@@ -1158,6 +1211,13 @@ export default class FileSection extends React.Component {
         text: e('info')
       })
     }
+    if (this.canCompare()) {
+      res.push({
+        func: 'showCompare',
+        icon: 'SwapOutlined',
+        text: e('compare')
+      })
+    }
     return res
   }
 

package/client/components/sftp/sftp-entry.jsx

@@ -1027,6 +1027,11 @@ export default class Sftp extends Component {
     let np = await this.parsePath(type, this.state[nt])
     if (type === typeMap.remote) {
       np = normalizeRemotePath(np)
+    } else if (np.length > 1 && np.endsWith('/')) {
+      // Strip trailing slash except for root path and Windows drive roots
+      if (!/^[a-zA-Z]:\/$/.test(np)) {
+        np = np.replace(/\/+$/, '')
+      }
     }
     if (!isValidPath(np)) {
       return notification.warning({

package/client/components/sys-menu/icons-map.jsx

@@ -28,7 +28,8 @@ import {
   SaveOutlined,
   PlayCircleFilled,
   StopOutlined,
-  DownloadOutlined
+  DownloadOutlined,
+  SwapOutlined
 } from '@ant-design/icons'
 import IconHolder from './icon-holder'
 
@@ -60,5 +61,6 @@ export default {
   SaveOutlined,
   PlayCircleFilled,
   StopOutlined,
-  DownloadOutlined
+  DownloadOutlined,
+  SwapOutlined
 }

package/client/store/workspace.js

@@ -25,7 +25,8 @@ export default Store => {
       // Store srcId (bookmark id) if available, otherwise store basic connection info
       if (tab.srcId) {
         tabsByBatch[batch].push({
-          srcId: tab.srcId
+          srcId: tab.srcId,
+          sshSftpSplitView: tab.sshSftpSplitView
         })
       }
     }
@@ -82,6 +83,12 @@ export default Store => {
           // Open from bookmark
           window.openTabBatch = batch
           store.onSelectBookmark(tabInfo.srcId)
+          // Apply saved sshSftpSplitView state to the newly created tab
+          if (tabInfo.sshSftpSplitView !== undefined) {
+            store.updateTab(store.activeTabId, {
+              sshSftpSplitView: tabInfo.sshSftpSplitView
+            })
+          }
         }
       }
     }

package/package.json

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