@electerm/electerm-react 1.100.60 → 1.101.10

package/client/components/bookmark-form/common/render-auth-ssh.jsx

@@ -0,0 +1,119 @@
+/**
+ * bookmark form auth renderer (copied from legacy)
+ */
+import {
+  Button,
+  Input,
+  Upload,
+  AutoComplete,
+  Form,
+  Select
+} from 'antd'
+import { formItemLayout } from '../../../common/form-layout'
+import { uniqBy } from 'lodash-es'
+import Password from '../../common/password'
+import { getFilePath } from '../../../common/file-drop-utils'
+
+const { TextArea } = Input
+const FormItem = Form.Item
+const e = window.translate
+
+export default function renderAuth (props) {
+  const {
+    store,
+    form,
+    authType,
+    formItemName = 'password',
+    profileFilter = (d) => d
+  } = props
+  const beforeUpload = async (file) => {
+    const filePath = getFilePath(file)
+    const privateKey = await window.fs.readFile(filePath)
+    form.setFieldsValue({
+      privateKey
+    })
+    return false
+  }
+  if (authType === 'password') {
+    const opts = {
+      options: uniqBy(
+        store.bookmarks
+          .filter(d => d.password),
+        (d) => d.password
+      )
+        .map(d => ({
+          label: `${d.title ? `(${d.title})` : ''}${d.username || ''}:${d.host}-******`,
+          value: d.password
+        })),
+      placeholder: e('password'),
+      allowClear: false
+    }
+    return (
+      <FormItem
+        {...formItemLayout}
+        label={e('password')}
+        name={formItemName}
+        hasFeedback
+        rules={[{
+          max: 1024, message: '1024 chars max'
+        }]}
+      >
+        <AutoComplete {...opts}>
+          <Password />
+        </AutoComplete>
+      </FormItem>
+    )
+  }
+  if (authType === 'profiles') {
+    const opts = {
+      options: store.profiles
+        .filter(profileFilter)
+        .map(d => ({ label: d.name, value: d.id })),
+      placeholder: e('profiles'),
+      allowClear: true
+    }
+    return (
+      <FormItem
+        {...formItemLayout}
+        label={e('profiles')}
+        name='profile'
+        hasFeedback
+      >
+        <Select {...opts} />
+      </FormItem>
+    )
+  }
+  return [
+    <FormItem
+      {...formItemLayout}
+      label={e('privateKey')}
+      hasFeedback
+      key='privateKey'
+      className='mg1b'
+      rules={[{
+        max: 13000, message: '13000 chars max'
+      }]}
+    >
+      <FormItem noStyle name='privateKey'>
+        <TextArea placeholder={e('privateKeyDesc')} autoSize={{ minRows: 1 }} />
+      </FormItem>
+      <Upload beforeUpload={beforeUpload} fileList={[]}>
+        <Button type='dashed' className='mg2b mg1t'>
+          {e('importFromFile')}
+        </Button>
+      </Upload>
+    </FormItem>,
+    <FormItem
+      key='passphrase'
+      {...formItemLayout}
+      label={e('passphrase')}
+      name='passphrase'
+      hasFeedback
+      rules={[{
+        max: 1024, message: '1024 chars max'
+      }]}
+    >
+      <Password placeholder={e('passphraseDesc')} />
+    </FormItem>
+  ]
+}

package/client/components/bookmark-form/{render-delayed-scripts.jsx → common/run-scripts.jsx}

@@ -6,7 +6,7 @@ import {
   Input
 } from 'antd'
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
-import { formItemLayout } from '../../common/form-layout'
+import { formItemLayout } from '../../../common/form-layout'
 
 const FormItem = Form.Item
 const FormList = Form.List
@@ -30,6 +30,7 @@ export default function renderRunScripts () {
               step={1}
               max={65535}
               addonBefore={e('loginScriptDelay')}
+              rules={[{ required: true, message: e('loginScriptDelay') + ' required' }]}
               className='compact-input'
             />
           </FormItem>
@@ -72,7 +73,10 @@ export default function renderRunScripts () {
                 <FormItem>
                   <Button
                     type='dashed'
-                    onClick={() => add()}
+                    onClick={() => add({
+                      delay: 500,
+                      script: ''
+                    })}
                     block
                     icon={<PlusOutlined />}
                   >

package/client/components/bookmark-form/common/serial-path-selector.jsx

@@ -0,0 +1,39 @@
+import { ReloadOutlined } from '@ant-design/icons'
+import { AutoComplete, Spin, Form } from 'antd'
+import { formItemLayout } from '../../../common/form-layout'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function SerialPathSelector ({
+  serials = [],
+  loaddingSerials,
+  store = window.store,
+  ...props
+}) {
+  return (
+    <FormItem
+      {...formItemLayout}
+      label='path'
+      rules={[{
+        required: true, message: 'path required'
+      }]}
+      normalize={props.trim}
+    >
+      <FormItem noStyle name='path'>
+        <AutoComplete
+          options={serials.map(d => {
+            return {
+              value: d.path
+            }
+          })}
+        />
+      </FormItem>
+      <Spin spinning={loaddingSerials}>
+        <span onClick={store.handleGetSerials}>
+          <ReloadOutlined /> {e('reload')} serials
+        </span>
+      </Spin>
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/{render-auth-ssh.jsx → common/ssh-auth-selector.jsx}

@@ -9,11 +9,10 @@ import {
   Form,
   Select
 } from 'antd'
-import { formItemLayout } from '../../common/form-layout'
+import { formItemLayout } from '../../../common/form-layout'
 import { uniqBy } from 'lodash-es'
-import './bookmark-form.styl'
-import Password from '../common/password'
-import { getFilePath } from '../../common/file-drop-utils'
+import Password from '../../common/password'
+import { getFilePath } from '../../../common/file-drop-utils'
 
 const { TextArea } = Input
 const FormItem = Form.Item

package/client/components/bookmark-form/common/ssh-auth-type-selector.jsx

@@ -0,0 +1,38 @@
+import { Radio, Form } from 'antd'
+import { authTypeMap } from '../../../common/constants'
+import { tailFormItemLayout } from '../../../common/form-layout'
+
+const authTypes = Object.keys(authTypeMap).map(k => {
+  return k
+})
+const RadioButton = Radio.Button
+const RadioGroup = Radio.Group
+const e = window.translate
+const FormItem = Form.Item
+
+export default function SshAuthTypeSelector ({ handleChangeAuthType, filterAuthType = a => a, value, ...props }) {
+  const authTypesFiltered = authTypes.filter(filterAuthType)
+  return (
+    <FormItem
+      {...tailFormItemLayout}
+      className='mg1b'
+      name='authType'
+    >
+      <RadioGroup
+        size='small'
+        onChange={handleChangeAuthType}
+        buttonStyle='solid'
+      >
+        {
+          authTypesFiltered.map(t => {
+            return (
+              <RadioButton value={t} key={t}>
+                {e(t)}
+              </RadioButton>
+            )
+          })
+        }
+      </RadioGroup>
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/common/ssh-host-selector.jsx

@@ -0,0 +1,61 @@
+import { Form } from 'antd'
+import InputAutoFocus from '../../common/input-auto-focus.jsx'
+import { ColorPickerItem } from './color-picker-item.jsx'
+import { formItemLayout } from '../../../common/form-layout.js'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function SshHostSelector ({ ips = [], useIp, form, onBlur, onPaste, trim, ...props }) {
+  // ips is ipaddress string[]
+  function renderIps () {
+    return ips.map(ip => {
+      return (
+        <div
+          key={ip}
+          className='iblock mg2r pointer ip-item'
+          onClick={() => useIp(form, ip)}
+        >
+          <b>{ip}</b>
+          <span
+            className='mg1l item-item-use'
+          >
+            {e('use')}
+          </span>
+        </div>
+      )
+    })
+  }
+
+  return (
+    <FormItem
+      {...formItemLayout}
+      label={e('host')}
+      hasFeedback
+      rules={[{
+        max: 520, message: '520 chars max'
+      }, {
+        required: true, message: 'host required'
+      }]}
+      normalize={props.trim}
+    >
+      {
+        ips.length
+          ? renderIps()
+          : (
+            <div className='dns-section'>
+              hostname or ip
+            </div>
+            )
+      }
+      <FormItem noStyle name='host'>
+        <InputAutoFocus
+          name='host'
+          onBlur={props.onBlur}
+          onPaste={e => props.onPaste(e, form)}
+          addonBefore={<ColorPickerItem />}
+        />
+      </FormItem>
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/{render-ssh-tunnel.jsx → common/ssh-tunnels.jsx}

@@ -10,8 +10,8 @@ import {
 } from 'antd'
 import { useState } from 'react'
 import { PlusOutlined, QuestionCircleOutlined, MinusCircleFilled, UserOutlined } from '@ant-design/icons'
-import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
-import uid from '../../common/uid'
+import { formItemLayout, tailFormItemLayout } from '../../../common/form-layout'
+import uid from '../../../common/uid'
 
 const FormItem = Form.Item
 const {
@@ -47,7 +47,7 @@ export default function renderSshTunnels (props) {
       id: uid()
     }
     const v = [
-      ...form.getFieldValue('sshTunnels'),
+      ...(form.getFieldValue('sshTunnels') || []),
       nd
     ]
     form.setFieldsValue({
@@ -66,7 +66,7 @@ export default function renderSshTunnels (props) {
     setList(old => {
       return old.filter(i => i.id !== id)
     })
-    const v = form.getFieldValue('sshTunnels').filter(i => i.id !== id)
+    const v = (form.getFieldValue('sshTunnels') || []).filter(i => i.id !== id)
     form.setFieldsValue({
       sshTunnels: v
     })

package/client/components/bookmark-form/common/submit-buttons.jsx

@@ -0,0 +1,42 @@
+/**
+ * Common submit buttons component for bookmark forms
+ * Provides save, connect, and test functionality
+ */
+import React from 'react'
+import { Button, Form } from 'antd'
+import { tailFormItemLayout } from '../../../common/form-layout'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function SubmitButtons ({
+  onSave,
+  onSaveAndCreateNew,
+  onConnect,
+  onTestConnection,
+  onSaveAndConnect
+}) {
+  return (
+    <FormItem {...tailFormItemLayout}>
+      <p>
+        <Button type='primary' htmlType='submit' className='mg1r mg1b'>
+          {e('saveAndConnect')}
+        </Button>
+        <Button type='primary' className='mg1r mg1b' onClick={onSaveAndCreateNew}>
+          {e('saveAndCreateNew')}
+        </Button>
+        <Button type='dashed' className='mg1r mg1b' onClick={onSave}>
+          {e('save')}
+        </Button>
+      </p>
+      <p>
+        <Button type='dashed' onClick={onConnect} className='mg1r mg1b'>
+          {e('connect')}
+        </Button>
+        <Button type='dashed' onClick={onTestConnection} className='mg1r mg1b'>
+          {e('testConnection')}
+        </Button>
+      </p>
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/{render-bg.jsx → common/terminal-background.jsx}

@@ -3,8 +3,8 @@
  */
 import React from 'react'
 import { Form } from 'antd'
-import TerminalBackgroundConfig from '../setting-panel/terminal-bg-config'
-import { formItemLayout } from '../../common/form-layout'
+import TerminalBackgroundConfig from '../../setting-panel/terminal-bg-config'
+import { formItemLayout } from '../../../common/form-layout'
 
 const FormItem = Form.Item
 

package/client/components/bookmark-form/{x11.jsx → common/x11.jsx}

@@ -7,7 +7,7 @@ import {
   Button,
   Select
 } from 'antd'
-import { formItemLayout } from '../../common/form-layout'
+import { formItemLayout } from '../../../common/form-layout'
 
 const FormItem = Form.Item
 const { Option } = Select
@@ -77,7 +77,7 @@ const defaultServerHostKeyOptions = [
   'rsa-sha2-256'
 ]
 
-export default function renderX11 (form) {
+export default function renderX11 ({ form }) {
   function setDefaults () {
     form.setFieldValue('cipher', defaultCipherOptions)
     form.setFieldValue('serverHostKey', defaultServerHostKeyOptions)