@electerm/electerm-react 1.39.88 → 1.39.103

package/client/common/constants.js

@@ -217,12 +217,14 @@ export const baseUpdateCheckUrls = [
 export const syncTypes = buildConst([
   'github',
   'gitee',
-  'custom'
+  'custom',
+  'cloud'
 ])
 export const syncTokenCreateUrls = {
   gitee: 'https://gitee.com/github-zxdong262/electerm/wikis/Create%20personal%20access%20token?sort_id=3028409',
   github: 'https://github.com/electerm/electerm/wiki/Create-personal-access-token',
-  custom: 'https://github.com/electerm/electerm/wiki/Custom-sync-server'
+  custom: 'https://github.com/electerm/electerm/wiki/Custom-sync-server',
+  cloud: 'https://electerm-cloud.html5beta.com'
 }
 export const settingSyncId = 'setting-sync'
 export const settingTerminalId = 'setting-terminal'
@@ -354,8 +356,9 @@ export const cwdId = '=__+__'
 export const zmodemTransferPackSize = 1024 * 1024 * 2
 export const syncDataMaps = {
   settings: ['config'],
-  bookmarks: ['bookmarks', 'bookmarkGroups', 'profiles'],
+  bookmarks: ['bookmarks', 'bookmarkGroups'],
   terminalThemes: ['terminalThemes'],
   quickCommands: ['quickCommands'],
+  profiles: ['profiles'],
   addressBookmarks: ['addressBookmarks']
 }

package/client/common/create-title.jsx

@@ -6,8 +6,7 @@ import {
   terminalLocalType
 } from './constants'
 
-const { prefix } = window
-const p = prefix('sftp')
+const e = window.translate
 
 function maskHost (hostOrIp = '') {
   if (/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(hostOrIp)) {
@@ -46,7 +45,7 @@ export default function createTitle (res, hide = true) {
   if (type) {
     f = `[${type}]${f}`
   }
-  return f || p(terminalLocalType)
+  return f || e(terminalLocalType)
 }
 
 export function createTitleTag (obj) {

package/client/common/init-setting-item.js

@@ -9,11 +9,8 @@ import {
 } from './constants'
 import { buildNewTheme } from '../common/terminal-theme'
 
-const { prefix } = window
-const e = prefix('control')
+const e = window.translate
 const newQuickCommand = 'newQuickCommand'
-const q = prefix('quickCommands')
-const f = prefix('form')
 
 export default (arr, tab) => {
   if (tab === settingMap.history) {
@@ -27,12 +24,12 @@ export default (arr, tab) => {
   } else if (tab === settingMap.quickCommands) {
     return {
       id: '',
-      name: q(newQuickCommand)
+      name: encodeURIComponent(newQuickCommand)
     }
   } else if (tab === settingMap.profiles) {
     return {
       id: '',
-      name: f(settingMap.profiles)
+      name: e(settingMap.profiles)
     }
   }
 }

package/client/common/new-terminal.js

@@ -7,8 +7,7 @@ import {
   paneMap
 } from './constants'
 
-const { prefix } = window
-const e = prefix('control')
+const e = window.translate
 window.et.tabCount = 0
 
 export function updateCount (tab) {

package/client/common/terminal-theme.js

@@ -5,8 +5,7 @@
 import { defaultTheme, settingMap } from '../common/constants'
 import download from '../common/download'
 import copy from 'json-deep-copy'
-const { prefix } = window
-const t = prefix('terminalThemes')
+const e = window.translate
 const terminalPrefix = 'terminal:'
 export const requiredThemeProps = [
   'main',
@@ -64,7 +63,7 @@ export const buildNewTheme = (theme = defaultTheme) => {
     copy(theme),
     {
       id: '',
-      name: t('newTheme')
+      name: e('newTheme')
     }
   )
 }

package/client/components/auth/login.jsx

@@ -10,10 +10,11 @@ import {
   ArrowRightOutlined
 } from '@ant-design/icons'
 import Main from '../main/main.jsx'
+import AppDrag from '../tabs/app-drag'
+import WindowControl from '../tabs/window-control'
 import './login.styl'
 
-const { prefix } = window
-const f = prefix('form')
+const e = window.translate
 
 window.store = store
 
@@ -91,6 +92,10 @@ export default class Login extends Component {
     } = this.state
     return (
       <div className='login-wrap'>
+        <AppDrag />
+        <WindowControl
+          store={window.store}
+        />
         <div className='pd3 aligncenter'>
           <LogoElem />
           <div className='pd3 aligncenter'>
@@ -98,7 +103,7 @@ export default class Login extends Component {
               value={pass}
               readOnly={loading}
               onChange={this.handlePassChange}
-              placeholder={f('password')}
+              placeholder={e('password')}
               addonAfter={this.renderAfter()}
               onPressEnter={this.handleSubmit}
             />

package/client/components/auth/login.styl

@@ -4,4 +4,10 @@
   top 0
   width 100%
   height 100%
-  background #fff
+  background #fff
+  .app-drag
+    position fixed
+    right 0
+    top 0
+    width 100%
+    height 30px

package/client/components/batch-op/batch-op.jsx

@@ -32,11 +32,7 @@ import wait from '../../common/wait'
 import { getFolderFromFilePath } from '../sftp/file-read'
 import resolveFilePath from '../../common/resolve'
 
-const { prefix } = window
-const f = prefix('form')
-const t = prefix('transferHistory')
-const c = prefix('common')
-const m = prefix('menu')
+const e = window.translate
 
 export default class BatchOp extends Component {
   state = {
@@ -50,13 +46,13 @@ export default class BatchOp extends Component {
   }
 
   exampleColumns = [
-    { title: f('host'), dataIndex: 'host', key: 'host' },
-    { title: f('port'), dataIndex: 'port', key: 'port', responsive: ['md'] },
-    { title: f('username'), dataIndex: 'username', key: 'username', responsive: ['lg'] },
-    { title: f('password'), dataIndex: 'password', key: 'password', responsive: ['xl'] },
+    { title: e('host'), dataIndex: 'host', key: 'host' },
+    { title: e('port'), dataIndex: 'port', key: 'port', responsive: ['md'] },
+    { title: e('username'), dataIndex: 'username', key: 'username', responsive: ['lg'] },
+    { title: e('password'), dataIndex: 'password', key: 'password', responsive: ['xl'] },
     { title: 'Command', dataIndex: 'command', key: 'command', responsive: ['lg'] },
-    { title: t('localPath'), dataIndex: 'localPath', key: 'localPath', responsive: ['xl'] },
-    { title: t('remotePath'), dataIndex: 'remotePath', key: 'remotePath', responsive: ['xl'] },
+    { title: e('localPath'), dataIndex: 'localPath', key: 'localPath', responsive: ['xl'] },
+    { title: e('remotePath'), dataIndex: 'remotePath', key: 'remotePath', responsive: ['xl'] },
     { title: 'Action', dataIndex: 'action', key: 'action', responsive: ['md'] },
     { title: 'Command After', dataIndex: 'commandAfter', key: 'commandAfter', responsive: ['xl'] }
   ]
@@ -209,7 +205,7 @@ export default class BatchOp extends Component {
       await runCmd(tab.pid, tab.sessionId, conf.cmdAfterTransfer)
       this.updateState('run cmd2 done', index)
     }
-    this.updateState(c('finished'), index)
+    this.updateState(e('finished'), index)
     document.querySelector('.tabs .tab.active .tab-close .anticon').click()
   }
 
@@ -462,7 +458,7 @@ export default class BatchOp extends Component {
         <Button
           onClick={this.handleExec}
           loading={this.state.working}
-        >{c('execute')}
+        >{e('execute')}
         </Button>
       </div>
     )
@@ -471,22 +467,8 @@ export default class BatchOp extends Component {
   translate = k => {
     if (k === 'index') {
       return 'NO.'
-    } else if (
-      [
-        'host',
-        'port',
-        'username',
-        'password'
-      ].includes(k)
-    ) {
-      return f(k)
-    } else if (
-      k.includes('Path')
-    ) {
-      return t(k)
-    } else {
-      return c(k)
     }
+    return e(k)
   }
 
   renderContent () {
@@ -509,12 +491,12 @@ export default class BatchOp extends Component {
       <div>
         <div className='pd1y'>
           <h2>
-            {c('batchOperation')}
+            {e('batchOperation')}
             <HelpIcon
               link={batchOpHelpLink}
             />
           </h2>
-          <div className='pd1y'>{c('examples')}:</div>
+          <div className='pd1y'>{e('examples')}:</div>
           <Table
             {...exampleTableProps}
           />
@@ -546,7 +528,7 @@ export default class BatchOp extends Component {
               type='dashed'
               disabled={disabled}
             >
-              {c('importFromCSV')}
+              {e('importFromCSV')}
             </Button>
           </Upload>
         </div>
@@ -565,7 +547,7 @@ export default class BatchOp extends Component {
               loading={loading}
               disabled={disabled}
               htmlType='button'
-            >{c('addToQueue')}
+            >{e('addToQueue')}
             </Button>
           </div>
           <div className='fright'>
@@ -575,7 +557,7 @@ export default class BatchOp extends Component {
               disabled={disabled || !tasks.length}
               type='primary'
               htmlType='button'
-            >{c('execute')}
+            >{e('execute')}
             </Button>
           </div>
         </div>
@@ -632,7 +614,7 @@ export default class BatchOp extends Component {
     })
     if (tab === 'tasks') {
       columns.push({
-        title: m('del'),
+        title: e('del'),
         dataIndex: 'op',
         key: 'op',
         render: (k, rec) => {
@@ -644,7 +626,7 @@ export default class BatchOp extends Component {
               className='act-del pointer'
               onClick={() => this.handleDel(rec)}
             >
-              {m('del')}
+              {e('del')}
             </span>
           )
         }
@@ -657,7 +639,7 @@ export default class BatchOp extends Component {
       }
     })
     const len = data.length
-    const title = `${c(tab)}(${len})`
+    const title = `${e(tab)}(${len})`
     return {
       key: tab,
       label: title,

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

@@ -28,10 +28,7 @@ const RadioButton = Radio.Button
 const RadioGroup = Radio.Group
 const FormItem = Form.Item
 const { Option } = Select
-const { prefix } = window
-const e = prefix('form')
-const c = prefix('common')
-const sf = prefix('sftp')
+const e = window.translate
 
 export default function renderCommon (props) {
   const {
@@ -146,7 +143,7 @@ export default function renderCommon (props) {
       </FormItem>
       <FormItem
         {...formItemLayout}
-        label={c('bookmarkCategory')}
+        label={e('bookmarkCategory')}
         name='category'
       >
         <TreeSelect
@@ -169,7 +166,7 @@ export default function renderCommon (props) {
         name='description'
         hasFeedback
       >
-        <Input.TextArea rows={1} />
+        <Input.TextArea autoSize={{ minRows: 1 }} />
       </FormItem>
       <FormItem
         {...formItemLayout}
@@ -181,14 +178,14 @@ export default function renderCommon (props) {
       <FormItem
         {...formItemLayout}
         name='startDirectoryLocal'
-        label={`${e('startDirectory')}:${sf('local')}`}
+        label={`${e('startDirectory')}:${e('local')}`}
       >
         <Input />
       </FormItem>
       <FormItem
         {...formItemLayout}
         name='startDirectory'
-        label={`${e('startDirectory')}:${sf('remote')}`}
+        label={`${e('startDirectory')}:${e('remote')}`}
       >
         <Input />
       </FormItem>
@@ -199,7 +196,7 @@ export default function renderCommon (props) {
         hasFeedback
       >
         <Input.TextArea
-          rows={1}
+          autoSize={{ minRows: 1 }}
         />
       </FormItem>
       {renderRunScripts()}

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

@@ -7,16 +7,12 @@ import {
 import { sshTunnelHelpLink } from '../../common/constants'
 import HelpIcon from '../common/help-icon'
 
-const { prefix } = window
-const e = prefix('form')
-const s = prefix('setting')
-const h = prefix('ssh')
-const q = prefix('quickCommands')
+const e = window.translate
 
 export default function renderTabs (props) {
   const tunnelTag = (
     <span>
-      {h('sshTunnel')}
+      {e('sshTunnel')}
       <HelpIcon
         link={sshTunnelHelpLink}
       />
@@ -31,7 +27,7 @@ export default function renderTabs (props) {
     },
     {
       key: 'settings',
-      label: s('settings'),
+      label: e('settings'),
       forceRender: true,
       children: (
         <div>
@@ -44,7 +40,7 @@ export default function renderTabs (props) {
     },
     {
       key: 'quickCommands',
-      label: q('quickCommands'),
+      label: e('quickCommands'),
       forceRender: true,
       children: props.qms
     },

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

@@ -29,11 +29,7 @@ import {
   BookOutlined
 } from '@ant-design/icons'
 
-const { prefix } = window
-const c = prefix('common')
-const m = prefix('menu')
-const s = prefix('setting')
-const p = prefix('sftp')
+const e = window.translate
 
 export default class BookmarkIndex extends Component {
   constructor (props) {
@@ -102,7 +98,7 @@ export default class BookmarkIndex extends Component {
           keys.map(k => {
             const v = connectionMap[k]
             return (
-              <Radio.Button key={v} value={v}>{p(v)}</Radio.Button>
+              <Radio.Button key={v} value={v}>{e(v)}</Radio.Button>
             )
           })
         }
@@ -156,9 +152,9 @@ export default class BookmarkIndex extends Component {
           <span>
             {
               (!isNew
-                ? m('edit')
-                : s('new')
-              ) + ' ' + c(settingMap.bookmarks)
+                ? e('edit')
+                : e('new')
+              ) + ' ' + e(settingMap.bookmarks)
             }
           </span>
           {this.renderTitle(formData, isNew)}

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

@@ -26,10 +26,7 @@ import { ColorPickerItem } from './color-picker-item.jsx'
 import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 
 const FormItem = Form.Item
-const { prefix } = window
-const e = prefix('form')
-const c = prefix('common')
-const s = prefix('setting')
+const e = window.translate
 
 export default function LocalFormUi (props) {
   const [
@@ -90,11 +87,11 @@ export default function LocalFormUi (props) {
           name='description'
           hasFeedback
         >
-          <Input.TextArea rows={1} />
+          <Input.TextArea autoSize={{ minRows: 1 }} />
         </FormItem>
         <FormItem
           {...formItemLayout}
-          label={c('bookmarkCategory')}
+          label={e('bookmarkCategory')}
           name='category'
         >
           <TreeSelect
@@ -125,7 +122,7 @@ export default function LocalFormUi (props) {
       },
       {
         key: 'settings',
-        label: s('settings'),
+        label: e('settings'),
         forceRender: true,
         children: uis
       },

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

@@ -6,8 +6,7 @@ import {
 import { formItemLayout } from '../../common/form-layout'
 
 const FormItem = Form.Item
-const { prefix } = window
-const e = prefix('form')
+const e = window.translate
 
 export default function renderProxy (props) {
   const proxyTree = props.bookmarks

package/client/components/bookmark-form/quick-command.jsx

@@ -18,8 +18,7 @@ import generate from '../../common/uid'
 import eq from 'fast-deep-equal'
 
 const InputGroup = Space.Compact
-const { prefix } = window
-const t = prefix('quickCommands')
+const e = window.translate
 
 export default class QuickCommandItem extends PureComponent {
   constructor (props) {
@@ -156,19 +155,19 @@ export default class QuickCommandItem extends PureComponent {
               onChange={this.handleChangeName}
               className='width-40'
               title={item.name}
-              placeholder={t('quickCommandName')}
+              placeholder={e('quickCommandName')}
             />
             <Input
               value={item.command}
               onChange={this.handleChangeCommand}
               className='width-60'
-              placeholder={t('quickCommand')}
+              placeholder={e('quickCommand')}
               title={item.command}
             />
           </InputGroup>
         </Col>
         <Col span={3}>
-          <Tooltip title={t('inputOnly')}>
+          <Tooltip title={e('inputOnly')}>
             <Switch
               checked={!!item.inputOnly}
               onChange={this.handleChangeInputOnly}
@@ -192,7 +191,7 @@ export default class QuickCommandItem extends PureComponent {
               readOnly
               className='width-40'
               title={item.name}
-              placeholder={t('quickCommandName')}
+              placeholder={e('quickCommandName')}
             />
             <Input
               value={item.command}
@@ -203,10 +202,10 @@ export default class QuickCommandItem extends PureComponent {
           </InputGroup>
         </Col>
         <Col span={3}>
-          <Tooltip title={t('inputOnly')}>
+          <Tooltip title={e('inputOnly')}>
             <Switch
               checked={!!item.inputOnly}
-              title={t('inputOnly')}
+              title={e('inputOnly')}
               readOnly
             />
           </Tooltip>

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

@@ -25,9 +25,7 @@ import formatBookmarkGroups from './bookmark-group-tree-format'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 
 const FormItem = Form.Item
-const { prefix } = window
-const e = prefix('form')
-const c = prefix('common')
+const e = window.translate
 
 export default function RdpFormUi (props) {
   const [
@@ -128,7 +126,7 @@ export default function RdpFormUi (props) {
           name='description'
           hasFeedback
         >
-          <Input.TextArea rows={1} />
+          <Input.TextArea autoSize={{ minRows: 1 }} />
         </FormItem>
         <FormItem
           {...formItemLayout}
@@ -140,7 +138,7 @@ export default function RdpFormUi (props) {
         </FormItem>
         <FormItem
           {...formItemLayout}
-          label={c('bookmarkCategory')}
+          label={e('bookmarkCategory')}
           name='category'
         >
           <TreeSelect

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

@@ -15,8 +15,7 @@ import './bookmark-form.styl'
 
 const { TextArea } = Input
 const FormItem = Form.Item
-const { prefix } = window
-const e = prefix('form')
+const e = window.translate
 
 export default function renderAuth (props) {
   const {
@@ -104,7 +103,7 @@ export default function renderAuth (props) {
       <FormItem noStyle name='privateKey'>
         <TextArea
           placeholder={e('privateKeyDesc')}
-          rows={1}
+          autoSize={{ minRows: 1 }}
         />
       </FormItem>
       <Upload

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

@@ -21,9 +21,7 @@ import { useState } from 'react'
 const FormItem = Form.Item
 const RadioButton = Radio.Button
 const RadioGroup = Radio.Group
-const { prefix } = window
-const f = prefix('form')
-const m = prefix('menu')
+const e = window.translate
 
 export default function renderConnectionHopping (props) {
   const {
@@ -89,7 +87,7 @@ export default function renderConnectionHopping (props) {
       key: 'index',
       render: (k) => k
     }, {
-      title: f('connectionHopping'),
+      title: e('connectionHopping'),
       key: 'connectionHopping',
       render: (k, item) => {
         const pass = item.password ? ':*****' : ''
@@ -99,7 +97,7 @@ export default function renderConnectionHopping (props) {
         return <span>{useProfile}{item.username}{pass}@{item.host}:{item.port}{pk}{ph}</span>
       }
     }, {
-      title: m('del'),
+      title: e('del'),
       key: 'op',
       dataIndex: 'id',
       render: (id) => {
@@ -148,7 +146,7 @@ export default function renderConnectionHopping (props) {
         {renderList()}
         <FormItem
           {...formItemLayout}
-          label={f('host')}
+          label={e('host')}
           hasFeedback
           rules={[{
             max: 520, message: '520 chars max'
@@ -162,7 +160,7 @@ export default function renderConnectionHopping (props) {
         </FormItem>
         <FormItem
           {...formItemLayout}
-          label={f('port')}
+          label={e('port')}
           hasFeedback
           name='port'
           rules={[{
@@ -170,7 +168,7 @@ export default function renderConnectionHopping (props) {
           }]}
         >
           <InputNumber
-            placeholder={f('port')}
+            placeholder={e('port')}
             min={1}
             max={65535}
             step={1}
@@ -178,7 +176,7 @@ export default function renderConnectionHopping (props) {
         </FormItem>
         <FormItem
           {...formItemLayout}
-          label={f('username')}
+          label={e('username')}
           hasFeedback
           name='username'
           rules={[{
@@ -202,7 +200,7 @@ export default function renderConnectionHopping (props) {
               authTypes.map(t => {
                 return (
                   <RadioButton value={t} key={t}>
-                    {f(t)}
+                    {e(t)}
                   </RadioButton>
                 )
               })
@@ -221,7 +219,7 @@ export default function renderConnectionHopping (props) {
             icon={<PlusOutlined />}
             onClick={onSubmit}
           >
-            {f('connectionHopping')}
+            {e('connectionHopping')}
           </Button>
         </FormItem>
       </Form>

package/client/components/bookmark-form/render-delayed-scripts.jsx

@@ -10,8 +10,7 @@ import { formItemLayout } from '../../common/form-layout'
 
 const FormItem = Form.Item
 const FormList = Form.List
-const { prefix } = window
-const e = prefix('form')
+const e = window.translate
 
 export default function renderRunScripts () {
   function renderItem (field, i, add, remove) {
@@ -41,7 +40,7 @@ export default function renderRunScripts () {
             className='mg2x'
           >
             <Input.TextArea
-              rows={1}
+              autoSize={{ minRows: 1 }}
               placeholder={e('loginScript')}
               className='compact-input'
             />