@electerm/electerm-react 5.1.25 → 5.3.0

package/client/components/quick-commands/quick-command-transport-mod.jsx

@@ -1,10 +1,13 @@
 import BookmarkTransport from '../tree-list/bookmark-transport'
 import download from '../../common/download'
 import time from '../../common/time'
-import copy from 'json-deep-copy'
+import { runImportTask } from '../../common/import-task'
+
+const e = window.translate
 
 export default class QmTransport extends BookmarkTransport {
   name = 'quickCommands'
+
   beforeUpload = async (file) => {
     const { store } = this.props
     const txt = file.fileContent !== undefined
@@ -13,28 +16,31 @@ export default class QmTransport extends BookmarkTransport {
     try {
       const arr = JSON.parse(txt)
       const state = store[this.name]
-      const arrOld = copy(state)
-      const bmTreeOld = arrOld.reduce((p, v) => {
-        return {
-          ...p,
-          [v.id]: v
-        }
-      }, {})
-      arr.forEach(bg => {
-        if (!bmTreeOld[bg.id]) {
-          state.push(bg)
-        }
+      const existing = new Set(state.map(v => v.id))
+      const fresh = arr.filter(bg => !existing.has(bg.id))
+      if (!fresh.length) {
+        return false
+      }
+      await runImportTask({
+        title: e('import'),
+        batch: 200,
+        stopWatchers: [this.name],
+        steps: [
+          {
+            label: e('quickCommands'),
+            items: fresh,
+            process: (chunk) => {
+              state.push(...chunk)
+            }
+          }
+        ]
       })
-    } catch (e) {
-      store.onError(e)
+    } catch (err) {
+      store.onError(err)
     }
     return false
   }
 
-  renderEdit () {
-    return null
-  }
-
   handleDownload = () => {
     const { store } = this.props
     const arr = store[this.name]

package/client/components/rdp/rdp-cred-form.jsx

@@ -0,0 +1,55 @@
+/**
+ * RDP credentials prompt form, shown at connect time
+ * when username/password are missing from the bookmark
+ */
+
+import {
+  Input,
+  Form,
+  Button
+} from 'antd'
+import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+import Password from '../common/password'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function RdpCredForm (props) {
+  const [form] = Form.useForm()
+
+  return (
+    <Form
+      form={form}
+      onFinish={props.handleFinish}
+      initialValues={props.initialValues || {}}
+      name='rdp-cred-form'
+    >
+      <div className='pd3t pd1b'>
+        <FormItem
+          {...formItemLayout}
+          label={e('username')}
+          name='username'
+        >
+          <Input autoFocus />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('password')}
+          name='password'
+        >
+          <Password />
+        </FormItem>
+        <FormItem
+          {...tailFormItemLayout}
+        >
+          <Button
+            type='primary'
+            htmlType='submit'
+          >
+            {e('connect')}
+          </Button>
+        </FormItem>
+      </div>
+    </Form>
+  )
+}

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

@@ -1,6 +1,7 @@
 import { PureComponent, createRef } from 'react'
 import { createTerm } from '../terminal/terminal-apis'
 import deepCopy from 'json-deep-copy'
+import { pick } from 'lodash-es'
 import clone from '../../common/to-simple-obj'
 import { handleErr } from '../../common/fetch'
 import {
@@ -24,6 +25,8 @@ import { readClipboardAsync } from '../../common/clipboard'
 import RemoteFloatControl from '../common/remote-float-control'
 import SwitchLabel from '../common/switch'
 import HelpIcon from '../common/help-icon'
+import Modal from '../common/modal'
+import RdpCredForm from './rdp-cred-form'
 import { FileTransferManager, createFileLogger } from './file-transfer'
 import { notification } from '../common/notification'
 import message from '../common/message'
@@ -65,7 +68,8 @@ export default class RdpSession extends PureComponent {
       ...resObj,
       hasRemoteFiles: false,
       downloadBtnDisabled: true,
-      uploadReady: false
+      uploadReady: false,
+      showCredPrompt: false
     }
     this.session = null
     this.fileTransfer = null
@@ -121,13 +125,25 @@ export default class RdpSession extends PureComponent {
     return `ws://${host}:${port}/${type}/${id}?token=${tokenElecterm}${extra}`
   }
 
-  remoteInit = async () => {
+  remoteInit = async (credOverride) => {
     this.setState({
       loading: true
     })
     const { config } = this.props
     const { id } = this.props
-    const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
+    const tab = {
+      ...window.store.applyProfile(deepCopy(this.props.tab || {})),
+      ...credOverride
+    }
+    // keep resolved credentials for the connect-time prompt
+    this.tab = tab
+    if (!tab.username) {
+      this.setState({
+        loading: false,
+        showCredPrompt: true
+      })
+      return
+    }
     const {
       type,
       term: terminalType
@@ -192,6 +208,9 @@ export default class RdpSession extends PureComponent {
       const builder = new window.ironRdp.SessionBuilder()
       builder.username(username)
       builder.password(password)
+      if (tab.domain) {
+        builder.serverDomain(tab.domain)
+      }
       builder.destination(destination)
       builder.proxyAddress(proxyAddress)
       builder.authToken('none')
@@ -277,12 +296,16 @@ export default class RdpSession extends PureComponent {
         this.log(`Session ended: ${info.reason()}`, 'info')
         this.onSessionEnd()
       }).catch((e) => {
-        this.log(`Session error: ${this.formatError(e)}`, 'error')
+        this.showError(e)
         this.onSessionEnd()
       })
     } catch (e) {
-      this.log(`Connection failed: ${this.formatError(e)}`, 'error')
-      this.setState({ loading: false })
+      this.showError(e)
+      this.setState({
+        loading: false,
+        // let the user retry with different credentials on auth failure
+        showCredPrompt: this.isAuthError(e) ? true : this.state.showCredPrompt
+      })
       this.setStatus(statusMap.error)
     }
   }
@@ -307,6 +330,73 @@ export default class RdpSession extends PureComponent {
     return e?.message || e?.toString() || String(e)
   }
 
+  // WrongPassword(1) / LogonFailure(2)
+  isAuthError = (err) => {
+    if (err && typeof err === 'object' && '__wbg_ptr' in err && err.kind) {
+      try {
+        const kind = err.kind()
+        return kind === 1 || kind === 2
+      } catch (_) { }
+    }
+    return false
+  }
+
+  // map known IronErrorKind codes to a user-friendly message
+  errText = (err) => {
+    if (this.isAuthError(err)) {
+      return window.translate('loginFail') + ` (${this.formatError(err)})`
+    }
+    return this.formatError(err)
+  }
+
+  showError = (err) => {
+    const text = this.errText(err)
+    this.log(`Connection failed: ${this.formatError(err)}`, 'error')
+    message.error(text, 10)
+  }
+
+  onCredSubmit = (res) => {
+    this.setState({
+      showCredPrompt: false
+    })
+    // tear down the failed attempt before reconnecting
+    this.cleanup()
+    // reconnect with the provided credentials, not persisted to the bookmark
+    this.remoteInit(res)
+  }
+
+  onCredCancel = () => {
+    this.setState({
+      showCredPrompt: false
+    })
+    this.setStatus(statusMap.error)
+  }
+
+  renderCredPrompt = () => {
+    const {
+      showCredPrompt
+    } = this.state
+    if (!showCredPrompt) {
+      return null
+    }
+    const confirmProps = {
+      title: window.translate('credentialsRequired'),
+      footer: null,
+      open: true,
+      onCancel: this.onCredCancel
+    }
+    return (
+      <Modal
+        {...confirmProps}
+      >
+        <RdpCredForm
+          initialValues={pick(this.tab, ['username', 'password'])}
+          handleFinish={this.onCredSubmit}
+        />
+      </Modal>
+    )
+  }
+
   syncLocalToRemote = async () => {
     if (!this.session || this.fileUploadInProgress) {
       return
@@ -751,6 +841,7 @@ export default class RdpSession extends PureComponent {
               ref={this.canvasRef}
             />
           </div>
+          {this.renderCredPrompt()}
         </div>
       </Spin>
     )

package/client/components/setting-panel/keywords-transport.jsx

@@ -4,6 +4,7 @@ import time from '../../common/time'
 
 export default class KeywordsTransport extends BookmarkTransport {
   name = 'keywords-highlight'
+
   beforeUpload = async (file) => {
     const { store } = this.props
     const txt = file.fileContent !== undefined
@@ -20,10 +21,6 @@ export default class KeywordsTransport extends BookmarkTransport {
     return false
   }
 
-  renderEdit () {
-    return null
-  }
-
   handleDownload = () => {
     const { store } = this.props
     const arr = store.config.keywords || []

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

@@ -33,14 +33,20 @@ export default auto(function SettingModalWrap (props) {
       settingMap.bookmarks,
       settingMap.terminalThemes
     ]
-    const { settingTab, settingItem, settingSidebarList, bookmarkSelectMode } = store
+    const { settingTab, settingItem, bookmarkSelectMode } = store
+    // settingSidebarList deep-copies the whole collection; the bookmarks tab
+    // ignores `list` (it renders from treeProps), so skip it there — with
+    // thousands of bookmarks that copy is the most expensive part of the render
+    const list = settingTab === settingMap.bookmarks
+      ? []
+      : store.settingSidebarList
     const props0 = {
       store,
       activeItemId: settingItem.id,
       type: settingTab,
       onClickItem: selectItem,
       shouldConfirmDel: tabsShouldConfirmDel.includes(settingTab),
-      list: settingSidebarList
+      list
     }
     const { bookmarks, bookmarkGroups, widgetInstances } = store
     const formProps = {

package/client/components/setting-panel/start-session-select.jsx

@@ -7,6 +7,7 @@ import {
   BookOutlined
 } from '@ant-design/icons'
 import HelpIcon from '../common/help-icon'
+import buildMap from '../../common/build-map'
 
 const e = window.translate
 const { SHOW_CHILD } = TreeSelect
@@ -21,22 +22,10 @@ function BookmarkSelect (props) {
 
   const buildData = () => {
     const cats = bookmarkGroups
-    const tree = bookmarks
-      .reduce((p, k) => {
-        return {
-          ...p,
-          [k.id]: k
-        }
-      }, {})
-    const btree = cats
-      .reduce((p, k) => {
-        return {
-          ...p,
-          [k.id]: k
-        }
-      }, {})
+    const tree = buildMap(bookmarks)
+    const btree = buildMap(cats)
     function buildSubCats (id) {
-      const x = btree[id]
+      const x = btree.get(id)
       if (!x) {
         return ''
       }
@@ -55,7 +44,7 @@ function BookmarkSelect (props) {
       return y
     }
     function buildLeaf (id) {
-      const x = tree[id]
+      const x = tree.get(id)
       if (!x) {
         return ''
       }

package/client/components/setting-sync/setting-sync.jsx

@@ -3,8 +3,9 @@
  */
 
 import { Tabs, Spin } from 'antd'
+import { useEffect } from 'react'
 import SyncForm from './setting-sync-form'
-import { syncTypes, syncDataMaps } from '../../common/constants'
+import { allowedSyncTypes, syncDataMaps } from '../../common/constants'
 import DataTransport from './data-import'
 import DataSelect from './data-select'
 import { pick } from 'lodash-es'
@@ -24,6 +25,15 @@ export default auto(function SyncSettingEntry (props) {
   const {
     store
   } = window
+  const types = allowedSyncTypes()
+  const type = types.includes(props.syncType)
+    ? props.syncType
+    : types[0]
+  useEffect(() => {
+    if (store.syncType !== type) {
+      store.syncType = type
+    }
+  }, [type])
   function renderForm () {
     const syncProps = {
       ...syncSetting,
@@ -31,12 +41,11 @@ export default auto(function SyncSettingEntry (props) {
         'isSyncingSetting',
         'isSyncDownload',
         'isSyncUpload',
-        'syncType',
         'serverStatus'
       ]),
-      serverStatus: deepCopy(store.syncServerStatus[props.syncType])
+      syncType: type,
+      serverStatus: deepCopy(store.syncServerStatus[type])
     }
-    const type = props.syncType
     const formData = {
       gistId: syncSetting[type + 'GistId'],
       token: syncSetting[type + 'AccessToken'],
@@ -59,8 +68,7 @@ export default auto(function SyncSettingEntry (props) {
       />
     )
   }
-
-  const syncItems = Object.keys(syncTypes).map(type => {
+  const syncItems = types.map(type => {
     return {
       key: type,
       label: type,
@@ -84,7 +92,7 @@ export default auto(function SyncSettingEntry (props) {
       <DataTransport {...dataImportProps} />
       <Spin spinning={store.isSyncingSetting}>
         <Tabs
-          activeKey={store.syncType}
+          activeKey={type}
           onChange={handleChange}
           items={syncItems}
         />

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

@@ -127,6 +127,7 @@ export default auto(function InfoModal (props) {
     devDependencies,
     dependencies,
     languageRepo,
+    privacyNoticeLink,
     author: {
       name: authorName,
       email,
@@ -203,6 +204,12 @@ export default auto(function InfoModal (props) {
               {bugReportLink}
             </Link>
           </p>
+          <p className='mg1b'>
+            <InfoCircleOutlined /> <b className='mg1r'>{e('privacyNotice')} ➾</b>
+            <Link to={privacyNoticeLink} className='mg1l'>
+              {privacyNoticeLink}
+            </Link>
+          </p>
           <p className='mg1b'>
             <HighlightOutlined /> <b className='mg1r'>{e('changeLog')} ➾</b>
             <Link to={releaseLink} className='mg1l'>

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

@@ -44,12 +44,52 @@ export default class SpiceSession extends PureComponent {
 
   componentDidMount () {
     this.remoteInit()
+    this.attachMouseScaleFix()
   }
 
   componentWillUnmount () {
+    this.detachMouseScaleFix()
     this.cleanup()
   }
 
+  // The spice client sends event.offsetX/offsetY to the remote as-is, but when
+  // the canvas is CSS-scaled (scaleViewport or the lib's maxWidth/maxHeight),
+  // those are display pixels instead of remote surface pixels. On high
+  // resolution remote screens the pointer then only reaches the top-left
+  // region. Convert display coords to surface coords (the canvas box is
+  // letterboxed by object-fit: contain) before the lib's handlers run.
+  handleMouseScaleFix = (e) => {
+    const canvas = this.domRef.current?.querySelector('canvas')
+    if (!canvas || !canvas.width || !canvas.height) return
+    const rect = canvas.getBoundingClientRect()
+    if (!rect.width || !rect.height) return
+    const scale = Math.min(rect.width / canvas.width, rect.height / canvas.height)
+    const x = (e.clientX - rect.left - (rect.width - canvas.width * scale) / 2) / scale
+    const y = (e.clientY - rect.top - (rect.height - canvas.height * scale) / 2) / scale
+    Object.defineProperty(e, 'offsetX', {
+      value: Math.max(0, Math.min(x, canvas.width - 1))
+    })
+    Object.defineProperty(e, 'offsetY', {
+      value: Math.max(0, Math.min(y, canvas.height - 1))
+    })
+  }
+
+  attachMouseScaleFix = () => {
+    this.domRef.current?.addEventListener(
+      'mousemove',
+      this.handleMouseScaleFix,
+      true
+    )
+  }
+
+  detachMouseScaleFix = () => {
+    this.domRef.current?.removeEventListener(
+      'mousemove',
+      this.handleMouseScaleFix,
+      true
+    )
+  }
+
   cleanup = () => {
     if (this.spiceConn) {
       try {

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

@@ -98,12 +98,6 @@ export default class AttachAddonCustom {
     }
   }
 
-  onShellIntegrationDetected = () => {
-    if (this.outputSuppressed) {
-      this.stopOutputSuppression(true)
-    }
-  }
-
   activate = async (terminal = this.term) => {
     await this._initBase()
     this.addSocketListener(this._socket, 'message', this.onMsg)
@@ -177,9 +171,10 @@ export default class AttachAddonCustom {
     }
   }
 
-  checkForShellIntegration = (str) => {
+  // Index of the first OSC 633 sequence in the chunk, or -1.
+  indexOfShellIntegration = (str) => {
     const ESC = String.fromCharCode(27)
-    return str.includes(ESC + ']633;')
+    return str.indexOf(ESC + ']633;')
   }
 
   writeToTerminalDirect = (data) => {
@@ -232,8 +227,15 @@ export default class AttachAddonCustom {
     }
 
     if (this.outputSuppressed) {
-      if (this.checkForShellIntegration(str)) {
-        this.onShellIntegrationDetected()
+      const oscIdx = this.indexOfShellIntegration(str)
+      if (oscIdx !== -1) {
+        // Shell integration is confirmed active. The pty often coalesces the
+        // tail of the echoed injection command and the first OSC 633 output
+        // into one chunk, so write only from the first OSC sequence on —
+        // everything before it is echo and stays hidden. A leading newline
+        // keeps the fresh prompt off the injection-time prompt line.
+        this.stopOutputSuppression(true)
+        this._enqueueWrite('\r\n' + str.slice(oscIdx))
         return
       }
       this.suppressedData.push(data)

package/client/components/terminal/shell.js

@@ -27,7 +27,7 @@ function getBashInlineIntegration () {
     'if [[ $- == *i* ]] && [[ -z "${ELECTERM_SHELL_INTEGRATION:-}" ]]',
     'then export ELECTERM_SHELL_INTEGRATION=1',
     '__e_esc() { local v="$1"; v="${v//\\\\/\\\\\\\\}"; v="${v//;/\\\\x3b}"; printf \'%s\' "$v"; }',
-    '__e_pre() { [[ "$BASH_COMMAND" == "$PROMPT_COMMAND" ]] && return; [[ "$BASH_COMMAND" == "__e_"* ]] && return; [[ "${__e_in:-0}" == "0" ]] && { __e_in=1; printf \'\\e]633;E;%s\\a\\e]633;C\\a\' "$(__e_esc "$BASH_COMMAND")"; }; }',
+    '__e_pre() { local p; [[ "$BASH_COMMAND" == __e_* || "$BASH_COMMAND" == PROMPT_COMMAND=* ]] && return; [[ "$BASH_COMMAND" == "$PROMPT_COMMAND" ]] && return; if [[ -n "${PROMPT_COMMAND:-}" ]]; then local IFS=\';\'; for p in $PROMPT_COMMAND; do p="${p#"${p%%[! ]*}"}"; [[ "$BASH_COMMAND" == "$p" ]] && return; done; fi; [[ "${__e_in:-0}" == "0" ]] && { __e_in=1; printf \'\\e]633;E;%s\\a\\e]633;C\\a\' "$(__e_esc "$BASH_COMMAND")"; }; }',
     '__e_cmd() { local c="$?"; [[ "${__e_in:-0}" == "1" ]] && { printf \'\\e]633;D;%s\\a\' "$c"; __e_in=0; }; printf \'\\e]633;P;Cwd=%s\\a\\e]633;A\\a\' "$(__e_esc "$PWD")"; return "$c"; }',
     'trap \'__e_pre\' DEBUG',
     'PROMPT_COMMAND="__e_cmd${PROMPT_COMMAND:+; $PROMPT_COMMAND}"',
@@ -40,17 +40,19 @@ function getBashInlineIntegration () {
  * Properly formatted for semicolon joining
  */
 function getZshInlineIntegration () {
-  // Each statement is complete and can be joined with semicolons
-  // Note: 'then' must have a space/newline before the next command, not semicolon
+  // Register hooks by appending to the precmd/preexec hook arrays directly.
+  // add-zsh-hook is an autoloadable shell function: on systems like NixOS
+  // fpath may not include the standard functions directory, the autoload
+  // fails silently (stderr is suppressed) and the hooks never run, breaking
+  // path following. Appending to the arrays works on every zsh.
   return [
     'if [[ -o interactive ]] && [[ -z "${ELECTERM_SHELL_INTEGRATION:-}" ]]',
     'then export ELECTERM_SHELL_INTEGRATION=1',
     '__e_esc() { local v="$1"; v="${v//\\\\/\\\\\\\\}"; v="${v//;/\\\\x3b}"; builtin printf \'%s\' "$v"; }',
     '__e_preexec() { __e_cmd="$1"; builtin printf \'\\e]633;E;%s\\a\\e]633;C\\a\' "$(__e_esc "$1")"; }',
     '__e_precmd() { local c="$?"; [[ -n "$__e_cmd" ]] && builtin printf \'\\e]633;D;%s\\a\' "$c"; __e_cmd=""; builtin printf \'\\e]633;P;Cwd=%s\\a\\e]633;A\\a\' "$(__e_esc "$PWD")"; }',
-    'autoload -Uz add-zsh-hook',
-    'add-zsh-hook precmd __e_precmd',
-    'add-zsh-hook preexec __e_preexec',
+    'precmd_functions+=(__e_precmd)',
+    'preexec_functions+=(__e_preexec)',
     'fi'
   ].join('; ')
 }
@@ -78,11 +80,13 @@ function getShInlineIntegration () {
   return [
     'if [ -z "$ELECTERM_SHELL_INTEGRATION" ]',
     'then export ELECTERM_SHELL_INTEGRATION=1',
-    '__e_esc() { printf "%s" "$1" | sed "s/\\\\/\\\\\\\\/g; s/;/\\\\x3b/g"; }',
-    // We wrap the current PS1 with OSC 633 sequences.
-    // \033]633;P;Cwd=... \007 marks the directory
-    // \033]633;A \007 marks the start of the prompt
-    'export PS1="\\e]633;P;Cwd=$(__e_esc "$PWD")\\a\\e]633;A\\a${PS1:-# }"',
+    '__e_esc() { printf \'%s\' "$1" | sed \'s/\\\\/\\\\\\\\/g; s/;/\\\\x3b/g\'; }',
+    // sh/dash/ash re-evaluate $(...) inside PS1 every time the prompt is
+    // shown, but only if the $() stays literal — so PS1 must be assigned
+    // single-quoted. printf interprets \033/\a, unlike PS1 backslash
+    // escapes which dash does not expand.
+    '__e_ps1() { printf \'\\033]633;P;Cwd=%s\\a\\033]633;A\\a\' "$(__e_esc "$PWD")"; }',
+    'PS1=\'$(__e_ps1)\'"${PS1:-# }"',
     'fi'
   ].join('; ')
 }
@@ -139,6 +143,13 @@ export function wrapSilent (cmd, shellType) {
  * @returns {string} Complete command to send to terminal
  */
 export function getShellIntegrationCommand (shellType = 'bash') {
+  if (shellType === 'fish') {
+    // fish is not a Bourne shell: the eval '\''...'\'' wrapper of wrapSilent
+    // is a parse error in fish (nested single quotes stay unbalanced), so
+    // the whole injection silently fails. Send the script raw instead —
+    // it is already valid fish syntax as-is.
+    return ' ' + getInlineShellIntegration(shellType) + '\r'
+  }
   const cmd = getInlineShellIntegration(shellType)
   return wrapSilent(cmd, shellType)
 }