@electerm/electerm-react 1.100.60 → 1.101.10

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

@@ -1,151 +0,0 @@
-/**
- * bookmark form
- */
-
-import { useEffect } from 'react'
-import {
-  Tabs,
-  Input,
-  Form
-} from 'antd'
-import { formItemLayout } from '../../common/form-layout'
-import {
-  newBookmarkIdPrefix,
-  terminalLocalType
-} from '../../common/constants'
-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 renderTermBg from './render-bg'
-import { defaults } from 'lodash-es'
-import renderRunScripts from './render-delayed-scripts.jsx'
-import { ColorPickerItem } from './color-picker-item.jsx'
-import { getColorFromCategory } from '../../common/get-category-color.js'
-import BookmarkCategorySelect from './bookmark-category-select.jsx'
-
-const FormItem = Form.Item
-const e = window.translate
-
-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,
-    displayRaw: false,
-    type: terminalLocalType,
-    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
-    runScripts: [{}],
-    enableSsh: true
-  }
-  initialValues = defaults(initialValues, defaultValues)
-  function renderCommon () {
-    const {
-      bookmarkGroups = []
-    } = props
-    return (
-      <div className='pd1x'>
-        {renderRunScripts()}
-        <FormItem
-          {...formItemLayout}
-          label={e('title')}
-          hasFeedback
-        >
-          <FormItem noStyle name='title'>
-            <Input addonBefore={<ColorPickerItem />} />
-          </FormItem>
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('description')}
-          name='description'
-          hasFeedback
-        >
-          <Input.TextArea autoSize={{ minRows: 1 }} />
-        </FormItem>
-        <BookmarkCategorySelect
-          bookmarkGroups={bookmarkGroups}
-          form={form}
-        />
-        <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: e('settings'),
-        forceRender: true,
-        children: (
-          <>
-            {uis}
-            {renderTermBg(form)}
-          </>
-        )
-      },
-      {
-        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({ form })}
-      {submitUi}
-    </Form>
-  )
-}

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

@@ -1,16 +0,0 @@
-/**
- * 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/profile-form-item.jsx

@@ -1,43 +0,0 @@
-/**
- * bookmark form
- */
-import {
-  Form,
-  Select
-} from 'antd'
-import { formItemLayout } from '../../common/form-layout'
-import './bookmark-form.styl'
-
-const FormItem = Form.Item
-const e = window.translate
-
-export default function ProfileItem (props) {
-  const {
-    store,
-    profileFilter = (d) => d
-  } = props
-  const opts = {
-    options: store.profiles
-      .filter(profileFilter)
-      .map(d => {
-        return {
-          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/quick-command-list.jsx

@@ -1,31 +0,0 @@
-/**
- * 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

@@ -1,227 +0,0 @@
-/**
- * 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 e = window.translate
-
-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={e('quickCommandName')}
-            />
-            <Input
-              value={item.command}
-              onChange={this.handleChangeCommand}
-              className='width-60'
-              placeholder={e('quickCommand')}
-              title={item.command}
-            />
-          </InputGroup>
-        </Col>
-        <Col span={3}>
-          <Tooltip title={e('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={e('quickCommandName')}
-            />
-            <Input
-              value={item.command}
-              readOnly
-              className='width-60'
-              title={item.command}
-            />
-          </InputGroup>
-        </Col>
-        <Col span={3}>
-          <Tooltip title={e('inputOnly')}>
-            <Switch
-              checked={!!item.inputOnly}
-              title={e('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/rdp-form-ui.jsx

@@ -1,179 +0,0 @@
-/**
- * web form
- */
-
-import { useEffect } from 'react'
-import {
-  Input,
-  Form,
-  InputNumber,
-  Alert
-} from 'antd'
-import { formItemLayout } from '../../common/form-layout'
-import {
-  newBookmarkIdPrefix,
-  terminalRdpType,
-  rdpWikiLink
-} from '../../common/constants'
-import useSubmit from './use-submit'
-import copy from 'json-deep-copy'
-import { defaults, isEmpty } from 'lodash-es'
-import Password from '../common/password'
-import { ColorPickerItem } from './color-picker-item.jsx'
-import { getColorFromCategory } from '../../common/get-category-color.js'
-import findBookmarkGroupId from '../../common/find-bookmark-group-id'
-import ProfileItem from './profile-form-item'
-import Link from '../common/external-link'
-import BookmarkCategorySelect from './bookmark-category-select.jsx'
-
-const FormItem = Form.Item
-const e = window.translate
-
-export default function RdpFormUi (props) {
-  const [
-    form,
-    handleFinish,
-    submitUi
-  ] = useSubmit(props)
-  useEffect(() => {
-    if (props.formData.id.startsWith(newBookmarkIdPrefix)) {
-      form.setFieldsValue({
-        category: props.currentBookmarkGroupId
-      })
-    }
-  }, [props.currentBookmarkGroupId])
-  const {
-    id = ''
-  } = props.formData
-  const {
-    bookmarkGroups = [],
-    currentBookmarkGroupId
-  } = props
-  let initialValues = copy(props.formData)
-  const initBookmarkGroupId = !id.startsWith(newBookmarkIdPrefix)
-    ? findBookmarkGroupId(bookmarkGroups, id)
-    : currentBookmarkGroupId
-  const defaultValues = {
-    type: terminalRdpType,
-    port: 3389,
-    category: initBookmarkGroupId,
-    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId)
-
-  }
-  initialValues = defaults(initialValues, defaultValues)
-  function renderCommon () {
-    const {
-      bookmarkGroups = []
-    } = props
-    const alertProps = {
-      message: (
-        <Link to={rdpWikiLink}>WIKI: {rdpWikiLink}</Link>
-      ),
-      type: 'warning',
-      className: 'mg2y'
-    }
-    return (
-      <div className='pd1x'>
-        <Alert
-          {...alertProps}
-        />
-        <FormItem
-          {...formItemLayout}
-          label={e('title')}
-          hasFeedback
-        >
-          <FormItem noStyle name='title'>
-            <Input addonBefore={<ColorPickerItem />} />
-          </FormItem>
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('host')}
-          hasFeedback
-          name='host'
-          required
-        >
-          <Input />
-        </FormItem>
-        <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>
-        <ProfileItem
-          store={props.store}
-          profileFilter={d => !isEmpty(d.rdp)}
-        />
-        <FormItem
-          {...formItemLayout}
-          label={e('username')}
-          hasFeedback
-          name='userName'
-          required
-        >
-          <Input />
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('password')}
-          hasFeedback
-          name='password'
-          required
-        >
-          <Password />
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('description')}
-          name='description'
-          hasFeedback
-        >
-          <Input.TextArea autoSize={{ minRows: 1 }} />
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('domain')}
-          hasFeedback
-          name='domain'
-        >
-          <Input />
-        </FormItem>
-        <BookmarkCategorySelect
-          bookmarkGroups={bookmarkGroups}
-          form={form}
-        />
-        <FormItem
-          {...formItemLayout}
-          label='type'
-          name='type'
-          className='hide'
-        >
-          <Input />
-        </FormItem>
-      </div>
-    )
-  }
-
-  return (
-    <Form
-      form={form}
-      onFinish={handleFinish}
-      initialValues={initialValues}
-      name='rdp-form'
-    >
-      {renderCommon()}
-      {submitUi}
-    </Form>
-  )
-}

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

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