@electerm/electerm-react 1.38.65 → 1.38.80

package/client/common/constants.js

@@ -38,7 +38,7 @@ export const contextMenuPaddingTop = 10
 export const sftpControlHeight = 28 + 42 + 33 + 36
 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
@@ -66,7 +66,8 @@ export const connectionMap = buildConst([
   'ssh',
   'telnet',
   'serial',
-  'local'
+  'local',
+  'web'
 ])
 
 export const authTypeMap = buildConst([
@@ -131,6 +132,7 @@ export const terminalSplitDirectionMap = buildConst([
 ])
 
 export const terminalSshConfigType = 'ssh-config'
+export const terminalWebType = 'web'
 export const terminalSerialType = 'serial'
 export const terminalTelnetType = 'telnet'
 export const terminalLocalType = 'local'
@@ -278,7 +280,8 @@ export const commonActions = {
   closeContextMenu: 'close-context-menu',
   clickContextMenu: 'click-context-menu',
   openContextMenu: 'open-context-menu',
-  addTransfer: 'add-transfer'
+  addTransfer: 'add-transfer',
+  sftpList: 'sftp-list'
 }
 
 export const srcsSkipUpgradeCheck = [

package/client/common/create-title.jsx

@@ -15,7 +15,7 @@ export default function createTitle (res) {
   }
   const {
     host, port, username, title, type,
-    path, connectionHoppings
+    path, connectionHoppings, sshTunnels
   } = res
   const fixTitle = `${username || ''}@${host}:${port}`
   const extra = host || path ? (path || fixTitle) : ''
@@ -25,6 +25,14 @@ export default function createTitle (res) {
   if (connectionHoppings && connectionHoppings.length) {
     f = `[⋙]${f}`
   }
+  if (
+    sshTunnels &&
+    sshTunnels.length &&
+    sshTunnels[0].sshTunnel &&
+    sshTunnels[0].sshTunnelRemoteHost
+  ) {
+    f = `[T]${f}`
+  }
   if (type) {
     f = `[${type}]${f}`
   }

package/client/common/sftp.js

@@ -7,6 +7,7 @@ import Transfer from './transfer'
 import { transferTypeMap, instSftpKeys as keys } from './constants'
 import initWs from './ws'
 
+window.sftps = {}
 const transferKeys = Object.keys(transferTypeMap)
 
 class Sftp {
@@ -56,6 +57,7 @@ class Sftp {
   }
 
   async destroy () {
+    delete window.sftps[this.sessionId]
     const { ws } = this
     ws.s({
       action: 'sftp-destroy',
@@ -69,5 +71,6 @@ class Sftp {
 export default async (sessionId) => {
   const sftp = new Sftp()
   await sftp.init(sessionId)
+  window.sftps[sessionId] = sftp
   return sftp
 }

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

@@ -26,7 +26,6 @@ import { autoRun } from 'manate'
 import { pick } from 'lodash-es'
 import { runCmd } from '../terminal/terminal-apis'
 import deepCopy from 'json-deep-copy'
-import postMsg from '../../common/post-msg'
 import uid from '../../common/uid'
 import wait from '../../common/wait'
 import { getFolderFromFilePath } from '../sftp/file-read'
@@ -186,11 +185,7 @@ export default class BatchOp extends Component {
         zip: true,
         skipConfirm: true
       }
-      postMsg({
-        list: [obj],
-        action: commonActions.addTransfer,
-        sessionId: tab.sessionId
-      })
+      window.store.addTransferList([obj])
       const { store } = window
       this.tm = setTimeout(() => {
         reject(new Error('timeout'))

package/client/components/bookmark-form/bookmark-form.styl

@@ -5,4 +5,6 @@
 .mg60b
   margin-bottom 60px
 .compact-input input
-  width 80px !important
+  width 80px !important
+.ssh-tunnels-host
+  margin-bottom 0

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

@@ -9,6 +9,7 @@ import {
   settingMap,
   connectionMap,
   terminalSerialType,
+  terminalWebType,
   terminalLocalType,
   terminalTelnetType,
   newBookmarkIdPrefix
@@ -17,6 +18,7 @@ import SshForm from './ssh-form'
 import SerialForm from './serial-form'
 import LocalForm from './local-form'
 import TelnetForm from './telnet-form'
+import WebForm from './web-form'
 import { createTitleWithTag } from '../../common/create-title'
 import {
   LoadingOutlined,
@@ -33,13 +35,14 @@ export default class BookmarkIndex extends Component {
   constructor (props) {
     super(props)
     let initType = props.formData.type
-    if (initType === terminalTelnetType) {
-      initType = terminalTelnetType
-    } else if (initType === terminalSerialType) {
-      initType = terminalSerialType
-    } else if (initType === terminalLocalType) {
-      initType = terminalLocalType
-    } else {
+    if (
+      ![
+        terminalTelnetType,
+        terminalWebType,
+        terminalLocalType,
+        terminalSerialType
+      ].includes(initType)
+    ) {
       initType = connectionMap.ssh
     }
     this.state = {
@@ -64,7 +67,8 @@ export default class BookmarkIndex extends Component {
     [connectionMap.ssh]: SshForm,
     [connectionMap.telnet]: TelnetForm,
     [connectionMap.serial]: SerialForm,
-    [connectionMap.local]: LocalForm
+    [connectionMap.local]: LocalForm,
+    [connectionMap.web]: WebForm
   }
 
   handleChange = (e) => {

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

@@ -5,30 +5,154 @@ import {
   Radio,
   Space,
   Button,
-  Tooltip
+  Tooltip,
+  Table
 } from 'antd'
-import { MinusCircleOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
-import { formItemLayout } from '../../common/form-layout'
+import { useState } from 'react'
+import { PlusOutlined, QuestionCircleOutlined, MinusCircleFilled } from '@ant-design/icons'
+import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+import uid from '../../common/uid'
 
 const FormItem = Form.Item
-const FormList = Form.List
 const {
   Button: RadioButton,
   Group: RadioGroup
 } = Radio
 const { prefix } = window
 const e = prefix('ssh')
+const s = prefix('sftp')
+const m = prefix('menu')
 
-export default function renderSshTunnel () {
-  function renderItem (field, i, add, remove) {
+export default function renderSshTunnels (props) {
+  const {
+    form,
+    formData
+  } = props
+  const [formChild] = Form.useForm()
+  const [initialValues] = useState({
+    sshTunnelLocalPort: 12200,
+    sshTunnelLocalHost: '127.0.0.1',
+    sshTunnelRemotePort: 12300,
+    sshTunnelRemoteHost: '127.0.0.1'
+  })
+  const [list, setList] = useState(formData.sshTunnels || [])
+  function onSubmit () {
+    formChild.submit()
+  }
+  function handleFinish (data) {
+    const nd = {
+      ...data,
+      id: uid()
+    }
+    const v = [
+      ...form.getFieldValue('sshTunnels'),
+      nd
+    ]
+    form.setFieldsValue({
+      sshTunnels: v
+    })
+    setList(old => {
+      return [
+        ...old,
+        data
+      ]
+    })
+    formChild.resetFields()
+  }
+
+  function remove (id) {
+    setList(old => {
+      return old.filter(i => i.id !== id)
+    })
+    const v = form.getFieldValue('sshTunnels').filter(i => i.id !== id)
+    form.setFieldsValue({
+      sshTunnels: v
+    })
+    formChild.resetFields()
+  }
+  const cols = [
+    {
+      title: 'NO.',
+      dataIndex: 'index',
+      key: 'index',
+      render: (k) => k
+    }, {
+      title: e('sshTunnel'),
+      key: 'sshTunnel',
+      render: (k, item) => {
+        // sshTunnel is forwardRemoteToLocal or forwardLocalToRemote
+        const {
+          sshTunnel,
+          sshTunnelRemoteHost = '127.0.0.1',
+          sshTunnelRemotePort,
+          sshTunnelLocalHost = '127.0.0.1',
+          sshTunnelLocalPort,
+          name
+        } = item
+        const to = sshTunnel === 'forwardRemoteToLocal'
+          ? `${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+          : `${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+        const from = sshTunnel === 'forwardRemoteToLocal'
+          ? `${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+          : `${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+        return (
+          <span>
+            {name ? `[${name}] ` : ''}→ {from} → {to}
+          </span>
+        )
+      }
+    }, {
+      title: m('del'),
+      key: 'op',
+      dataIndex: 'id',
+      render: (id) => {
+        return (
+          <MinusCircleFilled
+            className='pointer'
+            onClick={() => remove(id)}
+          />
+        )
+      }
+    }
+  ]
+
+  function renderList () {
     return (
-      <Space
-        align='center'
-        key={field.key}
+      <FormItem {...tailFormItemLayout}>
+        <Table
+          columns={cols}
+          className='mg3b'
+          pagination={false}
+          size='small'
+          dataSource={list.map((d, i) => {
+            return {
+              ...d,
+              index: i + 1
+            }
+          })}
+        />
+      </FormItem>
+    )
+  }
+
+  return (
+    <div>
+      <FormItem
+        name='sshTunnels'
+        className='hide'
+      >
+        <Input />
+      </FormItem>
+      <Form
+        form={formChild}
+        onFinish={handleFinish}
+        initialValues={initialValues}
       >
+        {renderList()}
         <FormItem
           label={e('sshTunnel')}
-          name={[field.name, 'sshTunnel']}
+          name='sshTunnel'
+          {...formItemLayout}
           required
         >
           <RadioGroup>
@@ -48,87 +172,85 @@ export default function renderSshTunnel () {
             </RadioButton>
           </RadioGroup>
         </FormItem>
-        <Space.Compact className='mg2x'>
-          <FormItem
-            label={e('destination')}
-            name={[field.name, 'sshTunnelRemoteHost']}
-            initialValue='127.0.0.1'
-            required
-          >
-            <Input
-              className='compact-input'
-              placeholder={e('host')}
-            />
-          </FormItem>
-          <FormItem
-            label=''
-            name={[field.name, 'sshTunnelRemotePort']}
-            initialValue={22}
-            required
-          >
-            <InputNumber
-              min={1}
-              max={65535}
-              // addonBefore={e('remotePort')}
-              className='compact-input'
-              placeholder={e('port')}
-            />
-          </FormItem>
-        </Space.Compact>
         <FormItem
-          label={e('localPort')}
-          name={[field.name, 'sshTunnelLocalPort']}
-          initialValue={22}
+          label={s('remote')}
+          {...formItemLayout}
           required
-          className='mg2x'
+          className='ssh-tunnels-host'
         >
-          <InputNumber
-            min={1}
-            max={65535}
-            // addonBefore={e('localPort')}
-            className='compact-input'
-            placeholder={e('port')}
+          <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>
+        <FormItem
+          label={s('local')}
+          {...formItemLayout}
+          required
+          className='ssh-tunnels-host'
+        >
+          <Space.Compact>
+            <FormItem
+              name='sshTunnelLocalHost'
+              label=''
+              required
+            >
+              <Input
+                placeholder={e('host')}
+              />
+            </FormItem>
+            <FormItem
+              label=''
+              name='sshTunnelLocalPort'
+              required
+            >
+              <InputNumber
+                min={1}
+                max={65535}
+                // addonBefore={e('localPort')}
+                placeholder={e('port')}
+              />
+            </FormItem>
+          </Space.Compact>
+        </FormItem>
+        <FormItem
+          name='name'
+          label={s('name')}
+          {...formItemLayout}
+        >
+          <Input
+            placeholder={e('name')}
           />
         </FormItem>
-        <Button
-          icon={<MinusCircleOutlined />}
-          onClick={() => remove(field.name)}
-          className='mg24b'
-        />
-      </Space>
-    )
-  }
-
-  return [
-    <FormList
-      {...formItemLayout}
-      label={e('sshTunnel')}
-      name='sshTunnels'
-      key='sshTunnels'
-    >
-      {
-        (fields, { add, remove }, { errors }) => {
-          return (
-            <div>
-              {
-                fields.map((field, i) => {
-                  return renderItem(field, i, add, remove)
-                })
-              }
-              <FormItem>
-                <Button
-                  type='dashed'
-                  onClick={() => add()}
-                  block
-                  icon={<PlusOutlined />}
-                >
-                  {e('sshTunnel')}
-                </Button>
-              </FormItem>
-            </div>
-          )
-        }
-      }
-    </FormList>
-  ]
+        <FormItem {...tailFormItemLayout} className='mg60b'>
+          <Button
+            type='default'
+            htmlType='button'
+            icon={<PlusOutlined />}
+            onClick={onSubmit}
+          >
+            {e('sshTunnel')}
+          </Button>
+        </FormItem>
+      </Form>
+    </div>
+  )
 }

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

@@ -65,7 +65,7 @@ export default function BookmarkFormUI (props) {
     encode: encodes[0],
     envLang: defaultEnvLang,
     enableSsh: true,
-    sshTunnels: [{}],
+    sshTunnels: [],
     runScripts: [{}],
     category: initBookmarkGroupId,
     connectionHoppings: []

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

@@ -0,0 +1,96 @@
+/**
+ * web form
+ */
+
+import { useEffect } from 'react'
+import {
+  Input,
+  Form
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import {
+  newBookmarkIdPrefix,
+  terminalWebType
+} from '../../common/constants'
+import useSubmit from './use-submit'
+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'
+
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+
+export default function LocalFormUi (props) {
+  const [
+    form,
+    handleFinish,
+    submitUi
+  ] = useSubmit(props)
+  useEffect(() => {
+    if (props.formData.id.startsWith(newBookmarkIdPrefix)) {
+      form.setFieldsValue({
+        category: props.currentBookmarkGroupId
+      })
+    }
+  }, [props.currentBookmarkGroupId])
+  let initialValues = copy(props.formData)
+  const defaultValues = {
+    type: terminalWebType,
+    color: getRandomDefaultColor()
+  }
+  initialValues = defaults(initialValues, defaultValues)
+  function renderCommon () {
+    return (
+      <div className='pd1x'>
+        <FormItem
+          {...formItemLayout}
+          label={e('title')}
+          hasFeedback
+        >
+          <FormItem noStyle name='title'>
+            <Input addonBefore={<ColorPickerItem />} />
+          </FormItem>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('URL')}
+          hasFeedback
+          name='url'
+          required
+        >
+          <Input addonBefore={<ColorPickerItem />} />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('description')}
+          name='description'
+          hasFeedback
+        >
+          <Input.TextArea rows={1} />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='type'
+          name='type'
+          className='hide'
+        >
+          <Input />
+        </FormItem>
+      </div>
+    )
+  }
+
+  return (
+    <Form
+      form={form}
+      onFinish={handleFinish}
+      initialValues={initialValues}
+      name='local-form'
+    >
+      {renderCommon()}
+      {submitUi}
+    </Form>
+  )
+}

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

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

package/client/components/main/main.jsx

@@ -12,6 +12,9 @@ import CssOverwrite from './css-overwrite'
 import UiTheme from './ui-theme'
 import CustomCss from './custom-css.jsx'
 import TerminalInteractive from '../terminal/terminal-interactive'
+import ConfirmModalStore from '../sftp/confirm-modal-store.jsx'
+import TransferConflictStore from '../sftp/transfer-conflict-store.jsx'
+import TransportsActionStore from '../sftp/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin } from '../../common/constants'
@@ -149,6 +152,17 @@ export default class Index extends Component {
             />
           </div>
           <ContextMenu store={store} />
+          <ConfirmModalStore
+            store={store}
+          />
+          <TransferConflictStore
+            store={store}
+            _fileTransfers={store._fileTransfers}
+          />
+          <TransportsActionStore
+            store={store}
+            _fileTransfers={store._fileTransfers}
+          />
         </div>
       </ConfigProvider>
     )

package/client/components/quick-commands/qm.styl

@@ -8,7 +8,7 @@
   left 43px
   right 0
   color text
-  z-index 200
+  z-index 89
   height auto
   bottom 36px
   background alpha(main-dark, .9)

package/client/components/session/session.styl

@@ -55,4 +55,7 @@
 .no-sessions
   background main-dark
   text-align center
-  padding 50px 0
+  padding 50px 0
+.web-session-wrap
+  height 100vh
+  background main