@electerm/electerm-react 1.39.109 → 1.40.1

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

@@ -0,0 +1,31 @@
+import {
+  Form,
+  Input
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function ProfileFormVnc (props) {
+  return (
+    <>
+      <FormItem
+        {...formItemLayout}
+        label={e('username')}
+        hasFeedback
+        name={['vnc', 'username']}
+      >
+        <Input />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('password')}
+        hasFeedback
+        name={['vnc', 'password']}
+      >
+        <Input.Password />
+      </FormItem>
+    </>
+  )
+}

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

@@ -0,0 +1,32 @@
+import { Tabs } from 'antd'
+import ProfileFormSsh from './profile-form-ssh'
+import ProfileFormRdp from './profile-form-rdp'
+import ProfileFormVnc from './profile-form-vnc'
+import ProfileFormTelnet from './profile-form-telnet'
+
+const { TabPane } = Tabs
+
+export default function ProfileTabs (props) {
+  const { activeTab, onChangeTab, form, store } = props
+  const tabsProps = {
+    activeKey: activeTab,
+    onChange: onChangeTab
+  }
+  return (
+    <Tabs {...tabsProps}>
+      <TabPane tab='ssh' key='ssh' forceRender>
+        <ProfileFormSsh form={form} store={store} />
+      </TabPane>
+      <TabPane tab='telnet' key='telnet' forceRender>
+        <ProfileFormTelnet form={form} store={store} />
+      </TabPane>
+      <TabPane tab='vnc' key='vnc' forceRender>
+        <ProfileFormVnc />
+      </TabPane>
+      <TabPane tab='rdp' key='rdp' forceRender>
+        <ProfileFormRdp />
+      </TabPane>
+    </Tabs>
+
+  )
+}

package/client/components/quick-commands/on-drop.js

@@ -0,0 +1,19 @@
+export default function onDrop (e, cls) {
+  e.preventDefault()
+  const { store } = window
+  const { quickCommands } = store
+  const idDragged = e.dataTransfer.getData('idDragged')
+  const tar = cls ? e.target.closest(cls) : e.target
+  const idDrop = tar.getAttribute('data-id')
+  const idDraggedIndex = quickCommands.findIndex(
+    ({ id }) => id === idDragged
+  )
+  const targetIndex = quickCommands.findIndex(
+    ({ id }) => id === idDrop
+  )
+  if (idDraggedIndex !== targetIndex) {
+    const [removed] = quickCommands.splice(idDraggedIndex, 1)
+    quickCommands.splice(targetIndex, 0, removed)
+    store.setItems('quickCommands', quickCommands)
+  }
+}

package/client/components/quick-commands/quick-commands-box.jsx

@@ -14,6 +14,7 @@ import {
   PushpinOutlined
 } from '@ant-design/icons'
 import classNames from 'classnames'
+import onDrop from './on-drop'
 import './qm.styl'
 
 const e = window.translate
@@ -90,23 +91,7 @@ export default class QuickCommandsFooterBox extends Component {
 
   // sort quick commands array when drop, so that the dragged item will be placed at the right position, e.target.getAttribute('data-id') would target item id, e.dataTransfer.getData('idDragged') would target dragged item id, then set window.store.quickCommands use window.store.setItems
   onDrop = e => {
-    e.preventDefault()
-    const { store } = window
-    const { quickCommands } = store
-    const idDragged = e.dataTransfer.getData('idDragged')
-    const idDrop = e.target.getAttribute('data-id')
-    const idDraggedIndex = quickCommands.findIndex(
-      ({ id }) => id === idDragged
-    )
-    const targetIndex = quickCommands.findIndex(
-      ({ id }) => id === idDrop
-    )
-    if (idDraggedIndex < targetIndex) {
-      quickCommands.splice(targetIndex, 0, quickCommands.splice(idDraggedIndex, 1)[0])
-    } else {
-      quickCommands.splice(targetIndex + 1, 0, quickCommands.splice(idDraggedIndex, 1)[0])
-    }
-    store.setItems('quickCommands', quickCommands)
+    onDrop(e, '.qm-item')
   }
 
   renderNoCmd = () => {

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

@@ -8,6 +8,7 @@ import { Select } from 'antd'
 import classnames from 'classnames'
 import highlight from '../common/highlight'
 import QmTransport from './quick-command-transport'
+import onDrop from './on-drop'
 
 const { Option } = Select
 const e = window.translate
@@ -22,7 +23,7 @@ export default class QuickCommandsList extends List {
     this.props.onClickItem(item)
   }
 
-  handleChange = v => {
+  handleChangeLabel = v => {
     this.setState({
       labels: v
     })
@@ -42,23 +43,7 @@ export default class QuickCommandsList extends List {
 
   // adjust window.store.quickCommands array order when drop, so that the dragged item will be placed at the right position, e.target.getAttribute('data-id') would target item id, e.dataTransfer.getData('idDragged') would target dragged item id
   handleDrop = e => {
-    e.preventDefault()
-    const { store } = window
-    const { quickCommands } = store
-    const idDragged = e.dataTransfer.getData('idDragged')
-    const idDrop = e.target.getAttribute('data-id')
-    const idDraggedIndex = quickCommands.findIndex(
-      ({ id }) => id === idDragged
-    )
-    const targetIndex = quickCommands.findIndex(
-      ({ id }) => id === idDrop
-    )
-    if (idDraggedIndex < targetIndex) {
-      quickCommands.splice(targetIndex, 0, quickCommands.splice(idDraggedIndex, 1)[0])
-    } else {
-      quickCommands.splice(targetIndex + 1, 0, quickCommands.splice(idDraggedIndex, 1)[0])
-    }
-    store.setItems('quickCommands', quickCommands)
+    onDrop(e)
   }
 
   renderItem = (item, i) => {
@@ -116,7 +101,7 @@ export default class QuickCommandsList extends List {
       placeholder: e('labels'),
       mode: 'multiple',
       value: this.state.labels,
-      onChange: this.handleChange,
+      onChange: this.handleChangeLabel,
       style: {
         width: '100%'
       }

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

@@ -4,8 +4,7 @@ import deepCopy from 'json-deep-copy'
 import clone from '../../common/to-simple-obj'
 import { handleErr } from '../../common/fetch'
 import {
-  statusMap,
-  rdpHelpLink
+  statusMap
 } from '../../common/constants'
 import {
   notification,
@@ -17,7 +16,6 @@ import {
   ReloadOutlined,
   EditOutlined
 } from '@ant-design/icons'
-import HelpIcon from '../common/help-icon'
 import * as ls from '../../common/safe-local-storage'
 import scanCode from './code-scan'
 import resolutions from './resolutions'
@@ -84,7 +82,7 @@ export default class RdpSession extends Component {
       server = ''
     } = config
     const { sessionId, id } = this.props
-    const tab = deepCopy(this.props.tab || {})
+    const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
     const {
       type,
       term: terminalType
@@ -347,11 +345,7 @@ export default class RdpSession extends Component {
   }
 
   renderHelp = () => {
-    return (
-      <HelpIcon
-        link={rdpHelpLink}
-      />
-    )
+    return null
   }
 
   renderControl = () => {

package/client/components/setting-panel/keywords-form.jsx

@@ -10,6 +10,7 @@ import {
   MinusCircleOutlined,
   PlusOutlined
 } from '@ant-design/icons'
+import { useEffect } from 'react'
 
 const FormItem = Form.Item
 const FormList = Form.List
@@ -101,6 +102,10 @@ export default function KeywordForm (props) {
     )
   }
 
+  useEffect(() => {
+    formChild.resetFields()
+  }, [props.keywordFormReset])
+
   return (
     <div>
       <Form

package/client/components/setting-panel/keywords-transport.jsx

@@ -0,0 +1,32 @@
+import BookmarkTransport from '../tree-list/bookmark-transport'
+import download from '../../common/download'
+import time from '../../common/time'
+
+export default class KeywordsTransport extends BookmarkTransport {
+  name = 'keywords-highlight'
+  beforeUpload = async (file) => {
+    const { store } = this.props
+    const txt = await window.fs.readFile(file.path)
+    try {
+      store.setConfig({
+        keywords: JSON.parse(txt)
+      })
+    } catch (e) {
+      store.onError(e)
+    }
+    setTimeout(this.props.resetKeywordForm, 100)
+    return false
+  }
+
+  renderEdit () {
+    return null
+  }
+
+  handleDownload = () => {
+    const { store } = this.props
+    const arr = store.config.keywords || []
+    const txt = JSON.stringify(arr, null, 2)
+    const stamp = time(undefined, 'YYYY-MM-DD-HH-mm-ss')
+    download('electerm-' + this.name + '-' + stamp + '.json', txt)
+  }
+}

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

@@ -28,6 +28,7 @@ import mapper from '../../common/auto-complete-data-mapper'
 import KeywordForm from './keywords-form'
 import Link from '../common/external-link'
 import HelpIcon from '../common/help-icon'
+import KeywordsTransport from './keywords-transport'
 import './setting.styl'
 
 const { Option } = Select
@@ -35,7 +36,8 @@ const e = window.translate
 
 export default class SettingTerminal extends Component {
   state = {
-    ready: false
+    ready: false,
+    keywordFormReset: 1
   }
 
   componentDidMount () {
@@ -50,6 +52,12 @@ export default class SettingTerminal extends Component {
     clearTimeout(this.timer)
   }
 
+  resetKeywordForm = () => {
+    this.setState({
+      keywordFormReset: Date.now()
+    })
+  }
+
   handleResetAll = () => {
     this.saveConfig(
       deepCopy(defaultSettings)
@@ -411,6 +419,7 @@ export default class SettingTerminal extends Component {
       formData: {
         keywords
       },
+      keywordFormReset: this.state.keywordFormReset,
       submit: this.handleSubmitKeywords,
       themeConfig: getThemeConfig()
     }
@@ -469,6 +478,12 @@ export default class SettingTerminal extends Component {
             <HelpIcon
               title={tip}
             />
+            <span className='mg1l'>
+              <KeywordsTransport
+                store={this.props.store}
+                resetKeywordForm={this.resetKeywordForm}
+              />
+            </span>
           </div>
           <KeywordForm
             {...ps}

package/client/components/setting-panel/tab-themes.jsx

@@ -1,6 +1,6 @@
 import SettingCol from './col'
-import TerminalThemeForm from '../terminal-theme'
-import TerminalThemeList from '../terminal-theme/theme-list'
+import TerminalThemeForm from '../theme/theme-form'
+import TerminalThemeList from '../theme/theme-list'
 import {
   settingMap
 } from '../../common/constants'

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

@@ -722,12 +722,12 @@ export default class FileSection extends React.Component {
         path,
         text,
         mode
-      )
+      ).catch(window.store.onError)
       : await fs.writeFile(
         path,
         text,
         mode
-      )
+      ).catch(window.store.onError)
     const data = {
       loading: false
     }

package/client/components/terminal/attach-addon-custom.js

@@ -2,7 +2,7 @@
  * customize AttachAddon
  */
 import { AttachAddon } from 'xterm-addon-attach'
-import strip from '@electerm/strip-ansi'
+import regEscape from 'escape-string-regexp'
 
 export default class AttachAddonCustom extends AttachAddon {
   constructor (term, socket, isWindowsShell) {
@@ -54,6 +54,7 @@ export default class AttachAddonCustom extends AttachAddon {
   onRead = (ev) => {
     const data = ev.target.result
     const { term } = this
+    term?.parent?.notifyOnData()
     const str = this.decoder.decode(data)
     if (term?.parent?.props.sftpPathFollowSsh && term?.buffer.active.type !== 'alternate') {
       const {
@@ -62,16 +63,16 @@ export default class AttachAddonCustom extends AttachAddon {
       const nss = str.split('\r')
       const nnss = []
       for (const str1 of nss) {
-        const ns = strip(str1).trim()
-        if (ns.includes(cwdId) && ns.includes('$PWD')) {
-          nnss.push(str1.replace(`echo "${cwdId}$PWD"`, ''))
-        } else if (
-          (cwdId && ns.startsWith(cwdId))
-        ) {
-          delete term.cwdId
-          const cwd = ns.replace(cwdId, '').trim()
-          term.parent.setCwd(cwd)
-          nnss.push('\x1b[2A\x1b[0J')
+        const ns = str1.trim()
+        if (cwdId) {
+          const cwdIdEscaped = regEscape(cwdId)
+          const dirRegex = new RegExp(`${cwdIdEscaped}([^\\n]+?)${cwdIdEscaped}`, 'g')
+          if (ns.match(dirRegex)) {
+            const cwd = dirRegex.exec(ns)[1].trim()
+            if (cwd === '~' || cwd === '%d' || cwd === '%/' || cwd === '$PWD') term.parent.setCwd('')
+            else term.parent.setCwd(cwd)
+            nnss.push(ns.replaceAll(dirRegex, ''))
+          } else nnss.push(str1)
         } else {
           nnss.push(str1)
         }

package/client/components/terminal/index.jsx

@@ -4,7 +4,7 @@ import generate from '../../common/uid'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
 import postMessage from '../../common/post-msg'
 import clone from '../../common/to-simple-obj'
-import runIdle from '../../common/run-idle'
+// import runIdle from '../../common/run-idle'
 import {
   ReloadOutlined
 } from '@ant-design/icons'
@@ -125,6 +125,34 @@ class Term extends Component {
     if (themeChanged) {
       this.term.options.theme = deepCopy(this.props.themeConfig)
     }
+
+    const sftpPathFollowSshChanged = !isEqual(
+      this.props.sftpPathFollowSsh,
+      prevProps.sftpPathFollowSsh
+    )
+
+    if (sftpPathFollowSshChanged) {
+      const ps1Cmd = `\recho $0|grep csh >/dev/null && set prompt_bak="$prompt" && set prompt="$prompt${cwdId}%/${cwdId}"\r
+echo $0|grep zsh >/dev/null && PS1_bak=$PS1&&PS1=$PS1'${cwdId}%d${cwdId}'\r
+echo $0|grep ash >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
+echo $0|grep ksh >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
+echo $0|grep '^sh' >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
+clear\r`
+      const ps1RestoreCmd = `\recho $0|grep csh >/dev/null && set prompt="$prompt_bak"\r
+echo $0|grep zsh >/dev/null && PS1="$PS1_bak"\r
+echo $0|grep ash >/dev/null && PS1="$PS1_bak"\r
+echo $0|grep ksh >/dev/null && PS1="$PS1_bak"\r
+echo $0|grep '^sh' >/dev/null && PS1="$PS1_bak"\r
+clear\r`
+
+      if (this.props.sftpPathFollowSsh) {
+        this.socket.send(ps1Cmd)
+        this.term.cwdId = cwdId
+      } else {
+        this.socket.send(ps1RestoreCmd)
+        delete this.term.cwdId
+      }
+    }
   }
 
   componentWillUnmount () {
@@ -783,7 +811,7 @@ class Term extends Component {
   onClear = () => {
     this.term.clear()
     this.term.focus()
-    this.notifyOnData('')
+    // this.notifyOnData('')
   }
 
   isRemote = () => {
@@ -908,11 +936,17 @@ class Term extends Component {
   getCwd = () => {
     if (
       this.props.sftpPathFollowSsh &&
-      this.term.buffer.active.type !== 'alternate'
+      this.term.buffer.active.type !== 'alternate' && !this.term.cwdId
     ) {
-      const cmd = `\recho "${cwdId}$PWD"\r`
       this.term.cwdId = cwdId
-      this.socket.send(cmd)
+
+      const ps1Cmd = `\recho $0|grep csh >/dev/null && set prompt_bak="$prompt" && set prompt="$prompt${cwdId}%/${cwdId}"\r
+echo $0|grep zsh >/dev/null && PS1_bak=$PS1&&PS1=$PS1'${cwdId}%d${cwdId}'\r
+echo $0|grep ash >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
+echo $0|grep ksh >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
+clear\r`
+
+      this.socket.send(ps1Cmd)
     }
   }
 
@@ -921,7 +955,7 @@ class Term extends Component {
   }
 
   onData = (d) => {
-    runIdle(this.notifyOnData)
+    // runIdle(this.notifyOnData)
     if (!d.includes('\r')) {
       delete this.userTypeExit
     } else {

package/client/components/theme/theme-edit-slot.jsx

@@ -0,0 +1,28 @@
+import { ColorPicker } from '../bookmark-form/color-picker'
+
+export default function ThemeEditSlot (props) {
+  const {
+    name,
+    value,
+    disabled
+  } = props
+  function onChange (v) {
+    props.onChange(v, name)
+  }
+  const pickerProps = {
+    value,
+    onChange,
+    isRgba: value.startsWith('rgba'),
+    disabled
+  }
+  return (
+    <div className='theme-edit-slot'>
+      <span className='iblock mg1r'>{name}</span>
+      <span className='iblock'>
+        <ColorPicker
+          {...pickerProps}
+        />
+      </span>
+    </div>
+  )
+}

package/client/components/theme/theme-editor.jsx

@@ -0,0 +1,37 @@
+// import { buildDefaultThemes } from '../../common/terminal-theme'
+import ThemeEditSlot from './theme-edit-slot'
+
+export default function ThemeEditor (props) {
+  const { themeText, disabled } = props
+  const obj = themeText.split('\n').reduce((prev, line) => {
+    let [key = '', value = ''] = line.split('=')
+    key = key.trim()
+    value = value.trim()
+    if (!key || !value) {
+      return prev
+    }
+    prev[key] = value
+    return prev
+  }, {})
+  const keys = Object.keys(obj)
+  function onChange (value, name) {
+    props.onChange(value, name)
+  }
+  return (
+    <div className='editor-u-picker'>
+      {
+        keys.map(k => {
+          return (
+            <ThemeEditSlot
+              key={k}
+              name={k}
+              value={obj[k]}
+              disabled={disabled}
+              onChange={onChange}
+            />
+          )
+        })
+      }
+    </div>
+  )
+}