Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from "react";
- import ReactGA from 'react-ga';
- // @material-ui/core components
- import { Redirect } from "react-router-dom";
- import { withStyles, WithStyles } from "@material-ui/core/styles";
- import InputAdornment from "@material-ui/core/InputAdornment";
- import Checkbox from "@material-ui/core/Checkbox";
- import { ClipLoader } from "react-spinners";
- import SvgIcon from "@material-ui/core/SvgIcon";
- import { MdEmail, MdLockOutline } from "react-icons/md";
- // core components
- import GridContainer from "../components/GridContainer";
- import GridItem from "../components/GridItem";
- import Button from "../components/Button";
- import Card from "../components/Card/LandingCard";
- import CardBody from "../components/Card/CardBody";
- import CardHeader from "../components/Card/CardHeader";
- import CardFooter from "../components/Card/CardFooter";
- import CustomInput from "../components/CustomInput";
- import styles from "../assets/styles/views/loginPage";
- // import Log from '../helpers/log';
- import image from "../assets/img/background-3.jpg";
- import { Link } from 'react-router-dom';
- // import { RouteComponentProps } from "react-router";
- import * as LoginActions from "../_actions/login";
- import { connect } from "react-redux";
- import { bindActionCreators } from "redux";
- import { RootState } from "../_reducers";
- import Log from "../helpers/log";
- import { UserState } from "../model";
- // import { history } from '../helpers/history';
- // import { setUser } from '../_actions/user';
- // import { isEmpty } from 'lodash';
- export namespace LoginPage {
- export interface Props {
- whiteFont?: boolean;
- actions: typeof LoginActions;
- classes: any;
- user: UserState;
- dispatch: Function;
- location: any;
- }
- export interface State {
- cardAnimation?: any;
- email: string;
- emailError?: boolean;
- password: string;
- passwordError?: boolean;
- formError?: boolean;
- rememberMe: boolean;
- }
- }
- export class LoginPage extends React.Component<WithStyles & LoginPage.Props, LoginPage.State> {
- public cardAnimationTimeout: NodeJS.Timeout;
- constructor(props) {
- super(props);
- // we use this to make the card to appear after the page has been rendered
- this.state = {
- cardAnimation: "cardHidden",
- email: "",
- password: "",
- rememberMe: true
- };
- // this.handleChange = this.handleChange.bind(this);
- // this.handleSubmit = this.handleSubmit.bind(this);
- }
- public componentDidMount() {
- // we add a hidden class to the card and after 700 ms we delete it and the transition appears
- this.cardAnimationTimeout = setTimeout(() => {
- this.setState({ cardAnimation: "" });
- }, 700);
- }
- public componentWillUnmount() {
- clearTimeout(this.cardAnimationTimeout);
- }
- public handleSubmit = (e: React.FormEvent<HTMLFormElement> | any) => {
- // Log.log("submitting!!", "handleSubmit");
- Log.log(e, "handleSubmit");
- if (!this.formIsValid()) return;
- ReactGA.event({
- category: 'User',
- action: 'Login Event'
- });
- this.props.actions.login({
- email: this.state.email,
- password: this.state.password,
- rememberMe: this.state.rememberMe
- });
- };
- public handleChange = (name: string, event: any) => {
- // debugger;
- switch (name) {
- case "rememberMe":
- this.setState({ [name]: event.target.checked });
- break;
- default:
- this.setState({ [name]: event.target.value } as any);
- break;
- }
- };
- public formIsValid = () => {
- const { email, password } = this.state;
- return email && password;
- };
- public handleKeyPress = event => {
- if (event.key === 'Enter') {
- this.handleSubmit(event);
- }
- };
- public render() {
- const { classes, user } = this.props;
- // https://reacttraining.com/react-router/web/example/auth-workflow
- const { from } = this.props.location.state || {
- from: { pathname: "/app" }
- };
- if (user.isLoggedIn) return <Redirect to={from} />;
- return (
- <div
- className={classes.pageHeader}
- style={{
- backgroundImage: "url(" + image + ")",
- backgroundSize: "cover",
- backgroundPosition: "top center"
- }}
- >
- <div className={classes.container}>
- <GridContainer justify="center">
- <GridItem xs={12} sm={12} md={4}>
- <Card className={classes[this.state.cardAnimation]}>
- <form className={classes.form} onSubmit={this.handleSubmit}>
- <CardHeader color="success" className={classes.cardHeader}>
- <h4>Login</h4>
- </CardHeader>
- <CardBody>
- <CustomInput
- labelText="Email..."
- id="email"
- formControlProps={{
- fullWidth: true
- }}
- inputProps={{
- type: "email",
- !!:..||
- onChange: e => this.handleChange("email", e),
- onKeyPress: (e) => this.handleKeyPress(e)
- }}
- InputProps={{
- endAdornment: (
- <InputAdornment position="end">
- <SvgIcon
- className={classes.inputIconsColor}
- component={svgProps => <MdEmail {...svgProps} />}
- />
- </InputAdornment>
- )
- }}
- />
- <CustomInput
- labelText="Password"
- id="pass"
- formControlProps={{ fullWidth: true }}
- inputProps={{
- type: "password",
- !!:..||
- onChange: e => this.handleChange("password", e),
- onKeyPress: (e) => this.handleKeyPress(e)
- }}
- InputProps={{
- endAdornment: (
- <InputAdornment position="end">
- <SvgIcon
- className={classes.inputIconsColor}
- component={svgProps => (
- <MdLockOutline {...svgProps} />
- )}
- />
- </InputAdornment>
- )
- }}
- />
- </CardBody>
- <CardFooter className={classes.cardFooter}>
- <Checkbox
- checked={this.state.rememberMe}
- onChange={e => {
- this.handleChange("rememberMe", e);
- }}
- value="RememberMe"
- color="secondary"
- />
- Remember Me
- <Button
- simple={true}
- round={false}
- color="info"
- size="md"
- variant="contained"
- disabled={user.loggingIn || !this.formIsValid()}
- onClick={this.handleSubmit}
- >
- {user.loggingIn ? (
- <ClipLoader
- sizeUnit={"px"}
- size={20}
- color={"#00acc1"}
- loading={true}
- />
- ) : ("Submit")}
- </Button>
- </CardFooter>
- </form>
- </Card>
- <p>Don't have an account? <Link to="/signup" style={{ color: "#3a9fec" }}>Sign Up</Link></p>
- </GridItem>
- </GridContainer>
- </div>
- </div>
- );
- }
- }
- const mapStateToProps = (state: RootState) => {
- return {
- user: state.user
- // error: state.login.error
- };
- };
- const mapDispatchToProps = (dispatch: any) => {
- return {
- dispatch,
- actions: bindActionCreators(LoginActions as any, dispatch)
- };
- };
- export default connect(
- mapStateToProps,
- mapDispatchToProps
- )(withStyles(styles)<{}>(LoginPage));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement