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
|
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 ArrowForward from '@material-ui/icons/ArrowForward';
import Help from '@material-ui/icons/Help';
import dummy from 'ba-api/dummyContents';
import avatarApi from 'ba-api/avatars';
import {
Button,
Popover,
FormControl,
IconButton,
Typography,
InputAdornment,
Paper,
Avatar,
} from '@material-ui/core';
import { TextFieldRedux } from './ReduxFormMUI';
import styles from './user-jss';
// validation functions
const required = value => (value == null ? 'Required' : undefined);
class LockForm extends React.Component {
state = {
anchorEl: null,
};
handleShowHint = event => {
this.setState({
anchorEl: event.currentTarget,
});
};
handleClose = () => {
this.setState({
anchorEl: null,
});
};
render() {
const {
classes,
handleSubmit,
pristine,
submitting
} = this.props;
const { anchorEl } = this.state;
return (
<div className={classes.formWrap}>
<Paper className={classes.lockWrap}>
<form onSubmit={handleSubmit}>
<Avatar alt="John Doe" src={avatarApi[6]} className={classes.avatar} />
<Typography className={classes.userName} variant="h4">{dummy.user.name}</Typography>
<div>
<FormControl className={classes.formControl}>
<Field
name="password"
component={TextFieldRedux}
type="password"
label="Your Password"
required
validate={required}
className={classes.field}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="Helper Hint"
onClick={this.handleShowHint}
>
<Help />
</IconButton>
</InputAdornment>
)
}}
/>
</FormControl>
<Popover
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={this.handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Typography className={classes.hint}>Hint: Type anything to unlock!</Typography>
</Popover>
</div>
<div className={classes.btnArea}>
<Button fullWidth variant="contained" color="primary" type="submit">
Continue
<ArrowForward className={classNames(classes.rightIcon, classes.iconSmall)} disabled={submitting || pristine} />
</Button>
</div>
</form>
</Paper>
</div>
);
}
}
LockForm.propTypes = {
classes: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
pristine: PropTypes.bool.isRequired,
submitting: PropTypes.bool.isRequired,
};
const LockFormReduxed = reduxForm({
form: 'immutableELockFrm',
enableReinitialize: true,
})(LockForm);
export default withStyles(styles)(LockFormReduxed);
|
