@electerm/electerm-react 1.80.6 → 1.90.6

package/client/common/constants.js

@@ -68,7 +68,8 @@ export const connectionMap = buildConst([
   'local',
   'web',
   'rdp',
-  'vnc'
+  'vnc',
+  'ftp'
 ])
 
 export const authTypeMap = buildConst([
@@ -135,6 +136,7 @@ export const terminalVncType = 'vnc'
 export const terminalSerialType = 'serial'
 export const terminalTelnetType = 'telnet'
 export const terminalLocalType = 'local'
+export const terminalFtpType = 'ftp'
 export const openedSidebarKey = 'opened-sidebar'
 export const sidebarPinnedKey = 'sidebar-pinned'
 export const leftSidebarWidthKey = 'left-sidebar-width'

package/client/common/default-setting.js

@@ -8,7 +8,7 @@ export default {
   scrollback: 3000,
   onStartSessions: [],
   fontSize: 16,
-  fontFamily: 'Fira Code, mono, courier-new, courier, monospace',
+  fontFamily: 'Maple Mono, mono, courier-new, courier, monospace',
   execWindows: 'System32/WindowsPowerShell/v1.0/powershell.exe',
   execMac: 'zsh',
   execLinux: 'bash',
@@ -65,5 +65,6 @@ export default {
   apiPathAI: '/chat/completions',
   sessionLogPath: '',
   sshSftpSplitView: false,
-  showCmdSuggestions: false
+  showCmdSuggestions: false,
+  startDirectoryLocal: ''
 }

package/client/common/fetch-from-server.js

@@ -13,7 +13,7 @@ export const initWsCommon = async () => {
   if (window.et.wsOpened) {
     return
   }
-  const ws = await initWs('common', id, undefined, undefined, true)
+  const ws = await initWs('common', id, undefined, true)
   if (!ws) {
     return
   }

package/client/common/sftp.js

@@ -10,16 +10,17 @@ import initWs from './ws'
 const transferKeys = Object.keys(transferTypeMap)
 
 class Sftp {
-  async init (sessionId) {
+  async init (terminalId) {
     const id = generate()
-    const ws = await initWs('sftp', id, sessionId)
+    const ws = await initWs('sftp', id, terminalId)
     this.ws = ws
     this.id = id
-    this.sessionId = sessionId
+    this.terminalId = terminalId
     ws.s({
       action: 'sftp-new',
       id,
-      sessionId
+      type: this.type,
+      terminalId
     })
     const th = this
     this.ws = ws
@@ -28,8 +29,9 @@ class Sftp {
         if (transferKeys.includes(func)) {
           return Transfer({
             sftpId: id,
+            isFtp: this.type === 'ftp',
             ...args[0],
-            sessionId,
+            terminalId,
             type: func
           })
         }
@@ -43,7 +45,8 @@ class Sftp {
             uid,
             func,
             args,
-            sessionId
+            terminalId,
+            type: this.type
           })
           ws.once((arg) => {
             if (arg.error) {
@@ -62,14 +65,15 @@ class Sftp {
     ws.s({
       action: 'sftp-destroy',
       id: this.id,
-      sessionId: this.sessionId
+      terminalId: this.terminalId
     })
     ws.close()
   }
 }
 
-export default async (sessionId) => {
+export default async (terminalId, type = 'sftp') => {
   const sftp = new Sftp()
-  await sftp.init(sessionId)
+  sftp.type = type
+  await sftp.init(terminalId)
   return sftp
 }

package/client/common/transfer.js

@@ -18,10 +18,10 @@ class Transfer {
     this.id = id
     const th = this
     const {
-      sessionId,
-      sftpId
+      sftpId,
+      isFtp
     } = rest
-    const ws = await initWs('transfer', id, sessionId, sftpId)
+    const ws = await initWs('transfer', id, sftpId)
     ws.s({
       action: 'transfer-new',
       ...rest,
@@ -32,8 +32,8 @@ class Transfer {
         ws.s({
           action: 'transfer-func',
           id: th.id,
+          isFtp,
           func,
-          sessionId,
           sftpId,
           args
         })

package/client/common/ws.js

@@ -140,7 +140,7 @@ function onEvent (e) {
 
 window.worker.addEventListener('message', onEvent)
 
-export default (type, id, sessionId = '', sftpId = '', persist) => {
+export default (type, id, sftpId = '', persist) => {
   return new Promise((resolve) => {
     send({
       id,
@@ -150,7 +150,6 @@ export default (type, id, sessionId = '', sftpId = '', persist) => {
       args: [
         type,
         id,
-        sessionId,
         sftpId,
         pick(window.store.config, [
           'host',

package/client/components/batch-op/batch-op.jsx

@@ -168,7 +168,7 @@ export default class BatchOp extends PureComponent {
     this.updateState('tab created', index)
     if (conf.cmd) {
       this.updateState('running cmd', index)
-      await runCmd(tab.id, tab.sessionId, conf.cmd)
+      await runCmd(tab.id, conf.cmd)
       this.updateState('running cmd done', index)
     }
     if (conf.remotePath) {
@@ -193,7 +193,7 @@ export default class BatchOp extends PureComponent {
       this.updateState('run cmd2', index)
       document.querySelector('.session-current .type-tab.ssh').click()
       await wait(200)
-      await runCmd(tab.id, tab.sessionId, conf.cmdAfterTransfer)
+      await runCmd(tab.id, conf.cmdAfterTransfer)
       this.updateState('run cmd2 done', index)
     }
     this.updateState(e('finished'), index)
@@ -211,7 +211,6 @@ export default class BatchOp extends PureComponent {
         fromPath: fp,
         id: uid(),
         operation: '',
-        sessionId: tab.sessionId,
         tabId: tab.id,
         title: 'batch operation',
         toPath: resolveFilePath(isDown ? conf.localPath : conf.remotePath, name),
@@ -230,7 +229,7 @@ export default class BatchOp extends PureComponent {
         const first = transferHistory.find(t => {
           return t.id === obj.id || t.originalId === obj.id
         })
-        if (first && first.sessionId === tab.sessionId) {
+        if (first && first.id === tab.id) {
           this.ref1 && this.ref1.stop()
           delete this.ref1
           clearTimeout(this.tm)

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

@@ -0,0 +1,168 @@
+/**
+ * web form
+ */
+
+import { useEffect } from 'react'
+import {
+  Input,
+  Form,
+  InputNumber,
+  TreeSelect,
+  Switch
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import {
+  newBookmarkIdPrefix,
+  terminalFtpType
+} from '../../common/constants'
+import useSubmit from './use-submit'
+import copy from 'json-deep-copy'
+import { defaults, isEmpty } 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'
+import ProfileItem from './profile-form-item'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function FtpFormUi (props) {
+  const [
+    form,
+    handleFinish,
+    submitUi
+  ] = useSubmit(props)
+  useEffect(() => {
+    if (props.formData.id.startsWith(newBookmarkIdPrefix)) {
+      form.setFieldsValue({
+        category: props.currentBookmarkGroupId
+      })
+    }
+  }, [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: terminalFtpType,
+    port: 21,
+    category: initBookmarkGroupId,
+    color: getRandomDefaultColor(),
+    user: '',
+    password: '',
+    secure: false
+  }
+  initialValues = defaults(initialValues, defaultValues)
+
+  function renderCommon () {
+    const {
+      bookmarkGroups = []
+    } = props
+    const tree = formatBookmarkGroups(bookmarkGroups)
+    return (
+      <div className='pd1x'>
+        <FormItem
+          {...formItemLayout}
+          label={e('title')}
+          hasFeedback
+        >
+          <FormItem noStyle name='title'>
+            <Input addonBefore={<ColorPickerItem />} />
+          </FormItem>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('host')}
+          hasFeedback
+          name='host'
+          required
+        >
+          <Input />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('port')}
+          hasFeedback
+          name='port'
+          rules={[{
+            required: true, message: 'port required'
+          }]}
+        >
+          <InputNumber
+            placeholder={e('port')}
+            min={1}
+            max={65535}
+            step={1}
+          />
+        </FormItem>
+        <ProfileItem
+          store={props.store}
+          profileFilter={d => !isEmpty(d.vnc)}
+        />
+        <FormItem
+          {...formItemLayout}
+          label={e('username')}
+          hasFeedback
+          name='user'
+        >
+          <Input />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('password')}
+          hasFeedback
+          name='password'
+        >
+          <Input.Password />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('secure')}
+          name='secure'
+          valuePropName='secure'
+        >
+          <Switch />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('bookmarkCategory')}
+          name='category'
+        >
+          <TreeSelect
+            treeData={tree}
+            treeDefaultExpandAll
+            showSearch
+          />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='type'
+          name='type'
+          className='hide'
+        >
+          <Input />
+        </FormItem>
+      </div>
+    )
+  }
+
+  return (
+    <Form
+      form={form}
+      onFinish={handleFinish}
+      initialValues={initialValues}
+      name='vnc-form'
+    >
+      {renderCommon()}
+      {submitUi}
+    </Form>
+  )
+}

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

@@ -0,0 +1,16 @@
+/**
+ * bookmark form
+ */
+import BookmarkForm from './ssh-form'
+import FtpFormUi from './ftp-form-ui'
+
+export default class FtpForm extends BookmarkForm {
+  render () {
+    return (
+      <FtpFormUi
+        {...this.props}
+        {...this.getProps()}
+      />
+    )
+  }
+}

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

@@ -14,6 +14,7 @@ import {
   terminalVncType,
   terminalLocalType,
   terminalTelnetType,
+  terminalFtpType,
   newBookmarkIdPrefix
 } from '../../common/constants'
 import SshForm from './ssh-form'
@@ -23,6 +24,7 @@ import TelnetForm from './telnet-form'
 import WebForm from './web-form'
 import RdpForm from './rdp-form'
 import VncForm from './vnc-form'
+import FtpForm from './ftp-form'
 import { createTitleWithTag } from '../../common/create-title'
 import {
   LoadingOutlined,
@@ -42,7 +44,8 @@ export default class BookmarkIndex extends PureComponent {
         terminalLocalType,
         terminalSerialType,
         terminalRdpType,
-        terminalVncType
+        terminalVncType,
+        terminalFtpType
       ].includes(initType)
     ) {
       initType = connectionMap.ssh
@@ -72,7 +75,8 @@ export default class BookmarkIndex extends PureComponent {
     [connectionMap.local]: LocalForm,
     [connectionMap.web]: WebForm,
     [connectionMap.rdp]: RdpForm,
-    [connectionMap.vnc]: VncForm
+    [connectionMap.vnc]: VncForm,
+    [connectionMap.ftp]: FtpForm
   }
 
   handleChange = (e) => {
@@ -97,8 +101,9 @@ export default class BookmarkIndex extends PureComponent {
         {
           keys.map(k => {
             const v = connectionMap[k]
+            const txt = v === 'ssh' ? 'Ssh/Sftp' : e(v)
             return (
-              <Radio.Button key={v} value={v}>{e(v)}</Radio.Button>
+              <Radio.Button key={v} value={v}>{txt}</Radio.Button>
             )
           })
         }

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

@@ -27,6 +27,7 @@ export default function renderSshTunnels (props) {
   } = props
   const [formChild] = Form.useForm()
   const [initialValues] = useState({
+    sshTunnel: 'forwardRemoteToLocal',
     sshTunnelLocalPort: 12200,
     sshTunnelLocalHost: '127.0.0.1',
     sshTunnelRemotePort: 12300,
@@ -214,6 +215,7 @@ export default function renderSshTunnels (props) {
           label={e('sshTunnel')}
           name='sshTunnel'
           {...formItemLayout}
+          defaultValue='forwardRemoteToLocal'
           required
         >
           <RadioGroup onChange={onChange}>

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

@@ -79,13 +79,6 @@ const defaultServerHostKeyOptions = [
 
 export default function renderX11 (form) {
   function setDefaults () {
-    // form.setFieldsValue({
-    //   cipher: defaultCipherOptions
-    // })
-
-    // form.setFieldsValue({
-    //   serverHostKey: defaultServerHostKeyOptions
-    // })
     form.setFieldValue('cipher', defaultCipherOptions)
     form.setFieldValue('serverHostKey', defaultServerHostKeyOptions)
   }
@@ -97,12 +90,11 @@ export default function renderX11 (form) {
         name='cipher'
       >
         <Select
-          mode='multiple'
+          mode='tags'
+          style={{ width: '100%' }}
         >
           {cipherOptions.map(cipher => (
-            <Option key={cipher} value={cipher}>
-              {cipher}
-            </Option>
+            <Option key={cipher} value={cipher}>{cipher}</Option>
           ))}
         </Select>
       </FormItem>
@@ -116,12 +108,11 @@ export default function renderX11 (form) {
           name='serverHostKey'
         >
           <Select
-            mode='multiple'
+            mode='tags'
+            style={{ width: '100%' }}
           >
             {serverHostKeyOptions.map(key => (
-              <Option key={key} value={key}>
-                {key}
-              </Option>
+              <Option key={key} value={key}>{key}</Option>
             ))}
           </Select>
         </FormItem>

package/client/components/file-transfer/conflict-resolve.jsx

@@ -153,7 +153,7 @@ export default class ConfirmModalStore extends Component {
         <Button
           type='dashed'
           className='mg1l'
-          onClick={() => this.act(fileActions.cancel)}
+          onClick={() => this.act(fileActions.skipAll)}
         >
           {e('cancel')}
         </Button>
@@ -208,6 +208,16 @@ export default class ConfirmModalStore extends Component {
           >
             {e('renameAll')}
           </Button>
+          <Button
+            type='primary'
+            className='mg1l'
+            title={e('skipAll')}
+            onClick={
+              () => this.act(fileActions.skipAll)
+            }
+          >
+            {e('skipAll')}
+          </Button>
         </div>
       </div>
     )

package/client/components/file-transfer/transfer.jsx

@@ -19,16 +19,18 @@ const { assign } = Object
 export default class TransportAction extends Component {
   constructor (props) {
     super(props)
-    this.sessionId = props.transfer.sessionId
     const {
       id,
-      transferBatch = ''
+      transferBatch = '',
+      tabId
     } = props.transfer
     this.id = `tr-${transferBatch}-${id}`
+    this.tabId = tabId
     refsTransfers.add(this.id, this)
     this.total = 0
     this.transferred = 0
     this.currentProgress = 1
+    this.isFtp = refs.get('sftp-' + tabId)?.type === 'ftp'
   }
 
   componentDidMount () {
@@ -66,9 +68,9 @@ export default class TransportAction extends Component {
     return getLocalFileInfo(path).catch(console.log)
   }
 
-  remoteCheckExist = (path, sessionId) => {
+  remoteCheckExist = (path, tabId) => {
     // return true
-    const sftp = refs.get('sftp-' + sessionId)?.sftp
+    const sftp = refs.get('sftp-' + tabId)?.sftp
     if (!sftp) {
       console.log('remoteCheckExist error', 'sftp not exist')
       return false
@@ -81,8 +83,8 @@ export default class TransportAction extends Component {
       })
   }
 
-  checkExist = (type, path, sessionId) => {
-    return this[type + 'CheckExist'](path, sessionId)
+  checkExist = (type, path, tabId) => {
+    return this[type + 'CheckExist'](path, tabId)
   }
 
   update = (up) => {
@@ -123,11 +125,11 @@ export default class TransportAction extends Component {
   // }
 
   remoteList = () => {
-    window.store.remoteList(this.sessionId)
+    window.store.remoteList(this.tabId)
   }
 
   localList = () => {
-    window.store.localList(this.sessionId)
+    window.store.localList(this.tabId)
   }
 
   onEnd = (update = {}) => {
@@ -223,7 +225,7 @@ export default class TransportAction extends Component {
       fromPath,
       toPath,
       typeFrom,
-      sessionId,
+      tabId,
       operation // 'mv' or 'cp'
     } = transfer
 
@@ -245,7 +247,7 @@ export default class TransportAction extends Component {
           this.onError(e)
         })
     }
-    const sftp = refs.get('sftp-' + sessionId)?.sftp
+    const sftp = refs.get('sftp-' + tabId)?.sftp
     return sftp[operation](fromPath, finalToPath)
       .then(this.onEnd)
       .catch(e => {
@@ -272,7 +274,7 @@ export default class TransportAction extends Component {
       ? fromPath
       : toPath
     const mode = toFile.mode || fromMode
-    const sftp = refs.get('sftp-' + this.sessionId).sftp
+    const sftp = refs.get('sftp-' + this.tabId).sftp
     this.transport = await sftp[transferType]({
       remotePath,
       localPath,
@@ -318,7 +320,7 @@ export default class TransportAction extends Component {
 
     const fromFile = transfer.fromFile
       ? transfer.fromFile
-      : await this.checkExist(typeFrom, fromPath, this.sessionId)
+      : await this.checkExist(typeFrom, fromPath, this.tabId)
     if (!fromFile) {
       return this.tagTransferError(id, 'file not exist')
     }
@@ -344,13 +346,13 @@ export default class TransportAction extends Component {
     const {
       typeTo,
       toPath,
-      sessionId
+      tabId
     } = transfer
     const transferStillExists = window.store.fileTransfers.some(t => t.id === transfer.id)
     if (!transferStillExists) {
       return false
     }
-    const toFile = await this.checkExist(typeTo, toPath, sessionId)
+    const toFile = await this.checkExist(typeTo, toPath, tabId)
 
     if (toFile) {
       this.update({
@@ -405,8 +407,8 @@ export default class TransportAction extends Component {
     })
   }
 
-  list = async (type, path, sessionId) => {
-    const sftp = refs.get('sftp-' + sessionId)
+  list = async (type, path, tabId) => {
+    const sftp = refs.get('sftp-' + tabId)
     return sftp[type + 'List'](true, path)
   }
 
@@ -456,7 +458,7 @@ export default class TransportAction extends Component {
     const localPath = isDown ? toPath : fromPath
     const remotePath = isDown ? fromPath : toPath
     const mode = toFile.mode || fromMode
-    const sftp = refs.get('sftp-' + this.sessionId).sftp
+    const sftp = refs.get('sftp-' + this.tabId).sftp
 
     return new Promise((resolve, reject) => {
       let transport
@@ -611,7 +613,7 @@ export default class TransportAction extends Component {
     const {
       fromPath,
       typeFrom,
-      sessionId,
+      tabId,
       toFile,
       isRenamed
     } = transfer
@@ -623,11 +625,11 @@ export default class TransportAction extends Component {
       }
     }
 
-    const list = await this.list(typeFrom, fromPath, sessionId)
+    const list = await this.list(typeFrom, fromPath, tabId)
     const bigFileSize = 1024 * 1024
-    const smallFilesBatch = 30
-    const BigFilesBatch = 3
-    const foldersBatch = 50
+    const smallFilesBatch = this.isFtp ? 1 : 30
+    const BigFilesBatch = this.isFtp ? 1 : 3
+    const foldersBatch = this.isFtp ? 1 : 50
 
     const {
       folders,
@@ -672,14 +674,14 @@ export default class TransportAction extends Component {
     const {
       typeTo,
       toPath,
-      sessionId
+      tabId
     } = transfer
     if (typeTo === typeMap.local) {
       return fs.mkdir(toPath)
         .then(() => true)
         .catch(() => false)
     }
-    const sftp = refs.get('sftp-' + sessionId).sftp
+    const sftp = refs.get('sftp-' + tabId).sftp
     return sftp.mkdir(toPath)
       .then(() => true)
       .catch(() => false)

package/client/components/footer/tab-select.jsx

@@ -52,7 +52,7 @@ export default function TabSelect (props) {
   }
   function renderContent () {
     return (
-      <div className='pd1x'>
+      <div className='pd1x alignright'>
         {renderBtns()}
         {renderTabs()}
       </div>