@electerm/electerm-react 5.5.66 → 5.5.76

package/client/common/constants.js

@@ -301,6 +301,18 @@ export const proxyHelpLink = 'https://github.com/electerm/electerm/wiki/proxy-fo
 export const regexHelpLink = 'https://github.com/electerm/electerm/wiki/Terminal-keywords-highlight-regular-expression-exmaples'
 export const connectionHoppingWikiLink = 'https://github.com/electerm/electerm/wiki/Connection-Hopping-Behavior-Change-in-electerm-since-v1.50.65'
 export const aiConfigWikiLink = 'https://github.com/electerm/electerm/wiki/AI-model-config-guide'
+export const installCommandHelpLink = 'https://github.com/electerm/electerm/wiki/Install-electerm-command'
+
+// Toggle options that have a wiki page explaining what they actually change.
+// renderToggle() looks the config key up here and renders a HelpIcon only for
+// the keys listed, so a toggle without an explanation stays clean. Add a page
+// under https://github.com/electerm/electerm/wiki first, then add its key here.
+export const toggleWikiMap = {
+  mouseEventsRequireAlt:
+    'https://github.com/electerm/electerm/wiki/Mouse-events-require-alt',
+  sftpPathFollowSsh:
+    'https://github.com/electerm/electerm/wiki/Warning-about-sftp-follow-ssh-path-function'
+}
 export const aiChatModeLsKey = 'ai-chat-mode'
 export const aiAutoCompressLsKey = 'ai-auto-compress'
 export const lastAiChatSessionIdKey = 'last-ai-chat-session-id'

package/client/common/default-setting.js

@@ -96,6 +96,7 @@ export default {
   disableTabIndex: false,
   onlyShowTitleInTab: false,
   disableShortcutBar: false,
+  autoDistributeTabsWhenLayoutChange: false,
   disableConfirmForLargeClipboardContent: false,
   doubleClickToOpenBookmark: false,
   leftSideBarIcons: [

package/client/common/distribute-tabs.js

@@ -0,0 +1,42 @@
+/**
+ * Tab-to-pane distribution maths for the `autoDistributeTabsWhenLayoutChange`
+ * setting.
+ *
+ * Scope is deliberately narrow: the setting only kicks in when leaving the
+ * single layout for a layout with more panes. Once there is more than one pane
+ * the arrangement is the user's own doing, so it is never reshuffled — the
+ * store falls through to the pre-existing behaviour for every other transition.
+ *
+ * Pure on purpose (no store access) so the behaviour can be pinned down by unit
+ * tests instead of by driving the app.
+ */
+
+/**
+ * Evenly split tabs across `count` panes, preserving tab order. The leading
+ * panes stay fuller when it does not divide evenly, so the first tabs stay in
+ * the first pane.
+ *
+ *   6 -> 3 panes = 2/2/2      5 -> 3 panes = 2/2/1
+ *   4 -> 3 panes = 2/1/1      7 -> 3 panes = 3/2/2
+ *   6 -> 4 panes = 2/2/1/1    2 -> 3 panes = 1/1/0
+ *
+ * @param {number} total number of tabs
+ * @param {number} count number of panes
+ * @returns {number[]} the pane index for each tab, in tab order
+ */
+export function distributeTabsEvenly (total, count) {
+  const panes = Math.max(1, Math.floor(Number(count)) || 1)
+  const n = Math.max(0, Math.floor(Number(total)) || 0)
+  const base = Math.floor(n / panes)
+  const extra = n % panes
+  const batches = []
+  for (let pane = 0; pane < panes; pane++) {
+    const size = base + (pane < extra ? 1 : 0)
+    for (let i = 0; i < size; i++) {
+      batches.push(pane)
+    }
+  }
+  return batches
+}
+
+export default distributeTabsEvenly

package/client/common/import-task.js

@@ -59,6 +59,14 @@ export function cancelImportTask () {
  * @param {string[]} options.stopWatchers db watcher names (window.watchXxx)
  *   to pause during the task, so chunked writes do not trigger a db diff
  *   per batch; watchers restart one per frame after the steps finish
+ * @param {Function} options.onAbort called as ({cancelled, error}) when the
+ *   task did NOT run to completion, BEFORE the watchers restart. A stopped
+ *   watcher cannot observe store changes, so its snapshot only describes the
+ *   db while the task ran to completion; after a cancel/throw the store may
+ *   hold a partial result while the snapshot still describes the pre-task
+ *   table. Restarting there would classify every untouched record as
+ *   `removed` and delete it, so the caller must use this hook to put the
+ *   store back in sync with the snapshot first.
  * @param {Function} options.onProgress called as (current, total) per batch
  * @returns {Promise<{cancelled: boolean, error: Error|null}>}
  */
@@ -72,6 +80,7 @@ export async function runImportTask (options) {
     useModal = true,
     modalMinTotal = 200,
     stopWatchers = [],
+    onAbort,
     onProgress
   } = options
   if (controller) {
@@ -134,23 +143,57 @@ export async function runImportTask (options) {
         update({ label })
       }
     }
+  } catch (err) {
+    error = err
+  }
+
+  // A watcher that was stopped cannot observe store changes, so its snapshot
+  // is only a faithful description of the db while the task ran to completion.
+  // After a cancel or a throw the store can hold a partial result while the
+  // snapshot still describes the pre-task table; the restart below would then
+  // diff "snapshot \ store" and delete every record the task never touched.
+  // Let the caller reconcile the store with the snapshot first.
+  const aborted = controller.cancelled || !!error
+  if (aborted && typeof onAbort === 'function') {
+    try {
+      await onAbort({ cancelled: controller.cancelled, error })
+    } catch (abortErr) {
+      // the abort hook is best effort - a failure there must not stop the
+      // watchers from coming back up
+      error = error || abortErr
+    }
+  }
+
+  try {
     // restart watchers one per frame - each start() synchronously diffs
     // + deep-copies its collection and writes to db, so restarting all at
     // once would freeze the UI right when the import "finishes"
     for (const name of stopWatchers) {
       await yieldToUI(batchIdle)
+      // after an abort the store was just put back to its pre-task state;
+      // make that the watcher's baseline so the restart is a no-op instead of
+      // a mass deletion. reseed() is a no-op for watchers that do not have it.
+      if (aborted) {
+        window[`watch${name}`]?.reseed?.()
+      }
       window[`watch${name}`]?.start()
       restarted.add(name)
       done += 1
       update({ label: name })
     }
-  } catch (err) {
-    error = err
+  } catch (restartErr) {
+    // a watcher failing to come back up is reported through the return value,
+    // like every other failure here, and must not mask the original error
+    error = error || restartErr
   } finally {
     // on error/cancel still make sure everything is restarted
     for (const name of stopWatchers) {
       if (!restarted.has(name)) {
-        window[`watch${name}`]?.start()
+        try {
+          window[`watch${name}`]?.start()
+        } catch (e) {
+          error = error || e
+        }
       }
     }
   }

package/client/common/parse-quick-connect.js

@@ -491,6 +491,7 @@ export {
   getSupportedProtocols,
   SUPPORTED_PROTOCOLS,
   DEFAULT_PORTS,
+  TYPE_DEFAULT_VALUES,
   OPTS_DENY_LIST,
   DANGEROUS_SESSION_FIELDS
 }

package/client/common/quick-connect-string.js

@@ -0,0 +1,134 @@
+/**
+ * Quick Connect String Serializer
+ *
+ * The inverse of ./parse-quick-connect.js: turn a bookmark (session config)
+ * into the string form the quick connect box and the electerm:// deep link
+ * accept, so the two stay round-trippable.
+ *
+ *   protocol://[username[:password]@]host[:port]?opts={...}
+ *
+ * Anything the URL cannot carry (title, tunnels, hopping, terminal settings)
+ * goes into `opts`. Fields that would reach spawn() or a shell never do - they
+ * are in DANGEROUS_SESSION_FIELDS and parseQuickConnect() drops them anyway.
+ *
+ * Known limit, inherited from the parser: username/password are not
+ * percent-encoded, so a credential containing '@' or ':' will not round-trip.
+ */
+import DANGEROUS_SESSION_FIELDS from './dangerous-session-fields'
+import { DEFAULT_PORTS, TYPE_DEFAULT_VALUES } from './parse-quick-connect'
+
+// the protocols a bookmark type can actually be expressed as
+const STRINGIFY_PROTOCOLS = ['ssh', 'telnet', 'vnc', 'rdp', 'spice', 'serial', 'ftp']
+
+// carried by the URL itself, internal to the config, or not connection data
+const SKIP_FIELDS = [
+  'id',
+  'category',
+  'color',
+  'type',
+  'host',
+  'port',
+  'username',
+  'user',
+  'password',
+  'url',
+  'path',
+  'baudRate',
+  'terminalBackground',
+  ...DANGEROUS_SESSION_FIELDS
+]
+
+const isBlank = v =>
+  v === undefined ||
+  v === null ||
+  v === '' ||
+  (Array.isArray(v) && !v.length) ||
+  (typeof v === 'object' && !Object.keys(v).length)
+
+/**
+ * The fields worth carrying in `opts`: everything the URL does not already
+ * hold, minus the values parseQuickConnect() restores on its own (its per-type
+ * defaults) and minus the empty ones a form leaves behind. A bookmark that is
+ * all defaults serializes to just the URL.
+ */
+function buildOpts (bookmark, type) {
+  const defaults = TYPE_DEFAULT_VALUES[type] || {}
+  const opts = {}
+  Object.keys(bookmark).forEach(key => {
+    if (SKIP_FIELDS.includes(key)) {
+      return
+    }
+    const value = bookmark[key]
+    if (isBlank(value)) {
+      return
+    }
+    if (
+      key in defaults &&
+      JSON.stringify(defaults[key]) === JSON.stringify(value)
+    ) {
+      return
+    }
+    opts[key] = value
+  })
+  return Object.keys(opts).length ? opts : null
+}
+
+function appendOpts (str, bookmark, type) {
+  const opts = buildOpts(bookmark, type)
+  return opts
+    ? str + (str.includes('?') ? '&' : '?') + 'opts=' + JSON.stringify(opts)
+    : str
+}
+
+/**
+ * Serialize a bookmark into a quick connect string
+ * @param {object} bookmark - bookmark / session config
+ * @returns {string} quick connect string, '' when the type has no string form
+ */
+export function stringifyQuickConnect (bookmark = {}) {
+  const {
+    type = 'ssh',
+    host,
+    port,
+    username,
+    user,
+    password,
+    url,
+    path
+  } = bookmark
+
+  // web: the url already is the whole address, only the extras need carrying
+  if (type === 'web') {
+    return url ? appendOpts(url, bookmark, type) : ''
+  }
+
+  if (!STRINGIFY_PROTOCOLS.includes(type)) {
+    return ''
+  }
+
+  if (type === 'serial') {
+    if (!path) {
+      return ''
+    }
+    const baudRate = isBlank(bookmark.baudRate) ? '' : `:${bookmark.baudRate}`
+    return appendOpts(`serial://${path}${baudRate}`, bookmark, type)
+  }
+
+  if (!host) {
+    return ''
+  }
+
+  const name = username || user
+  const auth = name
+    ? name + (isBlank(password) ? '' : `:${password}`) + '@'
+    : ''
+
+  // a default port is restored by the parser, so leave it out
+  const portStr = !isBlank(port) && Number(port) !== DEFAULT_PORTS[type]
+    ? `:${port}`
+    : ''
+
+  return appendOpts(`${type}://${auth}${host}${portStr}`, bookmark, type)
+}
+
+export default stringifyQuickConnect

package/client/common/ui-theme-color.mjs

@@ -0,0 +1,136 @@
+/**
+ * Colour maths for the UI theme's derived variables (`--main-darker`,
+ * `--main-lighter`).
+ *
+ * These used to be computed by stylus at build time (`darken(main, 30%)`), so
+ * the runtime replacement has to produce the same values -- otherwise a theme
+ * renders differently depending on which side of the refactor computed it.
+ * Both halves below deliberately mirror stylus's own implementation, float
+ * ordering included (lib/nodes/hsla.js `fromRGBA`, lib/nodes/rgba.js
+ * `fromHSLA`, lib/functions/adjust.js): the two agree only up to the last bit,
+ * and that bit decides a rounded channel.
+ */
+
+const HEX_RE = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i
+
+/**
+ * Parse `#rgb` / `#rrggbb` into `[r, g, b]` (0-255), or null when the value is
+ * not a hex colour (a theme value may be `rgba(...)`, a name, etc).
+ * @param {string} color
+ * @return {Array|null}
+ */
+function parseHex (color) {
+  const m = HEX_RE.exec(String(color).trim())
+  if (!m) {
+    return null
+  }
+  let hex = m[1]
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  }
+  const num = parseInt(hex, 16)
+  return [(num >> 16) & 0xff, (num >> 8) & 0xff, num & 0xff]
+}
+
+/**
+ * `HSLA.fromRGBA` -- h in degrees (may come back negative, as stylus leaves
+ * it), s and l in percent.
+ * @param {Array} rgb [r, g, b] 0-255
+ * @return {Array} [h, s, l]
+ */
+function rgbToHsl ([r, g, b]) {
+  r /= 255
+  g /= 255
+  b /= 255
+  const min = Math.min(r, g, b)
+  const max = Math.max(r, g, b)
+  const l = (max + min) / 2
+  const d = max - min
+  let h = 0
+  let s = 0
+  switch (max) {
+    case min: h = 0; break
+    case r: h = 60 * (g - b) / d; break
+    case g: h = 60 * (b - r) / d + 120; break
+    case b: h = 60 * (r - g) / d + 240; break
+  }
+  if (max === min) {
+    s = 0
+  } else if (l < 0.5) {
+    s = d / (2 * l)
+  } else {
+    s = d / (2 - 2 * l)
+  }
+  h %= 360
+  return [h, s * 100, l * 100]
+}
+
+/**
+ * `RGBA.fromHSLA` -- note this is the `m1`/`m2`/`hue()` form, not the usual
+ * chroma/hue-sector form; the two disagree by one ulp and therefore
+ * occasionally by one channel.
+ * @param {number} h degrees
+ * @param {number} s percent
+ * @param {number} l percent
+ * @return {Array} [r, g, b] 0-255
+ */
+function hslToRgb (h, s, l) {
+  h /= 360
+  s /= 100
+  l /= 100
+  const m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s
+  const m1 = l * 2 - m2
+  const hue = (x) => {
+    if (x < 0) ++x
+    if (x > 1) --x
+    if (x * 6 < 1) return m1 + (m2 - m1) * x * 6
+    if (x * 2 < 1) return m2
+    if (x * 3 < 2) return m1 + (m2 - m1) * (2 / 3 - x) * 6
+    return m1
+  }
+  return [
+    hue(h + 1 / 3),
+    hue(h),
+    hue(h - 1 / 3)
+  ].map(v => Math.max(0, Math.min(Math.round(v * 0xff), 255)))
+}
+
+/**
+ * Move a colour's HSL lightness by `percent`, replicating stylus's
+ * `adjust(color, 'lightness', ...)` -- the function behind `darken()` /
+ * `lighten()` (see stylus/lib/functions/adjust.js). For a percentage `p`:
+ *
+ *   p > 0 (lighten): l += (100 - l) * p / 100   -- approaches 100 asymptotically
+ *   p < 0 (darken):  l += l * (p / 100)         -- multiplicative, never clamps
+ *
+ * The multiplication is the important half: `darken(c, 30%)` is `0.7 * l`, so a
+ * near-black colour stays a near-black of the same hue. Subtracting a flat
+ * amount per channel instead (the previous implementation) drove every channel
+ * of a dark colour to 0 and produced pure black.
+ *
+ * @param {string} color hex colour
+ * @param {number} percent positive lightens, negative darkens
+ * @return {string} hex colour, or `color` unchanged when it is not hex
+ */
+export function adjustLightness (color, percent) {
+  const rgb = parseHex(color)
+  if (!rgb || !percent) {
+    return color
+  }
+  const [h, s, l] = rgbToHsl(rgb)
+  const delta = percent > 0
+    ? (100 - l) * percent / 100
+    : l * (percent / 100)
+  return '#' + hslToRgb(h, s, l + delta)
+    .map(v => v.toString(16).padStart(2, '0'))
+    .join('')
+}
+
+/**
+ * @param {string} color hex colour
+ * @param {number} amount fraction: 0.3 = 30% darker, -0.3 = 30% lighter
+ * @return {string} hex colour
+ */
+export function darker (color, amount = 0.1) {
+  return adjustLightness(color, -amount * 100)
+}

package/client/common/update-check.js

@@ -69,6 +69,18 @@ export async function getLatestReleaseVersion (n) {
   }
 }
 
+// GitHub and atomgit serve release assets from the same path shape:
+//   https://github.com/electerm/electerm/releases/download/<tag>/<file>
+//   https://atomgit.com/electerm/electerm/releases/download/<tag>/<file>
+// so only the two trailing segments (tag, file name) need carrying over.
+// The asset itself only exists on atomgit for the newest release: the sync
+// workflow empties every older release to stay under the attachment quota.
+export function getAtomgitUrl (url) {
+  const arr = url.split('/')
+  const len = arr.length
+  return `https://atomgit.com/electerm/electerm/releases/download/${arr[len - 2]}/${arr[len - 1]}`
+}
+
 export function getDownloadUrl (browserDownloadUrl, mirror) {
   if (!browserDownloadUrl) {
     return ''
@@ -81,6 +93,8 @@ export function getDownloadUrl (browserDownloadUrl, mirror) {
     return `https://master.dl.sourceforge.net/project/electerm.mirror/${arr[len - 2]}/${arr[len - 1]}?viasf=1`
   } else if (mirror === 'r2') {
     return `https://electerm-store.html5beta.com/r/${browserDownloadUrl.split('/').pop()}`
+  } else if (mirror === 'atomgit') {
+    return getAtomgitUrl(browserDownloadUrl)
   } else {
     return browserDownloadUrl
   }

package/client/components/ai/ai-output.jsx

@@ -1,5 +1,6 @@
 import { useRef, useEffect } from 'react'
 import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import { copy } from '../../common/clipboard'
 import Link from '../common/external-link'
 import { Tag, Popconfirm, Button, Alert } from 'antd'
@@ -139,8 +140,12 @@ export default function AIOutput ({ item }) {
     )
   }
 
+  // remark-gfm: react-markdown only does CommonMark by default, so GFM tables
+  // (and strikethrough / task lists / autolinks) arrive as literal text.
+  // Styling for the resulting table lives in ai.styl.
   const mdProps = {
     children: response,
+    remarkPlugins: [remarkGfm],
     components: {
       code: renderCode
     }

package/client/components/ai/ai.styl

@@ -59,6 +59,25 @@
   right 10px
   z-index 10
 
+// markdown (react-markdown, GFM) tables in the AI answer. Just enough to be a
+// usable table, using the theme's own colours.
+// display:block + overflow-x:auto is the load bearing part: .ai-history-wrap is
+// overflow-x hidden, so a table wider than the panel would otherwise be clipped
+// with no way to reach its right hand columns. width:max-content keeps it
+// shrink-to-fit while it still fits.
+.ai-stream-output
+  table
+    display block
+    width max-content
+    max-width 100%
+    overflow-x auto
+    border-collapse collapse
+  th,
+  td
+    border 1px solid var(--main-darker)
+    padding 4px 8px
+    text-align left
+
 
 .ai-chat-input
   position relative

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

@@ -0,0 +1,83 @@
+/**
+ * Copy the bookmark form's current values: as a quick connect string, or as
+ * the raw JSON that lands in the config file.
+ */
+import { useState } from 'react'
+import { Dropdown } from 'antd'
+import { CopyOutlined } from '@ant-design/icons'
+import { copy } from '../../common/clipboard'
+import { stringifyQuickConnect } from '../../common/quick-connect-string'
+
+const e = window.translate
+
+const maxLen = 50
+
+function oneLine (str) {
+  const s = String(str || '').replace(/\s+/g, ' ').trim()
+  return s.length > maxLen ? s.slice(0, maxLen) + '...' : s
+}
+
+function label (name, value) {
+  return (
+    <span title={value}>
+      <b className='mg1r'>{name}</b>
+      <span>{oneLine(value)}</span>
+      <CopyOutlined className='mg1l' />
+    </span>
+  )
+}
+
+export default function CopyBookmark ({ getValues }) {
+  const [open, setOpen] = useState(false)
+  const [items, setItems] = useState([])
+
+  const getStrings = () => {
+    const values = getValues() || {}
+    return {
+      quickConnect: stringifyQuickConnect(values),
+      json: JSON.stringify(values, null, 2)
+    }
+  }
+
+  const onOpenChange = (next) => {
+    setOpen(next)
+    if (!next) {
+      return
+    }
+    const { quickConnect, json } = getStrings()
+    setItems([
+      {
+        key: 'quickConnect',
+        disabled: !quickConnect,
+        label: label(e('quickConnect'), quickConnect)
+      },
+      {
+        key: 'json',
+        label: label('JSON', json)
+      }
+    ])
+  }
+
+  const onClick = ({ key }) => {
+    const { quickConnect, json } = getStrings()
+    const value = key === 'json' ? json : quickConnect
+    if (value) {
+      copy(value)
+    }
+    setOpen(false)
+  }
+
+  return (
+    <Dropdown
+      menu={{ items, onClick }}
+      open={open}
+      onOpenChange={onOpenChange}
+      trigger={['click']}
+      placement='bottomRight'
+    >
+      <span className='pointer fright' title={e('copy')}>
+        <CopyOutlined />
+      </span>
+    </Dropdown>
+  )
+}

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

@@ -22,7 +22,7 @@ import newTerm from '../../common/new-terminal'
 import { isValidIP } from '../../common/is-ip'
 import { action as manateAction } from 'manate'
 
-export default function FormRenderer ({ config, props }) {
+export default function FormRenderer ({ config, props, onForm }) {
   const initialValues = config.initValues(props)
   const [form] = Form.useForm()
   const [ips, setIps] = useState([])
@@ -30,6 +30,18 @@ export default function FormRenderer ({ config, props }) {
   const [testing, setTesting] = useState(false)
   const action = useRef('submit')
 
+  // hand the form instance up so the header can read the current values
+  useEffect(() => {
+    if (onForm) {
+      onForm(form)
+    }
+    return () => {
+      if (onForm) {
+        onForm(null)
+      }
+    }
+  }, [onForm, form])
+
   useEffect(() => {
     const init = config.initValues(props)
     form.resetFields()

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

@@ -21,6 +21,7 @@ import { LoadingOutlined, BookOutlined, RobotOutlined } from '@ant-design/icons'
 import sessionConfig from './config/session-config'
 import renderForm from './render-form'
 import AIBookmarkForm from './ai-bookmark-form'
+import CopyBookmark from './copy-bookmark'
 import { isAIDisabled } from '../../common/ai-feature'
 import './bookmark-form.styl'
 
@@ -80,6 +81,19 @@ export default class BookmarkIndex2 extends PureComponent {
     this.setState({ bookmarkType: e.target.value })
   }
 
+  // the form instance lives in FormRenderer, the copy menu lives in the header
+  handleFormReady = (form) => {
+    this.form = form
+  }
+
+  // same shape the form submits: saved bookmark + what is currently typed
+  getFormValues = () => {
+    return {
+      ...this.props.formData,
+      ...(this.form ? this.form.getFieldsValue() : {})
+    }
+  }
+
   handleCancelAiMode = () => {
     this.setState({ aiMode: false })
   }
@@ -147,12 +161,16 @@ export default class BookmarkIndex2 extends PureComponent {
     )
   }
 
+  renderCopy () {
+    return <CopyBookmark getValues={this.getFormValues} />
+  }
+
   renderForm () {
     const { bookmarkType, aiMode } = this.state
     if (aiMode) {
       return this.renderAiForm()
     }
-    return renderForm(bookmarkType, this.props)
+    return renderForm(bookmarkType, this.props, this.handleFormReady)
   }
 
   render () {
@@ -180,6 +198,7 @@ export default class BookmarkIndex2 extends PureComponent {
             </span>
             {this.renderTitle(formData, isNew)}
             {this.renderAIButton(isNew)}
+            {this.renderCopy()}
           </p>
           {this.renderTypes(bookmarkType, isNew, keys)}
         </div>

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

@@ -5,7 +5,7 @@ import sessionConfig from './config/session-config'
 import { connectionMap } from '../../common/constants'
 import FormRenderer from './form-renderer'
 
-export default function renderForm (type, props) {
+export default function renderForm (type, props, onForm) {
   const conf = sessionConfig[type] || sessionConfig[connectionMap.ssh]
-  return <FormRenderer config={conf} props={props} />
+  return <FormRenderer config={conf} props={props} onForm={onForm} />
 }