fix: Weird jumps when press Enter in input or textarea

webapp/app/containers/Login/Login.less

@@ -13,26 +13,7 @@
 
   .form {
     width: 100%;
-    margin-bottom: 16px;
-  }
-
-  button {
-    width: 75%;
-    height: 36px;
-    background-color: transparent;
-    border: 1px solid @white;
-    border-radius: 3px;
-    color: @white;
-    font-size: 1.15em;
-    outline: none;
-
-    &[disabled] {
-      background-color: fade(@white, 20);
-    }
-
-    i {
-      margin-right: 8px;
-    }
+    text-align: center;
   }
 }
 
@@ -43,7 +24,7 @@
   flex-direction: row;
   align-items: center;
 
-  &:last-child {
+  &:last-of-type {
     border-bottom: 0;
   }
 
@@ -82,6 +63,26 @@
   }
 }
 
+.submit {
+  width: 75%;
+  height: 36px;
+  background-color: transparent;
+  margin-top: 16px;
+  border: 1px solid @white;
+  border-radius: 3px;
+  color: @white;
+  font-size: 1.15em;
+  outline: none;
+
+  &[disabled] {
+    background-color: fade(@white, 20);
+  }
+
+  i {
+    margin-right: 8px;
+  }
+}
+
 .tips {
   width: 75%;
   margin-top: 16px;

webapp/app/containers/Login/LoginForm.tsx

@@ -18,80 +18,51 @@
  * >>
  */
 
-import React from 'react'
-
+import React, { FC, ChangeEvent, FormEvent } from 'react'
 import { Icon } from 'antd'
-
-const styles = require('./Login.less')
+import styles from './Login.less'
 
 interface ILoginFormProps {
   username: string
   password: string
-  onChangeUsername: (e: any) => any
-  onChangePassword: (e: any) => any
-  onLogin: () => any
+  loading: boolean
+  onChangeUsername: (e: ChangeEvent<HTMLInputElement>) => void
+  onChangePassword: (e: ChangeEvent<HTMLInputElement>) => void
+  onLogin: (e: FormEvent<HTMLFormElement>) => void
 }
 
-export class LoginForm extends React.PureComponent<ILoginFormProps, {}> {
-  constructor (props) {
-    super(props)
-  }
-
-  private enterLogin: (e: KeyboardEvent) => any = null
-
-  public componentWillUnmount () {
-    this.unbindDocumentKeypress()
-  }
-
-  private bindDocumentKeypress = () => {
-    this.enterLogin = (e) => {
-      if (e.keyCode === 13) {
-        this.props.onLogin()
-      }
-    }
-
-    document.addEventListener('keypress', this.enterLogin, false)
-  }
-
-  private unbindDocumentKeypress = () => {
-    document.removeEventListener('keypress', this.enterLogin, false)
-    this.enterLogin = null
-  }
-
-  public render () {
-    const {
-      username,
-      password,
-      onChangeUsername,
-      onChangePassword
-    } = this.props
-
-    return (
-      <div className={styles.form}>
-        <div className={styles.input}>
-          <Icon type="user" />
-          <input
-            placeholder="用户名"
-            value={username}
-            onFocus={this.bindDocumentKeypress}
-            onBlur={this.unbindDocumentKeypress}
-            onChange={onChangeUsername}
-          />
-        </div>
-        <div className={styles.input}>
-          <Icon type="unlock" />
-          <input
-            placeholder="密码"
-            type="password"
-            value={password}
-            onFocus={this.bindDocumentKeypress}
-            onBlur={this.unbindDocumentKeypress}
-            onChange={onChangePassword}
-          />
-        </div>
+const LoginForm: FC<ILoginFormProps> = ({
+  username,
+  password,
+  loading,
+  onChangeUsername,
+  onChangePassword,
+  onLogin
+}) => {
+  return (
+    <form className={styles.form} onSubmit={onLogin}>
+      <div className={styles.input}>
+        <Icon type="user" />
+        <input
+          placeholder="用户名"
+          value={username}
+          onChange={onChangeUsername}
+        />
+      </div>
+      <div className={styles.input}>
+        <Icon type="unlock" />
+        <input
+          placeholder="密码"
+          type="password"
+          value={password}
+          onChange={onChangePassword}
+        />
       </div>
-    )
-  }
+      <button type="submit" className={styles.submit} disabled={loading}>
+        {loading ? <Icon type="loading" /> : ''}登 录
+      </button>
+    </form>
+  )
 }
 
 export default LoginForm

webapp/app/containers/Login/index.tsx

@@ -18,14 +18,13 @@
  * >>
  */
 
-import * as React from 'react'
+import React, { ChangeEvent, FormEvent } from 'react'
 import Helmet from 'react-helmet'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import { RouteComponentProps } from 'react-router-dom'
 
 import LoginForm from './LoginForm'
-import { Icon } from 'antd'
 
 import { compose } from 'redux'
 
@@ -82,13 +81,13 @@ export class Login extends React.PureComponent<
     history.push('/findPassword')
   }
 
-  private changeUsername = (e) => {
+  private changeUsername = (e: ChangeEvent<HTMLInputElement>) => {
     this.setState({
       username: e.target.value.trim()
     })
   }
 
-  private changePassword = (e) => {
+  private changePassword = (e: ChangeEvent<HTMLInputElement>) => {
     this.setState({
       password: e.target.value
     })
@@ -99,7 +98,8 @@ export class Login extends React.PureComponent<
     history.replace('/register')
   }
 
-  private doLogin = () => {
+  private doLogin = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
     const { onLogin, history } = this.props
     const { username, password } = this.state
 
@@ -132,13 +132,11 @@ export class Login extends React.PureComponent<
         <LoginForm
           username={username}
           password={password}
+          loading={loginLoading}
           onChangeUsername={this.changeUsername}
           onChangePassword={this.changePassword}
           onLogin={this.doLogin}
         />
-        <button disabled={loginLoading} onClick={this.doLogin}>
-          {loginLoading ? <Icon type="loading" /> : ''}登 录
-        </button>
         <p className={styles.tips}>
           <a
             href="javascript:;"

webapp/app/containers/Register/JoinOrganization.tsx

@@ -1,17 +1,13 @@
-import * as React from 'react'
+import React, { ChangeEvent, FormEvent } from 'react'
 import { compose } from 'redux'
-import Helmet from 'react-helmet'
-
-import { Icon } from 'antd'
-
 import { connect } from 'react-redux'
+import Helmet from 'react-helmet'
+import LoginForm from 'containers/Login/LoginForm'
 import { joinOrganization, login } from '../App/actions'
 import { createStructuredSelector } from 'reselect'
 import { makeSelectLoginLoading } from '../App/selectors'
 
-const styles = require('../Login/Login.less')
-const utilStyles = require('assets/less/util.less')
-const registerStyles = require('./register.less')
+import styles from 'containers/Login/Login.less'
 
 interface IJoinOrganizationProps {
   onJoinOrganization: (token?: string, resolve?: (res?: {id?: number}) => any, reject?: (err?: string) => any) => any
@@ -37,38 +33,17 @@ export class JoinOrganization extends React.PureComponent <IJoinOrganizationProp
     }
   }
 
-  private enterLogin: (e: KeyboardEvent) => any = null
-
-  public componentWillUnmount () {
-    this.unbindDocumentKeypress()
-  }
-
   public componentWillMount () {
     this.joinOrganization()
   }
 
-  private bindDocumentKeypress = () => {
-    this.enterLogin = (e) => {
-      if (e.keyCode === 13) {
-        this.doLogin()
-      }
-    }
-
-    document.addEventListener('keypress', this.enterLogin, false)
-  }
-
-  private unbindDocumentKeypress = () => {
-    document.removeEventListener('keypress', this.enterLogin, false)
-    this.enterLogin = null
-  }
-
-  private changeUsername = (e) => {
+  private changeUsername = (e: ChangeEvent<HTMLInputElement>) => {
     this.setState({
       username: e.target.value.trim()
     })
   }
 
-  private changePassword = (e) => {
+  private changePassword = (e: ChangeEvent<HTMLInputElement>) => {
     this.setState({
       password: e.target.value
     })
@@ -77,10 +52,8 @@ export class JoinOrganization extends React.PureComponent <IJoinOrganizationProp
   private joinOrganization = () => {
     const {onJoinOrganization} = this.props
     const token = this.getParamsByLocation('token')
-    console.log(token)
     if (token) {
       onJoinOrganization(token, (res) => {
-        console.log(res)
         if (res && res.id) {
           const path = `${window.location.protocol}//${window.location.host}/#/account/organization/${res.id}`
           location.replace(path)
@@ -93,7 +66,8 @@ export class JoinOrganization extends React.PureComponent <IJoinOrganizationProp
     }
   }
 
-  private doLogin = () => {
+  private doLogin = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
     const {onLogin, onJoinOrganization} = this.props
     const {username, password} = this.state
     const token = this.getParamsByLocation('token')
@@ -130,40 +104,14 @@ export class JoinOrganization extends React.PureComponent <IJoinOrganizationProp
       ? (
         <div className={styles.window}>
           <Helmet title="Login - Join Organization" />
-          <div className={styles.form}>
-            <div className={styles.input}>
-              <Icon type="user"/>
-              <input
-                placeholder="用户名"
-                value={username}
-                onFocus={this.bindDocumentKeypress}
-                onBlur={this.unbindDocumentKeypress}
-                onChange={this.changeUsername}
-              />
-            </div>
-            <div className={styles.input}>
-              <Icon type="unlock"/>
-              <input
-                placeholder="密码"
-                type="password"
-                value={password}
-                onFocus={this.bindDocumentKeypress}
-                onBlur={this.unbindDocumentKeypress}
-                onChange={this.changePassword}
-              />
-            </div>
-          </div>
-          <button
-            disabled={loginLoading}
-            onClick={this.doLogin}
-          >
-            {
-              loginLoading
-                ? <Icon type="loading"/>
-                : ''
-            }
-            登 录
-          </button>
+          <LoginForm
+            username={username}
+            password={password}
+            loading={loginLoading}
+            onChangeUsername={this.changeUsername}
+            onChangePassword={this.changePassword}
+            onLogin={this.doLogin}
+          />
         </div>
       )
      : (