Code sync

package.json

@@ -1,6 +1,6 @@
 {
   "name": "electerm-web",
-  "version": "2.40.20",
+  "version": "2.50.21",
   "description": "Running electerm in as web app",
   "main": "src/app/app.js",
   "type": "module",
@@ -47,7 +47,7 @@
   "preferGlobal": true,
   "devDependencies": {
     "@ant-design/icons": "5.2.6",
-    "@electerm/electerm-react": "^1.40.20",
+    "@electerm/electerm-react": "^1.50.21",
     "@electerm/electerm-resource": "1.3.7",
     "@electerm/strip-ansi": "^1.0.0",
     "@novnc/novnc": "^1.4.0",
@@ -63,7 +63,7 @@
     "filesize-parser": "1.5.0",
     "firacode": "^6.2.0",
     "lodash-es": "^4.17.21",
-    "manate": "0.3.9",
+    "manate": "1.0.0",
     "memoize-one": "6.0.0",
     "playwright": "1.39.0",
     "prop-types": "15.7.2",
@@ -93,7 +93,7 @@
     "zmodem-ts": "^1.0.4"
   },
   "dependencies": {
-    "@electerm/electerm-locales": "2.0.3",
+    "@electerm/electerm-locales": "2.0.11",
     "@electerm/electerm-themes": "^1.0.1",
     "@electerm/rdpjs": "^1.0.0",
     "@yetzt/nedb": "1.8.0",

src/client/file-select-dialog/file-select-dialog.jsx

@@ -2,7 +2,7 @@
  * file/folder select dialog component
  */
 
-import { Component } from '../electerm-react/components/common/react-subx'
+import { Component } from 'react'
 import {
   Modal,
   Spin,
@@ -325,7 +325,7 @@ export default class FileSelectDialog extends Component {
       onCancel: this.handleClose
     }
     return (
-      <ConfigProvider theme={this.props.store.uiThemeConfig}>
+      <ConfigProvider theme={window.store.uiThemeConfig}>
         <Modal {...props}>
           <Spin spinning={loading}>
             {this.renderHeader()}

src/client/simple-auth/logout.jsx

@@ -1,26 +1,25 @@
+import { auto } from 'manate/react'
 import {
   LogoutOutlined
 } from '@ant-design/icons'
-import { Component } from '../electerm-react/components/common/react-subx'
 import './logout.styl'
 
-export default class Logout extends Component {
-  handleLogout = () => {
+export default auto(function Logout (props) {
+  const handleLogout = () => {
     window.localStorage.removeItem('tokenElecterm')
-    this.props.store.logined = false
+    props.store.logined = false
   }
 
-  render () {
-    if (window.et.tokenElecterm) {
-      return null
-    }
-    return (
-      <div className='control-icon-wrap logout-icon'>
-        <LogoutOutlined
-          className='pointer font16 control-icon iblock'
-          onClick={this.handleLogout}
-        />
-      </div>
-    )
+  if (window.et.tokenElecterm) {
+    return null
   }
-}
+
+  return (
+    <div>
+      <LogoutOutlined
+        className='pointer font16 control-icon iblock'
+        onClick={handleLogout}
+      />
+    </div>
+  )
+})

src/client/simple-auth/web-login.jsx

@@ -1,4 +1,5 @@
-import { Component } from '../electerm-react/components/common/react-subx'
+import { auto } from 'manate/react'
+import { useState, useEffect, useRef } from 'react'
 import LogoElem from '../electerm-react/components/common/logo-elem.jsx'
 import {
   Input,
@@ -13,102 +14,91 @@ import Main from '../electerm-react/components/main/main.jsx'
 
 const f = window.translate
 
-export default class Login extends Component {
-  state = {
-    pass: ''
-  }
+export default auto(function Login ({ store }) {
+  const [pass, setPass] = useState('')
+  const submitting = useRef(false)
 
-  componentDidMount () {
-    this.props.store.getConstants()
-  }
+  useEffect(() => {
+    store.getConstants()
+  }, [])
 
-  handlePassChange = e => {
-    this.setState({
-      pass: e.target.value
-    })
+  const handlePassChange = e => {
+    setPass(e.target.value)
   }
 
-  handleSubmit = () => {
-    const {
-      pass
-    } = this.state
+  const handleSubmit = async () => {
     if (!pass) {
       return message.warning('password required')
-    } else if (
-      this.submitting
-    ) {
+    } else if (submitting.current) {
       return
     }
-    this.props.store.login(
-      this.state.pass
-    )
+    submitting.current = true
+    await store.login(pass)
+    submitting.current = false
   }
 
-  renderUnchecked () {
+  const renderUnchecked = () => {
     return (
-      <div className='pd3 aligncenter'>
+
+      <div>
         <LogoElem />
         <div className='pd3 aligncenter'>
-          <Loading3QuartersOutlined
-            spin
-          />
+          <Loading3QuartersOutlined spin />
         </div>
+
       </div>
     )
   }
 
-  renderAfter = () => {
+  const renderAfter = () => {
     return (
       <ArrowRightOutlined
         className='mg1x pointer'
-        onClick={this.handleSubmit}
+        onClick={handleSubmit}
       />
     )
   }
 
-  renderLogin () {
+  const renderLogin = () => {
     const {
       logining,
       fetchingUser
-    } = this.props.store
-    const {
-      pass
-    } = this.state
+    } = store
+
     return (
-      <div className='pd3 aligncenter'>
+
+      <div>
         <LogoElem />
         <div className='pd3 aligncenter'>
           <Input.Password
             value={pass}
             readOnly={logining || fetchingUser}
-            onChange={this.handlePassChange}
+            onChange={handlePassChange}
             placeholder={f('password')}
-            addonAfter={this.renderAfter()}
-            onPressEnter={this.handleSubmit}
+            addonAfter={renderAfter()}
+            onPressEnter={handleSubmit}
           />
         </div>
-        <div className='aligncenter'>
+
+        <div>
           <Spin
             spinning={logining || fetchingUser}
           />
         </div>
+
       </div>
     )
   }
 
-  render () {
-    const {
-      authChecked
-    } = this.props.store
-    if (!authChecked) {
-      return this.renderUnchecked()
-    } else if (!this.props.store.logined) {
-      return this.renderLogin()
-    }
-    return (
-      <Main
-        store={this.props.store}
-      />
-    )
+  if (!store.authChecked) {
+    return renderUnchecked()
+  } else if (!store.logined) {
+    return renderLogin()
   }
-}
+
+  return (
+    <Main
+      store={store}
+    />
+  )
+})