@electerm/electerm-react 1.34.30

package/client/components/setting-panel/tree-list.styl

@@ -0,0 +1,57 @@
+// .tree-list
+//   .ant-tree li
+//     > .ant-tree-node-content-wrapper
+//       width calc(100% - 24px)
+//       line-height 1.6
+//       height auto
+//     .ant-tree-child-tree
+//       span.ant-tree-switcher.ant-tree-switcher-noop
+//         display none
+//       li.ant-tree-treenode-switcher-open
+//       li.ant-tree-treenode-switcher-close
+//         & > .ant-tree-switcher.ant-tree-switcher-noop
+//           display inline-block
+//       .ant-tree-node-content-wrapper-open
+//       .ant-tree-node-content-wrapper-close
+//         width calc(100% - 48px)
+//         display inline-block
+//       .ant-tree-child-tree
+//         .ant-tree-node-content-wrapper
+//           display block
+//           padding-left 8px
+//           width 100%
+//           overflow hidden
+//           white-space nowrap
+//           text-overflow ellipsis
+
+.tree-control-btn
+  display none
+  margin-left 3px
+  width 16px
+  line-height 26px
+  height 20px
+.tree-item
+  display flex
+  &.is-category
+    .tree-item-title
+      font-weight bold
+  &:hover
+    .tree-control-btn
+      display inline-block
+      vertical-align middle
+.tree-item-title
+  flex-grow 1
+  height 20px
+  max-width 300px
+  overflow hidden
+  white-space nowrap
+  text-overflow ellipsis
+.sidebar-panel .tree-item-title
+  max-width 180px
+.with-plus
+  &:after
+    content '+'
+    position absolute
+    font-size 16px
+    top 2px
+    right 2px

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

@@ -0,0 +1,65 @@
+/**
+ * data import/export
+ */
+
+import {
+  Button,
+  Upload,
+  Switch,
+  Tooltip
+} from 'antd'
+import {
+  ImportOutlined,
+  ExportOutlined,
+  InfoCircleOutlined
+} from '@ant-design/icons'
+import { Component } from '../common/react-subx'
+
+const { prefix } = window
+const e = prefix('form')
+const t = prefix('terminalThemes')
+const s = prefix('settingSync')
+
+export class DataTransport extends Component {
+  render () {
+    const txt = s('autoSync')
+    const {
+      store
+    } = this.props
+    return (
+      <div className='pd2 fix'>
+        <div className='fleft'>
+          <Button
+            icon={<ExportOutlined />}
+            className='mg1r'
+            onClick={store.handleExportAllData}
+          >
+            {t('export')}
+          </Button>
+          <Upload
+            beforeUpload={store.importAll}
+            fileList={[]}
+          >
+            <Button
+              icon={<ImportOutlined />}
+            >
+              {e('importFromFile')}
+            </Button>
+          </Upload>
+        </div>
+        <div className='fright'>
+          <Switch
+            checked={store.config.autoSync || false}
+            checkedChildren={txt}
+            onChange={store.handleAutoSync}
+            unCheckedChildren={txt}
+            className='mg3l mg1r'
+          />
+          <Tooltip title={s('autoSyncTip')}>
+            <InfoCircleOutlined />
+          </Tooltip>
+        </div>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,271 @@
+/**
+ * setting sync panel，
+ */
+
+/**
+ * bookmark form
+ */
+import { useDelta, useConditionalEffect } from 'react-delta'
+import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
+import { Button, Input, notification, Form } from 'antd'
+import Link from '../common/external-link'
+import dayjs from 'dayjs'
+import eq from 'fast-deep-equal'
+import { syncTokenCreateUrls, syncTypes } from '../../common/constants'
+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')
+
+export default function SyncForm (props) {
+  const [form] = Form.useForm()
+  const delta = useDelta(props.formData)
+  useConditionalEffect(() => {
+    form.resetFields()
+  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+
+  function disabled () {
+    const {
+      token,
+      gistId
+    } = props.formData
+    return !token || !gistId
+  }
+
+  async function save (res) {
+    const { syncType } = props
+    const up = {
+      [syncType + 'AccessToken']: res.token
+    }
+    if (res.gistId) {
+      up[syncType + 'GistId'] = res.gistId
+    }
+    if (res.syncPassword) {
+      up[syncType + 'SyncPassword'] = res.syncPassword
+    }
+    if (res.apiUrl) {
+      up[syncType + 'ApiUrl'] = res.apiUrl
+    }
+    props.store.updateSyncSetting(up)
+    const test = await props.store.testSyncToken(syncType, res.gistId)
+    if (!test) {
+      return notification.error({
+        message: 'token invalid'
+      })
+    }
+    if (!res.gistId) {
+      props.store.createGist(syncType)
+    }
+  }
+
+  function upload () {
+    props
+      .store
+      .uploadSetting(props.syncType)
+      .catch(props.store.onError)
+  }
+
+  function download () {
+    props
+      .store
+      .downloadSetting(props.syncType)
+      .catch(props.store.onError)
+  }
+
+  // onChangeAutoSync = checked => {
+  //   this.props.store.updateSyncSetting({
+  //     autoSync: checked
+  //   })
+  // }
+
+  function getTokenCreateGuideUrl () {
+    return syncTokenCreateUrls[props.syncType]
+  }
+
+  function renderGistUrl () {
+    if (!props.formData.url) {
+      return null
+    }
+    return (
+      <Link to={props.formData.url}>Check gist</Link>
+    )
+  }
+
+  const {
+    lastSyncTime = ''
+  } = props.formData
+  const { syncType } = props
+  const isCustom = syncType === syncTypes.custom
+  const timeFormatted = lastSyncTime
+    ? dayjs(lastSyncTime).format('YYYY-MM-DD HH:mm:ss')
+    : '-'
+  const customNameMapper = {
+    token: 'JWT Secret',
+    gist: 'User ID'
+  }
+  const otherNameMapper = {
+    token: 'access token',
+    gist: 'gist id'
+  }
+  function createLabel (name, text) {
+    return (
+      <span>
+        {isCustom ? (customNameMapper[name] || name) : name}
+        <HelpIcon link={getTokenCreateGuideUrl()} />
+      </span>
+    )
+  }
+  function createPlaceHolder (name) {
+    if (syncType === syncTypes.custom) {
+      return customNameMapper[name]
+    }
+    return syncType + ' ' + otherNameMapper[name]
+  }
+  function createId (name) {
+    return 'sync-input-' + name + '-' + syncType
+  }
+  function createUrlItem () {
+    if (syncType !== syncTypes.custom) {
+      return null
+    }
+    return (
+      <FormItem
+        label={createLabel('API Url')}
+        name='apiUrl'
+        rules={[{
+          max: 200, message: '200 chars max'
+        }]}
+      >
+        <Input
+          placeholder='API Url'
+          id='sync-input-url-custom'
+        />
+      </FormItem>
+    )
+  }
+  const desc = syncType === syncTypes.custom
+    ? 'jwt secret'
+    : 'personal access token'
+  const idDesc = syncType === syncTypes.custom
+    ? 'user id'
+    : 'gist ID'
+  const tokenLabel = createLabel('token', desc)
+  const gistLabel = createLabel('gist', idDesc)
+  const syncPasswordName = s('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>
+      <FormItem
+        label={gistLabel}
+        name='gistId'
+        rules={[{
+          max: 100, message: '100 chars max'
+        }]}
+      >
+        <Input
+          placeholder={createPlaceHolder('gistId')}
+          id={createId('gistId')}
+        />
+      </FormItem>
+      <FormItem
+        label={syncPasswordLabel}
+        hasFeedback
+        name='syncPassword'
+        rules={[{
+          max: 100, message: '100 chars max'
+        }]}
+      >
+        <Input.Password
+          placeholder={syncType + ' ' + syncPasswordName}
+        />
+      </FormItem>
+      {/* <FormItem
+        {...formItemLayout}
+        label={ss('autoSync')}
+      >
+        <Switch
+          checked={autoSync}
+          disabled={this.disabled()}
+          onChange={this.onChangeAutoSync}
+        />
+      </FormItem> */}
+      <FormItem>
+        <p>
+          <Button
+            type='dashed'
+            className='mg1r mg1b sync-btn-save'
+            htmlType='submit'
+            icon={<SaveOutlined />}
+          >{e('save')}
+          </Button>
+          {/* <Button
+            type='dashed'
+            onClick={this.sync}
+            disabled={this.disabled()}
+            className='mg1r'
+            loading={isSyncingSetting}
+            icon='swap'
+          >{ss('sync')}</Button> */}
+          <Button
+            type='dashed'
+            onClick={upload}
+            disabled={disabled()}
+            className='mg1r mg1b'
+            icon={<ArrowUpOutlined />}
+          >{ss('uploadSettings')}
+          </Button>
+          <Button
+            type='dashed'
+            onClick={download}
+            disabled={disabled()}
+            className='mg1r mg1b sync-btn-down'
+            icon={<ArrowDownOutlined />}
+          >{ss('downloadSettings')}
+          </Button>
+          <Button
+            type='dashed'
+            onClick={props.store.handleClearSyncSetting}
+            disabled={disabled()}
+            className='mg1r mg1b sync-btn-clear'
+            icon={<ClearOutlined />}
+          >{sh('clear')}
+          </Button>
+        </p>
+        <p>
+          {ss('lastSyncTime')}: {timeFormatted}
+        </p>
+        <p>
+          {renderGistUrl()}
+        </p>
+      </FormItem>
+    </Form>
+  )
+}

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

@@ -0,0 +1,81 @@
+/**
+ * sync setting module entry
+ */
+import { Component } from '../common/react-subx'
+import { Tabs, Spin } from 'antd'
+import SyncForm from './setting-sync-form'
+import { syncTypes } from '../../common/constants'
+import { DataTransport } from './data-import'
+import { pick } from 'lodash-es'
+
+export default class SyncSettingEntry extends Component {
+  handleChange = (key) => {
+    this.props.store.syncType = key
+  }
+
+  renderForm () {
+    const {
+      store
+    } = this.props
+    const {
+      syncSetting
+    } = store.config
+    const syncProps = {
+      store,
+      ...syncSetting,
+      ...pick(store, [
+        'autofocustrigger',
+        'isSyncingSetting',
+        'isSyncDownload',
+        'isSyncUpload',
+        'syncType'
+      ])
+    }
+    const type = store.syncType
+    const formData = {
+      gistId: syncSetting[type + 'GistId'],
+      token: syncSetting[type + 'AccessToken'],
+      url: syncSetting[type + 'Url'],
+      apiUrl: syncSetting[type + 'ApiUrl'],
+      lastSyncTime: syncSetting[type + 'LastSyncTime'],
+      syncPassword: syncSetting[type + 'SyncPassword']
+    }
+    return (
+      <SyncForm
+        {...syncProps}
+        syncType={type}
+        encrypt={syncSetting.syncEncrypt}
+        formData={formData}
+      />
+    )
+  }
+
+  render () {
+    const {
+      store
+    } = this.props
+
+    const syncItems = Object.keys(syncTypes).map(type => {
+      return {
+        key: type,
+        label: type,
+        children: null
+      }
+    })
+    return (
+      <div className='pd2l'>
+        <DataTransport store={store} />
+        <Spin spinning={store.isSyncingSetting}>
+          <Tabs
+            activeKey={store.syncType}
+            onChange={this.handleChange}
+            items={syncItems}
+          />
+          {
+            this.renderForm()
+          }
+        </Spin>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,7 @@
+@require '../../css/includes/theme-default'
+.sync-control
+  margin-bottom 0
+.sync-control-link
+  color primary
+  &:hover
+    color text-light

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

@@ -0,0 +1,139 @@
+import {
+  ArrowUpOutlined,
+  EyeInvisibleFilled,
+  EyeFilled,
+  ReloadOutlined,
+  ArrowRightOutlined,
+  LoadingOutlined
+} from '@ant-design/icons'
+import {
+  Input,
+  Tooltip
+} from 'antd'
+import {
+  typeMap
+} from '../../common/constants'
+import classnames from 'classnames'
+import AddrBookmark from './address-bookmark'
+
+const { prefix } = window
+const e = prefix('sftp')
+
+function renderAddonBefore (props, realPath) {
+  const {
+    type,
+    host
+  } = props
+  const isShow = props[`${type}ShowHiddenFile`]
+  const title = `${isShow ? e('hide') : e('show')} ${e('hfd')}`
+  const Icon = isShow ? EyeFilled : EyeInvisibleFilled
+  return (
+    <div>
+      <Tooltip
+        title={title}
+        placement='topLeft'
+        arrow={{ pointAtCenter: true }}
+      >
+        <Icon
+          type='eye'
+          className='mg1r'
+          onClick={() => props.toggleShowHiddenFile(type)}
+        />
+      </Tooltip>
+      <Tooltip
+        title={e('goParent')}
+        arrow={{ pointAtCenter: true }}
+        placement='topLeft'
+      >
+        <ArrowUpOutlined
+          onClick={() => props.goParent(type)}
+          className='mg1r'
+        />
+      </Tooltip>
+      <AddrBookmark
+        store={window.store}
+        realPath={realPath}
+        host={host}
+        type={type}
+        onClickHistory={props.onClickHistory}
+      />
+    </div>
+  )
+}
+
+function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type) {
+  return (
+    <GoIcon
+      onClick={isLoadingRemote ? () => null : () => onGoto(type)}
+    />
+  )
+}
+
+function renderHistory (props, type) {
+  const currentPath = props[type + 'Path']
+  const options = props[type + 'PathHistory']
+    .filter(o => o !== currentPath)
+  const focused = props[type + 'InputFocus']
+  if (!options.length) {
+    return null
+  }
+  const cls = classnames(
+    'sftp-history',
+    'animated',
+    `sftp-history-${type}`,
+    { focused }
+  )
+  return (
+    <div
+      className={cls}
+    >
+      {
+        options.map(o => {
+          return (
+            <div
+              key={o}
+              className='sftp-history-item'
+              onClick={() => props.onClickHistory(type, o)}
+            >
+              {o}
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default function AddressBar (props) {
+  const {
+    loadingSftp,
+    type,
+    onGoto
+  } = props
+  const n = `${type}PathTemp`
+  const path = props[n]
+  const realPath = props[`${type}Path`]
+  const isLoadingRemote = type === typeMap.remote && loadingSftp
+  const GoIcon = isLoadingRemote
+    ? LoadingOutlined
+    : (realPath === path ? ReloadOutlined : ArrowRightOutlined)
+  return (
+    <div className='pd1y sftp-title-wrap'>
+      <div className='sftp-title'>
+        <Input
+          value={path}
+          onChange={e => props.onChange(e, n)}
+          onPressEnter={e => props.onGoto(type, e)}
+          addonBefore={renderAddonBefore(props, realPath)}
+          onFocus={() => props.onInputFocus(type)}
+          onBlur={() => props.onInputBlur(type)}
+          disabled={loadingSftp}
+          addonAfter={
+            renderAddonAfter(isLoadingRemote, onGoto, GoIcon, type)
+          }
+        />
+        {renderHistory(props, type)}
+      </div>
+    </div>
+  )
+}

package/client/components/sftp/address-bookmark-item.jsx

@@ -0,0 +1,47 @@
+import { Component } from 'react'
+import {
+  CloseCircleOutlined
+} from '@ant-design/icons'
+
+export default class AddrBookmarkItem extends Component {
+  handleClick = () => {
+    const {
+      handleClick,
+      item,
+      type
+    } = this.props
+    handleClick(
+      type, item.addr
+    )
+  }
+
+  handleDel = (e) => {
+    e.stopPropagation()
+    const {
+      handleDel,
+      item
+    } = this.props
+    handleDel(
+      item
+    )
+  }
+
+  render () {
+    const {
+      item
+    } = this.props
+    return (
+      <div
+        key={item.id}
+        className='sftp-history-item addr-bookmark-item'
+        onClick={this.handleClick}
+      >
+        {item.addr}
+        <CloseCircleOutlined
+          className='del-addr-bookmark'
+          onClick={this.handleDel}
+        />
+      </div>
+    )
+  }
+}