@electerm/electerm-react 2.3.198 → 2.4.16

package/client/components/common/modal.styl

@@ -75,3 +75,25 @@
   padding 12px 24px
   border-top 1px solid var(--main-darker)
   text-align right
+
+.custom-modal-footer-buttons
+  display flex
+  justify-content flex-end
+  gap 8px
+
+.custom-modal-ok-btn,
+.custom-modal-cancel-btn
+  padding 6px 16px
+  border none
+  border-radius 4px
+  cursor pointer
+  font-size 14px
+  transition background-color 0.2s
+
+.custom-modal-ok-btn
+  background var(--primary)
+  color var(--primary-contrast)
+
+.custom-modal-cancel-btn
+  background var(--main)
+  color var(--text)

package/client/components/common/notification-with-details.jsx

@@ -1,4 +1,4 @@
-import { notification } from 'antd'
+import { notification } from './notification'
 import { CopyOutlined } from '@ant-design/icons'
 import { copy } from '../../common/clipboard'
 

package/client/components/common/notification.jsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react'
+import { CloseOutlined } from '@ant-design/icons'
+import classnames from 'classnames'
+import generateId from '../../common/uid'
+import { messageIcons } from '../../common/icon-helpers.jsx'
+import './notification.styl'
+
+const notifications = []
+const NOTIFICATION_EVENT = 'notification-update'
+
+function addNotification (notif) {
+  notifications.push(notif)
+  window.dispatchEvent(new CustomEvent(NOTIFICATION_EVENT))
+}
+
+function removeNotification (key) {
+  const index = notifications.findIndex(n => n.key === key)
+  if (index > -1) {
+    notifications.splice(index, 1)
+    window.dispatchEvent(new CustomEvent(NOTIFICATION_EVENT))
+  }
+}
+
+export const notification = {
+  success: (options) => {
+    addNotification({ ...options, type: 'success', key: options.key || generateId() })
+  },
+  error: (options) => {
+    addNotification({ ...options, type: 'error', key: options.key || generateId() })
+  },
+  warning: (options) => {
+    addNotification({ ...options, type: 'warning', key: options.key || generateId() })
+  },
+  info: (options) => {
+    addNotification({ ...options, type: 'info', key: options.key || generateId() })
+  },
+  destroy: (key) => {
+    if (key) {
+      removeNotification(key)
+    } else {
+      notifications.length = 0
+      window.dispatchEvent(new CustomEvent(NOTIFICATION_EVENT))
+    }
+  }
+}
+
+export function NotificationContainer () {
+  const [nots, setNots] = useState([...notifications])
+
+  useEffect(() => {
+    const handler = () => setNots([...notifications])
+    window.addEventListener(NOTIFICATION_EVENT, handler)
+    return () => window.removeEventListener(NOTIFICATION_EVENT, handler)
+  }, [])
+
+  return (
+    <div className='notification-container'>
+      {nots.map(notif => (
+        <NotificationItem
+          key={notif.key}
+          message={notif.message}
+          description={notif.description}
+          type={notif.type}
+          duration={notif.duration}
+          onClose={() => removeNotification(notif.key)}
+        />
+      ))}
+    </div>
+  )
+}
+
+function NotificationItem ({ message, description, type, onClose, duration = 18.5 }) {
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(onClose, duration * 1000)
+      return () => clearTimeout(timer)
+    }
+  }, [duration, onClose])
+
+  const className = classnames('notification', type)
+
+  return (
+    <div className={className}>
+      <div className='notification-content'>
+        <div className='notification-message'>
+          <div className='notification-icon'>{messageIcons[type]}</div>
+          <div className='notification-title' title={message}>{message}</div>
+        </div>
+        {description && <div className='notification-description'>{description}</div>}
+      </div>
+      <CloseOutlined className='notification-close' onClick={onClose} />
+    </div>
+  )
+}

package/client/components/common/notification.styl

@@ -0,0 +1,51 @@
+.notification-container
+  position fixed
+  bottom 20px
+  right 20px
+  z-index 1000
+
+.notification
+  background var(--main-lighter)
+  color var(--text)
+  border-radius 4px
+  margin-bottom 10px
+  padding 12px 16px
+  box-shadow 0 4px 12px rgba(0, 0, 0, 0.15)
+  width 400px
+  position relative
+
+.notification-content
+  width 100%
+
+.notification-message
+  font-weight bold
+  margin-bottom 10px
+.notification-title
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+  padding 0 30px 0 20px
+
+.notification-icon
+  font-size 16px
+  position absolute
+  left 12px
+  top 10px
+
+.notification-description
+  word-wrap break-all
+  max-height 200px
+  overflow auto
+
+.notification-close
+  position absolute
+  top 12px
+  right 12px
+  background none
+  border none
+  color var(--text-dark)
+  font-size 18px
+  cursor pointer
+  padding 0
+  &:hover
+    color var(--text)

package/client/components/main/connection-hopping-warnning.jsx

@@ -1,8 +1,6 @@
 import { useEffect } from 'react'
 import ConnectionHoppingWarningText from '../common/connection-hopping-warning-text'
-import {
-  notification
-} from 'antd'
+import { notification } from '../common/notification'
 import * as ls from '../../common/safe-local-storage'
 import {
   connectionHoppingWarnKey

package/client/components/main/error-wrapper.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { FrownOutlined, ReloadOutlined } from '@ant-design/icons'
-import { Button, message } from 'antd'
+import { Button } from 'antd'
+import message from '../common/message'
 import {
   logoPath1,
   packInfo,
@@ -41,7 +42,7 @@ export default class ErrorBoundary extends React.PureComponent {
   }
 
   componentDidCatch (error) {
-    log.error(error)
+    console.error(error)
     this.setState({
       hasError: true,
       error

package/client/components/main/main.jsx

@@ -6,7 +6,7 @@ import UpdateCheck from './upgrade'
 import SettingModal from '../setting-panel/setting-modal'
 import TextEditor from '../text-editor/text-editor'
 import Sidebar from '../sidebar'
-import BatchOp from '../batch-op/batch-op-entry'
+import BatchOp from '../batch-op/batch-op'
 import CssOverwrite from '../bg/css-overwrite'
 import UiTheme from './ui-theme'
 import CustomCss from '../bg/custom-css.jsx'
@@ -21,7 +21,8 @@ import ShortcutControl from '../shortcuts/shortcut-control.jsx'
 import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
 import TermFullscreenControl from './term-fullscreen-control'
 import TerminalInfo from '../terminal-info/terminal-info'
-import { ConfigProvider, notification, message } from 'antd'
+import { ConfigProvider } from 'antd'
+import { NotificationContainer } from '../common/notification'
 import InfoModal from '../sidebar/info-modal.jsx'
 import RightSidePanel from '../side-panel-r/side-panel-r'
 import ConnectionHoppingWarning from './connection-hopping-warnning'
@@ -37,19 +38,10 @@ import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
 
 function setupGlobalMessageDismiss () {
-  document.addEventListener('click', (event) => {
-    const messageElement = event.target.closest('.ant-message-notice')
-    if (messageElement) {
-      message.destroy()
-    }
-  })
 }
 
 export default auto(function Index (props) {
   useEffect(() => {
-    notification.config({
-      placement: 'bottomRight'
-    })
     setupGlobalMessageDismiss()
     const { store } = props
     window.addEventListener('resize', store.onResize)
@@ -307,6 +299,7 @@ export default auto(function Index (props) {
         <TerminalCmdSuggestions {...cmdSuggestionsProps} />
         <TransferQueue />
         <WorkspaceSaveModal store={store} />
+        <NotificationContainer />
       </div>
     </ConfigProvider>
   )

package/client/components/main/upgrade.jsx

@@ -37,9 +37,6 @@ export default class Upgrade extends PureComponent {
     if (window.et.isWebApp) {
       return
     }
-    setTimeout(() => {
-      getLatestReleaseVersion(1)
-    }, 5000)
     this.id = 'upgrade'
     refsStatic.add(this.id, this)
   }
@@ -119,7 +116,12 @@ export default class Upgrade extends PureComponent {
       return window.store.addTab(
         {
           ...newTerm(undefined, true),
-          loginScript: 'npm i -g electerm'
+          runScripts: [
+            {
+              script: 'npm install -g electerm',
+              delay: 500
+            }
+          ]
         }
       )
     }

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

@@ -1,10 +1,10 @@
 import { useState } from 'react'
 import {
   Form,
-  message,
   Switch,
   Button
 } from 'antd'
+import message from '../common/message'
 import InputAutoFocus from '../common/input-auto-focus'
 import { formItemLayout } from '../../common/form-layout'
 import HelpIcon from '../common/help-icon'

package/client/components/quick-commands/quick-commands-box.jsx

@@ -3,7 +3,7 @@
  */
 
 import { useState, useRef } from 'react'
-import { quickCommandLabelsLsKey } from '../../common/constants'
+import { quickCommandLabelsLsKey, pinnedQuickCommandBarKey } from '../../common/constants'
 import { sortBy } from 'lodash-es'
 import { Button, Input, Select, Space, Flex } from 'antd'
 import * as ls from '../../common/safe-local-storage'
@@ -41,7 +41,9 @@ export default function QuickCommandsFooterBox (props) {
   }
 
   function handleTogglePinned () {
-    window.store.pinnedQuickCommandBar = !window.store.pinnedQuickCommandBar
+    const current = !window.store.pinnedQuickCommandBar
+    ls.setItem(pinnedQuickCommandBarKey, current ? 'y' : 'n')
+    window.store.pinnedQuickCommandBar = current
   }
 
   async function handleSelect (id) {
@@ -56,6 +58,7 @@ export default function QuickCommandsFooterBox (props) {
   }
 
   function handleClose () {
+    ls.setItem(pinnedQuickCommandBarKey, 'n')
     window.store.pinnedQuickCommandBar = false
     window.store.openQuickCommandBar = false
   }

package/client/components/quick-commands/quick-commands-form-elem.jsx

@@ -2,10 +2,10 @@ import {
   Button,
   Switch,
   Form,
-  message,
   Select,
   Input
 } from 'antd'
+import message from '../common/message'
 import { useState } from 'react'
 import generate from '../../common/uid'
 import InputAutoFocus from '../common/input-auto-focus'

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

@@ -7,11 +7,11 @@ import {
   statusMap
 } from '../../common/constants'
 import {
-  notification,
   Spin,
   // Button,
   Select
 } from 'antd'
+import { notification } from '../common/notification'
 import {
   ReloadOutlined,
   EditOutlined
@@ -246,7 +246,7 @@ export default class RdpSession extends PureComponent {
 
   onerrorSocket = err => {
     this.setStatus(statusMap.error)
-    log.error('socket error', err)
+    console.error('socket error', err)
   }
 
   closeMsg = () => {

package/client/components/session/session.jsx

@@ -17,7 +17,6 @@ import {
 } from '@ant-design/icons'
 import {
   Tooltip,
-  message,
   Splitter
 } from 'antd'
 import { pick } from 'lodash-es'
@@ -206,13 +205,9 @@ export default class SessionWrapper extends Component {
   }
 
   toggleCheckSftpPathFollowSsh = () => {
-    const nv = !this.state.sftpPathFollowSsh
-    if (nv) {
-      message.warning(e('sftpPathFollowSshTip'), 8)
-    }
-    this.setState({
-      sftpPathFollowSsh: nv
-    })
+    this.setState(prevState => ({
+      sftpPathFollowSsh: !prevState.sftpPathFollowSsh
+    }))
   }
 
   editTab = (up) => {
@@ -660,7 +655,7 @@ export default class SessionWrapper extends Component {
     const termType = tab?.type
     const isSsh = tab.authType
     const isLocal = !isSsh && (termType === connectionMap.local || !termType)
-    const checkTxt = e('sftpPathFollowSsh') + ' [Beta]'
+    const checkTxt = e('sftpPathFollowSsh')
     const checkProps = {
       onClick: this.toggleCheckSftpPathFollowSsh,
       className: classnames(

package/client/components/setting-panel/deep-link-control.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { Button, message, Tooltip, Tag, Space } from 'antd'
+import { Button, Tooltip, Tag, Space } from 'antd'
+import message from '../common/message'
 import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons'
 
 const e = window.translate

package/client/components/setting-panel/keyword-input.jsx

@@ -0,0 +1,60 @@
+import { Input } from 'antd'
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons'
+import { useState, useEffect } from 'react'
+
+export default function KeywordInput (props) {
+  const { value, onChange, addonBefore, ...rest } = props
+  const [localValue, setLocalValue] = useState(value || '')
+  const [isEditing, setIsEditing] = useState(false)
+
+  useEffect(() => {
+    setLocalValue(value || '')
+  }, [value])
+
+  function handleChange (e) {
+    const newValue = e.target.value
+    setLocalValue(newValue)
+    setIsEditing(true)
+  }
+
+  function handleConfirm () {
+    onChange(localValue)
+    setIsEditing(false)
+  }
+
+  function handleCancel () {
+    setLocalValue(value || '')
+    setIsEditing(false)
+  }
+
+  function handleBlur () {
+    // Optionally hide icons on blur, but since user might click icons, maybe not
+    // setIsEditing(false)
+  }
+
+  const addonAfter = isEditing
+    ? (
+      <div>
+        <CheckOutlined
+          onClick={handleConfirm}
+          className='mg1r pointer'
+        />
+        <CloseOutlined
+          onClick={handleCancel}
+          className='pointer'
+        />
+      </div>
+      )
+    : null
+
+  return (
+    <Input
+      value={localValue}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      addonBefore={addonBefore}
+      addonAfter={addonAfter}
+      {...rest}
+    />
+  )
+}

package/client/components/setting-panel/keywords-form.jsx

@@ -1,6 +1,5 @@
 import {
   Form,
-  Input,
   Select,
   Space,
   Button
@@ -11,6 +10,7 @@ import {
   PlusOutlined
 } from '@ant-design/icons'
 import { useEffect } from 'react'
+import KeywordInput from './keyword-input'
 
 const FormItem = Form.Item
 const FormList = Form.List
@@ -26,10 +26,6 @@ export default function KeywordForm (props) {
     formChild.submit()
   }
 
-  function handleChange (e) {
-    formChild.submit()
-  }
-
   function handleFinish (data) {
     props.submit(data)
   }
@@ -59,9 +55,8 @@ export default function KeywordForm (props) {
             name={[field.name, 'keyword']}
             rules={[{ validator: checker }]}
           >
-            <Input
+            <KeywordInput
               addonBefore={renderBefore(field.name)}
-              onChange={handleChange}
             />
           </FormItem>
         </FormItem>

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

@@ -5,8 +5,8 @@ import {
   SunOutlined,
   MoonOutlined
 } from '@ant-design/icons'
+import message from '../common/message'
 import {
-  message,
   Select,
   Switch,
   Input,

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

@@ -3,8 +3,8 @@ import {
   CodeOutlined,
   LoadingOutlined
 } from '@ant-design/icons'
+import message from '../common/message'
 import {
-  message,
   Select,
   Switch,
   Input,

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

@@ -1,5 +1,5 @@
 import { auto } from 'manate/react'
-import { message } from 'antd'
+import message from '../common/message'
 import SettingCommon from './setting-common'
 import SettingTerminal from './setting-terminal'
 import SettingCol from './col'

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

@@ -7,7 +7,8 @@
  */
 import { useDelta, useConditionalEffect } from 'react-delta-hooks'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
-import { Button, Input, notification, Form } from 'antd'
+import { Button, Input, Form, Alert } from 'antd'
+import { notification } from '../common/notification'
 import Link from '../common/external-link'
 import dayjs from 'dayjs'
 import eq from 'fast-deep-equal'
@@ -15,6 +16,7 @@ import { syncTokenCreateUrls, syncTypes } from '../../common/constants'
 import HelpIcon from '../common/help-icon'
 import ServerDataStatus from './server-data-status'
 import Password from '../common/password'
+import { isError } from 'lodash-es'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -58,11 +60,17 @@ export default function SyncForm (props) {
       up[syncType + 'ApiUrl'] = 'https://electerm-cloud.html5beta.com/api/sync'
       // up[syncType + 'ApiUrl'] = 'http://127.0.0.1:5678/api/sync'
     }
+    if (res.proxy) {
+      up[syncType + 'Proxy'] = res.proxy
+    } else {
+      up[syncType + 'Proxy'] = ''
+    }
     window.store.updateSyncSetting(up)
     const test = await window.store.testSyncToken(syncType, res.gistId)
-    if (!test) {
+    if (isError(test)) {
       return notification.error({
-        title: 'token invalid'
+        message: test.message || 'Request failed',
+        description: test.stack || 'Request failed'
       })
     }
     if (!res.gistId && syncType !== syncTypes.custom && syncType !== syncTypes.cloud) {
@@ -136,6 +144,27 @@ export default function SyncForm (props) {
   function createId (name) {
     return 'sync-input-' + name + '-' + syncType
   }
+  function renderWarning () {
+    if (syncType === syncTypes.gitee) {
+      return (
+        <Alert
+          message={
+            <span>
+              Gitee data sync is not recommended. For more information, please refer to the
+              <Link to='https://github.com/electerm/electerm/wiki/gitee-data-sync-warning' className='mg1l'>
+                wiki
+              </Link>
+              .
+            </span>
+          }
+          type='warning'
+          showIcon
+          className='mg1b'
+        />
+      )
+    }
+    return null
+  }
   function createUrlItem () {
     if (syncType === syncTypes.cloud) {
       return (
@@ -215,6 +244,23 @@ export default function SyncForm (props) {
       </FormItem>
     )
   }
+  function createProxyItem () {
+    return (
+      <FormItem
+        label='Proxy'
+        name='proxy'
+        normalize={trim}
+        rules={[{
+          max: 200, message: '200 chars max'
+        }]}
+      >
+        <Input
+          placeholder='socks5://127.0.0.1:1080'
+          id={createId('proxy')}
+        />
+      </FormItem>
+    )
+  }
   const sprops = {
     type: syncType,
     status: props.serverStatus
@@ -228,6 +274,7 @@ export default function SyncForm (props) {
       layout='vertical'
       initialValues={props.formData}
     >
+      {renderWarning()}
       {createUrlItem()}
       <FormItem
         label={tokenLabel}
@@ -251,6 +298,9 @@ export default function SyncForm (props) {
       {
         createPasswordItem()
       }
+      {
+        createProxyItem()
+      }
       <FormItem>
         <p>
           <Button

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

@@ -43,7 +43,8 @@ export default auto(function SyncSettingEntry (props) {
       url: syncSetting[type + 'Url'],
       apiUrl: syncSetting[type + 'ApiUrl'],
       lastSyncTime: syncSetting[type + 'LastSyncTime'],
-      syncPassword: syncSetting[type + 'SyncPassword']
+      syncPassword: syncSetting[type + 'SyncPassword'],
+      proxy: syncSetting[type + 'Proxy']
     }
     return (
       <SyncForm