@electerm/electerm-react 1.34.30

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

@@ -0,0 +1,116 @@
+import {
+  Form,
+  InputNumber,
+  Radio,
+  Space,
+  Button,
+  Tooltip
+} from 'antd'
+import { MinusCircleOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
+import { formItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+const FormList = Form.List
+const {
+  Button: RadioButton,
+  Group: RadioGroup
+} = Radio
+const { prefix } = window
+const e = prefix('ssh')
+
+export default function renderSshTunnel () {
+  function renderItem (field, i, add, remove) {
+    return (
+      <Space
+        align='center'
+        key={field.key}
+      >
+        <FormItem
+          label={e('sshTunnel')}
+          name={[field.name, 'sshTunnel']}
+          required
+        >
+          <RadioGroup>
+            <RadioButton
+              value='forwardRemoteToLocal'
+            >
+              <Tooltip title={e('remoteToLocal')}>
+                <span>R→L <QuestionCircleOutlined /></span>
+              </Tooltip>
+            </RadioButton>
+            <RadioButton
+              value='forwardLocalToRemote'
+            >
+              <Tooltip title={e('localToRemote')}>
+                <span>L→R <QuestionCircleOutlined /></span>
+              </Tooltip>
+            </RadioButton>
+          </RadioGroup>
+        </FormItem>
+        <FormItem
+          label=''
+          name={[field.name, 'sshTunnelRemotePort']}
+          required
+        >
+          <InputNumber
+            min={1}
+            max={65535}
+            addonBefore={e('remotePort')}
+            className='compact-input'
+          />
+        </FormItem>
+        <FormItem
+          label=''
+          name={[field.name, 'sshTunnelLocalPort']}
+          required
+          className='mg2x'
+        >
+          <InputNumber
+            min={1}
+            max={65535}
+            addonBefore={e('localPort')}
+            className='compact-input'
+          />
+        </FormItem>
+        <Button
+          icon={<MinusCircleOutlined />}
+          onClick={() => remove(field.name)}
+          className='mg24b'
+        />
+      </Space>
+    )
+  }
+
+  return [
+    <FormList
+      {...formItemLayout}
+      label={e('sshTunnel')}
+      name='sshTunnels'
+      key='sshTunnels'
+    >
+      {
+        (fields, { add, remove }, { errors }) => {
+          return (
+            <div>
+              {
+                fields.map((field, i) => {
+                  return renderItem(field, i, add, remove)
+                })
+              }
+              <FormItem>
+                <Button
+                  type='dashed'
+                  onClick={() => add()}
+                  block
+                  icon={<PlusOutlined />}
+                >
+                  {e('sshTunnel')}
+                </Button>
+              </FormItem>
+            </div>
+          )
+        }
+      }
+    </FormList>
+  ]
+}

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

@@ -0,0 +1,311 @@
+/**
+ * bookmark form
+ */
+
+import { useEffect } from 'react'
+import { ReloadOutlined } from '@ant-design/icons'
+import {
+  Tabs,
+  Spin,
+  Input,
+  Select,
+  Switch,
+  AutoComplete,
+  Form,
+  TreeSelect
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import parseInt10 from '../../common/parse-int10'
+import {
+  commonBaudRates,
+  commonDataBits,
+  commonStopBits,
+  commonParities,
+  terminalSerialType,
+  newBookmarkIdPrefix
+} from '../../common/constants'
+import formatBookmarkGroups from './bookmark-group-tree-format'
+import defaultSettings from '../../../app/common/default-setting'
+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'
+
+const FormItem = Form.Item
+const { Option } = Select
+const { prefix } = window
+const e = prefix('form')
+const c = prefix('common')
+const s = prefix('setting')
+const m = prefix('menu')
+
+export default function SerialFormUi (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 = {
+    baudRate: 9600,
+    dataBits: 8,
+    lock: true,
+    stopBits: 1,
+    parity: 'none',
+    rtscts: false,
+    xon: false,
+    xoff: false,
+    xany: false,
+    type: terminalSerialType,
+    term: defaultSettings.terminalType,
+    category: initBookmarkGroupId,
+    runScripts: [{}],
+    ignoreKeyboardInteractive: false
+  }
+  initialValues = defaults(initialValues, defaultValues)
+  function renderCommon () {
+    const {
+      bookmarkGroups = [],
+      serials = [],
+      loaddingSerials
+    } = props
+    const tree = formatBookmarkGroups(bookmarkGroups)
+    return (
+      <div className='pd1x'>
+        <FormItem
+          {...formItemLayout}
+          label='path'
+          rules={[{
+            required: true, message: 'path required'
+          }]}
+          normalize={props.trim}
+        >
+          <FormItem noStyle name='path'>
+            <AutoComplete
+              options={serials.map(d => {
+                return {
+                  value: d.path
+                }
+              })}
+            />
+          </FormItem>
+          <Spin spinning={loaddingSerials}>
+            <span onClick={props.store.handleGetSerials}>
+              <ReloadOutlined /> {m('reload')} serials
+            </span>
+          </Spin>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='baudRate'
+          name='baudRate'
+          normalize={parseInt10}
+        >
+          <AutoComplete
+            options={commonBaudRates.map(d => {
+              return {
+                value: d + ''
+              }
+            })}
+          />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='dataBits'
+          name='dataBits'
+          normalize={parseInt10}
+        >
+          <Select>
+            {
+              commonDataBits.map(s => {
+                return (
+                  <Option
+                    value={s}
+                    key={s}
+                  >
+                    {s}
+                  </Option>
+                )
+              })
+            }
+          </Select>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='stopBits'
+          name='stopBits'
+          normalize={parseInt}
+        >
+          <Select>
+            {
+              commonStopBits.map(s => {
+                return (
+                  <Option
+                    value={s}
+                    key={s}
+                  >
+                    {s}
+                  </Option>
+                )
+              })
+            }
+          </Select>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='parity'
+          name='parity'
+        >
+          <Select>
+            {
+              commonParities.map(s => {
+                return (
+                  <Option
+                    value={s}
+                    key={s}
+                  >
+                    {s}
+                  </Option>
+                )
+              })
+            }
+          </Select>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='lock'
+          name='lock'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='rtscts'
+          name='rtscts'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='xon'
+          name='xon'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='xoff'
+          name='xoff'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='xany'
+          name='xany'
+          valuePropName='checked'
+        >
+          <Switch />
+        </FormItem>
+        <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={e('type')}
+          name='type'
+          className='hide'
+        >
+          <Input />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={c('bookmarkCategory')}
+          name='category'
+        >
+          <TreeSelect
+            treeData={tree}
+            treeDefaultExpandAll
+            showSearch
+          />
+        </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',
+        label: e('quickCommands'),
+        forceRender: true,
+        children: qms
+      }
+    ]
+    return (
+      <Tabs items={items} />
+    )
+  }
+
+  return (
+    <Form
+      form={form}
+      onFinish={handleFinish}
+      initialValues={initialValues}
+      name='serial-form'
+    >
+      {renderTabs()}
+      {submitUi}
+    </Form>
+  )
+}

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

@@ -0,0 +1,20 @@
+/**
+ * bookmark form
+ */
+import BookmarkForm from './ssh-form'
+import SerialFormUi from './serial-form-ui'
+
+export default class SerialForm extends BookmarkForm {
+  componentDidMount () {
+    this.props.store.handleGetSerials()
+  }
+
+  render () {
+    return (
+      <SerialFormUi
+        {...this.props}
+        {...this.getProps()}
+      />
+    )
+  }
+}

package/client/components/bookmark-form/sftp-enable.jsx

@@ -0,0 +1,33 @@
+import {
+  Form,
+  Switch
+} from 'antd'
+
+import { formItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+
+export default function renderEnableSftp () {
+  return [
+    <FormItem
+      {...formItemLayout}
+      label='SSH'
+      name='enableSsh'
+      key='ssh'
+      valuePropName='checked'
+    >
+      <Switch />
+    </FormItem>,
+    <FormItem
+      {...formItemLayout}
+      label={e('ignoreKeyboardInteractive')}
+      name='ignoreKeyboardInteractive'
+      key='ignoreKeyboardInteractive'
+      valuePropName='checked'
+    >
+      <Switch />
+    </FormItem>
+  ]
+}

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

@@ -0,0 +1,100 @@
+/**
+ * bookmark form
+ */
+import { useState, useEffect } from 'react'
+import {
+  Form
+} from 'antd'
+import {
+  authTypeMap,
+  newBookmarkIdPrefix,
+  defaultEnvLang
+} from '../../common/constants'
+import encodes from './encodes'
+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 { defaultsDeep } from 'lodash-es'
+import renderTabs from './form-tabs'
+import renderCommon from './form-ssh-common'
+import renderEnableSftp from './sftp-enable'
+import renderProxy from './proxy'
+import renderX11 from './x11'
+import renderAuth from './render-auth-ssh'
+import renderSshTunnel from './render-ssh-tunnel'
+import renderConnectionHopping from './render-connection-hopping'
+import './bookmark-form.styl'
+
+export default function BookmarkFormUI (props) {
+  const [
+    form,
+    handleFinish,
+    submitUi
+  ] = useSubmit(props)
+  useEffect(() => {
+    if ((props.formData.id || '').startsWith(newBookmarkIdPrefix)) {
+      form.setFieldsValue({
+        category: props.currentBookmarkGroupId
+      })
+    }
+  }, [props.currentBookmarkGroupId])
+  const [authType, setAuthType] = useState(props.formData.authType || authTypeMap.password)
+  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 = {
+    port: 22,
+    authType: authTypeMap.password,
+    id: '',
+    term: props.store.config.terminalType,
+    encode: encodes[0],
+    envLang: defaultEnvLang,
+    enableSsh: true,
+    sshTunnels: [{}],
+    runScripts: [{}],
+    category: initBookmarkGroupId,
+    connectionHoppings: []
+  }
+  initialValues = defaultsDeep(initialValues, defaultValues)
+  function onChangeAuthType (e) {
+    setAuthType(e.target.value)
+  }
+  const tprops = {
+    ...props,
+    uis,
+    qms,
+    onChangeAuthType,
+    form,
+    authType,
+    renderCommon,
+    renderEnableSftp,
+    renderProxy,
+    renderX11,
+    renderAuth,
+    renderSshTunnel,
+    renderConnectionHopping
+  }
+  return (
+    <Form
+      form={form}
+      name='ssh-form'
+      onFinish={handleFinish}
+      initialValues={initialValues}
+    >
+      {renderTabs(tprops)}
+      {submitUi}
+    </Form>
+  )
+}