@electerm/electerm-react 1.39.2 → 1.39.18

package/client/common/constants.js

@@ -238,6 +238,7 @@ export const terminalActions = {
   openTerminalSearch: 'open-terminal-search',
   doSearchNext: 'do-search-next',
   doSearchPrev: 'do-search-prev',
+  clearSearch: 'clear-search',
   zoom: 'zoom-terminal'
 }
 export const fileActions = {
@@ -317,6 +318,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 rdpHelpLink = 'https://github.com/electerm/electerm/wiki/RDP-limitation'
 export const modals = {
   hide: 0,
   setting: 1,

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

@@ -209,7 +209,7 @@ export default function renderCommon (props) {
                   value={k}
                   key={k}
                 >
-                  {k}
+                  {k.toUpperCase()}
                 </Option>
               )
             })

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

@@ -6,22 +6,28 @@ import { useEffect } from 'react'
 import {
   Input,
   Form,
-  InputNumber
+  InputNumber,
+  TreeSelect
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
 import {
   newBookmarkIdPrefix,
-  terminalRdpType
+  terminalRdpType,
+  rdpHelpLink
 } from '../../common/constants'
 import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
+import Link from '../common/external-link.jsx'
 import { defaults } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
 import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import formatBookmarkGroups from './bookmark-group-tree-format'
+import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 
 const FormItem = Form.Item
 const { prefix } = window
 const e = prefix('form')
+const c = prefix('common')
 
 export default function LocalFormUi (props) {
   const [
@@ -36,16 +42,34 @@ export default function LocalFormUi (props) {
       })
     }
   }, [props.currentBookmarkGroupId])
+  const {
+    id = ''
+  } = props.formData
+  const {
+    bookmarkGroups = [],
+    currentBookmarkGroupId
+  } = props
   let initialValues = copy(props.formData)
+  const initBookmarkGroupId = !id.startsWith(newBookmarkIdPrefix)
+    ? findBookmarkGroupId(bookmarkGroups, id)
+    : currentBookmarkGroupId
   const defaultValues = {
     type: terminalRdpType,
     port: 3389,
+    category: initBookmarkGroupId,
     color: getRandomDefaultColor()
   }
   initialValues = defaults(initialValues, defaultValues)
   function renderCommon () {
+    const {
+      bookmarkGroups = []
+    } = props
+    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
+        <p className='alignright'>
+          <Link to={rdpHelpLink}>Wiki: {rdpHelpLink}</Link>
+        </p>
         <FormItem
           {...formItemLayout}
           label={e('title')}
@@ -114,6 +138,17 @@ export default function LocalFormUi (props) {
         >
           <Input />
         </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={c('bookmarkCategory')}
+          name='category'
+        >
+          <TreeSelect
+            treeData={tree}
+            treeDefaultExpandAll
+            showSearch
+          />
+        </FormItem>
         <FormItem
           {...formItemLayout}
           label='type'

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

@@ -35,10 +35,14 @@ export default function renderSshTunnels (props) {
     sshTunnelRemotePort: 12300,
     sshTunnelRemoteHost: '127.0.0.1'
   })
+  const [isDynamic, setter] = useState(formData.sshTunnel === 'dynamicForward')
   const [list, setList] = useState(formData.sshTunnels || [])
   function onSubmit () {
     formChild.submit()
   }
+  function onChange (e) {
+    setter(e.target.value === 'dynamicForward')
+  }
   function handleFinish (data) {
     const nd = {
       ...data,
@@ -80,7 +84,7 @@ export default function renderSshTunnels (props) {
       title: e('sshTunnel'),
       key: 'sshTunnel',
       render: (k, item) => {
-        // sshTunnel is forwardRemoteToLocal or forwardLocalToRemote
+        // sshTunnel is forwardRemoteToLocal or forwardLocalToRemote or dynamicForward
         const {
           sshTunnel,
           sshTunnelRemoteHost = '127.0.0.1',
@@ -89,6 +93,9 @@ export default function renderSshTunnels (props) {
           sshTunnelLocalPort,
           name
         } = item
+        if (sshTunnel === 'dynamicForward') {
+          return `socks5://${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+        }
         const to = sshTunnel === 'forwardRemoteToLocal'
           ? `${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort}`
           : `${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
@@ -148,6 +155,49 @@ export default function renderSshTunnels (props) {
     )
   }
 
+  function renderDynamicForward () {
+    return (
+      <p><UserOutlined /> → socks proxy → url</p>
+    )
+  }
+
+  function renderRemote () {
+    if (isDynamic) {
+      return null
+    }
+    return (
+      <FormItem
+        label={s('remote')}
+        {...formItemLayout}
+        required
+        className='ssh-tunnels-host'
+      >
+        <Space.Compact>
+          <FormItem
+            name='sshTunnelRemoteHost'
+            label=''
+            required
+          >
+            <Input
+              placeholder={e('host')}
+            />
+          </FormItem>
+          <FormItem
+            label=''
+            name='sshTunnelRemotePort'
+            required
+          >
+            <InputNumber
+              min={1}
+              max={65535}
+              placeholder={e('port')}
+            />
+          </FormItem>
+        </Space.Compact>
+      </FormItem>
+    )
+  }
+
   return (
     <div>
       <FormItem
@@ -168,7 +218,7 @@ export default function renderSshTunnels (props) {
           {...formItemLayout}
           required
         >
-          <RadioGroup>
+          <RadioGroup onChange={onChange}>
             <RadioButton
               value='forwardRemoteToLocal'
             >
@@ -183,37 +233,16 @@ export default function renderSshTunnels (props) {
                 <span>L→R <QuestionCircleOutlined /></span>
               </Tooltip>
             </RadioButton>
-          </RadioGroup>
-        </FormItem>
-        <FormItem
-          label={s('remote')}
-          {...formItemLayout}
-          required
-          className='ssh-tunnels-host'
-        >
-          <Space.Compact>
-            <FormItem
-              name='sshTunnelRemoteHost'
-              label=''
-              required
-            >
-              <Input
-                placeholder={e('host')}
-              />
-            </FormItem>
-            <FormItem
-              label=''
-              name='sshTunnelRemotePort'
-              required
+            <RadioButton
+              value='dynamicForward'
             >
-              <InputNumber
-                min={1}
-                max={65535}
-                placeholder={e('port')}
-              />
-            </FormItem>
-          </Space.Compact>
+              <Tooltip title={renderDynamicForward()}>
+                <span>{e('dynamicForward')}(socks proxy) <QuestionCircleOutlined /></span>
+              </Tooltip>
+            </RadioButton>
+          </RadioGroup>
         </FormItem>
+        {renderRemote()}
         <FormItem
           label={s('local')}
           {...formItemLayout}

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

@@ -87,6 +87,18 @@ export default function useBookmarkFormUI (props) {
         step={1}
         placeholder={defaultFontSize}
       />
+    </FormItem>,
+    <FormItem
+      key='keepaliveInterval'
+      {...formItemLayout}
+      label={s('keepaliveIntervalDesc')}
+      name='keepaliveInterval'
+    >
+      <InputNumber
+        min={0}
+        max={20000000}
+        step={1000}
+      />
     </FormItem>
   ]
 }

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

@@ -5,7 +5,8 @@
 import { useEffect } from 'react'
 import {
   Input,
-  Form
+  Form,
+  TreeSelect
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
 import {
@@ -17,10 +18,13 @@ import copy from 'json-deep-copy'
 import { defaults } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
 import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import formatBookmarkGroups from './bookmark-group-tree-format'
+import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 
 const FormItem = Form.Item
 const { prefix } = window
 const e = prefix('form')
+const c = prefix('common')
 
 export default function LocalFormUi (props) {
   const [
@@ -35,13 +39,28 @@ export default function LocalFormUi (props) {
       })
     }
   }, [props.currentBookmarkGroupId])
+  const {
+    id = ''
+  } = props.formData
+  const {
+    bookmarkGroups = [],
+    currentBookmarkGroupId
+  } = props
+  const initBookmarkGroupId = !id.startsWith(newBookmarkIdPrefix)
+    ? findBookmarkGroupId(bookmarkGroups, id)
+    : currentBookmarkGroupId
   let initialValues = copy(props.formData)
   const defaultValues = {
     type: terminalWebType,
+    category: initBookmarkGroupId,
     color: getRandomDefaultColor()
   }
   initialValues = defaults(initialValues, defaultValues)
   function renderCommon () {
+    const {
+      bookmarkGroups = []
+    } = props
+    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         <FormItem
@@ -70,6 +89,17 @@ export default function LocalFormUi (props) {
         >
           <Input.TextArea rows={1} />
         </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={c('bookmarkCategory')}
+          name='category'
+        >
+          <TreeSelect
+            treeData={tree}
+            treeDefaultExpandAll
+            showSearch
+          />
+        </FormItem>
         <FormItem
           {...formItemLayout}
           label='type'

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

@@ -76,21 +76,27 @@ export default class SystemMenu extends Component {
   }
 
   renderEncodingInfo () {
+    const selectProps = {
+      style: {
+        minWidth: 30
+      },
+      placeholder: f('encode'),
+      defaultValue: this.props.currentTab?.encode,
+      onSelect: this.handleSwitchEncoding,
+      size: 'small',
+      popupMatchSelectWidth: false
+    }
     return (
       <div className='terminal-footer-unit terminal-footer-info'>
         <div className='fleft relative'>
           <Select
-            style={{ minWidth: 30 }}
-            placeholder={f('encode')}
-            defaultValue={this.props.currentTab?.encode}
-            onSelect={this.handleSwitchEncoding}
-            size='small'
+            {...selectProps}
           >
             {
               encodes.map(k => {
                 return (
                   <Option key={k} value={k}>
-                    {k}
+                    {k.toUpperCase()}
                   </Option>
                 )
               })

package/client/components/main/main.jsx

@@ -11,7 +11,7 @@ import BatchOp from '../batch-op/batch-op'
 import CssOverwrite from './css-overwrite'
 import UiTheme from './ui-theme'
 import CustomCss from './custom-css.jsx'
-import Resolutions from '../session/resolution-edit'
+import Resolutions from '../rdp/resolution-edit'
 import TerminalInteractive from '../terminal/terminal-interactive'
 import ConfirmModalStore from '../sftp/confirm-modal-store.jsx'
 import TransferConflictStore from '../sftp/transfer-conflict-store.jsx'

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

@@ -3,10 +3,14 @@ import {
   InputNumber,
   Space,
   Button,
-  Input
+  Input,
+  Tag
 } from 'antd'
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
 import { formItemLayout } from '../../common/form-layout'
+import HelpIcon from '../common/help-icon'
+import { copy } from '../../common/clipboard'
+import { useRef } from 'react'
 
 const FormItem = Form.Item
 const FormList = Form.List
@@ -14,6 +18,7 @@ const { prefix } = window
 const t = prefix('quickCommands')
 
 export default function renderQm () {
+  const focused = useRef(0)
   function renderItem (field, i, add, remove) {
     return (
       <Space
@@ -43,7 +48,10 @@ export default function renderQm () {
           <Input.TextArea
             rows={1}
             placeholder={t('quickCommand')}
-            className='compact-input'
+            className='compact-input qm-input'
+            onFocus={() => {
+              focused.current = i
+            }}
           />
         </FormItem>
         <Button
@@ -54,9 +62,52 @@ export default function renderQm () {
       </Space>
     )
   }
+  const commonCmds = [
+    { cmd: 'ls', desc: 'List directory contents' },
+    { cmd: 'cd', desc: 'Change the current directory' },
+    { cmd: 'pwd', desc: 'Print the current working directory' },
+    { cmd: 'cp', desc: 'Copy files and directories' },
+    { cmd: 'mv', desc: 'Move/rename files and directories' },
+    { cmd: 'rm', desc: 'Remove files or directories' },
+    { cmd: 'mkdir', desc: 'Create new directories' },
+    { cmd: 'rmdir', desc: 'Remove empty directories' },
+    { cmd: 'touch', desc: 'Create empty files or update file timestamps' },
+    { cmd: 'chmod', desc: 'Change file modes or Access Control Lists' },
+    { cmd: 'chown', desc: 'Change file owner and group' },
+    { cmd: 'cat', desc: 'Concatenate and display file content' },
+    { cmd: 'echo', desc: 'Display message or variable value' },
+    { cmd: 'grep', desc: 'Search text using patterns' },
+    { cmd: 'find', desc: 'Search for files in a directory hierarchy' },
+    { cmd: 'df', desc: 'Report file system disk space usage' },
+    { cmd: 'du', desc: 'Estimate file space usage' },
+    { cmd: 'top', desc: 'Display Linux tasks' },
+    { cmd: 'ps', desc: 'Report a snapshot of current processes' },
+    { cmd: 'kill', desc: 'Send a signal to a process' }
+  ]
 
+  const cmds = commonCmds.map(c => {
+    return (
+      <Tag
+        title={c.desc}
+        key={c.cmd}
+        onClick={() => {
+          copy(c.cmd)
+        }}
+      >
+        <b className='pointer'>{c.cmd}</b>
+      </Tag>
+    )
+  })
+  const label = (
+    <div>
+      {t('commonCommands')}
+      <HelpIcon
+        title={cmds}
+      />
+    </div>
+  )
   return (
-    <FormItem {...formItemLayout} label={t('quickCommands')}>
+    <FormItem {...formItemLayout} label={label}>
       <FormList
         name='commands'
       >

package/client/components/{session → rdp}/rdp-session.jsx

@@ -4,7 +4,8 @@ import deepCopy from 'json-deep-copy'
 import clone from '../../common/to-simple-obj'
 import { handleErr } from '../../common/fetch'
 import {
-  statusMap
+  statusMap,
+  rdpHelpLink
 } from '../../common/constants'
 import {
   notification,
@@ -16,6 +17,7 @@ import {
   ReloadOutlined,
   EditOutlined
 } from '@ant-design/icons'
+import HelpIcon from '../common/help-icon'
 import * as ls from '../../common/safe-local-storage'
 import scanCode from './code-scan'
 import resolutions from './resolutions'
@@ -388,9 +390,12 @@ export default class RdpSession extends Component {
           onClick={this.handleEditResolutions}
           className='mg2r mg1l pointer'
         />
-        <span className='mg2l'>
+        <span className='mg2l mg2r'>
           {username}@{host}:{port}
         </span>
+        <HelpIcon
+          link={rdpHelpLink}
+        />
       </div>
     )
   }

package/client/components/session/session.jsx

@@ -4,7 +4,7 @@
 import { Component } from 'react'
 import Term from '../terminal'
 import Sftp from '../sftp/sftp-entry'
-import RdpSession from './rdp-session'
+import RdpSession from '../rdp/rdp-session'
 import {
   BorderVerticleOutlined,
   BorderHorizontalOutlined,

package/client/components/session/sessions.jsx

@@ -1,6 +1,6 @@
 import { Component } from '../common/react-subx'
 import Session from './session'
-import WebSession from './web-session'
+import WebSession from '../web/web-session.jsx'
 import { findIndex, pick } from 'lodash-es'
 import classNames from 'classnames'
 import generate from '../../common/uid'

package/client/components/setting-panel/setting-modal.jsx

@@ -94,15 +94,18 @@ export default class SettingModalWrap extends Component {
         children: null
       }
     ]
+    const tabsProps = {
+      activeKey: settingTab,
+      animated: false,
+      items,
+      onChange: store.handleChangeSettingTab,
+      destroyInactiveTabPane: true,
+      className: 'setting-tabs'
+    }
     return (
       <div>
         <Tabs
-          activeKey={settingTab}
-          animated={false}
-          items={items}
-          onChange={store.handleChangeSettingTab}
-          destroyInactiveTabPane
-          className='setting-tabs'
+          {...tabsProps}
         />
         <TabHistory
           listProps={props0}

package/client/components/setting-panel/setting-wrap.jsx

@@ -36,7 +36,11 @@ export default class SettingWrap extends Component {
         {...pops}
       >
         <CloseCircleOutlined
-          className='close-setting-wrap'
+          className='close-setting-wrap-icon close-setting-wrap'
+          onClick={this.props.onCancel}
+        />
+        <CloseCircleOutlined
+          className='close-setting-wrap-icon alt-close-setting-wrap'
           onClick={this.props.onCancel}
         />
         {

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

@@ -5,10 +5,8 @@
 
 body .ant-drawer .ant-drawer-content-wrapper
   left 43px
-
-.close-setting-wrap
+.close-setting-wrap-icon
   position absolute
-  left 20px
   top 70px
   font-size 16px
   color text
@@ -16,6 +14,10 @@ body .ant-drawer .ant-drawer-content-wrapper
   z-index 889
   &:hover
     color text
+.alt-close-setting-wrap
+  right 20px
+.close-setting-wrap
+  top 70px
 .setting-row
   position absolute
   top 127px

package/client/components/tabs/index.jsx

@@ -258,7 +258,7 @@ export default class Tabs extends React.Component {
       : tabsWidthAll
     const w1 = isMacJs ? 30 : windowControlWidth
     const style = {
-      width: width - w1 - 136
+      width: width - w1 - 166
     }
     return (
       <div

package/client/components/tabs/tab.jsx

@@ -358,9 +358,14 @@ class Tab extends Component {
         sshTunnelLocalHost = '127.0.0.1',
         name
       } = obj
-      let tunnel = sshTunnel === 'forwardRemoteToLocal'
-        ? `-> ${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort} -> ${sshTunnelLocalHost}:${sshTunnelLocalPort}`
-        : `-> ${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort} -> ${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+      let tunnel
+      if (sshTunnel === 'dynamicForward') {
+        tunnel = `sock5://${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+      } else {
+        tunnel = sshTunnel === 'forwardRemoteToLocal'
+          ? `-> ${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort} -> ${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+          : `-> ${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort} -> ${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+      }
       if (error) {
         tunnel = `error: ${tunnel}`
       }
@@ -371,7 +376,7 @@ class Tab extends Component {
     })
     return (
       <div>
-        <div>${title}</div>
+        <div>{title}</div>
         {list}
       </div>
     )

package/client/components/terminal/index.jsx

@@ -363,6 +363,13 @@ class Term extends Component {
       )
     ) {
       this.searchPrev(keyword, options)
+    } else if (
+      action === terminalActions.clearSearch &&
+      (
+        propSplitId === activeSplitId
+      )
+    ) {
+      this.searchAddon.clearDecorations()
     } else if (
       action === commonActions.getTermLogState &&
       pid === statePid
@@ -1018,8 +1025,9 @@ class Term extends Component {
       const cmd = `ssh ${title.split(/\s/g)[0]}\r`
       return this.attachAddon._sendData(cmd)
     }
-    if (startDirectory) {
-      const cmd = `cd ${startDirectory}\r`
+    const startFolder = startDirectory || window.initFolder
+    if (startFolder) {
+      const cmd = `cd ${startFolder}\r`
       this.attachAddon._sendData(cmd)
     }
     if (runScripts && runScripts.length) {
@@ -1119,6 +1127,7 @@ class Term extends Component {
         'execLinuxArgs',
         'debug'
       ]),
+      keepaliveInterval: tab.keepaliveInterval === undefined ? config.keepaliveInterval : tab.keepaliveInterval,
       sessionId,
       tabId: id,
       srcTabId: tab.id,

package/client/components/terminal/term-search.jsx

@@ -55,6 +55,9 @@ class TermSearch extends Component {
   }
 
   toggleSearch = () => {
+    if (this.props.store.termSearchOpen) {
+      this.clearSearch()
+    }
     this.props.store.toggleTerminalSearch()
     setTimeout(window.store.focus, 200)
   }
@@ -89,7 +92,16 @@ class TermSearch extends Component {
     this.prev()
   }
 
+  clearSearch = () => {
+    const { activeTerminalId } = this.props.store
+    postMessage({
+      action: terminalActions.clearSearch,
+      activeSplitId: activeTerminalId
+    })
+  }
+
   close = () => {
+    this.clearSearch()
     this.props.store.termSearchOpen = false
   }
 

package/client/store/load-data.js

@@ -60,7 +60,8 @@ export async function addTabFromCommandLine (store, opts) {
     enableSsh: !options.sftpOnly,
     authType: 'password',
     pane: options.type || 'terminal',
-    term: defaultSettings.terminalType
+    term: defaultSettings.terminalType,
+    startDirectoryLocal: options.initFolder
   }
   if (options.setEnv) {
     update.setEnv = options.setEnv
@@ -79,8 +80,15 @@ export async function addTabFromCommandLine (store, opts) {
     conf.privateKey = await fs.readFile(options.privateKeyPath)
   }
   log.debug('command line opts', conf)
+  console.log(options.initFolder, !(store.config.onStartSessions || []).length, store.config.initDefaultTabOnStart)
   if (conf.username && conf.host) {
     store.addTab(conf)
+  } else if (
+    options.initFolder &&
+    !(store.config.onStartSessions || []).length &&
+    store.config.initDefaultTabOnStart
+  ) {
+    window.initFolder = options.initFolder
   }
   if (options && options.batchOp) {
     window.store.runBatchOp(options.batchOp)

package/client/store/sync.js

@@ -233,9 +233,13 @@ export default (Store) => {
     for (const n of names) {
       let str = get(gist, `files["${n}.json"].content`)
       if (!str) {
-        store.isSyncingSetting = false
-        store.isSyncDownload = false
-        throw new Error(('Seems you have a empty gist, you can try use existing gist ID or upload first'))
+        if (n === settingMap.bookmarks) {
+          store.isSyncingSetting = false
+          store.isSyncDownload = false
+          throw new Error(('Seems you have a empty gist, you can try use existing gist ID or upload first'))
+        } else {
+          continue
+        }
       }
       if (!isJSON(str)) {
         str = await window.pre.runGlobalAsync('decryptAsync', str, pass)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.39.2",
+  "version": "1.39.18",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",