Advertisement
d_fire_cracker

LoginPage.tsx

Apr 10th, 2020
478
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import ReactGA from 'react-ga';
  3. // @material-ui/core components
  4. import { Redirect } from "react-router-dom";
  5. import { withStyles, WithStyles } from "@material-ui/core/styles";
  6. import InputAdornment from "@material-ui/core/InputAdornment";
  7. import Checkbox from "@material-ui/core/Checkbox";
  8. import { ClipLoader } from "react-spinners";
  9. import SvgIcon from "@material-ui/core/SvgIcon";
  10. import { MdEmail, MdLockOutline } from "react-icons/md";
  11. // core components
  12. import GridContainer from "../components/GridContainer";
  13. import GridItem from "../components/GridItem";
  14. import Button from "../components/Button";
  15. import Card from "../components/Card/LandingCard";
  16. import CardBody from "../components/Card/CardBody";
  17. import CardHeader from "../components/Card/CardHeader";
  18. import CardFooter from "../components/Card/CardFooter";
  19. import CustomInput from "../components/CustomInput";
  20. import styles from "../assets/styles/views/loginPage";
  21. // import Log from '../helpers/log';
  22. import image from "../assets/img/background-3.jpg";
  23. import { Link } from 'react-router-dom';
  24. // import { RouteComponentProps } from "react-router";
  25. import * as LoginActions from "../_actions/login";
  26. import { connect } from "react-redux";
  27. import { bindActionCreators } from "redux";
  28. import { RootState } from "../_reducers";
  29. import Log from "../helpers/log";
  30. import { UserState } from "../model";
  31. // import { history } from '../helpers/history';
  32. // import { setUser } from '../_actions/user';
  33. // import { isEmpty } from 'lodash';
  34.  
  35. export namespace LoginPage {
  36.   export interface Props {
  37.     whiteFont?: boolean;
  38.     actions: typeof LoginActions;
  39.     classes: any;
  40.     user: UserState;
  41.     dispatch: Function;
  42.     location: any;
  43.   }
  44.   export interface State {
  45.     cardAnimation?: any;
  46.     email: string;
  47.     emailError?: boolean;
  48.     password: string;
  49.     passwordError?: boolean;
  50.     formError?: boolean;
  51.     rememberMe: boolean;
  52.   }
  53. }
  54.  
  55. export class LoginPage extends React.Component<WithStyles & LoginPage.Props, LoginPage.State> {
  56.   public cardAnimationTimeout: NodeJS.Timeout;
  57.  
  58.   constructor(props) {
  59.     super(props);
  60.     // we use this to make the card to appear after the page has been rendered
  61.     this.state = {
  62.       cardAnimation: "cardHidden",
  63.       email: "",
  64.       password: "",
  65.       rememberMe: true
  66.     };
  67.  
  68.     // this.handleChange = this.handleChange.bind(this);
  69.     // this.handleSubmit = this.handleSubmit.bind(this);
  70.   }
  71.  
  72.   public componentDidMount() {
  73.     // we add a hidden class to the card and after 700 ms we delete it and the transition appears
  74.     this.cardAnimationTimeout = setTimeout(() => {
  75.       this.setState({ cardAnimation: "" });
  76.     }, 700);
  77.   }
  78.  
  79.   public componentWillUnmount() {
  80.     clearTimeout(this.cardAnimationTimeout);
  81.   }
  82.  
  83.   public handleSubmit = (e: React.FormEvent<HTMLFormElement> | any) => {
  84.     // Log.log("submitting!!", "handleSubmit");
  85.     Log.log(e, "handleSubmit");
  86.     if (!this.formIsValid()) return;
  87.     ReactGA.event({
  88.       category: 'User',
  89.       action: 'Login Event'
  90.     });
  91.     this.props.actions.login({
  92.       email: this.state.email,
  93.       password: this.state.password,
  94.       rememberMe: this.state.rememberMe
  95.     });
  96.   };
  97.  
  98.   public handleChange = (name: string, event: any) => {
  99.     // debugger;
  100.     switch (name) {
  101.       case "rememberMe":
  102.         this.setState({ [name]: event.target.checked });
  103.         break;
  104.       default:
  105.         this.setState({ [name]: event.target.value } as any);
  106.         break;
  107.     }
  108.   };
  109.  
  110.   public formIsValid = () => {
  111.     const { email, password } = this.state;
  112.     return email && password;
  113.   };
  114.  
  115.   public handleKeyPress = event => {
  116.     if (event.key === 'Enter') {
  117.       this.handleSubmit(event);
  118.     }
  119.   };
  120.  
  121.   public render() {
  122.     const { classes, user } = this.props;
  123.  
  124.     // https://reacttraining.com/react-router/web/example/auth-workflow
  125.     const { from } = this.props.location.state || {
  126.       from: { pathname: "/app" }
  127.     };
  128.     if (user.isLoggedIn) return <Redirect to={from} />;
  129.  
  130.     return (
  131.       <div
  132.        className={classes.pageHeader}
  133.        style={{
  134.          backgroundImage: "url(" + image + ")",
  135.          backgroundSize: "cover",
  136.          backgroundPosition: "top center"
  137.        }}
  138.      >
  139.         <div className={classes.container}>
  140.           <GridContainer justify="center">
  141.             <GridItem xs={12} sm={12} md={4}>
  142.               <Card className={classes[this.state.cardAnimation]}>
  143.                 <form className={classes.form} onSubmit={this.handleSubmit}>
  144.                   <CardHeader color="success" className={classes.cardHeader}>
  145.                     <h4>Login</h4>
  146.                   </CardHeader>
  147.                   <CardBody>
  148.                     <CustomInput
  149.                      labelText="Email..."
  150.                      id="email"
  151.                      formControlProps={{
  152.                        fullWidth: true
  153.                      }}
  154.                      inputProps={{
  155.                        type: "email",
  156. !!:..||
  157.                        onChange: e => this.handleChange("email", e),
  158.                         onKeyPress: (e) => this.handleKeyPress(e)
  159.                       }}
  160.                       InputProps={{
  161.                         endAdornment: (
  162.                           <InputAdornment position="end">
  163.                             <SvgIcon
  164.                              className={classes.inputIconsColor}
  165.                              component={svgProps => <MdEmail {...svgProps} />}
  166.                             />
  167.                           </InputAdornment>
  168.                         )
  169.                       }}
  170.                     />
  171.                     <CustomInput
  172.                      labelText="Password"
  173.                      id="pass"
  174.                      formControlProps={{ fullWidth: true }}
  175.                      inputProps={{
  176.                        type: "password",
  177. !!:..||
  178.                        onChange: e => this.handleChange("password", e),
  179.                         onKeyPress: (e) => this.handleKeyPress(e)
  180.                       }}
  181.                       InputProps={{
  182.                         endAdornment: (
  183.                           <InputAdornment position="end">
  184.                             <SvgIcon
  185.                              className={classes.inputIconsColor}
  186.                              component={svgProps => (
  187.                                 <MdLockOutline {...svgProps} />
  188.                               )}
  189.                             />
  190.                           </InputAdornment>
  191.                         )
  192.                       }}
  193.                     />
  194.                   </CardBody>
  195.                   <CardFooter className={classes.cardFooter}>
  196.                     <Checkbox
  197.                      checked={this.state.rememberMe}
  198.                      onChange={e => {
  199.                         this.handleChange("rememberMe", e);
  200.                       }}
  201.                       value="RememberMe"
  202.                       color="secondary"
  203.                     />
  204.                     Remember Me
  205.                     <Button
  206.                      simple={true}
  207.                      round={false}
  208.                      color="info"
  209.                      size="md"
  210.                      variant="contained"
  211.                      disabled={user.loggingIn || !this.formIsValid()}
  212.                      onClick={this.handleSubmit}
  213.                    >
  214.                       {user.loggingIn ? (
  215.                         <ClipLoader
  216.                           sizeUnit={"px"}
  217.                           size={20}
  218.                           color={"#00acc1"}
  219.                           loading={true}
  220.                         />
  221.                       ) : ("Submit")}
  222.                     </Button>
  223.                   </CardFooter>
  224.                 </form>
  225.               </Card>
  226.               <p>Don't have an account? <Link to="/signup" style={{ color: "#3a9fec" }}>Sign Up</Link></p>
  227.             </GridItem>
  228.           </GridContainer>
  229.         </div>
  230.       </div>
  231.     );
  232.   }
  233. }
  234.  
  235. const mapStateToProps = (state: RootState) => {
  236.   return {
  237.     user: state.user
  238.     // error: state.login.error
  239.   };
  240. };
  241.  
  242. const mapDispatchToProps = (dispatch: any) => {
  243.   return {
  244.     dispatch,
  245.     actions: bindActionCreators(LoginActions as any, dispatch)
  246.   };
  247. };
  248.  
  249. export default connect(
  250.   mapStateToProps,
  251.   mapDispatchToProps
  252. )(withStyles(styles)<{}>(LoginPage));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement