@electerm/electerm-react 1.39.109 → 1.40.1

package/client/common/constants.js

@@ -324,7 +324,6 @@ export const sshTunnelHelpLink = 'https://github.com/electerm/electerm/wiki/How-
 export const batchOpHelpLink = 'https://github.com/electerm/electerm/wiki/batch-operation'
 export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-format'
 export const regexHelpLink = 'https://github.com/electerm/electerm/wiki/Terminal-keywords-highlight-regular-expression-exmaples'
-export const rdpHelpLink = 'https://github.com/electerm/electerm/wiki/RDP-limitation'
 export const modals = {
   hide: 0,
   setting: 1,

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

@@ -0,0 +1,96 @@
+// bookmark select tree
+import createTitle from '../../common/create-title'
+import { TreeSelect } from 'antd'
+
+const e = window.translate
+
+function buildTreeData (bookmarkGroups, tree) {
+  const cats = bookmarkGroups
+  const btree = cats
+    .reduce((p, k) => {
+      return {
+        ...p,
+        [k.id]: k
+      }
+    }, {})
+  function buildSubCats (id) {
+    const x = btree[id]
+    if (!x) {
+      return ''
+    }
+    const y = {
+      key: x.id,
+      value: x.id,
+      title: x.title
+    }
+    y.children = [
+      ...(x.bookmarkGroupIds || []).map(buildSubCats),
+      ...(x.bookmarkIds || []).map(buildLeaf)
+    ].filter(d => d)
+    if (y.children && !y.children.length) {
+      delete y.children
+    }
+    return y
+  }
+  function buildLeaf (id) {
+    const x = tree[id]
+    if (!x) {
+      return ''
+    }
+    return {
+      value: x.id,
+      key: x.id,
+      title: createTitle(x)
+    }
+  }
+  const level1 = cats.filter(d => d.level !== 2)
+    .map(d => {
+      const r = {
+        title: d.title,
+        value: d.id,
+        key: d.id,
+        children: [
+          ...(d.bookmarkGroupIds || []).map(buildSubCats),
+          ...(d.bookmarkIds || []).map(buildLeaf)
+        ].filter(d => d)
+      }
+      if (!r.children.length) {
+        return ''
+      }
+      return r
+    }).filter(d => d)
+  return level1
+}
+
+export default function BookmarkSelect (props) {
+  const {
+    bookmarks,
+    bookmarkGroups
+  } = props
+  const tree = bookmarks
+    .reduce((p, k) => {
+      return {
+        ...p,
+        [k.id]: k
+      }
+    }, {})
+
+  function onSelect (id) {
+    const item = tree[id]
+    if (item) {
+      item.bookmarkId = item.id
+      props.onSelect(item)
+    }
+  }
+  const treeData = buildTreeData(bookmarkGroups, tree)
+  const treeProps = {
+    treeData,
+    onChange: onSelect,
+    placeholder: e('chooseFromBookmarks'),
+    showSearch: true,
+    value: undefined
+  }
+  return (
+    <TreeSelect {...treeProps} />
+  )
+}

package/client/components/bookmark-form/color-picker.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Popover } from 'antd'
-import { HexColorPicker } from 'react-colorful'
+import { HexColorPicker, RgbaColorPicker } from 'react-colorful'
 import { defaultColors, getRandomHexColor } from '../../common/rand-hex-color.js'
 import { HexInput } from './hex-input.jsx'
 import './color-picker.styl'
@@ -20,6 +20,7 @@ export const ColorPicker = React.forwardRef((props, ref) => {
   }
 
   function renderContent () {
+    const Picker = props.isRgba ? RgbaColorPicker : HexColorPicker
     return (
       <div className='color-picker-box'>
         <div className='fix'>
@@ -55,7 +56,7 @@ export const ColorPicker = React.forwardRef((props, ref) => {
             }
           </div>
           <div className='fright'>
-            <HexColorPicker
+            <Picker
               color={value}
               onChange={handleChange}
             />
@@ -71,6 +72,20 @@ export const ColorPicker = React.forwardRef((props, ref) => {
     )
   }
 
+  const inner = (
+    <div
+      ref={ref}
+      className='color-picker-choose'
+      style={{
+        backgroundColor: value
+      }}
+    />
+  )
+
+  if (props.disabled) {
+    return inner
+  }
+
   return (
     <Popover
       content={renderContent()}
@@ -79,13 +94,7 @@ export const ColorPicker = React.forwardRef((props, ref) => {
       placement='bottomLeft'
       onOpenChange={handleVisibleChange}
     >
-      <div
-        ref={ref}
-        className='color-picker-choose'
-        style={{
-          backgroundColor: value
-        }}
-      />
+      {inner}
     </Popover>
   )
 })

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

@@ -36,9 +36,11 @@ export default function renderCommon (props) {
     bookmarkGroups = [],
     ips,
     form,
-    onChangeAuthType
+    onChangeAuthType,
+    filterAuthType = a => a
   } = props
   const tree = formatBookmarkGroups(bookmarkGroups)
+  const authTypesFiltered = authTypes.filter(filterAuthType)
 
   // ips is ipaddress string[]
   function renderIps () {
@@ -115,7 +117,7 @@ export default function renderCommon (props) {
           buttonStyle='solid'
         >
           {
-            authTypes.map(t => {
+            authTypesFiltered.map(t => {
               return (
                 <RadioButton value={t} key={t}>
                   {e(t)}

package/client/components/bookmark-form/profile-form-item.jsx

@@ -0,0 +1,43 @@
+/**
+ * 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/rdp-form-ui.jsx

@@ -12,17 +12,16 @@ import {
 import { formItemLayout } from '../../common/form-layout'
 import {
   newBookmarkIdPrefix,
-  terminalRdpType,
-  rdpHelpLink
+  terminalRdpType
 } from '../../common/constants'
 import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
-import Link from '../common/external-link.jsx'
-import { defaults } from 'lodash-es'
+import { defaults, isEmpty } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
 import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 import formatBookmarkGroups from './bookmark-group-tree-format'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
+import ProfileItem from './profile-form-item'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -56,6 +55,7 @@ export default function RdpFormUi (props) {
     port: 3389,
     category: initBookmarkGroupId,
     color: getRandomDefaultColor()
+
   }
   initialValues = defaults(initialValues, defaultValues)
   function renderCommon () {
@@ -65,9 +65,6 @@ export default function RdpFormUi (props) {
     const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
-        <p className='alignright'>
-          <Link to={rdpHelpLink}>Wiki: {rdpHelpLink}</Link>
-        </p>
         <FormItem
           {...formItemLayout}
           label={e('title')}
@@ -102,11 +99,15 @@ export default function RdpFormUi (props) {
             step={1}
           />
         </FormItem>
+        <ProfileItem
+          store={props.store}
+          profileFilter={d => !isEmpty(d.rdp)}
+        />
         <FormItem
           {...formItemLayout}
-          label={e('username')}
+          label={e('userName')}
           hasFeedback
-          name='username'
+          name='userName'
           required
         >
           <Input />

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

@@ -21,7 +21,9 @@ export default function renderAuth (props) {
   const {
     store,
     form,
-    authType
+    authType,
+    formItemName = 'password',
+    profileFilter = (d) => d
   } = props
   const beforeUpload = async (file) => {
     const privateKey = await window.fs.readFile(file.path)
@@ -50,7 +52,7 @@ export default function renderAuth (props) {
       <FormItem
         {...formItemLayout}
         label={e('password')}
-        name='password'
+        name={formItemName}
         hasFeedback
         rules={[{
           max: 1024, message: '1024 chars max'
@@ -67,6 +69,7 @@ export default function renderAuth (props) {
   if (authType === 'profiles') {
     const opts = {
       options: store.profiles
+        .filter(profileFilter)
         .map(d => {
           return {
             label: d.name,
@@ -74,7 +77,7 @@ export default function renderAuth (props) {
           }
         }),
       placeholder: e('profiles'),
-      allowClear: false
+      allowClear: true
     }
     return (
       <FormItem

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

@@ -17,6 +17,7 @@ import {
   authTypeMap
 } from '../../common/constants'
 import { useState } from 'react'
+import BookmarkSelect from './bookmark-select'
 
 const FormItem = Form.Item
 const RadioButton = Radio.Button
@@ -129,7 +130,13 @@ export default function renderConnectionHopping (props) {
       </FormItem>
     )
   }
-
+  const treeProps = {
+    bookmarks: store.bookmarks.filter(d => {
+      return d.host && d.port && d.username
+    }),
+    bookmarkGroups: store.bookmarkGroups,
+    onSelect: handleFinish
+  }
   return (
     <div>
       <FormItem
@@ -144,6 +151,13 @@ export default function renderConnectionHopping (props) {
         initialValues={initialValues}
       >
         {renderList()}
+        <FormItem
+          {...formItemLayout}
+          label={e('chooseFromBookmarks')}
+          className='mg60b'
+        >
+          <BookmarkSelect {...treeProps} />
+        </FormItem>
         <FormItem
           {...formItemLayout}
           label={e('host')}

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

@@ -1,16 +1,17 @@
 /**
  * bookmark form
  */
-import { useEffect } from 'react'
+
 import {
   Input,
   Tabs,
-  AutoComplete,
   Form
 } from 'antd'
+import { useState, useEffect } from 'react'
 import {
   newBookmarkIdPrefix,
-  terminalTelnetType
+  terminalTelnetType,
+  authTypeMap
 } from '../../common/constants'
 import { formItemLayout } from '../../common/form-layout'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
@@ -21,7 +22,8 @@ import useQm from './use-quick-commands'
 import renderCommon from './form-ssh-common'
 import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 import copy from 'json-deep-copy'
-import { defaultsDeep, uniqBy } from 'lodash-es'
+import { defaultsDeep, isEmpty } from 'lodash-es'
+import renderAuth from './render-auth-ssh'
 import './bookmark-form.styl'
 
 const FormItem = Form.Item
@@ -33,6 +35,7 @@ export default function TelnetFormUI (props) {
     handleFinish,
     submitUi
   ] = useSubmit(props)
+  const [authType, setAuthType] = useState(props.formData.authType || authTypeMap.password)
   useEffect(() => {
     if ((props.formData.id || '').startsWith(newBookmarkIdPrefix)) {
       form.setFieldsValue({
@@ -53,6 +56,9 @@ export default function TelnetFormUI (props) {
     ? findBookmarkGroupId(bookmarkGroups, id)
     : currentBookmarkGroupId
   let initialValues = copy(props.formData)
+  function onChangeAuthType (e) {
+    setAuthType(e.target.value)
+  }
   const defaultValues = {
     port: 23,
     id: '',
@@ -63,47 +69,20 @@ export default function TelnetFormUI (props) {
     term: defaultSettings.terminalType,
     displayRaw: false,
     type: terminalTelnetType,
-    category: initBookmarkGroupId
+    category: initBookmarkGroupId,
+    authType: authTypeMap.password
   }
   initialValues = defaultsDeep(initialValues, defaultValues)
-  function renderAuth () {
-    const opts = {
-      options: uniqBy(
-        props.store.bookmarks
-          .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
+    authType,
+    onChangeAuthType,
+    form,
+    bookmarkType: terminalTelnetType,
+    filterAuthType: a => a !== 'privateKey',
+    profileFilter: d => !isEmpty(d.telnet)
   }
 
   function renderTabs () {

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

@@ -18,13 +18,14 @@ import {
 } from '../../common/constants'
 import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
-import { defaults } from 'lodash-es'
+import { defaults, isEmpty } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
 import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 import formatBookmarkGroups from './bookmark-group-tree-format'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import renderProxy from './proxy'
 import ConnectionHopping from './render-connection-hopping.jsx'
+import ProfileItem from './profile-form-item'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -152,6 +153,10 @@ export default function VncFormUi (props) {
         >
           <Switch />
         </FormItem>
+        <ProfileItem
+          store={props.store}
+          profileFilter={d => !isEmpty(d.vnc)}
+        />
         <FormItem
           {...formItemLayout}
           label={e('username')}

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

@@ -77,7 +77,7 @@ export default function LocalFormUi (props) {
           name='url'
           required
         >
-          <Input addonBefore={<ColorPickerItem />} />
+          <Input />
         </FormItem>
         <FormItem
           {...formItemLayout}

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

@@ -1,20 +1,23 @@
+import { useState } from 'react'
 import {
   Form,
   message,
-  Button,
-  Input
+  Button
 } from 'antd'
 import InputAutoFocus from '../common/input-auto-focus'
-import renderAuth from '../bookmark-form/render-auth-ssh'
 import { formItemLayout } from '../../common/form-layout'
 import {
   settingMap
 } from '../../common/constants'
+
+import ProfileTabs from './profile-tabs'
+
 const FormItem = Form.Item
 const e = window.translate
 
-export default function QuickCommandForm (props) {
+export default function ProfileFormElem (props) {
   const [form] = Form.useForm()
+  const [activeTab, setActiveTab] = useState('ssh')
   const { autofocustrigger, profiles } = props.store
   function genId () {
     let count = profiles.length ? profiles.length : ''
@@ -42,6 +45,12 @@ export default function QuickCommandForm (props) {
     }
     message.success(e('saved'))
   }
+  const tabsProps = {
+    activeTab,
+    onChangeTab: setActiveTab,
+    form,
+    store: props.store
+  }
   return (
     <Form
       form={form}
@@ -67,30 +76,7 @@ export default function QuickCommandForm (props) {
           autofocustrigger={autofocustrigger}
         />
       </FormItem>
-      <FormItem
-        {...formItemLayout}
-        label={e('username')}
-        hasFeedback
-        name='username'
-        rules={[{
-          max: 128, message: '128 chars max'
-        }]}
-      >
-        <Input />
-      </FormItem>
-      {
-        renderAuth({
-          store: props.store,
-          form,
-          authType: 'password'
-        })
-      }
-      {
-        renderAuth({
-          store: props.store,
-          form
-        })
-      }
+      <ProfileTabs {...tabsProps} />
       <FormItem>
         <Button
           type='primary'

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

@@ -0,0 +1,31 @@
+import {
+  Form,
+  Input
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function ProfileFormRdp (props) {
+  return (
+    <>
+      <FormItem
+        {...formItemLayout}
+        label={e('username')}
+        hasFeedback
+        name={['rdp', 'userName']}
+      >
+        <Input />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('password')}
+        hasFeedback
+        name={['rdp', 'password']}
+      >
+        <Input.Password />
+      </FormItem>
+    </>
+  )
+}

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

@@ -0,0 +1,41 @@
+import {
+  Form,
+  Input
+} from 'antd'
+import renderAuth from '../bookmark-form/render-auth-ssh'
+import { formItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function ProfileFormSsh (props) {
+  const { form } = props.store
+  return (
+    <>
+      <FormItem
+        {...formItemLayout}
+        label={e('username')}
+        hasFeedback
+        name='username'
+        rules={[{
+          max: 128, message: '128 chars max'
+        }]}
+      >
+        <Input />
+      </FormItem>
+      {
+        renderAuth({
+          store: props.store,
+          form,
+          authType: 'password'
+        })
+      }
+      {
+        renderAuth({
+          store: props.store,
+          form
+        })
+      }
+    </>
+  )
+}

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

@@ -0,0 +1,35 @@
+import {
+  Form,
+  Input
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import renderAuth from '../bookmark-form/render-auth-ssh'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function ProfileFormTelnet (props) {
+  return (
+    <>
+      <FormItem
+        {...formItemLayout}
+        label={e('username')}
+        hasFeedback
+        name={['telnet', 'username']}
+        rules={[{
+          max: 128, message: '128 chars max'
+        }]}
+      >
+        <Input />
+      </FormItem>
+      {
+        renderAuth({
+          store: props.store,
+          form: props.form,
+          authType: 'password',
+          formItemName: ['telnet', 'password']
+        })
+      }
+    </>
+  )
+}