@electerm/electerm-react 1.39.88 → 1.39.103

package/client/components/setting-sync/data-select.jsx

@@ -3,26 +3,14 @@ import {
 } from '../../common/constants'
 import DataSelectItem from './data-select-item'
 
-const { prefix } = window
-const e = prefix('common')
-const f = prefix('config')
-const t = prefix('terminalThemes')
-const q = prefix('quickCommands')
-
-const translateMap = {
-  settings: f,
-  terminalThemes: t,
-  quickCommands: q,
-  bookmarks: e,
-  addressBookmarks: e
-}
+const e = window.translate
 
 export default function DataSelect (props) {
   const {
     dataSyncSelected
   } = props
-  function onChange (e) {
-    const key = e.target['data-key']
+  function onChange (evt) {
+    const key = evt.target['data-key']
     window.store.toggleDataSyncSelected(key)
   }
   return (
@@ -31,7 +19,7 @@ export default function DataSelect (props) {
         Object.keys(syncDataMaps)
           .map(d => {
             const checked = dataSyncSelected.includes(d)
-            const title = translateMap[d](d)
+            const title = e(d)
             const boxProps = {
               checked,
               onChange,

package/client/components/setting-sync/setting-sync-form.jsx

@@ -16,11 +16,7 @@ import './sync.styl'
 import HelpIcon from '../common/help-icon'
 
 const FormItem = Form.Item
-const { prefix } = window
-const e = prefix('form')
-const ss = prefix('settingSync')
-const s = prefix('setting')
-const sh = prefix('ssh')
+const e = window.translate
 
 export default function SyncForm (props) {
   const [form] = Form.useForm()
@@ -28,8 +24,11 @@ export default function SyncForm (props) {
   useConditionalEffect(() => {
     form.resetFields()
   }, delta && delta.prev && !eq(delta.prev, delta.curr))
-
+  const { syncType } = props
   function disabled () {
+    if (syncType === syncTypes.cloud) {
+      return !props.formData.token
+    }
     const {
       token,
       gistId
@@ -44,10 +43,15 @@ export default function SyncForm (props) {
     }
     if (res.gistId) {
       up[syncType + 'GistId'] = res.gistId
+    } else if (syncType === syncTypes.cloud) {
+      up[syncType + 'GistId'] = 'cloud'
     }
     up[syncType + 'SyncPassword'] = res.syncPassword || ''
     if (res.apiUrl) {
       up[syncType + 'ApiUrl'] = res.apiUrl
+    } else if (syncType === syncTypes.cloud) {
+      up[syncType + 'ApiUrl'] = 'https://electerm-cloud.html5beta.com/api/sync'
+      // up[syncType + 'ApiUrl'] = 'http://127.0.0.1:5678/api/sync'
     }
     props.store.updateSyncSetting(up)
     const test = await props.store.testSyncToken(syncType, res.gistId)
@@ -56,7 +60,7 @@ export default function SyncForm (props) {
         message: 'token invalid'
       })
     }
-    if (!res.gistId) {
+    if (!res.gistId && syncType !== syncTypes.custom && syncType !== syncTypes.cloud) {
       props.store.createGist(syncType)
     }
   }
@@ -97,7 +101,7 @@ export default function SyncForm (props) {
   const {
     lastSyncTime = ''
   } = props.formData
-  const { syncType } = props
+
   const isCustom = syncType === syncTypes.custom
   const timeFormatted = lastSyncTime
     ? dayjs(lastSyncTime).format('YYYY-MM-DD HH:mm:ss')
@@ -128,6 +132,15 @@ export default function SyncForm (props) {
     return 'sync-input-' + name + '-' + syncType
   }
   function createUrlItem () {
+    if (syncType === syncTypes.cloud) {
+      return (
+        <p>
+          <Link to='https://electerm-cloud.html5beta.com'>
+            https://electerm-cloud.html5beta.com[Beta]
+          </Link>
+        </p>
+      )
+    }
     if (syncType !== syncTypes.custom) {
       return null
     }
@@ -154,33 +167,13 @@ export default function SyncForm (props) {
     : 'gist ID'
   const tokenLabel = createLabel('token', desc)
   const gistLabel = createLabel('gist', idDesc)
-  const syncPasswordName = s('encrypt') + ' ' + e('password')
+  const syncPasswordName = e('encrypt') + ' ' + e('password')
   const syncPasswordLabel = createLabel(syncPasswordName, '')
-  return (
-    <Form
-      onFinish={save}
-      form={form}
-      className='form-wrap pd1x'
-      name={'setting-sync-form' + syncType}
-      layout='vertical'
-      initialValues={props.formData}
-    >
-      {createUrlItem()}
-      <FormItem
-        label={tokenLabel}
-        hasFeedback
-        name='token'
-        rules={[{
-          max: 100, message: '100 chars max'
-        }, {
-          required: true, message: createPlaceHolder('token') + ' required'
-        }]}
-      >
-        <Input.Password
-          placeholder={createPlaceHolder('token')}
-          id={createId('token')}
-        />
-      </FormItem>
+  function createIdItem () {
+    if (syncType === syncTypes.cloud) {
+      return null
+    }
+    return (
       <FormItem
         label={gistLabel}
         name='gistId'
@@ -193,6 +186,13 @@ export default function SyncForm (props) {
           id={createId('gistId')}
         />
       </FormItem>
+    )
+  }
+  function createPasswordItem () {
+    if (syncType === syncTypes.cloud) {
+      return null
+    }
+    return (
       <FormItem
         label={syncPasswordLabel}
         hasFeedback
@@ -205,16 +205,39 @@ export default function SyncForm (props) {
           placeholder={syncType + ' ' + syncPasswordName}
         />
       </FormItem>
-      {/* <FormItem
-        {...formItemLayout}
-        label={ss('autoSync')}
+    )
+  }
+  return (
+    <Form
+      onFinish={save}
+      form={form}
+      className='form-wrap pd1x'
+      name={'setting-sync-form' + syncType}
+      layout='vertical'
+      initialValues={props.formData}
+    >
+      {createUrlItem()}
+      <FormItem
+        label={tokenLabel}
+        hasFeedback
+        name='token'
+        rules={[{
+          max: 1100, message: '1100 chars max'
+        }, {
+          required: true, message: createPlaceHolder('token') + ' required'
+        }]}
       >
-        <Switch
-          checked={autoSync}
-          disabled={this.disabled()}
-          onChange={this.onChangeAutoSync}
+        <Input.Password
+          placeholder={createPlaceHolder('token')}
+          id={createId('token')}
         />
-      </FormItem> */}
+      </FormItem>
+      {
+        createIdItem()
+      }
+      {
+        createPasswordItem()
+      }
       <FormItem>
         <p>
           <Button
@@ -231,14 +254,14 @@ export default function SyncForm (props) {
             className='mg1r'
             loading={isSyncingSetting}
             icon='swap'
-          >{ss('sync')}</Button> */}
+          >{e('sync')}</Button> */}
           <Button
             type='dashed'
             onClick={upload}
             disabled={disabled()}
-            className='mg1r mg1b'
+            className='mg1r mg1b sync-btn-up'
             icon={<ArrowUpOutlined />}
-          >{ss('uploadSettings')}
+          >{e('uploadSettings')}
           </Button>
           <Button
             type='dashed'
@@ -246,7 +269,7 @@ export default function SyncForm (props) {
             disabled={disabled()}
             className='mg1r mg1b sync-btn-down'
             icon={<ArrowDownOutlined />}
-          >{ss('downloadSettings')}
+          >{e('downloadSettings')}
           </Button>
           <Button
             type='dashed'
@@ -254,11 +277,11 @@ export default function SyncForm (props) {
             disabled={disabled()}
             className='mg1r mg1b sync-btn-clear'
             icon={<ClearOutlined />}
-          >{sh('clear')}
+          >{e('clear')}
           </Button>
         </p>
         <p>
-          {ss('lastSyncTime')}: {timeFormatted}
+          {e('lastSyncTime')}: {timeFormatted}
         </p>
         <p>
           {renderGistUrl()}

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

@@ -16,8 +16,7 @@ import {
 import classnames from 'classnames'
 import AddrBookmark from './address-bookmark'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 function renderAddonBefore (props, realPath) {
   const {

package/client/components/sftp/confirm-modal-store.jsx

@@ -14,8 +14,7 @@ import {
 } from '../../common/constants'
 import postMessage from '../../common/post-msg'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 function formatTimeAuto (strOrDigit) {
   if (isString(strOrDigit)) {

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

@@ -36,9 +36,7 @@ import { filesize } from 'filesize'
 import { createTransferProps } from './transfer-common'
 import generate from '../../common/uid'
 
-const { prefix } = window
-const e = prefix('sftp')
-const m = prefix('menu')
+const e = window.translate
 
 const computePos = (e) => {
   return {
@@ -945,7 +943,7 @@ export default class FileSection extends React.Component {
     const shouldShowSelectedMenu = id &&
       len > 1 &&
       some(selectedFiles, d => d.id === id)
-    const delTxt = shouldShowSelectedMenu ? `${e('deleteAll')}(${len})` : m('del')
+    const delTxt = shouldShowSelectedMenu ? `${e('deleteAll')}(${len})` : e('del')
     const canPaste = hasFileInClipboardText()
     const showEdit = !isDirectory && id &&
       size < maxEditFileSize
@@ -1018,20 +1016,20 @@ export default class FileSection extends React.Component {
       res.push({
         func: 'onCopy',
         icon: 'CopyOutlined',
-        text: m('copy'),
+        text: e('copy'),
         subText: `${ctrlOrCmd}+c`
       })
       res.push({
         func: 'onCut',
         icon: 'FileExcelOutlined',
-        text: m('cut'),
+        text: e('cut'),
         subText: `${ctrlOrCmd}+x`
       })
     }
     res.push({
       func: 'onPaste',
       icon: 'CopyOutlined',
-      text: m('paste'),
+      text: e('paste'),
       disabled: !canPaste,
       subText: `${ctrlOrCmd}+v`
     })
@@ -1044,7 +1042,7 @@ export default class FileSection extends React.Component {
       res.push({
         func: 'onCopyPath',
         icon: 'CopyOutlined',
-        text: m('copyFilePath')
+        text: e('copyFilePath')
       })
     }
     if (enableSsh !== false || isLocal) {

package/client/components/sftp/file-mode-modal.jsx

@@ -13,8 +13,7 @@ import renderPermission from './permission-render'
 import postMessage from '../../common/post-msg'
 import FileIcon from './file-icon'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 const formatTime = time
 
 export default class FileMode extends React.PureComponent {

package/client/components/sftp/file-props-modal.jsx

@@ -22,8 +22,7 @@ import postMsg from '../../common/post-msg'
 import { filesize } from 'filesize'
 import { runCmd } from '../terminal/terminal-apis'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 const formatTime = time
 
 export default function FileInfoModal () {

package/client/components/sftp/list-table-ui.jsx

@@ -29,8 +29,7 @@ import {
 } from '@ant-design/icons'
 import IconHolder from '../context-menu/icon-holder'
 
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 export default class FileListTable extends Component {
   constructor (props) {

package/client/components/sftp/permission-render.jsx

@@ -5,8 +5,7 @@
 import { Button, Space } from 'antd'
 import { isFunction, noop } from 'lodash-es'
 
-const { prefix } = window
-const e = prefix('permission')
+const e = window.translate
 
 export default (perm, _onClick) => {
   const {

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

@@ -36,9 +36,7 @@ import AddressBar from './address-bar'
 import getProxy from '../../common/get-proxy'
 import './sftp.styl'
 
-const { prefix } = window
-const e = prefix('sftp')
-const c = prefix('common')
+const e = window.translate
 
 const buildTree = arr => {
   return arr.reduce((prev, curr) => {
@@ -390,8 +388,8 @@ export default class Sftp extends Component {
   onDel = (type, files) => {
     this.onDelete = true
     Modal.confirm({
-      cancelText: c('cancel'),
-      okText: c('ok'),
+      cancelText: e('cancel'),
+      okText: e('ok'),
       title: this.renderDelConfirmTitle(files),
       onOk: () => this.delFiles(type, files)
     })
@@ -845,6 +843,22 @@ export default class Sftp extends Component {
     }, () => this[`${type}List`](undefined, undefined, oldPath))
   }
 
+  parsePath = (type, pth) => {
+    const reg = /^%([^%]+)%/
+    if (!reg.test(pth)) {
+      return pth
+    }
+    const m = pth.match(reg)
+    if (!m || !m[1]) {
+      return pth
+    }
+    const envName = m[1]
+    const envPath = window.pre.env[envName]
+    if (envPath) {
+      return pth.replace(reg, envPath)
+    }
+  }
+
   onGoto = (type, e) => {
     e && e.preventDefault()
     if (type === typeMap.remote && !this.sftp) {
@@ -853,14 +867,14 @@ export default class Sftp extends Component {
     const n = `${type}Path`
     const nt = n + 'Temp'
     const oldPath = this.state[type + 'Path']
-    const np = this.state[nt]
+    const np = this.parsePath(type, this.state[nt])
     if (!isValidPath(np)) {
       return notification.warning({
         message: 'path not valid'
       })
     }
     this.setState({
-      [n]: this.state[nt]
+      [n]: np
     }, () => this[`${type}List`](undefined, undefined, oldPath))
   }
 

package/client/components/sftp/transfer-tag.jsx

@@ -4,8 +4,7 @@
  */
 
 import './transfer-tag.styl'
-const { prefix } = window
-const e = prefix('sftp')
+const e = window.translate
 
 export default function TransferTag (props) {
   const {

package/client/components/shortcuts/shortcuts.jsx

@@ -10,12 +10,7 @@ import {
   isMacJs as isMac
 } from '../../common/constants.js'
 
-const { prefix } = window
-const e = prefix('form')
-const c = prefix('control')
-const m = prefix('menu')
-const ss = prefix('ssh')
-const s = prefix('setting')
+const e = window.translate
 const shortcutsDefaults = shortcutsDefaultsGen()
 
 export default class Shortcuts extends Component {
@@ -105,30 +100,12 @@ export default class Shortcuts extends Component {
         key: 'name',
         render: (name) => {
           const [a, b] = name.split('_')
-          const pre = a === 'terminal' ? `[${ss('terminal')}] ` : ''
-          if (
-            [
-              'clear', 'selectAll', 'search', 'split'
-            ].includes(b)
-          ) {
-            return pre + ss(b)
-          } else if (b === 'copy') {
-            return pre + m(b)
-          } else if (b === 'newBookmark') {
-            return pre + c(b)
-          } else if (b.includes('zoomin')) {
-            return pre + m('zoomin')
-          } else if (b.includes('zoomout')) {
-            return pre + m('zoomout')
-          } else if (['togglefullscreen'].includes(b)) {
-            return pre + m(b)
-          } else {
-            return pre + s(b)
-          }
+          const pre = a === 'terminal' ? `[${e('terminal')}] ` : ''
+          return pre + e(b)
         }
       },
       {
-        title: s('settingShortcuts'),
+        title: e('settingShortcuts'),
         dataIndex: 'shortcut',
         key: 'shortcut',
         render: (shortcut, inst) => {
@@ -174,7 +151,7 @@ export default class Shortcuts extends Component {
           <Button
             onClick={this.handleResetAll}
           >
-            {s('resetAllToDefault')}
+            {e('resetAllToDefault')}
           </Button>
         </div>
       </div>

package/client/components/sidebar/bookmark.jsx

@@ -8,10 +8,7 @@ import { pick } from 'lodash-es'
 import { ArrowsAltOutlined, EditOutlined, PlusCircleOutlined, ShrinkOutlined, PushpinOutlined } from '@ant-design/icons'
 import { Tooltip } from 'antd'
 
-const { prefix } = window
-const c = prefix('common')
-const m = prefix('menu')
-const e = prefix('control')
+const e = window.translate
 
 export default class BookmarkPanel extends Component {
   render () {
@@ -42,29 +39,29 @@ export default class BookmarkPanel extends Component {
       >
         <div className='pd1y pd2t pd2x'>
           <div className='fix'>
-            <div className='fleft'>{c('bookmarks')}</div>
+            <div className='fleft'>{e('bookmarks')}</div>
             <div className='fright'>
               <Tooltip title={e('newBookmark')}>
                 <PlusCircleOutlined
                   {...pop1}
                 />
               </Tooltip>
-              <Tooltip title={`${m('edit')} ${c('bookmarks')}`}>
+              <Tooltip title={`${e('edit')} ${e('bookmarks')}`}>
                 <EditOutlined
                   {...pop1}
                 />
               </Tooltip>
-              <Tooltip title={c('expandAll')}>
+              <Tooltip title={e('expandAll')}>
                 <ArrowsAltOutlined
                   {...pop2}
                 />
               </Tooltip>
-              <Tooltip title={c('collapseAll')}>
+              <Tooltip title={e('collapseAll')}>
                 <ShrinkOutlined
                   {...pop3}
                 />
               </Tooltip>
-              <Tooltip title={c('pin')}>
+              <Tooltip title={e('pin')}>
                 <PushpinOutlined
                   {...prps1}
                   onClick={store.handlePin}

package/client/components/sidebar/history.jsx

@@ -8,9 +8,7 @@ import { pick } from 'lodash-es'
 import { EditOutlined, PushpinOutlined } from '@ant-design/icons'
 import { Tooltip } from 'antd'
 
-const { prefix } = window
-const c = prefix('common')
-const m = prefix('menu')
+const e = window.translate
 
 export default class HistoryPanel extends Component {
   render () {
@@ -35,15 +33,15 @@ export default class HistoryPanel extends Component {
       >
         <div className='pd1y pd2t pd2x'>
           <div className='fix'>
-            <div className='fleft'>{c('history')}</div>
+            <div className='fleft'>{e('history')}</div>
             <div className='fleft'>
-              <Tooltip title={`${m('edit')} ${c('history')}`}>
+              <Tooltip title={`${e('edit')} ${e('history')}`}>
                 <EditOutlined
                   className='font16 mg1x mg2l pointer iblock control-icon icon-do-edit'
                   onClick={store.handleEditHistory}
                 />
               </Tooltip>
-              <Tooltip title={c('pin')}>
+              <Tooltip title={e('pin')}>
                 <PushpinOutlined
                   {...prps1}
                   onClick={store.handlePin}

package/client/components/sidebar/index.jsx

@@ -26,14 +26,7 @@ import SideIcon from './side-icon'
 import SidePanel from './side-panel'
 import './sidebar.styl'
 
-const { prefix } = window
-const e = prefix('control')
-const c = prefix('common')
-const m = prefix('menu')
-const t = prefix('terminalThemes')
-const u = prefix('updater')
-const ss = prefix('settingSync')
-const b = prefix('batchOp')
+const e = window.translate
 
 export default class Sidebar extends Component {
   handler = null
@@ -141,7 +134,7 @@ export default class Sidebar extends Component {
             />
           </SideIcon>
           <SideIcon
-            title={c(settingMap.bookmarks)}
+            title={e(settingMap.bookmarks)}
             active={bookmarksActive}
           >
             <BookOutlined
@@ -152,7 +145,7 @@ export default class Sidebar extends Component {
             />
           </SideIcon>
           <SideIcon
-            title={c(settingMap.history)}
+            title={e(settingMap.history)}
             active={historyActive}
           >
             <ClockCircleOutlined
@@ -164,7 +157,7 @@ export default class Sidebar extends Component {
           </SideIcon>
           <TransferList store={store} />
           <SideIcon
-            title={t(settingMap.terminalThemes)}
+            title={e(settingMap.terminalThemes)}
             active={themeActive}
           >
             <PictureOutlined
@@ -173,13 +166,13 @@ export default class Sidebar extends Component {
             />
           </SideIcon>
           <SideIcon
-            title={c(settingMap.setting)}
+            title={e(settingMap.setting)}
             active={settingActive}
           >
             <SettingOutlined className='iblock font20 control-icon' onClick={openSetting} />
           </SideIcon>
           <SideIcon
-            title={ss('settingSync')}
+            title={e('settingSync')}
             active={syncActive}
           >
             <CloudSyncOutlined
@@ -189,13 +182,13 @@ export default class Sidebar extends Component {
             />
           </SideIcon>
           <SideIcon
-            title={b('batchOp')}
+            title={e('batchOp')}
             active={showBatchOp}
           >
             <BarsOutlined className='iblock font20 control-icon' onClick={toggleBatchOp} />
           </SideIcon>
           <SideIcon
-            title={m('about')}
+            title={e('about')}
             active={showInfoModal}
           >
             <InfoCircleOutlined
@@ -207,7 +200,7 @@ export default class Sidebar extends Component {
             !checkingRemoteVersion && !showUpgradeModal && shouldUpgrade
               ? (
                 <Tooltip
-                  title={`${u('upgrading')} ${upgradePercent || 0}%`}
+                  title={`${e('upgrading')} ${upgradePercent || 0}%`}
                   placement='right'
                 >
                   <div