@electerm/electerm-react 2.13.6 → 2.16.6

package/client/components/bookmark-form/config/common-fields.js

@@ -301,6 +301,7 @@ export const sshAuthFields = [
     type: 'sshAgent',
     name: 'useSshAgent'
   },
+  { type: 'switch', name: 'isMFA', label: () => e('MFA/OTP'), valuePropName: 'checked' },
   commonFields.runScripts,
   commonFields.description,
   commonFields.setEnv,

package/client/components/bookmark-form/config/local.js

@@ -86,7 +86,9 @@ const localConfig = {
             step: 1000
           }
         },
-        { type: 'terminalBackground', name: 'terminalBackground', label: () => e('terminalBackgroundImage') }
+        { type: 'terminalBackground', name: 'terminalBackground', label: () => e('terminalBackgroundImage') },
+        // Exec settings - stored as flat properties on bookmark
+        { type: 'execSettings' }
       ]
     },
     {

package/client/components/common/animate-text.jsx

@@ -2,34 +2,33 @@
  * animate text when text change
  */
 
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 
-export default class AnimateText extends React.PureComponent {
-  constructor (props) {
-    super(props)
-    this.textRef = React.createRef()
-  }
+export default function AnimateText ({ children, className }) {
+  const textRef = useRef(null)
+  const timerRef = useRef(null)
 
-  componentDidUpdate () {
-    const dom = this.textRef.current
-    dom.className = (this.props.className || 'animate-text-wrap')
-    this.timer = setTimeout(() => {
+  useEffect(() => {
+    const dom = textRef.current
+    if (!dom) return
+
+    dom.className = className || 'animate-text-wrap'
+    timerRef.current = setTimeout(() => {
       if (dom) {
-        dom.className = this.props.className || 'animate-text-wrap'
+        dom.className = className || 'animate-text-wrap'
       }
     }, 450)
-  }
 
-  componentWillUnmount () {
-    clearTimeout(this.timer)
-  }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+      }
+    }
+  }, [className])
 
-  render () {
-    const { children, className } = this.props
-    return (
-      <div className={className} ref={this.textRef}>
-        {children}
-      </div>
-    )
-  }
+  return (
+    <div className={className} ref={textRef}>
+      {children}
+    </div>
+  )
 }

package/client/components/common/modal.jsx

@@ -113,6 +113,8 @@ export default function Modal (props) {
   )
 }
 
+Modal.displayName = 'Modal'
+
 function createModalInstance (type, options) {
   const {
     title,

package/client/components/common/notification.jsx

@@ -59,7 +59,7 @@ export function NotificationContainer () {
       {nots.map(notif => (
         <NotificationItem
           key={notif.key}
-          message={notif.message}
+          message={notif.message || notif.type}
           description={notif.description}
           type={notif.type}
           duration={notif.duration}

package/client/components/common/opacity.jsx

@@ -1,5 +1,4 @@
-import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import eq from 'fast-deep-equal'
 
 const opacityDomId = 'opacity-style'
@@ -14,7 +13,7 @@ const opacityDomId = 'opacity-style'
 export default function Opacity ({ opacity }) {
   // Default to 1 if opacity is not provided
   const currentOpacity = opacity !== undefined ? opacity : 1
-  const delta = useDelta(currentOpacity)
+  const prevRef = useRef(null)
 
   function applyOpacity () {
     let styleElement = document.getElementById(opacityDomId)
@@ -58,9 +57,12 @@ export default function Opacity ({ opacity }) {
     }
   }, [])
 
-  useConditionalEffect(() => {
-    applyOpacity()
-  }, delta && !eq(delta.prev, delta.curr))
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, currentOpacity)) {
+      applyOpacity()
+    }
+    prevRef.current = currentOpacity
+  }, [currentOpacity])
 
   return null
 }

package/client/components/common/password.jsx

@@ -1,17 +1,12 @@
-import { useState, useCallback, forwardRef } from 'react'
+import { useState, useCallback } from 'react'
 import {
   Input,
   Tag
 } from 'antd'
 
-/**
- * Password component that extends Ant Design's Password component
- * with caps lock detection and visual indicator
- */
-export default forwardRef(function Password (props, ref) {
+export default function Password ({ ref, onKeyDown, onKeyUp, onFocus, onBlur, prefix, ...props }) {
   const [isCapsLockOn, setIsCapsLockOn] = useState(false)
 
-  // Check caps lock state from keyboard event
   const checkCapsLock = useCallback((event) => {
     if (event.getModifierState) {
       const capsLockState = event.getModifierState('CapsLock')
@@ -19,37 +14,30 @@ export default forwardRef(function Password (props, ref) {
     }
   }, [])
 
-  // Handle key events to detect caps lock changes
   const handleKeyEvent = useCallback((event) => {
     checkCapsLock(event)
-    // Call original onKeyDown/onKeyUp if provided
-    if (props.onKeyDown && event.type === 'keydown') {
-      props.onKeyDown(event)
+    if (onKeyDown && event.type === 'keydown') {
+      onKeyDown(event)
     }
-    if (props.onKeyUp && event.type === 'keyup') {
-      props.onKeyUp(event)
+    if (onKeyUp && event.type === 'keyup') {
+      onKeyUp(event)
     }
-  }, [props.onKeyDown, props.onKeyUp, checkCapsLock])
+  }, [onKeyDown, onKeyUp, checkCapsLock])
 
-  // Handle focus event to check initial caps lock state
   const handleFocus = useCallback((event) => {
     checkCapsLock(event)
-    // Call original onFocus if provided
-    if (props.onFocus) {
-      props.onFocus(event)
+    if (onFocus) {
+      onFocus(event)
     }
-  }, [props.onFocus, checkCapsLock])
+  }, [onFocus, checkCapsLock])
 
-  // Handle blur event to reset caps lock state
   const handleBlur = useCallback((event) => {
     setIsCapsLockOn(false)
-    // Call original onBlur if provided
-    if (props.onBlur) {
-      props.onBlur(event)
+    if (onBlur) {
+      onBlur(event)
     }
-  }, [props.onBlur])
+  }, [onBlur])
 
-  // Show caps lock indicator inside prefix to avoid remounting the input wrapper
   let capsPrefix = null
   if (isCapsLockOn) {
     capsPrefix = (
@@ -57,13 +45,12 @@ export default forwardRef(function Password (props, ref) {
     )
   }
 
-  // Merge any existing prefix from props with our caps indicator
-  let prefix = capsPrefix
-  if (props.prefix) {
-    prefix = (
+  let mergedPrefix = capsPrefix
+  if (prefix) {
+    mergedPrefix = (
       <>
         {capsPrefix}
-        {props.prefix}
+        {prefix}
       </>
     )
   }
@@ -72,11 +59,11 @@ export default forwardRef(function Password (props, ref) {
     <Input.Password
       {...props}
       ref={ref}
-      prefix={prefix}
+      prefix={mergedPrefix}
       onKeyDown={handleKeyEvent}
       onKeyUp={handleKeyEvent}
       onFocus={handleFocus}
       onBlur={handleBlur}
     />
   )
-})
+}

package/client/components/footer/cmd-history.jsx

@@ -0,0 +1,154 @@
+/**
+ * cmd history trigger button with popover
+ */
+
+import { useState, useEffect } from 'react'
+import { Button, Empty, Popover, Switch } from 'antd'
+import { auto } from 'manate/react'
+import { copy } from '../../common/clipboard'
+import { HistoryOutlined, DeleteOutlined, CopyOutlined, UnorderedListOutlined } from '@ant-design/icons'
+import InputAutoFocus from '../common/input-auto-focus'
+import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
+import './cmd-history.styl'
+
+const e = window.translate
+const SORT_BY_FREQ_KEY = 'electerm-cmd-history-sort-by-frequency'
+
+export default auto(function CmdHistory (props) {
+  const [keyword, setKeyword] = useState('')
+  const [sortByFrequency, setSortByFrequency] = useState(() => {
+    return getItemJSON(SORT_BY_FREQ_KEY, false)
+  })
+  const { terminalCommandHistory } = props.store
+
+  useEffect(() => {
+    setItemJSON(SORT_BY_FREQ_KEY, sortByFrequency)
+  }, [sortByFrequency])
+
+  function handleRunCommand (cmd) {
+    window.store.runCmdFromHistory(cmd)
+  }
+
+  function handleDeleteCommand (cmd, ev) {
+    ev.stopPropagation()
+    terminalCommandHistory.delete(cmd)
+  }
+
+  function handleCopyCommand (cmd, ev) {
+    ev.stopPropagation()
+    copy(cmd)
+  }
+
+  function handleClearAll () {
+    window.store.clearAllCmdHistory()
+  }
+
+  function filterArray (array, keyword) {
+    if (!keyword) {
+      return array
+    }
+    return array.filter(item => item.cmd.toLowerCase().includes(keyword.toLowerCase()))
+  }
+
+  function handleChange (e) {
+    setKeyword(e.target.value)
+  }
+
+  const historyArray = Array.from(terminalCommandHistory || [])
+    .map(([cmd, info]) => ({ cmd, ...info }))
+    .reverse()
+
+  let filtered = filterArray(historyArray, keyword)
+
+  if (sortByFrequency) {
+    filtered = filtered.sort((a, b) => b.count - a.count)
+  }
+
+  const handleSortByFrequencyChange = (checked) => {
+    setSortByFrequency(checked)
+  }
+
+  const renderList = () => {
+    if (filtered.length === 0) {
+      return (
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={e('noData')}
+        />
+      )
+    }
+    return filtered.map((item, index) => (
+      <div
+        key={index}
+        className='cmd-history-item'
+        onClick={() => handleRunCommand(item.cmd)}
+      >
+        <span className='cmd-history-item-text' title={item.cmd}>{item.cmd}</span>
+        <div className='cmd-history-item-actions'>
+          <span className='cmd-history-item-count' title={e('count') + ': ' + item.count}>
+            {item.count}
+          </span>
+          <Button
+            type='text'
+            size='small'
+            icon={<CopyOutlined />}
+            className='cmd-history-item-copy'
+            onClick={(ev) => handleCopyCommand(item.cmd, ev)}
+          />
+          <Button
+            type='text'
+            size='small'
+            icon={<DeleteOutlined />}
+            className='cmd-history-item-delete'
+            onClick={(ev) => handleDeleteCommand(item.cmd, ev)}
+          />
+        </div>
+      </div>
+    ))
+  }
+
+  const content = (
+    <div className='cmd-history-popover-content pd2'>
+      <div className='cmd-history-search pd2b'>
+        <InputAutoFocus
+          value={keyword}
+          onChange={handleChange}
+          placeholder={e('search')}
+          className='cmd-history-search-input'
+          allowClear
+        />
+      </div>
+      <div className='cmd-history-header pd2b'>
+        <Switch
+          checkedChildren={e('sortByFrequency')}
+          unCheckedChildren={e('sortByFrequency')}
+          checked={sortByFrequency}
+          onChange={handleSortByFrequencyChange}
+          size='small'
+        />
+        <UnorderedListOutlined
+          className='cmd-history-clear-icon pointer clear-ai-icon icon-hover'
+          title={e('clear')}
+          onClick={handleClearAll}
+        />
+      </div>
+      <div className='cmd-history-list'>
+        {renderList()}
+      </div>
+    </div>
+  )
+
+  return (
+    <Popover
+      content={content}
+      trigger='click'
+      placement='topLeft'
+    >
+      <Button
+        size='small'
+        type='text'
+        icon={<HistoryOutlined />}
+      />
+    </Popover>
+  )
+})

package/client/components/footer/cmd-history.styl

@@ -0,0 +1,73 @@
+.cmd-history-popover-content
+  max-height 300px
+  width 300px
+  overflow hidden
+  display flex
+  flex-direction column
+
+.cmd-history-search
+  flex-shrink 0
+  position sticky
+  top 0
+
+.cmd-history-header
+  flex-shrink 0
+  display flex
+  align-items center
+  justify-content space-between
+  padding-bottom 8px
+
+.cmd-history-clear-icon
+  font-size 14px
+  padding 4px
+  cursor pointer
+  &:hover
+    color red
+
+.cmd-history-list
+  overflow-x hidden
+  overflow-y auto
+  flex 1
+  min-height 0
+
+.cmd-history-item
+  display flex
+  align-items center
+  justify-content space-between
+  padding 4px 8px
+  cursor pointer
+  &:hover
+    background var(--main-lighter)
+
+.cmd-history-item-text
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+  flex 1
+  min-width 0
+
+.cmd-history-item-count
+  font-size 12px
+  color var(--text-color-secondary)
+  padding 0 4px
+  flex-shrink 0
+
+.cmd-history-item-actions
+  display none
+  flex-shrink 0
+  gap 4px
+  align-items center
+  .cmd-history-item:hover &
+    display flex
+
+.cmd-history-item-delete
+  cursor pointer
+  padding 2px 4px
+  &:hover
+    color red
+
+.cmd-history-item-copy
+  cursor pointer
+  padding 2px 4px
+  &:hover
+    color blue

package/client/components/footer/footer-entry.jsx

@@ -10,6 +10,7 @@ import encodes from '../bookmark-form/common/encodes'
 import { refs } from '../common/ref'
 import Qm from '../quick-commands/quick-commands-select'
 import AIIcon from '../icons/ai-icon'
+import CmdHistory from './cmd-history'
 
 const {
   Option
@@ -131,7 +132,19 @@ export default auto(function FooterEntry (props) {
     )
   }
 
-  const { leftSidebarWidth, openedSideBar, inActiveTerminal } = props.store
+  function renderCmdHistory () {
+    return (
+      <div className='terminal-footer-unit terminal-footer-history'>
+        <CmdHistory store={props.store} />
+      </div>
+    )
+  }
+
+  const {
+    leftSidebarWidth,
+    openedSideBar,
+    inActiveTerminal
+  } = props.store
   const w = 43 + leftSidebarWidth
   const sideProps = openedSideBar
     ? {
@@ -154,6 +167,7 @@ export default auto(function FooterEntry (props) {
     <div {...sideProps}>
       <div className='terminal-footer-flex'>
         {renderAIIcon()}
+        {renderCmdHistory()}
         {renderQuickCommands()}
         {renderBatchInputs()}
         {renderEncodingInfo()}

package/client/components/main/main.jsx

@@ -86,7 +86,6 @@ export default auto(function Index (props) {
     pinned,
     isSecondInstance,
     pinnedQuickCommandBar,
-    wsInited,
     installSrc,
     fileTransfers,
     uiThemeConfig,
@@ -248,14 +247,14 @@ export default auto(function Index (props) {
         <ShortcutControl config={config} />
         <CssOverwrite
           {...confsCss}
-          wsInited={wsInited}
+          configLoaded={configLoaded}
         />
         <Opacity opacity={config.opacity} />
         <TerminalInteractive />
         <UiTheme
           {...themeProps}
         />
-        <CustomCss customCss={config.customCss} />
+        <CustomCss customCss={config.customCss} configLoaded={configLoaded} />
         <TextEditor />
         <UpdateCheck
           skipVersion={config.skipVersion}

package/client/components/main/ui-theme.jsx

@@ -2,8 +2,7 @@
  * ui theme
  */
 
-import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import eq from 'fast-deep-equal'
 import isColorDark from '../../common/is-color-dark'
 
@@ -53,7 +52,7 @@ function buildTheme (themeConfig) {
 export default function UiTheme (props) {
   const { themeConfig } = props
 
-  const delta = useDelta(themeConfig)
+  const prevRef = useRef(null)
 
   async function applyTheme () {
     const style = document.getElementById(themeDomId)
@@ -64,8 +63,13 @@ export default function UiTheme (props) {
   useEffect(() => {
     applyTheme()
   }, [])
-  useConditionalEffect(() => {
-    applyTheme()
-  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, themeConfig)) {
+      applyTheme()
+    }
+    prevRef.current = themeConfig
+  }, [themeConfig])
+
   return null
 }

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

@@ -28,7 +28,7 @@ export default class ProfileList extends List {
     const { activeItemId } = this.props
     const { name, id } = item
     const cls = classnames(
-      'item-list-unit theme-item',
+      'item-list-unit',
       {
         active: activeItemId === id
       }

package/client/components/quick-commands/quick-commands-list.jsx

@@ -63,7 +63,7 @@ export default class QuickCommandsList extends List {
     const { activeItemId } = this.props
     const { name, id } = item
     const cls = classnames(
-      'item-list-unit theme-item',
+      'item-list-unit',
       {
         active: activeItemId === id
       }

package/client/components/quick-commands/quick-commands-select.jsx

@@ -6,8 +6,6 @@ import { PureComponent } from 'react'
 import { Button } from 'antd'
 import './qm.styl'
 
-const e = window.translate
-
 export default class QuickCommandsFooter extends PureComponent {
   componentWillUnmount () {
     clearTimeout(this.timer)
@@ -37,8 +35,7 @@ export default class QuickCommandsFooter extends PureComponent {
           size='small'
           type='text'
         >
-          <span className='w500'>{e('quickCommands')}</span>
-          <span className='l500'>Q</span>
+          Q
         </Button>
       </div>
     )

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

@@ -339,10 +339,29 @@ export default class RdpSession extends PureComponent {
       if (!this.session) return
       try {
         const rect = canvas.getBoundingClientRect()
-        const scaleX = canvas.width / rect.width
-        const scaleY = canvas.height / rect.height
-        const x = Math.round((e.clientX - rect.left) * scaleX)
-        const y = Math.round((e.clientY - rect.top) * scaleY)
+        const { scaleViewport } = this.state
+        let scaleX = canvas.width / rect.width
+        let scaleY = canvas.height / rect.height
+        let offsetX = 0
+        let offsetY = 0
+        if (scaleViewport) {
+          const containerRatio = rect.width / rect.height
+          const canvasRatio = canvas.width / canvas.height
+          let renderWidth, renderHeight
+          if (containerRatio > canvasRatio) {
+            renderHeight = rect.height
+            renderWidth = rect.height * canvasRatio
+            offsetX = (rect.width - renderWidth) / 2
+          } else {
+            renderWidth = rect.width
+            renderHeight = rect.width / canvasRatio
+            offsetY = (rect.height - renderHeight) / 2
+          }
+          scaleX = canvas.width / renderWidth
+          scaleY = canvas.height / renderHeight
+        }
+        const x = Math.round((e.clientX - rect.left - offsetX) * scaleX)
+        const y = Math.round((e.clientY - rect.top - offsetY) * scaleY)
         const event = window.ironRdp.DeviceEvent.mouseMove(x, y)
         const tx = new window.ironRdp.InputTransaction()
         tx.addEvent(event)

package/client/components/session/session.styl

@@ -78,9 +78,7 @@
     border-radius 0
   &::-webkit-scrollbar-corner
     background var(--main-darker)
-.vnc-session-wrap > div
-  display block !important
-  overflow hidden !important
+
 .not-split-view > .ant-splitter-bar .ant-splitter-bar-dragger
   display none
 

package/client/components/setting-panel/list.styl

@@ -36,6 +36,13 @@
     .list-item-remove
     .list-item-bookmark
       display block
+.theme-item:hover
+    .list-item-remove
+      right 24px
+.setting-tabs-setting
+  .item-list-unit
+    .list-item-remove
+      display none
 // .item-list
 //   .list-item-edit
 //   .list-item-apply

package/client/components/setting-panel/terminal-bg-config.jsx

@@ -254,3 +254,5 @@ export default function TerminalBackgroundConfig ({
     </div>
   )
 }
+
+TerminalBackgroundConfig.displayName = 'TerminalBackgroundConfig'