@electerm/electerm-react 3.1.26 → 3.3.8

package/client/components/terminal/attach-addon-custom.js

@@ -19,6 +19,10 @@ export default class AttachAddonCustom {
     this._lastInputTime = Date.now()
     this._keepaliveTimer = null
     this._keepaliveInterval = 3000
+    this._lastOutputLine = ''
+    this._passwordPromptDetected = false
+    this._pendingEchoCheck = null
+    this._echoCheckTimer = null
   }
 
   _initBase = async () => {
@@ -101,6 +105,52 @@ export default class AttachAddonCustom {
     this.writeToTerminal(ev.data)
   }
 
+  static passwordPromptPatterns = [
+    /password\s*[:\]>]\s*$/i,
+    /\[sudo\]\s*password\s+for\s+\S+\s*:\s*$/i,
+    /enter\s+passphrase/i,
+    /enter\s+password/i,
+    /密码[：:]\s*$/,
+    /パスワード[：:]\s*$/,
+    /mot de passe\s*[:\]]\s*$/i,
+    /passwort[:\]]\s*$/i,
+    /contraseña[:\]]\s*$/i
+  ]
+
+  _checkPasswordPrompt = (str) => {
+    // Extract last non-empty line from the output
+    const lines = str.split(/\r?\n|\r/)
+    for (let i = lines.length - 1; i >= 0; i--) {
+      const line = lines[i].trim()
+      if (line) {
+        this._lastOutputLine = line
+        break
+      }
+    }
+    return AttachAddonCustom.passwordPromptPatterns.some(
+      p => p.test(this._lastOutputLine)
+    )
+  }
+
+  _onEchoCheckTimeout = () => {
+    // No echo received within timeout → confirms password mode
+    this._pendingEchoCheck = null
+  }
+
+  _handleEchoDetection = (str) => {
+    if (this._pendingEchoCheck) {
+      // Server sent data back while we were waiting → echo is ON → not password
+      if (str.includes(this._pendingEchoCheck.char)) {
+        this._passwordPromptDetected = false
+        clearTimeout(this._echoCheckTimer)
+        this._pendingEchoCheck = null
+        this._echoCheckTimer = null
+        // Cancel the password dropdown if it was shown
+        this.term?.parent?.onPasswordPromptCancelled?.()
+      }
+    }
+  }
+
   checkForShellIntegration = (str) => {
     const ESC = String.fromCharCode(27)
     return str.includes(ESC + ']633;')
@@ -152,6 +202,26 @@ export default class AttachAddonCustom {
       return
     }
 
+    // Password prompt detection on output
+    let str = data
+    if (typeof data !== 'string') {
+      try {
+        str = this.decoder.decode(
+          data instanceof ArrayBuffer ? data : new Uint8Array(data)
+        )
+      } catch (e) {
+        str = ''
+      }
+    }
+    this._handleEchoDetection(str)
+    if (this._checkPasswordPrompt(str) && !this._passwordPromptDetected) {
+      this._passwordPromptDetected = true
+      // Show password dropdown immediately after terminal renders the prompt
+      setTimeout(() => {
+        this.term?.parent?.onPasswordPromptDetected?.()
+      }, 100)
+    }
+
     if (typeof data === 'string') {
       return term.write(data)
     }
@@ -171,6 +241,20 @@ export default class AttachAddonCustom {
 
   sendToServer = (data) => {
     this._lastInputTime = Date.now()
+    // Start echo detection when password prompt is suspected
+    if (this._passwordPromptDetected && !this._pendingEchoCheck && data !== '\r' && data !== '\n') {
+      this._pendingEchoCheck = { char: data, time: Date.now() }
+      clearTimeout(this._echoCheckTimer)
+      this._echoCheckTimer = setTimeout(this._onEchoCheckTimeout, 200)
+    }
+    // Reset password state on Enter
+    if (data === '\r' || data === '\n') {
+      this._passwordPromptDetected = false
+      this._lastOutputLine = ''
+      this._pendingEchoCheck = null
+      clearTimeout(this._echoCheckTimer)
+      this._echoCheckTimer = null
+    }
     this._sendData(data)
   }
 
@@ -228,6 +312,8 @@ export default class AttachAddonCustom {
 
   dispose = () => {
     this._stopKeepalive()
+    clearTimeout(this._echoCheckTimer)
+    this._echoCheckTimer = null
     this.term = null
     this._disposables.forEach(d => d.dispose())
     this._disposables.length = 0

package/client/components/terminal/cmd-item.jsx

@@ -11,11 +11,21 @@ const SuggestionItem = ({ item, onSelect, onDelete }) => {
     onDelete(item)
   }
 
+  const isPassword = item.type === 'PW'
+  const displayText = isPassword
+    ? '••••••••'
+    : item.command
+
   return (
-    <div className='suggestion-item'>
-      <span className='suggestion-command' onClick={handleClick}>
-        {item.command}
+    <div className='suggestion-item' onClick={handleClick}>
+      <span className='suggestion-command'>
+        {displayText}
       </span>
+      {item.hint && (
+        <span className='suggestion-hint'>
+          {item.hint}
+        </span>
+      )}
       <span className='suggestion-type'>
         {item.type}
       </span>

package/client/components/terminal/drop-file-modal.jsx

@@ -0,0 +1,57 @@
+import { Component } from 'react'
+import Modal from '../common/modal'
+
+const e = window.translate
+
+export class DropFileModal extends Component {
+  render () {
+    const {
+      visible,
+      files,
+      onSelect,
+      onCancel
+    } = this.props
+
+    if (!visible) {
+      return null
+    }
+
+    return (
+      <Modal
+        title='?'
+        open={visible}
+        onCancel={onCancel}
+        footer={
+          <div className='custom-modal-footer-buttons'>
+            <button
+              type='button'
+              className='custom-modal-ok-btn'
+              onClick={() => onSelect('trzUpload')}
+            >
+              trz
+            </button>
+            <button
+              type='button'
+              className='custom-modal-cancel-btn'
+              onClick={() => onSelect('rzUpload')}
+            >
+              rz
+            </button>
+            <button
+              type='button'
+              className='custom-modal-cancel-btn'
+              onClick={() => onSelect('inputPath')}
+            >
+              {e('inputOnly')}
+            </button>
+          </div>
+        }
+        width={400}
+      >
+        <p>{files?.map(f => f.path).join(', ')}</p>
+      </Modal>
+    )
+  }
+}
+
+export default DropFileModal

package/client/components/terminal/terminal-command-dropdown.jsx

@@ -16,7 +16,8 @@ export default class TerminalCmdSuggestions extends Component {
     aiSuggestions: [],
     cmdIsDescription: false,
     reverse: false,
-    cmd: ''
+    cmd: '',
+    passwordMode: false
   }
 
   componentDidMount () {
@@ -95,6 +96,9 @@ export default class TerminalCmdSuggestions extends Component {
   }
 
   openSuggestions = (cursorPosition, cmd) => {
+    if (this.state.passwordMode) {
+      return
+    }
     if (!this.state.showSuggestions) {
       document.addEventListener('click', this.handleClickOutside)
       document.addEventListener('keydown', this.handleKeyDown)
@@ -128,7 +132,45 @@ export default class TerminalCmdSuggestions extends Component {
       showSuggestions: true,
       cursorPosition: position,
       cmd,
-      reverse
+      reverse,
+      passwordMode: false
+    })
+  }
+
+  openPasswordSuggestions = (cursorPosition) => {
+    if (!this.state.showSuggestions) {
+      document.addEventListener('click', this.handleClickOutside)
+      document.addEventListener('keydown', this.handleKeyDown)
+    }
+
+    const {
+      left,
+      top,
+      cellHeight
+    } = cursorPosition
+    const w = window.innerWidth
+    const h = window.innerHeight
+
+    const position = {}
+    const reverse = top > h / 2
+
+    if (left > w / 2) {
+      position.right = w - left
+    } else {
+      position.left = left
+    }
+
+    if (reverse) {
+      position.bottom = h - top + cellHeight * 1.5
+    } else {
+      position.top = top + cellHeight
+    }
+    this.setState({
+      showSuggestions: true,
+      cursorPosition: position,
+      cmd: '',
+      reverse,
+      passwordMode: true
     })
   }
 
@@ -146,7 +188,8 @@ export default class TerminalCmdSuggestions extends Component {
     }
     this.setState({
       showSuggestions: false,
-      aiSuggestions: []
+      aiSuggestions: [],
+      passwordMode: false
     })
   }
 
@@ -172,18 +215,33 @@ export default class TerminalCmdSuggestions extends Component {
     const terminal = refs.get('term-' + activeTabId)
     if (!terminal) {
       console.log('No active terminal found')
+      this.closeSuggestions()
+      return
+    }
+
+    if (item.type === 'PW') {
+      try {
+        // Send password + Enter directly, no backspace needed
+        terminal.attachAddon._sendData(item.command + '\r')
+        terminal.attachAddon._passwordPromptDetected = false
+        terminal.attachAddon._lastOutputLine = ''
+      } catch (e) {
+        console.error('Failed to send password:', e)
+      }
+      terminal.term.focus()
+      this.closeSuggestions()
       return
     }
 
-    // const titleElement = domEvent.target.closest('.ant-menu-title-content')
-    // const command = titleElement?.firstChild?.textContent
     const { command } = item
-    const { cmd } = this.state
+    // Read current input from buffer directly to avoid stale state
+    // (onData fires before echo, so this.state.cmd may lag behind)
+    const currentInput = terminal.getCurrentInput() || ''
     let txt = ''
-    if (cmd && command.startsWith(cmd)) {
-      txt = command.slice(cmd.length)
+    if (currentInput && command.startsWith(currentInput)) {
+      txt = command.slice(currentInput.length)
     } else {
-      const pre = '\b'.repeat(cmd.length)
+      const pre = '\b'.repeat(currentInput.length)
       txt = pre + command
     }
     terminal.attachAddon._sendData(txt)
@@ -209,6 +267,24 @@ export default class TerminalCmdSuggestions extends Component {
       })
   }
 
+  getPasswordSuggestions = () => {
+    const bookmarks = window.store.bookmarks || []
+    const seen = new Set()
+    const res = []
+    for (const b of bookmarks) {
+      if (b.password && !seen.has(b.password)) {
+        seen.add(b.password)
+        res.push({
+          id: uid(),
+          command: b.password,
+          type: 'PW',
+          hint: [b.username, b.host].filter(Boolean).join('@')
+        })
+      }
+    }
+    return this.state.reverse ? res.reverse() : res
+  }
+
   getSuggestions = () => {
     const uniqueCommands = new Set()
     const {
@@ -274,17 +350,19 @@ export default class TerminalCmdSuggestions extends Component {
   }
 
   render () {
-    const { showSuggestions, cursorPosition, reverse } = this.state
+    const { showSuggestions, cursorPosition, reverse, passwordMode } = this.state
     if (!showSuggestions) {
       return null
     }
-    const suggestions = this.getSuggestions()
+    const suggestions = passwordMode
+      ? this.getPasswordSuggestions()
+      : this.getSuggestions()
     const cls = classnames('terminal-suggestions-wrap', {
       reverse
     })
     return (
       <div className={cls} style={cursorPosition}>
-        {this.renderSticky('top')}
+        {!passwordMode && this.renderSticky('top')}
         <div className='terminal-suggestions-list'>
           {
             suggestions.map(item => {
@@ -299,7 +377,7 @@ export default class TerminalCmdSuggestions extends Component {
             })
           }
         </div>
-        {this.renderSticky('bottom')}
+        {!passwordMode && this.renderSticky('bottom')}
       </div>
     )
   }

package/client/components/terminal/terminal.jsx

@@ -19,7 +19,8 @@ import {
   isWin,
   rendererTypes,
   isMac,
-  isMacJs
+  isMacJs,
+  connectionMap
 } from '../../common/constants.js'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, readClipboard, copy } from '../../common/clipboard.js'
@@ -27,6 +28,7 @@ import AttachAddon from './attach-addon-custom.js'
 import getProxy from '../../common/get-proxy.js'
 import { ZmodemClient } from './zmodem-client.js'
 import { TrzszClient } from './trzsz-client.js'
+import DropFileModal from './drop-file-modal.jsx'
 import keyControlPressed from '../../common/key-control-pressed.js'
 import NormalBuffer from './normal-buffer.jsx'
 import { createTerm, resizeTerm } from './terminal-apis.js'
@@ -75,7 +77,9 @@ class Term extends Component {
       searchResults: [],
       matchIndex: -1,
       totalLines: 0,
-      reconnectCountdown: null
+      reconnectCountdown: null,
+      dropFileModalVisible: false,
+      droppedFiles: []
     }
     this.id = `term-${this.props.tab.id}`
     refs.add(this.id, this)
@@ -374,11 +378,10 @@ class Term extends Component {
   }
 
   runQuickCommand = (cmd, inputOnly = false) => {
-    this.term && this.attachAddon._sendData(
-      cmd +
-      (inputOnly ? '' : '\r')
-    )
-    this.term.focus()
+    if (this.term && this.attachAddon) {
+      this.attachAddon._sendData(cmd + (inputOnly ? '' : '\r'))
+      this.term.focus()
+    }
   }
 
   cd = (p) => {
@@ -392,9 +395,9 @@ class Term extends Component {
     const dt = e.dataTransfer
     const fromFile = dt.getData('fromFile')
     const notSafeMsg = 'File name contains unsafe characters'
+    const isSshTerminal = this.props.tab.type === connectionMap.ssh
 
     if (fromFile) {
-      // Handle SFTP file drop
       try {
         const fileData = JSON.parse(fromFile)
         const filePath = resolve(fileData.path, fileData.name)
@@ -402,6 +405,13 @@ class Term extends Component {
           message.error(notSafeMsg)
           return
         }
+        if (isSshTerminal) {
+          this.setState({
+            dropFileModalVisible: true,
+            droppedFiles: [{ path: filePath, isRemote: true }]
+          })
+          return
+        }
         this.attachAddon._sendData(`"${filePath}" `)
         return
       } catch (e) {
@@ -409,24 +419,78 @@ class Term extends Component {
       }
     }
 
-    // Handle regular file drop
     const files = dt.files
     if (files && files.length) {
       const arr = Array.from(files)
       const filePaths = arr.map(f => getFilePath(f))
 
-      // Check each file path individually
       const hasUnsafeFilename = filePaths.some(path => isUnsafeFilename(path))
       if (hasUnsafeFilename) {
         message.error(notSafeMsg)
         return
       }
 
+      if (isSshTerminal) {
+        this.setState({
+          dropFileModalVisible: true,
+          droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
+        })
+        return
+      }
+
       const filesAll = filePaths.map(path => `"${path}"`).join(' ')
       this.attachAddon._sendData(filesAll)
     }
   }
 
+  handleDropFileModalCancel = () => {
+    this.setState({
+      dropFileModalVisible: false,
+      droppedFiles: []
+    })
+  }
+
+  handleDropFileAction = (action) => {
+    const { droppedFiles } = this.state
+    if (!droppedFiles || !droppedFiles.length) {
+      this.handleDropFileModalCancel()
+      return
+    }
+
+    const filePaths = droppedFiles.map(f => f.path)
+
+    switch (action) {
+      case 'trzUpload': {
+        if (this.trzszClient && this.trzszClient.isActive) {
+          message.warning('A transfer is already in progress')
+          this.handleDropFileModalCancel()
+          return
+        }
+        window._apiControlSelectFile = filePaths
+        this.attachAddon._sendData('trz\r')
+        break
+      }
+      case 'rzUpload': {
+        if (this.zmodemClient && this.zmodemClient.isActive) {
+          message.warning('A transfer is already in progress')
+          this.handleDropFileModalCancel()
+          return
+        }
+        window._apiControlSelectFile = filePaths
+        this.attachAddon._sendData('rz\r')
+        break
+      }
+      case 'inputPath':
+      default: {
+        const filesAll = filePaths.map(path => `"${path}"`).join(' ')
+        this.attachAddon._sendData(filesAll)
+        break
+      }
+    }
+
+    this.handleDropFileModalCancel()
+  }
+
   onSelection = () => {
     if (
       !this.props.config.copyWhenSelect ||
@@ -771,8 +835,35 @@ class Term extends Component {
     }
   }
 
+  onPasswordPromptDetected = () => {
+    if (!this.props.config.showCmdSuggestions) {
+      return
+    }
+    const cursorPos = this.getCursorPosition()
+    if (cursorPos) {
+      refsStatic
+        .get('terminal-suggestions')
+        ?.openPasswordSuggestions(cursorPos)
+    }
+  }
+
+  onPasswordPromptCancelled = () => {
+    const suggestions = refsStatic.get('terminal-suggestions')
+    if (suggestions?.state?.passwordMode) {
+      suggestions.closeSuggestions()
+    }
+  }
+
   onData = (d) => {
     this.handleInputEvent(d)
+    // Skip normal suggestion logic when in password mode
+    const suggestions = refsStatic.get('terminal-suggestions')
+    if (suggestions?.state?.passwordMode) {
+      if (d === '\r' || d === '\n') {
+        this.closeSuggestions()
+      }
+      return
+    }
     if (this.props.config.showCmdSuggestions) {
       const data = this.getCurrentInput()
       if (data && d !== '\r' && d !== '\n') {
@@ -1459,6 +1550,12 @@ class Term extends Component {
             countdown={this.state.reconnectCountdown}
             onCancel={this.handleCancelAutoReconnect}
           />
+          <DropFileModal
+            visible={this.state.dropFileModalVisible}
+            files={this.state.droppedFiles}
+            onSelect={this.handleDropFileAction}
+            onCancel={this.handleDropFileModalCancel}
+          />
           {spin}
         </div>
       </Dropdown>

package/client/components/terminal/terminal.styl

@@ -127,6 +127,15 @@
   &:hover
     color var(--success)
 
+.suggestion-hint
+  margin-left 5px
+  font-size 0.8em
+  color var(--text-light, #888)
+  white-space nowrap
+  overflow hidden
+  text-overflow ellipsis
+  max-width 150px
+
 .suggestion-delete
   margin-left 5px
   visibility hidden

package/client/components/tree-list/tree-list-item.jsx

@@ -21,7 +21,6 @@ import {
 } from '../../common/constants'
 import highlight from '../common/highlight'
 import uid from '../../common/uid'
-import './tree-list.styl'
 
 const e = window.translate