@electerm/electerm-react 2.3.191 → 2.4.16

package/client/common/clipboard.js

@@ -2,7 +2,7 @@
  * clipboard related
  */
 
-import { message } from 'antd'
+import message from '../components/common/message'
 
 const fileRegWin = /^(remote:)?\w:\\.+/
 const fileReg = /^(remote:)?\/.+/

package/client/common/constants.js

@@ -145,6 +145,7 @@ export const terminalLocalType = 'local'
 export const terminalFtpType = 'ftp'
 export const openedSidebarKey = 'opened-sidebar'
 export const sidebarPinnedKey = 'sidebar-pinned'
+export const pinnedQuickCommandBarKey = 'pinned-quick-command-bar'
 export const leftSidebarWidthKey = 'left-sidebar-width'
 export const rightSidebarWidthKey = 'right-sidebar-width'
 export const addPanelWidthLsKey = 'addPanelWidth'
@@ -270,8 +271,7 @@ export const instSftpKeys = [
   'readFile',
   'writeFile'
 ]
-export const cwdId = '=__+__'
-export const zmodemTransferPackSize = 1024 * 1024 * 2
+export const zmodemTransferPackSize = 1024 * 8
 export const splitMap = {
   c1: 'c1',
   c2: 'c2',

package/client/common/download.jsx

@@ -1,9 +1,10 @@
 /**
  * simulate download
  */
-import { notification } from 'antd'
+import { notification } from '../components/common/notification'
 import ShowItem from '../components/common/show-item'
 import { chooseSaveDirectory } from './choose-save-folder'
+import { DownloadOutlined } from '@ant-design/icons'
 
 function downloadForBrowser (filename, text) {
   const blob = new Blob([text], { type: 'text/plain;charset=utf-8' })
@@ -32,7 +33,7 @@ export default async function download (filename, text) {
     return
   }
   notification.success({
-    title: '',
+    message: <DownloadOutlined />,
     description: (
       <ShowItem
         to={filePath}

package/client/common/error-handler.jsx

@@ -2,25 +2,21 @@
  * common error handler
  */
 
-import { notification } from 'antd'
+import { notification } from '../components/common/notification'
 
 export default (e) => {
   const { message = 'error', stack } = e
-  log.error(e)
-  const msg = (
-    <div className='mw240 elli wordbreak' title={message}>
-      {message}
-    </div>
-  )
+  console.error(e)
   const description = (
     <div
-      className='mw300 elli common-err-desc wordbreak'
+      className='common-err-desc'
+      title={stack}
     >
       {stack}
     </div>
   )
   notification.error({
-    title: msg,
+    message,
     description,
     duration: 55
   })

package/client/common/fetch-from-server.js

@@ -35,7 +35,7 @@ const wsFetch = async (data) => {
   return new NewPromise((resolve, reject) => {
     window.et.commonWs.once((arg) => {
       if (arg.error) {
-        log.error('fetch error', arg.error)
+        console.error('fetch error', arg.error)
         return reject(new Error(arg.error.message))
       }
       resolve(arg.data)

package/client/common/fetch.jsx

@@ -1,6 +1,6 @@
 // the final fetch wrapper
 import { isString, isFunction } from 'lodash-es'
-import { notification } from 'antd'
+import { notification } from '../components/common/notification'
 
 function jsonHeader () {
   return {
@@ -17,7 +17,7 @@ function parseResponse (response) {
 }
 
 export async function handleErr (res) {
-  log.debug(res)
+  console.debug(res)
   let text = res.message || res.statusText
   if (!isString(text)) {
     try {
@@ -25,12 +25,12 @@ export async function handleErr (res) {
         ? await res.text()
         : isFunction(res.json) ? await res.json() : ''
     } catch (e) {
-      log.error('fetch response parse fails', e)
+      console.error('fetch response parse fails', e)
     }
   }
-  log.debug(text, 'fetch err info')
+  console.debug(text, 'fetch err info')
   notification.error({
-    title: 'error',
+    message: 'http request error',
     description: (
       <div className='common-err'>
         {text}

package/client/common/icon-helpers.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {
+  InfoCircleFilled,
+  CheckCircleFilled,
+  ExclamationCircleFilled,
+  CloseCircleFilled
+} from '@ant-design/icons'
+
+export const messageIcons = {
+  info: <InfoCircleFilled className='msg-icon info' />,
+  success: <CheckCircleFilled className='msg-icon success' />,
+  warning: <ExclamationCircleFilled className='msg-icon warning' />,
+  error: <CloseCircleFilled className='msg-icon error' />
+}
+
+export const getMessageIcon = (type) => messageIcons[type] || messageIcons.info

package/client/common/parse-json-safe.js

@@ -5,7 +5,7 @@ export default str => {
   try {
     return JSON.parse(str)
   } catch (e) {
-    log.error('JSON.parse fails', e.stack)
+    console.error('JSON.parse fails', e.stack)
     return str
   }
 }

package/client/common/pre.js

@@ -38,13 +38,6 @@ function decodeBase64String (base64String) {
   return uint8Array
 }
 
-window.log = {
-  debug: (...args) => runSync('debug', ...args),
-  log: (...args) => runSync('log', ...args),
-  error: (...args) => runSync('error', ...args),
-  info: (...args) => runSync('info', ...args)
-}
-
 window.pre = {
   requireAuth: runSync('shouldAuth'),
   readClipboard: () => {

package/client/common/sftp.js

@@ -52,7 +52,7 @@ class Sftp {
           })
           ws.once((arg) => {
             if (arg.error) {
-              log.debug('sftp error', arg.error.message)
+              console.debug('sftp error', arg.error.message)
               return reject(new Error(arg.error.message))
             }
             resolve(arg.data)

package/client/common/terminal-theme.js

@@ -141,7 +141,7 @@ export const exportTheme = (themeId) => {
   const themes = window.store.getSidebarList(settingMap.terminalThemes)
   const theme = themes.find(d => d.id === themeId)
   if (!theme) {
-    log.error('export error', themeId)
+    console.error('export error', themeId)
     return
   }
   const text = convertThemeToText(theme, true)

package/client/common/transfer.js

@@ -57,8 +57,8 @@ class Transfer {
       th.onDestroy(ws)
     }, 'transfer:end:' + id)
     ws.once((arg) => {
-      log.debug('sftp transfer error')
-      log.debug(arg.error.stack)
+      console.debug('sftp transfer error')
+      console.debug(arg.error.stack)
       onError(new Error(arg.error.message))
       th.onDestroy(ws)
     }, 'transfer:err:' + id)

package/client/common/upgrade.js

@@ -49,8 +49,8 @@ class Upgrade {
       onEnd(arg)
     }, 'upgrade:end:' + id)
     ws.once((arg) => {
-      log.debug('upgrade error')
-      log.debug(arg.error.stack)
+      console.debug('upgrade error')
+      console.debug(arg.error.stack)
       onError(new Error(arg.error.message))
     }, 'upgrade:err:' + id)
   }

package/client/components/ai/ai-chat.jsx

@@ -185,7 +185,7 @@ export default function AIChat (props) {
       <SendOutlined
         onClick={handleSubmit}
         className='mg1l pointer icon-hover send-to-ai-icon'
-        title='Ctrl+Enter'
+        title='Enter to send, Shift+Enter for new line'
       />
     )
   }
@@ -207,6 +207,14 @@ export default function AIChat (props) {
     return null
   }
 
+  const handleKeyPress = (e) => {
+    if (!e.shiftKey) {
+      e.preventDefault()
+      handleSubmit()
+    }
+    // If Shift+Enter, allow default behavior (new line)
+  }
+
   return (
     <Flex vertical className='ai-chat-container'>
       <Flex className='ai-chat-history' flex='auto'>
@@ -217,6 +225,7 @@ export default function AIChat (props) {
         <TextArea
           value={prompt}
           onChange={handlePromptChange}
+          onPressEnter={handleKeyPress}
           placeholder='Enter your prompt here'
           autoSize={{ minRows: 3, maxRows: 10 }}
           disabled={isLoading}

package/client/components/auth/login.jsx

@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react'
 import LogoElem from '../common/logo-elem.jsx'
 import store from '../../store'
 import {
-  message,
   Spin
 } from 'antd'
+import message from '../common/message'
 import {
   ArrowRightOutlined
 } from '@ant-design/icons'

package/client/components/bg/css-overwrite.jsx

@@ -81,7 +81,7 @@ export default class CssOverwrite extends Component {
       st = 'text'
     } else if (imagePath && !isWebImg) {
       content = await fs.readFileAsBase64(imagePath)
-        .catch(log.error)
+        .catch(console.error)
       if (content) {
         st = `url(data:image;base64,${content})`
       }

package/client/components/bookmark-form/common/fields.jsx

@@ -10,6 +10,7 @@ import InputAutoFocus from '../../common/input-auto-focus.jsx'
 import ProxyField from './proxy.jsx'
 import X11Field from './x11.jsx'
 import SshTunnels from './ssh-tunnels.jsx'
+import SshAgent from './ssh-agent.jsx'
 import ConnectionHopping from './connection-hopping.jsx'
 import TerminalBackgroundField from './terminal-background.jsx'
 import useQuickCmds from './quick-commands.jsx'
@@ -145,6 +146,8 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
       return <X11Field key={name} form={form} />
     case 'sshTunnels':
       return <SshTunnels key={name} form={form} formData={ctxProps.formData} />
+    case 'sshAgent':
+      return <SshAgent key={name} />
     case 'connectionHopping':
       return (
         <ConnectionHopping

package/client/components/bookmark-form/common/ssh-agent.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Form, Input, Switch, Space } from 'antd'
+import HelpIcon from '../../common/help-icon'
+import { formItemLayout } from '../../../common/form-layout'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function SshAgent () {
+  return (
+    <FormItem
+      {...formItemLayout}
+      label={e('useSshAgent')}
+    >
+      <Space align='center'>
+        <FormItem
+          name='useSshAgent'
+          valuePropName='checked'
+          noStyle
+        >
+          <Switch />
+        </FormItem>
+        <FormItem
+          name='sshAgent'
+          noStyle
+        >
+          <Input placeholder={e('SSH Agent Path')} />
+        </FormItem>
+        <HelpIcon link='https://github.com/electerm/electerm/wiki/ssh-agent' />
+      </Space>
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/config/common-fields.js

@@ -272,10 +272,8 @@ export const sshAuthFields = [
   { type: 'sshAuthSelector', name: '__auth__', label: '', formItemName: 'password' },
   commonFields.port,
   {
-    type: 'switch',
-    name: 'useSshAgent',
-    label: () => e('useSshAgent'),
-    valuePropName: 'checked'
+    type: 'sshAgent',
+    name: 'useSshAgent'
   },
   commonFields.runScripts,
   commonFields.description,

package/client/components/bookmark-form/config/serial.js

@@ -40,7 +40,7 @@ const serialConfig = {
           type: 'autocomplete',
           name: 'baudRate',
           label: 'baudRate',
-          options: commonBaudRates.map(d => ({ value: d })),
+          options: commonBaudRates.map(d => ({ value: d.toString(), label: d.toString() })),
           normalize: (value) => {
             if (value === '' || value == null) {
               return undefined

package/client/components/bookmark-form/config/ssh.js

@@ -21,6 +21,7 @@ const sshConfig = {
       sshTunnels: [],
       connectionHoppings: [],
       useSshAgent: true,
+      sshAgent: '',
       serverHostKey: [],
       cipher: [],
       ...getTerminalDefaults(store),

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

@@ -2,7 +2,8 @@
  * Generic form renderer driven by config (flattened path)
  */
 import React, { useEffect, useState, useRef } from 'react'
-import { Form, Tabs, message } from 'antd'
+import { Form, Tabs } from 'antd'
+import message from '../common/message'
 import { renderFormItem } from './common/fields'
 import SubmitButtons from './common/submit-buttons'
 import { uniq } from 'lodash-es'
@@ -260,7 +261,7 @@ export default function FormRenderer ({ config, props }) {
     }
     const ips = await window.pre.runGlobalAsync('lookup', value)
       .catch(err => {
-        log.debug(err)
+        console.debug(err)
       })
     setIps(ips || [])
   }

package/client/components/common/input-auto-focus.jsx

@@ -24,7 +24,7 @@ export default function InputAutoFocus (props) {
         inputRef.current.focus()
       }
     }
-  }, [props.value, props.selectall])
+  }, [props.selectall])
 
   let InputComponent
   switch (type) {

package/client/components/common/message.jsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react'
+import { createRoot } from 'react-dom/client'
+import {
+  CloseOutlined
+} from '@ant-design/icons'
+import classnames from 'classnames'
+import generateId from '../../common/uid'
+import { messageIcons } from '../../common/icon-helpers.jsx'
+import './message.styl'
+
+let messageContainerRoot = null
+const messageObservers = []
+
+const subscribe = (onUpdate) => {
+  messageObservers.push(onUpdate)
+  return () => {
+    const index = messageObservers.indexOf(onUpdate)
+    if (index > -1) messageObservers.splice(index, 1)
+  }
+}
+
+const notify = (messages) => {
+  messageObservers.forEach(onUpdate => onUpdate([...messages]))
+}
+
+let activeMessages = []
+
+function MessageItem ({ id, type, content, duration, onRemove, timestamp }) {
+  useEffect(() => {
+    if (duration !== 0) {
+      const timer = setTimeout(onRemove, duration * 1000)
+      return () => clearTimeout(timer)
+    }
+  }, [duration, onRemove, timestamp])
+
+  return (
+    <div className={classnames('message-item', type)} id={`message-${id}`}>
+      <div className='message-content-wrap'>
+        {messageIcons[type]}
+        <div className='message-content'>{content}</div>
+        <CloseOutlined className='message-close' onClick={onRemove} />
+      </div>
+    </div>
+  )
+}
+
+function MessageContainer () {
+  const [messages, setMessages] = useState(activeMessages)
+
+  useEffect(() => {
+    return subscribe(setMessages)
+  }, [])
+
+  const removeMessage = (id, onClose) => {
+    activeMessages = activeMessages.filter(m => m.id !== id)
+    notify(activeMessages)
+    if (typeof onClose === 'function') {
+      onClose()
+    }
+  }
+
+  return (
+    <div className='message-container'>
+      {messages.map(msg => {
+        const { key, ...props } = msg
+        return (
+          <MessageItem key={msg.id} {...props} onRemove={() => removeMessage(msg.id, msg.onClose)} />
+        )
+      })}
+    </div>
+  )
+}
+
+const init = () => {
+  if (messageContainerRoot || typeof document === 'undefined') return
+  const div = document.createElement('div')
+  div.id = 'message-root'
+  document.body.appendChild(div)
+  messageContainerRoot = createRoot(div)
+  messageContainerRoot.render(<MessageContainer />)
+}
+
+const addMessage = (type, content, duration = 3, onClose) => {
+  let config = {
+    content,
+    duration,
+    onClose,
+    type
+  }
+  if (typeof content === 'object' && content !== null && !React.isValidElement(content)) {
+    config = {
+      ...config,
+      ...content,
+      type: content.type || type
+    }
+  }
+  init()
+  const id = config.key || generateId()
+  const existingIndex = activeMessages.findIndex(m => m.id === id)
+  const newMessage = {
+    ...config,
+    id,
+    timestamp: Date.now()
+  }
+  if (existingIndex > -1) {
+    activeMessages[existingIndex] = newMessage
+  } else {
+    activeMessages = [...activeMessages, newMessage]
+  }
+  notify(activeMessages)
+  return {
+    id,
+    destroy: () => {
+      activeMessages = activeMessages.filter(m => m.id !== id)
+      notify(activeMessages)
+    }
+  }
+}
+
+const message = {
+  info: (content, duration) => addMessage('info', content, duration),
+  success: (content, duration) => addMessage('success', content, duration),
+  warning: (content, duration) => addMessage('warning', content, duration),
+  error: (content, duration) => addMessage('error', content, duration),
+  destroy: () => {
+    activeMessages = []
+    notify(activeMessages)
+  }
+}
+
+export default message

package/client/components/common/message.styl

@@ -0,0 +1,58 @@
+.message-container
+  position fixed
+  top 20px
+  left 50%
+  transform translateX(-50%)
+  z-index 10000
+  pointer-events none
+
+.message-item
+  pointer-events all
+  margin-bottom 16px
+  padding 8px 16px
+  border-radius 4px
+  background var(--main-lighter)
+  color var(--text)
+  box-shadow 0 4px 12px rgba(0,0,0,0.15)
+  display flex
+  align-items center
+  animation message-fade-in 0.3s ease
+  position relative
+  justify-content center
+  &:hover
+    .message-close
+      opacity 1
+
+.message-content-wrap
+  display flex
+  align-items center
+
+.msg-icon
+  margin-right 8px
+  font-size 16px
+  &.info
+    color var(--info)
+  &.success
+    color var(--success)
+  &.warning
+    color var(--warn)
+  &.error
+    color var(--error)
+
+.message-close
+  margin-left 8px
+  cursor pointer
+  font-size 12px
+  color var(--text-dark)
+  opacity 0
+  transition opacity 0.2s
+  &:hover
+    color var(--text-light)
+
+@keyframes message-fade-in
+  from
+    opacity 0
+    transform translateY(-20px)
+  to
+    opacity 1
+    transform translateY(0)