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

Gestion erreurs formulaire Login et Register

Browse Source
This commit is contained in:
Sébastien GLATZ
2019-05-31 11:46:14 +02:00
parent 1c5244f3dc
commit fad4c8822e
2 changed files with 46 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs/pages/Login.js
+11 -3
View File
@@ -9,7 +9,6 @@ const styles = theme => ({
display: 'flex',
flexDirection: 'column',
height: '100%',
width: '25vw',
},
textField: {
width: '100%'
@@ -17,7 +16,6 @@ const styles = theme => ({
form: {
display: 'flex',
flexDirection: 'column',
width: '100%',
},
input50: {
width: '50%',
@@ -26,6 +24,8 @@ const styles = theme => ({
});
class Login extends React.Component {
render() {
const { classes } = this.props;
@@ -35,19 +35,27 @@ class Login extends React.Component {
<form className={classes.form}>
<TextField
value={this.state.email}
id="email"
name="email"
label="Email"
margin="normal"
type="email"
required
error={email === ""}
helperText={email === "" ? 'Ce champ est vide!' : ' '}
/>
<TextField
value={this.state.password}
id="password"
name="password"
label="Mot de passe"
margin="normal"
type="password"
error={password === ""}
helperText={password === "" ? 'Ce champ est vide!' : ' '}
required
/>
<Button type="submit" variant="outlined" color="primary">
@@ -79,7 +87,7 @@ class Login extends React.Component {
paragraph={true}
align="center"
>Je ne possède pas de compte Talents Tube ?
<Link href={"#"} className={classes.link}>
<Link href={"/Register"} className={classes.link}>
S'inscrire
</Link>
</Typography>
nextjs/pages/Register.js
+33 -4
View File
@@ -1,6 +1,6 @@
import React from 'react';
import Layout from '../components/templates/Layout';
import { TextField, FormGroup, FormControlLabel, Checkbox, Button, Typography, Link} from '@material-ui/core';
import { TextField, FormGroup, FormControlLabel, Checkbox, Button, Typography, Link } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
@@ -10,7 +10,6 @@ const styles = theme => ({
display: 'flex',
flexDirection: 'column',
height: '100%',
width: '25vw',
},
textField: {
width: '100%'
@@ -18,7 +17,6 @@ const styles = theme => ({
form: {
display: 'flex',
flexDirection: 'column',
width: '100%',
},
input50: {
width: '50%',
@@ -27,6 +25,16 @@ const styles = theme => ({
});
class Register extends React.Component {
state = {
prenom,
nom,
email,
password,
checkNewsletter,
checkCGU
}
render() {
const { classes } = this.props;
@@ -37,38 +45,55 @@ class Register extends React.Component {
<form className={classes.form}>
<FormGroup row>
<TextField
value={this.state.prenom}
className={classes.input50}
id="prenom"
name="prenom"
label="Prénom"
margin="normal"
required
error={prenom === ""}
helperText={prenom === "" ? 'Ce champ est vide!' : ' '}
/>
<TextField
value={this.state.nom}
className={classes.input50}
id="nom"
name="nom"
label="Nom"
margin="normal"
required
error={nom === ""}
helperText={nom === "" ? 'Ce champ est vide!' : ' '}
/>
</FormGroup>
<TextField
value={this.state.email}
id="email"
name="email"
label="Email"
margin="normal"
type="email"
required
error={email === ""}
helperText={email === "" ? 'Ce champ est vide!' : ' '}
/>
<TextField
value={this.state.password}
id="password"
name="password"
label="Mot de passe"
margin="normal"
type="password"
required
error={password === ""}
helperText={password === "" ? 'Ce champ est vide!' : ' '}
/>
<FormControlLabel
value={this.state.checkNewsletter}
control={
<Checkbox
value="checkedI"
@@ -78,12 +103,16 @@ class Register extends React.Component {
/>
<FormControlLabel
value={this.state.checkCGU}
control={
<Checkbox
value="checkedI"
/>
}
label="Je déclare avoir pris connaissance et accepte les termes et les CGU"
required
error={checkCGU === false}
helperText={checkCGU === "" ? 'Ce champ est requis!' : ' '}
/>
<Button type="submit" variant="outlined" color="primary">
@@ -107,7 +136,7 @@ class Register extends React.Component {
paragraph={true}
align="center"
>Je possède un compte Talents Tube ?
<Link href={"#"} className={classes.link}>
<Link href={"/Login"} className={classes.link}>
Se connecter
</Link>
</Typography>