Advertisement
Guest User

Untitled

a guest
Apr 12th, 2019
127
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.03 KB | None | 0 0
  1. import React, { Component } from "react";
  2. import PropTypes from "prop-types";
  3. import { connect } from "react-redux";
  4. import { login } from "../actions/userActions";
  5.  
  6. import Avatar from "@material-ui/core/Avatar";
  7. import Button from "@material-ui/core/Button";
  8. import CssBaseline from "@material-ui/core/CssBaseline";
  9. import LockIcon from "@material-ui/icons/LockOutlined";
  10. import Typography from "@material-ui/core/Typography";
  11. import {
  12. withStyles,
  13. MuiThemeProvider,
  14. createMuiTheme
  15. } from "@material-ui/core/styles";
  16.  
  17. import { ValidatorForm, TextValidator } from "react-material-ui-form-validator";
  18.  
  19. const styles = theme => ({
  20. layout: {
  21. width: "auto",
  22. marginLeft: theme.spacing.unit * 3,
  23. alignItems: "center",
  24. marginRight: theme.spacing.unit * 3,
  25. [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: {
  26. width: 400,
  27. marginLeft: "auto",
  28. marginRight: "auto"
  29. }
  30. },
  31. avatar: {
  32. margin: theme.spacing.unit,
  33. position: "relative",
  34. left: "49%",
  35. transform: "translate(-50%, -50%)",
  36. backgroundColor: custom_theme.palette.primary.main
  37. },
  38. form: {
  39. width: "100%",
  40. marginTop: theme.spacing.unit
  41. },
  42. submit: {
  43. marginTop: theme.spacing.unit * 3
  44. }
  45. });
  46.  
  47. const custom_theme = createMuiTheme({
  48. palette: {
  49. primary: { main: "#d79b51" }
  50. }
  51. });
  52.  
  53. class Login extends Component {
  54. constructor(props) {
  55. super(props);
  56. this.state = {
  57. username: "",
  58. password: ""
  59. };
  60.  
  61. this.handleChange = this.handleChange.bind(this);
  62. this.handleSubmit = this.handleSubmit.bind(this);
  63. }
  64.  
  65. componentDidMount() {
  66. // Redirecting to home if user is already logged in
  67. if (this.props.users.isAuthenticated) {
  68. this.props.history.push("/");
  69. }
  70.  
  71. // Adding custom validation rules
  72. ValidatorForm.addValidationRule("isValidUsername", value => {
  73. return value.trim().match("^[a-z0-9_-]{3,15}$") !== null;
  74. });
  75.  
  76. ValidatorForm.addValidationRule("isValidPassword", value => {
  77. return value.trim().length >= 6;
  78. });
  79. }
  80.  
  81. // This lifecycle method is invoked before a mounted component receives new props
  82. componentWillReceiveProps(nextProps) {
  83. if (nextProps.users.isAuthenticated) {
  84. this.props.history.push("/");
  85. }
  86. }
  87.  
  88. handleChange(e) {
  89. const { name, value } = e.target;
  90. this.setState({ [name]: value });
  91. }
  92.  
  93. handleSubmit(e) {
  94. e.preventDefault();
  95.  
  96. const { username, password } = this.state;
  97. const { dispatch } = this.props;
  98.  
  99. if (username && password) {
  100. dispatch(login(username, password));
  101. }
  102. }
  103.  
  104. render() {
  105. const { classes } = this.props;
  106. const { username, password } = this.state;
  107.  
  108. return (
  109. <section className="page-section cta">
  110. <div className="row">
  111. <div className="col-xl-7 mx-auto">
  112. <div className="cta-inner rounded">
  113. <React.Fragment>
  114. <CssBaseline />
  115. <main className={classes.layout}>
  116. <Avatar className={classes.avatar}>
  117. <LockIcon />
  118. </Avatar>
  119. <Typography align="center" variant="headline">
  120. Sign in
  121. </Typography>
  122. <ValidatorForm
  123. ref="form"
  124. className={classes.form}
  125. onSubmit={this.handleSubmit}
  126. onError={errors => console.log(errors)}
  127. >
  128. <MuiThemeProvider theme={custom_theme}>
  129. <TextValidator
  130. label="Username"
  131. onChange={this.handleChange}
  132. name="username"
  133. value={username}
  134. validators={["required", "isValidUsername"]}
  135. errorMessages={[
  136. "Username is required!",
  137. "Invalid username!"
  138. ]}
  139. margin="normal"
  140. required
  141. fullWidth
  142. autoComplete="username"
  143. autoFocus
  144. />
  145. </MuiThemeProvider>
  146. <MuiThemeProvider theme={custom_theme}>
  147. <TextValidator
  148. label="Password"
  149. type="password"
  150. onChange={this.handleChange}
  151. name="password"
  152. value={password}
  153. validators={["required", "isValidPassword"]}
  154. errorMessages={[
  155. "Password is required!",
  156. "Password must be at least 6 characters long!"
  157. ]}
  158. margin="normal"
  159. required
  160. fullWidth
  161. autoComplete="current-password"
  162. />
  163. </MuiThemeProvider>
  164. <MuiThemeProvider theme={custom_theme}>
  165. <Button
  166. type="submit"
  167. fullWidth
  168. variant="raised"
  169. color="primary"
  170. className={classes.submit}
  171. >
  172. Sign In
  173. </Button>
  174. </MuiThemeProvider>
  175. </ValidatorForm>
  176. </main>
  177. </React.Fragment>
  178. </div>
  179. </div>
  180. </div>
  181. </section>
  182. );
  183. }
  184. }
  185.  
  186. Login.propTypes = {
  187. classes: PropTypes.object.isRequired,
  188. users: PropTypes.object.isRequired
  189. };
  190.  
  191. const mapStateToProps = state => ({
  192. users: state.users,
  193. errors: state.errors
  194. });
  195.  
  196. // Exporting with styles makes the inline styles become props of the function/class, which can be used in the render function.
  197. export default connect(mapStateToProps)(withStyles(styles)(Login));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement