app/nextjs/pages/Login.js

import React, { Fragment } from 'react';
import PropTypes from "prop-types";
import Layout from '../components/templates/Layout';
import { TextField, Button, Typography } from '@material-ui/core';
import SwipeableViews from 'react-swipeable-views';
import AppBar from '@material-ui/core/AppBar';
import Link from '@material-ui/core/Link';
import { withStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
import { connect } from "react-redux";
import Validator from "validator";
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Router from 'next/router'

import { requestLogin, requestOauthLogin,requestLoginFailure } from "../actions/auth";

function TabContainer({ children, dir }) {
    return (
      <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
        {children}
      </Typography>
    );
  }
  
  TabContainer.propTypes = {
    children: PropTypes.node.isRequired,
    dir: PropTypes.string.isRequired,
  };

const styles = theme => ({
    container: {
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
    },
    textField: {
        width: '100%'
    },
    form: {
        display: 'flex',
        flexDirection: 'column',
    },
    input50: {
        width: '50%',
    },

});

class LoginPage extends React.Component {
    state = {
        data: {
            email: "",
            password: ""
        },
        errors: {},
        loading: false,
        tabIndex:0
    };
    componentWillReceiveProps(nextProps) {
        this.setState({
            errors: nextProps.errors,
            loading: nextProps.loading
        })
    }

    onChange = e =>
        this.setState({
            data: { ...this.state.data, [e.target.name]: e.target.value }
        });

    onSubmit = e => {
        e.preventDefault();
        const errors = this.validate(this.state.data);
        this.setState({ errors });
        if (Object.keys(errors).length === 0) {
            this.setState({ loading: true });

            this.props.requestLogin(this.state.data)

        }
    };

    submit = data => { this.props.login(data) }

    validate = data => {
        const errors = {};
        if (!Validator.isEmail(data.email)) errors.email = "Invalid email";
        if (!data.password) errors.password = "Can't be blank";
        return errors;
    };

    linkedInAuth = () => {

        localStorage.setItem('loginRedirect', "/Offre?id=31")//pour le test
        this.props.requestOauthLogin();
        Router.push('/auth/linkedin')

    }

    facebookAuth = () => {
        localStorage.setItem('loginRedirect', "/Offre?id=31")
        this.props.requestOauthLogin();
        Router.push('/auth/facebook')
    }

    handleChange= (event, newValue) => {
        console.log('handleChange')
        this.setState({ tabIndex: newValue });
      }
    
    handleChangeIndex= (index) =>{
        console.log('handleChangeIndex')
        this.setState({ tabIndex: index });
    }

    render() {
        const { classes } = this.props;
        const { data, errors, loading } = this.state;

        return (
            <Layout>
                <div className={classes.container}>
                    {!!errors && (
                        <div className="alert alert-danger">{errors.message}</div>
                    )}
                    {loading && (
                        <div className="alert alert-info"><CircularProgress color="secondary" />Chargement...</div>
                    )}
                    {!loading && (
                                <Fragment>
                                <AppBar position="static" color="default">
                    <Tabs
                    value={this.state.tabIndex}
                    onChange={this.handleChange}
                    indicatorColor="primary"
                    textColor="primary"
                    variant="fullWidth"
                    >
                        <Tab label="Connexion" />
                        <Tab label="Inscription" />
                    </Tabs>
      </AppBar>
                        <SwipeableViews
                              axis={ 'x'}
                              index={this.state.tabIndex}
                              onChangeIndex={() => this.handleChangeIndex()}
                            >
                              <TabContainer dir={'x'}>
                                <Fragment>
                                    <form className={classes.form} onSubmit={this.onSubmit}>
                                        <TextField
                                            value={data.email}
                                            id="email"
                                            name="email"
                                            label="Email"
                                            margin="normal"
                                            type="email"
                                            value={data.email}
                                            onChange={this.onChange}
                                            autoComplete="username"
                                            required
                                            error={data.email === ""}
                                            helperText={data.email === "" ? 'Ce champ est vide!' : ' '}
                                        />

                                        <TextField
                                            value={data.password}
                                            id="password"
                                            name="password"
                                            label="Mot de passe"
                                            margin="normal"
                                            type="password"
                                            value={data.password}
                                            onChange={this.onChange}
                                            autoComplete="current-password"
                                            error={data.password === ""}
                                            helperText={data.password === "" ? 'Ce champ est vide!' : ' '}
                                            required
                                        />

                                        <Button type="submit" variant="outlined" color="primary">
                                            Se connecter
                                        </Button>
                                        <Typography
                                            paragraph={true}
                                            align="center"
                                        >
                                            <Link href={"#"} className={classes.link}>
                                                Mot de passe oublié ?
                                        </Link>
                                        </Typography>

                                        <Typography
                                            paragraph={true}
                                            align="center"
                                        >Ou</Typography>

                                    </form>
                                    <Button variant="outlined" color="primary" onClick={this.linkedInAuth}>
                                        Connexion avec Linkedin
                                    </Button>
                                    <Button variant="outlined" color="primary" onClick={this.facebookAuth}>
                                        Connexion avec Facebook
                                    </Button>

                                    <div className={classes.form}>
                                        <Typography
                                            paragraph={true}
                                            align="center"
                                        >Je ne possède pas de compte Talents Tube ?
                                        <Link href={"/Register"} className={classes.link}>
                                                        S'inscrire
                                        </Link>
                                        </Typography>

                                    </div>
                                </Fragment>
                        </TabContainer>
                        <TabContainer dir={'x'}>Item Two</TabContainer>
                    </SwipeableViews>
                                </Fragment>

                        )}
                </div>
            </Layout>
        );
    }
}

function mapStateToProps(state) {
    return {
        loading: !!state.user.loading,
        errors: state.user.errors
    };
}


export default withStyles(styles)(connect(mapStateToProps, { requestLogin, requestOauthLogin, requestLoginFailure })(LoginPage));