@electerm/electerm-react 1.39.18 → 1.39.31

package/client/components/vnc/vnc-form.jsx

@@ -0,0 +1,66 @@
+/**
+ * web form
+ */
+
+import {
+  Input,
+  Form,
+  Button
+} from 'antd'
+import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+const s = prefix('sftp')
+
+export default function VncForm (props) {
+  const [form] = Form.useForm()
+
+  const initialValues = props.types.reduce((acc, cur) => {
+    acc[cur] = ''
+    return acc
+  }, {})
+  function renderCommon () {
+    const {
+      types
+    } = props
+    return types.map((type, index) => {
+      const Elem = type === 'password' ? Input.Password : Input
+      return (
+        <FormItem
+          {...formItemLayout}
+          label={e(type)}
+          name={type}
+          key={type}
+          autoFocus={index === 0}
+        >
+          <Elem />
+        </FormItem>
+      )
+    })
+  }
+
+  return (
+    <Form
+      form={form}
+      onFinish={props.handleFinish}
+      initialValues={initialValues}
+      name='vnc-form'
+    >
+      <div className='pd3t pd1b'>
+        {renderCommon()}
+        <FormItem
+          {...tailFormItemLayout}
+        >
+          <Button
+            type='primary'
+            htmlType='submit'
+          >
+            {s('submit')}
+          </Button>
+        </FormItem>
+      </div>
+    </Form>
+  )
+}

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

@@ -0,0 +1,297 @@
+import RdpSession from '../rdp/rdp-session'
+import { createTerm } from '../terminal/terminal-apis'
+import deepCopy from 'json-deep-copy'
+import clone from '../../common/to-simple-obj'
+import { handleErr } from '../../common/fetch'
+import {
+  statusMap
+} from '../../common/constants'
+import {
+  Spin,
+  message,
+  Modal,
+  Tag
+} from 'antd'
+import * as ls from '../../common/safe-local-storage'
+import { copy } from '../../common/clipboard'
+import resolutions from '../rdp/resolutions'
+import RFB from '@novnc/novnc/core/rfb'
+import VncForm from './vnc-form'
+
+const { prefix } = window
+const e = prefix('form')
+
+export default class VncSession extends RdpSession {
+  constructor (props) {
+    const id = `vnc-reso-${props.tab.host}`
+    const resObj = ls.getItemJSON(id, resolutions[0])
+    super(props)
+    this.state = {
+      types: [],
+      showConfirm: false,
+      loading: false,
+      aspectRatio: 4 / 3,
+      name: '',
+      ...resObj
+    }
+  }
+
+  componentDidMount () {
+    this.remoteInit()
+  }
+
+  componentWillUnmount () {
+    this.rfb && this.rfb.disconnect()
+    delete this.rfb
+  }
+
+  // computeProps = () => {
+  //   const {
+  //     height,
+  //     width,
+  //     tabsHeight,
+  //     leftSidebarWidth,
+  //     pinned,
+  //     openedSideBar
+  //   } = this.props
+  //   return {
+  //     width: width - (pinned && openedSideBar ? leftSidebarWidth : 0),
+  //     height: height - tabsHeight
+  //   }
+  // }
+
+  remoteInit = async (term = this.term) => {
+    this.setState({
+      loading: true
+    })
+    const { config } = this.props
+    const {
+      host,
+      port,
+      tokenElecterm,
+      server = ''
+    } = config
+    const { sessionId, id } = this.props
+    const tab = deepCopy(this.props.tab || {})
+    const {
+      type,
+      term: terminalType,
+      viewOnly = false,
+      scaleViewport = true,
+      username,
+      password
+    } = tab
+    const opts = clone({
+      term: terminalType || config.terminalType,
+      sessionId,
+      tabId: id,
+      srcTabId: tab.id,
+      termType: type,
+      ...tab
+    })
+    let pid = await createTerm(opts)
+      .catch(err => {
+        const text = err.message
+        handleErr({ message: text })
+      })
+    pid = pid || ''
+    this.setState({
+      loading: false
+    })
+    if (!pid) {
+      this.setStatus(statusMap.error)
+      return
+    }
+    this.setStatus(statusMap.success)
+    this.pid = pid
+    const hs = server
+      ? server.replace(/https?:\/\//, '')
+      : `${host}:${port}`
+    const pre = server.startsWith('https') ? 'wss' : 'ws'
+    const { width, height } = this.state
+    const wsUrl = `${pre}://${hs}/vnc/${pid}?sessionId=${sessionId}&token=${tokenElecterm}&width=${width}&height=${height}`
+    const vncOpts = {
+      scaleViewport,
+      viewOnly,
+      style: {
+        width: width + 'px',
+        height: height + 'px',
+        overflow: 'scroll'
+      },
+      credentials: {}
+    }
+    if (username) {
+      vncOpts.credentials.username = username
+    }
+    if (password) {
+      vncOpts.credentials.password = password
+    }
+    const rfb = new RFB(
+      this.getDom(),
+      wsUrl,
+      vncOpts
+    )
+    const events = [
+      'connect',
+      'disconnect',
+      'credentialsrequired',
+      'securityfailure',
+      'clipboard',
+      'bell',
+      'desktopname',
+      'capabilities'
+    ]
+    for (const event of events) {
+      rfb.addEventListener(event, this[`on${window.capitalizeFirstLetter(event)}`])
+    }
+    this.rfb = rfb
+  }
+
+  onConnect = (event) => {
+    // console.log('onConnect', event)
+    this.setStatus(statusMap.success)
+    this.setState({
+      loading: false
+    })
+  }
+
+  onDisconnect = () => {
+    this.setStatus(statusMap.error)
+  }
+
+  onSecurityfailure = (event) => {
+    // console.log('onSecurityFailure', event)
+    message.error('Security Failure: ' + event.detail?.reason)
+  }
+
+  onOk = (res) => {
+    this.setState({
+      showConfirm: false
+    })
+    this.rfb?.sendCredentials(res)
+  }
+
+  onCredentialsrequired = (event) => {
+    this.setState({
+      types: event.detail?.types || [],
+      showConfirm: true
+    })
+  }
+
+  renderForm (types = this.state.types) {
+    return (
+      <VncForm
+        types={types}
+        handleFinish={this.onOk}
+      />
+    )
+  }
+
+  onClipboard = (event) => {
+    // console.log('onClipboard', event)
+    copy(event.detail.text)
+  }
+
+  onBell = (event) => {
+    // console.log('Bell', event)
+    message.warning('Bell')
+  }
+
+  onDesktopname = (event) => {
+    this.setState({
+      name: event?.detail?.name || ''
+    })
+  }
+
+  onCapabilities = (capabilities) => {
+    console.log('onCapabilities', capabilities)
+  }
+
+  getDom = () => {
+    const id = 'canvas_' + this.props.tab.id
+    return document.getElementById(id)
+  }
+
+  handleReInit = () => {
+    this.rfb?.disconnect()
+    delete this.rfb
+    this.remoteInit()
+  }
+
+  renderInfo () {
+    const {
+      name
+    } = this.state
+    const {
+      host,
+      port,
+      username
+    } = this.props.tab
+    return (
+      <span className='mg2l mg2r'>
+        <b>{name}</b> {username}@{host}:{port}
+      </span>
+    )
+  }
+
+  renderHelp = () => {
+    return (
+      <Tag color='red' className='mg1l'>Beta</Tag>
+    )
+  }
+
+  renderConfirm () {
+    const {
+      showConfirm
+    } = this.state
+    if (!showConfirm) {
+      return null
+    }
+    const confirmProps = {
+      title: e('credentialsRequired'),
+      content: this.renderForm(['password']),
+      footer: null,
+      visible: true
+    }
+    return (
+      <Modal
+        {...confirmProps}
+      >
+        {this.renderForm()}
+      </Modal>
+    )
+  }
+
+  render () {
+    const { width: w, height: h } = this.computeProps()
+    const vncProps = {
+      style: {
+        width: w + 'px',
+        height: h + 'px'
+      }
+    }
+    const { width, height, loading } = this.state
+    const divProps = {
+      style: {
+        width: width + 'px',
+        height: height + 'px'
+      }
+    }
+    return (
+      <Spin spinning={loading}>
+        <div
+          {...vncProps}
+          className='rdp-session-wrap pd1'
+        >
+          {this.renderControl()}
+          <div
+            {...divProps}
+            className='vnc-session-wrap session-v-wrap'
+            id={'canvas_' + this.props.tab.id}
+          />
+          {this.renderConfirm()}
+        </div>
+      </Spin>
+    )
+  }
+}

package/client/store/common.js

@@ -211,4 +211,25 @@ export default Store => {
       terminalInfos: arr
     })
   }
+
+  Store.prototype.applyProfile = function (tab) {
+    const {
+      authType,
+      profile
+    } = tab
+    if (authType !== 'profiles') {
+      return tab
+    }
+    const p = window.store.profiles.find(x => x.id === profile)
+    if (!p) {
+      return tab
+    }
+    // delete tab.password
+    // delete tab.privateKey
+    // delete tab.passphrase
+    return {
+      ...tab,
+      ...p
+    }
+  }
 }

package/client/store/index.js

@@ -282,6 +282,7 @@ const getterProps = [
   'history',
   'bookmarks',
   'bookmarkGroups',
+  'profiles',
   'tabs',
   'fileTransfers',
   'transferHistory',

package/client/store/init-state.js

@@ -5,7 +5,6 @@
 import {
   settingMap,
   defaultBookmarkGroupId,
-  newBookmarkIdPrefix,
   fileOperationsMap,
   syncTypes,
   infoTabs,
@@ -22,14 +21,12 @@ import {
   qmSortByFrequencyKey,
   resolutionsLsKey
 } from '../common/constants'
-import { buildDefaultThemes, buildNewTheme } from '../common/terminal-theme'
+import { buildDefaultThemes } from '../common/terminal-theme'
 import * as ls from '../common/safe-local-storage'
+import initSettingItem from '../common/init-setting-item'
 
 const { prefix } = window
 const t = prefix('terminalThemes')
-const e = prefix('common')
-const newQuickCommand = 'newQuickCommand'
-const q = prefix('quickCommands')
 
 function getDefaultBookmarkGroups (bookmarks) {
   return [
@@ -41,23 +38,6 @@ function getDefaultBookmarkGroups (bookmarks) {
   ]
 }
 
-export const getInitItem = (arr, tab) => {
-  if (tab === settingMap.history) {
-    return arr[0] || {}
-  } else if (tab === settingMap.bookmarks) {
-    return { id: newBookmarkIdPrefix + ':' + (Date.now()), title: '' }
-  } else if (tab === settingMap.setting) {
-    return { id: '', title: e('common') }
-  } else if (tab === settingMap.terminalThemes) {
-    return buildNewTheme()
-  } else if (tab === settingMap.quickCommands) {
-    return {
-      id: '',
-      name: q(newQuickCommand)
-    }
-  }
-}
-
 export default () => {
   return {
     // common
@@ -70,6 +50,7 @@ export default () => {
     termFocused: false,
     _history: '[]',
     _bookmarks: '[]',
+    _profiles: '[]',
     _bookmarkGroups: JSON.stringify(
       getDefaultBookmarkGroups([])
     ),
@@ -113,7 +94,7 @@ export default () => {
 
     // for settings related
     _setting: '',
-    _settingItem: JSON.stringify(getInitItem([], settingMap.bookmarks)),
+    _settingItem: JSON.stringify(initSettingItem([], settingMap.bookmarks)),
     settingTab: settingMap.bookmarks, // setting tab
     autofocustrigger: Date.now(),
     bookmarkId: undefined,

package/client/store/load-data.js

@@ -80,7 +80,6 @@ export async function addTabFromCommandLine (store, opts) {
     conf.privateKey = await fs.readFile(options.privateKeyPath)
   }
   log.debug('command line opts', conf)
-  console.log(options.initFolder, !(store.config.onStartSessions || []).length, store.config.initDefaultTabOnStart)
   if (conf.username && conf.host) {
     store.addTab(conf)
   } else if (
@@ -178,7 +177,7 @@ export default (Store) => {
     await Promise.all(all)
       .then(arr => {
         for (const { name, data } of arr) {
-          ext['_' + name] = data
+          ext['_' + name] = data || '[]'
         }
       })
     ext.lastDataUpdateTime = await getData('lastDataUpdateTime') || 0

package/package.json

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