@electerm/electerm-react 1.34.30

package/client/components/bookmark-form/encodes.js

@@ -0,0 +1,44 @@
+export default [
+  'utf-8',
+  'gbk',
+  'gb18030',
+  'hz-gb-2312',
+  'big5',
+  'euc-jp',
+  'iso-2022-jp',
+  'shift-jis',
+  'euc-kr',
+  'iso-2022-kr',
+  'utf-16be',
+  'utf-16le',
+  'ibm866',
+  'iso-8859-2',
+  'iso-8859-3',
+  'iso-8859-4',
+  'iso-8859-5',
+  'iso-8859-6',
+  'iso-8859-7',
+  'iso-8859-8',
+  'iso-8859-8i',
+  'iso-8859-10',
+  'iso-8859-13',
+  'iso-8859-14',
+  'iso-8859-15',
+  'iso-8859-16',
+  'koi8-r',
+  'koi8-u',
+  'macintosh',
+  'windows-874',
+  'windows-1250',
+  'windows-1251',
+  'windows-1252',
+  'windows-1253',
+  'windows-1254',
+  'windows-1255',
+  'windows-1256',
+  'windows-1257',
+  'windows-1258',
+  'x-mac-cyrillic',
+  'x-user-defined',
+  'replacement'
+]

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

@@ -0,0 +1,208 @@
+/**
+ * bookmark form
+ */
+import {
+  Input,
+  InputNumber,
+  Radio,
+  TreeSelect,
+  Select,
+  Form
+} from 'antd'
+import {
+  authTypeMap
+} from '../../common/constants'
+import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+import InputAutoFocus from '../common/input-auto-focus'
+import encodes from './encodes'
+import formatBookmarkGroups from './bookmark-group-tree-format'
+import renderRunScripts from './render-delayed-scripts.jsx'
+import './bookmark-form.styl'
+
+const authTypes = Object.keys(authTypeMap).map(k => {
+  return k
+})
+const RadioButton = Radio.Button
+const RadioGroup = Radio.Group
+const FormItem = Form.Item
+const { Option } = Select
+const { prefix } = window
+const e = prefix('form')
+const c = prefix('common')
+const sf = prefix('sftp')
+
+export default function renderCommon (props) {
+  const {
+    autofocustrigger,
+    bookmarkGroups = [],
+    dns,
+    form,
+    onChangeAuthType
+  } = props
+  const tree = formatBookmarkGroups(bookmarkGroups)
+  return (
+    <div>
+      <FormItem
+        {...formItemLayout}
+        label={e('host')}
+        hasFeedback
+        rules={[{
+          max: 520, message: '520 chars max'
+        }, {
+          required: true, message: 'host required'
+        }]}
+        normalize={props.trim}
+      >
+        {
+          dns
+            ? (
+              <div className='dns-section'>
+                ip: {dns}
+                <span
+                  className='color-blue pointer mg1l'
+                  onClick={() => props.useIp(form)}
+                >
+                  {e('use')}
+                </span>
+              </div>
+              )
+            : (
+              <div className='dns-section'>
+                hostname or ip
+              </div>
+              )
+        }
+        <FormItem noStyle name='host'>
+          <InputAutoFocus
+            autofocustrigger={autofocustrigger}
+            selectall='yes'
+            onBlur={props.onBlur}
+            onPaste={e => props.onPaste(e, form)}
+          />
+        </FormItem>
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('username')}
+        hasFeedback
+        name='username'
+        rules={[{
+          max: 128, message: '128 chars max'
+        }]}
+        normalize={props.trim}
+      >
+        <Input />
+      </FormItem>
+      <FormItem
+        {...tailFormItemLayout}
+        className='mg1b'
+        name='authType'
+      >
+        <RadioGroup
+          size='small'
+          onChange={onChangeAuthType}
+          buttonStyle='solid'
+        >
+          {
+            authTypes.map(t => {
+              return (
+                <RadioButton value={t} key={t}>
+                  {e(t)}
+                </RadioButton>
+              )
+            })
+          }
+        </RadioGroup>
+      </FormItem>
+      {props.renderAuth(props)}
+      <FormItem
+        {...formItemLayout}
+        label={e('port')}
+        hasFeedback
+        name='port'
+        rules={[{
+          required: true, message: 'port required'
+        }]}
+      >
+        <InputNumber
+          placeholder={e('port')}
+          min={1}
+          max={65535}
+          step={1}
+        />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={c('bookmarkCategory')}
+        name='category'
+      >
+        <TreeSelect
+          treeData={tree}
+          treeDefaultExpandAll
+          showSearch
+        />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('title')}
+        hasFeedback
+        name='title'
+      >
+        <Input />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('description')}
+        name='description'
+        hasFeedback
+      >
+        <Input.TextArea rows={1} />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        name='setEnv'
+        label='SetEnv'
+      >
+        <Input placeholder='SEC=xxx BEC=xxxx' />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        name='startDirectoryLocal'
+        label={`${e('startDirectory')}:${sf('local')}`}
+      >
+        <Input />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        name='startDirectory'
+        label={`${e('startDirectory')}:${sf('remote')}`}
+      >
+        <Input />
+      </FormItem>
+      {renderRunScripts()}
+      <FormItem
+        {...formItemLayout}
+        key='encode-select'
+        label={e('encode')}
+        name='encode'
+      >
+        <Select
+          showSearch
+        >
+          {
+            encodes.map(k => {
+              return (
+                <Option
+                  value={k}
+                  key={k}
+                >
+                  {k}
+                </Option>
+              )
+            })
+          }
+        </Select>
+      </FormItem>
+    </div>
+  )
+}

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

@@ -0,0 +1,69 @@
+/**
+ * bookmark form
+ */
+import {
+  Tabs
+} from 'antd'
+import { sshTunnelHelpLink } from '../../common/constants'
+import HelpIcon from '../common/help-icon'
+
+const { prefix } = window
+const e = prefix('form')
+const s = prefix('setting')
+const h = prefix('ssh')
+const q = prefix('quickCommands')
+
+export default function renderTabs (props) {
+  const tunnelTag = (
+    <span>
+      {h('sshTunnel')}
+      <HelpIcon
+        link={sshTunnelHelpLink}
+      />
+    </span>
+  )
+  const items = [
+    {
+      key: 'auth',
+      label: e('auth'),
+      forceRender: true,
+      children: props.renderCommon(props)
+    },
+    {
+      key: 'settings',
+      label: s('settings'),
+      forceRender: true,
+      children: (
+        <div>
+          {props.renderEnableSftp()}
+          {props.uis}
+          {props.renderProxy(props)}
+          {props.renderX11()}
+        </div>
+      )
+    },
+    {
+      key: 'quickCommands',
+      label: q('quickCommands'),
+      forceRender: true,
+      children: props.qms
+    },
+    {
+      key: 'tunnel',
+      label: tunnelTag,
+      forceRender: true,
+      children: props.renderSshTunnel(props)
+    },
+    {
+      key: 'connectionHopping',
+      label: e('connectionHopping'),
+      forceRender: true,
+      children: props.renderConnectionHopping(props)
+    }
+  ]
+  return (
+    <Tabs
+      items={items}
+    />
+  )
+}

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

@@ -0,0 +1,159 @@
+/**
+ * bookmark form
+ */
+import { Component } from '../common/react-subx'
+import {
+  Radio
+} from 'antd'
+import {
+  settingMap,
+  connectionMap,
+  terminalSerialType,
+  terminalLocalType,
+  terminalTelnetType,
+  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 createTitle from '../../common/create-title'
+import {
+  LoadingOutlined,
+  BookOutlined
+} from '@ant-design/icons'
+
+const { prefix } = window
+const c = prefix('common')
+const m = prefix('menu')
+const s = prefix('setting')
+const p = prefix('sftp')
+
+export default class BookmarkIndex extends Component {
+  constructor (props) {
+    super(props)
+    let initType = props.formData.type
+    if (initType === terminalTelnetType) {
+      initType = terminalTelnetType
+    } else if (initType === terminalSerialType) {
+      initType = terminalSerialType
+    } else if (initType === terminalLocalType) {
+      initType = terminalLocalType
+    } else {
+      initType = connectionMap.ssh
+    }
+    this.state = {
+      ready: false,
+      bookmarkType: initType
+    }
+  }
+
+  componentDidMount () {
+    this.timer = setTimeout(() => {
+      this.setState({
+        ready: true
+      })
+    }, 200)
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+  }
+
+  static mapper = {
+    [connectionMap.ssh]: SshForm,
+    [connectionMap.telnet]: TelnetForm,
+    [connectionMap.serial]: SerialForm,
+    [connectionMap.local]: LocalForm
+  }
+
+  handleChange = (e) => {
+    this.setState({
+      bookmarkType: e.target.value
+    })
+  }
+
+  renderTypes (bookmarkType, isNew, keys) {
+    if (!isNew) {
+      return null
+    }
+    return (
+      <Radio.Group
+        buttonStyle='solid'
+        size='small'
+        className='mg1l'
+        value={bookmarkType}
+        disabled={!isNew}
+        onChange={this.handleChange}
+      >
+        {
+          keys.map(k => {
+            const v = connectionMap[k]
+            return (
+              <Radio.Button key={v} value={v}>{p(v)}</Radio.Button>
+            )
+          })
+        }
+      </Radio.Group>
+    )
+  }
+
+  renderTitle (formData, isNew) {
+    if (isNew) {
+      return null
+    }
+    return (
+      <b className='mg1x'>
+        {createTitle(formData)}
+      </b>
+    )
+  }
+
+  render () {
+    const { formData } = this.props
+    const {
+      id = ''
+    } = formData
+    const {
+      type
+    } = this.props
+    if (type !== settingMap.bookmarks && type !== settingMap.history) {
+      return null
+    }
+    const { ready } = this.state
+    if (!ready) {
+      return (
+        <div className='pd3 aligncenter'>
+          <LoadingOutlined />
+        </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)
+    // }
+    return (
+      <div className='form-wrap pd1x'>
+        <div className='form-title pd1t pd1x pd2b'>
+          <BookOutlined className='mg1r' />
+          <span>
+            {
+              (!isNew
+                ? m('edit')
+                : s('new')
+              ) + ' ' + c(settingMap.bookmarks)
+            }
+          </span>
+          {this.renderTitle(formData, isNew)}
+          {this.renderTypes(bookmarkType, isNew, keys)}
+        </div>
+        <Form {...this.props} />
+      </div>
+    )
+  }
+}

package/client/components/bookmark-form/local-form-ui.jsx

@@ -0,0 +1,152 @@
+/**
+ * bookmark form
+ */
+
+import { useEffect } from 'react'
+import {
+  Tabs,
+  Input,
+  TreeSelect,
+  Form
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import {
+  newBookmarkIdPrefix,
+  terminalLocalType
+} from '../../common/constants'
+import formatBookmarkGroups from './bookmark-group-tree-format'
+import findBookmarkGroupId from '../../common/find-bookmark-group-id'
+import useSubmit from './use-submit'
+import useUI from './use-ui'
+import useQm from './use-quick-commands'
+import copy from 'json-deep-copy'
+import { defaults } from 'lodash-es'
+import renderRunScripts from './render-delayed-scripts.jsx'
+
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+const c = prefix('common')
+const s = prefix('setting')
+
+export default function LocalFormUi (props) {
+  const [
+    form,
+    handleFinish,
+    submitUi
+  ] = useSubmit(props)
+  useEffect(() => {
+    if (props.formData.id.startsWith(newBookmarkIdPrefix)) {
+      form.setFieldsValue({
+        category: props.currentBookmarkGroupId
+      })
+    }
+  }, [props.currentBookmarkGroupId])
+  const qms = useQm(form, props.formData)
+  const uis = useUI(props)
+  const {
+    id = ''
+  } = props.formData
+  const {
+    bookmarkGroups = [],
+    currentBookmarkGroupId
+  } = props
+  const initBookmarkGroupId = !id.startsWith(newBookmarkIdPrefix)
+    ? findBookmarkGroupId(bookmarkGroups, id)
+    : currentBookmarkGroupId
+  let initialValues = copy(props.formData)
+  const defaultValues = {
+    category: initBookmarkGroupId,
+    term: props.store.config.terminalType,
+    type: terminalLocalType,
+    runScripts: [{}],
+    enableSsh: true
+  }
+  initialValues = defaults(initialValues, defaultValues)
+  function renderCommon () {
+    const {
+      bookmarkGroups = []
+    } = props
+    const tree = formatBookmarkGroups(bookmarkGroups)
+    return (
+      <div className='pd1x'>
+        {renderRunScripts()}
+        <FormItem
+          {...formItemLayout}
+          label={e('title')}
+          name='title'
+          hasFeedback
+        >
+          <Input />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('description')}
+          name='description'
+          hasFeedback
+        >
+          <Input.TextArea rows={1} />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={c('bookmarkCategory')}
+          name='category'
+        >
+          <TreeSelect
+            treeData={tree}
+            treeDefaultExpandAll
+            showSearch
+          />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='type'
+          name='type'
+          className='hide'
+        >
+          <Input />
+        </FormItem>
+      </div>
+    )
+  }
+
+  function renderTabs () {
+    const items = [
+      {
+        key: 'auth',
+        label: e('auth'),
+        forceRender: true,
+        children: renderCommon()
+      },
+      {
+        key: 'settings',
+        label: s('settings'),
+        forceRender: true,
+        children: uis
+      },
+      {
+        key: 'quickCommands',
+        forceRender: true,
+        label: e('quickCommands'),
+        children: qms
+      }
+    ]
+    return (
+      <Tabs
+        items={items}
+      />
+    )
+  }
+
+  return (
+    <Form
+      form={form}
+      onFinish={handleFinish}
+      initialValues={initialValues}
+      name='local-form'
+    >
+      {renderTabs()}
+      {submitUi}
+    </Form>
+  )
+}

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

@@ -0,0 +1,16 @@
+/**
+ * bookmark form
+ */
+import BookmarkForm from './ssh-form'
+import LocalFormUi from './local-form-ui'
+
+export default class LocalForm extends BookmarkForm {
+  render () {
+    return (
+      <LocalFormUi
+        {...this.props}
+        {...this.getProps()}
+      />
+    )
+  }
+}

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

@@ -0,0 +1,49 @@
+import {
+  Input,
+  Form,
+  AutoComplete
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+
+export default function renderProxy (props) {
+  const proxyTree = props.bookmarks
+    .reduce((prev, current) => {
+      const { proxy } = current
+      if (proxy && !prev[proxy]) {
+        prev[proxy] = 1
+      }
+      return prev
+    }, {})
+  const opts = {
+    options: Object.keys(proxyTree)
+      .map(d => {
+        return {
+          label: d,
+          value: d
+        }
+      }),
+    placeholder: 'socks5://127.0.0.1:1080',
+    allowClear: true
+  }
+  return (
+    <FormItem
+      {...formItemLayout}
+      label={e('proxy')}
+      hasFeedback
+      name='proxy'
+      rules={[{
+        max: 1024, message: '1024 chars max'
+      }]}
+    >
+      <AutoComplete
+        {...opts}
+      >
+        <Input />
+      </AutoComplete>
+    </FormItem>
+  )
+}