@electerm/electerm-react 1.34.30

package/client/components/bookmark-form/quick-command-list.jsx

@@ -0,0 +1,31 @@
+/**
+ * quick command list
+ */
+
+import { memo } from 'react'
+import QmItem from './quick-command'
+
+export default memo(function QMList (props) {
+  const { quickCommands, form } = this.props
+  return (
+    <div className='pd3b mg3b'>
+      <QmItem
+        form={form}
+        item={{}}
+      />
+      {
+        quickCommands.map((item, i) => {
+          const k = 'qmitem' + i
+          return (
+            <QmItem
+              form={this.props.form}
+              item={item}
+              key={k}
+              i={i}
+            />
+          )
+        })
+      }
+    </div>
+  )
+})

package/client/components/bookmark-form/quick-command.jsx

@@ -0,0 +1,228 @@
+/**
+ * quick command list
+ */
+
+import { PureComponent } from 'react'
+import { CheckOutlined, CloseCircleOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons'
+import {
+  Input,
+  Col,
+  Row,
+  message,
+  Switch,
+  Tooltip,
+  Space
+} from 'antd'
+import { settingMap } from '../../common/constants'
+import generate from '../../common/uid'
+import eq from 'fast-deep-equal'
+
+const InputGroup = Space.Compact
+const { prefix } = window
+const t = prefix('quickCommands')
+
+export default class QuickCommandItem extends PureComponent {
+  constructor (props) {
+    super(props)
+    this.state = {
+      edit: !props.item.id,
+      item: props.item || {}
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (!eq(this.props.item, prevProps.item)) {
+      this.setState({
+        item: this.props.item
+      })
+    }
+  }
+
+  handleSubmit = () => {
+    const {
+      name, command, id, inputOnly
+    } = this.state.item
+    if (!name) {
+      return message.warning('name required')
+    } else if (!command) {
+      return message.warning('command required')
+    }
+    const quickCommands = this.props.form.getFieldValue(settingMap.quickCommands) || []
+    if (id) {
+      const qm = quickCommands.find(d => d.id === id)
+      if (qm) {
+        Object.assign(qm, {
+          name, command, inputOnly
+        })
+      }
+      this.setState({
+        edit: false
+      })
+    } else {
+      quickCommands.unshift({
+        name,
+        command,
+        inputOnly,
+        id: generate()
+      })
+      this.setState({
+        item: {}
+      })
+    }
+    this.props.form.setFieldsValue({
+      quickCommands
+    })
+  }
+
+  handleDel = () => {
+    let quickCommands = this.props.form.getFieldValue(settingMap.quickCommands) || []
+    quickCommands = quickCommands.filter(d => {
+      return d.id !== this.state.item.id
+    })
+    this.props.form.setFieldsValue({
+      quickCommands
+    })
+  }
+
+  handleEdit = () => {
+    this.setState({
+      edit: true
+    })
+  }
+
+  handleCancel = () => {
+    this.setState({
+      item: this.props.item,
+      edit: false
+    })
+  }
+
+  renderNew = (item) => {
+    return <CheckOutlined className='pointer mg1l' onClick={this.handleSubmit} />
+  }
+
+  renderIcons = (item) => {
+    if (!item.id) {
+      return this.renderNew(item)
+    }
+    return (
+      <span>
+        <CheckOutlined className='pointer mg1x' onClick={this.handleSubmit} />
+        <CloseOutlined className='pointer' onClick={this.handleCancel} />
+      </span>
+    )
+  }
+
+  handleChangeName = e => {
+    const v = e.target.value
+    this.setState({
+      item: {
+        ...this.state.item,
+        name: v
+      }
+    })
+  }
+
+  handleChangeCommand = e => {
+    const v = e.target.value
+    this.setState(old => {
+      return {
+        item: {
+          ...old.item,
+          command: v
+        }
+      }
+    })
+  }
+
+  handleChangeInputOnly = v => {
+    this.setState(old => {
+      return {
+        item: {
+          ...old.item,
+          inputOnly: v
+        }
+      }
+    })
+  }
+
+  renderForm = (item = this.state.item) => {
+    return (
+      <Row className='mg1t'>
+        <Col span={15}>
+          <InputGroup>
+            <Input
+              value={item.name}
+              onChange={this.handleChangeName}
+              className='width-40'
+              title={item.name}
+              placeholder={t('quickCommandName')}
+            />
+            <Input
+              value={item.command}
+              onChange={this.handleChangeCommand}
+              className='width-60'
+              placeholder={t('quickCommand')}
+              title={item.command}
+            />
+          </InputGroup>
+        </Col>
+        <Col span={3}>
+          <Tooltip title={t('inputOnly')}>
+            <Switch
+              checked={!!item.inputOnly}
+              onChange={this.handleChangeInputOnly}
+            />
+          </Tooltip>
+        </Col>
+        <Col span={6}>
+          {this.renderIcons(item)}
+        </Col>
+      </Row>
+    )
+  }
+
+  renderItem = (item = this.state.item) => {
+    return (
+      <Row className='mg1t'>
+        <Col span={15}>
+          <InputGroup>
+            <Input
+              value={item.name}
+              readOnly
+              className='width-40'
+              title={item.name}
+              placeholder={t('quickCommandName')}
+            />
+            <Input
+              value={item.command}
+              readOnly
+              className='width-60'
+              title={item.command}
+            />
+          </InputGroup>
+        </Col>
+        <Col span={3}>
+          <Tooltip title={t('inputOnly')}>
+            <Switch
+              checked={!!item.inputOnly}
+              title={t('inputOnly')}
+              readOnly
+            />
+          </Tooltip>
+        </Col>
+        <Col span={6}>
+          <EditOutlined className='pointer font16 mg1x' onClick={this.handleEdit} />
+          <CloseCircleOutlined className='pointer font16' onClick={this.handleDel} />
+        </Col>
+      </Row>
+    )
+  }
+
+  render () {
+    if (this.state.edit) {
+      return this.renderForm()
+    }
+    return this.renderItem()
+  }
+}

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

@@ -0,0 +1,104 @@
+/**
+ * bookmark form
+ */
+import {
+  Button,
+  Input,
+  Upload,
+  AutoComplete,
+  Form
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import { uniqBy } from 'lodash-es'
+import './bookmark-form.styl'
+
+const { TextArea } = Input
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+
+export default function renderAuth (props) {
+  const {
+    store,
+    form,
+    authType
+  } = props
+  if (authType === 'password') {
+    const opts = {
+      options: uniqBy(
+        store.getBookmarks()
+          .filter(d => d.password),
+        (d) => d.password
+      )
+        .map(d => {
+          return {
+            label: `${d.title ? `(${d.title})` : ''}${d.username || ''}:${d.host}-******`,
+            value: d.password
+          }
+        }),
+      placeholder: e('password'),
+      allowClear: false
+    }
+    return (
+      <FormItem
+        {...formItemLayout}
+        label={e('password')}
+        name='password'
+        hasFeedback
+        rules={[{
+          max: 1024, message: '1024 chars max'
+        }]}
+      >
+        <AutoComplete
+          {...opts}
+        >
+          <Input.Password />
+        </AutoComplete>
+      </FormItem>
+    )
+  }
+  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')}
+          rows={1}
+        />
+      </FormItem>
+      <Upload
+        beforeUpload={file => props.beforeUpload(file, form)}
+        fileList={[]}
+      >
+        <Button
+          type='dashed'
+          className='mg2b mg1t'
+        >
+          {e('importFromFile')}
+        </Button>
+      </Upload>
+    </FormItem>,
+    <FormItem
+      key='passphrase'
+      {...formItemLayout}
+      label={e('passphrase')}
+      name='passphrase'
+      hasFeedback
+      rules={[{
+        max: 1024, message: '1024 chars max'
+      }]}
+    >
+      <Input.Password
+        placeholder={e('passphraseDesc')}
+      />
+    </FormItem>
+  ]
+}

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

@@ -0,0 +1,229 @@
+import {
+  Form,
+  InputNumber,
+  Input,
+  Radio,
+  Button,
+  Table
+} from 'antd'
+import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+import {
+  MinusCircleFilled,
+  PlusOutlined
+} from '@ant-design/icons'
+import RenderAuth from './render-auth-ssh'
+import uid from '../../common/uid'
+import {
+  authTypeMap
+} from '../../common/constants'
+import { useState } from 'react'
+
+const FormItem = Form.Item
+const RadioButton = Radio.Button
+const RadioGroup = Radio.Group
+const { prefix } = window
+const f = prefix('form')
+const m = prefix('menu')
+
+export default function renderConnectionHopping (props) {
+  const {
+    store,
+    form,
+    formData
+  } = props
+  const [formChild] = Form.useForm()
+  const [initialValues, editState] = useState({
+    port: 22,
+    authType: authTypeMap.password
+  })
+  const [list, setList] = useState(formData.connectionHoppings || [])
+  function onChangeAuthType (authType) {
+    editState(old => {
+      return {
+        ...old,
+        authType
+      }
+    })
+  }
+  function onSubmit () {
+    formChild.submit()
+  }
+  function handleFinish (data) {
+    const nd = {
+      ...data,
+      id: uid()
+    }
+    const v = [
+      ...form.getFieldValue('connectionHoppings'),
+      nd
+    ]
+    form.setFieldsValue({
+      connectionHoppings: v
+    })
+    setList(old => {
+      return [
+        ...old,
+        data
+      ]
+    })
+    formChild.resetFields()
+  }
+  const authTypes = Object.keys(authTypeMap).map(k => {
+    return k
+  })
+
+  function remove (id) {
+    setList(old => {
+      return old.filter(i => i.id !== id)
+    })
+    const v = form.getFieldValue('connectionHoppings').filter(i => i.id !== id)
+    form.setFieldsValue({
+      connectionHoppings: v
+    })
+    formChild.resetFields()
+  }
+  const cols = [
+    {
+      title: 'NO.',
+      dataIndex: 'index',
+      key: 'index',
+      render: (k) => k
+    }, {
+      title: f('connectionHopping'),
+      key: 'connectionHopping',
+      render: (k, item) => {
+        const pass = item.password ? ':*****' : ''
+        const ph = item.passphase ? '(passphase:*****)' : ''
+        const pk = item.privateKey ? '(privateKey:*****)' : ''
+        return <span>{item.username}{pass}@{item.host}:{item.port}{pk}{ph}</span>
+      }
+    }, {
+      title: m('del'),
+      key: 'op',
+      dataIndex: 'id',
+      render: (id) => {
+        return (
+          <MinusCircleFilled
+            className='pointer'
+            onClick={() => remove(id)}
+          />
+        )
+      }
+    }
+  ]
+
+  function renderList () {
+    return (
+      <FormItem {...tailFormItemLayout}>
+        <Table
+          columns={cols}
+          className='mg3b'
+          pagination={false}
+          size='small'
+          dataSource={list.map((d, i) => {
+            return {
+              ...d,
+              index: i + 1
+            }
+          })}
+        />
+      </FormItem>
+    )
+  }
+
+  return (
+    <div>
+      <FormItem
+        name='connectionHoppings'
+        className='hide'
+      >
+        <Input />
+      </FormItem>
+      <Form
+        form={formChild}
+        onFinish={handleFinish}
+        initialValues={initialValues}
+      >
+        {renderList()}
+        <FormItem
+          {...formItemLayout}
+          label={f('host')}
+          hasFeedback
+          rules={[{
+            max: 520, message: '520 chars max'
+          }, {
+            required: true, message: 'host required'
+          }]}
+          normalize={props.trim}
+          name='host'
+        >
+          <Input />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={f('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}>
+                    {f(t)}
+                  </RadioButton>
+                )
+              })
+            }
+          </RadioGroup>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={f('port')}
+          hasFeedback
+          name='port'
+          rules={[{
+            required: true, message: 'port required'
+          }]}
+        >
+          <InputNumber
+            placeholder={f('port')}
+            min={1}
+            max={65535}
+            step={1}
+          />
+        </FormItem>
+        <RenderAuth
+          form={formChild}
+          store={store}
+          authType={initialValues.authType}
+        />
+        <FormItem {...tailFormItemLayout} className='mg60b'>
+          <Button
+            type='default'
+            htmlType='button'
+            icon={<PlusOutlined />}
+            onClick={onSubmit}
+          >
+            {f('connectionHopping')}
+          </Button>
+        </FormItem>
+      </Form>
+    </div>
+  )
+}

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

@@ -0,0 +1,88 @@
+import {
+  Form,
+  InputNumber,
+  Space,
+  Button,
+  Input
+} from 'antd'
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import { formItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+const FormList = Form.List
+const { prefix } = window
+const e = prefix('form')
+
+export default function renderRunScripts () {
+  function renderItem (field, i, add, remove) {
+    return (
+      <Space
+        align='center'
+        key={field.key}
+      >
+        <FormItem
+          label=''
+          name={[field.name, 'delay']}
+          required
+        >
+          <InputNumber
+            min={1}
+            step={1}
+            max={65535}
+            addonBefore={e('loginScriptDelay')}
+            className='compact-input'
+          />
+        </FormItem>
+        <FormItem
+          label=''
+          name={[field.name, 'script']}
+          required
+          className='mg2x'
+        >
+          <Input.TextArea
+            rows={1}
+            placeholder={e('loginScript')}
+            className='compact-input'
+          />
+        </FormItem>
+        <Button
+          icon={<MinusCircleOutlined />}
+          onClick={() => remove(field.name)}
+          className='mg24b'
+        />
+      </Space>
+    )
+  }
+
+  return [
+    <FormItem {...formItemLayout} key='runScripts' label={e('loginScript')}>
+      <FormList
+        name='runScripts'
+      >
+        {
+          (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('loginScript')}
+                  </Button>
+                </FormItem>
+              </div>
+            )
+          }
+        }
+      </FormList>
+    </FormItem>
+  ]
+}