@electerm/electerm-react 1.34.50 → 1.34.58

package/client/common/default-setting.js

@@ -34,6 +34,7 @@ export default {
   useSystemTitleBar: false,
   opacity: 1,
   defaultEditor: '',
+  terminalWordSeparator: './\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~?',
   confirmBeforeExit: false,
   initDefaultTabOnStart: true,
   screenReaderMode: false,

package/client/common/pre.js

@@ -46,6 +46,7 @@ window.log = {
 }
 
 window.pre = {
+  requireAuth: runSync('shouldAuth'),
   readClipboard: () => {
     return runSync('readClipboard')
   },

package/client/components/auth/login.jsx

@@ -0,0 +1,127 @@
+import { Component } from '../common/react-subx'
+import LogoElem from '../common/logo-elem.jsx'
+import store from '../../store'
+import {
+  Input,
+  message,
+  Spin
+} from 'antd'
+import {
+  ArrowRightOutlined
+} from '@ant-design/icons'
+import Main from '../main/main.jsx'
+import './login.styl'
+
+const { prefix } = window
+const f = prefix('form')
+
+export default class Login extends Component {
+  state = {
+    pass: '',
+    logined: !window.pre.requireAuth,
+    loading: false
+  }
+
+  componentDidMount () {
+    this.init()
+  }
+
+  init = async () => {
+    if (!window.pre.requireAuth) {
+      return
+    }
+    const globs = await window.pre.runGlobalAsync('init')
+    window.et.globs = globs
+  }
+
+  handlePassChange = e => {
+    this.setState({
+      pass: e.target.value
+    })
+  }
+
+  handleSubmit = () => {
+    const {
+      pass
+    } = this.state
+    if (!pass) {
+      return message.warning('password required')
+    } else if (
+      this.submitting
+    ) {
+      return
+    }
+    this.login(
+      this.state.pass
+    )
+  }
+
+  login = async (pass) => {
+    this.submitting = true
+    const r = await window.pre.runGlobalAsync('checkPassword', pass)
+    if (r) {
+      this.setState({
+        logined: true,
+        loading: false
+      })
+    } else {
+      message.error('Login failed')
+      this.setState({
+        loading: false
+      })
+    }
+    this.submitting = false
+  }
+
+  renderAfter = () => {
+    return (
+      <ArrowRightOutlined
+        className='mg1x pointer'
+        onClick={this.handleSubmit}
+      />
+    )
+  }
+
+  renderLogin () {
+    const {
+      pass,
+      loading
+    } = this.state
+    return (
+      <div className='login-wrap'>
+        <div className='pd3 aligncenter'>
+          <LogoElem />
+          <div className='pd3 aligncenter'>
+            <Input.Password
+              value={pass}
+              readOnly={loading}
+              onChange={this.handlePassChange}
+              placeholder={f('password')}
+              addonAfter={this.renderAfter()}
+              onPressEnter={this.handleSubmit}
+            />
+          </div>
+          <div className='aligncenter'>
+            <Spin
+              spinning={loading}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const {
+      logined
+    } = this.state
+    if (!logined) {
+      return this.renderLogin()
+    }
+    return (
+      <Main
+        store={store}
+      />
+    )
+  }
+}

package/client/components/auth/login.styl

@@ -0,0 +1,7 @@
+.login-wrap
+  position fixed
+  left 0
+  top 0
+  width 100%
+  height 100%
+  background #fff

package/client/components/main/index.jsx

@@ -1,11 +1,10 @@
 import ErrorBoundary from './error-wrapper'
-import Main from './main'
-import store from '../../store'
+import Login from '../auth/login'
 
 export default function MainEntry () {
   return (
     <ErrorBoundary>
-      <Main store={store} />
+      <Login />
     </ErrorBoundary>
   )
 }

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

@@ -6,7 +6,7 @@ import copy from 'json-deep-copy'
 export default class QmTransport extends BookmarkTransport {
   beforeUpload = async (file) => {
     const { store } = this.props
-    const txt = await window.fs.readFileSync(file.path)
+    const txt = await window.fs.readFile(file.path)
     try {
       const quickCommands = JSON.parse(txt)
       const quickCommandsOld = copy(store.quickCommands)

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

@@ -1,5 +1,9 @@
 import React, { Component } from 'react'
-import { CodeOutlined, LoadingOutlined } from '@ant-design/icons'
+import {
+  CodeOutlined,
+  ArrowRightOutlined,
+  LoadingOutlined
+} from '@ant-design/icons'
 import {
   message,
   Select,
@@ -57,7 +61,12 @@ const keys = [
 export default class Setting extends Component {
   state = {
     ready: false,
-    languageChanged: false
+    languageChanged: false,
+    passwordChanged: false,
+    submittingPass: false,
+    passInputFocused: false,
+    placeholderLogin: window.pre.requireAuth ? '********' : f('notSet'),
+    loginPass: ''
   }
 
   componentDidMount () {
@@ -70,6 +79,61 @@ export default class Setting extends Component {
 
   componentWillUnmount () {
     clearTimeout(this.timer)
+    clearTimeout(this.timer1)
+  }
+
+  handleLoginSubmit = async () => {
+    if (this.submitting) {
+      return
+    }
+    this.setState({
+      submittingPass: true
+    })
+    this.submitting = true
+    const pass = this.state.loginPass
+    const r = await window.pre.runGlobalAsync(
+      'setPassword',
+      pass
+    )
+    if (r === true) {
+      window.pre.requireAuth = !!pass
+      this.setState({
+        loginPass: pass ? '********' : '',
+        submittingPass: false,
+        passwordChanged: true,
+        placeholderLogin: pass ? '********' : f('notSet')
+      })
+      message.success('OK')
+    } else {
+      this.setState({
+        submittingPass: false
+      })
+    }
+    this.submitting = false
+  }
+
+  handleLoginPassFocus = () => {
+    this.setState({
+      passInputFocused: true
+    })
+  }
+
+  blurPassInput = () => {
+    this.setState({
+      passInputFocused: false
+    })
+  }
+
+  handleLoginPassBlur = () => {
+    this.timer1 = setTimeout(
+      this.blurPassInput, 300
+    )
+  }
+
+  handleChangeLoginPass = e => {
+    this.setState({
+      loginPass: e.target.value
+    })
   }
 
   handleRestart = () => {
@@ -182,8 +246,8 @@ export default class Setting extends Component {
     )
   }
 
-  renderLanguageChangeTip = () => {
-    if (!this.state.languageChanged) {
+  renderRestart = (name) => {
+    if (!this.state[name]) {
       return null
     }
     return (
@@ -617,6 +681,57 @@ export default class Setting extends Component {
     }
   }
 
+  renderLoginPassAfter () {
+    const {
+      loginPass,
+      submittingPass,
+      passInputFocused
+    } = this.state
+    if (!loginPass && !passInputFocused) {
+      return null
+    } else if (
+      submittingPass
+    ) {
+      return <LoadingOutlined />
+    }
+    return (
+      <ArrowRightOutlined
+        className='pointer'
+        onClick={this.handleLoginSubmit}
+      />
+    )
+  }
+
+  renderLoginPass () {
+    if (window.et.isWebApp) {
+      return null
+    }
+    const {
+      loginPass,
+      submittingPass,
+      placeholderLogin
+    } = this.state
+    const props = {
+      value: loginPass,
+      disabled: submittingPass,
+      onFocus: this.handleLoginPassFocus,
+      onBlur: this.handleLoginPassBlur,
+      onChange: this.handleChangeLoginPass,
+      addonAfter: this.renderLoginPassAfter(),
+      placeholder: placeholderLogin
+    }
+    return (
+      <div>
+        <div className='pd1b'>{f('loginPassword')}</div>
+        <div className='pd2b'>
+          <Input.Password
+            {...props}
+          />
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const { ready } = this.state
     if (!ready) {
@@ -746,7 +861,7 @@ export default class Setting extends Component {
           </Select>
           <Link className='mg1l' to={createEditLangLink(language)}>{p('edit')}</Link>
         </div>
-        {this.renderLanguageChangeTip()}
+        {this.renderRestart('languageChanged')}
         <div className='pd1y font16 bold'>
           <CodeOutlined className='mg1r' />
           {s('terminal')} {e('settings')}
@@ -789,9 +904,9 @@ export default class Setting extends Component {
         {
           this.renderTerminalBgSelect('terminalBackgroundImagePath')
         }
-        <div className='pd1b'>{t('default')} {e('editorTip')}</div>
+        <div className='pd1b'>{e('terminalWordSeparator')}</div>
         {
-          this.renderText('defaultEditor', e('editorTip'))
+          this.renderText('terminalWordSeparator', e('terminalWordSeparator'))
         }
         <div className='pd1b'>{t('default')} {e('execWindows')}</div>
         {
@@ -829,6 +944,8 @@ export default class Setting extends Component {
         {this.renderToggle('saveTerminalLogToFile', (
           <ShowItem to={terminalLogPath} className='mg1l'>{p('open')}</ShowItem>
         ))}
+
+        {this.renderLoginPass()}
         {this.renderReset()}
       </div>
     )

package/client/components/terminal/index.jsx

@@ -808,6 +808,7 @@ export default class Term extends Component {
       theme: themeConfig,
       allowTransparency: true,
       // lineHeight: 1.2,
+      wordSeparator: config.terminalWordSeparator,
       cursorStyle: config.cursorStyle,
       cursorBlink: config.cursorBlink,
       fontSize: tab.fontSize || config.fontSize,

package/client/css/antd-overwrite.styl

@@ -9,6 +9,6 @@
 .ant-tree-indent-unit
   width 5px
 .ant-tree .ant-tree-switcher.ant-tree-switcher-noop
-  width 18px
+  width 0px
 td.ant-table-column-sort
   background none

package/client/entry/index.jsx

@@ -2,7 +2,7 @@ import { render } from 'react-dom'
 import 'antd/dist/reset.css'
 import 'xterm/css/xterm.css'
 import '../common/trzsz'
-import Main from '../components/main'
+import Main from '../components/main/index.jsx'
 import { notification } from 'antd'
 notification.config({
   placement: 'bottomRight'

package/client/store/common.js

@@ -83,8 +83,8 @@ export default Store => {
 
   Store.prototype.runBatchOp = function (path) {
     window.store.showModal = modals.batchOps
-    function updateText () {
-      const text = window.pre.readFileSync(path).toString()
+    async function updateText () {
+      const text = await window.fs.readFile(path)
       postMessage({
         action: commonActions.batchOp,
         batchOp: {

package/client/store/load-data.js

@@ -142,7 +142,7 @@ export default (Store) => {
   }
   Store.prototype.initApp = async function () {
     const { store } = window
-    const globs = await window.pre.runGlobalAsync('init')
+    const globs = window.et.globs || await window.pre.runGlobalAsync('init')
     window.langMap = globs.langMap
     store.installSrc = globs.installSrc
     store.appPath = globs.appPath

package/client/store/sync.js

@@ -356,7 +356,7 @@ export default (Store) => {
 
   Store.prototype.importAll = async function (file) {
     const txt = await window.fs
-      .readFileSync(file.path)
+      .readFile(file.path)
     const { store } = window
     const objs = JSON.parse(txt)
     const toInsert = []

package/package.json

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