@electerm/electerm-react 3.1.26 → 3.2.0

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

@@ -4,18 +4,22 @@
 
 import { auto } from 'manate/react'
 import { pick } from 'lodash-es'
-import { Tabs } from 'antd'
+import { Tabs, Spin } from 'antd'
+import { lazy, Suspense } from 'react'
 import SettingModal from './setting-wrap'
 import {
   settingMap,
   modals
 } from '../../common/constants'
-import TabBookmarks from './tab-bookmarks'
-import TabQuickCommands from './tab-quick-commands'
-import TabSettings from './tab-settings'
-import TabThemes from './tab-themes'
-import TabProfiles from './tab-profiles'
-import TabWidgets from './tab-widgets'
+
+const TabBookmarks = lazy(() => import('./tab-bookmarks'))
+const TabQuickCommands = lazy(() => import('./tab-quick-commands'))
+const TabSettings = lazy(() => import('./tab-settings'))
+const TabThemes = lazy(() => import('./tab-themes'))
+const TabProfiles = lazy(() => import('./tab-profiles'))
+const TabWidgets = lazy(() => import('./tab-widgets'))
+
+const Loading = () => <div style={{ padding: 20, textAlign: 'center' }}><Spin /></div>
 
 const e = window.translate
 
@@ -115,46 +119,48 @@ export default auto(function SettingModalWrap (props) {
         <Tabs
           {...tabsProps}
         />
-        <TabQuickCommands
-          listProps={props0}
-          settingItem={settingItem}
-          formProps={formProps}
-          store={store}
-          settingTab={settingTab}
-        />
-        <TabBookmarks
-          treeProps={treeProps}
-          settingItem={settingItem}
-          formProps={formProps}
-          settingTab={settingTab}
-        />
-        <TabSettings
-          listProps={props0}
-          settingItem={settingItem}
-          settingTab={settingTab}
-          store={store}
-        />
-        <TabThemes
-          listProps={props0}
-          settingItem={settingItem}
-          formProps={formProps}
-          store={store}
-          settingTab={settingTab}
-        />
-        <TabProfiles
-          listProps={props0}
-          settingItem={settingItem}
-          formProps={formProps}
-          store={store}
-          settingTab={settingTab}
-        />
-        <TabWidgets
-          listProps={props0}
-          settingItem={settingItem}
-          formProps={formProps}
-          store={store}
-          settingTab={settingTab}
-        />
+        <Suspense fallback={<Loading />}>
+          <TabQuickCommands
+            listProps={props0}
+            settingItem={settingItem}
+            formProps={formProps}
+            store={store}
+            settingTab={settingTab}
+          />
+          <TabBookmarks
+            treeProps={treeProps}
+            settingItem={settingItem}
+            formProps={formProps}
+            settingTab={settingTab}
+          />
+          <TabSettings
+            listProps={props0}
+            settingItem={settingItem}
+            settingTab={settingTab}
+            store={store}
+          />
+          <TabThemes
+            listProps={props0}
+            settingItem={settingItem}
+            formProps={formProps}
+            store={store}
+            settingTab={settingTab}
+          />
+          <TabProfiles
+            listProps={props0}
+            settingItem={settingItem}
+            formProps={formProps}
+            store={store}
+            settingTab={settingTab}
+          />
+          <TabWidgets
+            listProps={props0}
+            settingItem={settingItem}
+            formProps={formProps}
+            store={store}
+            settingTab={settingTab}
+          />
+        </Suspense>
       </>
     )
   }

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

@@ -135,11 +135,13 @@ export default class ShortcutEdit extends PureComponent {
   }
 
   renderClear () {
-    if (this.props.renderClear && this.props.data.shortcut) {
+    const { renderClear, handleClear, data } = this.props
+    const hasShortcut = data && data.shortcut
+    if (renderClear && hasShortcut && handleClear) {
       return (
         <CloseOutlined
           className='pointer mg1l'
-          onClick={this.props.handleClear}
+          onClick={handleClear}
         />
       )
     }

package/client/components/sidebar/history.jsx

@@ -8,6 +8,7 @@ import { Switch } from 'antd'
 import { UnorderedListOutlined } from '@ant-design/icons'
 import HistoryItem from './history-item'
 import { getItemJSON, setItemJSON } from '../../common/safe-local-storage.js'
+import '../setting-panel/list.styl'
 
 const SORT_BY_FREQ_KEY = 'electerm-history-sort-by-frequency'
 

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>
     )
   }