Gestion erreurs formulaire Login et Register
This commit is contained in:
+11
-3
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user