@electerm/electerm-react 1.100.56 → 1.101.10

package/client/components/main/main.jsx

@@ -79,6 +79,7 @@ export default auto(function Index (props) {
     store.isSecondInstance = window.pre.runSync('isSecondInstance')
     store.initData()
     store.checkForDbUpgrade()
+    store.handleGetSerials()
     // window.pre.runGlobalAsync('registerDeepLink')
   }, [])
 
@@ -117,12 +118,20 @@ export default auto(function Index (props) {
   const ext1 = {
     className: cls
   }
+  // Get active tab IDs
+  const activeTabIds = [
+    store.activeTabId0,
+    store.activeTabId1,
+    store.activeTabId2,
+    store.activeTabId3
+  ].filter(Boolean) // Remove empty strings
+
   const bgTabs = config.terminalBackgroundImagePath === 'index' ||
                   config.terminalBackgroundImagePath === 'randomShape' ||
                   config.terminalBackgroundImagePath === textTerminalBgValue
-    ? store.getTabs()
+    ? store.getTabs().filter(tab => activeTabIds.includes(tab.id))
     : store.getTabs().filter(tab =>
-      tab.terminalBackground?.terminalBackgroundImagePath
+      activeTabIds.includes(tab.id) && tab.terminalBackground?.terminalBackgroundImagePath
     )
   const confsCss = {
     ...Object.keys(config)
@@ -131,6 +140,7 @@ export default auto(function Index (props) {
         ...p,
         [k]: config[k]
       }), {}),
+    activeTabIds,
     tabs: bgTabs.map(tab => {
       return {
         tabCount: tab.tabCount,

package/client/components/main/upgrade.jsx

@@ -9,10 +9,10 @@ import {
   isMac,
   isWin,
   packInfo,
-  srcsSkipUpgradeCheck,
   downloadUpgradeTimeout,
   mirrors
 } from '../../common/constants'
+import { checkSkipSrc } from '../../common/check-skip-src'
 import { debounce } from 'lodash-es'
 import newTerm from '../../common/new-terminal'
 import Markdown from '../common/markdown'
@@ -146,7 +146,7 @@ export default class Upgrade extends PureComponent {
 
   getLatestRelease = async (noSkipVersion = false) => {
     const { installSrc } = this.props
-    if (srcsSkipUpgradeCheck.includes(installSrc)) {
+    if (checkSkipSrc(installSrc)) {
       return
     }
     this.changeProps({
@@ -305,7 +305,7 @@ export default class Upgrade extends PureComponent {
         {this.renderChangeLog()}
       </div>
     )
-    const skip = srcsSkipUpgradeCheck.includes(installSrc)
+    const skip = checkSkipSrc(installSrc)
     return (
       <div className={cls}>
         <div className='upgrade-panel-title fix'>

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/sidebar/info-modal.jsx

@@ -19,9 +19,9 @@ import { auto } from 'manate/react'
 
 import {
   packInfo,
-  infoTabs,
-  srcsSkipUpgradeCheck
+  infoTabs
 } from '../../common/constants'
+import { checkSkipSrc } from '../../common/check-skip-src'
 import './info.styl'
 
 const e = window.translate
@@ -32,7 +32,7 @@ export default auto(function InfoModal (props) {
   }
 
   const renderCheckUpdate = () => {
-    if (window.et.isWebApp || srcsSkipUpgradeCheck.includes(props.installSrc)) {
+    if (window.et.isWebApp || checkSkipSrc(props.installSrc)) {
       return null
     }
     const {

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/entry/basic.js

@@ -38,6 +38,12 @@ async function load () {
     const url = !isDev ? `js/electerm-${version}.js` : 'js/electerm.js'
     rcs.src = url
     rcs.type = 'module'
+    rcs.onload = () => {
+      const loadingEl = document.getElementById('content-loading')
+      if (loadingEl) {
+        document.body.removeChild(loadingEl)
+      }
+    }
     document.body.appendChild(rcs)
   }
   window.getLang = (lang = window.store?.config.language || 'en_us') => {
@@ -50,7 +56,6 @@ async function load () {
   }
   await loadWorker()
   loadScript()
-  document.body.removeChild(document.getElementById('content-loading'))
 }
 
 // window.addEventListener('load', load)

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.56",
+  "version": "1.101.10",
   "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}
-    />
-  )
-}