talents-tube/app
9
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

swipable Login REgister

Browse Source
This commit is contained in:
Thomas Berrod
2019-06-24 17:45:15 +02:00
parent 3c92605ca3
commit 34df2c28a5
3 changed files with 158 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs/package.json
+1
View File
@@ -42,6 +42,7 @@
"react-jss": "latest",
"react-plyr": "^2.1.1",
"react-redux": "^7.0.3",
"react-swipeable-views": "^0.13.3",
"reactstrap": "^6.4.0",
"recordrtc": "^5.5.4",
"redux": "^4.0.1",
nextjs/pages/Login.js
+116 -64
View File
@@ -2,15 +2,32 @@ 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',
@@ -37,7 +54,8 @@ class LoginPage extends React.Component {
password: ""
},
errors: {},
loading: false
loading: false,
tabIndex:0
};
componentWillReceiveProps(nextProps) {
this.setState({
@@ -86,6 +104,16 @@ class LoginPage extends React.Component {
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;
@@ -100,75 +128,99 @@ class LoginPage extends React.Component {
<div className="alert alert-info"><CircularProgress color="secondary" />Chargement...</div>
)}
{!loading && (
<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!' : ' '}
/>
<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
/>
<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>
<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>
<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>
</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 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>
</Fragment>
)}
</div>
</Layout>
nextjs/yarn.lock
+41 -9
View File
@@ -3205,17 +3205,17 @@ doctrine@^2.1.0:
dependencies:
esutils "^2.0.2"
dom-helpers@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
dom-helpers@^3.4.0:
dom-helpers@^3.2.1, dom-helpers@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
dependencies:
"@babel/runtime" "^7.1.2"
dom-helpers@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
dom-serializer@0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -3776,7 +3776,7 @@ fast-levenshtein@~2.0.4:
version "2.0.6"
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
fbjs@^0.8.1:
fbjs@^0.8.1, fbjs@^0.8.4:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
dependencies:
@@ -5417,7 +5417,7 @@ junk@^1.0.1:
version "1.0.3"
resolved "https://registry.yarnpkg.com/junk/-/junk-1.0.3.tgz#87be63488649cbdca6f53ab39bec9ccd2347f592"
keycode@^2.2.0:
keycode@^2.1.7, keycode@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
@@ -7451,7 +7451,7 @@ prop-types@15.6.2, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, p
loose-envify "^1.3.1"
object-assign "^4.1.1"
prop-types@^15.7.2:
prop-types@^15.5.4, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7629,7 +7629,7 @@ react-error-overlay@5.1.4:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.4.tgz#88dfb88857c18ceb3b9f95076f850d7121776991"
integrity sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg==
react-event-listener@^0.6.6:
react-event-listener@^0.6.0, react-event-listener@^0.6.6:
version "0.6.6"
resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.6.tgz#758f7b991cad9086dd39fd29fad72127e1d8962a"
integrity sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==
@@ -7706,6 +7706,38 @@ react-ssr-prepass@1.0.2:
dependencies:
object-is "^1.0.1"
react-swipeable-views-core@^0.13.1:
version "0.13.1"
resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.13.1.tgz#8829a922462a8bdd701709cd1b385393d38f1527"
integrity sha512-EP8sCvvD7VDiZLglPt9icMuMNu8qLRLk0ab/fB1HXv7lX8ClnwF3UMCM0ZrN3sguSY7CsX3LevducGGsT1VcDg==
dependencies:
"@babel/runtime" "7.0.0"
warning "^4.0.1"
react-swipeable-views-utils@^0.13.3:
version "0.13.3"
resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.3.tgz#c234d8d836bb085803631a9fef0adb2f9597221f"
integrity sha512-CZkJwiNQPISkyTsPMUPiJgwJBrUVd7NC3WSUvx30uwvPb0Sy2w2+tpU51qeYc6YwIhex0s5Eu5YPjK3PDBh+gA==
dependencies:
"@babel/runtime" "7.0.0"
fbjs "^0.8.4"
keycode "^2.1.7"
prop-types "^15.6.0"
react-event-listener "^0.6.0"
react-swipeable-views-core "^0.13.1"
react-swipeable-views@^0.13.3:
version "0.13.3"
resolved "https://registry.yarnpkg.com/react-swipeable-views/-/react-swipeable-views-0.13.3.tgz#2ad886767c6b2de88000606a14bedde12156e6d0"
integrity sha512-LBHRA5ZouipmoLLwi0cqB8qc7NHLskbXmT1I+ZztC9JfmgKrfichw5R+7q4igQ+5VbaP6jL1vn8BtHW96WYNFQ==
dependencies:
"@babel/runtime" "7.0.0"
dom-helpers "^3.2.1"
prop-types "^15.5.4"
react-swipeable-views-core "^0.13.1"
react-swipeable-views-utils "^0.13.3"
warning "^4.0.1"
react-transition-group@^2.3.1:
version "2.5.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.0.tgz#70bca0e3546102c4dc5cf3f5f57f73447cce6874"