@electerm/electerm-react 1.34.30

package/client/components/terminal/normal-buffer.jsx

@@ -0,0 +1,33 @@
+/**
+ * when in alternate buffer, user press cmd + arrow up to open normal buffer content
+ */
+
+import { CloseCircleOutlined } from '@ant-design/icons'
+import { memo } from 'react'
+
+export default memo(function NormalBuffer (props) {
+  if (!props.lines.length) {
+    return null
+  }
+  const pops = {
+    className: 'terminal-normal-buffer-close',
+    onClick: props.close
+  }
+  return (
+    <div className='terminal-normal-buffer'>
+      <div className='terminal-normal-buffer-body'>
+        {props.lines.map((d, i) => (<div key={`${i}-nmb`}>{d}</div>))}
+      </div>
+      <div className='terminal-normal-buffer-footer fix'>
+        <span className='fleft pd1l'>
+          Normal buffer content
+        </span>
+        <span className='fright pd1r'>
+          <CloseCircleOutlined
+            {...pops}
+          />
+        </span>
+      </div>
+    </div>
+  )
+})

package/client/components/terminal/term-search.jsx

@@ -0,0 +1,224 @@
+import { Component } from '../common/react-subx'
+import {
+  Tooltip
+} from 'antd'
+import InputAutoFocus from '../common/input-auto-focus'
+import {
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  CloseCircleOutlined
+} from '@ant-design/icons'
+import { paneMap, terminalActions, isMac } from '../../common/constants'
+import postMessage from '../../common/post-msg'
+import { MatchCaseIcon } from '../icons/match-case'
+import { MatchWholWordIcon } from '../icons/match-whole-word'
+import { RegularExpIcon } from '../icons/regular-exp'
+import classNames from 'classnames'
+import copy from 'json-deep-copy'
+import keyShiftPressed from '../../common/key-shift-pressed'
+import keyControlPressed from '../../common/key-control-pressed'
+import keyPressed from '../../common/key-pressed'
+import './term-search.styl'
+
+const { prefix } = window
+const s = prefix('ssh')
+
+export default class TermSearch extends Component {
+  searchControls = [{
+    id: 'matchCase',
+    icon: MatchCaseIcon,
+    prop: 'caseSensitive'
+  }, {
+    id: 'matchWholeWord',
+    icon: MatchWholWordIcon,
+    prop: 'wholeWord'
+  }, {
+    id: 'useRegExp',
+    icon: RegularExpIcon,
+    prop: 'regex'
+  }]
+
+  searchActions = [{
+    id: 'prev',
+    icon: ArrowLeftOutlined,
+    cls: 'mg1l'
+  }, {
+    id: 'next',
+    icon: ArrowRightOutlined,
+    cls: 'mg1l'
+  }, {
+    id: 'close',
+    icon: CloseCircleOutlined,
+    cls: 'mg2l'
+  }]
+
+  componentDidMount () {
+    window.addEventListener('keydown', this.handleEvent)
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('keydown', this.handleEvent)
+  }
+
+  toggleSearch = () => {
+    this.props.store.toggleTerminalSearch()
+    setTimeout(window.store.focus, 100)
+  }
+
+  handleEvent = (e) => {
+    if (
+      keyPressed(e, 'f') && keyControlPressed(e) &&
+      (
+        isMac ||
+        (!isMac && keyShiftPressed(e))
+      )
+    ) {
+      e.stopPropagation()
+      this.toggleSearch()
+    }
+  }
+
+  prev = () => {
+    const { activeTerminalId } = this.props.store
+    postMessage({
+      action: terminalActions.doSearchPrev,
+      keyword: this.props.store.termSearch,
+      activeSplitId: activeTerminalId,
+      options: copy(this.props.store.termSearchOptions)
+    })
+  }
+
+  next = () => {
+    const { activeTerminalId } = this.props.store
+    postMessage({
+      action: terminalActions.doSearchNext,
+      activeSplitId: activeTerminalId,
+      keyword: this.props.store.termSearch,
+      options: copy(this.props.store.termSearchOptions)
+    })
+  }
+
+  handleChange = e => {
+    this.props.store.termSearch = e.target.value
+    this.next()
+  }
+
+  close = () => {
+    this.props.store.termSearchOpen = false
+  }
+
+  renderSearchAction = item => {
+    const {
+      id,
+      icon: Icon,
+      cls
+    } = item
+    const props = {
+      onClick: this[id],
+      className: 'term-search-act mg1x ' + cls
+    }
+    return (
+      <Icon
+        key={id}
+        {...props}
+      />
+    )
+  }
+
+  renderMatchData = () => {
+    const {
+      termSearchMatchCount,
+      termSearchMatchIndex
+    } = this.props.store
+    if (!termSearchMatchCount) {
+      return null
+    }
+    return <span className='mg1x'>({termSearchMatchIndex + 1}/{termSearchMatchCount})</span>
+  }
+
+  renderAfter = () => {
+    return (
+      <div>
+        {
+          this.renderMatchData()
+        }
+        {
+          this.searchActions.map(this.renderSearchAction)
+        }
+      </div>
+    )
+  }
+
+  toggle = prop => {
+    const {
+      store
+    } = this.props
+    const v = store.termSearchOptions[prop]
+    store.setTermSearchOption({
+      [prop]: !v
+    })
+    this.next()
+  }
+
+  renderSearchControl = (item) => {
+    const {
+      id,
+      icon: Icon,
+      prop
+    } = item
+    const v = this.props.store.termSearchOptions[prop]
+    const cls = classNames('term-search-opt-icon', {
+      'term-search-on': v
+    })
+    return (
+      <Tooltip
+        key={id}
+        title={s(id)}
+      >
+        <Icon
+          className={cls}
+          onClick={() => this.toggle(prop)}
+        />
+      </Tooltip>
+    )
+  }
+
+  renderSuffix = () => {
+    return (
+      <div>
+        {
+          this.searchControls.map(this.renderSearchControl)
+        }
+      </div>
+    )
+  }
+
+  render () {
+    const { store, currentTab } = this.props
+    const {
+      termSearchOpen,
+      termSearch
+    } = store
+    if (!termSearchOpen) {
+      return null
+    }
+    if (currentTab.pane === paneMap.fileManager) {
+      return null
+    }
+    const props = {
+      value: termSearch,
+      className: 'iblock',
+      onChange: this.handleChange,
+      suffix: this.renderSuffix(),
+      onPressEnter: this.next,
+      addonAfter: this.renderAfter()
+    }
+    return (
+      <div className='term-search-wrap'>
+        <InputAutoFocus
+          {...props}
+        />
+      </div>
+    )
+  }
+}

package/client/components/terminal/term-search.styl

@@ -0,0 +1,15 @@
+@require '../../css/includes/theme-default'
+.term-search-opt-icon
+  margin 0 3px
+  color text-light
+  font-size 15px
+  &:hover
+    color text
+  &.term-search-on
+    background #333
+    color #aaa
+.term-search-wrap
+  position absolute
+  top 100px
+  right 5px
+  z-index 200

package/client/components/terminal/terminal-apis.js

@@ -0,0 +1,31 @@
+/**
+ * terminal apis
+ */
+
+import fetch from '../../common/fetch-from-server'
+
+export function createTerm (body) {
+  return fetch({
+    body,
+    action: 'create-terminal'
+  })
+}
+
+export function runCmd (pid, sessionId, cmd) {
+  return fetch({
+    pid,
+    sessionId,
+    cmd,
+    action: 'run-cmd'
+  })
+}
+
+export function resizeTerm (pid, sessionId, cols, rows) {
+  return fetch({
+    pid,
+    sessionId,
+    cols,
+    rows,
+    action: 'resize-terminal'
+  })
+}

package/client/components/terminal/terminal-interactive.jsx

@@ -0,0 +1,148 @@
+/**
+ * handle terminal interactive operation
+ */
+
+import { useEffect, useState } from 'react'
+import { Modal, Form, Button } from 'antd'
+import InputAutoFocus from '../common/input-auto-focus'
+import wait from '../../common/wait'
+
+const { prefix } = window
+const e = prefix('sftp')
+const c = prefix('common')
+const FormItem = Form.Item
+
+export default function TermInteractive () {
+  const [trigger] = useState(0)
+  const [opts, setter] = useState(null)
+  const [form] = Form.useForm()
+  function onMsg (e) {
+    if (e.data.includes('session-interactive')) {
+      setter(JSON.parse(e.data))
+    }
+  }
+  function clear () {
+    setter(null)
+    form.resetFields()
+  }
+  function onCancel () {
+    window.et.commonWs.s({
+      id: opts.id,
+      results: []
+    })
+    clear()
+  }
+  function onOk () {
+    form.submit()
+  }
+  function onIgnore () {
+    window.et.commonWs.s({
+      id: opts.id,
+      results: Object.keys(opts.options.prompts).map(() => '')
+    })
+    clear()
+  }
+  function onFinish (res) {
+    window.et.commonWs.s({
+      id: opts.id,
+      results: Object.values(res)
+    })
+    clear()
+  }
+  function renderFormItem (pro, i) {
+    const {
+      prompt,
+      echo
+    } = pro
+    const note = (opts.options.instructions || [])[i]
+    const type = echo
+      ? 'input'
+      : 'password'
+    return (
+      <FormItem
+        key={prompt + i}
+        label={prompt}
+        rules={[{
+          required: true, message: 'required'
+        }]}
+      >
+        <div>
+          <pre>{note}</pre>
+        </div>
+        <FormItem noStyle name={'item' + i}>
+          <InputAutoFocus
+            type={type}
+            autofocustrigger={trigger}
+            placeholder={note}
+          />
+        </FormItem>
+      </FormItem>
+    )
+  }
+  async function initWatch () {
+    let done = false
+    while (!done) {
+      if (window.et.commonWs) {
+        window.et.commonWs.addEventListener('message', onMsg)
+        done = true
+      } else {
+        await wait(400)
+      }
+    }
+  }
+  function init () {
+    initWatch()
+  }
+  useEffect(() => {
+    init()
+  }, [])
+  if (!opts) {
+    return null
+  }
+  const props = {
+    maskClosable: false,
+    okText: e('submit'),
+    onCancel,
+    onOk,
+    closable: false,
+    open: true,
+    title: opts.options?.name || '?',
+    footer: null
+  }
+  return (
+    <Modal
+      {...props}
+    >
+      <Form
+        form={form}
+        layout='vertical'
+        onFinish={onFinish}
+      >
+        {
+          opts.options.prompts.map(renderFormItem)
+        }
+        <FormItem>
+          <Button
+            type='primary'
+            htmlType='submit'
+          >
+            {e('submit')}
+          </Button>
+          <Button
+            type='dashed'
+            className='mg1l'
+            onClick={onIgnore}
+          >
+            {c('ignore')}
+          </Button>
+          <Button
+            className='mg1l'
+            onClick={onCancel}
+          >
+            {e('cancel')}
+          </Button>
+        </FormItem>
+      </Form>
+    </Modal>
+  )
+}

package/client/components/terminal/terminal.styl

@@ -0,0 +1,96 @@
+@require '../../css/includes/theme-default'
+.terms-box
+.term-wrap
+  background main
+  position relative
+.loading-wrapper
+  padding 30px
+  z-index 100
+  // .ant-spin
+  //   color #fff
+  //   background #000
+  // .ant-spin-blur
+  //   opacity 0
+.term-search-box
+  position absolute
+  right 5px
+  top 5px
+  z-index 30
+// .term-sftp-box
+//   .ant-tabs-bar
+//     margin-bottom 0
+//     .ant-tabs-tab
+//       color #999
+//     .ant-tabs-tab-active
+//       color #fff
+//   .ant-tabs-nav-wrap
+//     background #333
+.terminal-control
+  background main
+  line-height 32px
+  padding 0 10px
+// .fileManager
+//   .terminal-control
+//     background main-dark
+//   .type-tab
+//     color text
+//     &:hover
+//     &.active
+//       color text-dark
+//     &.active
+//       border-bottom 1px solid text-dark
+
+.terms-box
+  position relative
+.term-wrap
+  position absolute
+
+.vertical
+  .term-wrap.not-first-term
+    border-top 1px solid main-light
+.horizontal
+  .term-wrap.not-first-term
+    border-left 1px solid main-light
+.term-sftp-tabs
+  margin-left 5px
+
+#container
+  .xterm-viewport
+    // background-color transparent !important
+    // background-image url("./images/electerm-watermark.")
+    background-repeat no-repeat
+    background-position 50% 50%
+
+.terminal-not-active .xterm-text-layer
+  opacity .74
+
+.terminal-normal-buffer
+  position absolute
+  left 0
+  top 0
+  width 100%
+  background main
+  color text
+  box-shadow 0px 3px 3px 0px alpha(text, .25)
+  z-index 66
+  padding-bottom 32px
+.terminal-normal-buffer-body
+  overflow-y scroll
+  max-height 300px
+.terminal-normal-buffer-close
+  cursor pointer
+  font-size 14px
+  color text
+  &:hover
+    color text-light
+.terminal-normal-buffer-footer
+  position absolute
+  left 0
+  top calc(100% - 32px)
+  width 100%
+  height 32px
+  line-height 32px
+  box-shadow 0px -3px 3px 0px alpha(text, .25)
+  background main-light
+.batch-input-wrap
+  width calc(100% - 80px)

package/client/components/terminal/xterm-zmodem.js

@@ -0,0 +1,48 @@
+import zmodem from 'zmodem.js/src/zmodem_browser'
+
+function zmodemAttach (ws, opts, ctx) {
+  if (opts === undefined) { opts = {} }
+  const term = this
+  const senderFunc = function (octets) { return ws.send(new Uint8Array(octets)) }
+  let zsentry = null
+  function shouldWrite () {
+    return !!zsentry.get_confirmed_session() || !opts.noTerminalWriteOutsideSession
+  }
+  zsentry = new zmodem.Sentry({
+    to_terminal: function (octets) {
+      if (shouldWrite()) {
+        term.write(String.fromCharCode.apply(String, octets))
+      }
+    },
+    sender: senderFunc,
+    on_retract: ctx.onzmodemRetract,
+    on_detect: ctx.onZmodemDetect
+  })
+  function handleWSMessage (evt) {
+    if (typeof evt.data === 'string') {
+      if (shouldWrite()) {
+        term.write(evt.data)
+      }
+    } else {
+      zsentry.consume(evt.data)
+    }
+  }
+  ws.binaryType = 'arraybuffer'
+  ws.addEventListener('message', handleWSMessage)
+}
+
+export class AddonZmodem {
+  _disposables = []
+
+  activate (terminal) {
+    terminal.zmodemAttach = zmodemAttach
+    terminal.zmodemBrowser = zmodem.Browser
+  }
+
+  dispose () {
+    this._disposables.forEach(d => d.dispose())
+    this._disposables.length = 0
+  }
+}
+
+export const Zmodem = zmodem

package/client/components/terminal/zmodem-transfer.jsx

@@ -0,0 +1,98 @@
+/**
+ * zmodem transfer UI module
+ * then run rz to send from your browser or
+ * sz <file> to send from the remote peer.
+ */
+
+import { memo } from 'react'
+import { Progress, Button, Upload, Tag } from 'antd'
+import { transferTypeMap } from '../../common/constants'
+import Link from '../common/external-link'
+import './zmodem.styl'
+
+const { prefix } = window
+const s = prefix('sftp')
+const c = prefix('common')
+
+export default memo((props) => {
+  const { zmodemTransfer, cancelZmodem, beforeZmodemUpload } = props
+  if (!zmodemTransfer) {
+    return null
+  }
+  const {
+    fileInfo,
+    type,
+    transferedSize,
+    percent
+    // options
+  } = zmodemTransfer
+  let btn = null
+  let progress = null
+  const recm = (
+    <Tag color='success'>
+      <div className='pd1y'>
+        <b className='mg1r'>Recommend Use trzsz instead:</b>
+        <Link to='https://github.com/trzsz/trzsz'>https://github.com/trzsz/trzsz</Link>
+      </div>
+    </Tag>
+  )
+  const cancelBtn = (
+    <Button
+      type='danger'
+      className='iblock mg2l'
+      onClick={cancelZmodem}
+    >{c('cancel')}
+    </Button>
+  )
+  if (type === transferTypeMap.upload) {
+    btn = (
+      <div className={fileInfo ? 'hide' : 'mg2b'}>
+        <div className='iblock'>
+          <Upload
+            showUploadList={false}
+            beforeUpload={beforeZmodemUpload}
+            className={fileInfo ? 'hide' : 'iblock'}
+          >
+            <Button>
+              {s(type)}
+            </Button>
+          </Upload>
+        </div>
+        {cancelBtn}
+      </div>
+    )
+  }
+  if (fileInfo) {
+    const {
+      size,
+      name
+    } = fileInfo
+    progress = (
+      <div className='pd1b'>
+        <Progress
+          percent={percent}
+          size='small'
+          status='active'
+          format={() => {
+            return `%${percent}(${transferedSize}/${size})`
+          }}
+        />
+        <h2 className='pd2y'>
+          <span className='iblock'>
+            {s(type)}: {name}
+          </span>
+        </h2>
+        <h4 className='pd2t pd2x'>Upload file(❯1M) may not show progress and may not end properly, but still would finish uploading in background.</h4>
+      </div>
+    )
+  }
+  return (
+    <div className='zmodem-transfer'>
+      <div className='zmodem-transfer-inner'>
+        {btn}
+        {progress}
+        {recm}
+      </div>
+    </div>
+  )
+})

package/client/components/terminal/zmodem.styl

@@ -0,0 +1,14 @@
+@require '../../css/includes/theme-default'
+.zmodem-transfer
+  position absolute
+  left 0
+  right 0
+  height 100%
+  width 100%
+  background alpha(main-dark, .95)
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
+  z-index 20
+  padding 20px 180px 20px 20px