@electerm/electerm-react 1.39.5 → 1.39.31

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>
+    )
+  }
+}

package/client/components/quick-commands/quick-command-transport-mod.jsx

@@ -4,13 +4,14 @@ import time from '../../common/time'
 import copy from 'json-deep-copy'
 
 export default class QmTransport extends BookmarkTransport {
+  name = 'quickCommands'
   beforeUpload = async (file) => {
     const { store } = this.props
     const txt = await window.fs.readFile(file.path)
     try {
-      const quickCommands = JSON.parse(txt)
-      const quickCommandsOld = copy(store.quickCommands)
-      const bmTreeOld = quickCommandsOld.reduce((p, v) => {
+      const arr = JSON.parse(txt)
+      const arrOld = copy(store[this.name])
+      const bmTreeOld = arrOld.reduce((p, v) => {
         return {
           ...p,
           [v.id]: v
@@ -18,19 +19,19 @@ export default class QmTransport extends BookmarkTransport {
       }, {})
       const add = []
       const dbAdd = []
-      quickCommands.forEach(bg => {
+      arr.forEach(bg => {
         if (!bmTreeOld[bg.id]) {
-          quickCommandsOld.push(bg)
+          arrOld.push(bg)
           add.push(bg)
           dbAdd.push({
-            db: 'quickCommands',
+            db: this.name,
             obj: bg
           })
         }
       })
-      store.storeAssign({
-        quickCommands: quickCommandsOld
-      })
+      store.setState(
+        this.name, arrOld
+      )
       store.batchDbAdd(dbAdd)
     } catch (e) {
       store.onError(e)
@@ -44,11 +45,9 @@ export default class QmTransport extends BookmarkTransport {
 
   handleDownload = () => {
     const { store } = this.props
-    const {
-      quickCommands
-    } = store
-    const txt = JSON.stringify(quickCommands, null, 2)
+    const arr = store[this.name]
+    const txt = JSON.stringify(arr, null, 2)
     const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
-    download('quickCommands-' + stamp + '.json', txt)
+    download('electerm-' + this.name + '-' + stamp + '.json', txt)
   }
 }

package/client/components/quick-commands/quick-commands-list-form.jsx

@@ -3,10 +3,14 @@ import {
   InputNumber,
   Space,
   Button,
-  Input
+  Input,
+  Tag
 } from 'antd'
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
 import { formItemLayout } from '../../common/form-layout'
+import HelpIcon from '../common/help-icon'
+import { copy } from '../../common/clipboard'
+import { useRef } from 'react'
 
 const FormItem = Form.Item
 const FormList = Form.List
@@ -14,6 +18,7 @@ const { prefix } = window
 const t = prefix('quickCommands')
 
 export default function renderQm () {
+  const focused = useRef(0)
   function renderItem (field, i, add, remove) {
     return (
       <Space
@@ -43,7 +48,10 @@ export default function renderQm () {
           <Input.TextArea
             rows={1}
             placeholder={t('quickCommand')}
-            className='compact-input'
+            className='compact-input qm-input'
+            onFocus={() => {
+              focused.current = i
+            }}
           />
         </FormItem>
         <Button
@@ -54,9 +62,52 @@ export default function renderQm () {
       </Space>
     )
   }
+  const commonCmds = [
+    { cmd: 'ls', desc: 'List directory contents' },
+    { cmd: 'cd', desc: 'Change the current directory' },
+    { cmd: 'pwd', desc: 'Print the current working directory' },
+    { cmd: 'cp', desc: 'Copy files and directories' },
+    { cmd: 'mv', desc: 'Move/rename files and directories' },
+    { cmd: 'rm', desc: 'Remove files or directories' },
+    { cmd: 'mkdir', desc: 'Create new directories' },
+    { cmd: 'rmdir', desc: 'Remove empty directories' },
+    { cmd: 'touch', desc: 'Create empty files or update file timestamps' },
+    { cmd: 'chmod', desc: 'Change file modes or Access Control Lists' },
+    { cmd: 'chown', desc: 'Change file owner and group' },
+    { cmd: 'cat', desc: 'Concatenate and display file content' },
+    { cmd: 'echo', desc: 'Display message or variable value' },
+    { cmd: 'grep', desc: 'Search text using patterns' },
+    { cmd: 'find', desc: 'Search for files in a directory hierarchy' },
+    { cmd: 'df', desc: 'Report file system disk space usage' },
+    { cmd: 'du', desc: 'Estimate file space usage' },
+    { cmd: 'top', desc: 'Display Linux tasks' },
+    { cmd: 'ps', desc: 'Report a snapshot of current processes' },
+    { cmd: 'kill', desc: 'Send a signal to a process' }
+  ]
 
+  const cmds = commonCmds.map(c => {
+    return (
+      <Tag
+        title={c.desc}
+        key={c.cmd}
+        onClick={() => {
+          copy(c.cmd)
+        }}
+      >
+        <b className='pointer'>{c.cmd}</b>
+      </Tag>
+    )
+  })
+  const label = (
+    <div>
+      {t('commonCommands')}
+      <HelpIcon
+        title={cmds}
+      />
+    </div>
+  )
   return (
-    <FormItem {...formItemLayout} label={t('quickCommands')}>
+    <FormItem {...formItemLayout} label={label}>
       <FormList
         name='commands'
       >

package/client/components/rdp/rdp-session.jsx

@@ -70,7 +70,7 @@ export default class RdpSession extends Component {
       openedSideBar
     } = this.props
     return {
-      width: width - (pinned && openedSideBar ? leftSidebarWidth : 0),
+      width: width - (pinned && openedSideBar ? leftSidebarWidth : 0) - 42,
       height: height - tabsHeight
     }
   }
@@ -235,7 +235,7 @@ export default class RdpSession extends Component {
       const isHorizontal = false
       const delta = isHorizontal ? e.deltaX : e.deltaY
       const step = Math.round(Math.abs(delta) * 15 / 8)
-      console.log(x, y, step, delta, isHorizontal)
+      // console.log(x, y, step, delta, isHorizontal)
       params = [x, y, step, delta > 0, isHorizontal]
     } else if (type === 'keydown' || type === 'keyup') {
       params = [keyCode, pressed]
@@ -349,6 +349,14 @@ export default class RdpSession extends Component {
     this.setState(res, this.handleReInit)
   }
 
+  renderHelp = () => {
+    return (
+      <HelpIcon
+        link={rdpHelpLink}
+      />
+    )
+  }
+
   renderControl = () => {
     const {
       id
@@ -358,45 +366,54 @@ export default class RdpSession extends Component {
       onChange: this.handleResChange,
       popupMatchSelectWidth: false
     }
+    return (
+      <div className='pd1 fix session-v-info'>
+        <div className='fleft'>
+          <ReloadOutlined
+            onClick={this.handleReInit}
+            className='mg2r mg1l pointer'
+          />
+          <Select
+            {...sleProps}
+          >
+            {
+              this.getAllRes().map(d => {
+                const v = d.id
+                return (
+                  <Option
+                    key={v}
+                    value={v}
+                  >
+                    {d.width}x{d.height}
+                  </Option>
+                )
+              })
+            }
+          </Select>
+          <EditOutlined
+            onClick={this.handleEditResolutions}
+            className='mg2r mg1l pointer'
+          />
+          {this.renderInfo()}
+          {this.renderHelp()}
+        </div>
+        <div className='fright'>
+          {this.props.fullscreenIcon()}
+        </div>
+      </div>
+    )
+  }
+
+  renderInfo () {
     const {
       host,
       port,
       username
     } = this.props.tab
     return (
-      <div className='pd1 fix'>
-        <ReloadOutlined
-          onClick={this.handleReInit}
-          className='mg2r mg1l pointer'
-        />
-        <Select
-          {...sleProps}
-        >
-          {
-            this.getAllRes().map(d => {
-              const v = d.id
-              return (
-                <Option
-                  key={v}
-                  value={v}
-                >
-                  {d.width}x{d.height}
-                </Option>
-              )
-            })
-          }
-        </Select>
-        <EditOutlined
-          onClick={this.handleEditResolutions}
-          className='mg2r mg1l pointer'
-        />
-        <span className='mg2l mg2r'>
-          {username}@{host}:{port}
-        </span>
-        <HelpIcon
-          link={rdpHelpLink}
-        />
-      </div>
+      <span className='mg2l mg2r'>
+        {username}@{host}:{port}
+      </span>
     )
   }
 
@@ -425,7 +442,7 @@ export default class RdpSession extends Component {
       <Spin spinning={loading}>
         <div
           {...rdpProps}
-          className='rdp-session-wrap pd1'
+          className='rdp-session-wrap session-v-wrap'
         >
           {this.renderControl()}
           <canvas

package/client/components/session/session.jsx

@@ -5,6 +5,7 @@ import { Component } from 'react'
 import Term from '../terminal'
 import Sftp from '../sftp/sftp-entry'
 import RdpSession from '../rdp/rdp-session'
+import VncSession from '../vnc/vnc-session'
 import {
   BorderVerticleOutlined,
   BorderHorizontalOutlined,
@@ -29,7 +30,8 @@ import {
   footerHeight,
   terminalActions,
   connectionMap,
-  terminalRdpType
+  terminalRdpType,
+  terminalVncType
 } from '../../common/constants'
 import ResizeWrap from '../common/resize-wrap'
 import safeName from '../../common/safe-name'
@@ -325,7 +327,7 @@ export default class SessionWrapper extends Component {
     const {
       pane, type
     } = this.props.tab
-    if (type === terminalRdpType) {
+    if (type === terminalRdpType || type === terminalVncType) {
       const rdpProps = {
         tab: this.props.tab,
         sessionId,
@@ -339,14 +341,23 @@ export default class SessionWrapper extends Component {
           'openedSideBar',
           'delTab',
           'config',
+          'reloadTab',
           'editTab'
         ]),
         ...pick(
           this,
           [
+            'fullscreenIcon',
             'setSessionState'
           ])
       }
+      if (type === terminalVncType) {
+        return (
+          <VncSession
+            {...rdpProps}
+          />
+        )
+      }
       return (
         <RdpSession
           {...rdpProps}
@@ -506,7 +517,7 @@ export default class SessionWrapper extends Component {
     const { splitDirection, terminals, sftpPathFollowSsh } = this.state
     const { props } = this
     const { pane, enableSsh, type } = props.tab
-    if (type === terminalRdpType) {
+    if (type === terminalRdpType || type === terminalVncType) {
       return null
     }
     const termType = props.tab?.type

package/client/components/session/session.styl

@@ -59,6 +59,11 @@
 .web-session-wrap
   height 100vh
   background main
-.rdp-session-wrap
+.session-v-wrap
   background main
-  overflow scroll
+  overflow scroll
+  z-index 99
+.vnc-session-wrap > div
+  display block !important
+  width auto !important
+  height auto !important

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

@@ -15,11 +15,13 @@ import TabHistory from './tab-history'
 import TabQuickCommands from './tab-quick-commands'
 import TabSettings from './tab-settings'
 import TabThemes from './tab-themes'
+import TabProfiles from './tab-profiles'
 
 const { prefix } = window
 const m = prefix('common')
 const t = prefix('terminalThemes')
 const q = prefix('quickCommands')
+const f = prefix('profiles')
 
 export default class SettingModalWrap extends Component {
   selectItem = (item) => {
@@ -92,17 +94,25 @@ export default class SettingModalWrap extends Component {
         key: settingMap.quickCommands,
         label: q(settingMap.quickCommands),
         children: null
+      },
+      {
+        key: settingMap.profiles,
+        label: f(settingMap.profiles),
+        children: null
       }
     ]
+    const tabsProps = {
+      activeKey: settingTab,
+      animated: false,
+      items,
+      onChange: store.handleChangeSettingTab,
+      destroyInactiveTabPane: true,
+      className: 'setting-tabs'
+    }
     return (
       <div>
         <Tabs
-          activeKey={settingTab}
-          animated={false}
-          items={items}
-          onChange={store.handleChangeSettingTab}
-          destroyInactiveTabPane
-          className='setting-tabs'
+          {...tabsProps}
         />
         <TabHistory
           listProps={props0}
@@ -136,6 +146,13 @@ export default class SettingModalWrap extends Component {
           store={store}
           settingTab={settingTab}
         />
+        <TabProfiles
+          listProps={props0}
+          settingItem={settingItem}
+          formProps={formProps}
+          store={store}
+          settingTab={settingTab}
+        />
       </div>
     )
   }

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

@@ -71,7 +71,7 @@ export default class SettingTerminal extends Component {
   }
 
   handleChangeDelMode = v => this.onChangeValue(v, 'backspaceMode')
-  handleChangeRenderType = v => this.onChangeValue(v, 'renderType')
+  handleChangeRenderType = v => this.onChangeValue(v, 'rendererType')
 
   handleChangeFont = (values) => {
     this.onChangeValue(

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

@@ -36,7 +36,11 @@ export default class SettingWrap extends Component {
         {...pops}
       >
         <CloseCircleOutlined
-          className='close-setting-wrap'
+          className='close-setting-wrap-icon close-setting-wrap'
+          onClick={this.props.onCancel}
+        />
+        <CloseCircleOutlined
+          className='close-setting-wrap-icon alt-close-setting-wrap'
           onClick={this.props.onCancel}
         />
         {

package/client/components/setting-panel/setting-wrap.styl

@@ -5,10 +5,8 @@
 
 body .ant-drawer .ant-drawer-content-wrapper
   left 43px
-
-.close-setting-wrap
+.close-setting-wrap-icon
   position absolute
-  left 20px
   top 70px
   font-size 16px
   color text
@@ -16,6 +14,10 @@ body .ant-drawer .ant-drawer-content-wrapper
   z-index 889
   &:hover
     color text
+.alt-close-setting-wrap
+  right 20px
+.close-setting-wrap
+  top 70px
 .setting-row
   position absolute
   top 127px