@electerm/electerm-react 2.1.16 → 2.2.0

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

@@ -145,7 +145,7 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
         />
       )
     case 'terminalBackground':
-      return <TerminalBackgroundField key={name} form={form} />
+      return <TerminalBackgroundField key={name} />
     case 'profileItem':
       return <ProfileItem key={name} store={ctxProps.store} profileFilter={item.profileFilter} />
     case 'quickCommands':

package/client/components/bookmark-form/common/init-values.js

@@ -1,7 +1,7 @@
 /**
  * Common utilities for config initValues
  */
-import { newBookmarkIdPrefix } from '../../../common/constants.js'
+import { newBookmarkIdPrefix, authTypeMap } from '../../../common/constants.js'
 import { getColorFromCategory } from '../../../common/get-category-color.js'
 import findBookmarkGroupId from '../../../common/find-bookmark-group-id.js'
 import deepCopy from 'json-deep-copy'
@@ -81,3 +81,12 @@ export function getTerminalBackgroundDefaults (defaultSetting) {
     }
   }
 }
+
+export function getAuthTypeDefault (props) {
+  const r = {}
+  if (window.store.defaultProfileId) {
+    r.profile = window.store.defaultProfileId
+    r.authType = authTypeMap.profiles
+  }
+  return r
+}

package/client/components/bookmark-form/common/terminal-background.jsx

@@ -11,7 +11,7 @@ const FormItem = Form.Item
 const e = window.translate
 
 // Custom form control that implements the antd form control interface
-const TerminalBgControl = ({ value = {}, onChange }) => {
+const TerminalBgControl = ({ value, onChange }) => {
   const handleChange = (newValue, name) => {
     const updatedValue = {
       ...value,
@@ -20,16 +20,25 @@ const TerminalBgControl = ({ value = {}, onChange }) => {
     onChange(updatedValue)
   }
 
+  const handleBatchUpdate = (updates) => {
+    const updatedValue = {
+      ...value,
+      ...updates
+    }
+    onChange(updatedValue)
+  }
+
   return (
     <TerminalBackgroundConfig
       config={value}
       onChangeValue={handleChange}
+      batchUpdate={handleBatchUpdate}
       name='terminalBackgroundImagePath'
     />
   )
 }
 
-export default function renderTermBg (form) {
+export default function renderTermBg () {
   const formProps = {
     ...formItemLayout,
     name: 'terminalBackground',

package/client/components/bookmark-form/config/ftp.js

@@ -1,6 +1,6 @@
 import { formItemLayout } from '../../../common/form-layout.js'
 import { terminalFtpType } from '../../../common/constants.js'
-import { createBaseInitValues } from '../common/init-values.js'
+import { createBaseInitValues, getAuthTypeDefault } from '../common/init-values.js'
 import { commonFields } from './common-fields.js'
 import { isEmpty } from 'lodash-es'
 
@@ -14,7 +14,8 @@ const ftpConfig = {
       port: 21,
       user: '',
       password: '',
-      secure: false
+      secure: false,
+      ...getAuthTypeDefault(props)
     })
   },
   layout: formItemLayout,

package/client/components/bookmark-form/config/local.js

@@ -1,6 +1,11 @@
 import { formItemLayout } from '../../../common/form-layout.js'
 import { terminalLocalType, terminalTypes } from '../../../common/constants.js'
-import { createBaseInitValues, getTerminalDefaults, getSshDefaults } from '../common/init-values.js'
+import {
+  createBaseInitValues,
+  getTerminalDefaults,
+  getSshDefaults,
+  getTerminalBackgroundDefaults
+} from '../common/init-values.js'
 import defaultSettings from '../../../common/default-setting.js'
 import { commonFields } from './common-fields.js'
 
@@ -13,7 +18,8 @@ const localConfig = {
     const { store } = props
     return createBaseInitValues(props, terminalLocalType, {
       ...getTerminalDefaults(store),
-      ...getSshDefaults()
+      ...getSshDefaults(),
+      ...getTerminalBackgroundDefaults(defaultSettings)
     })
   },
   layout: formItemLayout,

package/client/components/bookmark-form/config/rdp.js

@@ -1,6 +1,6 @@
 import { formItemLayout } from '../../../common/form-layout.js'
 import { terminalRdpType } from '../../../common/constants.js'
-import { createBaseInitValues } from '../common/init-values.js'
+import { createBaseInitValues, getAuthTypeDefault } from '../common/init-values.js'
 import { isEmpty } from 'lodash-es'
 import { commonFields } from './common-fields.js'
 
@@ -11,7 +11,8 @@ const rdpConfig = {
   type: terminalRdpType,
   initValues: (props) => {
     return createBaseInitValues(props, terminalRdpType, {
-      port: 3389
+      port: 3389,
+      ...getAuthTypeDefault(props)
     })
   },
   layout: formItemLayout,

package/client/components/bookmark-form/config/ssh.js

@@ -2,7 +2,7 @@
 import { formItemLayout } from '../../../common/form-layout.js'
 import { connectionMap, authTypeMap, defaultEnvLang } from '../../../common/constants.js'
 import defaultSetting from '../../../common/default-setting.js'
-import { createBaseInitValues, getTerminalDefaults, getSshDefaults, getTerminalBackgroundDefaults } from '../common/init-values.js'
+import { createBaseInitValues, getTerminalDefaults, getSshDefaults, getTerminalBackgroundDefaults, getAuthTypeDefault } from '../common/init-values.js'
 import { sshAuthFields, sshSettings, quickCommandsTab, sshTunnelTab, connectionHoppingTab } from './common-fields.js'
 
 const e = window.translate
@@ -24,7 +24,8 @@ const sshConfig = {
       cipher: [],
       ...getTerminalDefaults(store),
       ...getSshDefaults(),
-      ...getTerminalBackgroundDefaults(defaultSetting)
+      ...getTerminalBackgroundDefaults(defaultSetting),
+      ...getAuthTypeDefault(props)
     })
   },
   layout: formItemLayout,

package/client/components/bookmark-form/config/telnet.js

@@ -1,7 +1,12 @@
 import { formItemLayout } from '../../../common/form-layout.js'
 import { terminalTelnetType, authTypeMap } from '../../../common/constants.js'
 import defaultSettings from '../../../common/default-setting.js'
-import { createBaseInitValues, getSshDefaults, getTerminalBackgroundDefaults } from '../common/init-values.js'
+import {
+  createBaseInitValues,
+  getSshDefaults,
+  getTerminalBackgroundDefaults,
+  getAuthTypeDefault
+} from '../common/init-values.js'
 import { telnetAuthFields, terminalSettings, quickCommandsTab } from './common-fields.js'
 
 const e = window.translate
@@ -18,7 +23,8 @@ const telnetConfig = {
       authType: authTypeMap.password,
       term: defaultSettings.terminalType,
       ...getSshDefaults(),
-      ...getTerminalBackgroundDefaults(defaultSettings)
+      ...getTerminalBackgroundDefaults(defaultSettings),
+      ...getAuthTypeDefault(props)
     })
   },
   layout: formItemLayout,

package/client/components/bookmark-form/config/vnc.js

@@ -1,6 +1,6 @@
 import { formItemLayout } from '../../../common/form-layout.js'
 import { terminalVncType } from '../../../common/constants.js'
-import { createBaseInitValues } from '../common/init-values.js'
+import { createBaseInitValues, getAuthTypeDefault } from '../common/init-values.js'
 import { isEmpty } from 'lodash-es'
 import { commonFields, connectionHoppingTab } from './common-fields.js'
 
@@ -14,7 +14,8 @@ const vncConfig = {
       port: 5900,
       viewOnly: false,
       scaleViewport: true,
-      connectionHoppings: []
+      connectionHoppings: [],
+      ...getAuthTypeDefault(props)
     })
   },
   layout: formItemLayout,

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

@@ -22,9 +22,10 @@ import { isValidIP } from '../../common/is-ip'
 import { action as manateAction } from 'manate'
 
 export default function FormRenderer ({ config, props }) {
+  const initialValues = config.initValues(props)
   const [form] = Form.useForm()
   const [ips, setIps] = useState([])
-  const [authType, setAuthType] = useState(props.formData.authType || authTypeMap.password)
+  const [authType, setAuthType] = useState(initialValues.authType || authTypeMap.password)
   const [testing, setTesting] = useState(false)
   const action = useRef('submit')
 
@@ -156,6 +157,9 @@ export default function FormRenderer ({ config, props }) {
       ...props.formData,
       ...res
     }
+    if (!obj.terminalBackground?.terminalBackgroundImagePath) {
+      delete obj.terminalBackground
+    }
     if (isTest) {
       return test(obj)
     }
@@ -266,7 +270,6 @@ export default function FormRenderer ({ config, props }) {
     setAuthType(newAuthType)
   }
 
-  // Context props for specialized components
   const ctxProps = {
     ...props,
     form,
@@ -282,7 +285,6 @@ export default function FormRenderer ({ config, props }) {
     useIp
   }
 
-  const initialValues = config.initValues(props)
   const tabs = typeof config.tabs === 'function' ? (config.tabs() || []) : (config.tabs || [])
   let content = null
 

package/client/components/common/animate-text.jsx

@@ -3,7 +3,6 @@
  */
 
 import React from 'react'
-import './animate-text.styl'
 
 export default class AnimateText extends React.PureComponent {
   constructor (props) {
@@ -13,7 +12,7 @@ export default class AnimateText extends React.PureComponent {
 
   componentDidUpdate () {
     const dom = this.textRef.current
-    dom.className = (this.props.className || 'animate-text-wrap') + ' animated bounceIn'
+    dom.className = (this.props.className || 'animate-text-wrap')
     this.timer = setTimeout(() => {
       if (dom) {
         dom.className = this.props.className || 'animate-text-wrap'

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

@@ -2,14 +2,16 @@ import { useState } from 'react'
 import {
   Form,
   message,
+  Switch,
   Button
 } from 'antd'
 import InputAutoFocus from '../common/input-auto-focus'
 import { formItemLayout } from '../../common/form-layout'
+import HelpIcon from '../common/help-icon'
 import {
   settingMap
 } from '../../common/constants'
-
+import { action } from 'manate'
 import ProfileTabs from './profile-tabs'
 
 const FormItem = Form.Item
@@ -28,13 +30,15 @@ export default function ProfileFormElem (props) {
     }
     return id
   }
-  async function handleSubmit (res) {
+  const handleSubmit = action(async function (res) {
     const { formData } = props
     const update1 = {
       ...res,
       id: genId()
     }
+    let defaultId = update1.id
     if (formData.id) {
+      defaultId = formData.id
       props.store.editItem(formData.id, res, settingMap.profiles)
     } else {
       props.store.addItem(update1, settingMap.profiles)
@@ -43,14 +47,21 @@ export default function ProfileFormElem (props) {
         name: e('profile')
       })
     }
+    window.store.makeSureProfileDefault(defaultId)
     message.success(e('saved'))
-  }
+  })
   const tabsProps = {
     activeTab,
     onChangeTab: setActiveTab,
     form,
     store: props.store
   }
+  const profileDefaultWikiLink = 'https://github.com/electerm/electerm/wiki/Default-Profile'
+  const defaultLabel = (
+    <span>
+      {e('default')} <HelpIcon link={profileDefaultWikiLink} />
+    </span>
+  )
   return (
     <Form
       form={form}
@@ -73,6 +84,14 @@ export default function ProfileFormElem (props) {
       >
         <InputAutoFocus />
       </FormItem>
+      <FormItem
+        {...formItemLayout}
+        label={defaultLabel}
+        name='isDefault'
+        valuePropName='checked'
+      >
+        <Switch />
+      </FormItem>
       <ProfileTabs {...tabsProps} />
       <FormItem>
         <Button

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

@@ -5,32 +5,45 @@ import ProfileFormVnc from './profile-form-vnc'
 import ProfileFormFtp from './profile-form-ftp'
 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
   }
+  const items = [
+    {
+      label: 'ssh',
+      key: 'ssh',
+      forceRender: true,
+      children: <ProfileFormSsh form={form} store={store} />
+    },
+    {
+      label: 'telnet',
+      key: 'telnet',
+      forceRender: true,
+      children: <ProfileFormTelnet form={form} store={store} />
+    },
+    {
+      label: 'vnc',
+      key: 'vnc',
+      forceRender: true,
+      children: <ProfileFormVnc />
+    },
+    {
+      label: 'rdp',
+      key: 'rdp',
+      forceRender: true,
+      children: <ProfileFormRdp />
+    },
+    {
+      label: 'ftp',
+      key: 'ftp',
+      forceRender: true,
+      children: <ProfileFormFtp />
+    }
+  ]
   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>
-      <TabPane tab='ftp' key='ftp' forceRender>
-        <ProfileFormFtp />
-      </TabPane>
-    </Tabs>
-
+    <Tabs {...tabsProps} items={items} />
   )
 }

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

@@ -424,7 +424,7 @@ export default class SettingCommon extends Component {
             {e('global')} {e('proxy')}
             <HelpIcon
               title={table}
-              overlayInnerStyle={style}
+              style={{ body: { style } }}
             />
           </span>
           <Switch

package/client/components/setting-panel/terminal-bg-config.jsx

@@ -20,7 +20,8 @@ export default function TerminalBackgroundConfig ({
   onChangeValue,
   name,
   config,
-  isGlobal = false
+  isGlobal = false,
+  batchUpdate
 }) {
   const [showTextModal, setShowTextModal] = useState(false)
   const value = config[name]
@@ -71,7 +72,7 @@ export default function TerminalBackgroundConfig ({
     // Show helpful text when text background is selected but no text is configured
     dataSource[2] = {
       value: textTerminalBgValue,
-      desc: `📝 ${e('clickToConfigureText') || 'Click to configure text'}`
+      desc: '📝 Click to configure text'
     }
   }
 
@@ -93,12 +94,24 @@ export default function TerminalBackgroundConfig ({
   }
 
   const handleTextBgModalOk = (textConfig) => {
-    // Store text configuration in the config
-    onChangeValue(textConfig.text, 'terminalBackgroundText')
-    onChangeValue(textConfig.fontSize, 'terminalBackgroundTextSize')
-    onChangeValue(textConfig.color, 'terminalBackgroundTextColor')
-    onChangeValue(textConfig.fontFamily, 'terminalBackgroundTextFontFamily')
-    onChange(textTerminalBgValue)
+    if (batchUpdate) {
+      // Use batch update if available
+      const updates = {
+        terminalBackgroundText: textConfig.text,
+        terminalBackgroundTextSize: textConfig.fontSize,
+        terminalBackgroundTextColor: textConfig.color,
+        terminalBackgroundTextFontFamily: textConfig.fontFamily,
+        [name]: textTerminalBgValue
+      }
+      batchUpdate(updates)
+    } else {
+      // Fall back to sequential updates
+      onChangeValue(textConfig.text, 'terminalBackgroundText')
+      onChangeValue(textConfig.fontSize, 'terminalBackgroundTextSize')
+      onChangeValue(textConfig.color, 'terminalBackgroundTextColor')
+      onChangeValue(textConfig.fontFamily, 'terminalBackgroundTextFontFamily')
+      onChange(textTerminalBgValue)
+    }
     setShowTextModal(false)
   }
 
@@ -204,7 +217,6 @@ export default function TerminalBackgroundConfig ({
       label: item.desc
     }
   }
-
   return (
     <div className='pd2b'>
       <div className='pd1b'>

package/client/components/sftp/address-bar.jsx

@@ -90,7 +90,6 @@ function renderHistory (props, type) {
   }
   const cls = classnames(
     'sftp-history',
-    'animated',
     `sftp-history-${type}`,
     { focused }
   )

package/client/components/sftp/file-icon.jsx

@@ -2,7 +2,7 @@
  * file/folder icon by ext or name
  */
 
-import { getIconForFile, getIconForFolder } from 'vscode-icons-js'
+import { getIconForFile, getIconForFolder } from 'electerm-icons'
 // import Icon from '@ant-design/icons'
 
 export default function FileIcon ({ file, ...extra }) {

package/client/components/sftp/sftp-entry.jsx

@@ -1064,7 +1064,6 @@ export default class Sftp extends Component {
     }
     const cls = classnames(
       'sftp-history',
-      'animated',
       `sftp-history-${type}`,
       { focused }
     )

package/client/components/sidebar/index.jsx

@@ -189,7 +189,7 @@ export default memo(function Sidebar (props) {
                   className='control-icon-wrap'
                 >
                   <UpCircleOutlined
-                    className='iblock font18 control-icon hvr-bob upgrade-icon'
+                    className='iblock font18 control-icon upgrade-icon'
                     onClick={handleShowUpgrade}
                   />
                 </div>

package/client/components/sidebar/sidebar.styl

@@ -95,44 +95,6 @@
     &:hover
       color text-light
 
-// Hover.css (http://ianlunn.github.io/Hover/)
-// Version: 2.3.2
-// Author: Ian Lunn @IanLunn
-// Author URL: http://ianlunn.co.uk/
-// Github: https://github.com/IanLunn/Hover
-// Hover.css Copyright Ian Lunn 2017. Generated with Sass.
-
-// Bob
-@keyframes hvr-bob
-  0%
-    transform translateY(-8px)
-
-  50%
-    transform translateY(-4px)
-
-  100%
-    transform translateY(-8px)
-
-@keyframes hvr-bob-float
-  100%
-    transform translateY(-8px)
-
-.hvr-bob
-  transform perspective(1px) translateZ(0)
-  box-shadow 0 0 1px rgba(0, 0, 0, 0)
-  animation-name hvr-bob-float, hvr-bob
-  animation-duration .3s, 1.5s
-  animation-delay 0s, .3s
-  animation-timing-function ease-out, ease-in-out
-  animation-iteration-count 1, infinite
-  animation-fill-mode forwards
-  animation-direction normal, alternate
-
-.hvr-bob-fast
-  transform perspective(2px) translateZ(0)
-  animation-duration .15s, .3s
-  animation-delay 0s, .15s
-
 .btns .upgrade-icon
   color success
 .close-info-modal

package/client/components/sidebar/transfer-list.jsx

@@ -23,7 +23,6 @@ export default memo(function TransferList (props) {
   }
   const color = fileTransfers.some(item => item.error) ? 'red' : 'green'
   const bdProps = {
-    className: len ? 'hvr-bob hvr-bob-fast' : '',
     count: len,
     size: 'small',
     offset: [-10, -5],
@@ -35,16 +34,19 @@ export default memo(function TransferList (props) {
     transferHistory,
     transferTab
   }
+  const popProps = {
+    placement: 'right',
+    destroyOnHidden: true,
+    overlayClassName: 'transfer-list-card',
+    content: <TransferModal {...transferModalProps} />
+  }
   return (
     <div
       className='control-icon-wrap'
       title={e('fileTransfers')}
     >
       <Popover
-        placement='right'
-        destroyTooltipOnHide
-        overlayClassName='transfer-list-card'
-        content={<TransferModal {...transferModalProps} />}
+        {...popProps}
       >
         <Badge
           {...bdProps}

package/client/components/ssh-config/ssh-config-load-notify.jsx

@@ -49,7 +49,8 @@ export default function SshConfigLoadNotify (props) {
       ignoreSshConfig !== 'yes' &&
       settingTab === 'bookmarks' &&
       showModal &&
-      sshConfigLoaded !== 'yes'
+      sshConfigLoaded !== 'yes' &&
+      window.store.hasNodePty
 
     if (shouldShow) {
       showNotification()

package/client/components/terminal/command-tracker-addon.js

@@ -71,6 +71,12 @@ export class CommandTrackerAddon {
     }
   }
 
+  clearCommand () {
+    this.activeCommand = ''
+    this.currentCommand = ''
+    this.cursorPosition = 0
+  }
+
   getCurrentCommand () {
     return this.activeCommand || this.currentCommand
   }

package/client/store/common.js

@@ -313,6 +313,15 @@ export default Store => {
     }
   }
 
+  Store.prototype.makeSureProfileDefault = function (defaultId) {
+    const { profiles } = window.store
+    for (const p of profiles) {
+      if (p.id !== defaultId) {
+        delete p.isDefault
+      }
+    }
+  }
+
   Store.prototype.aiConfigMissing = function () {
     return aiConfigsArr.slice(0, -1).some(k => !window.store.config[k])
   }

package/client/store/store.js

@@ -122,6 +122,12 @@ class Store {
       currentTab.pane === paneMap.terminal
   }
 
+  get defaultProfileId () {
+    const { profiles } = window.store
+    const defaultProfile = profiles.find(p => p.isDefault)
+    return defaultProfile?.id || ''
+  }
+
   get quickCommandTags () {
     const { quickCommands } = window.store
     return uniq(

package/package.json

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

package/client/components/common/animate-text.styl

@@ -1,39 +0,0 @@
-// animate.css -http://daneden.me/animate
-// Version - 3.5.2
-// Licensed under the MIT license - http://opensource.org/licenses/MIT
-// Copyright (c) 2017 Daniel Eden
-
-.animated
-  animation-duration 1s
-  animation-fill-mode both
-
-.animated.bounceIn
-  animation-duration .45s
-
-@keyframes bounceIn
-  from, 20%, 40%, 60%, 80%, to
-    animation-timing-function cubic-bezier(0.215, 0.610, 0.355, 1.000)
-
-  0%
-    opacity 0
-    transform scale3d(.3, .3, .3)
-
-  20%
-    transform scale3d(1.1, 1.1, 1.1)
-
-  40%
-    transform scale3d(.9, .9, .9)
-
-  60%
-    opacity 1
-    transform scale3d(1.03, 1.03, 1.03)
-
-  80%
-    transform scale3d(.97, .97, .97)
-
-  to
-    opacity 1
-    transform scale3d(1, 1, 1)
-
-.bounceIn
-  animation-name bounceIn