@electerm/electerm-react 2.8.16 → 2.10.26

package/client/components/common/notification.jsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { CloseOutlined } from '@ant-design/icons'
+import { CloseOutlined, CopyOutlined } from '@ant-design/icons'
 import classnames from 'classnames'
 import generateId from '../../common/uid'
 import { messageIcons } from '../../common/icon-helpers.jsx'
+import { copy } from '../../common/clipboard'
 import './notification.styl'
 
 const notifications = []
@@ -69,6 +70,19 @@ export function NotificationContainer () {
   )
 }
 
+function getTextFromReactChildren (children) {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children)
+  }
+  if (React.isValidElement(children)) {
+    return getTextFromReactChildren(children.props.children)
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextFromReactChildren).join('\n')
+  }
+  return ''
+}
+
 function NotificationItem ({ message, description, type, onClose, duration = 18.5 }) {
   const timeoutRef = useRef(null)
 
@@ -97,6 +111,12 @@ function NotificationItem ({ message, description, type, onClose, duration = 18.
     }
   }
 
+  const handleCopy = (text, e) => {
+    e.stopPropagation()
+    const textToCopy = getTextFromReactChildren(text)
+    copy(textToCopy)
+  }
+
   const className = classnames('notification', type)
 
   return (
@@ -109,8 +129,20 @@ function NotificationItem ({ message, description, type, onClose, duration = 18.
         <div className='notification-message'>
           <div className='notification-icon'>{messageIcons[type]}</div>
           <div className='notification-title' title={message}>{message}</div>
+          <CopyOutlined
+            className='notification-copy-icon'
+            onClick={(e) => handleCopy(message, e)}
+          />
         </div>
-        {description && <div className='notification-description'>{description}</div>}
+        {description && (
+          <div className='notification-description'>
+            {description}
+            <CopyOutlined
+              className='notification-copy-icon'
+              onClick={(e) => handleCopy(description, e)}
+            />
+          </div>
+        )}
       </div>
       <CloseOutlined className='notification-close' onClick={onClose} />
     </div>

package/client/components/common/notification.styl

@@ -33,9 +33,10 @@
   top 10px
 
 .notification-description
-  word-wrap break-all
+  word-wrap break-word
   max-height 200px
   overflow auto
+  padding 10px 0 0 0
 
 .notification-close
   position absolute
@@ -48,4 +49,19 @@
   cursor pointer
   padding 0
   &:hover
-    color var(--text)
+    color var(--text)
+
+.notification-copy-icon
+  cursor pointer
+  font-size 14px
+  position absolute
+  right 10px
+  top 45px
+  margin-left 8px
+  display none
+.notification-message .notification-copy-icon
+  right 38px
+  top 14px
+.notification-message:hover .notification-copy-icon,
+.notification-description:hover .notification-copy-icon
+  display inline-block

package/client/components/main/wrapper.styl

@@ -1,10 +1,3 @@
-.common-err-desc
-  &:hover
-    text-overflow clip
-    overflow-x hidden
-    white-space pre
-    max-height 300px
-    overflow scroll
 
 .error-wrapper
   background var(--main)

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

@@ -6,14 +6,15 @@ import { handleErr } from '../../common/fetch'
 import {
   statusMap
 } from '../../common/constants'
-import {
-  Spin,
-  Select
-} from 'antd'
 import {
   ReloadOutlined,
   EditOutlined
 } from '@ant-design/icons'
+import {
+  Spin,
+  Select,
+  Switch
+} from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import scanCode from './code-scan'
 import resolutions from './resolutions'
@@ -46,10 +47,13 @@ export default class RdpSession extends PureComponent {
   constructor (props) {
     const id = `rdp-reso-${props.tab.host}`
     const resObj = ls.getItemJSON(id, resolutions[1])
+    const scaleViewportId = `rdp-scale-view-${props.tab.host}`
+    const scaleViewport = ls.getItemJSON(scaleViewportId, false)
     super(props)
     this.canvasRef = createRef()
     this.state = {
       loading: false,
+      scaleViewport,
       ...resObj
     }
     this.session = null
@@ -76,7 +80,7 @@ export default class RdpSession extends PureComponent {
     }
   }
 
-  runInitScript = () => {}
+  runInitScript = () => { }
 
   setStatus = status => {
     const id = this.props.tab?.id
@@ -267,7 +271,7 @@ export default class RdpSession extends PureComponent {
         const kind = e.kind ? e.kind() : 'Unknown'
         const bt = e.backtrace ? e.backtrace() : ''
         return `[${kindNames[kind] || kind}] ${bt}`
-      } catch (_) {}
+      } catch (_) { }
     }
     return e?.message || e?.toString() || String(e)
   }
@@ -446,6 +450,14 @@ export default class RdpSession extends PureComponent {
     this.setState(res, this.handleReInit)
   }
 
+  handleScaleViewChange = (v) => {
+    const scaleViewportId = `rdp-scale-view-${this.props.tab.host}`
+    ls.setItemJSON(scaleViewportId, v)
+    this.setState({
+      scaleViewport: v
+    })
+  }
+
   renderHelp = () => {
     return null
   }
@@ -462,7 +474,7 @@ export default class RdpSession extends PureComponent {
       onSendCtrlAltDel: this.handleSendCtrlAltDel,
       screens: [], // RDP doesn't have multi-screen support like VNC
       currentScreen: null,
-      onSelectScreen: () => {}, // No-op for RDP
+      onSelectScreen: () => { }, // No-op for RDP
       fixedPosition,
       showExitFullscreen,
       className
@@ -517,8 +529,17 @@ export default class RdpSession extends PureComponent {
       onChange: this.handleResChange,
       popupMatchSelectWidth: false
     }
+    const scaleProps = {
+      checked: this.state.scaleViewport,
+      onChange: this.handleScaleViewChange,
+      unCheckedChildren: window.translate('scaleViewport'),
+      checkedChildren: window.translate('scaleViewport'),
+      className: 'mg1l'
+    }
     return (
-      <div className='pd1 fix session-v-info'>
+      <div
+        className='pd1 fix session-v-info'
+      >
         <div className='fleft'>
           <ReloadOutlined
             onClick={this.handleReInit}
@@ -547,6 +568,9 @@ export default class RdpSession extends PureComponent {
           />
           {this.renderInfo()}
           {this.renderHelp()}
+          <Switch
+            {...scaleProps}
+          />
         </div>
         <div className='fright'>
           {this.props.fullscreenIcon()}
@@ -582,25 +606,34 @@ export default class RdpSession extends PureComponent {
         height: h + 'px'
       }
     }
-    const { width, height, loading } = this.state
+    const { width, height, loading, scaleViewport } = this.state
     const canvasProps = {
       width,
       height,
       tabIndex: 0
     }
+    if (scaleViewport) {
+      Object.assign(canvasProps, {
+        style: {
+          width: '100%',
+          objectFit: 'contain'
+        }
+      })
+    }
+    const cls = 'rdp-session-wrap session-v-wrap'
     const controlProps = this.getControlProps()
     return (
       <Spin spinning={loading}>
         <div
           {...rdpProps}
-          className='rdp-session-wrap session-v-wrap'
+          className={cls}
         >
           {this.renderControl()}
-          <RemoteFloatControl {...controlProps} />
           <canvas
             {...canvasProps}
             ref={this.canvasRef}
           />
+          <RemoteFloatControl {...controlProps} />
         </div>
       </Spin>
     )

package/client/components/session/session.jsx

@@ -8,6 +8,7 @@ import Sftp from '../sftp/sftp-entry'
 import RdpSession from '../rdp/rdp-session'
 import VncSession from '../vnc/vnc-session'
 import WebSession from '../web/web-session.jsx'
+import SpiceSession from '../spice/spice-session'
 import {
   SearchOutlined,
   FullscreenOutlined,
@@ -29,7 +30,8 @@ import {
   terminalVncType,
   terminalWebType,
   terminalTelnetType,
-  terminalFtpType
+  terminalFtpType,
+  terminalSpiceType
 } from '../../common/constants'
 import { SplitViewIcon } from '../icons/split-view'
 import { refs } from '../common/ref'
@@ -269,7 +271,7 @@ export default class SessionWrapper extends Component {
         />
       )
     }
-    if (type === terminalRdpType || type === terminalVncType) {
+    if (type === terminalRdpType || type === terminalVncType || type === terminalSpiceType) {
       const rdpProps = {
         tab: this.props.tab,
         ...pick(this.props, [
@@ -299,6 +301,13 @@ export default class SessionWrapper extends Component {
           />
         )
       }
+      if (type === terminalSpiceType) {
+        return (
+          <SpiceSession
+            {...rdpProps}
+          />
+        )
+      }
 
       return (
         <RdpSession
@@ -373,7 +382,8 @@ export default class SessionWrapper extends Component {
       type === terminalVncType ||
       type === terminalWebType ||
       type === terminalTelnetType ||
-      type === terminalFtpType
+      type === terminalFtpType ||
+      type === terminalSpiceType
   }
 
   calcSftpWidthHeight = () => {

package/client/components/setting-panel/deep-link-control.jsx

@@ -65,12 +65,13 @@ export default function DeepLinkControl () {
   }
 
   const renderTooltipContent = () => {
-    const protocols = ['ssh', 'telnet']
+    const protocols = ['ssh', 'telnet', 'rdp', 'vnc', 'serial', 'spice', 'electerm']
+    const tip = `Register electerm to handle protocol URLs (${protocols.join('://, ')})`
 
     return (
       <div>
         <div className='pd1b'>
-          Register electerm to handle protocol URLs (ssh://, telnet://)
+          {tip}
         </div>
 
         {registrationStatus && (

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

@@ -27,7 +27,6 @@ export default class KeywordsTransport extends BookmarkTransport {
     const { store } = this.props
     const arr = store.config.keywords || []
     const txt = JSON.stringify(arr, null, 2)
-    console.log(txt, 'txt')
     const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
     download('electerm-' + this.name + '-' + stamp + '.json', txt)
   }

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

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react'
+import { PureComponent, createRef } from 'react'
 import {
   Button,
   Input
@@ -19,39 +19,27 @@ export default class ShortcutEdit extends PureComponent {
     data: null
   }
 
+  containerRef = createRef()
+
+  componentWillUnmount () {
+    this.removeEventListener()
+  }
+
   addEventListener = () => {
-    const elem = document.querySelector('.ant-drawer')
-    elem?.addEventListener('click', this.handleClickOuter)
+    document.addEventListener('click', this.handleClickOuter, true)
     document.addEventListener('keydown', this.handleKeyDown)
     document.addEventListener('mousewheel', this.handleKeyDown)
   }
 
   removeEventListener = () => {
-    const elem = document.querySelector('.ant-drawer')
-    elem?.removeEventListener('click', this.handleClickOuter)
+    document.removeEventListener('click', this.handleClickOuter, true)
     document.removeEventListener('keydown', this.handleKeyDown)
     document.removeEventListener('mousewheel', this.handleKeyDown)
   }
 
-  isInsideElement = (event) => {
-    const { target } = event
-    const cls = this.getCls()
-    if (!target || !target.classList) {
-      return false
-    } else if (target.classList.contains(cls)) {
-      return true
-    } else {
-      const parent = target.parentElement
-      if (parent !== null) {
-        return this.isInsideElement({ target: parent })
-      } else {
-        return false
-      }
-    }
-  }
-
   handleClickOuter = (e) => {
-    if (!this.isInsideElement(e)) {
+    const container = this.containerRef.current
+    if (container && !container.contains(e.target)) {
       this.handleCancel()
     }
   }
@@ -78,11 +66,6 @@ export default class ShortcutEdit extends PureComponent {
     this.handleCancel()
   }
 
-  getCls = () => {
-    const { index } = this.props.data
-    return 'shortcut-control-' + index
-  }
-
   warnCtrolKey = throttle(() => {
     message.info(
       'Must have one of Ctrl or Shift or Alt or Meta key',
@@ -131,13 +114,6 @@ export default class ShortcutEdit extends PureComponent {
     })
   }
 
-  handleClickOutside = () => {
-    this.removeEventListener()
-    this.setState({
-      editMode: false
-    })
-  }
-
   renderStatic () {
     const {
       shortcut
@@ -199,7 +175,7 @@ export default class ShortcutEdit extends PureComponent {
       return this.renderStatic()
     }
     return (
-      <div className={this.getCls()}>
+      <div ref={this.containerRef}>
         <Input
           suffix={this.renderAfter()}
           value={shortcut}

package/client/components/shortcuts/shortcut-handler.js

@@ -175,12 +175,18 @@ export function shortcutExtend (Cls) {
       type === 'keydown' &&
       !altKey &&
       !shiftKey &&
-      ctrlKey &&
-      this.zmodemClient &&
-      this.zmodemClient.isActive
+      ctrlKey
     ) {
-      this.zmodemClient.cancel()
-      return false
+      // Cancel zmodem transfer if active
+      if (this.zmodemClient && this.zmodemClient.isActive) {
+        this.zmodemClient.cancel()
+        return false
+      }
+      // Cancel trzsz transfer if active
+      if (this.trzszClient && this.trzszClient.isActive) {
+        this.trzszClient.cancel()
+        return false
+      }
     }
 
     let codeName

package/client/components/sidebar/index.jsx

@@ -7,7 +7,8 @@ import {
   SettingOutlined,
   UpCircleOutlined,
   BarsOutlined,
-  AppstoreOutlined
+  AppstoreOutlined,
+  RobotOutlined
 } from '@ant-design/icons'
 import { Tooltip } from 'antd'
 import SideBarPanel from './sidebar-panel'
@@ -86,6 +87,7 @@ export default function Sidebar (props) {
 
   const {
     onNewSsh,
+    onNewSshAI,
     openSetting,
     openAbout,
     openSettingSync,
@@ -142,6 +144,14 @@ export default function Sidebar (props) {
             onClick={onNewSsh}
           />
         </SideIcon>
+        <SideIcon
+          title={e('createBookmarkByAI')}
+        >
+          <RobotOutlined
+            className='font20 iblock control-icon'
+            onClick={onNewSshAI}
+          />
+        </SideIcon>
         <SideIcon
           title={e(settingMap.bookmarks)}
           active={bookmarksActive}