@electerm/electerm-react 1.100.56 → 1.101.10

package/client/common/check-skip-src.js

@@ -0,0 +1,16 @@
+/**
+ * Check if install source should skip upgrade check
+ */
+
+import { srcsSkipUpgradeCheck } from './constants'
+
+export const checkSkipSrc = (installSrc) => {
+  if (!installSrc) return false
+  return srcsSkipUpgradeCheck.some(skipSrc => {
+    if (skipSrc === 'skip-upgrade-check') {
+      return installSrc === skipSrc
+    }
+    // For file extensions like '.appx', '.snap', check if installSrc ends with them
+    return installSrc.endsWith(skipSrc)
+  })
+}

package/client/components/bookmark-form/{bookmark-select.jsx → common/bookmark-select.jsx}

@@ -1,23 +1,15 @@
-// bookmark select tree
-import createTitle from '../../common/create-title'
+// bookmark select tree (copied from legacy)
+import createTitle from '../../../common/create-title'
 import { TreeSelect } from 'antd'
 
 const e = window.translate
 
 function buildTreeData (bookmarkGroups, tree) {
   const cats = bookmarkGroups
-  const btree = cats
-    .reduce((p, k) => {
-      return {
-        ...p,
-        [k.id]: k
-      }
-    }, {})
+  const btree = cats.reduce((p, k) => ({ ...p, [k.id]: k }), {})
   function buildSubCats (id) {
     const x = btree[id]
-    if (!x) {
-      return ''
-    }
+    if (!x) return ''
     const y = {
       key: x.id,
       value: x.id,
@@ -28,21 +20,13 @@ function buildTreeData (bookmarkGroups, tree) {
       ...(x.bookmarkGroupIds || []).map(buildSubCats),
       ...(x.bookmarkIds || []).map(buildLeaf)
     ].filter(d => d)
-    if (y.children && !y.children.length) {
-      delete y.children
-    }
+    if (y.children && !y.children.length) delete y.children
     return y
   }
   function buildLeaf (id) {
     const x = tree[id]
-    if (!x) {
-      return ''
-    }
-    return {
-      value: x.id,
-      key: x.id,
-      title: createTitle(x)
-    }
+    if (!x) return ''
+    return { value: x.id, key: x.id, title: createTitle(x) }
   }
   const level1 = cats.filter(d => d.level !== 2)
     .map(d => {
@@ -56,26 +40,15 @@ function buildTreeData (bookmarkGroups, tree) {
           ...(d.bookmarkIds || []).map(buildLeaf)
         ].filter(d => d)
       }
-      if (!r.children.length) {
-        return ''
-      }
+      if (!r.children.length) return ''
       return r
     }).filter(d => d)
   return level1
 }
 
 export default function BookmarkSelect (props) {
-  const {
-    bookmarks,
-    bookmarkGroups
-  } = props
-  const tree = bookmarks
-    .reduce((p, k) => {
-      return {
-        ...p,
-        [k.id]: k
-      }
-    }, {})
+  const { bookmarks, bookmarkGroups } = props
+  const tree = bookmarks.reduce((p, k) => ({ ...p, [k.id]: k }), {})
 
   function onSelect (id) {
     const item = tree[id]
@@ -85,14 +58,8 @@ export default function BookmarkSelect (props) {
     }
   }
 
-  // Custom filter function to only match leaf nodes
   function filterTreeNode (inputValue, treeNode) {
-    // Skip filtering for category nodes
-    if (treeNode.selectable === false) {
-      return false
-    }
-
-    // Match against searchText which includes both title and host
+    if (treeNode.selectable === false) return false
     return treeNode.title && treeNode.title.toLowerCase().includes(inputValue.toLowerCase())
   }
 

package/client/components/bookmark-form/{bookmark-category-select.jsx → common/category-select.jsx}

@@ -5,6 +5,8 @@
 import { useEffect } from 'react'
 import { TreeSelect, Form } from 'antd'
 import formatBookmarkGroups from './bookmark-group-tree-format'
+import { formItemLayout as defaultFormItemLayout } from '../../../common/form-layout'
+import { newBookmarkIdPrefix } from '../../../common/constants'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -14,7 +16,8 @@ export default function BookmarkCategorySelect ({
   form,
   formItemLayout,
   name = 'category',
-  onChange
+  onChange,
+  formData = {} // Add formData prop to access bookmark ID
 }) {
   const tree = formatBookmarkGroups(bookmarkGroups)
 
@@ -36,8 +39,9 @@ export default function BookmarkCategorySelect ({
   }
 
   // Watch for category field changes and update color accordingly
+  // Only update color for NEW bookmarks (like the old forms)
   useEffect(() => {
-    if (categoryId) {
+    if (categoryId && formData.id && formData.id.startsWith(newBookmarkIdPrefix)) {
       const category = findCategory(bookmarkGroups, categoryId)
       if (category && category.color) {
         form.setFieldsValue({
@@ -45,7 +49,7 @@ export default function BookmarkCategorySelect ({
         })
       }
     }
-  }, [categoryId, bookmarkGroups, form])
+  }, [categoryId, bookmarkGroups, form, formData.id])
 
   const handleCategoryChange = (categoryId) => {
     const category = findCategory(bookmarkGroups, categoryId)
@@ -63,9 +67,11 @@ export default function BookmarkCategorySelect ({
     }
   }
 
+  const layout = formItemLayout || defaultFormItemLayout
+
   return (
     <FormItem
-      {...formItemLayout}
+      {...layout}
       label={e('bookmarkCategory')}
       name={name}
     >

package/client/components/bookmark-form/{color-picker-item.jsx → common/color-picker-item.jsx}

@@ -1,6 +1,5 @@
-import {
-  Form
-} from 'antd'
+import React from 'react'
+import { Form } from 'antd'
 import { ColorPicker } from './color-picker.jsx'
 
 const FormItem = Form.Item

package/client/components/bookmark-form/{color-picker.jsx → common/color-picker.jsx}

@@ -1,11 +1,10 @@
 import React, { useState } from 'react'
 import { Popover } from 'antd'
 import { HexColorPicker, RgbaColorPicker } from 'react-colorful'
-import { defaultColors, getRandomHexColor } from '../../common/rand-hex-color.js'
+import { defaultColors, getRandomHexColor } from '../../../common/rand-hex-color.js'
 import { HexInput } from './hex-input.jsx'
 import './color-picker.styl'
 
-// Your Custom Color Picker component
 export const ColorPicker = React.forwardRef((props, ref) => {
   const { value, onChange } = props
   const [visible, setVisible] = useState(false)
@@ -27,73 +26,38 @@ export const ColorPicker = React.forwardRef((props, ref) => {
           <div className='fleft color-picker-defaults'>
             {
               [...defaultColors, 'random'].map((color) => {
-                const style = color === 'random'
-                  ? {
-                      color: '#000'
-                    }
-                  : {
-                      color
-                    }
-                const props = {
+                const style = color === 'random' ? { color: '#000' } : { color }
+                const p = {
                   className: 'color-picker-unit',
                   style,
                   onClick: () => {
-                    if (color === 'random') {
-                      return handleChange(getRandomHexColor())
-                    }
+                    if (color === 'random') return handleChange(getRandomHexColor())
                     handleChange(color)
                   }
                 }
-                return (
-                  <div
-                    {...props}
-                    key={color}
-                  >
-                    ● {color}
-                  </div>
-                )
+                return <div {...p} key={color}>● {color}</div>
               })
             }
           </div>
           <div className='fright'>
-            <Picker
-              color={value}
-              onChange={handleChange}
-            />
+            <Picker color={value} onChange={handleChange} />
           </div>
         </div>
         <div className='pd1y'>
-          <HexInput
-            value={value}
-            onChange={handleChange}
-          />
+          <HexInput value={value} onChange={handleChange} />
         </div>
       </div>
     )
   }
 
   const inner = (
-    <div
-      ref={ref}
-      className='color-picker-choose'
-      style={{
-        backgroundColor: value
-      }}
-    />
+    <div ref={ref} className='color-picker-choose' style={{ backgroundColor: value }} />
   )
 
-  if (props.disabled) {
-    return inner
-  }
+  if (props.disabled) return inner
 
   return (
-    <Popover
-      content={renderContent()}
-      trigger='click'
-      open={visible}
-      placement='bottomLeft'
-      onOpenChange={handleVisibleChange}
-    >
+    <Popover content={renderContent()} trigger='click' open={visible} placement='bottomLeft' onOpenChange={handleVisibleChange}>
       {inner}
     </Popover>
   )

package/client/components/bookmark-form/{render-connection-hopping.jsx → common/connection-hopping.jsx}

@@ -9,21 +9,21 @@ import {
 import {
   formItemLayout,
   tailFormItemLayout
-} from '../../common/form-layout'
+} from '../../../common/form-layout'
 import {
   MinusCircleFilled,
   PlusOutlined
 } from '@ant-design/icons'
 import RenderAuth from './render-auth-ssh'
-import uid from '../../common/uid'
+import uid from '../../../common/uid'
 import {
   authTypeMap,
   connectionHoppingWarnKey
-} from '../../common/constants'
+} from '../../../common/constants'
 import { useState } from 'react'
-import ConnectionHoppingWarningText from '../common/connection-hopping-warning-text'
+import ConnectionHoppingWarningText from '../../common/connection-hopping-warning-text'
 import BookmarkSelect from './bookmark-select'
-import * as ls from '../../common/safe-local-storage'
+import * as ls from '../../../common/safe-local-storage'
 
 const FormItem = Form.Item
 const RadioButton = Radio.Button
@@ -65,7 +65,7 @@ export default function renderConnectionHopping (props) {
       id: uid()
     }
     const v = [
-      ...form.getFieldValue('connectionHoppings'),
+      ...(form.getFieldValue('connectionHoppings') || []),
       nd
     ]
     form.setFieldsValue({
@@ -87,7 +87,7 @@ export default function renderConnectionHopping (props) {
     setList(old => {
       return old.filter(i => i.id !== id)
     })
-    const v = form.getFieldValue('connectionHoppings').filter(i => i.id !== id)
+    const v = (form.getFieldValue('connectionHoppings') || []).filter(i => i.id !== id)
     form.setFieldsValue({
       connectionHoppings: v
     })

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

@@ -0,0 +1,202 @@
+/**
+ * Field renderers for config-driven forms
+ * Maps field types to React components
+ */
+import React from 'react'
+import { Form, Input, InputNumber, Switch, Select, AutoComplete, Alert, Radio } from 'antd'
+import { ColorPickerItem } from './color-picker-item.jsx'
+import Password from '../../common/password.jsx'
+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 ConnectionHopping from './connection-hopping.jsx'
+import TerminalBackgroundField from './terminal-background.jsx'
+import useQuickCmds from './quick-commands.jsx'
+import ProfileItem from './profile-item.jsx'
+import renderRunScripts from './run-scripts.jsx'
+import SerialPathSelector from './serial-path-selector.jsx'
+import SshHostSelector from './ssh-host-selector.jsx'
+import SshAuthTypeSelector from './ssh-auth-type-selector.jsx'
+import SshAuthSelector from './ssh-auth-selector.jsx'
+import CategorySelect from './category-select.jsx'
+import RdpAlert from './rdp-alert.jsx'
+
+const Fragment = React.Fragment
+
+const { TextArea } = Input
+const commonRenderTypes = new Set([
+  'input',
+  'textarea',
+  'number',
+  'switch',
+  'select',
+  'autocomplete',
+  'radio',
+  'colorTitle',
+  'password'
+])
+
+/**
+ * Render a single form item based on config
+ * @param {Object} item - Field configuration with type, name, label, rules, etc.
+ * @param {Object} formItemLayout - Ant Design form layout
+ * @param {Object} form - Ant Design form instance
+ * @param {Object} ctxProps - Context props (bookmarkGroups, formData, etc.)
+ * @param {number} index - Index for key generation
+ * @returns {JSX.Element|null} Rendered form item
+ */
+export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
+  const { type, name, label, rules, valuePropName, hidden } = item
+
+  // Render simple AntD controls directly inside Form.Item
+  if (commonRenderTypes.has(type)) {
+    const cls = hidden ? 'hide' : undefined
+    let control = null
+    switch (type) {
+      case 'input':
+        control = <Input {...item.props} />
+        break
+      case 'textarea':
+        control = <TextArea autoSize={{ minRows: 1 }} {...item.props} />
+        break
+      case 'number':
+        control = <InputNumber min={1} max={65535} step={1} {...item.props} />
+        break
+      case 'switch':
+        control = <Switch {...item.props} />
+        break
+      case 'select':
+        control = <Select options={item.options} {...item.props} />
+        break
+      case 'autocomplete':
+        control = <AutoComplete options={item.options} {...item.props} />
+        break
+      case 'radio':
+        control = (
+          <Radio.Group
+            options={item.options}
+            optionType='button'
+            buttonStyle='solid'
+            size='small'
+            {...item.props}
+          />
+        )
+        break
+      case 'colorTitle':
+        control = <InputAutoFocus addonBefore={<ColorPickerItem />} {...item.props} />
+        break
+      case 'password':
+        control = <Password {...item.props} />
+        break
+      default:
+        control = null
+    }
+    if (!control) return null
+    return (
+      <Form.Item
+        key={name}
+        {...formItemLayout}
+        className={cls}
+        label={label}
+        name={name}
+        rules={rules}
+        valuePropName={valuePropName}
+      >
+        {control}
+      </Form.Item>
+    )
+  }
+
+  // Render complex/custom components directly (no extra wrapper component)
+  switch (type) {
+    case 'alert':
+      return <Alert key={name} {...item.props} />
+    case 'info':
+      return <Alert key={name} type='info' {...item.props} />
+    case 'warning':
+      return <Alert key={name} type='warning' {...item.props} />
+    case 'rdpWarning':
+      return <RdpAlert key={name} />
+    case 'categorySelect':
+      return (
+        <CategorySelect
+          key={name}
+          bookmarkGroups={ctxProps.bookmarkGroups || []}
+          form={ctxProps.form}
+          name={item.name}
+          formData={ctxProps.formData}
+        />
+      )
+    case 'proxy':
+      return <ProxyField key={name} bookmarks={ctxProps.bookmarks} />
+    case 'x11':
+      return <X11Field key={name} form={form} />
+    case 'sshTunnels':
+      return <SshTunnels key={name} form={form} formData={ctxProps.formData} />
+    case 'connectionHopping':
+      return (
+        <ConnectionHopping
+          key={name}
+          form={form}
+          formData={ctxProps.formData || {}}
+          trim={ctxProps.trim}
+          store={ctxProps.store}
+        />
+      )
+    case 'terminalBackground':
+      return <TerminalBackgroundField key={name} form={form} />
+    case 'profileItem':
+      return <ProfileItem key={name} store={ctxProps.store} profileFilter={item.profileFilter} />
+    case 'quickCommands':
+      return <Fragment key={name}>{useQuickCmds(form, ctxProps.formData || {})}</Fragment>
+    case 'runScripts':
+      return <Fragment key={name}>{renderRunScripts()}</Fragment>
+    case 'serialPathSelector':
+      return (
+        <SerialPathSelector
+          key={name}
+          serials={ctxProps.serials}
+          loaddingSerials={ctxProps.loaddingSerials}
+          store={ctxProps.store}
+          {...item.props}
+        />
+      )
+    case 'sshHostSelector':
+      return (
+        <SshHostSelector
+          key={name}
+          ips={ctxProps.ips || []}
+          useIp={ctxProps.useIp}
+          form={ctxProps.form}
+          onBlur={ctxProps.handleBlur}
+          onPaste={ctxProps.handlePaste}
+          trim={ctxProps.trim}
+          {...item.props}
+        />
+      )
+    case 'sshAuthTypeSelector':
+      return (
+        <SshAuthTypeSelector
+          key={name}
+          authType={ctxProps.authType}
+          handleChangeAuthType={ctxProps.onChangeAuthType}
+          {...item.props}
+        />
+      )
+    case 'sshAuthSelector':
+      return (
+        <SshAuthSelector
+          key={name}
+          store={ctxProps.store}
+          form={form}
+          authType={ctxProps.authType}
+          profileFilter={item.profileFilter}
+          {...item.props}
+        />
+      )
+    default:
+      console.warn(`Unknown field type: ${type}`)
+      return null
+  }
+}

package/client/components/bookmark-form/common/hex-input.jsx

@@ -0,0 +1,22 @@
+import { Input } from 'antd'
+import { useState } from 'react'
+import { CheckOutlined } from '@ant-design/icons'
+
+export const HexInput = (props) => {
+  const [v, setV] = useState((props.value || '').replace('#', ''))
+  const handleChange = (event) => {
+    const vv = event.target.value
+    const hexRegex = /^[0-9a-fA-F]{0,6}$/
+    if (hexRegex.test(vv)) setV(vv)
+  }
+  function submit () {
+    props.onChange('#' + v)
+  }
+  function renderAfter () {
+    if (!/^[0-9a-fA-F]{6}$/.test(v)) return null
+    return <CheckOutlined className='pointer' onClick={submit} />
+  }
+  return (
+    <Input addonBefore='#' {...props} value={v} onChange={handleChange} addonAfter={renderAfter()} />
+  )
+}

package/client/components/bookmark-form/common/init-values.js

@@ -0,0 +1,83 @@
+/**
+ * Common utilities for config initValues
+ */
+import { newBookmarkIdPrefix } from '../../../common/constants.js'
+import { getColorFromCategory } from '../../../common/get-category-color.js'
+import findBookmarkGroupId from '../../../common/find-bookmark-group-id.js'
+import deepCopy from 'json-deep-copy'
+
+/**
+ * Creates base init values that are common across all session types
+ * @param {Object} props - Props containing formData, bookmarkGroups, currentBookmarkGroupId, store
+ * @param {string} sessionType - The session type constant
+ * @param {Object} defaults - Session-specific default values
+ * @returns {Object} Combined init values
+ */
+export function createBaseInitValues (props, sessionType, defaults = {}) {
+  const { formData = {}, bookmarkGroups = [], currentBookmarkGroupId } = props
+  const id = formData.id || ''
+
+  // Determine bookmark group ID
+  const initBookmarkGroupId = !id.startsWith(newBookmarkIdPrefix)
+    ? findBookmarkGroupId(bookmarkGroups, id)
+    : currentBookmarkGroupId
+
+  // Start with defaults and formData
+  const base = {
+    ...defaults,
+    ...deepCopy(formData),
+    type: sessionType,
+    category: initBookmarkGroupId
+  }
+
+  // Only set default color if no color exists (for new bookmarks)
+  if (!base.color) {
+    base.color = getColorFromCategory(bookmarkGroups, base.category)
+  }
+
+  return base
+}
+
+/**
+ * Common terminal-related defaults
+ */
+export function getTerminalDefaults (store) {
+  return {
+    term: store?.config?.terminalType,
+    displayRaw: false,
+    encode: 'utf-8'
+  }
+}
+
+/**
+ * Common SSH-related defaults
+ */
+export function getSshDefaults () {
+  return {
+    enableSsh: true,
+    runScripts: [{
+      delay: 500,
+      script: ''
+    }]
+  }
+}
+
+/**
+ * Common terminal background defaults
+ */
+export function getTerminalBackgroundDefaults (defaultSetting) {
+  return {
+    terminalBackground: {
+      terminalBackgroundImagePath: defaultSetting.terminalBackgroundImagePath,
+      terminalBackgroundFilterOpacity: defaultSetting.terminalBackgroundFilterOpacity,
+      terminalBackgroundFilterBlur: defaultSetting.terminalBackgroundFilterBlur,
+      terminalBackgroundFilterBrightness: defaultSetting.terminalBackgroundFilterBrightness,
+      terminalBackgroundFilterGrayscale: defaultSetting.terminalBackgroundFilterGrayscale,
+      terminalBackgroundFilterContrast: defaultSetting.terminalBackgroundFilterContrast,
+      terminalBackgroundText: defaultSetting.terminalBackgroundText,
+      terminalBackgroundTextSize: defaultSetting.terminalBackgroundTextSize,
+      terminalBackgroundTextColor: defaultSetting.terminalBackgroundTextColor,
+      terminalBackgroundTextFontFamily: defaultSetting.terminalBackgroundTextFontFamily
+    }
+  }
+}

package/client/components/bookmark-form/common/profile-item.jsx

@@ -0,0 +1,34 @@
+/**
+ * Profile selector component for config-driven forms
+ * Allows selecting from available profiles with filtering
+ */
+import React from 'react'
+import { Form, Select } from 'antd'
+import { formItemLayout } from '../../../common/form-layout'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function ProfileItem ({ store, profileFilter = (d) => d }) {
+  const opts = {
+    options: store.profiles
+      .filter(profileFilter)
+      .map(d => ({
+        label: d.name,
+        value: d.id
+      })),
+    placeholder: e('profiles'),
+    allowClear: true
+  }
+
+  return (
+    <FormItem
+      {...formItemLayout}
+      label={e('profiles')}
+      name='profile'
+      hasFeedback
+    >
+      <Select {...opts} />
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/{proxy.jsx → common/proxy.jsx}

@@ -3,7 +3,7 @@ import {
   Form,
   AutoComplete
 } from 'antd'
-import { formItemLayout } from '../../common/form-layout'
+import { formItemLayout } from '../../../common/form-layout'
 
 const FormItem = Form.Item
 const e = window.translate

package/client/components/bookmark-form/{use-quick-commands.jsx → common/quick-commands.jsx}

@@ -13,7 +13,7 @@ import {
   Space,
   Button
 } from 'antd'
-import { formItemLayout } from '../../common/form-layout'
+import { formItemLayout } from '../../../common/form-layout'
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
 
 const FormItem = Form.Item