@electerm/electerm-react 2.3.181 → 2.3.190

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

@@ -101,7 +101,7 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
     const formItemProps = {
       ...formItemLayout,
       className: cls,
-      label,
+      label: typeof label === 'string' ? label : label(),
       name,
       rules,
       valuePropName,

package/client/components/bookmark-form/common/ssh-auth-selector.jsx

@@ -26,14 +26,44 @@ export default function renderAuth (props) {
     formItemName = 'password',
     profileFilter = (d) => d
   } = props
-  const beforeUpload = async (file) => {
+  const commonBeforeUpload = (fieldName) => async (file) => {
     const filePath = getFilePath(file)
-    const privateKey = await window.fs.readFile(filePath)
+    const content = await window.fs.readFile(filePath)
     form.setFieldsValue({
-      privateKey
+      [fieldName]: content
     })
     return false
   }
+  const renderKeyField = (key, label, desc) => (
+    <FormItem
+      {...formItemLayout}
+      label={e(label)}
+      hasFeedback
+      key={key}
+      className='mg1b'
+      rules={[{
+        max: 13000, message: '13000 chars max'
+      }]}
+    >
+      <FormItem noStyle name={key}>
+        <TextArea
+          placeholder={e(desc)}
+          autoSize={{ minRows: 1 }}
+        />
+      </FormItem>
+      <Upload
+        beforeUpload={commonBeforeUpload(key)}
+        fileList={[]}
+      >
+        <Button
+          type='dashed'
+          className='mg2b mg1t'
+        >
+          {e('importFromFile')}
+        </Button>
+      </Upload>
+    </FormItem>
+  )
   if (authType === 'password') {
     const opts = {
       options: uniqBy(
@@ -95,34 +125,7 @@ export default function renderAuth (props) {
     )
   }
   return [
-    <FormItem
-      {...formItemLayout}
-      label={e('privateKey')}
-      hasFeedback
-      key='privateKey'
-      className='mg1b'
-      rules={[{
-        max: 13000, message: '13000 chars max'
-      }]}
-    >
-      <FormItem noStyle name='privateKey'>
-        <TextArea
-          placeholder={e('privateKeyDesc')}
-          autoSize={{ minRows: 1 }}
-        />
-      </FormItem>
-      <Upload
-        beforeUpload={beforeUpload}
-        fileList={[]}
-      >
-        <Button
-          type='dashed'
-          className='mg2b mg1t'
-        >
-          {e('importFromFile')}
-        </Button>
-      </Upload>
-    </FormItem>,
+    renderKeyField('privateKey', 'privateKey', 'privateKeyDesc'),
     <FormItem
       key='passphrase'
       {...formItemLayout}
@@ -136,6 +139,7 @@ export default function renderAuth (props) {
       <Password
         placeholder={e('passphraseDesc')}
       />
-    </FormItem>
+    </FormItem>,
+    renderKeyField('certificate', 'certificate', 'certificate')
   ]
 }

package/client/components/bookmark-form/common/ssh-auth-type-selector.jsx

@@ -25,9 +25,12 @@ export default function SshAuthTypeSelector ({ handleChangeAuthType, filterAuthT
       >
         {
           authTypesFiltered.map(t => {
+            const str = t === 'privateKey'
+              ? e(t) + '/' + e('certificate')
+              : e(t)
             return (
               <RadioButton value={t} key={t}>
-                {e(t)}
+                {str}
               </RadioButton>
             )
           })

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

@@ -15,65 +15,65 @@ export const commonFields = {
   host: {
     type: 'colorTitle',
     name: 'host',
-    label: e('host'),
+    label: () => e('host'),
     rules: [{ required: true, message: e('host') + ' required' }]
   },
 
   colorTitle: {
     type: 'colorTitle',
     name: 'title',
-    label: e('title')
+    label: () => e('title')
   },
 
   title: {
     type: 'input',
     name: 'title',
-    label: e('title')
+    label: () => e('title')
   },
 
   username: {
     type: 'input',
     name: 'username',
-    label: e('username')
+    label: () => e('username')
   },
 
   password: {
     type: 'password',
     name: 'password',
-    label: e('password')
+    label: () => e('password')
   },
 
   loginPrompt: {
     type: 'input',
     name: 'loginPrompt',
-    label: e('loginPrompt'),
+    label: () => e('loginPrompt'),
     props: { placeholder: '/login[: ]*$/i' }
   },
 
   passwordPrompt: {
     type: 'input',
     name: 'passwordPrompt',
-    label: e('passwordPrompt'),
+    label: () => e('passwordPrompt'),
     props: { placeholder: '/password[: ]*$/i' }
   },
 
   port: {
     type: 'number',
     name: 'port',
-    label: e('port'),
+    label: () => e('port'),
     rules: [{ required: true, message: 'port required' }]
   },
 
   description: {
     type: 'textarea',
     name: 'description',
-    label: e('description')
+    label: () => e('description')
   },
 
   category: {
     type: 'categorySelect',
     name: 'category',
-    label: e('category')
+    label: () => e('category')
   },
 
   type: {
@@ -106,13 +106,13 @@ export const commonFields = {
   interactiveValues: {
     type: 'textarea',
     name: 'interactiveValues',
-    label: e('interactiveValues')
+    label: () => e('interactiveValues')
   },
 
   encode: {
     type: 'select',
     name: 'encode',
-    label: e('encode'),
+    label: () => e('encode'),
     options: encodes.map(k => ({ label: k.toUpperCase(), value: k }))
   },
 
@@ -128,7 +128,7 @@ export const commonFields = {
   terminalType: {
     type: 'autocomplete',
     name: 'term',
-    label: e('terminalType'),
+    label: () => e('terminalType'),
     rules: [{ required: true, message: 'terminal type required' }],
     options: terminalTypes.map(t => ({ label: t, value: t }))
   },
@@ -136,14 +136,14 @@ export const commonFields = {
   displayRaw: {
     type: 'switch',
     name: 'displayRaw',
-    label: e('displayRaw'),
+    label: () => e('displayRaw'),
     valuePropName: 'checked'
   },
 
   fontFamily: {
     type: 'input',
     name: 'fontFamily',
-    label: e('fontFamily'),
+    label: () => e('fontFamily'),
     rules: [{ max: 130, message: '130 chars max' }],
     props: { placeholder: defaultSettings.fontFamily }
   },
@@ -151,7 +151,7 @@ export const commonFields = {
   fontSize: {
     type: 'number',
     name: 'fontSize',
-    label: e('fontSize'),
+    label: () => e('fontSize'),
     props: {
       min: 9,
       max: 65535,
@@ -163,7 +163,7 @@ export const commonFields = {
   keepaliveInterval: {
     type: 'number',
     name: 'keepaliveInterval',
-    label: e('keepaliveIntervalDesc'),
+    label: () => e('keepaliveIntervalDesc'),
     props: {
       min: 0,
       max: 20000000,
@@ -174,13 +174,13 @@ export const commonFields = {
   terminalBackground: {
     type: 'terminalBackground',
     name: 'terminalBackground',
-    label: e('terminalBackgroundImage')
+    label: () => e('terminalBackgroundImage')
   },
 
   proxy: {
     type: 'proxy',
     name: '__proxy__',
-    label: e('proxy')
+    label: () => e('proxy')
   },
 
   x11: {
@@ -243,7 +243,7 @@ export const sshSettings = [
   {
     type: 'switch',
     name: 'ignoreKeyboardInteractive',
-    label: e('ignoreKeyboardInteractive'),
+    label: () => e('ignoreKeyboardInteractive'),
     valuePropName: 'checked'
   },
   ...terminalSettings.slice(0, -1), // All except terminalBackground
@@ -271,6 +271,12 @@ export const sshAuthFields = [
   { type: 'sshAuthTypeSelector', name: 'authType', label: '' },
   { type: 'sshAuthSelector', name: '__auth__', label: '', formItemName: 'password' },
   commonFields.port,
+  {
+    type: 'switch',
+    name: 'useSshAgent',
+    label: () => e('useSshAgent'),
+    valuePropName: 'checked'
+  },
   commonFields.runScripts,
   commonFields.description,
   commonFields.setEnv,
@@ -305,18 +311,18 @@ export const telnetAuthFields = [
 // Common tab configurations - functions to ensure translation happens at render time
 export const quickCommandsTab = () => ({
   key: 'quickCommands',
-  label: e('quickCommands'),
+  label: () => e('quickCommands'),
   fields: [commonFields.quickCommands]
 })
 
 export const sshTunnelTab = () => ({
   key: 'tunnel',
-  label: e('sshTunnel'),
+  label: () => e('sshTunnel'),
   fields: [commonFields.sshTunnels]
 })
 
 export const connectionHoppingTab = () => ({
   key: 'connectionHopping',
-  label: e('connectionHopping'),
+  label: () => e('connectionHopping'),
   fields: [commonFields.connectionHopping]
 })

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

@@ -22,16 +22,16 @@ const ftpConfig = {
   tabs: () => [
     {
       key: 'auth',
-      label: e('auth'),
+      label: () => e('auth'),
       fields: [
         commonFields.category,
         commonFields.colorTitle,
-        { type: 'input', name: 'host', label: e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
+        { type: 'input', name: 'host', label: () => e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
         commonFields.port,
         { type: 'profileItem', name: '__profile__', label: '', profileFilter: d => !isEmpty(d.ftp) },
-        { type: 'input', name: 'user', label: e('username') },
-        { type: 'password', name: 'password', label: e('password') },
-        { type: 'switch', name: 'secure', label: e('secure'), valuePropName: 'checked' },
+        { type: 'input', name: 'user', label: () => e('username') },
+        { type: 'password', name: 'password', label: () => e('password') },
+        { type: 'switch', name: 'secure', label: () => e('secure'), valuePropName: 'checked' },
         commonFields.type
       ]
     }

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

@@ -26,7 +26,7 @@ const localConfig = {
   tabs: () => [
     {
       key: 'auth',
-      label: e('auth'),
+      label: () => e('auth'),
       fields: [
         commonFields.category,
         commonFields.colorTitle,
@@ -37,7 +37,7 @@ const localConfig = {
     },
     {
       key: 'settings',
-      label: e('settings'),
+      label: () => e('settings'),
       fields: [
         {
           type: 'input',
@@ -48,27 +48,27 @@ const localConfig = {
         {
           type: 'autocomplete',
           name: 'term',
-          label: e('terminalType'),
+          label: () => e('terminalType'),
           rules: [{ required: true, message: 'terminal type required' }],
           options: terminalTypes.map(t => ({ label: t, value: t }))
         },
         {
           type: 'switch',
           name: 'displayRaw',
-          label: e('displayRaw'),
+          label: () => e('displayRaw'),
           valuePropName: 'checked'
         },
         {
           type: 'input',
           name: 'fontFamily',
-          label: e('fontFamily'),
+          label: () => e('fontFamily'),
           rules: [{ max: 130, message: '130 chars max' }],
           props: { placeholder: defaultSettings.fontFamily }
         },
         {
           type: 'number',
           name: 'fontSize',
-          label: e('fontSize'),
+          label: () => e('fontSize'),
           props: {
             min: 9,
             max: 65535,
@@ -79,19 +79,19 @@ const localConfig = {
         {
           type: 'number',
           name: 'keepaliveInterval',
-          label: e('keepaliveIntervalDesc'),
+          label: () => e('keepaliveIntervalDesc'),
           props: {
             min: 0,
             max: 20000000,
             step: 1000
           }
         },
-        { type: 'terminalBackground', name: 'terminalBackground', label: e('terminalBackgroundImage') }
+        { type: 'terminalBackground', name: 'terminalBackground', label: () => e('terminalBackgroundImage') }
       ]
     },
     {
       key: 'quickCommands',
-      label: e('quickCommands'),
+      label: () => e('quickCommands'),
       fields: [
         { type: 'quickCommands', name: '__quick__', label: '' }
       ]

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

@@ -19,18 +19,18 @@ const rdpConfig = {
   tabs: () => [
     {
       key: 'auth',
-      label: e('auth'),
+      label: () => e('auth'),
       fields: [
         { type: 'rdpWarning', name: 'rdpWarning' },
         commonFields.category,
         commonFields.colorTitle,
-        { type: 'input', name: 'host', label: e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
+        { type: 'input', name: 'host', label: () => e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
         commonFields.port,
         { type: 'profileItem', name: '__profile__', label: '', profileFilter: d => !isEmpty(d.rdp) },
         { ...commonFields.username, rules: [{ required: true, message: e('username') + ' required' }] },
         { ...commonFields.password, rules: [{ required: true, message: e('password') + ' required' }] },
         commonFields.description,
-        { type: 'input', name: 'domain', label: e('domain') },
+        { type: 'input', name: 'domain', label: () => e('domain') },
         commonFields.type
       ]
     }

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

@@ -31,7 +31,7 @@ const serialConfig = {
   tabs: () => [
     {
       key: 'auth',
-      label: e('auth'),
+      label: () => e('auth'),
       fields: [
         commonFields.category,
         commonFields.colorTitle,
@@ -64,14 +64,14 @@ const serialConfig = {
     },
     {
       key: 'settings',
-      label: e('settings'),
+      label: () => e('settings'),
       fields: [
-        { type: 'terminalBackground', name: 'terminalBackground', label: e('terminalBackgroundImage') }
+        { type: 'terminalBackground', name: 'terminalBackground', label: () => e('terminalBackgroundImage') }
       ]
     },
     {
       key: 'quickCommands',
-      label: e('quickCommands'),
+      label: () => e('quickCommands'),
       fields: [
         { type: 'quickCommands', name: '__quick__', label: '' }
       ]

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

@@ -20,6 +20,7 @@ const sshConfig = {
       enableSftp: true,
       sshTunnels: [],
       connectionHoppings: [],
+      useSshAgent: true,
       serverHostKey: [],
       cipher: [],
       ...getTerminalDefaults(store),
@@ -32,12 +33,12 @@ const sshConfig = {
   tabs: () => [
     {
       key: 'auth',
-      label: e('auth'),
+      label: () => e('auth'),
       fields: sshAuthFields
     },
     {
       key: 'settings',
-      label: e('settings'),
+      label: () => e('settings'),
       fields: sshSettings
     },
     quickCommandsTab(),

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

@@ -31,12 +31,12 @@ const telnetConfig = {
   tabs: () => [
     {
       key: 'auth',
-      label: e('auth'),
+      label: () => e('auth'),
       fields: telnetAuthFields
     },
     {
       key: 'settings',
-      label: e('settings'),
+      label: () => e('settings'),
       fields: terminalSettings
     },
     quickCommandsTab()

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

@@ -23,16 +23,16 @@ const vncConfig = {
   tabs: () => [
     {
       key: 'auth',
-      label: e('auth'),
+      label: () => e('auth'),
       fields: [
         { type: 'vncWarning', name: 'vncWarning' },
         commonFields.category,
         commonFields.colorTitle,
-        { type: 'input', name: 'host', label: e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
+        { type: 'input', name: 'host', label: () => e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
         commonFields.port,
-        { type: 'switch', name: 'viewOnly', label: e('viewOnly'), valuePropName: 'checked' },
-        { type: 'switch', name: 'clipViewport', label: e('clipViewport'), valuePropName: 'checked' },
-        { type: 'switch', name: 'scaleViewport', label: e('scaleViewport'), valuePropName: 'checked' },
+        { type: 'switch', name: 'viewOnly', label: () => e('viewOnly'), valuePropName: 'checked' },
+        { type: 'switch', name: 'clipViewport', label: () => e('clipViewport'), valuePropName: 'checked' },
+        { type: 'switch', name: 'scaleViewport', label: () => e('scaleViewport'), valuePropName: 'checked' },
         { type: 'profileItem', name: '__profile__', label: '', profileFilter: d => !isEmpty(d.vnc) },
         commonFields.username,
         commonFields.password,

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

@@ -15,14 +15,14 @@ const webConfig = {
   tabs: () => [
     {
       key: 'main',
-      label: e('auth'),
+      label: () => e('auth'),
       fields: [
         commonFields.category,
         commonFields.colorTitle,
         {
           type: 'input',
           name: 'url',
-          label: e('URL'),
+          label: () => e('URL'),
           rules: [
             { required: true, message: e('Please input URL') },
             {
@@ -34,7 +34,7 @@ const webConfig = {
           ]
         },
         commonFields.description,
-        { type: 'input', name: 'useragent', label: e('useragent') },
+        { type: 'input', name: 'useragent', label: () => e('useragent') },
         { type: 'switch', name: 'hideAddressBar', label: 'hideAddressBar', valuePropName: 'checked' },
         commonFields.type
       ]

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

@@ -11,18 +11,14 @@ import generate from '../../common/uid'
 import InputAutoFocus from '../common/input-auto-focus'
 import renderQm from './quick-commands-list-form'
 import ShortcutEdit from '../shortcuts/shortcut-editor'
-import shortcutsDefaultsGen from '../shortcuts/shortcuts-defaults'
+import { getKeysTakenData } from '../shortcuts/shortcut-utils'
 import deepCopy from 'json-deep-copy'
-import {
-  isMacJs as isMac
-} from '../../common/constants.js'
 import templates from './templates'
 import HelpIcon from '../common/help-icon'
 
 const FormItem = Form.Item
 const { Option } = Select
 const e = window.translate
-const shortcutsDefaults = shortcutsDefaultsGen()
 
 export default function QuickCommandForm (props) {
   const [form] = Form.useForm()
@@ -42,41 +38,15 @@ export default function QuickCommandForm (props) {
     })
     setShortcut('')
   }
-  const getKeysTakenData = () => {
-    const { shortcuts = {} } = store.config
-    const { quickCommands = [] } = store
-
-    // Gather system shortcuts
-    const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
-      const propName = isMac ? 'shortcutMac' : 'shortcut'
-      const name = k.name + '_' + propName
-      const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
-      const v = vv
-        .split(',')
-        .map(f => f.trim())
-        .reduce((p, k) => ({
-          ...p,
-          [k]: true
-        }), {})
-      return {
-        ...p,
-        ...v
-      }
-    }, {})
+  const getKeysTaken = () => {
+    const keysTaken = getKeysTakenData()
 
-    // Gather quick command shortcuts
-    const quickCommandShortcuts = quickCommands.reduce((acc, command) => {
-      if (command.shortcut) {
-        acc[command.shortcut] = true
-      }
-      return acc
-    }, {})
-
-    // Combine system shortcuts and quick command shortcuts
-    return {
-      ...systemShortcuts,
-      ...quickCommandShortcuts
+    // Exclude current shortcut if editing existing command
+    if (formData.shortcut) {
+      delete keysTaken[formData.shortcut]
     }
+
+    return keysTaken
   }
 
   async function handleSubmit (res) {
@@ -126,7 +96,7 @@ export default function QuickCommandForm (props) {
       name: uid,
       shortcut
     },
-    keysTaken: getKeysTakenData(),
+    keysTaken: getKeysTaken(),
     store,
     updateConfig,
     handleClear,

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

@@ -0,0 +1,132 @@
+import React, { Component } from 'react'
+import ShortcutEdit from '../shortcuts/shortcut-editor'
+import { getKeysTakenData } from '../shortcuts/shortcut-utils'
+import './setting.styl'
+
+const e = window.translate
+
+// Bidirectional maps for key conversions
+const MODIFIER_MAP = {
+  // Display format -> Electron format
+  ctrl: 'CommandOrControl',
+  meta: 'CommandOrControl',
+  alt: 'Alt',
+  shift: 'Shift',
+  // Electron format -> Display format
+  CommandOrControl: 'ctrl',
+  Command: 'meta',
+  Control: 'ctrl',
+  Alt: 'alt',
+  Shift: 'shift',
+  Super: 'meta',
+  Meta: 'meta'
+}
+
+const KEY_MAP = {
+  // Display format -> Electron format
+  '←': 'Left',
+  '↑': 'Up',
+  '→': 'Right',
+  '↓': 'Down',
+  '▲': 'mouseWheelUp',
+  '▼': 'mouseWheelDown',
+  enter: 'Return',
+  // Electron format -> Display format
+  Left: '←',
+  Up: '↑',
+  Right: '→',
+  Down: '↓',
+  Return: 'enter',
+  Enter: 'enter',
+  mouseWheelUp: '▲',
+  mouseWheelDown: '▼'
+}
+
+export default class HotkeySetting extends Component {
+  onChangeHotkey = (name, shortcut) => {
+    // Convert shortcut from ShortcutEdit format to Electron accelerator format
+    const electronShortcut = this.convertToElectronAccelerator(shortcut)
+    return this.props.onSaveConfig({
+      [name]: electronShortcut
+    })
+  }
+
+  convertToElectronAccelerator = (shortcut) => {
+    if (!shortcut) return shortcut
+
+    // Split the shortcut into parts
+    const parts = shortcut.split('+')
+    const modifiers = []
+    let key = ''
+
+    // Process each part
+    for (const part of parts) {
+      const lowerPart = part.toLowerCase()
+      if (MODIFIER_MAP[lowerPart]) {
+        modifiers.push(MODIFIER_MAP[lowerPart])
+      } else {
+        // Handle special key mappings
+        key = KEY_MAP[part] || part.toUpperCase()
+      }
+    }
+
+    // Combine modifiers and key
+    return [...modifiers, key].join('+')
+  }
+
+  convertFromElectronAccelerator = (electronShortcut) => {
+    if (!electronShortcut) return electronShortcut
+
+    // Split the shortcut into parts
+    const parts = electronShortcut.split('+')
+    const modifiers = []
+    let key = ''
+
+    // Process each part
+    for (const part of parts) {
+      if (MODIFIER_MAP[part]) {
+        modifiers.push(MODIFIER_MAP[part])
+      } else {
+        // Handle special key mappings
+        key = KEY_MAP[part] || part.toLowerCase()
+      }
+    }
+
+    // Combine modifiers and key
+    return [...modifiers, key].join('+')
+  }
+
+  getKeysTaken = (currentHotkey) => {
+    const keysTaken = getKeysTakenData()
+
+    // Convert current hotkey to display format for comparison
+    const currentShortcutDisplay = this.convertFromElectronAccelerator(currentHotkey)
+
+    // Remove current hotkey from taken keys (allow re-setting the same hotkey)
+    delete keysTaken[currentShortcutDisplay]
+
+    return keysTaken
+  }
+
+  render () {
+    const { hotkey } = this.props
+    const shortcutProps = {
+      data: {
+        name: 'hotkey',
+        shortcut: this.convertFromElectronAccelerator(hotkey),
+        index: 0
+      },
+      updateConfig: this.onChangeHotkey,
+      keysTaken: this.getKeysTaken(hotkey)
+    }
+
+    return (
+      <div className='pd2b'>
+        <div className='pd1b'>{e('hotkeyDesc')}</div>
+        <ShortcutEdit
+          {...shortcutProps}
+        />
+      </div>
+    )
+  }
+}

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

@@ -32,24 +32,12 @@ import HelpIcon from '../common/help-icon'
 import delay from '../../common/wait.js'
 import isColorDark from '../../common/is-color-dark'
 import DeepLinkControl from './deep-link-control'
+import HotkeySetting from './hotkey'
 import './setting.styl'
 
 const { Option } = Select
 const e = window.translate
 
-const modifiers = [
-  'Command',
-  'Control',
-  'Alt',
-  'Shift'
-]
-const keys = [
-  ...'0123456789~ABCDEFGHIJKLMNOPQRTSUVWXYZ'.split(''),
-  ...new Array(12).fill(0).map((m, i) => {
-    return 'F' + (i + 1)
-  })
-]
-
 export default class SettingCommon extends Component {
   state = {
     ready: false,
@@ -142,28 +130,12 @@ export default class SettingCommon extends Component {
     )
   }
 
-  handleChangeModifier = modifier => {
-    const { hotkey } = this.props.config
-    const key = hotkey.split('+')[1]
-    return this.saveConfig({
-      hotkey: `${modifier}+${key}`
-    })
-  }
-
   onChangeTimeout = sshReadyTimeout => {
     return this.saveConfig({
       sshReadyTimeout
     })
   }
 
-  handleChangeKey = key => {
-    const { hotkey } = this.props.config
-    const modifier = hotkey.split('+')[0]
-    return this.saveConfig({
-      hotkey: `${modifier}+${key}`
-    })
-  }
-
   handleChangeLang = language => {
     this.setState({
       languageChanged: true
@@ -211,12 +183,6 @@ export default class SettingCommon extends Component {
     this.props.store.setConfig(ext)
   }
 
-  renderOption = (m, i) => {
-    return (
-      <Option value={m} key={m + 'opt' + i}>{m}</Option>
-    )
-  }
-
   renderToggle = (name, extra = null) => {
     const checked = !!this.props.config[name]
     return (
@@ -513,7 +479,6 @@ export default class SettingCommon extends Component {
       langs = []
     } = window.et
     const terminalThemes = props.store.getSidebarList(settingMap.terminalThemes)
-    const [modifier, key] = hotkey.split('+')
     const pops = {
       onStartSessions: props.config.onStartSessions,
       bookmarks: props.bookmarks,
@@ -521,35 +486,16 @@ export default class SettingCommon extends Component {
       workspaces: props.store.workspaces,
       onChangeStartSessions: this.onChangeStartSessions
     }
+    const hotkeyProps = {
+      hotkey,
+      onSaveConfig: this.saveConfig
+    }
     return (
       <div className='form-wrap pd1y pd2x'>
         <h2>{e('settings')}</h2>
-        <div className='pd1b'>{e('hotkeyDesc')}</div>
-        <div className='pd2b'>
-          <Select
-            value={modifier}
-            onChange={this.handleChangeModifier}
-            className='width100'
-            popupMatchSelectWidth={false}
-            showSearch
-          >
-            {
-              modifiers.map(this.renderOption)
-            }
-          </Select>
-          <span className='mg1x'>+</span>
-          <Select
-            value={key}
-            className='width100'
-            onChange={this.handleChangeKey}
-            popupMatchSelectWidth={false}
-            showSearch
-          >
-            {
-              keys.map(this.renderOption)
-            }
-          </Select>
-        </div>
+        <HotkeySetting
+          {...hotkeyProps}
+        />
         <div className='pd1b'>{e('onStartBookmarks')}</div>
         <div className='pd2b'>
           <StartSession

package/client/components/shortcuts/get-key-char.js

@@ -37,7 +37,7 @@ export function getKeyCharacter (code = '') {
   }
   if (code.startsWith('Key') && code.length === 4) {
     return code[3].toLowerCase()
-  } else if (code.startsWith('Digit') && code.length === 5) {
+  } else if (code.startsWith('Digit') && code.length === 6) {
     return code[5]
   } else {
     return mapping[code] || code

package/client/components/shortcuts/shortcut-control.jsx

@@ -139,6 +139,11 @@ class ShortcutControl extends React.PureComponent {
     window.store.reloadTab()
   }, 500)
 
+  reloadAllShortcut = throttle((e) => {
+    e.stopPropagation()
+    window.store.reloadAllTabs()
+  }, 500)
+
   cloneToNextLayoutShortcut = throttle((e) => {
     e.stopPropagation()
     window.store.cloneToNextLayout()

package/client/components/shortcuts/shortcut-editor.jsx

@@ -106,6 +106,8 @@ export default class ShortcutEdit extends PureComponent {
       altKey,
       wheelDeltaY
     } = e
+    e.preventDefault()
+    e.stopPropagation()
     const codeName = e instanceof window.WheelEvent
       ? (wheelDeltaY > 0 ? 'mouseWheelUp' : 'mouseWheelDown')
       : code
@@ -201,6 +203,7 @@ export default class ShortcutEdit extends PureComponent {
         <Input
           addonAfter={this.renderAfter()}
           value={shortcut}
+          className='shortcut-input'
         />
       </div>
     )

package/client/components/shortcuts/shortcut-handler.js

@@ -44,6 +44,11 @@ function buildConfigForSearch (config) {
   }, {})
 }
 
+function isInAntdInput () {
+  const activeElement = document.activeElement
+  return activeElement && activeElement.classList.contains('shortcut-input')
+}
+
 export function shortcutExtend (Cls) {
   Cls.prototype.handleKeyboardEvent = function (event) {
     const {
@@ -57,6 +62,9 @@ export function shortcutExtend (Cls) {
       type,
       key
     } = event
+    if (isInAntdInput()) {
+      return
+    }
     if (this.cmdAddon) {
       this.cmdAddon.handleKey(event)
     }

package/client/components/shortcuts/shortcut-utils.js

@@ -0,0 +1,49 @@
+import { isMacJs as isMac } from '../../common/constants.js'
+import shortcutsDefaultsGen from './shortcuts-defaults'
+
+/**
+ * Get keys taken data for shortcut conflict checking
+ * @returns {object} Object with shortcut strings as keys and true as values
+ */
+export function getKeysTakenData () {
+  const { store } = window
+  const { config, quickCommands } = store
+  const { shortcuts = {} } = config
+
+  // Get shortcuts defaults
+  const shortcutsDefaults = shortcutsDefaultsGen()
+
+  // Gather system shortcuts
+  const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
+    const propName = isMac ? 'shortcutMac' : 'shortcut'
+    const name = k.name + '_' + propName
+    const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
+    if (!vv) return p
+
+    const v = vv
+      .split(',')
+      .map(f => f.trim())
+      .reduce((p, k) => ({
+        ...p,
+        [k]: true
+      }), {})
+    return {
+      ...p,
+      ...v
+    }
+  }, {})
+
+  // Gather quick command shortcuts
+  const quickCommandShortcuts = quickCommands.reduce((acc, command) => {
+    if (command.shortcut) {
+      acc[command.shortcut] = true
+    }
+    return acc
+  }, {})
+
+  // Combine system shortcuts and quick command shortcuts
+  return {
+    ...systemShortcuts,
+    ...quickCommandShortcuts
+  }
+}

package/client/components/shortcuts/shortcuts-defaults.js

@@ -16,6 +16,11 @@ export default () => {
       shortcut: 'alt+r',
       shortcutMac: 'alt+r'
     },
+    {
+      name: 'app_reloadAll',
+      shortcut: 'alt+y',
+      shortcutMac: 'alt+y'
+    },
     {
       name: 'app_cloneToNextLayout',
       shortcut: 'ctrl+/',

package/client/components/shortcuts/shortcuts.jsx

@@ -6,9 +6,10 @@ import {
   Table,
   Button
 } from 'antd'
+import { isMacJs as isMac } from '../../common/constants.js'
 import {
-  isMacJs as isMac
-} from '../../common/constants.js'
+  getKeysTakenData
+} from './shortcut-utils.js'
 
 const e = window.translate
 const shortcutsDefaults = shortcutsDefaultsGen()
@@ -45,43 +46,6 @@ export default class Shortcuts extends PureComponent {
       })
   }
 
-  getKeysTakenData = () => {
-    const { config, quickCommands = [] } = this.props
-    const { shortcuts = {} } = config
-
-    // Gather system shortcuts
-    const systemShortcuts = shortcutsDefaults.reduce((p, k) => {
-      const propName = isMac ? 'shortcutMac' : 'shortcut'
-      const name = k.name + '_' + propName
-      const vv = k.readonly ? k[propName] : (shortcuts[name] || k[propName])
-      const v = vv
-        .split(',')
-        .map(f => f.trim())
-        .reduce((p, k) => ({
-          ...p,
-          [k]: true
-        }), {})
-      return {
-        ...p,
-        ...v
-      }
-    }, {})
-
-    // Gather quick command shortcuts
-    const quickCommandShortcuts = quickCommands.reduce((acc, command) => {
-      if (command.shortcut) {
-        acc[command.shortcut] = true
-      }
-      return acc
-    }, {})
-
-    // Combine system shortcuts and quick command shortcuts
-    return {
-      ...systemShortcuts,
-      ...quickCommandShortcuts
-    }
-  }
-
   render () {
     const columns = [
       {
@@ -124,7 +88,7 @@ export default class Shortcuts extends PureComponent {
           return (
             <ShortcutEdit
               data={inst}
-              keysTaken={this.getKeysTakenData()}
+              keysTaken={getKeysTakenData()}
               updateConfig={this.updateConfig}
             />
           )

package/client/components/sidebar/index.jsx

@@ -61,6 +61,9 @@ export default function Sidebar (props) {
   }
 
   const handleClickBookmark = () => {
+    if (showModal) {
+      store.showModal = 0
+    }
     if (pinned) {
       return
     }

package/client/components/tabs/tab.jsx

@@ -190,6 +190,10 @@ class Tab extends Component {
     window.store.reloadTab(this.props.tab.id)
   }
 
+  handleReloadAll = () => {
+    window.store.reloadAllTabs()
+  }
+
   onDragEnd = e => {
     removeClass(this.tabRef.current, onDragCls)
     this.clearCls()
@@ -260,6 +264,7 @@ class Tab extends Component {
     const closeShortcut = this.getShortcut('app_closeCurrentTab')
     const cloneToNextShortcut = this.getShortcut('app_cloneToNextLayout')
     const duplicateShortcut = this.getShortcut('app_duplicateTab')
+    const reloadAllShortcut = this.getShortcut('app_reloadAll')
 
     const x = [
       {
@@ -305,6 +310,12 @@ class Tab extends Component {
         icon: <iconsMap.ReloadOutlined />,
         label: e('reload'),
         extra: reloadShortcut
+      },
+      {
+        key: 'handleReloadAll',
+        icon: <iconsMap.ReloadOutlined />,
+        label: e('reloadAll'),
+        extra: reloadAllShortcut
       }
     ].filter(Boolean)
     return x

package/client/store/tab.js

@@ -124,6 +124,17 @@ export default Store => {
     }, 0)
   }
 
+  Store.prototype.reloadAllTabs = function () {
+    const { store } = window
+    const { tabs } = store
+    // Reload all tabs with a small delay between each to avoid conflicts
+    tabs.forEach((tab, index) => {
+      setTimeout(() => {
+        store.reloadTab(tab.id)
+      }, index * 100) // 100ms delay between each reload
+    })
+  }
+
   Store.prototype.duplicateTab = function (tabId) {
     const { store } = window
     const { tabs } = store

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "2.3.181",
+  "version": "2.3.190",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",