@electerm/electerm-react 2.17.16 → 3.0.18

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

@@ -1,117 +1 @@
-/**
- * bookmark form auth renderer (copied from legacy)
- */
-import {
-  Button,
-  Input,
-  AutoComplete,
-  Form,
-  Select
-} from 'antd'
-import { formItemLayout } from '../../../common/form-layout'
-import { uniqBy } from 'lodash-es'
-import Password from '../../common/password'
-import Upload from '../../common/upload'
-
-const { TextArea } = Input
-const FormItem = Form.Item
-const e = window.translate
-
-export default function renderAuth (props) {
-  const {
-    store,
-    form,
-    authType,
-    formItemName = 'password',
-    profileFilter = (d) => d
-  } = props
-  const beforeUpload = async (file) => {
-    const filePath = file.filePath
-    const privateKey = await window.fs.readFile(filePath)
-    form.setFieldsValue({
-      privateKey
-    })
-  }
-  if (authType === 'password') {
-    const opts = {
-      options: uniqBy(
-        store.bookmarks
-          .filter(d => d.password),
-        (d) => d.password
-      )
-        .map(d => ({
-          label: `${d.title ? `(${d.title})` : ''}${d.username || ''}:${d.host}-******`,
-          value: d.password
-        })),
-      placeholder: e('password'),
-      allowClear: false
-    }
-    return (
-      <FormItem
-        {...formItemLayout}
-        label={e('password')}
-        name={formItemName}
-        hasFeedback
-        rules={[{
-          max: 1024, message: '1024 chars max'
-        }]}
-      >
-        <AutoComplete {...opts}>
-          <Password />
-        </AutoComplete>
-      </FormItem>
-    )
-  }
-  if (authType === 'profiles') {
-    const opts = {
-      options: store.profiles
-        .filter(profileFilter)
-        .map(d => ({ label: d.name, value: d.id })),
-      placeholder: e('profiles'),
-      allowClear: true
-    }
-    return (
-      <FormItem
-        {...formItemLayout}
-        label={e('profiles')}
-        name='profile'
-        hasFeedback
-      >
-        <Select {...opts} />
-      </FormItem>
-    )
-  }
-  return [
-    <FormItem
-      {...formItemLayout}
-      label={e('privateKey')}
-      hasFeedback
-      key='privateKey'
-      className='mg1b'
-      rules={[{
-        max: 13000, message: '13000 chars max'
-      }]}
-    >
-      <FormItem noStyle name='privateKey'>
-        <TextArea placeholder={e('privateKeyDesc')} autoSize={{ minRows: 1 }} />
-      </FormItem>
-      <Upload beforeUpload={beforeUpload} fileList={[]}>
-        <Button type='dashed' className='mg2b mg1t'>
-          {e('importFromFile')}
-        </Button>
-      </Upload>
-    </FormItem>,
-    <FormItem
-      key='passphrase'
-      {...formItemLayout}
-      label={e('passphrase')}
-      name='passphrase'
-      hasFeedback
-      rules={[{
-        max: 1024, message: '1024 chars max'
-      }]}
-    >
-      <Password placeholder={e('passphraseDesc')} />
-    </FormItem>
-  ]
-}
+export { default } from './ssh-auth-selector'

package/client/components/bookmark-form/config/common-fields.js

@@ -239,6 +239,13 @@ export const commonFields = {
     type: 'runScripts',
     name: 'runScripts',
     label: ''
+  },
+
+  enableTerminalImage: {
+    type: 'switch',
+    name: 'enableTerminalImage',
+    label: () => e('enableTerminalImage'),
+    valuePropName: 'checked'
   }
 }
 
@@ -272,6 +279,7 @@ export const sshSettings = [
     label: () => e('ignoreKeyboardInteractive'),
     valuePropName: 'checked'
   },
+  commonFields.enableTerminalImage,
   ...terminalSettings.slice(0, -1), // All except terminalBackground
   commonFields.x11,
   commonFields.terminalBackground

package/client/components/bookmark-form/config/ftp.js

@@ -34,6 +34,7 @@ const ftpConfig = {
         { type: 'password', name: 'password', label: () => e('password') },
         { type: 'switch', name: 'secure', label: () => e('secure'), valuePropName: 'checked' },
         commonFields.encode,
+        commonFields.proxy,
         commonFields.type
       ]
     }

package/client/components/bookmark-form/config/local.js

@@ -1,5 +1,5 @@
 import { formItemLayout } from '../../../common/form-layout.js'
-import { terminalLocalType, terminalTypes } from '../../../common/constants.js'
+import { terminalLocalType } from '../../../common/constants.js'
 import {
   createBaseInitValues,
   getTerminalDefaults,
@@ -31,7 +31,8 @@ const localConfig = {
         commonFields.category,
         commonFields.colorTitle,
         commonFields.description,
-        { type: 'runScripts', name: 'runScripts', label: '' },
+        commonFields.enableTerminalImage,
+        commonFields.runScripts,
         { type: 'input', name: 'type', label: 'type', hidden: true }
       ]
     },
@@ -39,54 +40,12 @@ const localConfig = {
       key: 'settings',
       label: e('settings'),
       fields: [
-        {
-          type: 'input',
-          name: 'env.LANG',
-          label: 'ENV:LANG',
-          props: { maxLength: 130 }
-        },
-        {
-          type: 'autocomplete',
-          name: 'term',
-          label: () => e('terminalType'),
-          rules: [{ required: true, message: 'terminal type required' }],
-          options: terminalTypes.map(t => ({ label: t, value: t }))
-        },
-        {
-          type: 'switch',
-          name: 'displayRaw',
-          label: () => e('displayRaw'),
-          valuePropName: 'checked'
-        },
-        {
-          type: 'input',
-          name: 'fontFamily',
-          label: () => e('fontFamily'),
-          rules: [{ max: 130, message: '130 chars max' }],
-          props: { placeholder: defaultSettings.fontFamily }
-        },
-        {
-          type: 'number',
-          name: 'fontSize',
-          label: () => e('fontSize'),
-          props: {
-            min: 9,
-            max: 65535,
-            step: 1,
-            placeholder: defaultSettings.fontSize
-          }
-        },
-        {
-          type: 'number',
-          name: 'keepaliveInterval',
-          label: () => e('keepaliveIntervalDesc'),
-          props: {
-            min: 0,
-            max: 20000000,
-            step: 1000
-          }
-        },
-        { type: 'terminalBackground', name: 'terminalBackground', label: () => e('terminalBackgroundImage') },
+        commonFields.terminalType,
+        commonFields.displayRaw,
+        commonFields.fontFamily,
+        commonFields.fontSize,
+        commonFields.keepaliveInterval,
+        commonFields.terminalBackground,
         // Exec settings - stored as flat properties on bookmark
         { type: 'execSettings' }
       ]
@@ -95,7 +54,7 @@ const localConfig = {
       key: 'quickCommands',
       label: e('quickCommands'),
       fields: [
-        { type: 'quickCommands', name: '__quick__', label: '' }
+        commonFields.quickCommands
       ]
     }
   ]

package/client/components/session/sessions.jsx

@@ -11,6 +11,7 @@ import pixed from '../layout/pixed'
 export default class Sessions extends Component {
   // Function to reload a tab using store.reloadTab
   reloadTab = (tab) => {
+    window.store.updateTab(tab.id, tab)
     window.store.reloadTab(tab.id)
   }
 

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

@@ -580,7 +580,6 @@ export default class SettingTerminal extends Component {
           this.renderToggle('saveTerminalLogToFile')
         }
         {this.renderToggle('addTimeStampToTermLog')}
-        {this.renderToggle('enableSixel', 'pd2b', 'SIXEL')}
         {
           [
             'cursorBlink',
@@ -590,7 +589,8 @@ export default class SettingTerminal extends Component {
             'ctrlOrMetaOpenTerminalLink',
             'sftpPathFollowSsh',
             'sshSftpSplitView',
-            'showCmdSuggestions'
+            'showCmdSuggestions',
+            'autoReconnectTerminal'
           ].map(d => this.renderToggle(d))
         }
         <div className='pd1b'>{e('terminalBackSpaceMode')}</div>

package/client/components/sftp/address-bookmark-item.jsx

@@ -68,7 +68,7 @@ export default class AddrBookmarkItem extends Component {
         onDrop={this.handleDrop}
       >
         {globTag}
-        <b>{item.addr}</b>
+        <b className='mg1l'>{item.addr}</b>
         <CloseCircleOutlined
           className='del-addr-bookmark'
           onClick={this.handleDel}

package/client/components/sftp/address-bookmark.jsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { auto } from 'manate/react'
 import {
   StarOutlined,
@@ -13,6 +14,8 @@ import uid from '../../common/uid'
 import './address-bookmark.styl'
 
 export default auto(function AddrBookmark (props) {
+  const [open, setOpen] = useState(false)
+
   function onDel (item) {
     window.store.delAddressBookmark(item)
   }
@@ -39,6 +42,11 @@ export default auto(function AddrBookmark (props) {
     handleAddAddrAct(true)
   }
 
+  function handleClick (type, addr) {
+    setOpen(false)
+    onClickHistory(type, addr)
+  }
+
   const { type, onClickHistory, host } = props
   const { store } = window
   // const cls = classnames(
@@ -58,7 +66,7 @@ export default auto(function AddrBookmark (props) {
     ? addrs.map(o => {
       return (
         <AddrBookmarkItem
-          handleClick={onClickHistory}
+          handleClick={handleClick}
           type={type}
           key={o.id}
           handleDel={onDel}
@@ -100,6 +108,8 @@ export default auto(function AddrBookmark (props) {
       title={title}
       placement='bottom'
       trigger='click'
+      open={open}
+      onOpenChange={setOpen}
     >
       <StarOutlined className={props.className || ''} />
     </Popover>

package/client/components/sftp/file-item.jsx

@@ -998,7 +998,7 @@ export default class FileSection extends React.Component {
     const shouldShowSelectedMenu = id &&
       len > 1 &&
       selectedFiles.has(id)
-    const delTxt = shouldShowSelectedMenu ? `${e('deleteAll')}(${len})` : e('del')
+    const delTxt = shouldShowSelectedMenu ? `${e('del')}:${e('selected')}(${len})` : e('del')
     const canPaste = hasFileInClipboardText()
     const showEdit = !isDirectory && id &&
       size < maxEditFileSize

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

@@ -29,7 +29,7 @@ import fs from '../../common/fs'
 import ListTable from './list-table-ui'
 import deepCopy from 'json-deep-copy'
 import isValidPath from '../../common/is-valid-path'
-import { LoadingOutlined } from '@ant-design/icons'
+import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
 import * as owner from './owner-list'
 import AddressBar from './address-bar'
 import getProxy from '../../common/get-proxy'
@@ -956,6 +956,20 @@ export default class Sftp extends Component {
     }, () => this[`${type}List`](undefined, undefined, oldPath))
   }
 
+  handleReloadRemoteSftp = async () => {
+    if (this.sftp) {
+      this.sftp.destroy()
+      this.sftp = null
+    }
+    this.setState({
+      remoteLoading: true,
+      remote: [],
+      remoteFileTree: new Map()
+    }, () => {
+      this.initRemoteAll()
+    })
+  }
+
   parsePath = (type, pth) => {
     const reg = /^%([^%]+)%/
     if (!reg.test(pth)) {
@@ -1152,6 +1166,25 @@ export default class Sftp extends Component {
     )
   }
 
+  renderSftpPanelTitle (type, username, host) {
+    if (type === typeMap.remote) {
+      return (
+        <div className='sftp-panel-title pd1t pd1b pd1x alignright'>
+          <ReloadOutlined
+            className='mg1r pointer'
+            onClick={this.handleReloadRemoteSftp}
+          />
+          {e('remote')}: {username}@{host}
+        </div>
+      )
+    }
+    return (
+      <div className='sftp-panel-title pd1t pd1b pd1x'>
+        {e('local')}
+      </div>
+    )
+  }
+
   renderSection (type, style, width) {
     const {
       id
@@ -1222,17 +1255,7 @@ export default class Sftp extends Component {
         <Spin spinning={loading}>
           <div className='pd1 sftp-panel'>
             {
-              type === typeMap.remote
-                ? (
-                  <div className='sftp-panel-title pd1t pd1b pd1x alignright'>
-                    {e('remote')}: {username}@{host}
-                  </div>
-                  )
-                : (
-                  <div className='sftp-panel-title pd1t pd1b pd1x'>
-                    {e('local')}
-                  </div>
-                  )
+              this.renderSftpPanelTitle(type, username, host)
             }
             <AddressBar
               {...addrProps}

package/client/components/sidebar/history.jsx

@@ -26,7 +26,7 @@ export default auto(function HistoryPanel (props) {
   } = store
   let arr = store.config.disableConnectionHistory ? [] : history
   if (sortByFrequency) {
-    arr = arr.sort((a, b) => { return b.count - a.count })
+    arr = [...arr].sort((a, b) => { return b.count - a.count })
   }
 
   const handleSortByFrequencyChange = (checked) => {

package/client/components/tabs/app-drag.jsx

@@ -19,6 +19,19 @@ export default function AppDrag (props) {
     return true
   }
 
+  useEffect(() => {
+    if (window.store.shouldSendWindowMove) {
+      return
+    }
+    document.addEventListener('mouseup', onMouseUp)
+    window.addEventListener('contextmenu', onMouseUp)
+
+    return () => {
+      document.removeEventListener('mouseup', onMouseUp)
+      window.removeEventListener('contextmenu', onMouseUp)
+    }
+  }, [])
+
   function onMouseDown (e) {
     // e.stopPropagation()
     if (canOperate(e)) {
@@ -48,18 +61,6 @@ export default function AppDrag (props) {
       window.pre.runGlobalAsync('maximize')
     }
   }
-  if (!window.store.shouldSendWindowMove) {
-    useEffect(() => {
-      // Listen for mouseup at document level to catch mouseup outside window
-      document.addEventListener('mouseup', onMouseUp)
-      window.addEventListener('contextmenu', onMouseUp)
-
-      return () => {
-        document.removeEventListener('mouseup', onMouseUp)
-        window.removeEventListener('contextmenu', onMouseUp)
-      }
-    }, [])
-  }
   const props0 = {
     className: 'app-drag',
     onDoubleClick

package/client/components/tabs/tabs.styl

@@ -167,7 +167,7 @@
   z-index 900
   border-radius 0 0 3px 3px
   padding 0
-  background var(--main-lighter)
+  background var(--main)
 
 .window-control-box
   display inline-block

package/client/components/terminal/reconnect-overlay.jsx

@@ -0,0 +1,27 @@
+import { memo } from 'react'
+import { Button } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+
+const e = window.translate
+
+export default memo(function ReconnectOverlay ({ countdown, onCancel }) {
+  if (countdown === null || countdown === undefined) {
+    return null
+  }
+  return (
+    <div className='terminal-reconnect-overlay'>
+      <div className='terminal-reconnect-box'>
+        <LoadingOutlined className='terminal-reconnect-icon' />
+        <div className='terminal-reconnect-msg'>
+          {e('autoReconnectTerminal')}: {countdown}s
+        </div>
+        <Button
+          size='small'
+          onClick={onCancel}
+        >
+          {e('cancel')}
+        </Button>
+      </div>
+    </div>
+  )
+})

package/client/components/terminal/socket-close-warning.jsx

@@ -0,0 +1,94 @@
+import { useState, useEffect, useRef } from 'react'
+import { Button } from 'antd'
+import { ReloadOutlined } from '@ant-design/icons'
+import { notification } from '../common/notification'
+
+const e = window.translate
+const COUNTDOWN_SECONDS = 3
+
+export function showSocketCloseWarning ({
+  tabId,
+  tab,
+  autoReconnect,
+  delTab,
+  reloadTab
+}) {
+  const key = `open${Date.now()}`
+
+  function closeNotification () {
+    notification.destroy(key)
+  }
+
+  const descriptionNode = (
+    <SocketCloseDescription
+      autoReconnect={autoReconnect}
+      onClose={() => {
+        closeNotification()
+        delTab(tabId)
+      }}
+      onReload={() => {
+        closeNotification()
+        reloadTab({ ...tab, autoReConnect: (tab.autoReConnect || 0) + 1 })
+      }}
+    />
+  )
+
+  notification.warning({
+    key,
+    message: e('socketCloseTip'),
+    duration: autoReconnect ? COUNTDOWN_SECONDS + 2 : 30,
+    description: descriptionNode
+  })
+
+  return { key }
+}
+
+function SocketCloseDescription ({ autoReconnect, onClose, onReload }) {
+  const [countdown, setCountdown] = useState(COUNTDOWN_SECONDS)
+  const timerRef = useRef(null)
+
+  useEffect(() => {
+    if (!autoReconnect) {
+      return
+    }
+    timerRef.current = setInterval(() => {
+      setCountdown(prev => {
+        if (prev <= 1) {
+          clearInterval(timerRef.current)
+          onReload()
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current)
+      }
+    }
+  }, [autoReconnect])
+
+  return (
+    <div className='pd2y'>
+      {autoReconnect && (
+        <div className='pd1b'>
+          {e('autoReconnectTerminal')}: {countdown}s
+        </div>
+      )}
+      <Button
+        className='mg1r'
+        type='primary'
+        onClick={onClose}
+      >
+        {e('close')}
+      </Button>
+      <Button
+        icon={<ReloadOutlined />}
+        onClick={onReload}
+      >
+        {e('reload')}
+      </Button>
+    </div>
+  )
+}