@electerm/electerm-react 1.100.60 → 1.101.16

package/client/components/profile/profile-form-ftp.jsx

@@ -0,0 +1,35 @@
+import {
+  Form,
+  Input
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import Password from '../common/password'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function ProfileFormSsh (props) {
+  return (
+    <>
+      <FormItem
+        {...formItemLayout}
+        label={e('username')}
+        hasFeedback
+        name={['ftp', 'user']}
+        rules={[{
+          max: 128, message: '128 chars max'
+        }]}
+      >
+        <Input />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('password')}
+        hasFeedback
+        name={['rdp', 'password']}
+      >
+        <Password />
+      </FormItem>
+    </>
+  )
+}

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

@@ -2,7 +2,7 @@ import {
   Form,
   Input
 } from 'antd'
-import renderAuth from '../bookmark-form/render-auth-ssh'
+import renderAuth from '../bookmark-form/common/render-auth-ssh'
 import { formItemLayout } from '../../common/form-layout'
 
 const FormItem = Form.Item
@@ -25,14 +25,14 @@ export default function ProfileFormSsh (props) {
       </FormItem>
       {
         renderAuth({
-          store: props.store,
+          store: window.store,
           form,
           authType: 'password'
         })
       }
       {
         renderAuth({
-          store: props.store,
+          store: window.store,
           form
         })
       }

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

@@ -3,7 +3,7 @@ import {
   Input
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
-import renderAuth from '../bookmark-form/render-auth-ssh'
+import renderAuth from '../bookmark-form/common/render-auth-ssh'
 
 const FormItem = Form.Item
 const e = window.translate

package/client/components/profile/profile-tabs.jsx

@@ -2,6 +2,7 @@ import { Tabs } from 'antd'
 import ProfileFormSsh from './profile-form-ssh'
 import ProfileFormRdp from './profile-form-rdp'
 import ProfileFormVnc from './profile-form-vnc'
+import ProfileFormFtp from './profile-form-ftp'
 import ProfileFormTelnet from './profile-form-telnet'
 
 const { TabPane } = Tabs
@@ -26,6 +27,9 @@ export default function ProfileTabs (props) {
       <TabPane tab='rdp' key='rdp' forceRender>
         <ProfileFormRdp />
       </TabPane>
+      <TabPane tab='ftp' key='ftp' forceRender>
+        <ProfileFormFtp />
+      </TabPane>
     </Tabs>
 
   )

package/client/components/setting-panel/setting-modal.jsx

@@ -99,7 +99,7 @@ export default auto(function SettingModalWrap (props) {
       animated: false,
       items,
       onChange: store.handleChangeSettingTab,
-      destroyInactiveTabPane: true,
+      destroyOnHidden: true,
       className: 'setting-tabs',
       type: 'card'
     }

package/client/components/setting-panel/setting-wrap.jsx

@@ -24,7 +24,7 @@ export default class SettingWrap extends Component {
       width: this.props.innerWidth - sidebarWidth,
       zIndex: 888,
       placement: 'left',
-      destroyOnClose: true,
+      destroyOnHidden: true,
       styles: {
         header: {
           display: 'none'

package/client/components/setting-panel/text-bg-modal.jsx

@@ -7,7 +7,7 @@ import {
   Typography,
   Select
 } from 'antd'
-import { ColorPicker } from '../bookmark-form/color-picker.jsx'
+import { ColorPicker } from '../bookmark-form/common/color-picker.jsx'
 
 const { TextArea } = Input
 const { Title } = Typography
@@ -54,7 +54,7 @@ export default function TextBgModal ({
       onOk={handleOk}
       onCancel={handleCancel}
       width={500}
-      destroyOnClose
+      destroyOnHidden
     >
       <div className='pd1'>
         <Space direction='vertical' size='large' style={{ width: '100%' }}>

package/client/components/theme/theme-edit-slot.jsx

@@ -1,4 +1,4 @@
-import { ColorPicker } from '../bookmark-form/color-picker'
+import { ColorPicker } from '../bookmark-form/common/color-picker'
 
 export default function ThemeEditSlot (props) {
   const {

package/client/components/tree-list/category-color-picker.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ColorPicker } from '../bookmark-form/color-picker.jsx'
+import { ColorPicker } from '../bookmark-form/common/color-picker.jsx'
 
 export function CategoryColorPicker ({ value, onChange }) {
   return (

package/client/components/tree-list/move-item-modal.jsx

@@ -1,6 +1,6 @@
 // render bookmark select, use antd tree select
 import { useState } from 'react'
-import buildGroupData from '../bookmark-form/bookmark-group-tree-format'
+import buildGroupData from '../bookmark-form/common/bookmark-group-tree-format'
 import { TreeSelect, Modal, Button } from 'antd'
 const e = window.translate
 

package/client/store/load-data.js

@@ -8,7 +8,7 @@ import { infoTabs, statusMap, defaultEnvLang } from '../common/constants'
 import fs from '../common/fs'
 import generate from '../common/id-with-stamp'
 import defaultSettings from '../common/default-setting'
-import encodes from '../components/bookmark-form/encodes'
+import encodes from '../components/bookmark-form/common/encodes'
 import { initWsCommon } from '../common/fetch-from-server'
 import safeParse from '../common/parse-json-safe'
 import initWatch from './watch'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.100.60",
+  "version": "1.101.16",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",

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

@@ -1,219 +0,0 @@
-/**
- * bookmark form
- */
-import {
-  Input,
-  InputNumber,
-  Radio,
-  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 renderRunScripts from './render-delayed-scripts.jsx'
-import { ColorPickerItem } from './color-picker-item.jsx'
-import BookmarkCategorySelect from './bookmark-category-select.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 e = window.translate
-
-export default function renderCommon (props) {
-  const {
-    bookmarkGroups = [],
-    ips,
-    form,
-    onChangeAuthType,
-    filterAuthType = a => a
-  } = props
-  const authTypesFiltered = authTypes.filter(filterAuthType)
-
-  // ips is ipaddress string[]
-  function renderIps () {
-    return ips.map(ip => {
-      return (
-        <div
-          key={ip}
-          className='iblock mg2r pointer ip-item'
-          onClick={() => props.useIp(form, ip)}
-        >
-          <b>{ip}</b>
-          <span
-            className='mg1l item-item-use'
-          >
-            {e('use')}
-          </span>
-        </div>
-      )
-    })
-  }
-  return (
-    <>
-      <FormItem
-        {...formItemLayout}
-        label={e('host')}
-        hasFeedback
-        rules={[{
-          max: 520, message: '520 chars max'
-        }, {
-          required: true, message: 'host required'
-        }]}
-        normalize={props.trim}
-      >
-        {
-          ips.length
-            ? renderIps()
-            : (
-              <div className='dns-section'>
-                hostname or ip
-              </div>
-              )
-        }
-        <FormItem noStyle name='host'>
-          <InputAutoFocus
-            name='host'
-            onBlur={props.onBlur}
-            onPaste={e => props.onPaste(e, form)}
-            addonBefore={<ColorPickerItem />}
-          />
-        </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'
-        >
-          {
-            authTypesFiltered.map(t => {
-              return (
-                <RadioButton value={t} key={t}>
-                  {e(t)}
-                </RadioButton>
-              )
-            })
-          }
-        </RadioGroup>
-      </FormItem>
-      {props.renderAuth(props)}
-      <FormItem
-        {...formItemLayout}
-        label={e('port')}
-        name='port'
-        rules={[{
-          required: true, message: 'port required'
-        }]}
-      >
-        <InputNumber
-          placeholder={e('port')}
-          min={1}
-          max={65535}
-          step={1}
-        />
-      </FormItem>
-      <BookmarkCategorySelect
-        bookmarkGroups={bookmarkGroups}
-        form={form}
-        formItemLayout={formItemLayout}
-      />
-      <FormItem
-        {...formItemLayout}
-        label={e('title')}
-        hasFeedback
-        name='title'
-      >
-        <Input />
-      </FormItem>
-      <FormItem
-        {...formItemLayout}
-        label={e('description')}
-        name='description'
-        hasFeedback
-      >
-        <Input.TextArea autoSize={{ minRows: 1 }} />
-      </FormItem>
-      <FormItem
-        {...formItemLayout}
-        name='setEnv'
-        label='SetEnv'
-      >
-        <Input placeholder='SEC=xxx BEC=xxxx' />
-      </FormItem>
-      <FormItem
-        {...formItemLayout}
-        name='startDirectoryLocal'
-        label={`${e('startDirectory')}:${e('local')}`}
-      >
-        <Input />
-      </FormItem>
-      <FormItem
-        {...formItemLayout}
-        name='startDirectory'
-        label={`${e('startDirectory')}:${e('remote')}`}
-      >
-        <Input />
-      </FormItem>
-      <FormItem
-        {...formItemLayout}
-        label={e('interactiveValues')}
-        name='interactiveValues'
-        hasFeedback
-      >
-        <Input.TextArea
-          autoSize={{ minRows: 1 }}
-        />
-      </FormItem>
-      {renderRunScripts()}
-      <FormItem
-        {...formItemLayout}
-        key='encode-select'
-        label={e('encode')}
-        name='encode'
-      >
-        <Select
-          showSearch
-        >
-          {
-            encodes.map(k => {
-              return (
-                <Option
-                  value={k}
-                  key={k}
-                >
-                  {k.toUpperCase()}
-                </Option>
-              )
-            })
-          }
-        </Select>
-      </FormItem>
-    </>
-  )
-}

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

@@ -1,66 +0,0 @@
-/**
- * bookmark form
- */
-import {
-  Tabs
-} from 'antd'
-import { sshTunnelHelpLink } from '../../common/constants'
-import HelpIcon from '../common/help-icon'
-
-const e = window.translate
-
-export default function renderTabs (props) {
-  const tunnelTag = (
-    <span>
-      {e('sshTunnel')}
-      <HelpIcon
-        link={sshTunnelHelpLink}
-      />
-    </span>
-  )
-  const items = [
-    {
-      key: 'auth',
-      label: e('auth'),
-      forceRender: true,
-      children: props.renderCommon(props)
-    },
-    {
-      key: 'settings',
-      label: e('settings'),
-      forceRender: true,
-      children: (
-        <>
-          {props.renderEnableSftp()}
-          {props.uis}
-          {props.renderProxy(props)}
-          {props.renderX11(props.form)}
-          {props.renderTermBg(props.form)}
-        </>
-      )
-    },
-    {
-      key: 'quickCommands',
-      label: e('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/ftp-form-ui.jsx

@@ -1,160 +0,0 @@
-/**
- * web form
- */
-
-import { useEffect } from 'react'
-import {
-  Input,
-  Form,
-  InputNumber,
-  Switch
-} from 'antd'
-import { formItemLayout } from '../../common/form-layout'
-import {
-  newBookmarkIdPrefix,
-  terminalFtpType
-} from '../../common/constants'
-import useSubmit from './use-submit'
-import copy from 'json-deep-copy'
-import { defaults, isEmpty } from 'lodash-es'
-import { ColorPickerItem } from './color-picker-item.jsx'
-import Password from '../common/password'
-import { getColorFromCategory } from '../../common/get-category-color.js'
-import findBookmarkGroupId from '../../common/find-bookmark-group-id'
-import ProfileItem from './profile-form-item'
-import BookmarkCategorySelect from './bookmark-category-select.jsx'
-
-const FormItem = Form.Item
-const e = window.translate
-
-export default function FtpFormUi (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: terminalFtpType,
-    port: 21,
-    category: initBookmarkGroupId,
-    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
-    user: '',
-    password: '',
-    secure: false
-  }
-  initialValues = defaults(initialValues, defaultValues)
-
-  function renderCommon () {
-    const {
-      bookmarkGroups = []
-    } = props
-    return (
-      <div className='pd1x'>
-        <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.vnc)}
-        />
-        <FormItem
-          {...formItemLayout}
-          label={e('username')}
-          hasFeedback
-          name='user'
-        >
-          <Input />
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('password')}
-          hasFeedback
-          name='password'
-        >
-          <Password />
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('secure')}
-          name='secure'
-          valuePropName='secure'
-        >
-          <Switch />
-        </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='vnc-form'
-    >
-      {renderCommon()}
-      {submitUi}
-    </Form>
-  )
-}

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

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

package/client/components/bookmark-form/hex-input.jsx

@@ -1,39 +0,0 @@
-import { Input } from 'antd'
-import { useState } from 'react'
-import {
-  CheckOutlined
-} from '@ant-design/icons'
-
-export const HexInput = (props) => {
-  const [v, setV] = useState(props.value.replace('#', ''))
-  const handleChange = (event) => {
-    const vv = event.target.value
-    const hexRegex = /^[0-9a-fA-F]{0,6}$/
-    if (hexRegex.test(vv)) {
-      setV(vv)
-    }
-  }
-  function submit () {
-    props.onChange('#' + v)
-  }
-  function renderAfter () {
-    if (!/^[0-9a-fA-F]{6}$/.test(v)) {
-      return null
-    }
-    return (
-      <CheckOutlined
-        className='pointer'
-        onClick={submit}
-      />
-    )
-  }
-  return (
-    <Input
-      addonBefore='#'
-      {...props}
-      value={v}
-      onChange={handleChange}
-      addonAfter={renderAfter()}
-    />
-  )
-}