/
LoginModal.js
43 lines (40 loc) · 1.37 KB
/
LoginModal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, { Component, PropTypes } from 'react'
import Radium from 'radium'
import Modal from 'react-modal'
import styles from './loginModal.styles'
import Anchor from '../Anchor/Anchor'
import Button from '../Button/Button'
import ModalHeader from '../ModalHeader/ModalHeader'
import { ValidForm, Field } from 'valid-react-form'
@Radium
class LoginModal extends Component {
render () {
const { loginModalOpen, actions } = this.props
return (
<Modal style={styles} contentLabel='Login' isOpen={loginModalOpen} >
<ModalHeader title={'Login'} onClose={actions.toggleLoginModal} />
<ValidForm style={styles.form} onSubmit={actions.submitLogin} autoComplete='off' >
<Field label='Username'
autoFocus
required
placeholder='Enter your username'
name='username' />
<Field label='Password'
required
type='password'
placeholder='Enter password'
name='password' />
<div style={styles.controls} >
<Button style={styles.controls.submit} >Submit</Button>
<Anchor style={styles.controls.cancel} onClick={actions.toggleLoginModal} >Cancel</Anchor>
</div>
</ValidForm>
</Modal>
)
}
}
LoginModal.propTypes = {
loginModalOpen: PropTypes.bool,
actions: PropTypes.object
}
export default LoginModal