@electerm/electerm-react 1.39.18 → 1.39.35

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 && window.store.config.hideIP ? 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,11 @@ export default {
     'activities',
     'network',
     'disks'
-  ]
+  ],
+  filePropsEnabled: [
+    'name',
+    'size',
+    'modifyTime'
+  ],
+  hideIP: false
 }

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/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/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

@@ -129,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

package/client/components/profile/profile-form-elem.jsx

@@ -0,0 +1,87 @@
+import {
+  Form,
+  message,
+  Button
+} from 'antd'
+import generate from '../../common/uid'
+import InputAutoFocus from '../common/input-auto-focus'
+import renderAuth from '../bookmark-form/render-auth-ssh'
+import { formItemLayout } from '../../common/form-layout'
+import {
+  settingMap
+} from '../../common/constants'
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+const s = prefix('setting')
+const ss = prefix('sftp')
+
+export default function QuickCommandForm (props) {
+  const [form] = Form.useForm()
+  const { autofocustrigger } = props.store
+  async function handleSubmit (res) {
+    const { formData } = props
+    console.log(res)
+    const update1 = {
+      ...res,
+      id: generate()
+    }
+    if (formData.id) {
+      props.store.editItem(formData.id, res, settingMap.profiles)
+    } else {
+      props.store.addItem(update1, settingMap.profiles)
+      props.store.setSettingItem({
+        id: '',
+        name: e('profile')
+      })
+    }
+    message.success(s('saved'))
+  }
+  return (
+    <Form
+      form={form}
+      onFinish={handleSubmit}
+      className='form-wrap pd2l'
+      layout='vertical'
+      initialValues={props.formData}
+    >
+      <FormItem
+        label={e('profileName')}
+        {...formItemLayout}
+        rules={[{
+          max: 60, message: '60 chars max'
+        }, {
+          required: true, message: 'Name required'
+        }]}
+        hasFeedback
+        name='name'
+      >
+        <InputAutoFocus
+          selectall='yes'
+          autofocustrigger={autofocustrigger}
+        />
+      </FormItem>
+      {
+        renderAuth({
+          store: props.store,
+          form,
+          authType: 'password'
+        })
+      }
+      {
+        renderAuth({
+          store: props.store,
+          form
+        })
+      }
+      <FormItem>
+        <Button
+          type='primary'
+          htmlType='submit'
+        >
+          {ss('submit')}
+        </Button>
+      </FormItem>
+    </Form>
+  )
+}

package/client/components/profile/profile-form.jsx

@@ -0,0 +1,33 @@
+import { PureComponent } from 'react'
+import ProfileCommandForm from './profile-form-elem'
+import { LoadingOutlined } from '@ant-design/icons'
+
+export default class ProfleFormIndex extends PureComponent {
+  state = {
+    ready: false
+  }
+
+  componentDidMount () {
+    this.timer = setTimeout(() => {
+      this.setState({
+        ready: true
+      })
+    }, 200)
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+  }
+
+  render () {
+    const { ready } = this.state
+    if (!ready) {
+      return (
+        <div className='pd3 aligncenter'>
+          <LoadingOutlined />
+        </div>
+      )
+    }
+    return <ProfileCommandForm {...this.props} />
+  }
+}

package/client/components/profile/profile-list.jsx

@@ -0,0 +1,79 @@
+/**
+ * quick command list render
+ */
+
+import List from '../setting-panel/list'
+import { PlusOutlined } from '@ant-design/icons'
+import classnames from 'classnames'
+import highlight from '../common/highlight'
+import ProfileTransport from './profile-transport'
+import {
+  settingMap
+} from '../../common/constants'
+
+export default class ProfileList extends List {
+  del = (item, e) => {
+    e.stopPropagation()
+    this.props.store.delItem(item, settingMap.profiles)
+  }
+
+  onClickItem = (item) => {
+    this.props.onClickItem(item)
+  }
+
+  renderItem = (item, i) => {
+    if (!item) {
+      return null
+    }
+    const { activeItemId } = this.props
+    const { name, id } = item
+    const cls = classnames(
+      'item-list-unit theme-item',
+      {
+        active: activeItemId === id
+      }
+    )
+    let title = name
+    title = highlight(
+      title,
+      this.state.keyword
+    )
+    return (
+      <div
+        key={i + id}
+        className={cls}
+        onClick={() => this.onClickItem(item)}
+        data-id={id}
+      >
+        <div className='elli pd1y pd2x' title={name}>
+          {
+            !id
+              ? <PlusOutlined className='mg1r' />
+              : null
+          }
+          {title}
+        </div>
+        {this.renderDelBtn(item)}
+      </div>
+    )
+  }
+
+  renderTransport = () => {
+    return (
+      <ProfileTransport
+        store={this.props.store}
+      />
+    )
+  }
+
+  filter = list => {
+    const { keyword } = this.state
+    return keyword
+      ? list.filter((item) => {
+        const n = (item.name || '').toLowerCase()
+        const k = keyword.toLowerCase()
+        return n.includes(k)
+      })
+      : list
+  }
+}

package/client/components/profile/profile-transport-mod.jsx

@@ -0,0 +1,5 @@
+import QmTransport from '../quick-commands/quick-command-transport'
+
+export default class ProfileTransport extends QmTransport {
+  name = 'profiles'
+}

package/client/components/profile/profile-transport.jsx

@@ -0,0 +1,12 @@
+import ProfileTransportMod from './profile-transport-mod'
+import { Component } from '../common/react-subx'
+
+export default class ProfileTransport extends Component {
+  render () {
+    return (
+      <div className='pd1b'>
+        <ProfileTransportMod store={this.props.store} />
+      </div>
+    )
+  }
+}