@electerm/electerm-react 5.1.23 → 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/shortcut-bar-entry.jsx

@@ -31,7 +31,9 @@ const ShortcutBar = lazy(() => import('./shortcut-bar'))
 // minimum height (px) the visual viewport must lose for us to treat it as
 // "the soft keyboard is now covering part of the screen". A soft keyboard is
 // typically ≥150px; a browser address-bar show/hide is well under this.
-const KEYBOARD_HEIGHT = 120
+// Shared with shortcut-bar.jsx, which uses it to decide how far to lift the
+// bar above a keyboard that overlays the page (iOS / HarmonyOS).
+export const KEYBOARD_MIN = 120
 
 // kept as a coarse capability fallback for engines without visualViewport.
 // Modern Chromium (Electron) always exposes window.visualViewport, so this is
@@ -87,7 +89,7 @@ export default function ShortcutBarEntry (props) {
       // ignore viewport changes that also changed width (rotation / split) —
       // a keyboard changes height only.
       const sameWidth = Math.abs(vv.width - baseline.width) < 20
-      if (sameWidth && baseline.height - vv.height > KEYBOARD_HEIGHT) {
+      if (sameWidth && baseline.height - vv.height > KEYBOARD_MIN) {
         setKeyboardSeen(true)
         // The user is focused in a terminal with the keyboard up — they need
         // the bar right now. Set visibility here rather than waiting for the

package/client/components/terminal/shortcut-bar.jsx

@@ -10,18 +10,22 @@
  *   - first (fixed) button collapses the bar
  *   - second (fixed) button opens the edit modal (shortcut-bar-edit.jsx)
  *   - tapping a shortcut sends it to the active terminal via runQuickCommand
+ *   - while the system input panel overlays the page without resizing the
+ *     layout viewport (iOS / HarmonyOS do this, Android resizes instead), the
+ *     bar lifts itself above the panel — see the visualViewport effect below
  *
  * Only loaded on touch devices — see shortcut-bar-entry.jsx.
  * Data + persistence live in shortcut-bar-defs.js.
  */
 
 import { auto } from 'manate/react'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { DownOutlined, EditOutlined } from '@ant-design/icons'
 import { refs } from '../common/ref'
 import { shortcutBarHeight } from '../../common/constants'
 import ShortcutBarEdit from './shortcut-bar-edit'
+import { KEYBOARD_MIN } from './shortcut-bar-entry'
 import { candidates, loadActive, saveActive, ESC } from './shortcut-bar-defs'
 import './shortcut-bar.styl'
 
@@ -89,6 +93,55 @@ function ShortcutBar (props) {
     }
   }, [])
 
+  // On Android the soft keyboard resizes the layout viewport, so a
+  // `position: fixed; bottom: 0` bar is pushed up automatically. iOS and
+  // HarmonyOS instead keep the layout viewport full-size and let the keyboard
+  // overlay it — there the bar sits underneath the keyboard. visualViewport
+  // always tracks the *visible* area on every platform, so the gap between it
+  // and the layout viewport is exactly the covered height: lift the bar by
+  // that much so it rides just above the keyboard.
+  const [kbOffset, setKbOffset] = useState(0)
+  const kbBaselineRef = useRef({ height: 0, width: 0 })
+
+  useEffect(() => {
+    const vv = window.visualViewport
+    if (!vv) {
+      return
+    }
+    // while no keyboard is up, layout viewport == visual viewport (offsetTop
+    // 0); keep refreshing the baseline so a later comparison is accurate.
+    function sync () {
+      if (vv.offsetTop <= 1) {
+        kbBaselineRef.current = { height: window.innerHeight, width: vv.width }
+      }
+      const { height, width } = kbBaselineRef.current
+      // a keyboard changes height only — ignore rotation / pinch-zoom, which
+      // change width too.
+      const sameWidth = Math.abs(vv.width - width) < 20
+      const covered = sameWidth ? height - vv.height - vv.offsetTop : 0
+      setKbOffset(covered > KEYBOARD_MIN ? Math.ceil(covered) : 0)
+    }
+    sync()
+    vv.addEventListener('resize', sync)
+    vv.addEventListener('scroll', sync)
+    window.addEventListener('resize', sync)
+    return () => {
+      vv.removeEventListener('resize', sync)
+      vv.removeEventListener('scroll', sync)
+      window.removeEventListener('resize', sync)
+    }
+  }, [])
+
+  // keep the offset in a CSS var consumed by shortcut-bar.styl, and expose the
+  // lifted height so layout.jsx can shrink the terminal accordingly.
+  useEffect(() => {
+    document.documentElement.style.setProperty(
+      '--shortcut-bar-kb-offset',
+      kbOffset ? kbOffset + 'px' : '0px'
+    )
+    store.shortcutBarKbOffset = kbOffset
+  }, [kbOffset])
+
   // reserve layout space + lift the footer while the bar is shown.
   // expose the bar height as a CSS var so the .styl + footer-lift rule stay
   // in sync with the shortcutBarHeight constant consumed by layout.jsx.
@@ -135,7 +188,11 @@ function ShortcutBar (props) {
   }
 
   return createPortal(
-    <div className='shortcut-bar' role='toolbar'>
+    <div
+      className='shortcut-bar'
+      role='toolbar'
+      style={kbOffset ? { bottom: kbOffset + 'px' } : undefined}
+    >
       <div className='shortcut-bar-fixed'>
         <button
           type='button'

package/client/components/terminal/shortcut-bar.styl

@@ -73,10 +73,12 @@
     color var(--text-light)
 
 // while the bar is visible, lift the footer + reserve space so nothing is
-// covered (terminal area is shrunk by layout.jsx via store.shortcutBarVisible)
+// covered (terminal area is shrunk by layout.jsx via store.shortcutBarVisible;
+// --shortcut-bar-kb-offset raises both bar + footer above a page-overlaying
+// system input panel on iOS / HarmonyOS)
 .shortcut-bar-on
   .main-footer
-    bottom var(--shortcut-bar-h, 44px)
+    bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
 
 // --- edit modal -----------------------------------------------------------
 

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 = () => {}