@electerm/electerm-react 1.100.56 → 1.101.10

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

@@ -0,0 +1,44 @@
+import { formItemLayout } from '../../../common/form-layout.js'
+import { terminalVncType } from '../../../common/constants.js'
+import { createBaseInitValues } from '../common/init-values.js'
+import { isEmpty } from 'lodash-es'
+import { commonFields, connectionHoppingTab } from './common-fields.js'
+
+const e = window.translate
+
+const vncConfig = {
+  key: 'vnc',
+  type: terminalVncType,
+  initValues: (props) => {
+    return createBaseInitValues(props, terminalVncType, {
+      port: 5900,
+      viewOnly: false,
+      scaleViewport: true,
+      connectionHoppings: []
+    })
+  },
+  layout: formItemLayout,
+  tabs: () => [
+    {
+      key: 'auth',
+      label: e('auth'),
+      fields: [
+        commonFields.category,
+        commonFields.colorTitle,
+        { 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: 'scaleViewport', label: e('scaleViewport'), valuePropName: 'checked' },
+        { type: 'profileItem', name: '__profile__', label: '', profileFilter: d => !isEmpty(d.vnc) },
+        commonFields.username,
+        commonFields.password,
+        commonFields.description,
+        commonFields.proxy,
+        commonFields.type
+      ]
+    },
+    connectionHoppingTab()
+  ]
+}
+
+export default vncConfig

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

@@ -0,0 +1,45 @@
+import { formItemLayout } from '../../../common/form-layout.js'
+import { terminalWebType } from '../../../common/constants.js'
+import { createBaseInitValues } from '../common/init-values.js'
+import { commonFields } from './common-fields.js'
+
+const e = window.translate
+
+const webConfig = {
+  key: 'web',
+  type: terminalWebType,
+  initValues: (props) => {
+    return createBaseInitValues(props, terminalWebType)
+  },
+  layout: formItemLayout,
+  tabs: () => [
+    {
+      key: 'main',
+      label: e('auth'),
+      fields: [
+        commonFields.category,
+        commonFields.colorTitle,
+        {
+          type: 'input',
+          name: 'url',
+          label: e('URL'),
+          rules: [
+            { required: true, message: e('Please input URL') },
+            {
+              validator: (_, value) =>
+                /^[a-z\d.+-]+:\/\/[^\s/$.?#].[^\s]*$/i.test(value)
+                  ? Promise.resolve()
+                  : Promise.reject(new Error(e('URL must start with http:// or https://')))
+            }
+          ]
+        },
+        commonFields.description,
+        { type: 'input', name: 'useragent', label: e('useragent') },
+        { type: 'switch', name: 'hideAddressBar', label: 'hideAddressBar', valuePropName: 'checked' },
+        commonFields.type
+      ]
+    }
+  ]
+}
+
+export default webConfig

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

@@ -0,0 +1,328 @@
+/**
+ * Generic form renderer driven by config (flattened path)
+ */
+import React, { useEffect, useState, useRef } from 'react'
+import { Form, Tabs, message } from 'antd'
+import { renderFormItem } from './common/fields'
+import SubmitButtons from './common/submit-buttons'
+import { uniq } from 'lodash-es'
+import {
+  authTypeMap,
+  settingMap,
+  newBookmarkIdPrefix,
+  defaultBookmarkGroupId
+} from '../../common/constants'
+import copy from 'json-deep-copy'
+import generate from '../../common/uid'
+import runIdle from '../../common/run-idle'
+import getInitItem from '../../common/init-setting-item'
+import testCon from '../../common/test-connection'
+import newTerm from '../../common/new-terminal'
+import { isValidIP } from '../../common/is-ip'
+import { action as manateAction } from 'manate'
+
+export default function FormRenderer ({ config, props }) {
+  const [form] = Form.useForm()
+  const [ips, setIps] = useState([])
+  const [authType, setAuthType] = useState(props.formData.authType || authTypeMap.password)
+  const [testing, setTesting] = useState(false)
+  const action = useRef('submit')
+
+  useEffect(() => {
+    const init = config.initValues(props)
+    form.resetFields()
+    form.setFieldsValue(init)
+  }, [
+    props.currentBookmarkGroupId,
+    props.formData?.id,
+    config.key
+  ])
+
+  const updateBookmarkGroups = manateAction((bookmark, categoryId) => {
+    const {
+      bookmarkGroups
+    } = window.store
+    let index = bookmarkGroups.findIndex(
+      bg => bg.id === categoryId
+    )
+    if (index < 0) {
+      index = bookmarkGroups.findIndex(
+        bg => bg.id === defaultBookmarkGroupId
+      )
+    }
+    const bid = bookmark.id
+    const bg = bookmarkGroups[index]
+    if (!bg.bookmarkIds.includes(bid)) {
+      bg.bookmarkIds.unshift(bid)
+    }
+    bg.bookmarkIds = uniq(bg.bookmarkIds)
+    bookmarkGroups.forEach((bg, i) => {
+      if (i === index) {
+        return bg
+      }
+      bg.bookmarkIds = bg.bookmarkIds.filter(
+        g => g !== bid
+      )
+      return bg
+    })
+    message.success('OK', 3)
+  })
+
+  const setNewItem = (settingItem = getInitItem([], settingMap.bookmarks)) => {
+    const { store } = props
+    store.setSettingItem(settingItem)
+  }
+
+  const submit = (evt, item, type = props.type) => {
+    if (item.host) {
+      item.host = item.host.trim()
+    }
+    const obj = item
+    if (obj.connectionHoppings?.length) {
+      obj.hasHopping = true
+    }
+    const { addItem, editItem } = props.store
+    const categoryId = obj.category
+    delete obj.category
+    if (!obj.id.startsWith(newBookmarkIdPrefix)) {
+      const tar = copy(obj)
+      delete tar.id
+      runIdle(() => {
+        editItem(obj.id, tar, settingMap.bookmarks)
+      })
+      updateBookmarkGroups(
+        obj,
+        categoryId
+      )
+      if (evt === 'saveAndCreateNew') {
+        setNewItem()
+      }
+    } else {
+      obj.id = generate()
+      runIdle(() => {
+        addItem(obj, settingMap.bookmarks)
+      })
+      updateBookmarkGroups(
+        obj,
+        categoryId
+      )
+      setNewItem(evt === 'saveAndCreateNew'
+        ? getInitItem([], settingMap.bookmarks)
+        : obj
+      )
+    }
+  }
+
+  const test = async (update) => {
+    let options = copy({
+      ...props.formData,
+      ...update
+    })
+    let msg = ''
+    setTesting(true)
+    options = window.store.applyProfileToTabs(options)
+    const res = await testCon(options)
+      .then(r => r)
+      .catch((e) => {
+        msg = e.message
+        return false
+      })
+    setTesting(false)
+    if (res) {
+      message.success('connection ok')
+    } else {
+      const err = 'connection fails' +
+        (msg ? `: ${msg}` : '')
+      message.error(err)
+    }
+  }
+
+  const onSelectProxy = (proxy, form) => {
+    const obj = Object.keys(proxy)
+      .reduce((prev, c) => {
+        return {
+          ...prev,
+          [`proxy.${c}`]: proxy[c]
+        }
+      }, {})
+    form.setFieldsValue(obj)
+  }
+
+  const handleSubmit = async (evt, res, isTest = false) => {
+    if (res.enableSsh === false && res.enableSftp === false) {
+      return message.warning('SSH and SFTP all disabled')
+    }
+    const obj = {
+      ...props.formData,
+      ...res
+    }
+    if (isTest) {
+      return test(obj)
+    }
+    if (evt && evt !== 'connect') {
+      submit(evt, obj)
+    }
+    if (evt !== 'save' && evt !== 'saveAndCreateNew') {
+      window.store.currentLayoutBatch = window.openTabBatch || 0
+      props.store.addTab({
+        ...copy(obj),
+        ...newTerm(true, true),
+        batch: window.openTabBatch ?? window.store.currentLayoutBatch
+      })
+      delete window.openTabBatch
+      props.hide()
+    }
+  }
+
+  // Button handlers - exactly like original use-form-funcs
+  const save = () => {
+    action.current = 'save'
+    form.submit()
+  }
+
+  const saveAndCreateNew = () => {
+    action.current = 'saveAndCreateNew'
+    form.submit()
+  }
+
+  const testConnection = () => {
+    action.current = 'testConnection'
+    form.submit()
+  }
+
+  const connect = () => {
+    action.current = 'connect'
+    form.submit()
+  }
+
+  const handleFinish = (res) => {
+    if (action.current === 'save') {
+      handleSubmit('save', res, false)
+    } else if (action.current === 'saveAndCreateNew') {
+      handleSubmit('saveAndCreateNew', res, false)
+    } else if (action.current === 'connect') {
+      handleSubmit('connect', res, false)
+    } else if (action.current === 'testConnection') {
+      handleSubmit('test', res, true)
+    } else {
+      handleSubmit('submit', res, false)
+    }
+    action.current = 'submit'
+  }
+
+  const trim = (v) => {
+    return (v || '').replace(/^\s+|\s+$/g, '')
+  }
+  const useIp = (form, ip) => {
+    form.setFieldsValue({
+      host: ip
+    })
+  }
+  const onPaste = (e, form) => {
+    const txt = e.clipboardData.getData('Text')
+    // support name:passsword@host:23
+    const arr = txt.match(/([^:@]+)(:[^:@]+)?@([^:@]+)(:\d+)?/)
+    if (!arr) {
+      return
+    }
+    const username = arr[1]
+    const password = arr[2] ? arr[2].slice(1) : ''
+    const host = arr[3]
+    const port = arr[4] ? arr[4].slice(1) : ''
+    const obj = {
+      username,
+      host
+    }
+    if (password) {
+      obj.password = password
+    }
+    if (port) {
+      obj.port = port
+    }
+    setTimeout(() => {
+      form.setFieldsValue(obj)
+    }, 20)
+  }
+
+  const onBlur = async (e) => {
+    const value = e.target.value.trim()
+    const { type } = props
+    if (
+      type !== settingMap.bookmarks ||
+      !value ||
+      isValidIP(value)
+    ) {
+      return
+    }
+    const ips = await window.pre.runGlobalAsync('lookup', value)
+      .catch(err => {
+        log.debug(err)
+      })
+    setIps(ips || [])
+  }
+
+  function onChangeAuthType (e) {
+    const newAuthType = e.target.value
+    setAuthType(newAuthType)
+  }
+
+  // Context props for specialized components
+  const ctxProps = {
+    ...props,
+    form,
+    authType,
+    ips,
+    testing,
+    loaddingSerials: props.loaddingSerials || false,
+    trim,
+    onSelectProxy,
+    onChangeAuthType,
+    handleBlur: onBlur,
+    onPaste,
+    useIp
+  }
+
+  const initialValues = config.initValues(props)
+  const tabs = typeof config.tabs === 'function' ? (config.tabs() || []) : (config.tabs || [])
+  let content = null
+
+  if (tabs.length <= 1) {
+    const fields = tabs.length === 1
+      ? (tabs[0].fields || [])
+      : (config.fields || [])
+    content = (
+      <div className='pd1x'>
+        {fields.map((f, index) => renderFormItem(f, config.layout, form, ctxProps, index))}
+      </div>
+    )
+  } else {
+    const items = (tabs || []).map(tab => ({
+      key: tab.key,
+      label: tab.label,
+      forceRender: true,
+      children: (
+        <div className='pd1x'>
+          {(tab.fields || []).map((f, index) => renderFormItem(f, config.layout, form, ctxProps, index))}
+        </div>
+      )
+    }))
+    content = <Tabs items={items} />
+  }
+  const formName = `${config.key}-form`
+  return (
+    <Form
+      form={form}
+      onFinish={handleFinish}
+      initialValues={initialValues}
+      name={formName}
+    >
+      {content}
+      <SubmitButtons
+        onSave={save}
+        onSaveAndCreateNew={saveAndCreateNew}
+        onConnect={connect}
+        onTestConnection={testConnection}
+      />
+    </Form>
+  )
+}

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

@@ -1,10 +1,8 @@
 /**
- * bookmark form
+ * Config-driven bookmark form (drop-in replacement)
  */
 import { PureComponent } from 'react'
-import {
-  Radio
-} from 'antd'
+import { Radio } from 'antd'
 import {
   settingMap,
   connectionMap,
@@ -17,78 +15,46 @@ import {
   terminalFtpType,
   newBookmarkIdPrefix
 } from '../../common/constants'
-import SshForm from './ssh-form'
-import SerialForm from './serial-form'
-import LocalForm from './local-form'
-import TelnetForm from './telnet-form'
-import WebForm from './web-form'
-import RdpForm from './rdp-form'
-import VncForm from './vnc-form'
-import FtpForm from './ftp-form'
 import { createTitleWithTag } from '../../common/create-title'
-import {
-  LoadingOutlined,
-  BookOutlined
-} from '@ant-design/icons'
+import { LoadingOutlined, BookOutlined } from '@ant-design/icons'
+import sessionConfig from './config/session-config'
+import renderForm from './render-form'
+import './bookmark-form.styl'
 
 const e = window.translate
 
-export default class BookmarkIndex extends PureComponent {
+export default class BookmarkIndex2 extends PureComponent {
   constructor (props) {
     super(props)
     let initType = props.formData.type
-    if (
-      ![
-        terminalTelnetType,
-        terminalWebType,
-        terminalLocalType,
-        terminalSerialType,
-        terminalRdpType,
-        terminalVncType,
-        terminalFtpType
-      ].includes(initType)
-    ) {
+    if (![
+      terminalTelnetType,
+      terminalWebType,
+      terminalLocalType,
+      terminalSerialType,
+      terminalRdpType,
+      terminalVncType,
+      terminalFtpType
+    ].includes(initType)) {
       initType = connectionMap.ssh
     }
-    this.state = {
-      ready: false,
-      bookmarkType: initType
-    }
+    this.state = { ready: false, bookmarkType: initType }
   }
 
   componentDidMount () {
-    this.timer = setTimeout(() => {
-      this.setState({
-        ready: true
-      })
-    }, 50)
+    this.timer = setTimeout(() => this.setState({ ready: true }), 75)
   }
 
   componentWillUnmount () {
     clearTimeout(this.timer)
   }
 
-  static mapper = {
-    [connectionMap.ssh]: SshForm,
-    [connectionMap.telnet]: TelnetForm,
-    [connectionMap.serial]: SerialForm,
-    [connectionMap.local]: LocalForm,
-    [connectionMap.web]: WebForm,
-    [connectionMap.rdp]: RdpForm,
-    [connectionMap.vnc]: VncForm,
-    [connectionMap.ftp]: FtpForm
-  }
-
   handleChange = (e) => {
-    this.setState({
-      bookmarkType: e.target.value
-    })
+    this.setState({ bookmarkType: e.target.value })
   }
 
   renderTypes (bookmarkType, isNew, keys) {
-    if (!isNew) {
-      return null
-    }
+    if (!isNew) return null
     return (
       <Radio.Group
         buttonStyle='solid'
@@ -98,23 +64,16 @@ export default class BookmarkIndex extends PureComponent {
         disabled={!isNew}
         onChange={this.handleChange}
       >
-        {
-          keys.map(k => {
-            const v = connectionMap[k]
-            const txt = v === 'ssh' ? 'Ssh/Sftp' : e(v)
-            return (
-              <Radio.Button key={v} value={v}>{txt}</Radio.Button>
-            )
-          })
-        }
+        {keys.map(v => {
+          const txt = v === 'ssh' ? 'Ssh/Sftp' : e(v)
+          return (<Radio.Button key={v} value={v}>{txt}</Radio.Button>)
+        })}
       </Radio.Group>
     )
   }
 
   renderTitle (formData, isNew) {
-    if (isNew) {
-      return null
-    }
+    if (isNew) return null
     return (
       <b className='mg1x'>
         {createTitleWithTag(formData)}
@@ -124,16 +83,10 @@ export default class BookmarkIndex extends PureComponent {
 
   render () {
     const { formData } = this.props
-    const {
-      id = ''
-    } = formData
-    const {
-      type
-    } = this.props
-    if (type !== settingMap.bookmarks) {
-      return null
-    }
-    const { ready } = this.state
+    const { id = '' } = formData
+    const { type } = this.props
+    if (type !== settingMap.bookmarks) return null
+    const { ready, bookmarkType } = this.state
     if (!ready) {
       return (
         <div className='pd3 aligncenter'>
@@ -141,31 +94,19 @@ export default class BookmarkIndex extends PureComponent {
         </div>
       )
     }
-    const {
-      bookmarkType
-    } = this.state
-    const Form = BookmarkIndex.mapper[bookmarkType]
     const isNew = id.startsWith(newBookmarkIdPrefix)
-    const keys = Object.keys(connectionMap)
-    // if (isWin) {
-    //   keys = keys.filter(k => k !== connectionMap.serial)
-    // }
+    const keys = Object.keys(sessionConfig)
     return (
       <div className='form-wrap pd1x'>
         <div className='form-title pd1t pd1x pd2b'>
           <BookOutlined className='mg1r' />
           <span>
-            {
-              (!isNew
-                ? e('edit')
-                : e('new')
-              ) + ' ' + e(settingMap.bookmarks)
-            }
+            {((!isNew ? e('edit') : e('new')) + ' ' + e(settingMap.bookmarks))}
           </span>
           {this.renderTitle(formData, isNew)}
           {this.renderTypes(bookmarkType, isNew, keys)}
         </div>
-        <Form {...this.props} />
+        {renderForm(bookmarkType, this.props)}
       </div>
     )
   }

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

@@ -0,0 +1,11 @@
+/**
+ * Render proper form according to session config
+ */
+import sessionConfig from './config/session-config'
+import { connectionMap } from '../../common/constants'
+import FormRenderer from './form-renderer'
+
+export default function renderForm (type, props) {
+  const conf = sessionConfig[type] || sessionConfig[connectionMap.ssh]
+  return <FormRenderer config={conf} props={props} />
+}

package/client/components/common/password.jsx

@@ -49,25 +49,34 @@ export default forwardRef(function Password (props, ref) {
     }
   }, [props.onBlur])
 
-  // Caps lock indicator icon
-  const capsLockIcon = isCapsLockOn
-    ? (
-      <Tag
-        color='red'
-      >
-        A
-      </Tag>
-      )
-    : null
+  // Keep addonBefore as-is from props; must be null when caps lock is off
+  const addonBefore = props.addonBefore ?? null
 
-  // Merge addonBefore with caps lock indicator
-  const addonBefore = capsLockIcon || props.addonBefore || null
+  // Show caps lock indicator inside prefix to avoid remounting the input wrapper
+  let capsPrefix = null
+  if (isCapsLockOn) {
+    capsPrefix = (
+      <Tag color='orange' style={{ marginRight: 4 }}>CAPS</Tag>
+    )
+  }
+
+  // Merge any existing prefix from props with our caps indicator
+  let prefix = capsPrefix
+  if (props.prefix) {
+    prefix = (
+      <>
+        {capsPrefix}
+        {props.prefix}
+      </>
+    )
+  }
 
   return (
     <Input.Password
       {...props}
       ref={ref}
       addonBefore={addonBefore}
+      prefix={prefix}
       onKeyDown={handleKeyEvent}
       onKeyUp={handleKeyEvent}
       onFocus={handleFocus}

package/client/components/footer/footer-entry.jsx

@@ -6,7 +6,7 @@ import { InfoCircleOutlined } from '@ant-design/icons'
 import './footer.styl'
 import { statusMap } from '../../common/constants'
 import BatchInput from './batch-input'
-import encodes from '../bookmark-form/encodes'
+import encodes from '../bookmark-form/common/encodes'
 import { refs } from '../common/ref'
 import Qm from '../quick-commands/quick-commands-select'
 import AIIcon from '../icons/ai-icon'