@electerm/electerm-react 1.100.50 → 1.100.56

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

@@ -12,6 +12,7 @@ import AiCache from './ai-cache'
 import {
   aiConfigWikiLink
 } from '../../common/constants'
+import Password from '../common/password'
 
 // Comprehensive API provider configurations
 import providers from './providers'
@@ -149,7 +150,7 @@ export default function AIConfigForm ({ initialValues, onSubmit, showAIConfig })
           label='API Key'
           name='apiKeyAI'
         >
-          <Input.Password placeholder='Enter your API key' />
+          <Password placeholder='Enter your API key' />
         </Form.Item>
 
         <Form.Item

package/client/components/auth/login.jsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import LogoElem from '../common/logo-elem.jsx'
 import store from '../../store'
 import {
-  Input,
   message,
   Spin
 } from 'antd'
@@ -13,6 +12,7 @@ import Main from '../main/main.jsx'
 import AppDrag from '../tabs/app-drag'
 import WindowControl from '../tabs/window-control'
 import './login.styl'
+import Password from '../common/password'
 
 const e = window.translate
 
@@ -81,7 +81,7 @@ export default function Login () {
         <div className='pd3 aligncenter'>
           <LogoElem />
           <div className='pd3 aligncenter'>
-            <Input.Password
+            <Password
               value={pass}
               readOnly={loading}
               onChange={handlePassChange}

package/client/components/batch-op/batch-op.jsx

@@ -28,6 +28,7 @@ import { pick } from 'lodash-es'
 import { runCmd } from '../terminal/terminal-apis'
 import deepCopy from 'json-deep-copy'
 import uid from '../../common/uid'
+import { getFilePath } from '../../common/file-drop-utils'
 import wait from '../../common/wait'
 import { getFolderFromFilePath } from '../sftp/file-read'
 import resolveFilePath from '../../common/resolve'
@@ -406,7 +407,8 @@ export default class BatchOp extends PureComponent {
   }
 
   beforeUpload = async (file) => {
-    const text = await window.fs.readFile(file.path)
+    const filePath = getFilePath(file)
+    const text = await window.fs.readFile(filePath)
     this.setState({
       text
     })

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

@@ -18,6 +18,7 @@ import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults, isEmpty } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
+import Password from '../common/password'
 import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import ProfileItem from './profile-form-item'
@@ -119,7 +120,7 @@ export default function FtpFormUi (props) {
           hasFeedback
           name='password'
         >
-          <Input.Password />
+          <Password />
         </FormItem>
         <FormItem
           {...formItemLayout}

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

@@ -18,6 +18,7 @@ import {
 import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults, isEmpty } from 'lodash-es'
+import Password from '../common/password'
 import { ColorPickerItem } from './color-picker-item.jsx'
 import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
@@ -130,7 +131,7 @@ export default function RdpFormUi (props) {
           name='password'
           required
         >
-          <Input.Password />
+          <Password />
         </FormItem>
         <FormItem
           {...formItemLayout}

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

@@ -12,6 +12,8 @@ import {
 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'
 
 const { TextArea } = Input
 const FormItem = Form.Item
@@ -26,7 +28,8 @@ export default function renderAuth (props) {
     profileFilter = (d) => d
   } = props
   const beforeUpload = async (file) => {
-    const privateKey = await window.fs.readFile(file.path)
+    const filePath = getFilePath(file)
+    const privateKey = await window.fs.readFile(filePath)
     form.setFieldsValue({
       privateKey
     })
@@ -61,7 +64,7 @@ export default function renderAuth (props) {
         <AutoComplete
           {...opts}
         >
-          <Input.Password />
+          <Password />
         </AutoComplete>
       </FormItem>
     )
@@ -131,7 +134,7 @@ export default function renderAuth (props) {
         max: 1024, message: '1024 chars max'
       }]}
     >
-      <Input.Password
+      <Password
         placeholder={e('passphraseDesc')}
       />
     </FormItem>

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

@@ -18,6 +18,7 @@ import {
 import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults, isEmpty } from 'lodash-es'
+import Password from '../common/password'
 import { ColorPickerItem } from './color-picker-item.jsx'
 import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
@@ -169,7 +170,7 @@ export default function VncFormUi (props) {
           hasFeedback
           name='password'
         >
-          <Input.Password />
+          <Password />
         </FormItem>
         <FormItem
           {...formItemLayout}

package/client/components/common/input-auto-focus.jsx

@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react'
 import {
   Input
 } from 'antd'
+import Password from './password'
 
 export default function InputAutoFocus (props) {
   const { type, selectall = false, ...rest } = props
@@ -24,7 +25,7 @@ export default function InputAutoFocus (props) {
   let InputComponent
   switch (type) {
     case 'password':
-      InputComponent = Input.Password
+      InputComponent = Password
       break
     default:
       InputComponent = Input

package/client/components/common/password.jsx

@@ -0,0 +1,77 @@
+import { useState, useCallback, forwardRef } from 'react'
+import {
+  Input,
+  Tag
+} from 'antd'
+
+/**
+ * Password component that extends Ant Design's Password component
+ * with caps lock detection and visual indicator
+ */
+export default forwardRef(function Password (props, ref) {
+  const [isCapsLockOn, setIsCapsLockOn] = useState(false)
+
+  // Check caps lock state from keyboard event
+  const checkCapsLock = useCallback((event) => {
+    if (event.getModifierState) {
+      const capsLockState = event.getModifierState('CapsLock')
+      setIsCapsLockOn(capsLockState)
+    }
+  }, [])
+
+  // Handle key events to detect caps lock changes
+  const handleKeyEvent = useCallback((event) => {
+    checkCapsLock(event)
+    // Call original onKeyDown/onKeyUp if provided
+    if (props.onKeyDown && event.type === 'keydown') {
+      props.onKeyDown(event)
+    }
+    if (props.onKeyUp && event.type === 'keyup') {
+      props.onKeyUp(event)
+    }
+  }, [props.onKeyDown, props.onKeyUp, checkCapsLock])
+
+  // Handle focus event to check initial caps lock state
+  const handleFocus = useCallback((event) => {
+    checkCapsLock(event)
+    // Call original onFocus if provided
+    if (props.onFocus) {
+      props.onFocus(event)
+    }
+  }, [props.onFocus, checkCapsLock])
+
+  // Handle blur event to reset caps lock state
+  const handleBlur = useCallback((event) => {
+    setIsCapsLockOn(false)
+    // Call original onBlur if provided
+    if (props.onBlur) {
+      props.onBlur(event)
+    }
+  }, [props.onBlur])
+
+  // Caps lock indicator icon
+  const capsLockIcon = isCapsLockOn
+    ? (
+      <Tag
+        color='red'
+      >
+        A
+      </Tag>
+      )
+    : null
+
+  // Merge addonBefore with caps lock indicator
+  const addonBefore = capsLockIcon || props.addonBefore || null
+
+  return (
+    <Input.Password
+      {...props}
+      ref={ref}
+      addonBefore={addonBefore}
+      onKeyDown={handleKeyEvent}
+      onKeyUp={handleKeyEvent}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    />
+  )
+})

package/client/components/profile/profile-form-rdp.jsx

@@ -3,6 +3,7 @@ import {
   Input
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
+import Password from '../common/password'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -24,7 +25,7 @@ export default function ProfileFormRdp (props) {
         hasFeedback
         name={['rdp', 'password']}
       >
-        <Input.Password />
+        <Password />
       </FormItem>
     </>
   )

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

@@ -3,6 +3,7 @@ import {
   Input
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
+import Password from '../common/password'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -24,7 +25,7 @@ export default function ProfileFormVnc (props) {
         hasFeedback
         name={['vnc', 'password']}
       >
-        <Input.Password />
+        <Password />
       </FormItem>
     </>
   )

package/client/components/quick-commands/quick-command-transport-mod.jsx

@@ -2,12 +2,14 @@ import BookmarkTransport from '../tree-list/bookmark-transport'
 import download from '../../common/download'
 import time from '../../common/time'
 import copy from 'json-deep-copy'
+import { getFilePath } from '../../common/file-drop-utils'
 
 export default class QmTransport extends BookmarkTransport {
   name = 'quickCommands'
   beforeUpload = async (file) => {
     const { store } = this.props
-    const txt = await window.fs.readFile(file.path)
+    const filePath = getFilePath(file)
+    const txt = await window.fs.readFile(filePath)
     try {
       const arr = JSON.parse(txt)
       const state = store[this.name]

package/client/components/setting-panel/keywords-transport.jsx

@@ -1,12 +1,14 @@
 import BookmarkTransport from '../tree-list/bookmark-transport'
 import download from '../../common/download'
 import time from '../../common/time'
+import { getFilePath } from '../../common/file-drop-utils'
 
 export default class KeywordsTransport extends BookmarkTransport {
   name = 'keywords-highlight'
   beforeUpload = async (file) => {
     const { store } = this.props
-    const txt = await window.fs.readFile(file.path)
+    const filePath = getFilePath(file)
+    const txt = await window.fs.readFile(filePath)
     try {
       store.setConfig({
         keywords: JSON.parse(txt)

package/client/components/setting-panel/setting-common.jsx

@@ -18,6 +18,7 @@ import {
   Tag
 } from 'antd'
 import deepCopy from 'json-deep-copy'
+import Password from '../common/password'
 import {
   settingMap,
   proxyHelpLink
@@ -483,7 +484,7 @@ export default class SettingCommon extends Component {
       <div>
         <div className='pd1b'>{e('loginPassword')}</div>
         <div className='pd2b'>
-          <Input.Password
+          <Password
             {...props}
           />
         </div>

package/client/components/setting-panel/setting-terminal.jsx

@@ -33,6 +33,7 @@ import KeywordsTransport from './keywords-transport'
 import fs from '../../common/fs'
 import uid from '../../common/uid'
 import createDefaultSessionLogPath from '../../common/default-log-path'
+import { getFilePath } from '../../common/file-drop-utils'
 import TerminalBackgroundConfig from './terminal-bg-config'
 import NumberConfig from './number-config'
 import './setting.styl'
@@ -260,7 +261,8 @@ export default class SettingTerminal extends Component {
     const after = (
       <Upload
         beforeUpload={(file) => {
-          this.onChangeValue(file.path, name)
+          const filePath = getFilePath(file)
+          this.onChangeValue(filePath, name)
           return false
         }}
         showUploadList={false}

package/client/components/setting-panel/terminal-bg-config.jsx

@@ -12,6 +12,7 @@ import {
 import defaultSettings from '../../common/default-setting'
 import NumberConfig from './number-config'
 import TextBgModal from './text-bg-modal.jsx'
+import { getFilePath } from '../../common/file-drop-utils'
 
 const e = window.translate
 
@@ -28,7 +29,8 @@ export default function TerminalBackgroundConfig ({
   const after = (
     <Upload
       beforeUpload={(file) => {
-        onChangeValue(file.path, name)
+        const filePath = getFilePath(file)
+        onChangeValue(filePath, name)
         return false
       }}
       showUploadList={false}

package/client/components/setting-sync/setting-sync-form.jsx

@@ -15,6 +15,7 @@ import { syncTokenCreateUrls, syncTypes } from '../../common/constants'
 import './sync.styl'
 import HelpIcon from '../common/help-icon'
 import ServerDataStatus from './server-data-status'
+import Password from '../common/password'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -209,7 +210,7 @@ export default function SyncForm (props) {
           max: 100, message: '100 chars max'
         }]}
       >
-        <Input.Password
+        <Password
           placeholder={syncType + ' ' + syncPasswordName}
         />
       </FormItem>
@@ -240,7 +241,7 @@ export default function SyncForm (props) {
           required: true, message: createPlaceHolder('token') + ' required'
         }]}
       >
-        <Input.Password
+        <Password
           placeholder={createPlaceHolder('token')}
           id={createId('token')}
         />

package/client/components/text-editor/simple-editor.jsx

@@ -43,6 +43,12 @@ export default function SimpleEditor (props) {
     // Reset navigating flag after using it
     setIsNavigating(false)
   }, [currentMatch, occurrences])
+
+  // Auto-search when keyword changes
+  useEffect(() => {
+    findMatches()
+  }, [searchKeyword, props.value])
+
   // Copy the editor content to clipboard
   const copyEditorContent = () => {
     copy(props.value || '')
@@ -73,8 +79,10 @@ export default function SimpleEditor (props) {
 
   // Handle search action when user presses enter or clicks the search button
   const handleSearch = (e) => {
-    e.stopPropagation()
-    e.preventDefault()
+    if (e && e.stopPropagation) {
+      e.stopPropagation()
+      e.preventDefault()
+    }
     findMatches()
   }
 

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

@@ -6,6 +6,7 @@ import generate from '../../common/uid'
 import Link from '../common/external-link'
 import InputAutoFocus from '../common/input-auto-focus'
 import ThemePicker from './theme-editor'
+import { getFilePath } from '../../common/file-drop-utils'
 // import './theme-form.styl'
 
 const { TextArea } = Input
@@ -146,7 +147,8 @@ export default function ThemeForm (props) {
   }
 
   async function beforeUpload (file) {
-    const txt = await window.fs.readFile(file.path)
+    const filePath = getFilePath(file)
+    const txt = await window.fs.readFile(filePath)
     const { name, themeConfig, uiThemeConfig } = convertTheme(txt)
     const tt = convertThemeToText({
       themeConfig, uiThemeConfig

package/client/components/tree-list/bookmark-toolbar.jsx

@@ -13,6 +13,7 @@ import time from '../../common/time'
 import { uniq } from 'lodash-es'
 import { fixBookmarks } from '../../common/db-fix'
 import download from '../../common/download'
+import { getFilePath } from '../../common/file-drop-utils'
 import delay from '../../common/wait'
 import { action } from 'manate'
 
@@ -30,7 +31,8 @@ export default function BookmarkToolbar (props) {
   } = props
   const upload = action(async (file) => {
     const { store } = window
-    const txt = await window.fs.readFile(file.path)
+    const filePath = getFilePath(file)
+    const txt = await window.fs.readFile(filePath)
 
     const content = JSON.parse(txt)
     const {

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

@@ -8,6 +8,7 @@ import {
   Button
 } from 'antd'
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
+import Password from '../common/password'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -24,7 +25,7 @@ export default function VncForm (props) {
       types
     } = props
     return types.map((type, index) => {
-      const Elem = type === 'password' ? Input.Password : Input
+      const Elem = type === 'password' ? Password : Input
       return (
         <FormItem
           {...formItemLayout}

package/client/store/sync.js

@@ -13,6 +13,7 @@ import download from '../common/download'
 import { fixBookmarks } from '../common/db-fix'
 import dayjs from 'dayjs'
 import parseJsonSafe from '../common/parse-json-safe'
+import { getFilePath } from '../common/file-drop-utils'
 
 const {
   version: packVer
@@ -411,8 +412,9 @@ export default (Store) => {
   }
 
   Store.prototype.importAll = async function (file) {
+    const filePath = getFilePath(file)
     const txt = await window.fs
-      .readFile(file.path)
+      .readFile(filePath)
     const { store } = window
     const objs = JSON.parse(txt)
     const { names } = store.getDataSyncNames(true)

package/package.json

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