@electerm/electerm-react 1.34.30

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

@@ -0,0 +1,348 @@
+/**
+ * bookmark form
+ */
+import { PureComponent } from 'react'
+import {
+  message
+} from 'antd'
+import { findIndex, uniq, isEqual, pick } from 'lodash-es'
+import copy from 'json-deep-copy'
+import generate from '../../common/uid'
+import {
+  settingMap,
+  defaultBookmarkGroupId,
+  newBookmarkIdPrefix
+} from '../../common/constants'
+import { isValidIP } from '../../common/is-ip'
+import runIdle from '../../common/run-idle'
+import getInitItem from '../../common/init-setting-item'
+import testCon from '../../common/test-connection'
+import FormUi from './ssh-form-ui'
+import findBookmarkGroupId from '../../common/find-bookmark-group-id'
+import newTerm from '../../common/new-terminal'
+
+export default class BookmarkForm extends PureComponent {
+  state = {
+    testing: false,
+    dns: ''
+  }
+
+  trim = (v) => {
+    return (v || '').replace(/^\s+|\s+$/g, '')
+  }
+
+  useIp = (form) => {
+    form.setFieldsValue({
+      host: this.state.dns
+    })
+    this.setState({
+      dns: ''
+    })
+  }
+
+  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)
+  }
+
+  onBlur = async (e) => {
+    const value = e.target.value.trim()
+    const { type } = this.props
+    if (
+      type !== settingMap.bookmarks ||
+      !value ||
+      isValidIP(value)
+    ) {
+      return
+    }
+    const ip = await window.pre.runGlobalAsync('lookup', value)
+      .catch(err => {
+        log.debug(err)
+      })
+    this.setState({
+      dns: ip || ''
+    })
+  }
+
+  getBookmarkGroupId = () => {
+    const {
+      id
+    } = this.props.formData
+    const {
+      bookmarkGroups,
+      currentBookmarkGroupId
+    } = this.props
+    return id
+      ? findBookmarkGroupId(bookmarkGroups, id)
+      : currentBookmarkGroupId
+  }
+
+  updateBookmarkGroups = (bookmarkGroups, bookmark, categoryId) => {
+    let index = findIndex(
+      bookmarkGroups,
+      bg => bg.id === categoryId
+    )
+    if (index < 0) {
+      index = findIndex(
+        bookmarkGroups,
+        bg => bg.id === defaultBookmarkGroupId
+      )
+    }
+    const bid = bookmark.id
+    const bg = bookmarkGroups[index]
+    const updates = []
+    const old = copy(bg.bookmarkIds)
+    if (!bg.bookmarkIds.includes(bid)) {
+      bg.bookmarkIds.unshift(bid)
+    }
+    bg.bookmarkIds = uniq(bg.bookmarkIds)
+    if (!isEqual(bg.bookmarkIds, old)) {
+      updates.push({
+        id: bg.id,
+        db: 'bookmarkGroups',
+        update: {
+          bookmarkIds: bg.bookmarkIds
+        }
+      })
+    }
+    bookmarkGroups = bookmarkGroups.map((bg, i) => {
+      if (i === index) {
+        return bg
+      }
+      const olde = copy(bg.bookmarkIds)
+      bg.bookmarkIds = bg.bookmarkIds.filter(
+        g => g !== bid
+      )
+      if (!isEqual(bg.bookmarkIds, olde)) {
+        updates.push({
+          id: bg.id,
+          db: 'bookmarkGroups',
+          update: {
+            bookmarkIds: bg.bookmarkIds
+          }
+        })
+      }
+      return bg
+    })
+    runIdle(() => {
+      this.props.store.setBookmarkGroups(
+        bookmarkGroups
+      )
+    })
+    runIdle(() => {
+      this.props.store.batchDbUpdate(updates)
+    })
+    message.success('OK', 3)
+  }
+
+  submit = (evt, item, type = this.props.type) => {
+    if (item.host) {
+      item.host = item.host.trim()
+    }
+    const obj = item
+    const { addItem, editItem } = this.props.store
+    const categoryId = obj.category
+    delete obj.category
+    const bookmarkGroups = copy(
+      this.props.bookmarkGroups
+    )
+    if (type === settingMap.history) {
+      obj.id = generate()
+      runIdle(() => {
+        addItem(obj, settingMap.bookmarks)
+      })
+      this.updateBookmarkGroups(
+        bookmarkGroups,
+        obj,
+        categoryId
+      )
+      message.success('OK', 3)
+      return
+    }
+    if (!obj.id.startsWith(newBookmarkIdPrefix)) {
+      const tar = copy(obj)
+      delete tar.id
+      runIdle(() => {
+        editItem(obj.id, tar, settingMap.bookmarks)
+      })
+      this.updateBookmarkGroups(
+        bookmarkGroups,
+        obj,
+        categoryId
+      )
+      if (evt === 'saveAndCreateNew') {
+        this.setNewItem()
+      }
+    } else {
+      obj.id = generate()
+      if (evt !== 'save' && evt !== 'saveAndCreateNew') {
+        runIdle(() => {
+          addItem(obj, settingMap.history)
+        })
+      }
+      runIdle(() => {
+        addItem(obj, settingMap.bookmarks)
+      })
+      this.updateBookmarkGroups(
+        bookmarkGroups,
+        obj,
+        categoryId
+      )
+      this.setNewItem(evt === 'saveAndCreateNew'
+        ? getInitItem([], settingMap.bookmarks)
+        : obj
+      )
+    }
+  }
+
+  setNewItem = (
+    settingItem = getInitItem([],
+      settingMap.bookmarks)
+  ) => {
+    const { store } = this.props
+    this.props.store.storeAssign({
+      autofocustrigger: Date.now()
+    })
+    store.setSettingItem(settingItem)
+  }
+
+  test = async (update) => {
+    const options = {
+      ...this.props.formData,
+      ...update
+    }
+    let msg = ''
+    this.setState({
+      testing: true
+    })
+    const res = await testCon(options)
+      .then(r => r)
+      .catch((e) => {
+        msg = e.message
+        return false
+      })
+    this.setState({
+      testing: false
+    })
+    if (res) {
+      message.success('connection ok')
+    } else {
+      const err = 'connection fails' +
+        (msg ? `: ${msg}` : '')
+      message.error(err)
+    }
+  }
+
+  // reset (form) {
+  //   form.resetFields()
+  // }
+
+  onSelectProxy = (proxy, form) => {
+    const obj = Object.keys(proxy)
+      .reduce((prev, c) => {
+        return {
+          ...prev,
+          [`proxy.${c}`]: proxy[c]
+        }
+      }, {})
+    form.setFieldsValue(obj)
+  }
+
+  handleFinish = (res) => {
+    this.handleSubmit('submit', res, false)
+  }
+
+  saveAndCreateNew = (res) => {
+    this.handleSubmit('saveAndCreateNew', res, false)
+  }
+
+  save = (res) => {
+    this.handleSubmit('save', res, false)
+  }
+
+  testConnection = (res) => {
+    this.handleSubmit('test', res, true)
+  }
+
+  connect = (res) => {
+    this.handleSubmit('connect', res, false)
+  }
+
+  handleSubmit = async (evt, res, isTest = false) => {
+    const obj = {
+      ...this.props.formData,
+      ...res
+    }
+    if (isTest) {
+      return this.test(obj)
+    }
+    if (evt && evt !== 'connect') {
+      this.submit(evt, obj)
+    }
+    if (evt !== 'save' && evt !== 'saveAndCreateNew') {
+      this.props.store.addTab({
+        ...copy(obj),
+        ...newTerm(true)
+      })
+      this.props.hide()
+    }
+  }
+
+  beforeUpload = async (file, form) => {
+    const privateKey = await window.fs.readFile(file.path)
+    form.setFieldsValue({
+      privateKey
+    })
+    return false
+  }
+
+  getProps = () => {
+    const funcs = pick(this, [
+      'beforeUpload',
+      'handleFinish',
+      'testConnection',
+      'connect',
+      'save',
+      'saveAndCreateNew',
+      'onSelectProxy',
+      'onBlur',
+      'onPaste',
+      'useIp',
+      'trim'
+    ])
+    return {
+      ...this.state,
+      ...funcs
+    }
+  }
+
+  render () {
+    return (
+      <FormUi
+        {...this.props}
+        {...this.getProps()}
+      />
+    )
+  }
+}

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

@@ -0,0 +1,154 @@
+/**
+ * bookmark form
+ */
+import { useEffect } from 'react'
+import {
+  Input,
+  Tabs,
+  AutoComplete,
+  Form
+} from 'antd'
+import {
+  newBookmarkIdPrefix,
+  terminalTelnetType
+} from '../../common/constants'
+import { formItemLayout } from '../../common/form-layout'
+import findBookmarkGroupId from '../../common/find-bookmark-group-id'
+import defaultSettings from '../../../app/common/default-setting'
+import useSubmit from './use-submit'
+import useUI from './use-ui'
+import useQm from './use-quick-commands'
+import renderCommon from './form-ssh-common'
+import copy from 'json-deep-copy'
+import { defaultsDeep, uniqBy } from 'lodash-es'
+import './bookmark-form.styl'
+
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+const s = prefix('setting')
+
+export default function TelnetFormUI (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 = {
+    port: 23,
+    id: '',
+    username: 'root',
+    password: 'guest',
+    runScripts: [{}],
+    term: defaultSettings.terminalType,
+    type: terminalTelnetType,
+    category: initBookmarkGroupId
+  }
+  initialValues = defaultsDeep(initialValues, defaultValues)
+  function renderAuth () {
+    const opts = {
+      options: uniqBy(
+        props.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>
+    )
+  }
+  const tprops = {
+    ...props,
+    renderAuth,
+    form
+  }
+
+  function renderTabs () {
+    const items = [
+      {
+        key: 'auth',
+        label: e('auth'),
+        forceRender: true,
+        children: (
+          <div>
+            {renderCommon(tprops)}
+            <FormItem {...formItemLayout} label={e('type')} name='type' className='hide'>
+              <Input />
+            </FormItem>
+          </div>
+        )
+      },
+      {
+        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}
+      name='ssh-form'
+      onFinish={handleFinish}
+      initialValues={initialValues}
+    >
+      {renderTabs()}
+      {submitUi}
+    </Form>
+  )
+}

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

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

package/client/components/bookmark-form/tree-delete.jsx

@@ -0,0 +1,87 @@
+import StartSessionSelect from '../setting-panel/start-session-select'
+import {
+  Tree,
+  Button
+} from 'antd'
+import { defaultBookmarkGroupId, settingMap } from '../../common/constants'
+
+const { prefix } = window
+const m = prefix('common')
+
+export default class BookmarkTreeDelete extends StartSessionSelect {
+  onExpand = (expandedKeys) => {
+    window.store.setState(
+      'expandedKeys',
+      expandedKeys
+    )
+  }
+
+  onCheck = (checkedKeys) => {
+    window.store.setState(
+      'checkedKeys',
+      checkedKeys
+    )
+  }
+
+  handleDel = () => {
+    const { store } = window
+    const {
+      checkedKeys,
+      bookmarks,
+      bookmarkGroups
+    } = store
+    store.setBookmarks(
+      bookmarks.filter(f => {
+        return !checkedKeys.includes(f.id)
+      })
+    )
+    store.setBookmarkGroups(
+      bookmarkGroups.filter(f => {
+        return f.id === defaultBookmarkGroupId || !checkedKeys.includes(f.id)
+      })
+    )
+    const arr = checkedKeys.filter(d => d !== defaultBookmarkGroupId)
+    store.delItems(arr, settingMap.bookmarks)
+    store.delItems(arr, settingMap.bookmarkGroups)
+    store.setState('checkedKeys', [])
+  }
+
+  handleCancel = () => {
+    const { store } = window
+    store.bookmarkSelectMode = false
+    store.setState('checkedKeys', [])
+  }
+
+  render () {
+    const { store } = this.props
+    const rProps = {
+      checkable: true,
+      autoExpandParent: true,
+      onCheck: this.onCheck,
+      expandedKeys: store.expandedKeys,
+      checkedKeys: store.checkedKeys,
+      onExpand: this.onExpand,
+      treeData: this.buildData()
+    }
+    const len = store.checkedKeys.length
+    return (
+      <div>
+        <div className='pd1'>
+          <Button
+            type='primary'
+            disabled={!len}
+            onClick={this.handleDel}
+          >
+            {m('delSelected')} ({len})
+          </Button>
+          <Button
+            onClick={this.handleCancel}
+          >
+            {m('cancel')}
+          </Button>
+        </div>
+        <Tree {...rProps} />
+      </div>
+    )
+  }
+}

package/client/components/bookmark-form/use-form-funcs.jsx

@@ -0,0 +1,50 @@
+/**
+ * bookmark form
+ */
+import { useRef } from 'react'
+import {
+  Form
+} from 'antd'
+
+export default function useFormFuncs (props) {
+  const [form] = Form.useForm()
+  const action = useRef('submit')
+  function save () {
+    action.current = 'save'
+    form.submit()
+  }
+  function saveAndCreateNew () {
+    action.current = 'saveAndCreateNew'
+    form.submit()
+  }
+  function testConnection () {
+    action.current = 'testConnection'
+    form.submit()
+  }
+  function connect () {
+    action.current = 'connect'
+    form.submit()
+  }
+  function handleFinish (res) {
+    if (action.current === 'save') {
+      props.save(res)
+    } else if (action.current === 'saveAndCreateNew') {
+      props.saveAndCreateNew(res)
+    } else if (action.current === 'connect') {
+      props.connect(res)
+    } else if (action.current === 'testConnection') {
+      props.testConnection(res)
+    } else {
+      props.handleFinish(res)
+    }
+    action.current = 'submit'
+  }
+  return [
+    form,
+    save,
+    saveAndCreateNew,
+    connect,
+    testConnection,
+    handleFinish
+  ]
+}