@electerm/electerm-react 1.39.119 → 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/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/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']
+        })
+      }
+    </>
+  )
+}

package/client/components/profile/profile-form-vnc.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 ProfileFormVnc (props) {
+  return (
+    <>
+      <FormItem
+        {...formItemLayout}
+        label={e('username')}
+        hasFeedback
+        name={['vnc', 'username']}
+      >
+        <Input />
+      </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={e('password')}
+        hasFeedback
+        name={['vnc', 'password']}
+      >
+        <Input.Password />
+      </FormItem>
+    </>
+  )
+}

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

@@ -0,0 +1,32 @@
+import { Tabs } from 'antd'
+import ProfileFormSsh from './profile-form-ssh'
+import ProfileFormRdp from './profile-form-rdp'
+import ProfileFormVnc from './profile-form-vnc'
+import ProfileFormTelnet from './profile-form-telnet'
+
+const { TabPane } = Tabs
+
+export default function ProfileTabs (props) {
+  const { activeTab, onChangeTab, form, store } = props
+  const tabsProps = {
+    activeKey: activeTab,
+    onChange: onChangeTab
+  }
+  return (
+    <Tabs {...tabsProps}>
+      <TabPane tab='ssh' key='ssh' forceRender>
+        <ProfileFormSsh form={form} store={store} />
+      </TabPane>
+      <TabPane tab='telnet' key='telnet' forceRender>
+        <ProfileFormTelnet form={form} store={store} />
+      </TabPane>
+      <TabPane tab='vnc' key='vnc' forceRender>
+        <ProfileFormVnc />
+      </TabPane>
+      <TabPane tab='rdp' key='rdp' forceRender>
+        <ProfileFormRdp />
+      </TabPane>
+    </Tabs>
+
+  )
+}

package/client/components/rdp/rdp-session.jsx

@@ -4,8 +4,7 @@ import deepCopy from 'json-deep-copy'
 import clone from '../../common/to-simple-obj'
 import { handleErr } from '../../common/fetch'
 import {
-  statusMap,
-  rdpHelpLink
+  statusMap
 } from '../../common/constants'
 import {
   notification,
@@ -17,7 +16,6 @@ import {
   ReloadOutlined,
   EditOutlined
 } from '@ant-design/icons'
-import HelpIcon from '../common/help-icon'
 import * as ls from '../../common/safe-local-storage'
 import scanCode from './code-scan'
 import resolutions from './resolutions'
@@ -84,7 +82,7 @@ export default class RdpSession extends Component {
       server = ''
     } = config
     const { sessionId, id } = this.props
-    const tab = deepCopy(this.props.tab || {})
+    const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
     const {
       type,
       term: terminalType
@@ -347,11 +345,7 @@ export default class RdpSession extends Component {
   }
 
   renderHelp = () => {
-    return (
-      <HelpIcon
-        link={rdpHelpLink}
-      />
-    )
+    return null
   }
 
   renderControl = () => {

package/client/components/setting-panel/tab-themes.jsx

@@ -1,6 +1,6 @@
 import SettingCol from './col'
-import TerminalThemeForm from '../terminal-theme'
-import TerminalThemeList from '../terminal-theme/theme-list'
+import TerminalThemeForm from '../theme/theme-form'
+import TerminalThemeList from '../theme/theme-list'
 import {
   settingMap
 } from '../../common/constants'

package/client/components/terminal/attach-addon-custom.js

@@ -2,7 +2,7 @@
  * customize AttachAddon
  */
 import { AttachAddon } from 'xterm-addon-attach'
-import strip from '@electerm/strip-ansi'
+import regEscape from 'escape-string-regexp'
 
 export default class AttachAddonCustom extends AttachAddon {
   constructor (term, socket, isWindowsShell) {
@@ -63,16 +63,16 @@ export default class AttachAddonCustom extends AttachAddon {
       const nss = str.split('\r')
       const nnss = []
       for (const str1 of nss) {
-        const ns = strip(str1).trim()
-        if (ns.includes(cwdId) && ns.includes('$PWD')) {
-          nnss.push(str1.replace(`echo "${cwdId}$PWD"`, ''))
-        } else if (
-          (cwdId && ns.startsWith(cwdId))
-        ) {
-          delete term.cwdId
-          const cwd = ns.replace(cwdId, '').trim()
-          term.parent.setCwd(cwd)
-          nnss.push('\x1b[2A\x1b[0J')
+        const ns = str1.trim()
+        if (cwdId) {
+          const cwdIdEscaped = regEscape(cwdId)
+          const dirRegex = new RegExp(`${cwdIdEscaped}([^\\n]+?)${cwdIdEscaped}`, 'g')
+          if (ns.match(dirRegex)) {
+            const cwd = dirRegex.exec(ns)[1].trim()
+            if (cwd === '~' || cwd === '%d' || cwd === '%/' || cwd === '$PWD') term.parent.setCwd('')
+            else term.parent.setCwd(cwd)
+            nnss.push(ns.replaceAll(dirRegex, ''))
+          } else nnss.push(str1)
         } else {
           nnss.push(str1)
         }

package/client/components/terminal/index.jsx

@@ -125,6 +125,34 @@ class Term extends Component {
     if (themeChanged) {
       this.term.options.theme = deepCopy(this.props.themeConfig)
     }
+
+    const sftpPathFollowSshChanged = !isEqual(
+      this.props.sftpPathFollowSsh,
+      prevProps.sftpPathFollowSsh
+    )
+
+    if (sftpPathFollowSshChanged) {
+      const ps1Cmd = `\recho $0|grep csh >/dev/null && set prompt_bak="$prompt" && set prompt="$prompt${cwdId}%/${cwdId}"\r
+echo $0|grep zsh >/dev/null && PS1_bak=$PS1&&PS1=$PS1'${cwdId}%d${cwdId}'\r
+echo $0|grep ash >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
+echo $0|grep ksh >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
+echo $0|grep '^sh' >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
+clear\r`
+      const ps1RestoreCmd = `\recho $0|grep csh >/dev/null && set prompt="$prompt_bak"\r
+echo $0|grep zsh >/dev/null && PS1="$PS1_bak"\r
+echo $0|grep ash >/dev/null && PS1="$PS1_bak"\r
+echo $0|grep ksh >/dev/null && PS1="$PS1_bak"\r
+echo $0|grep '^sh' >/dev/null && PS1="$PS1_bak"\r
+clear\r`
+
+      if (this.props.sftpPathFollowSsh) {
+        this.socket.send(ps1Cmd)
+        this.term.cwdId = cwdId
+      } else {
+        this.socket.send(ps1RestoreCmd)
+        delete this.term.cwdId
+      }
+    }
   }
 
   componentWillUnmount () {
@@ -908,11 +936,17 @@ class Term extends Component {
   getCwd = () => {
     if (
       this.props.sftpPathFollowSsh &&
-      this.term.buffer.active.type !== 'alternate'
+      this.term.buffer.active.type !== 'alternate' && !this.term.cwdId
     ) {
-      const cmd = `\recho "${cwdId}$PWD"\r`
       this.term.cwdId = cwdId
-      this.socket.send(cmd)
+
+      const ps1Cmd = `\recho $0|grep csh >/dev/null && set prompt_bak="$prompt" && set prompt="$prompt${cwdId}%/${cwdId}"\r
+echo $0|grep zsh >/dev/null && PS1_bak=$PS1&&PS1=$PS1'${cwdId}%d${cwdId}'\r
+echo $0|grep ash >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
+echo $0|grep ksh >/dev/null && PS1_bak=$PS1&&PS1=$PS1'\`echo ${cwdId}$PWD${cwdId}\`'\r
+clear\r`
+
+      this.socket.send(ps1Cmd)
     }
   }
 

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

@@ -0,0 +1,28 @@
+import { ColorPicker } from '../bookmark-form/color-picker'
+
+export default function ThemeEditSlot (props) {
+  const {
+    name,
+    value,
+    disabled
+  } = props
+  function onChange (v) {
+    props.onChange(v, name)
+  }
+  const pickerProps = {
+    value,
+    onChange,
+    isRgba: value.startsWith('rgba'),
+    disabled
+  }
+  return (
+    <div className='theme-edit-slot'>
+      <span className='iblock mg1r'>{name}</span>
+      <span className='iblock'>
+        <ColorPicker
+          {...pickerProps}
+        />
+      </span>
+    </div>
+  )
+}

package/client/components/theme/theme-editor.jsx

@@ -0,0 +1,37 @@
+// import { buildDefaultThemes } from '../../common/terminal-theme'
+import ThemeEditSlot from './theme-edit-slot'
+
+export default function ThemeEditor (props) {
+  const { themeText, disabled } = props
+  const obj = themeText.split('\n').reduce((prev, line) => {
+    let [key = '', value = ''] = line.split('=')
+    key = key.trim()
+    value = value.trim()
+    if (!key || !value) {
+      return prev
+    }
+    prev[key] = value
+    return prev
+  }, {})
+  const keys = Object.keys(obj)
+  function onChange (value, name) {
+    props.onChange(value, name)
+  }
+  return (
+    <div className='editor-u-picker'>
+      {
+        keys.map(k => {
+          return (
+            <ThemeEditSlot
+              key={k}
+              name={k}
+              value={obj[k]}
+              disabled={disabled}
+              onChange={onChange}
+            />
+          )
+        })
+      }
+    </div>
+  )
+}

package/client/components/{terminal-theme/index.jsx → theme/theme-form.jsx}

@@ -1,10 +1,12 @@
-import { useRef } from 'react'
-import { Button, Input, message, Upload, Form } from 'antd'
+import { useRef, useState } from 'react'
+import { Button, Input, message, Upload, Form, Space } from 'antd'
 import { convertTheme, convertThemeToText, exportTheme, validThemeProps, requiredThemeProps } from '../../common/terminal-theme'
 import { defaultTheme, defaultThemeLight } from '../../common/constants'
 import generate from '../../common/uid'
 import Link from '../common/external-link'
 import InputAutoFocus from '../common/input-auto-focus'
+import ThemePicker from './theme-editor'
+// import './theme-form.styl'
 
 const { TextArea } = Input
 const FormItem = Form.Item
@@ -12,6 +14,8 @@ const e = window.translate
 
 export default function ThemeForm (props) {
   const [form] = Form.useForm()
+  const [txt, setTxt] = useState(convertThemeToText(props.formData))
+  const [editor, setEditor] = useState('theme-editor-color-picker')
   const action = useRef('submit')
   function exporter () {
     exportTheme(props.formData.id)
@@ -82,18 +86,27 @@ export default function ThemeForm (props) {
       return Promise.reject(message)
     }
     // Return an object with the flag and the message
+    setTxt(value)
     return Promise.resolve()
   }
 
   async function handleSubmit (res) {
+    if (!res.themeText) {
+      res.themeText = txt
+    }
     const { formData } = props
     const {
       themeName,
       themeText
     } = res
+    const converted = convertTheme(themeText)
+
+    if (converted.uiThemeConfig.main !== converted.themeConfig.background) {
+      converted.themeConfig.background = converted.uiThemeConfig.main
+    }
     const update = {
       name: themeName,
-      ...convertTheme(themeText)
+      ...converted
     }
     const update1 = {
       ...update,
@@ -135,15 +148,22 @@ export default function ThemeForm (props) {
   async function beforeUpload (file) {
     const txt = await window.fs.readFile(file.path)
     const { name, themeConfig, uiThemeConfig } = convertTheme(txt)
+    const tt = convertThemeToText({
+      themeConfig, uiThemeConfig
+    })
     form.setFieldsValue({
       themeName: name,
-      themeText: convertThemeToText({
-        themeConfig, uiThemeConfig
-      })
+      themeText: tt
     })
+    setTxt(tt)
     return false
   }
 
+  function handleSwitchEditor (e) {
+    e.preventDefault()
+    setEditor(editor === 'theme-editor-txt' ? 'theme-editor-color-picker' : 'theme-editor-txt')
+  }
+
   function renderFuncs (id) {
     if (!id) {
       return null
@@ -160,6 +180,43 @@ export default function ThemeForm (props) {
     )
   }
 
+  function onPickerChange (value, name) {
+    const realName = name.includes('terminal:')
+      ? name.replace('terminal:', '')
+      : name
+    const text = form.getFieldValue('themeText')
+    const obj = convertTheme(text)
+    if (obj.themeConfig[realName]) {
+      obj.themeConfig[realName] = value
+    } else if (obj.uiThemeConfig[realName]) {
+      obj.uiThemeConfig[realName] = value
+    }
+    form.setFieldsValue({
+      themeText: convertThemeToText(obj)
+    })
+    setTxt(convertThemeToText(obj))
+  }
+
+  function renderTxt () {
+    return (
+      <FormItem
+        noStyle
+        name='themeText'
+        hasFeedback
+        rules={[{
+          max: 1000, message: '1000 chars max'
+        }, {
+          required: true,
+          message: 'theme config required'
+        }, {
+          validator: validateInput
+        }]}
+      >
+        <TextArea rows={33} disabled={disabled} />
+      </FormItem>
+    )
+  }
+
   const {
     readonly,
     id,
@@ -173,12 +230,18 @@ export default function ThemeForm (props) {
   const { autofocustrigger } = props.store
   const isDefaultTheme = id === defaultTheme.id || id === defaultThemeLight.id
   const disabled = readonly || isDefaultTheme
+  const switchTxt = editor === 'theme-editor-txt' ? e('editWithColorPicker') : e('editWithTextEditor')
+  const pickerProps = {
+    onChange: onPickerChange,
+    themeText: txt,
+    disabled
+  }
   return (
     <Form
       onFinish={handleSubmit}
       form={form}
       initialValues={initialValues}
-      className='form-wrap'
+      className={editor}
       name='terminal-theme-form'
       layout='vertical'
     >
@@ -202,35 +265,41 @@ export default function ThemeForm (props) {
       <FormItem
         label={e('themeConfig')}
       >
-        <div className='pd1b'>
-          <Upload
-            beforeUpload={beforeUpload}
-            fileList={[]}
-            className='mg1b'
-          >
-            <Button
-              type='dashed'
-              disabled={disabled}
+        <div className='mg1b fix'>
+          <span className='fleft'>
+            <Space compact>
+              <Button
+                type='dashed'
+                onClick={handleSwitchEditor}
+              >
+                {switchTxt}
+              </Button>
+            </Space>
+          </span>
+          <span className='fright'>
+            <Upload
+              beforeUpload={beforeUpload}
+              fileList={[]}
+              className='mg1b'
             >
-              {e('importFromFile')}
-            </Button>
-          </Upload>
+              <Button
+                type='dashed'
+                disabled={disabled}
+              >
+                {e('importFromFile')}
+              </Button>
+            </Upload>
+          </span>
         </div>
-        <FormItem
-          noStyle
-          name='themeText'
-          hasFeedback
-          rules={[{
-            max: 1000, message: '1000 chars max'
-          }, {
-            required: true,
-            message: 'theme config required'
-          }, {
-            validator: validateInput
-          }]}
-        >
-          <TextArea rows={33} disabled={disabled} />
-        </FormItem>
+        {
+          editor === 'theme-editor-txt'
+            ? renderTxt()
+            : (
+              <ThemePicker
+                {...pickerProps}
+              />
+              )
+        }
       </FormItem>
       {
         disabled

package/client/components/theme/theme-form.styl

@@ -0,0 +1,10 @@
+.theme-editor-txt
+  .editor-u-textarea
+    display block !important
+  .editor-u-picker
+    display none !important
+.theme-editor-color-picker
+  .editor-u-textarea
+    display none !important
+  .editor-u-picker
+    display block !important

package/client/components/vnc/vnc-session.jsx

@@ -71,7 +71,8 @@ export default class VncSession extends RdpSession {
       server = ''
     } = config
     const { sessionId, id } = this.props
-    const tab = deepCopy(this.props.tab || {})
+    const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
+    console.log('vnc tab', this.props.tab)
     const {
       type,
       term: terminalType,

package/client/store/common.js

@@ -12,7 +12,8 @@ import {
   modals,
   leftSidebarWidthKey,
   rightSidebarWidthKey,
-  dismissDelKeyTipLsKey
+  dismissDelKeyTipLsKey,
+  connectionMap
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
 
@@ -212,10 +213,11 @@ export default Store => {
 
   Store.prototype.applyProfile = function (tab) {
     const {
-      authType,
-      profile
+      profile,
+      type,
+      authType
     } = tab
-    if (authType !== 'profiles') {
+    if (!profile || authType !== 'profiles') {
       return tab
     }
     const p = window.store.profiles.find(x => x.id === profile)
@@ -227,6 +229,25 @@ export default Store => {
     // delete tab.passphrase
     delete p.name
     delete p.id
+    if (type === connectionMap.rdp) {
+      return {
+        ...tab,
+        ...p.rdp
+      }
+    } else if (type === connectionMap.vnc) {
+      return {
+        ...tab,
+        ...p.vnc
+      }
+    } else if (type === connectionMap.telnet) {
+      return {
+        ...tab,
+        ...p.telnet
+      }
+    }
+    delete p.rdp
+    delete p.vnc
+    delete p.telnet
     return {
       ...tab,
       ...p

package/client/store/sync.js

@@ -120,7 +120,6 @@ export default (Store) => {
     const { store } = window
     const currentSyncType = store.syncType
     const currentSettings = store.config.syncSetting || {}
-    console.log('currentSettings: ', currentSyncType, currentSettings)
     // Create a new object without the current sync type's settings
     const updatedSettings = Object.keys(currentSettings).reduce((acc, key) => {
       if (!key.startsWith(currentSyncType)) {
@@ -128,8 +127,6 @@ export default (Store) => {
       }
       return acc
     }, {})
-    console.log('updatedSettings: ', updatedSettings)
-
     store.setConfig({
       syncSetting: updatedSettings
     })

package/package.json

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