@electerm/electerm-react 5.1.25 → 5.2.0

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 || !tab.password) {
+      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/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/terminal-color-query.mjs

@@ -57,7 +57,8 @@ function parseHexColor (color) {
   return [
     parseInt(expanded.slice(0, 2), 16),
     parseInt(expanded.slice(2, 4), 16),
-    parseInt(expanded.slice(4, 6), 16)
+    parseInt(expanded.slice(4, 6), 16),
+    alpha
   ]
 }
 
@@ -82,10 +83,15 @@ function parseRgbColor (color) {
   if (alpha === null || alpha <= 0) {
     return null
   }
-  return channels
+  return [...channels, alpha]
 }
 
 export function parseColorToRgb (color) {
+  const rgba = parseColorToRgba(color)
+  return rgba ? rgba.slice(0, 3) : null
+}
+
+export function parseColorToRgba (color) {
   if (typeof color !== 'string') {
     return null
   }
@@ -105,46 +111,45 @@ export function colorToOscRgb (color) {
 }
 
 /**
- * Blend a (possibly translucent) selection color over an opaque background,
+ * Blend a (possibly translucent) selection colour over an opaque background,
  * producing the colour in xterm's internal format ({ css, rgba } where
  * rgba = r<<24 | g<<16 | b<<8 | a).
  *
  * xterm derives its DOM selection colour as blend(theme.background,
- * selectionBackground). When the terminal background is forced transparent
- * (DOM renderer keeps the real background behind via CSS), that blend runs
- * over transparent-black and a light selection turns into dark gray. This
- * helper recomputes it over the real visible background instead.
+ * selectionBackground) into `selectionBackgroundOpaque`, and separately forces
+ * any opaque selectionBackground down to 0.3 alpha in
+ * `selectionBackgroundTransparent` (xterm#2737). electerm renders the terminal
+ * background via CSS and hands xterm a transparent background, so the blend
+ * must be redone over the real visible background — starting from the
+ * *configured* colour so an opaque selection stays opaque (xterm's forced
+ * 0.3-alpha variant would make every selection translucent).
  *
- * `selectionColor` is an xterm color object ({ css, rgba }) e.g.
- * colors.selectionBackgroundTransparent; `visibleBackground` is an opaque
- * colour string.
+ * `selectionColor` is a CSS colour string from the terminal theme, e.g.
+ * themeConfig.selectionBackground; `visibleBackground` is an opaque colour
+ * string.
  */
 export function blendSelectionOverBackground (visibleBackground, selectionColor) {
-  const bgRgb = parseColorToRgb(visibleBackground)
-  const sel = selectionColor?.rgba
-  if (!bgRgb || typeof sel !== 'number') {
-    return null
-  }
-  const [br, bg, bb] = bgRgb
-  const a = (sel & 255) / 255
-  if (a <= 0) {
+  const bg = parseColorToRgb(visibleBackground)
+  const sel = parseColorToRgba(selectionColor)
+  if (!bg || !sel) {
     return null
   }
+  const [br, bgg, bb] = bg
+  const [sr, sg, sb, sa] = sel
   const toCss = (r, g, b, alpha) =>
     `#${[r, g, b, alpha].map(toHexByte).join('')}`
-  const sr = sel >> 24 & 255
-  const sg = sel >> 16 & 255
-  const sb = sel >> 8 & 255
-  if (a >= 1) {
+  if (sa >= 1) {
+    // Fully opaque: use the configured colour as-is, just normalised to
+    // 8-digit hex so both the overlay and per-cell inline styles agree.
     return {
       css: toCss(sr, sg, sb, 255),
-      rgba: ((sel & 0xffffff) | 0xff000000) >>> 0
+      rgba: (sr << 24 | sg << 16 | sb << 8 | 255) >>> 0
     }
   }
-  const r = br + Math.round((sr - br) * a)
-  const g = bg + Math.round((sg - bg) * a)
-  const b = bb + Math.round((sb - bb) * a)
-  const alpha = Math.round(a * 255)
+  const r = br + Math.round((sr - br) * sa)
+  const g = bgg + Math.round((sg - bgg) * sa)
+  const b = bb + Math.round((sb - bb) * sa)
+  const alpha = Math.round(sa * 255)
   return {
     css: toCss(r, g, b, alpha),
     rgba: (r << 24 | g << 16 | b << 8 | alpha) >>> 0

package/client/components/terminal/terminal.jsx

@@ -1474,31 +1474,35 @@ class Term extends Component {
 
   /**
    * xterm computes its DOM selection colour as blend(theme.background,
-   * selectionBackground). The DOM renderer keeps the terminal background
-   * transparent (rgba(0,0,0,0)) so electerm's own CSS background / image
-   * shows through, which makes a light selection blend over transparent-black
-   * and render as dark gray. Recompute the selection over the real visible
-   * background so terminal:selectionBackground=rgba(...) is applied as the
-   * configured semi-transparent colour.
+   * selectionBackground). The terminal background is forced transparent
+   * (rgba(0,0,0,0)) so electerm's own CSS background / image shows through,
+   * which makes the blend run over transparent-black. Recompute the selection
+   * colours over the real visible background, from the *configured* theme
+   * colours — xterm's internal selectionBackgroundTransparent forces opaque
+   * colours down to 0.3 alpha (xterm#2737), which would make every selection
+   * translucent even when the user configured an opaque one.
    */
   fixSelectionColors = (term) => {
+    const themeConfig = this.props.themeConfig || {}
     const themeService = term?._core?._themeService
     if (!themeService?.modifyColors) {
       return
     }
     const visibleBackground = this.getVisibleTerminalBackground()
-    const colors = themeService.colors
+    // xterm's DEFAULT_SELECTION, used when the theme omits a selection color
+    const selectionFallback = 'rgba(255, 255, 255, 0.3)'
+    const inactiveFallback = themeConfig.selectionBackground || selectionFallback
     themeService.modifyColors((c) => {
       const active = blendSelectionOverBackground(
         visibleBackground,
-        colors.selectionBackgroundTransparent
+        themeConfig.selectionBackground || selectionFallback
       )
       if (active) {
         c.selectionBackgroundOpaque = active
       }
       const inactive = blendSelectionOverBackground(
         visibleBackground,
-        colors.selectionInactiveBackgroundTransparent
+        themeConfig.selectionInactiveBackground || inactiveFallback
       )
       if (inactive) {
         c.selectionInactiveBackgroundOpaque = inactive

package/client/components/tree-list/bookmark-transport.jsx

@@ -10,11 +10,12 @@ import {
 } from '@ant-design/icons'
 import { Button, Space } from 'antd'
 import Upload from '../common/upload'
+import { beforeBookmarkUpload } from './bookmark-upload'
 
 const e = window.translate
 
 export default class BookmarkTransport extends PureComponent {
-  beforeUpload = async (file) => {}
+  beforeUpload = beforeBookmarkUpload
 
   handleDownload = () => {}
 

package/client/components/tree-list/bookmark-upload.js

@@ -8,7 +8,9 @@ import { action } from 'manate'
 import uid from '../../common/uid'
 import time from '../../common/time'
 import { fixBookmarks } from '../../common/db-fix'
-import delay from '../../common/wait'
+import { runImportTask } from '../../common/import-task'
+
+const e = window.translate
 
 function fixBookmarksId (bookmarks) {
   return bookmarks.map(item => {
@@ -21,6 +23,7 @@ function fixBookmarksId (bookmarks) {
     return item
   }).filter(Boolean)
 }
+
 export const bookmarkUpload = action(async (file) => {
   const { store } = window
   const { bookmarks, bookmarkGroups } = store
@@ -58,50 +61,62 @@ export const bookmarkUpload = action(async (file) => {
 
   const fixed = fixBookmarks(bookmarks1)
 
-  fixed.forEach(bg => {
-    if (!bmTree.has(bg.id)) {
-      store.bookmarks.push(bg)
-    }
+  await runImportTask({
+    title: e('import'),
+    batch: 200,
+    stopWatchers: ['bookmarks', 'bookmarkGroups'],
+    steps: [
+      {
+        label: e('bookmarks'),
+        items: fixed,
+        process: (chunk) => {
+          chunk.forEach(bg => {
+            if (!bmTree.has(bg.id)) {
+              store.bookmarks.push(bg)
+            }
+          })
+        }
+      },
+      {
+        label: e('bookmarkCategory'),
+        items: bookmarkGroups1,
+        process: (chunk) => {
+          chunk.forEach(bg => {
+            if (!bmgTree.has(bg.id)) {
+              store.bookmarkGroups.push(bg)
+            } else {
+              const bg1 = store.bookmarkGroups.find(
+                b => b.id === bg.id
+              )
+              bg1.bookmarkIds = uniq(
+                [
+                  ...(bg1.bookmarkIds || []),
+                  ...(bg.bookmarkIds || [])
+                ]
+              )
+              bg1.bookmarkGroupIds = uniq(
+                [
+                  ...(bg1.bookmarkGroupIds || []),
+                  ...(bg.bookmarkGroupIds || [])
+                ]
+              )
+            }
+          })
+        }
+      },
+      {
+        label: e('bookmarks'),
+        weight: 1,
+        run: () => {
+          store.fixBookmarkGroups()
+        }
+      }
+    ]
   })
 
-  bookmarkGroups1.forEach(bg => {
-    if (!bmgTree.has(bg.id)) {
-      store.bookmarkGroups.push(bg)
-    } else {
-      const bg1 = store.bookmarkGroups.find(
-        b => b.id === bg.id
-      )
-      bg1.bookmarkIds = uniq(
-        [
-          ...(bg1.bookmarkIds || []),
-          ...(bg.bookmarkIds || [])
-        ]
-      )
-      bg1.bookmarkGroupIds = uniq(
-        [
-          ...(bg1.bookmarkGroupIds || []),
-          ...(bg.bookmarkGroupIds || [])
-        ]
-      )
-    }
-  })
-
-  store.fixBookmarkGroups()
-
   return false
 })
 
 export async function beforeBookmarkUpload (file) {
-  const names = [
-    'bookmarks',
-    'bookmarkGroups'
-  ]
-  for (const name of names) {
-    window[`watch${name}`].stop()
-  }
-  bookmarkUpload(file)
-  await delay(1000)
-  for (const name of names) {
-    window[`watch${name}`].start()
-  }
+  return bookmarkUpload(file)
 }

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

@@ -1,14 +1,20 @@
+import { memo } from 'react'
 import TreeExpander from './tree-expander'
 import TreeListItem from './tree-list-item'
 import TreeItemOp from './tree-item-op'
 import { treeLevelIndent } from './tree-list-layout'
 import createName from '../../common/create-title'
 
-export default function TreeListRow (props) {
+// memoized: VirtualTreeList re-renders every scroll frame and re-invokes
+// renderItem for the whole visible window; without memo each row (including
+// the antd Popconfirm/Tooltip in TreeItemOp) re-renders per frame.
+// `expanded` is a boolean (not the expandedKeys array) because the array is
+// mutated in place, so identity-based memo comparison would miss changes.
+function TreeListRow (props) {
   const {
     row,
     keyword,
-    expandedKeys,
+    expanded,
     activeItemId,
     searchSelectedRowKey,
     staticList,
@@ -34,7 +40,6 @@ export default function TreeListRow (props) {
     item?.bookmarkIds?.length ||
     item?.bookmarkGroupIds?.length
   )
-  const isGroupExpanded = Boolean(keyword) || expandedKeys.includes(item.id)
   const itemProps = {
     item,
     isGroup,
@@ -94,7 +99,7 @@ export default function TreeListRow (props) {
           level={parentId}
           group={item}
           hasChildren={groupHasChildren}
-          shouldOpen={isGroupExpanded}
+          shouldOpen={expanded}
           onExpand={handleExpand}
           onUnExpand={handleUnExpand}
         />
@@ -114,3 +119,5 @@ export default function TreeListRow (props) {
     </div>
   )
 }
+
+export default memo(TreeListRow)

package/client/components/tree-list/tree-list-rows.js

@@ -37,7 +37,10 @@ export function buildVisibleTreeRows ({
   sortTitle,
   sortHost
 }) {
-  const groupTree = bookmarkGroupTree || {}
+  const groupTree = bookmarkGroupTree || new Map()
+  const getGroup = id => groupTree instanceof Map
+    ? groupTree.get(id)
+    : groupTree[id]
   const rows = []
   const matchedRowKeys = []
   const expandedKeySet = new Set(expandedKeys || [])
@@ -72,7 +75,7 @@ export function buildVisibleTreeRows ({
     }
     const hasMatch = (group.bookmarkIds || []).some(bookmarkMatches) ||
       (group.bookmarkGroupIds || []).some(id => {
-        return groupHasMatchedBookmarks(groupTree[id])
+        return groupHasMatchedBookmarks(getGroup(id))
       })
     groupMatchCache.set(group.id, hasMatch)
     return hasMatch
@@ -100,7 +103,7 @@ export function buildVisibleTreeRows ({
       : `#${group.id}`
 
     for (const groupId of group.bookmarkGroupIds || []) {
-      visitGroup(groupTree[groupId], nextParentId, depth + 1)
+      visitGroup(getGroup(groupId), nextParentId, depth + 1)
     }
 
     const bookmarkIds = group.bookmarkIds || []

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

@@ -740,11 +740,13 @@ export default class ItemListTree extends Component {
   }
 
   renderVirtualRow = (row, editor) => {
+    const { keyword } = this.state
+    const { expandedKeys } = this.props
     return (
       <TreeListRow
         row={row}
-        keyword={this.state.keyword}
-        expandedKeys={this.props.expandedKeys}
+        keyword={keyword}
+        expanded={Boolean(keyword) || expandedKeys.includes(row.item.id)}
         activeItemId={this.props.activeItemId}
         searchSelectedRowKey={this.state.searchSelectedRowKey}
         staticList={this.props.staticList}