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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import { Field, reduxForm } from 'redux-form/immutable';
import { connect } from 'react-redux';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import AllInclusive from '@material-ui/icons/AllInclusive';
import Brightness5 from '@material-ui/icons/Brightness5';
import People from '@material-ui/icons/People';
import ArrowForward from '@material-ui/icons/ArrowForward';
import { Button, IconButton, InputAdornment, FormControl, FormControlLabel } from '@material-ui/core';
import styles from './user-jss';
import { TextFieldRedux, CheckboxRedux } from './ReduxFormMUI';
import { ContentDivider } from '../Divider';
import PapperBlock from '../PapperBlock/PapperBlock';
// validation functions
const required = value => (value == null ? 'Required' : undefined);
const email = value => (
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
? 'Invalid email'
: undefined
);
class LoginForm extends React.Component {
state = {
showPassword: false
}
handleClickShowPassword = () => {
this.setState({ showPassword: !this.state.showPassword });
};
handleMouseDownPassword = event => {
event.preventDefault();
};
render() {
const {
classes,
handleSubmit,
pristine,
submitting
} = this.props;
return (
<div className={classes.formWrap}>
<PapperBlock whiteBg title="Login" desc="">
<form onSubmit={handleSubmit}>
<div>
<FormControl className={classes.formControl}>
<Field
name="email"
component={TextFieldRedux}
placeholder="Your Email"
label="Your Email"
required
validate={[required, email]}
className={classes.field}
/>
</FormControl>
</div>
<div>
<FormControl className={classes.formControl}>
<Field
name="password"
component={TextFieldRedux}
type={this.state.showPassword ? 'text' : 'password'}
label="Your Password"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="Toggle password visibility"
onClick={this.handleClickShowPassword}
onMouseDown={this.handleMouseDownPassword}
>
{this.state.showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
)
}}
required
validate={required}
className={classes.field}
/>
</FormControl>
</div>
<div className={classes.btnArea}>
<FormControlLabel control={<Field name="checkbox" component={CheckboxRedux} />} label="Remember" />
<Button variant="contained" color="primary" type="submit">
Continue
<ArrowForward className={classNames(classes.rightIcon, classes.iconSmall)} disabled={submitting || pristine} />
</Button>
</div>
<ContentDivider content="OR" />
<div className={classes.btnArea}>
<Button variant="contained" size="small" className={classes.redBtn} type="button">
<AllInclusive className={classNames(classes.leftIcon, classes.iconSmall)} />
Socmed 1
</Button>
<Button variant="contained" size="small" className={classes.blueBtn} type="button">
<Brightness5 className={classNames(classes.leftIcon, classes.iconSmall)} />
Socmed 2
</Button>
<Button variant="contained" size="small" className={classes.cyanBtn} type="button">
<People className={classNames(classes.leftIcon, classes.iconSmall)} />
Socmed 3
</Button>
</div>
<div className={classes.footer}>
Cannot Login?
<Button size="small" color="secondary" className={classes.button}>Forgot Password</Button>
|
{' '}
<Button size="small" color="secondary" className={classes.button}>Register</Button>
</div>
</form>
</PapperBlock>
</div>
);
}
}
LoginForm.propTypes = {
classes: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
pristine: PropTypes.bool.isRequired,
submitting: PropTypes.bool.isRequired,
};
const LoginFormReduxed = reduxForm({
form: 'immutableExample',
enableReinitialize: true,
})(LoginForm);
const reducer = 'login';
const FormInit = connect(
state => ({
force: state,
initialValues: state.getIn([reducer, 'usersLogin'])
}),
)(LoginFormReduxed);
export default withStyles(styles)(FormInit);
|
