@electerm/electerm-react 1.38.70 → 1.38.81

package/client/common/constants.js

@@ -66,7 +66,8 @@ export const connectionMap = buildConst([
   'ssh',
   'telnet',
   'serial',
-  'local'
+  'local',
+  'web'
 ])
 
 export const authTypeMap = buildConst([
@@ -131,6 +132,7 @@ export const terminalSplitDirectionMap = buildConst([
 ])
 
 export const terminalSshConfigType = 'ssh-config'
+export const terminalWebType = 'web'
 export const terminalSerialType = 'serial'
 export const terminalTelnetType = 'telnet'
 export const terminalLocalType = 'local'

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

@@ -9,6 +9,7 @@ import {
   settingMap,
   connectionMap,
   terminalSerialType,
+  terminalWebType,
   terminalLocalType,
   terminalTelnetType,
   newBookmarkIdPrefix
@@ -17,6 +18,7 @@ import SshForm from './ssh-form'
 import SerialForm from './serial-form'
 import LocalForm from './local-form'
 import TelnetForm from './telnet-form'
+import WebForm from './web-form'
 import { createTitleWithTag } from '../../common/create-title'
 import {
   LoadingOutlined,
@@ -33,13 +35,14 @@ export default class BookmarkIndex extends Component {
   constructor (props) {
     super(props)
     let initType = props.formData.type
-    if (initType === terminalTelnetType) {
-      initType = terminalTelnetType
-    } else if (initType === terminalSerialType) {
-      initType = terminalSerialType
-    } else if (initType === terminalLocalType) {
-      initType = terminalLocalType
-    } else {
+    if (
+      ![
+        terminalTelnetType,
+        terminalWebType,
+        terminalLocalType,
+        terminalSerialType
+      ].includes(initType)
+    ) {
       initType = connectionMap.ssh
     }
     this.state = {
@@ -64,7 +67,8 @@ export default class BookmarkIndex extends Component {
     [connectionMap.ssh]: SshForm,
     [connectionMap.telnet]: TelnetForm,
     [connectionMap.serial]: SerialForm,
-    [connectionMap.local]: LocalForm
+    [connectionMap.local]: LocalForm,
+    [connectionMap.web]: WebForm
   }
 
   handleChange = (e) => {

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

@@ -0,0 +1,96 @@
+/**
+ * web form
+ */
+
+import { useEffect } from 'react'
+import {
+  Input,
+  Form
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import {
+  newBookmarkIdPrefix,
+  terminalWebType
+} from '../../common/constants'
+import useSubmit from './use-submit'
+import copy from 'json-deep-copy'
+import { defaults } from 'lodash-es'
+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')
+
+export default function LocalFormUi (props) {
+  const [
+    form,
+    handleFinish,
+    submitUi
+  ] = useSubmit(props)
+  useEffect(() => {
+    if (props.formData.id.startsWith(newBookmarkIdPrefix)) {
+      form.setFieldsValue({
+        category: props.currentBookmarkGroupId
+      })
+    }
+  }, [props.currentBookmarkGroupId])
+  let initialValues = copy(props.formData)
+  const defaultValues = {
+    type: terminalWebType,
+    color: getRandomDefaultColor()
+  }
+  initialValues = defaults(initialValues, defaultValues)
+  function renderCommon () {
+    return (
+      <div className='pd1x'>
+        <FormItem
+          {...formItemLayout}
+          label={e('title')}
+          hasFeedback
+        >
+          <FormItem noStyle name='title'>
+            <Input addonBefore={<ColorPickerItem />} />
+          </FormItem>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('URL')}
+          hasFeedback
+          name='url'
+          required
+        >
+          <Input addonBefore={<ColorPickerItem />} />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={e('description')}
+          name='description'
+          hasFeedback
+        >
+          <Input.TextArea rows={1} />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label='type'
+          name='type'
+          className='hide'
+        >
+          <Input />
+        </FormItem>
+      </div>
+    )
+  }
+
+  return (
+    <Form
+      form={form}
+      onFinish={handleFinish}
+      initialValues={initialValues}
+      name='local-form'
+    >
+      {renderCommon()}
+      {submitUi}
+    </Form>
+  )
+}

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

@@ -0,0 +1,16 @@
+/**
+ * bookmark form
+ */
+import BookmarkForm from './ssh-form'
+import WebFormUi from './web-form-ui'
+
+export default class WebForm extends BookmarkForm {
+  render () {
+    return (
+      <WebFormUi
+        {...this.props}
+        {...this.getProps()}
+      />
+    )
+  }
+}

package/client/components/quick-commands/qm.styl

@@ -8,7 +8,7 @@
   left 43px
   right 0
   color text
-  z-index 200
+  z-index 89
   height auto
   bottom 36px
   background alpha(main-dark, .9)

package/client/components/session/session.styl

@@ -55,4 +55,7 @@
 .no-sessions
   background main-dark
   text-align center
-  padding 50px 0
+  padding 50px 0
+.web-session-wrap
+  height 100vh
+  background main

package/client/components/session/sessions.jsx

@@ -1,5 +1,6 @@
 import { Component } from '../common/react-subx'
 import Session from './session'
+import WebSession from './web-session'
 import { findIndex, pick } from 'lodash-es'
 import classNames from 'classnames'
 import generate from '../../common/uid'
@@ -11,7 +12,8 @@ import {
   tabActions,
   termInitId,
   paneMap,
-  statusMap
+  statusMap,
+  terminalWebType
 } from '../../common/constants'
 import newTerm, { updateCount } from '../../common/new-terminal'
 import postMsg from '../../common/post-msg'
@@ -336,7 +338,7 @@ class Sessions extends Component {
       return this.renderNoSession()
     }
     return tabs.map((tab) => {
-      const { id } = tab
+      const { id, type } = tab
       const cls = classNames(
         `session-wrap session-${id}`,
         {
@@ -372,6 +374,18 @@ class Sessions extends Component {
           'editTab'
         ])
       }
+      if (type === terminalWebType) {
+        const webProps = {
+          tab
+        }
+        return (
+          <div className={cls} key={id}>
+            <WebSession
+              {...webProps}
+            />
+          </div>
+        )
+      }
       return (
         <div className={cls} key={id}>
           <Session

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

@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+import Link from '../common/external-link'
+
+export default function WebSession (props) {
+  const {
+    tab
+  } = props
+  useEffect(() => {
+    tab.url && window.openLink(tab.url)
+  }, [])
+  return (
+    <div className='web-session-wrap'>
+      <div className='pd3 aligncenter'>
+        <h1>{tab.title}</h1>
+        <p>{tab.description}</p>
+        <Link to={tab.url}>{tab.url}</Link>
+      </div>
+    </div>
+  )
+}

package/client/components/terminal/index.jsx

@@ -138,9 +138,13 @@ class Term extends Component {
       clearTimeout(this.timers[k])
     })
     this.onClose = true
-    this.socket && this.socket.close()
+    if (this.socket) {
+      this.socket.close()
+      delete this.socket
+    }
     if (this.term) {
       this.term.dispose()
+      delete this.term
     }
     window.removeEventListener(
       'resize',
@@ -149,6 +153,13 @@ class Term extends Component {
     window.removeEventListener('message', this.handleEvent)
     this.dom.removeEventListener('contextmenu', this.onContextMenu)
     window.removeEventListener('message', this.onContextAction)
+    delete this.dom
+    delete this.attachAddon
+    delete this.fitAddon
+    delete this.zmodemAddon
+    delete this.searchAddon
+    delete this.serializeAddon
+    delete this.fitAddon
   }
 
   terminalConfigProps = [
@@ -1226,6 +1237,7 @@ class Term extends Component {
     this.socketCloseWarning = notification.warning({
       key,
       message: e('socketCloseTip'),
+      duration: 30,
       description: (
         <div className='pd2y'>
           <Button

package/client/entry/worker.js

@@ -16,7 +16,11 @@ function createWs (
   const wsUrl = `ws://${host}:${port}/${type}/${id}?sessionId=${sessionId}&sftpId=${sftpId}&token=${tokenElecterm}`
   const ws = new WebSocket(wsUrl)
   ws.s = msg => {
-    ws.send(JSON.stringify(msg))
+    try {
+      ws.send(JSON.stringify(msg))
+    } catch (e) {
+      console.error('ws send error', e)
+    }
   }
   ws.id = id
   ws.once = (callack, id) => {

package/client/store/index.js

@@ -63,7 +63,18 @@ function expandShorthandColor (color) {
   if (color.length === 4) {
     return '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]
   }
-  return color
+  if (color.length === 7) {
+    return color
+  }
+  if (color.length < 7) {
+    return expandShorthandColor(color + 'f')
+  }
+  if (color.length > 7) {
+    return expandShorthandColor(color.slice(0, 7))
+  }
+  if (!/^#[A-Fa-f0-9]{6}$/.test(color)) {
+    return '#141314'
+  }
 }
 
 function isColorDark (_color) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "1.38.70",
+  "version": "1.38.81",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",