@electerm/electerm-react 3.9.15 → 3.11.0

package/client/components/terminal/terminal-apis.js

@@ -41,3 +41,11 @@ export function toggleTerminalLogTimestamp (pid) {
     action: 'toggle-terminal-log-timestamp'
   })
 }
+
+export function setTerminalLogPath (pid, logPath) {
+  return fetch({
+    pid,
+    logPath,
+    action: 'set-terminal-log-path'
+  })
+}

package/client/components/terminal/terminal-error-handle.jsx

@@ -33,7 +33,7 @@ export default memo(function TerminalErrorHandle ({
   return (
     <Alert
       className='terminal-error-handle'
-      message={errorMessage}
+      title={errorMessage}
       type='error'
       showIcon
       banner

package/client/components/terminal/terminal-interactive-ui.jsx

@@ -0,0 +1,157 @@
+/**
+ * terminal interactive UI - renders a single interactive event modal
+ */
+
+import { Form, Button } from 'antd'
+import Modal from '../common/modal'
+import InputAutoFocus from '../common/input-auto-focus'
+
+const e = window.translate
+const FormItem = Form.Item
+
+export default function TermInteractiveUI ({
+  opts,
+  onSend,
+  onClose
+}) {
+  const [form] = Form.useForm()
+
+  function onCancel () {
+    onSend({
+      id: opts.id,
+      results: []
+    })
+    onClose()
+  }
+  function onOk () {
+    form.submit()
+  }
+  function onConfirm () {
+    onSend({
+      id: opts.id,
+      results: [opts.options.confirmResult || 'yes']
+    })
+    onClose()
+  }
+  function onIgnore () {
+    onSend({
+      id: opts.id,
+      results: Object.keys(opts.options.prompts).map(() => '')
+    })
+    onClose()
+  }
+  function onFinish (res) {
+    onSend({
+      id: opts.id,
+      results: Object.values(res)
+    })
+    onClose()
+  }
+  function renderFormItem (pro, i) {
+    const {
+      prompt,
+      echo
+    } = pro
+    const note = (opts.options.instructions || [])[i]
+    const type = echo
+      ? 'input'
+      : 'password'
+    return (
+      <FormItem
+        key={prompt + i}
+        label={prompt}
+        rules={[{
+          required: true, message: 'required'
+        }]}
+      >
+        <div>
+          <pre>{note}</pre>
+        </div>
+        <FormItem noStyle name={'item' + i}>
+          <InputAutoFocus
+            type={type}
+            placeholder={note}
+          />
+        </FormItem>
+      </FormItem>
+    )
+  }
+  function renderConfirmBody () {
+    const instructions = opts.options.instructions || []
+    return (
+      <div>
+        {
+          instructions.map((note, index) => {
+            return <pre key={note + index}>{note}</pre>
+          })
+        }
+        <FormItem>
+          <Button
+            type='primary'
+            onClick={onConfirm}
+          >
+            {opts.options.submitText || e('submit')}
+          </Button>
+          <Button
+            className='mg1l'
+            onClick={onCancel}
+          >
+            {opts.options.cancelText || e('cancel')}
+          </Button>
+        </FormItem>
+      </div>
+    )
+  }
+  const props = {
+    maskClosable: false,
+    okText: e('submit'),
+    onCancel,
+    onOk,
+    closable: false,
+    open: true,
+    title: opts.options?.name || '?',
+    footer: null
+  }
+  return (
+    <Modal
+      {...props}
+    >
+      {
+        opts.options?.mode === 'confirm'
+          ? renderConfirmBody()
+          : (
+            <Form
+              form={form}
+              layout='vertical'
+              onFinish={onFinish}
+            >
+              {
+                opts.options.prompts.map(renderFormItem)
+              }
+              <FormItem>
+                <Button
+                  type='primary'
+                  htmlType='submit'
+                >
+                  {e('submit')}
+                </Button>
+                <Button
+                  type='dashed'
+                  className='mg1l'
+                  onClick={onIgnore}
+                >
+                  {e('ignore')}
+                </Button>
+                <Button
+                  className='mg1l'
+                  onClick={onCancel}
+                >
+                  {e('cancel')}
+                </Button>
+              </FormItem>
+            </Form>
+            )
+      }
+    </Modal>
+  )
+}

package/client/components/terminal/terminal-interactive.jsx

@@ -1,30 +1,45 @@
 /**
- * handle terminal interactive operation
+ * handle terminal interactive operation - queue based
  */
 
-import { useEffect, useState } from 'react'
-import { Form, Button } from 'antd'
-import Modal from '../common/modal'
-import InputAutoFocus from '../common/input-auto-focus'
+import { useEffect, useState, useRef, useCallback } from 'react'
 import wait from '../../common/wait'
-
-const e = window.translate
-const FormItem = Form.Item
+import TermInteractiveUI from './terminal-interactive-ui'
 
 export default function TermInteractive () {
-  const [opts, setter] = useState(null)
-  const [form] = Form.useForm()
+  const [current, setCurrent] = useState(null)
+  const queueRef = useRef([])
+  const hasCurrentRef = useRef(false)
+
   function updateTab (data) {
     window.store.updateTab(data.tabId, data.update)
   }
-  function onMsg (e) {
+
+  function processNext () {
+    const next = queueRef.current.shift()
+    if (next) {
+      setCurrent(next)
+    } else {
+      hasCurrentRef.current = false
+      setCurrent(null)
+    }
+  }
+
+  const onMsgRef = useRef(null)
+  onMsgRef.current = function onMsg (e) {
     if (
       e &&
       e.data &&
       typeof e.data === 'string' &&
       e.data.includes('session-interactive')
     ) {
-      setter(JSON.parse(e.data))
+      const parsed = JSON.parse(e.data)
+      if (hasCurrentRef.current) {
+        queueRef.current.push(parsed)
+      } else {
+        hasCurrentRef.current = true
+        setCurrent(parsed)
+      }
     } else if (
       e &&
       e.data &&
@@ -34,127 +49,52 @@ export default function TermInteractive () {
       updateTab(JSON.parse(e.data))
     }
   }
-  function clear () {
-    setter(null)
-    form.resetFields()
-  }
-  function onCancel () {
-    window.et.commonWs.s({
-      id: opts.id,
-      results: []
-    })
-    clear()
-  }
-  function onOk () {
-    form.submit()
-  }
-  function onIgnore () {
-    window.et.commonWs.s({
-      id: opts.id,
-      results: Object.keys(opts.options.prompts).map(() => '')
-    })
-    clear()
-  }
-  function onFinish (res) {
-    window.et.commonWs.s({
-      id: opts.id,
-      results: Object.values(res)
-    })
-    clear()
-  }
-  function renderFormItem (pro, i) {
-    const {
-      prompt,
-      echo
-    } = pro
-    const note = (opts.options.instructions || [])[i]
-    const type = echo
-      ? 'input'
-      : 'password'
-    return (
-      <FormItem
-        key={prompt + i}
-        label={prompt}
-        rules={[{
-          required: true, message: 'required'
-        }]}
-      >
-        <div>
-          <pre>{note}</pre>
-        </div>
-        <FormItem noStyle name={'item' + i}>
-          <InputAutoFocus
-            type={type}
-            placeholder={note}
-          />
-        </FormItem>
-      </FormItem>
-    )
+
+  function onSend (data) {
+    window.et.commonWs.s(data)
   }
-  async function initWatch () {
-    let done = false
-    while (!done) {
-      if (window.et.commonWs) {
-        window.et.commonWs.addEventListener('message', onMsg)
-        done = true
-      } else {
+
+  const onClose = useCallback(() => {
+    processNext()
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    function handler (e) {
+      if (!cancelled) {
+        onMsgRef.current(e)
+      }
+    }
+    async function initWatch () {
+      for (;;) {
+        if (cancelled) {
+          return
+        }
+        if (window.et.commonWs) {
+          window.et.commonWs.addEventListener('message', handler)
+          return
+        }
         await wait(400)
       }
     }
-  }
-  function init () {
     initWatch()
-  }
-  useEffect(() => {
-    init()
+    return () => {
+      cancelled = true
+      if (window.et.commonWs) {
+        window.et.commonWs.removeEventListener('message', handler)
+      }
+    }
   }, [])
-  if (!opts) {
+
+  if (!current) {
     return null
   }
-  const props = {
-    maskClosable: false,
-    okText: e('submit'),
-    onCancel,
-    onOk,
-    closable: false,
-    open: true,
-    title: opts.options?.name || '?',
-    footer: null
-  }
+
   return (
-    <Modal
-      {...props}
-    >
-      <Form
-        form={form}
-        layout='vertical'
-        onFinish={onFinish}
-      >
-        {
-          opts.options.prompts.map(renderFormItem)
-        }
-        <FormItem>
-          <Button
-            type='primary'
-            htmlType='submit'
-          >
-            {e('submit')}
-          </Button>
-          <Button
-            type='dashed'
-            className='mg1l'
-            onClick={onIgnore}
-          >
-            {e('ignore')}
-          </Button>
-          <Button
-            className='mg1l'
-            onClick={onCancel}
-          >
-            {e('cancel')}
-          </Button>
-        </FormItem>
-      </Form>
-    </Modal>
+    <TermInteractiveUI
+      opts={current}
+      onSend={onSend}
+      onClose={onClose}
+    />
   )
 }

package/client/components/terminal/terminal.jsx

@@ -70,6 +70,7 @@ class Term extends Component {
       hasSelection: false,
       saveTerminalLogToFile: !!this.props.config.saveTerminalLogToFile,
       addTimeStampToTermLog: !!this.props.config.addTimeStampToTermLog,
+      logPath: this.props.config.sessionLogPath || createDefaultLogPath(),
       passType: 'password',
       lines: [],
       searchResults: [],
@@ -400,10 +401,15 @@ class Term extends Component {
           return
         }
         if (isSshTerminal) {
-          this.setState({
-            dropFileModalVisible: true,
-            droppedFiles: [{ path: filePath, isRemote: true }]
-          })
+          const behavior = this.props.config.dragDropBehavior || 'ask'
+          if (behavior === 'ask') {
+            this.setState({
+              dropFileModalVisible: true,
+              droppedFiles: [{ path: filePath, isRemote: true }]
+            })
+          } else {
+            this.handleDropFileAction(behavior, [{ path: filePath, isRemote: true }])
+          }
           return
         }
         this.attachAddon._sendData(`"${filePath}" `)
@@ -425,10 +431,15 @@ class Term extends Component {
       }
 
       if (isSshTerminal) {
-        this.setState({
-          dropFileModalVisible: true,
-          droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
-        })
+        const behavior = this.props.config.dragDropBehavior || 'ask'
+        if (behavior === 'ask') {
+          this.setState({
+            dropFileModalVisible: true,
+            droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
+          })
+        } else {
+          this.handleDropFileAction(behavior, filePaths.map(path => ({ path, isRemote: false })))
+        }
         return
       }
 
@@ -444,8 +455,8 @@ class Term extends Component {
     })
   }
 
-  handleDropFileAction = (action) => {
-    const { droppedFiles } = this.state
+  handleDropFileAction = (action, filesOverride) => {
+    const droppedFiles = filesOverride || this.state.droppedFiles
     if (!droppedFiles || !droppedFiles.length) {
       this.handleDropFileModalCancel()
       return
@@ -454,7 +465,7 @@ class Term extends Component {
     const filePaths = droppedFiles.map(f => f.path)
 
     switch (action) {
-      case 'trzUpload': {
+      case 'trz': {
         if (this.trzszClient && this.trzszClient.isActive) {
           message.warning('A transfer is already in progress')
           this.handleDropFileModalCancel()
@@ -464,7 +475,7 @@ class Term extends Component {
         this.attachAddon._sendData('trz\r')
         break
       }
-      case 'rzUpload': {
+      case 'rz':{
         if (this.zmodemClient && this.zmodemClient.isActive) {
           message.warning('A transfer is already in progress')
           this.handleDropFileModalCancel()
@@ -474,7 +485,7 @@ class Term extends Component {
         this.attachAddon._sendData('rz\r')
         break
       }
-      case 'inputPath':
+      case 'inputOnly':
       default: {
         const filesAll = filePaths.map(path => `"${path}"`).join(' ')
         this.attachAddon._sendData(filesAll)
@@ -825,6 +836,9 @@ class Term extends Component {
       if (currentCmd && currentCmd.trim() && this.shouldUseManualHistory()) {
         window.store.addCmdHistory(currentCmd.trim())
       }
+      if (currentCmd && currentCmd.trim() === 'exit') {
+        this.userTypeExit = true
+      }
       this.closeSuggestions()
     }
   }
@@ -1223,7 +1237,7 @@ class Term extends Component {
       ...extra,
       ...execOpts,
       logName,
-      sessionLogPath: config.sessionLogPath || createDefaultLogPath(),
+      sessionLogPath: this.state.logPath,
       ...pick(config, [
         'addTimeStampToTermLog',
         'keepaliveCountMax',

package/client/components/terminal-info/base.jsx

@@ -2,15 +2,13 @@
  * show base terminal info, id sessionID
  */
 import { Component } from 'react'
-import { osResolve } from '../../common/resolve'
 import {
   Switch,
   Space,
   Button
 } from 'antd'
-import ShowItem from '../common/show-item'
 import defaults from '../../common/default-setting'
-import { toggleTerminalLog, toggleTerminalLogTimestamp } from '../terminal/terminal-apis'
+import { toggleTerminalLog, toggleTerminalLogTimestamp, setTerminalLogPath } from '../terminal/terminal-apis'
 import {
   ClockCircleOutlined,
   BorderlessTableOutlined,
@@ -19,8 +17,8 @@ import {
   ApiOutlined,
   PartitionOutlined
 } from '@ant-design/icons'
-import createDefaultSessionLogPath from '../../common/default-log-path'
 import { refs } from '../common/ref'
+import LogPathEdit from './log-path-edit'
 
 const e = window.translate
 
@@ -36,7 +34,8 @@ const mapper = {
 export default class TerminalInfoBase extends Component {
   state = {
     saveTerminalLogToFile: false,
-    addTimeStampToTermLog: false
+    addTimeStampToTermLog: false,
+    logPath: ''
   }
 
   componentDidMount () {
@@ -75,6 +74,17 @@ export default class TerminalInfoBase extends Component {
     })
   }
 
+  onLogPathChange = (v) => {
+    const { pid } = this.props
+    setTerminalLogPath(pid, v)
+    refs.get('term-' + pid)?.setState({
+      logPath: v
+    })
+    this.setState({
+      logPath: v
+    })
+  }
+
   handleToggle = () => {
     const { saveTerminalLogToFile, addTimeStampToTermLog } = this.state
     const {
@@ -101,7 +111,8 @@ export default class TerminalInfoBase extends Component {
     if (term) {
       this.setState({
         saveTerminalLogToFile: term.state.saveTerminalLogToFile,
-        addTimeStampToTermLog: term.state.addTimeStampToTermLog
+        addTimeStampToTermLog: term.state.addTimeStampToTermLog,
+        logPath: term.state.logPath
       })
     } else {
       this.timer = setTimeout(this.getState, 100)
@@ -156,15 +167,10 @@ export default class TerminalInfoBase extends Component {
     const {
       id,
       logName,
-      sessionLogPath
+      pid
     } = this.props
-    const { saveTerminalLogToFile } = this.state
-    const base = sessionLogPath || createDefaultSessionLogPath()
-    const path = osResolve(base, logName + '.log')
+    const { saveTerminalLogToFile, logPath } = this.state
     const name = e('saveTerminalLogToFile')
-    const to = saveTerminalLogToFile
-      ? <ShowItem disabled={!saveTerminalLogToFile} to={path}>{path}</ShowItem>
-      : path
     return (
       <div className='terminal-info-section terminal-info-base'>
         <div className='fix'>
@@ -187,7 +193,12 @@ export default class TerminalInfoBase extends Component {
             this.renderInfoSelection()
           }
         </div>
-        <p><b>log:</b> {to}</p>
+        <LogPathEdit
+          pid={pid}
+          logPath={logPath}
+          logName={logName}
+          setLogPath={this.onLogPathChange}
+        />
       </div>
     )
   }

package/client/components/terminal-info/log-path-edit.jsx

@@ -0,0 +1,86 @@
+/**
+ * Per-terminal log path editor
+ * Reads/writes logPath on the terminal's own state via refs
+ */
+import { Button } from 'antd'
+import message from '../common/message'
+import InputConfirm from '../common/input-confirm'
+import ShowItem from '../common/show-item'
+import { chooseSaveDirectory } from '../../common/choose-save-folder'
+import createDefaultLogPath from '../../common/default-log-path'
+import { osResolve } from '../../common/resolve'
+
+const e = window.translate
+
+export default function LogPathEdit ({ pid, logPath, logName, setLogPath }) {
+  const defaultPath = createDefaultLogPath()
+  const base = logPath || defaultPath
+  const fullPath = osResolve(base, logName + '.log')
+
+  const testAndSet = async (v) => {
+    if (v) {
+      try {
+        const { fs } = window
+        const uid = 'test-' + Date.now()
+        const testFile = osResolve(v, uid + '.test.log')
+        await fs.touch(testFile)
+        await fs.unlink(testFile)
+      } catch (err) {
+        console.log('log path test failed', err)
+        message.error('invalid log folder')
+        return
+      }
+    }
+    setLogPath(v)
+  }
+
+  const handleChange = (v) => {
+    testAndSet(v)
+  }
+
+  const handleChooseFolder = async () => {
+    const path = await chooseSaveDirectory()
+    if (path) {
+      handleChange(path)
+    }
+  }
+
+  const handleReset = () => {
+    setLogPath('')
+  }
+
+  const inputProps = {
+    value: logPath,
+    placeholder: defaultPath,
+    onChange: handleChange,
+    addonAfter: (
+      <>
+        <Button
+          onClick={handleChooseFolder}
+          className='mg1r'
+          type='text'
+          size='small'
+        >
+          {e('chooseFolder')}
+        </Button>
+        <Button
+          size='small'
+          type='text'
+          onClick={handleReset}
+        >
+          {e('reset')}
+        </Button>
+      </>
+    ),
+    prefix: e('terminalLogPath') + ': '
+  }
+
+  return (
+    <div className='pd1b'>
+      <InputConfirm {...inputProps} />
+      <div className='pd1t font-xs color-grey'>
+        {fullPath} <ShowItem to={fullPath} />
+      </div>
+    </div>
+  )
+}

package/client/components/terminal-info/terminal-info-entry.jsx

@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react'
+
+const TerminalInfo = lazy(() => import('./terminal-info'))
+
+export default function TerminalInfoEntry (props) {
+  return (
+    <Suspense fallback={null}>
+      <TerminalInfo {...props} />
+    </Suspense>
+  )
+}