@electerm/electerm-react 1.39.5 → 1.39.31

package/client/common/constants.js

@@ -68,12 +68,14 @@ export const connectionMap = buildConst([
   'serial',
   'local',
   'web',
-  'rdp'
+  'rdp',
+  'vnc'
 ])
 
 export const authTypeMap = buildConst([
   'password',
-  'privateKey'
+  'privateKey',
+  'profiles'
 ])
 
 export const footerHeight = 36
@@ -101,7 +103,8 @@ export const settingMap = buildConst([
   'terminalThemes',
   'bookmarkGroups',
   'quickCommands',
-  'addressBookmarks'
+  'addressBookmarks',
+  'profiles'
 ])
 
 export const infoTabs = buildConst([
@@ -135,6 +138,7 @@ export const terminalSplitDirectionMap = buildConst([
 export const terminalSshConfigType = 'ssh-config'
 export const terminalWebType = 'web'
 export const terminalRdpType = 'rdp'
+export const terminalVncType = 'vnc'
 export const terminalSerialType = 'serial'
 export const terminalTelnetType = 'telnet'
 export const terminalLocalType = 'local'

package/client/common/create-title.jsx

@@ -9,7 +9,16 @@ import {
 const { prefix } = window
 const p = prefix('sftp')
 
-export default function createTitle (res) {
+function maskHost (hostOrIp = '') {
+  if (/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(hostOrIp)) {
+    const arr = hostOrIp.split('.')
+    return arr.slice(0, arr.length - 2).join('.') + '.*.*'
+  } else {
+    return hostOrIp.replace(/^.{3}/, '***')
+  }
+}
+
+export default function createTitle (res, hide = true) {
   if (!res) {
     return ''
   }
@@ -17,7 +26,8 @@ export default function createTitle (res) {
     host, port, username, title, type,
     path, connectionHoppings, sshTunnels
   } = res
-  const fixTitle = `${username || ''}@${host}:${port}`
+  const h = hide ? maskHost(host) : host
+  const fixTitle = `${username || ''}@${h}:${port}`
   const extra = host || path ? (path || fixTitle) : ''
   let f = title
     ? `${title}` + (extra ? ` - ${extra}` : '')

package/client/common/default-setting.js

@@ -52,5 +52,10 @@ export default {
     'activities',
     'network',
     'disks'
+  ],
+  filePropsEnabled: [
+    'name',
+    'size',
+    'modifyTime'
   ]
 }

package/client/common/init-setting-item.js

@@ -13,6 +13,7 @@ const { prefix } = window
 const e = prefix('control')
 const newQuickCommand = 'newQuickCommand'
 const q = prefix('quickCommands')
+const f = prefix('form')
 
 export default (arr, tab) => {
   if (tab === settingMap.history) {
@@ -28,5 +29,10 @@ export default (arr, tab) => {
       id: '',
       name: q(newQuickCommand)
     }
+  } else if (tab === settingMap.profiles) {
+    return {
+      id: '',
+      name: f(settingMap.profiles)
+    }
   }
 }

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/index.jsx

@@ -11,6 +11,7 @@ import {
   terminalSerialType,
   terminalWebType,
   terminalRdpType,
+  terminalVncType,
   terminalLocalType,
   terminalTelnetType,
   newBookmarkIdPrefix
@@ -21,6 +22,7 @@ import LocalForm from './local-form'
 import TelnetForm from './telnet-form'
 import WebForm from './web-form'
 import RdpForm from './rdp-form'
+import VncForm from './vnc-form'
 import { createTitleWithTag } from '../../common/create-title'
 import {
   LoadingOutlined,
@@ -43,7 +45,8 @@ export default class BookmarkIndex extends Component {
         terminalWebType,
         terminalLocalType,
         terminalSerialType,
-        terminalRdpType
+        terminalRdpType,
+        terminalVncType
       ].includes(initType)
     ) {
       initType = connectionMap.ssh
@@ -72,7 +75,8 @@ export default class BookmarkIndex extends Component {
     [connectionMap.serial]: SerialForm,
     [connectionMap.local]: LocalForm,
     [connectionMap.web]: WebForm,
-    [connectionMap.rdp]: RdpForm
+    [connectionMap.rdp]: RdpForm,
+    [connectionMap.vnc]: VncForm
   }
 
   handleChange = (e) => {

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

@@ -29,7 +29,7 @@ const { prefix } = window
 const e = prefix('form')
 const c = prefix('common')
 
-export default function LocalFormUi (props) {
+export default function RdpFormUi (props) {
   const [
     form,
     handleFinish,

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

@@ -4,7 +4,7 @@
 import BookmarkForm from './ssh-form'
 import RdpFormUi from './rdp-form-ui'
 
-export default class WebForm extends BookmarkForm {
+export default class RdpForm extends BookmarkForm {
   render () {
     return (
       <RdpFormUi

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

@@ -6,7 +6,8 @@ import {
   Input,
   Upload,
   AutoComplete,
-  Form
+  Form,
+  Select
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
 import { uniqBy } from 'lodash-es'
@@ -57,6 +58,31 @@ export default function renderAuth (props) {
       </FormItem>
     )
   }
+  if (authType === 'profiles') {
+    const opts = {
+      options: store.profiles
+        .map(d => {
+          return {
+            label: d.name,
+            value: d.id
+          }
+        }),
+      placeholder: e('profiles'),
+      allowClear: false
+    }
+    return (
+      <FormItem
+        {...formItemLayout}
+        label={e('profiles')}
+        name='profile'
+        hasFeedback
+      >
+        <Select
+          {...opts}
+        />
+      </FormItem>
+    )
+  }
   return [
     <FormItem
       {...formItemLayout}

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/vnc-form-ui.jsx

@@ -0,0 +1,179 @@
+/**
+ * web form
+ */
+
+import { useEffect } from 'react'
+import {
+  Input,
+  Form,
+  InputNumber,
+  TreeSelect,
+  Switch
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import {
+  newBookmarkIdPrefix,
+  terminalVncType
+} 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'
+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 VncFormUi (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: terminalVncType,
+    port: 5900,
+    category: initBookmarkGroupId,
+    color: getRandomDefaultColor(),
+    viewOnly: false,
+    scaleViewport: true
+  }
+  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>
+        <FormItem
+          {...formItemLayout}
+          label={e('viewOnly')}
+          name='viewOnly'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('scaleViewport')}
+          name='scaleViewport'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('username')}
+          hasFeedback
+          name='username'
+        >
+          <Input />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('password')}
+          hasFeedback
+          name='password'
+        >
+          <Input.Password />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('description')}
+          name='description'
+          hasFeedback
+        >
+          <Input.TextArea rows={1} />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={c('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/vnc-form.jsx

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

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>
                 )
               })
@@ -123,6 +129,7 @@ export default class SystemMenu extends Component {
     if (
       type === 'rdp' ||
       type === 'web' ||
+      type === 'vnc' ||
       pane === paneMap.fileManager ||
       !tabs.length
     ) {

package/client/components/main/term-fullscreen.styl

@@ -5,6 +5,7 @@
   .terminal-control
   .qm-wrap-tooltip
   .main-footer
+  .session-v-info
     display none
   .term-fullscreen-control
     display block
@@ -12,7 +13,9 @@
     top 10px
     position fixed
     z-index 100
+    background rgba(45, 245, 108, 0.8)
   .term-wrap
+  .session-v-wrap
     position fixed
     left 0 !important
     top 0 !important
@@ -24,4 +27,4 @@
     right 10px !important
     bottom 10px !important
 .term-fullscreen-control
-  display none
+  display none