Browse Source

[https://github.com/tracim/tracim/issues/722] handling of Enter key on login form

Skylsmoi 6 years ago
parent
commit
0ebb6cd0d5

+ 5 - 2
frontend/src/component/common/Input/InputGroupText.jsx View File

14
         placeholder={props.placeHolder}
14
         placeholder={props.placeHolder}
15
         value={props.value}
15
         value={props.value}
16
         onChange={props.onChange}
16
         onChange={props.onChange}
17
+        onKeyPress={props.onKeyPress}
17
       />
18
       />
18
       <div className={classnames(`${props.parentClassName}__msgerror`, 'invalid-feedback')}>
19
       <div className={classnames(`${props.parentClassName}__msgerror`, 'invalid-feedback')}>
19
         {props.invalidMsg}
20
         {props.invalidMsg}
33
   placeHolder: PropTypes.string,
34
   placeHolder: PropTypes.string,
34
   invalidMsg: PropTypes.string,
35
   invalidMsg: PropTypes.string,
35
   isInvalid: PropTypes.bool,
36
   isInvalid: PropTypes.bool,
36
-  onChange: PropTypes.func
37
+  onChange: PropTypes.func,
38
+  onKeyPress: PropTypes.func
37
 }
39
 }
38
 
40
 
39
 InputGroupText.defaultProps = {
41
 InputGroupText.defaultProps = {
42
   placeHolder: '',
44
   placeHolder: '',
43
   invalidMsg: false,
45
   invalidMsg: false,
44
   isInvalid: false,
46
   isInvalid: false,
45
-  onChange: () => {}
47
+  onChange: () => {},
48
+  onKeyPress: () => {}
46
 }
49
 }

+ 4 - 0
frontend/src/container/Login.jsx View File

52
     this.setState(prev => ({inputRememberMe: !prev.inputRememberMe}))
52
     this.setState(prev => ({inputRememberMe: !prev.inputRememberMe}))
53
   }
53
   }
54
 
54
 
55
+  handleInputKeyPress = e => e.key === 'Enter' && this.handleClickSubmit()
56
+
55
   handleClickSubmit = async () => {
57
   handleClickSubmit = async () => {
56
     const { history, dispatch, t } = this.props
58
     const { history, dispatch, t } = this.props
57
     const { inputLogin, inputPassword, inputRememberMe } = this.state
59
     const { inputLogin, inputPassword, inputRememberMe } = this.state
142
                         isInvalid={this.state.inputLogin.isInvalid}
144
                         isInvalid={this.state.inputLogin.isInvalid}
143
                         value={this.state.inputLogin.value}
145
                         value={this.state.inputLogin.value}
144
                         onChange={this.handleChangeLogin}
146
                         onChange={this.handleChangeLogin}
147
+                        onKeyPress={this.handleInputKeyPress}
145
                       />
148
                       />
146
 
149
 
147
                       <InputGroupText
150
                       <InputGroupText
154
                         isInvalid={this.state.inputPassword.isInvalid}
157
                         isInvalid={this.state.inputPassword.isInvalid}
155
                         value={this.state.inputPassword.value}
158
                         value={this.state.inputPassword.value}
156
                         onChange={this.handleChangePassword}
159
                         onChange={this.handleChangePassword}
160
+                        onKeyPress={this.handleInputKeyPress}
157
                       />
161
                       />
158
 
162
 
159
                       <div className='row align-items-center mt-4 mb-4'>
163
                       <div className='row align-items-center mt-4 mb-4'>