@electerm/electerm-react 1.51.8 → 1.51.18

package/client/common/constants.js

@@ -38,7 +38,7 @@ export const contextMenuPaddingTop = 10
 export const sftpControlHeight = 42 + 30
 export const sidebarWidth = 43
 export const maxHistory = 50
-export const maxTransport = 5
+export const maxTransport = 1
 export const maxSftpHistory = 20
 export const maxZoom = 8
 export const minZoom = 0.5
@@ -306,6 +306,7 @@ export const sshTunnelHelpLink = 'https://github.com/electerm/electerm/wiki/How-
 export const batchOpHelpLink = 'https://github.com/electerm/electerm/wiki/batch-operation'
 export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-format'
 export const regexHelpLink = 'https://github.com/electerm/electerm/wiki/Terminal-keywords-highlight-regular-expression-exmaples'
+export const connectionHoppingWikiLink = 'https://github.com/electerm/electerm/wiki/Connection-Hopping-Behavior-Change-in-electerm-since-v1.50.65'
 export const modals = {
   hide: 0,
   setting: 1,
@@ -397,3 +398,17 @@ export const syncDataMaps = {
   profiles: ['profiles'],
   addressBookmarks: ['addressBookmarks']
 }
+export const terminalTypes = [
+  'xterm-256color',
+  'xterm-new',
+  'xterm-color',
+  'xterm-vt220',
+  'xterm',
+  'linux',
+  'vt100',
+  'ansi',
+  'rxvt'
+]
+export const sshConfigLoadKey = 'ssh-config-loaded'
+export const sshConfigKey = 'ignore-ssh-config'
+export const connectionHoppingWarnKey = 'connectionHoppingWarnned'

package/client/common/default-setting.js

@@ -39,7 +39,6 @@ export default {
   initDefaultTabOnStart: true,
   screenReaderMode: false,
   autoRefreshWhenSwitchToSftp: false,
-  hideSshConfig: false,
   addTimeStampToTermLog: false,
   sftpPathFollowSsh: false,
   keepaliveInterval: 0,

package/client/common/is-color-dark.js

@@ -17,17 +17,21 @@ function expandShorthandColor (color) {
 }
 
 export default function isColorDark (_color) {
-  let color = expandShorthandColor(_color)
-  if (color.charAt(0) === '#') {
-    color = color.slice(1) // Remove the '#' if present
-  }
-  const r = parseInt(color.substr(0, 2), 16)
-  const g = parseInt(color.substr(2, 2), 16)
-  const b = parseInt(color.substr(4, 2), 16)
+  try {
+    let color = expandShorthandColor(_color)
+    if (color.charAt(0) === '#') {
+      color = color.slice(1) // Remove the '#' if present
+    }
+    const r = parseInt(color.substr(0, 2), 16)
+    const g = parseInt(color.substr(2, 2), 16)
+    const b = parseInt(color.substr(4, 2), 16)
 
-  // Formula to determine brightness
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+    // Formula to determine brightness
+    const brightness = (r * 299 + g * 587 + b * 114) / 1000
 
-  // Decide based on brightness threshold
-  return brightness < 128 // You can adjust this threshold as needed
+    // Decide based on brightness threshold
+    return brightness < 128 // You can adjust this threshold as needed
+  } catch (e) {
+    return true
+  }
 }

package/client/common/new-terminal.js

@@ -11,11 +11,11 @@ const e = window.translate
 window.et.tabCount = 0
 
 export function updateCount (tab) {
-  tab.tabCount = window.et.tabCount
   window.et.tabCount++
+  return window.et.tabCount
 }
 
-export default (removeTitle, noUpdateCount) => {
+export default (removeTitle) => {
   const res = {
     id: uid(),
     status: 'processing',
@@ -25,8 +25,5 @@ export default (removeTitle, noUpdateCount) => {
   if (removeTitle) {
     delete res.title
   }
-  if (!noUpdateCount) {
-    updateCount(res)
-  }
   return res
 }

package/client/common/reverse-color.js

@@ -0,0 +1,12 @@
+export function getReverseColor (hex) {
+  // Check if the input is a valid hex color code
+  if (!/^#[0-9a-fA-F]{6}$/.test(hex)) {
+    return '#0088cc'
+  }
+  // Convert the hex color code to an integer
+  const num = parseInt(hex.slice(1), 16)
+  // Bitwise XOR the integer with 0xFFFFFF to get the reverse color
+  const reverse = num ^ 0xFFFFFF
+  // Convert the reverse color to a hex string and pad with zeros if needed
+  return '#' + reverse.toString(16).padStart(6, '0')
+}

package/client/common/ws.js

@@ -5,6 +5,7 @@
 import generate from './uid'
 import wait from './wait'
 import copy from 'json-deep-copy'
+import { pick } from 'lodash-es'
 
 const onces = {}
 const wss = {}
@@ -151,7 +152,9 @@ export default (type, id, sessionId = '', sftpId = '', persist) => {
         id,
         sessionId,
         sftpId,
-        window.store.config
+        pick(window.store.config, [
+          'host', 'port', 'tokenElecterm'
+        ])
       ]
     })
     onces[id] = {

package/client/components/bookmark-form/render-connection-hopping.jsx

@@ -6,7 +6,10 @@ import {
   Button,
   Table
 } from 'antd'
-import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+import {
+  formItemLayout,
+  tailFormItemLayout
+} from '../../common/form-layout'
 import {
   MinusCircleFilled,
   PlusOutlined
@@ -14,10 +17,13 @@ import {
 import RenderAuth from './render-auth-ssh'
 import uid from '../../common/uid'
 import {
-  authTypeMap
+  authTypeMap,
+  connectionHoppingWarnKey
 } from '../../common/constants'
 import { useState } from 'react'
+import ConnectionHoppingWarningText from '../common/connection-hopping-warning-text'
 import BookmarkSelect from './bookmark-select'
+import * as ls from '../../common/safe-local-storage'
 
 const FormItem = Form.Item
 const RadioButton = Radio.Button
@@ -35,6 +41,12 @@ export default function renderConnectionHopping (props) {
     port: 22,
     authType: authTypeMap.password
   })
+  const [showWarn, setShowWarn] = useState(
+    window.store.hasOldConnectionHoppingBookmark && ls.getItem(connectionHoppingWarnKey) !== 'yes'
+  )
+  function closeWarn () {
+    setShowWarn(false)
+  }
   const [list, setList] = useState(formData.connectionHoppings || [])
   function onChangeAuthType (e) {
     editState(old => {
@@ -139,6 +151,16 @@ export default function renderConnectionHopping (props) {
       </FormItem>
     )
   }
+  function renderWarn () {
+    if (!showWarn) {
+      return null
+    }
+    return (
+      <FormItem {...tailFormItemLayout}>
+        <ConnectionHoppingWarningText closeWarn={closeWarn} />
+      </FormItem>
+    )
+  }
   const treeProps = {
     bookmarks: store.bookmarks.filter(d => {
       return d.host && d.port && d.username
@@ -160,6 +182,7 @@ export default function renderConnectionHopping (props) {
         initialValues={initialValues}
       >
         {renderList()}
+        {renderWarn()}
         <FormItem
           {...formItemLayout}
           label={e('chooseFromBookmarks')}

package/client/components/bookmark-form/ssh-form.jsx

@@ -197,8 +197,7 @@ export default class BookmarkForm extends PureComponent {
   }
 
   setNewItem = (
-    settingItem = getInitItem([],
-      settingMap.bookmarks)
+    settingItem = getInitItem([], settingMap.bookmarks)
   ) => {
     const { store } = this.props
     this.props.store.storeAssign({

package/client/components/bookmark-form/tree-delete.jsx

@@ -4,22 +4,17 @@ import {
   Button
 } from 'antd'
 import { defaultBookmarkGroupId, settingMap } from '../../common/constants'
+import deepCopy from 'json-deep-copy'
 
 const e = window.translate
 
 export default class BookmarkTreeDelete extends StartSessionSelect {
   onExpand = (expandedKeys) => {
-    window.store.setState(
-      'expandedKeys',
-      expandedKeys
-    )
+    window.store.expandedKeys = deepCopy(expandedKeys)
   }
 
   onCheck = (checkedKeys) => {
-    window.store.setState(
-      'checkedKeys',
-      checkedKeys
-    )
+    window.store.checkedKeys = deepCopy(checkedKeys)
   }
 
   handleDel = () => {
@@ -42,13 +37,13 @@ export default class BookmarkTreeDelete extends StartSessionSelect {
     const arr = checkedKeys.filter(d => d !== defaultBookmarkGroupId)
     store.delItems(arr, settingMap.bookmarks)
     store.delItems(arr, settingMap.bookmarkGroups)
-    store.setState('checkedKeys', [])
+    store.checkedKeys = []
   }
 
   handleCancel = () => {
     const { store } = window
     store.bookmarkSelectMode = false
-    store.setState('checkedKeys', [])
+    store.checkedKeys = []
   }
 
   render () {

package/client/components/bookmark-form/use-ui.jsx

@@ -16,7 +16,7 @@ import {
 import { formItemLayout } from '../../common/form-layout'
 import defaultSettings from '../../common/default-setting'
 import mapper from '../../common/auto-complete-data-mapper'
-import { defaultEnvLang } from '../../common/constants'
+import { defaultEnvLang, terminalTypes } from '../../common/constants'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -26,7 +26,6 @@ export default function useBookmarkFormUI (props) {
     fontFamily: defaultFontFamily,
     fontSize: defaultFontSize
   } = defaultSettings
-  const { terminalTypes } = props.store.config
   return [
     <FormItem
       {...formItemLayout}

package/client/components/common/connection-hopping-warning-text.jsx

@@ -0,0 +1,36 @@
+import {
+  Button
+} from 'antd'
+import Link from './external-link'
+import {
+  connectionHoppingWikiLink,
+  connectionHoppingWarnKey
+} from '../../common/constants'
+import * as ls from '../../common/safe-local-storage'
+
+const e = window.translate
+
+export default function ConnectionHoppingWarningText (props) {
+  function handleRead () {
+    ls.setItem(connectionHoppingWarnKey, 'yes')
+    props.closeWarn()
+  }
+  return (
+    <div className='pd1'>
+      <div className='pd1b'>
+        <span>{e('connectionHoppingWarning')}</span>
+      </div>
+      <div className='pd1b'>
+        <Link to={connectionHoppingWikiLink}>{connectionHoppingWikiLink}</Link>
+      </div>
+      <div className='pd1b'>
+        <Button
+          onClick={handleRead}
+          size='small'
+        >
+          {e('haveRead')}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/client/components/common/drag-handle.jsx

@@ -0,0 +1,60 @@
+import { useCallback, useRef, useState, memo } from 'react'
+import './drag-handle.styl'
+
+export default memo(function DragHandle (props) {
+  const [isDragging, setIsDragging] = useState(false)
+  const dragStartRef = useRef(false)
+  const clientXRef = useRef(0)
+  const {
+    max,
+    min,
+    width,
+    left = true
+  } = props
+
+  const calc = useCallback((clientX) => {
+    let nw = left
+      ? clientX - clientXRef.current + width
+      : clientXRef.current - clientX + width
+    if (nw < min) {
+      nw = min
+    } else if (nw > max) {
+      nw = max
+    }
+    return nw
+  }, [props.max, props.min, props.left])
+
+  const handleMousedown = useCallback((e) => {
+    e.stopPropagation()
+    setIsDragging(true)
+    dragStartRef.current = true
+    clientXRef.current = e.clientX
+    window.addEventListener('mouseup', handleMouseup)
+    window.addEventListener('mousemove', handleMousemove)
+  }, [])
+
+  const handleMouseup = useCallback((e) => {
+    setIsDragging(false)
+    dragStartRef.current = false
+    const nw = calc(e.clientX)
+    props.onDragEnd(nw)
+    window.store.onResize()
+    window.removeEventListener('mouseup', handleMouseup)
+    window.removeEventListener('mousemove', handleMousemove)
+  }, [])
+
+  const handleMousemove = useCallback((e) => {
+    const nw = calc(e.clientX)
+    props.onDragMove(nw)
+  }, [width])
+  const divProps = {
+    className: 'drag-handle' + (isDragging ? ' dragging' : ''),
+    onMouseDown: handleMousedown,
+    draggable: false
+  }
+  return (
+    <div
+      {...divProps}
+    />
+  )
+})

package/client/components/common/drag-handle.styl

@@ -0,0 +1,12 @@
+
+.drag-handle
+  position absolute
+  right 0
+  top 0
+  width 3px
+  bottom 0
+  cursor ew-resize
+  display none
+  z-index 201
+  &.dragging
+    background #08c

package/client/components/layout/layout.jsx

@@ -40,9 +40,10 @@ export default auto(function Layout (props) {
       rightPanelVisible,
       rightPanelPinned,
       rightPanelWidth,
-      resizeTrigger
+      resizeTrigger,
+      inActiveTerminal
     } = props.store
-    const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0) + resizeTrigger
+    const h = height - footerHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) + resizeTrigger
     const l = pinned ? 43 + leftSidebarWidth : 43
     const r = rightPanelVisible && rightPanelPinned ? rightPanelWidth : 0
     return {

package/client/components/main/connection-hopping-warnning.jsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react'
+import ConnectionHoppingWarningText from '../common/connection-hopping-warning-text'
+import {
+  notification
+} from 'antd'
+import * as ls from '../../common/safe-local-storage'
+import {
+  connectionHoppingWarnKey
+} from '../../common/constants'
+
+const e = window.translate
+
+export default function ConnectionHoppingWarning (props) {
+  const {
+    hasOldConnectionHoppingBookmark,
+    configLoaded
+  } = props
+  function closeWarn () {
+    notification.destroy(connectionHoppingWarnKey)
+  }
+  function showWarning () {
+    if (
+      !hasOldConnectionHoppingBookmark ||
+      !configLoaded ||
+      ls.getItem(connectionHoppingWarnKey) === 'yes'
+    ) {
+      return
+    }
+    notification.info({
+      message: e('connectionHopping'),
+      duration: 0,
+      placement: 'bottom',
+      key: connectionHoppingWarnKey,
+      description: (
+        <ConnectionHoppingWarningText
+          closeWarn={closeWarn}
+        />
+      )
+    })
+  }
+  useEffect(() => {
+    showWarning()
+  }, [configLoaded, hasOldConnectionHoppingBookmark])
+  return null
+}

package/client/components/main/error-wrapper.jsx

@@ -1,11 +1,35 @@
 import React from 'react'
 import { FrownOutlined, ReloadOutlined } from '@ant-design/icons'
-import { Button } from 'antd'
+import { Button, message } from 'antd'
 import {
-  logoPath1
+  logoPath1,
+  packInfo,
+  isMac,
+  isWin
 } from '../../common/constants'
+import Link from '../common/external-link'
+import fs from '../../common/fs'
+import { copy } from '../../common/clipboard'
 
 const e = window.translate
+const os = isMac ? 'mac' : isWin ? 'windows' : 'linux'
+const troubleshootContent = {
+  runInCommandLine: {
+    mac: '/Applications/electerm.app/Contents/MacOS/electerm',
+    linux: 'path/to/electerm',
+    windows: 'path\\to\\electerm.exe'
+  },
+  clearConfig: {
+    mac: 'rm -rf ~/Library/Application\\ Support/electerm/users/default_user/electerm.data.nedb',
+    linux: 'rm -rf ~/.config/electerm/users/default_user/electerm.data.nedb',
+    windows: 'Delete C:\\Users\\your-user-name\\AppData\\Roaming\\electerm\\users\\default_user\\electerm.data.nedb'
+  },
+  clearData: {
+    mac: 'rm -rf ~/Library/Application\\ Support/electerm*',
+    linux: 'rm -rf ~/.config/electerm',
+    windows: 'Delete C:\\Users\\your-user-name\\AppData\\Roaming\\electerm'
+  }
+}
 
 export default class ErrorBoundary extends React.PureComponent {
   constructor (props) {
@@ -28,12 +52,101 @@ export default class ErrorBoundary extends React.PureComponent {
     window.location.reload()
   }
 
+  handleClearData = async () => {
+    await fs.rmrf(troubleshootContent.clearData[os])
+      .then(
+        () => {
+          message.success('Data cleared')
+        }
+      )
+  }
+
+  handleClearConfig = async () => {
+    await fs.rmrf(troubleshootContent.clearConfig[os])
+      .then(
+        () => {
+          message.success('Config cleared')
+        }
+      )
+  }
+
+  handleCopy = () => {
+    copy(troubleshootContent.runInCommandLine[os])
+  }
+
+  renderButton = type => {
+    if (type === 'clearData') {
+      return (
+        <Button
+          className='mg1l'
+          onClick={this.handleClearData}
+        >
+          {e('clearData')}
+        </Button>
+      )
+    }
+    if (type === 'runInCommandLine') {
+      return (
+        <Button
+          className='mg1l'
+          onClick={this.handleCopy}
+        >
+          {e('copy')}
+        </Button>
+      )
+    }
+    return (
+      <Button
+        className='mg1l'
+        onClick={this.handleClearConfig}
+      >
+        {e('clearConfig')}
+      </Button>
+    )
+  }
+
+  renderTroubleShoot = () => {
+    const {
+      bugs: {
+        url: bugReportLink
+      }
+    } = packInfo
+    const bugUrl = `${bugReportLink}/new/choose`
+    return (
+      <div className='pd1y wordbreak'>
+        <h2>{e('troubleShoot')}</h2>
+        <p>Electerm Version: {packInfo.version}, OS: {os}</p>
+        {
+          Object.keys(troubleshootContent).map((k, i) => {
+            const v = troubleshootContent[k]
+            const cmd = v[os]
+            return (
+              <div className='pd1b' key={k}>
+                <h3>{e(k)} {this.renderButton(k)}</h3>
+                <p><code>{cmd}</code></p>
+              </div>
+            )
+          })
+        }
+        <div className='pd1b'>
+          <Link to={bugUrl}>{e('bugReport')}</Link>
+        </div>
+        <div className='pd3y'>
+          <img
+            src='https://electerm.html5beta.com/electerm-wechat-group-qr.jpg'
+            className='mwm-100'
+          />
+        </div>
+      </div>
+    )
+  }
+
   render () {
     if (this.state.hasError) {
       const { stack, message } = this.state.error
       return (
-        <div className='pd3 aligncenter error-wrapper'>
-          <div className='pd2y aligncenter'>
+        <div className='pd3 error-wrapper'>
+          <div className='pd2y'>
             <img src={logoPath1} className='iblock mwm-100' />
           </div>
           <h1>
@@ -41,7 +154,6 @@ export default class ErrorBoundary extends React.PureComponent {
             <span className='iblock mg1r'>{e('error')}</span>
             <Button
               onClick={this.handleReload}
-              className='iblock'
               icon={<ReloadOutlined />}
             >
               {e('reload')}
@@ -49,6 +161,9 @@ export default class ErrorBoundary extends React.PureComponent {
           </h1>
           <div className='pd1y'>{message}</div>
           <div className='pd1y'>{stack}</div>
+          {
+            this.renderTroubleShoot()
+          }
         </div>
       )
     }

package/client/components/main/main.jsx

@@ -26,6 +26,9 @@ import { LoadingUI } from './loading'
 import { ConfigProvider, notification, message } from 'antd'
 import InfoModal from '../sidebar/info-modal.jsx'
 import RightSidePanel from '../side-panel-r/side-panel-r'
+import ConnectionHoppingWarning from './connection-hopping-warnning'
+import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
+import LoadSshConfigs from '../ssh-config/load-ssh-configs'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -90,7 +93,6 @@ export default auto(function Index (props) {
     isSecondInstance,
     pinnedQuickCommandBar,
     wsInited,
-    upgradeInfo,
     installSrc,
     fileTransfers,
     uiThemeConfig,
@@ -98,6 +100,7 @@ export default auto(function Index (props) {
     transferToConfirm,
     openResolutionEdit
   } = store
+  const upgradeInfo = deepCopy(store.upgradeInfo)
   const cls = classnames({
     loaded: configLoaded,
     'not-webapp': !window.et.isWebApp,
@@ -174,7 +177,7 @@ export default auto(function Index (props) {
     innerWidth: store.innerWidth
   }
   const resProps = {
-    resolutions: store.resolutions,
+    resolutions: deepCopy(store.resolutions),
     openResolutionEdit
   }
   const contextMenuProps = {
@@ -190,7 +193,7 @@ export default auto(function Index (props) {
     rightPanelWidth: store.rightPanelWidth
   }
   const terminalInfoProps = {
-    ...store.terminalInfoProps,
+    ...deepCopy(store.terminalInfoProps),
     ...pick(
       config,
       ['host', 'port', 'saveTerminalLogToFile', 'terminalInfos']
@@ -199,6 +202,17 @@ export default auto(function Index (props) {
       'appPath'
     ])
   }
+  const sshConfigProps = {
+    ...pick(store, [
+      'settingTab',
+      'showModal',
+      'sshConfigs'
+    ])
+  }
+  const warningProps = {
+    hasOldConnectionHoppingBookmark: store.hasOldConnectionHoppingBookmark,
+    configLoaded
+  }
   return (
     <ConfigProvider
       theme={uiThemeConfig}
@@ -257,6 +271,12 @@ export default auto(function Index (props) {
         <RightSidePanel {...rightPanelProps}>
           <TerminalInfo {...terminalInfoProps} />
         </RightSidePanel>
+        <SshConfigLoadNotify {...sshConfigProps} />
+        <LoadSshConfigs
+          showSshConfigModal={store.showSshConfigModal}
+          sshConfigs={store.sshConfigs}
+        />
+        <ConnectionHoppingWarning {...warningProps} />
       </div>
     </ConfigProvider>
   )