US 430 : refonte parcours talent

nextjs/components/organisms/AccountEtape2.js

@@ -104,6 +104,9 @@ const styles = theme => ({
         fontSize: '2.5em',
         color: "#1689FB",
         textAlign: "right"
+    },
+    buttons :{
+        display: "inline-table",
     }
 });
 const Recorder = dynamic(() => import ('../organisms/Recorder'), {ssr: false})
@@ -218,14 +221,15 @@ class Etape2 extends React.Component {
                         <Grid container
                             justify="center"
                             alignItems="center" 
-                            spacing={2}>
+                            spacing={2}
+                            className={classes.buttons}>
                             <Grid item xs={12} sm={12} md={12} lg={6} lg={6}>
                                 
 
 
                             { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
                                 (
-                                    <Fragment>
+                                    <Fragment >
                                     <input
                                         type="file" accept="video/*" capture="camcorder"
                                         className={classes.input}

nextjs/components/organisms/AccountProfileCandidature.js

@@ -119,7 +119,47 @@ const useStyles = makeStyles(theme => ({
     },
     resetContainer: {
         padding: theme.spacing(3)
-    }
+    },
+    iconButton:{
+        marginTop: "50px",
+
+        [theme.breakpoints.down('md')]: {
+            marginTop: "50px",
+            
+        },
+    },
+    button: {
+        textTransform: 'inherit',
+        marginTop: theme.spacing(4),
+        marginBottom: theme.spacing(2),
+        padding: theme.spacing(1.2, 1),
+        borderRadius: '3px',
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.important,
+    },
+    title:{
+        fontFamily: 'Roboto',
+        fontSize: '1.625em',
+        fontWeight: '600',
+        padding: theme.spacing(3, 0),
+    },
+    texteEtape:{
+        fontSize: '1em',
+        fontWeight: '300',
+        
+    },
+    conteneur:{
+        width:'400px',
+    },
+    tabContainer:{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems:'center',
+        textAlign:'center',
+        align:'center',
+        alignSelf:'center',
+    },
+    
 }));
 
 const AccountProfile = props => {
@@ -136,70 +176,118 @@ const AccountProfile = props => {
     const {publicRuntimeConfig} = getConfig()
 
     return (
-        <Grid
-            container
-            spacing={4}
-            direction="row"
-            justify="space-between"
-            alignItems="flex-start">
+        <Fragment >
+            <div className={classes.tabContainer}>
+                <div className={classes.conteneur}>
+                    <Typography gutterBottom align="center" >
+                        <span className={classes.title}>
+                            <img
+                            alt="talents-tube"
+                            src='/statique/images/inscription/candidature-video-envoyee.svg'
+                            className={classes.iconButton}/>
+                        </span>
+                    </Typography>
+                    <Typography gutterBottom align="center" >
+                        <span className={classes.title}>Bravo !<br></br>
+                        Votre candidature a été envoyée
+                        </span>
+                    </Typography>
+                    <Typography gutterBottom align="center" className={classes.conteneur}>
+                        <div className={classes.texteEtape}>
+                            Pour suivre l’état d’avancement de vos candidatures, rendez-vous sur votre espace <b>Mon compte</b>.
+                        </div>
+                    </Typography>
+                    
+                    
+                    <Typography gutterBottom align="center" className={classes.text}>
+                        
+                        <Button
+                            variant="contained"
+                            className={classes.button}
+                            classes={{ root: classes.rootButton }}
+                            onClick={() => Router.push('/Candidatures')}
+                        >
+                            Accéder à Mon compte
+                        </Button>
+
+                    </Typography>
+                    {/* <section className={classes.bottomContainer}>
+                        <Button
+                            variant="contained"
+                            className={classes.button}
+                            classes={{ root: classes.rootButton }}
+                            onClick={() => Router.push('/Login')}
+                        >
+                            Connexion
+                    </Button>
+                    </section> */}
+                </div>
+            </div>
+        </Fragment>
+        // <Grid
+        //     container
+        //     spacing={4}
+        //     direction="row"
+        //     justify="space-between"
+        //     alignItems="flex-start">
             
-            <Grid item lg={9} md={6} xl={8} xs={12}>
-                <Fragment>
-                    <Hidden>&nbsp;</Hidden>
-                    <Hidden>&nbsp;</Hidden>
+        //     <Grid item lg={9} md={6} xl={8} xs={12}>
+        //         <Fragment>
+        //             <Hidden>&nbsp;</Hidden>
+        //             <Hidden>&nbsp;</Hidden>
 
-                    <Card
-                        variant="outlined"
-                        style={{
-                        width: 420 + "px",
-                        textAlign:"center"
-                    }}>
-                        <CardActions></CardActions>
-                        <CardContent>
-                            <Typography>
-                                Tu n'as pas tout dit dans ta vidéo?<br/>
-                                Pour mettre toutes les chances de ton côté, 
-                                <b> dépose ton CV old school (format pdf, word)!</b>
-                            </Typography>
-                        </CardContent>
+        //             <Card
+        //                 variant="outlined"
+        //                 style={{
+        //                 width: 420 + "px",
+        //                 textAlign:"center"
+        //             }}>
+        //                 <CardActions></CardActions>
+        //                 <CardContent>
+        //                     <Typography>
+        //                         Tu n'as pas tout dit dans ta vidéo?<br/>
+        //                         Pour mettre toutes les chances de ton côté, 
+        //                         <b> dépose ton CV old school (format pdf, word)!</b>
+        //                     </Typography>
+        //                 </CardContent>
 
-                    </Card>
-                    <Hidden>&nbsp;</Hidden>
-                    <Card
-                        variant="outlined"
-                        style={{
-                        width: 420 + "px",
-                        textAlign:"center"
-                    }}>
-                        <CardContent>
-                            <AccountEtape3></AccountEtape3>
-                        </CardContent>
-                    </Card>
-                    <Hidden>&nbsp;</Hidden>
-                    <Hidden>&nbsp;</Hidden>
-                    <Card
-                        variant="outlined"
-                        style={{
-                        width: 420 + "px",
-                        textAlign:"center"
-                    }}>
-                        <CardContent>
+        //             </Card>
+        //             <Hidden>&nbsp;</Hidden>
+        //             <Card
+        //                 variant="outlined"
+        //                 style={{
+        //                 width: 420 + "px",
+        //                 textAlign:"center"
+        //             }}>
+        //                 <CardContent>
+        //                     <AccountEtape3></AccountEtape3>
+        //                 </CardContent>
+        //             </Card>
+        //             <Hidden>&nbsp;</Hidden>
+        //             <Hidden>&nbsp;</Hidden>
+        //             <Card
+        //                 variant="outlined"
+        //                 style={{
+        //                 width: 420 + "px",
+        //                 textAlign:"center"
+        //             }}>
+        //                 <CardContent>
                             
-                            <Button
-                                variant="contained"
-                                color="primary"
-                                onClick={() => Router.push(`/Candidatures`)}
-                                className={classes.button}>
-                                Voir mes candidatures
-                            </Button>
-                        </CardContent>
-                    </Card>
-                </Fragment>
+        //                     <Button
+        //                         variant="contained"
+        //                         color="primary"
+        //                         onClick={() => Router.push(`/Candidatures`)}
+        //                         className={classes.button}>
+        //                         Voir mes candidatures
+        //                     </Button>
+        //                 </CardContent>
+        //             </Card>
+        //         </Fragment>
 
-            </Grid>
-            <Grid item lg={3} md={6} xl={4} xs={12}></Grid>
+        //     </Grid>
+        //     <Grid item lg={3} md={6} xl={4} xs={12}></Grid>
 
-        </Grid>
+        // </Grid>
 
     );
 };

nextjs/components/organisms/Answer.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment, useState } from 'react'
 import { withStyles } from '@material-ui/core/styles';
-import { Button, Typography } from '@material-ui/core';
+import { Button, Typography, Divider, Hidden } from '@material-ui/core';
 import TextField from '@material-ui/core/TextField';
 import Input from '@material-ui/core/Input';
 import { connect } from 'react-redux'
@@ -12,6 +12,7 @@ import Loader from './../templates/loader'
 import getConfig from 'next/config'
 import 'video-react/dist/video-react.css';
 import { Player } from 'video-react';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import GooglePlaceAutocomplete from 'mui-places-autocomplete'
 import { geocodeByAddress } from 'react-places-autocomplete'
 import FormControl from '@material-ui/core/FormControl'
@@ -20,6 +21,8 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import { uploadMediaCv } from '../../actions/media'
+import GetApp from '@material-ui/icons/GetApp';
 // import PlacesAutocomplete from 'react-places-autocomplete';
 // import {
 //     geocodeByAddress,
@@ -78,10 +81,7 @@ const styles = theme => ({
     },
     rootButton: {
         textTransform: 'inherit',
-        border: '1px solid',
-        '&:hover': {
-            border: '1px solid',
-        },
+        
     },
     button: {
         textTransform: 'inherit',
@@ -91,20 +91,25 @@ const styles = theme => ({
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
     },
-
+    containerImport:{
+        width:"100%",
+        textAlign:"left",
+        align:"left",
+        alignItems:"flex-start",
+        border: 0,
+        margin: 0,
+        display: "inline-flex",
+        padding: 0,
+        position: "relative",
+        flexDirection: "column",
+        verticalAlign: "top",
+        marginBottom:"20px !important"
+    },
     importButton: {
-        color: theme.palette.primary.main,
-        backgroundColor: theme.palette.secondary.main,
-        padding: theme.spacing(3, 2),
-        margin: theme.spacing(1),
-        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.14)',
-        '&:hover': {
-            backgroundColor: theme.palette.secondary.main,
-        },
-        InputKeyboardArrowRightIcon: {
-            fontSize: '2.5em',
-            color: theme.palette.secondary.main,
-        },
+        padding: '4px 8px',
+        textTransform: 'inherit',
+        border: '2px solid #1E2327',
+        color: '#1E2327',
     },
     remplacerButton: {
         color: '#1E2327',
@@ -152,11 +157,147 @@ class Answer extends Component {
         this.onChange = this.onChange.bind(this);
          
     }
-
-    
     state = {
-        open: false
-      };
+        file: null,
+        firstname: '',
+        lastname: '',
+        phone: '',
+        currentJob: '',
+        linkedin: '',
+        twitter: '',
+        website: '',
+        mediaId: null,
+        mediaUrl: null,
+        thumbnails:null,
+        heure: null,
+        companyId: null,
+        address:'',
+        errorMessage:'',
+        open: false,
+        loading: true,
+        openSnack: false,
+        cv:false,
+    };
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        this.setState({
+            firstname: nextProps.user.firstname,
+            lastname: nextProps.user.lastname,
+            phone: nextProps.user.phone,
+            currentJob: nextProps.user.currentJob,
+            linkedin: nextProps.user.linkedin,
+            twitter: nextProps.user.twitter,
+            website: nextProps.user.website,
+            mediaId: nextProps.mediaId,
+            mediaUrl: nextProps.mediaUrl,
+            thumbnails: nextProps.thumbnails,
+            heure: nextProps.heure,
+            companyId: nextProps.companyId,
+            cvLink: nextProps.cvLink,
+            loading: nextProps.loading,
+            openSnack: !!!_.isEmpty(nextProps.errors),
+        })
+        if (nextProps.loading) {
+            const success = {};
+            success.message ="CV mis à jour";
+            console.log("CV mis à jour!!!")
+            this.setState({ success });
+            
+          }
+    }
+
+    componentDidMount() {
+        console.log("ANSWER !!!!!!! !!!!!! !!!!!! ");
+        console.log(this.props);
+        this.setState({
+            firstname: this.props.user.firstname,
+            lastname: this.props.user.lastname,
+            phone: this.props.user.phone,
+            currentJob: this.props.user.currentJob,
+            linkedin: this.props.user.linkedin,
+            twitter: this.props.user.twitter,
+            website: this.props.user.website,
+            video: this.props.answer,
+            mediaUrl : this.props.mediaUrl,
+            thumbnails : this.props.thumbnails,
+            heure : this.props.heure,
+            loading: false,
+            cvLink: this.props.cvLink instanceof Object ? this.props.user.cv : this.props.cvLink
+
+        })
+    }
+    
+      inputFilesystemChange = (e) => {
+        this.uploadMediaCv(e)
+      }
+      
+      uploadMediaCv = (e) => {
+        var file = e.target.files[0]
+    
+        const data = new FormData()
+        data.append('upload', file)
+    
+        this.props.uploadMediaCv(data)
+      }
+    
+      AfficherSuccess() {
+        if (!this.state.success || !this.state.success.message) {
+            console.log("Erreur Upload CV");
+            return "";
+        } else if (this.state.success.length != 0 && this.state.success.message != "") {
+            return (
+              <Snackbar open={open} autoHideDuration={1000} onClose={() => this.setState({open: false})}>
+                <Alert onClose={() => this.setState({open: false})} severity="success">
+                  {ReactHtmlParser(this.state.success.message)}
+                </Alert>
+              </Snackbar>
+            );
+        }
+        return "";
+      }
+    
+      AfficherLienCv() {
+        console.log("afficher lien");
+         if (this.state.cvLink !="") {
+          
+            return (
+              
+              <Fragment>
+                
+                    <Typography >
+                      <a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} 
+                      target="_blank"
+                      style={{ 
+                        color:'#1E2327',
+                        '&:hover': {
+                          color: '#1E2327',
+                        },
+                        backgroundColor: '#F3F3F4',
+                        width:'100%',
+                        fontWeight: '500',
+                        fontSize: '1em',
+                        padding:'15px',
+                        margin:'20px 0',
+
+                        }}
+                      >
+                        Visualiser mon CV
+                        </a>
+                        <br />
+                    
+                    </Typography>
+                  
+              </Fragment>
+                
+            );
+          
+        }
+        return "";
+      }
+
+
+
+
     openDialog() {
         this.setState({ open: true });
     }
@@ -227,68 +368,20 @@ class Answer extends Component {
 		//You can use the address data, passed by autocomplete as you want.
 	}
 
-    state = {
-        file: null,
-        firstname: '',
-        lastname: '',
-        phone: '',
-        currentJob: '',
-        linkedin: '',
-        twitter: '',
-        website: '',
-        mediaId: null,
-        mediaUrl: null,
-        thumbnails:null,
-        heure: null,
-        companyId: null,
-        address:'',
-        errorMessage:''
-    };
+
 
     handleChange = (e) => {
         this.setState({ [e.target.name]: e.target.value })
     }
 
 
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        this.setState({
-            firstname: nextProps.user.firstname,
-            lastname: nextProps.user.lastname,
-            phone: nextProps.user.phone,
-            currentJob: nextProps.user.currentJob,
-            linkedin: nextProps.user.linkedin,
-            twitter: nextProps.user.twitter,
-            website: nextProps.user.website,
-            mediaId: nextProps.mediaId,
-            mediaUrl: nextProps.mediaUrl,
-            thumbnails: nextProps.thumbnails,
-            heure: nextProps.heure,
-            companyId: nextProps.companyId,
-        })
-    }
-
-    componentDidMount() {
-        console.log("ANSWER !!!!!!! !!!!!! !!!!!! ");
-        console.log(this.props);
-        this.setState({
-            firstname: this.props.user.firstname,
-            lastname: this.props.user.lastname,
-            phone: this.props.user.phone,
-            currentJob: this.props.user.currentJob,
-            linkedin: this.props.user.linkedin,
-            twitter: this.props.user.twitter,
-            website: this.props.user.website,
-            video: this.props.answer,
-            mediaUrl : this.props.mediaUrl,
-            thumbnails : this.props.thumbnails,
-            heure : this.props.heure
-
-        })
-    }
+    
 
     onSubmit = (e) => {
         e.preventDefault()
-
+        //TODO : Vérifier si le nom et prénom sont renseignés
+        console.log("firstname")
+        console.log(this.state.firstname)
         const data = new FormData()
 
         data.append('firstname', this.state.firstname)
@@ -318,26 +411,26 @@ class Answer extends Component {
             })
     }
 
-    inputFilesystemChange = (e) => {
+    // inputFilesystemChange = (e) => {
 
-        console.log("inputFilesystemChange");
-        var file = e.target.files[0]
-        this.setState({ picture: file })
+    //     console.log("inputFilesystemChange");
+    //     var file = e.target.files[0]
+    //     this.setState({ picture: file })
 
-        const data = new FormData()
-        data.append('file', file)
-        this.props.updateUserPictureRequest(data)
-    }
-    // recupererAdresse =()=>{
-    //     geocodeByAddress('1 rue de la laine, Questembert')
-    //     .then(results => getLatLng(results[0]))
-    //     .then(({ lat, lng }) =>
-    //         console.log('Successfully got latitude and longitude', { lat, lng })
-    //     )
-    //     geocodeByAddress('1 rue de la laine, Questembert')
-    //     .then(results => console.log(results))
-    //     .catch(error => console.error(error));
+    //     const data = new FormData()
+    //     data.append('file', file)
+    //     this.props.updateUserPictureRequest(data)
     // }
+    recupererAdresse =()=>{
+        geocodeByAddress('1 rue de la laine, Questembert')
+        .then(results => getLatLng(results[0]))
+        .then(({ lat, lng }) =>
+            console.log('Successfully got latitude and longitude', { lat, lng })
+        )
+        geocodeByAddress('1 rue de la laine, Questembert')
+        .then(results => console.log(results))
+        .catch(error => console.error(error));
+    }
     
 
     
@@ -345,6 +438,7 @@ class Answer extends Component {
     render() {
         const { classes, user } = this.props
         const logoUrl = user.picture;
+        const { loading } = this.state;
         const inputProps = {
             value: this.state.address,
             onChange: this.onChange,
@@ -358,8 +452,8 @@ class Answer extends Component {
                         classes={{ img: classes.MuiAvatarImg }}
                         src={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentUrl + logoUrl} alt="candidatLogo" />}
 
-                    {!!user.pictureLoading && <Loader />}    
-                    {!!!user.pictureLoading && !!!logoUrl &&
+                    {/* {!!user.pictureLoading && <Loader />}     */}
+                    {/* {!!!user.pictureLoading && !!!logoUrl &&
                         (<Fragment><input
                             type="file" accept="image/*" capture="filesystem"
                             className={classes.input}
@@ -379,8 +473,8 @@ class Answer extends Component {
                                     <KeyboardArrowRightIcon className={classes.InputKeyboardArrowRightIcon} />
                                 </Button>
                             </label></Fragment>)
-                    }
-                    <Player fluid={false} width={450} 
+                    } */}
+                    <Player fluid={false} width={"75%"} height={350} 
                     playsInline className={classes.player} 
                      src={publicRuntimeConfig.symphonyUrl + "uploads/videos/"+this.state.mediaUrl}
                     //src={this.state.mediaUrl}
@@ -391,7 +485,7 @@ class Answer extends Component {
                         name="location"
                         label="Location"
                         onSuggestionSelected={this.onSuggestionSelected}
-                        textFieldProps={{ onChange: (e) => this.onChange(e), value: this.state.value, placeholder: 'Search for a place'}}
+                        textFieldProps={{ onChange: (e) => this.onChange(e), value: this.state.value, placeholder: 'Chercher votre adresse'}}
                         types={['(regions)']}
                         renderTarget={() => (<div />)}
                     /> */}
@@ -400,7 +494,7 @@ class Answer extends Component {
                     </Button>
                     <Dialog open={this.state.open} onEnter={console.log("Hey.")}>
                         <DialogTitle> Souhaitez-vous remplacer votre vidéo de réponse ?</DialogTitle>
-                        <DialogContent className={classes.popup}> Cette vidéo sera définitivement supprimée. Vous pourrez importer ou réaliser une nouvelle video de réponse. </DialogContent>
+                        <DialogContent className={classes.popup}> Cette vidéo et tous les éléments de votre candidature seront définitivement supprimés. Vous pourrez importer ou réaliser une nouvelle vidéo de réponse. </DialogContent>
                         <DialogActions>
                         
                         <Button onClick={this.closeDialog.bind(this)} autoFocus>
@@ -423,6 +517,9 @@ class Answer extends Component {
                         variant="outlined"
                         value={this.state.lastname}
                         onChange={this.handleChange}
+                        error={!!_.isEmpty(this.state.lastname)}
+                        helperText={!!_.isEmpty(this.state.lastname) && "Veuillez saisir votre nom"}
+                        required
                     />
 
                     <TextField
@@ -435,6 +532,8 @@ class Answer extends Component {
                         variant="outlined"
                         value={this.state.firstname}
                         onChange={this.handleChange}
+                        error={!!_.isEmpty(this.state.firstname)}
+                        helperText={!!_.isEmpty(this.state.firstname) && "Veuillez saisir votre prénom"}
                     />
 
                     <TextField
@@ -447,6 +546,7 @@ class Answer extends Component {
                         value={this.state.phone}
                         onChange={this.handleChange}
                         type="tel"
+                        helperText="Renseignez votre numéro de téléphone pour permettre au recruteur de vous contacter"
                     />
 
                     <TextField
@@ -470,6 +570,29 @@ class Answer extends Component {
                         onChange={this.handleChange}
                     />
 
+                    {this.AfficherSuccess()}
+                    <div className={classes.containerImport}>
+                        <input
+                            type="file" 
+                            accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .pdf, .odt"
+                            className={classes.input+' cypButtonImportVid'}
+                            style={{ display: 'none' }}
+                            id="import-button-file"
+                            onChange={this.inputFilesystemChange}
+                        />
+                        <label htmlFor="import-button-file">
+                            <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
+                            
+                            
+                            <GetApp className={classes.icon} /> Importer mon CV 
+                            
+                            
+                            </Button>
+
+                        </label>
+                        <Hidden>&nbsp;</Hidden>
+                        {this.AfficherLienCv()}
+                    </div>          
                     <TextField
                         name="linkedin"
                         id="outlined"
@@ -519,8 +642,12 @@ class Answer extends Component {
 function mapStateToProps(state, ownProps) {
     // console.log(state.media.message.heure);
     return {
+        user: state.user ,
+        cvLink : state.media.message,
+        loading: !!state.media.loading,
+        cv : true,
         user: state.user,
-        loading: !!state.user.loading,
+        // loading: !!state.user.loading,
         pictureLoading: !!state.user.pictureLoading,
         errors: state.user.errors || ownProps.errors,
         mediaId: state.media.message && state.media.message.mediaId,
@@ -533,4 +660,4 @@ function mapStateToProps(state, ownProps) {
     
 }
 
-export default withStyles(styles)(connect(mapStateToProps, { postAdAnswerRequest, updateUserRequest, updateUserPictureRequest })(Answer))
+export default withStyles(styles)(connect(mapStateToProps, { postAdAnswerRequest, updateUserRequest, updateUserPictureRequest, uploadMediaCv })(Answer))

nextjs/components/organisms/Header.js

@@ -41,6 +41,7 @@ import axios from 'axios';
 import setAuthorizationHeader from "../../data/setAuthorizationHeader";
 import getConfig from 'next/config'
 import Router from 'next/router'
+
 const styles = theme => ({
   root: {
     width: '100%',
@@ -302,11 +303,11 @@ class Header extends React.Component {
     left: false,
     bottom: false,
     right: false,
-    toggle: true
+    toggle: true,
+   
   };
 
 
-
   componentDidMount() {
 
   }
@@ -333,11 +334,20 @@ class Header extends React.Component {
     sessionStorage.setItem(type+'_currentPage',1);
 
   } 
+
+  redirectionrecruteur=(props) => {
+    console.log("redirection recruteur")
+     localStorage.removeItem("ttJWT");
+     //this.openDialog()
+     props.requestLogout();
+     window.location.href = "https://recruteur.talentstube.com/";
+  }
+  
   render() {
     const { classes } = this.props;
     const { publicRuntimeConfig } = getConfig();
-
-
+    console.log("user",this.props.user)
+    
     return (
       <div className={classes.root}>
         <Drawer anchor="left" open={this.state.left} onClose={this.toggleDrawer('left', false)}>
@@ -359,6 +369,7 @@ class Header extends React.Component {
 
                 <Divider />
                 <div className={classes.links}>
+                  {/* Menu Accueil /Offres Entreprises */}
                   <div className={classes.linkGroup}>
                     <ActiveLink activeClassName={classes.active} href="/"  >
                       <a className={classes.darkMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
@@ -398,6 +409,8 @@ class Header extends React.Component {
                     </a>
                     
                   </div>
+                  {/* FIN Menu Accueil /Offres Entreprises */}
+                  {/* Menu recruteur */}
                   <div>
                     {/* <div className={classes.blogLinkGroup}>
                       <a href={publicRuntimeConfig.blogUrl} className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
@@ -415,6 +428,7 @@ class Header extends React.Component {
                       </ListItem></a>
                     </div>
                   </div>
+                  {/* FIN Menu recruteur*/}
 
                 </div>
               </List>
@@ -429,9 +443,11 @@ class Header extends React.Component {
             role="button"
             onClick={this.toggleDrawer('right', false)}
             onKeyDown={this.toggleDrawer('right', false)}
-          >{!!this.props.loading &&
+          >
+            {!!this.props.loading &&
             (<Loader />
-            )}
+            )
+            }
             {!!!this.props.loading && !!!this.props.fetched
               &&
               <div className={classes.fullList + ' ' + classes.darkFullList}>
@@ -474,14 +490,16 @@ class Header extends React.Component {
                     </a>
                   </div>
                 </List>
-              </div>}
-            {!!!this.props.loading && !!this.props.fetched &&
+              </div>
+            }
+            {!!!this.props.loading && !!this.props.fetched && 
               <Fragment>
                 {this.props.user.picture ?
                   <img alt="talents-tube" src={publicRuntimeConfig.symphonyUrl +publicRuntimeConfig.postedContentUrl+ this.props.user.picture} className={classes.menuAvatar} />
                   :
                   <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={classes.menuAvatar} />
                 }
+                
                 <ListItem classes={{ root: classes.rootListItem }} className={classes.ListItemUserConnected}>
                   <Typography gutterBottom component="h1" className={classes.menuUserName}>
                     {this.props.user.firstname + " " + this.props.user.lastname}
@@ -494,29 +512,51 @@ class Header extends React.Component {
 
                 <Divider className={classes.darkDivider} />
 
-                {/* TODO:real links */}
-                <Link href="/Candidatures"  >
-                  <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                    <FolderSharedIcon className={classes.icon} />
-                    <ListItemText primary='Mes candidatures'>
-                    </ListItemText>
-                  </ListItem></a>
-                </Link>
-                <Link href="/profileStep"  >
-                <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                    <AccountCircleIcon className={classes.icon} />
-                    <ListItemText primary='Mon compte'>
-                    </ListItemText>
-                  </ListItem></a>
-                </Link>
-                
-                <Link href="/Parametres"  >
-                  <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                    <SettingsIcon className={classes.icon} />
-                    <ListItemText primary='Paramètres de notification'>
-                    </ListItemText>
-                  </ListItem></a>
-                </Link>
+                {this.props.user.type=="TALENT" 
+                  ? 
+                  <div>
+                    <Link href="/Candidatures"  >
+                      <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <FolderSharedIcon className={classes.icon} />
+                        <ListItemText primary='Mes candidatures'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                    <Link href="/profileStep"  >
+                      <a className={classes.lightMenuItem}>
+                        <ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <AccountCircleIcon className={classes.icon} />
+                        <ListItemText primary='Mon compte'>
+                        </ListItemText>
+                        </ListItem>
+                      </a>
+                    </Link>
+                    
+                    <Link href="/Parametres"  >
+                      <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <SettingsIcon className={classes.icon} />
+                        <ListItemText primary='Paramètres de notification'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                  </div>
+                  : 
+                    this.redirectionrecruteur(this.props)
+                    
+                    // <div>
+                    
+                    //   <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}>
+                    //     <ListItem classes={{ root: classes.rootListItemIcon }}>
+                    //     <SettingsIcon className={classes.icon} />
+                    //     <ListItemText primary='Espace recruteur'>
+                    //     </ListItemText>
+                    //   </ListItem></a>
+                    
+                    // </div>
+                  
+                }
+                  
+
                 <Link href="/" >
                   <a onClick={() => {
                     localStorage.removeItem("ttJWT");
@@ -608,7 +648,7 @@ class Header extends React.Component {
                         </Link>
                       </Fragment>
                     }
-                    {!!!this.props.loading && !!this.props.fetched &&
+                    {!!!this.props.loading && !!this.props.fetched  &&
                       <IconButton
                         edge="end"
                         aria-label="Profile"

nextjs/components/organisms/HeaderOffre.js

@@ -227,6 +227,9 @@ const styles = theme => ({
     justifyContent: 'space-between',
     padding: 0,
   },
+  appBar:{
+    position:'fixed'
+  },
   appBarDesktopSection: {
     display: 'flex',
     alignItems: 'center',
@@ -308,7 +311,13 @@ class Header extends React.Component {
     toggle: true
   };
 
-
+  redirectionrecruteur=(props) => {
+    console.log("redirection recruteur")
+     localStorage.removeItem("ttJWT");
+     //this.openDialog()
+     props.requestLogout();
+     window.location.href = "https://recruteur.talentstube.com/";
+  }
 
   componentDidMount() {
 
@@ -415,30 +424,51 @@ class Header extends React.Component {
                 </ListItem>
 
                 <Divider className={classes.darkDivider} />
+                {this.props.user.type=="TALENT" 
+                  ? 
+                  <div>
+                    <Link href="/Candidatures"  >
+                      <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <FolderSharedIcon className={classes.icon} />
+                        <ListItemText primary='Mes candidatures'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                    <Link href="/profileStep"  >
+                      <a className={classes.lightMenuItem}>
+                        <ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <AccountCircleIcon className={classes.icon} />
+                        <ListItemText primary='Mon compte'>
+                        </ListItemText>
+                        </ListItem>
+                      </a>
+                    </Link>
+                    
+                    <Link href="/Parametres"  >
+                      <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <SettingsIcon className={classes.icon} />
+                        <ListItemText primary='Paramètres de notification'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                  </div>
+                  : 
+                    this.redirectionrecruteur(this.props)
+                    
+                    // <div>
+                    
+                    //   <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}>
+                    //     <ListItem classes={{ root: classes.rootListItemIcon }}>
+                    //     <SettingsIcon className={classes.icon} />
+                    //     <ListItemText primary='Espace recruteur'>
+                    //     </ListItemText>
+                    //   </ListItem></a>
+                    
+                    // </div>
+                  
+                }
+                  
 
-                {/* TODO:real links */}
-                <Link href="/Candidatures"  >
-                  <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                    <FolderSharedIcon className={classes.icon} />
-                    <ListItemText primary='Mes candidatures'>
-                    </ListItemText>
-                  </ListItem></a>
-                </Link>
-                <Link href="/profileStep"  >
-                <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                    <AccountCircleIcon className={classes.icon} />
-                    <ListItemText primary='Mon compte'>
-                    </ListItemText>
-                  </ListItem></a>
-                </Link>
-                
-                <Link href="/Parametres"  >
-                  <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
-                    <SettingsIcon className={classes.icon} />
-                    <ListItemText primary='Paramètres de notification'>
-                    </ListItemText>
-                  </ListItem></a>
-                </Link>
                 <Link href="/" >
                   <a onClick={() => {
                     localStorage.removeItem("ttJWT");

nextjs/components/organisms/OffreDetail.js

@@ -53,9 +53,9 @@ const styles = theme => ({
         margin: theme.spacing(0, 0),
     },
     headerContainerMobile: {
-        display: 'flex',
-        top : '-20px',
-        marginLeft : '20px'
+        display: 'inline',
+        // top : '-20px',
+        // marginLeft : '20px'
         
     },
     headerContainerDesktop: {
@@ -88,7 +88,7 @@ const styles = theme => ({
     infoContainerMobile: {
         display: 'flex',
         flexDirection: 'column',
-        margin: theme.spacing(0, 1.5),
+        padding: '20px',
         '& a': {
             textDecoration: 'none',
             color: theme.palette.primary.dark,
@@ -119,16 +119,14 @@ const styles = theme => ({
         marginBottom: '10px'
     },
     IconTextContainerMobile: {
-        display: '',
         alignItems: 'center',
         // justifyContent: 'flex-start',
-        width: '100%',
+        
         borderTop: '1px solid #E8E8E9',
         borderBottom: '1px solid #E8E8E9',
-        paddingTop: '20px',
-        paddingBottom: '20px',
-        marginLeft:'20px',
-        marginRight:'20px'
+        padding: '20px',
+        
+
     },
     contentContainer: {
         display: 'flex',
@@ -138,6 +136,15 @@ const styles = theme => ({
         top:'40px',
         margin: theme.spacing(0, 1),
     },
+    contentContainerMobile: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        top:'100px',
+        paddingTop:'100px',
+        margin: theme.spacing(0, 1),
+    },
     tagsContainer: {
         display: 'flex',
         alignItems: 'center',
@@ -229,11 +236,10 @@ const styles = theme => ({
         backgroundColor: 'white'
     },
     stickyContainer:{
-        margin: '10px 0px',
+        // margin: '10px 0px',
         borderBottom: '1px solid #E8E8E9',
         marginBottom: '20px',
         paddingBottom: '5px',
-
     },
     stickySeparation:{
         
@@ -561,7 +567,7 @@ const styles = theme => ({
             fontSize: '1.5em',
             color: theme.palette.background.grey,
             position: 'absolute',
-            bottom: '60px',
+            bottom: '30px',
             left: '20px',
             color: '#1E2327',
             backgroundColor: '#fff',
@@ -571,14 +577,16 @@ const styles = theme => ({
 
         },
         playerTexteMobile: {
+            
             fontSize: '1em',
             fontWeight: '600',
             position: 'absolute',
-            bottom: '70px',
+            bottom: '43px',
             left: '80px',
             color: '#fff',
         },
         iconPlayBasMobile: {
+
             fontSize: '1.5em',
             color: theme.palette.background.grey,
             position: 'absolute',
@@ -745,11 +753,13 @@ function OffreDetail(props) {
     }
     //gestion du télétravail
     if(offre.extra.teletravail=='tele_occasionel'){
-        teletravail='Télétravail occasionel';
+        teletravail='Télétravail occasionnel';
     }else if(offre.extra.teletravail=='tele_partiel'){
         teletravail='Télétravail partiel';
     }else if(offre.extra.teletravail=='tele_total'){
         teletravail='Télétravail total';
+    }else{
+        teletravail=null;
     }
     
     const imgDefaultUrl = "/static/images/default/default_picture_company.svg"
@@ -836,7 +846,7 @@ function OffreDetail(props) {
             ></JobPosting>
             <Hidden smDown>
             {/* PARTIE DESKTOP */}   
-            <div style={{ width:'100%', justifyContent: 'center', display: 'flex', marginTop:'40px'  }}>
+            <div style={{ width:'100%', justifyContent: 'center', display: 'flex', marginTop:'100px'  }}>
                 <div style={{ width:'1200px' }}>
                     <div style={{  display: 'flex', alignItems: 'flex-start' }}>
                         <div style={{width:'67%' }}>
@@ -935,7 +945,7 @@ function OffreDetail(props) {
                         </div>
                         {/* PARTIE STICKY */}
                         
-                            <StickyBox style={{width:'33%', marginLeft:'40px', padding : '0 15px'}}>
+                            <StickyBox offsetTop={100} style={{width: '33%', marginLeft: '40px', padding: '0px 15px', position: 'sticky', top: '100px'}}>
                                      
                                     <section className={classes.stickyContainer}>
                                         <a href={entrepriseLink} className={classes.lien}>
@@ -999,12 +1009,12 @@ function OffreDetail(props) {
             </Hidden>                        
             {/* PARTIE MOBILE */}   
             <Hidden mdUp>
-                <section className={classes.contentContainer}>
+                <section className={classes.contentContainerMobile}>
                                             
                     <Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.video.cdn_url, '/'))}&type=Offre`} >   
                             <div className={classes.discoverContainerImage}>
                                 <img  src={isWidthUp('xs', props.width) ? imgUrlDesktopOffre : imgUrlOffre} alt={offre.company.brand_name && offre.company.brand_name} />
-                                <div className={classes.containerPoste}>
+                                <div >
                                 
                                     <Typography variant="h1" component="h1" gutterBottom className={classes.posteMobile}>
                                         {offre.title}  <br></br>
@@ -1020,7 +1030,7 @@ function OffreDetail(props) {
                         </Link>         
                 </section>
                 <section className={classes.headerContainerMobile}>
-                    <div >
+                    <div className={classes.infoContainerMobile}>
 
                         <a href={entrepriseLink} className={classes.lien}>
                             <Avatar className={classes.logoMobile} classes={{ img: classes.MuiAvatarImg }}
@@ -1029,7 +1039,7 @@ function OffreDetail(props) {
 
                     </div>
                     <div className={classes.infoContainerMobile}>
-                        <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
+                        <Typography gutterBottom variant="h4" component="h4" className={classes.title}>
                             {offre.title}
                         </Typography>
                         <a href={entrepriseLink}  className={classes.lien}>
@@ -1039,6 +1049,7 @@ function OffreDetail(props) {
                         </a>
                         {/* ville */}
                     </div>
+                    
                 </section>
                 <section className={classes.IconTextContainerMobile}>
                     {offre.is_promoted && (<Chip label="Offre pourvue" className={classes.chip} />)}

nextjs/components/organisms/Register.js

@@ -10,6 +10,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import { withStyles } from '@material-ui/core/styles';
 import { registerUserRequest, subscribeToNewsletterRequest } from "../../actions/user"
 import SocialButtonsAuth from '../atoms/SocialButtonsAuth';
+import Snack from '../atoms/snack'
 
 const styles = theme => ({
     container: {
@@ -121,7 +122,8 @@ class Register extends React.Component {
             checkCGU:null
         },
         loading: false,
-        showPassword: false
+        showPassword: false,
+        passwordValid : false
     }
 
     validate = data => {
@@ -132,6 +134,10 @@ class Register extends React.Component {
         if (!!!data.lastname) errors.lastname = "Requis";
         if (!data.checkCGU) errors.checkCGU = "Requis";
         
+        if(data.password.length <8){
+            errors.password = "Too short";
+        }
+        
         return errors;
     };
     
@@ -143,16 +149,13 @@ class Register extends React.Component {
 
     onRegister = e => {
         e.preventDefault();
-        
-        
-        const errors = this.validate(this.state.data);
-
+        let errors = this.validate(this.state.data);
         this.setState({ errors: errors });
-        console.log('adId')
-        console.log(this.state.data)
+        // console.log('adId')
+        // console.log(this.state.data)
         if (Object.keys(errors).length === 0) {
 
-            this.props.registerUserRequest(this.state.data)
+            console.log(this.props.registerUserRequest(this.state.data))
 
             if (this.state.data.checkNewsletter)
                 this.props.subscribeToNewsletterRequest({ email: this.state.data.email })
@@ -166,10 +169,12 @@ class Register extends React.Component {
             loading: nextProps.loading
         })
     }
-    onChange = e =>
+    onChange = e => {
+
         this.setState({
             data: { ...this.state.data, [e.target.name]: e.target.value }
         });
+    }
     handleCheckBoxChange = name => event => {
         this.setState({ data: { ...this.state.data, [name]: event.target.checked } });
     };
@@ -183,7 +188,7 @@ class Register extends React.Component {
     };
 
     render() {
-        const { classes } = this.props;
+        const { classes, erreurs } = this.props;
         const { data, errors } = this.state;
 
         return (
@@ -192,6 +197,7 @@ class Register extends React.Component {
                 <form className={classes.form}>
 
                     <TextField
+                        className={classes.champ}
                         value={data.lastname}
                         onChange={this.onChange}
                         id="nom"
@@ -201,6 +207,7 @@ class Register extends React.Component {
                         variant="outlined"
                         required
                         error={!!errors.lastname}
+                        helperText={!!errors.lastname && "Veuillez saisir votre nom."}
                     />
                     <TextField
                         value={data.firstname}
@@ -212,6 +219,7 @@ class Register extends React.Component {
                         variant="outlined"
                         required
                         error={!!errors.firstname}
+                        helperText={!!errors.firstname && "Veuillez saisir votre prénom."}
                     />
 
                     <TextField
@@ -224,8 +232,9 @@ class Register extends React.Component {
                         type="email"
                         variant="outlined"
                         required
-                        error={!!errors.email}
+                        error={!!errors.email || !!erreurs}
                         autoComplete="username email"
+                        helperText={!!errors.email  ? "Saisissez une adresse e-mail valide." : !!erreurs && erreurs}
                     />
 
 
@@ -240,6 +249,7 @@ class Register extends React.Component {
                         value={this.state.password}
                         onChange={this.onChange}
                         error={!!errors.password}
+                        helperText={!!errors.password && "Votre mot de passe doit contenir au minimum 8 caractères."}
                         InputProps={{
                             endAdornment: (
                                 <InputAdornment position="end">
@@ -283,6 +293,7 @@ class Register extends React.Component {
                         label="Je déclare avoir pris connaissance et accepte les termes et les CGU *"
                         required
                     />
+                    <Link href={`/Cgu`} >Lien vers les CGU</Link>
                     <Button type="submit" variant="contained" className={classes.button + ' ' + classes.buttonImportant + ' cypButtonRegister'} onClick={this.onRegister}>
                         S'inscrire
                     </Button>
@@ -310,7 +321,12 @@ class Register extends React.Component {
                         </Link>
                     </Typography>
                 </div>
+                <Snack name= 'snackWarning'
+                    variant= 'warning'
+                    message={errors.message}
+                    />
             </div>
+
         );
     }
 }

nextjs/components/templates/LayoutBack.js

@@ -4,6 +4,7 @@ import RootContainer from '../atoms/RootContainer'
 import ButtonBase from "@material-ui/core/ButtonBase";
 import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import Typography from '@material-ui/core/Typography';
+import { Hidden } from '@material-ui/core';
 
 const styles = theme => ({
   inner: {
@@ -54,6 +55,13 @@ const styles = theme => ({
     position: 'absolute',
     left: theme.spacing(1),
   },
+  retour:{
+    fontFamily: 'Roboto',
+    color: '#1E2327',
+    fontSize: '0.8rem',
+    fontWeight: '500',
+
+  }
 });
 
 function LayoutBack(props) {
@@ -72,6 +80,8 @@ function LayoutBack(props) {
             focusVisibleClassName={classes.focusVisible}
             onClick={() => Router.back()}>
             <ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
+            {/* <Hidden mdUp className={classes.retour}></Hidden> */}
+            <Hidden smDown className={classes.retour}>Retour</Hidden>
           </ButtonBase>
           <Typography
             component="h1"

nextjs/components/templates/LayoutOffre.js

@@ -85,9 +85,9 @@ const styles = theme => ({
 
 function LayoutOffre(props) {
 
-  const { classes, offreId, offre, isProvided, socialShareUrl } = props;
+  const { classes, offreId, offre, isProvided } = props;
   const contentClass = (!isProvided) ? classes.contentDefault : classes.contentProvided
-
+  const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Offre/${offreId}-${_.kebabCase(offre.title)}`;
   return (
     <RootContainer>
       {isWidthUp('xs', props.width) ?

nextjs/next.config.js

@@ -55,7 +55,7 @@ module.exports = withPlugins(
         blogUrl: 'https://blog.talentstube.com',
         frontServerUrl: 'https://pp.app.talentstube.com/',
         cvThequeUrl: 'https://recruteur.talentstube.com',
-        version : 'V2.3.6',
+        version : 'V2.4.2',
         adListDefaultUrl: '/statique/images/default/default_picture_company.svg',
         cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
         postedContentUrl: '/uploads/img/',

nextjs/package.json

@@ -51,6 +51,7 @@
     "react-ad-block-detect": "^1.0.1",
     "react-autosuggest": "^10.0.2",
     "react-dom": "^16.9.0",
+    "react-facebook-login": "^4.1.1",
     "react-ga": "^2.5.7",
     "react-google-recaptcha": "^2.0.1",
     "react-html-parser": "^2.0.2",

nextjs/pages/ConfirmAccount.js

@@ -25,8 +25,8 @@ const styles = theme => ({
         bottom: 0,
     },
     title: {
-        fontFamily: 'Dosis',
-        fontSize: '1.5em',
+        fontFamily: 'Roboto',
+        fontSize: '1.625em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),
     },
@@ -47,6 +47,24 @@ const styles = theme => ({
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
     },
+    iconButton:{
+        marginTop: "50px",
+
+        [theme.breakpoints.down('md')]: {
+            marginTop: "50px",
+            
+        },
+    },
+    texteEtape:{
+        fontSize: '1em',
+        fontWeight: '300',
+    },
+    etape:{
+        fontSize: '1em',
+        fontWeight: '500',
+        color:'#1689FB',
+
+    }
 })
 
 
@@ -69,7 +87,7 @@ class ConfirmAccount extends Component {
         const { classes } = this.props
         const { loading } = this.state
         return (
-            <LayoutBack text="Validation" height="fixed">
+            <LayoutBack text="Inscription" height="fixed">
             <Head>
                 <title key="title">Confirmation de compte</title>
                 <meta key="robots" name="robots" content="noindex, nofollow"></meta>
@@ -80,26 +98,45 @@ class ConfirmAccount extends Component {
                     )}
                     {!loading && (
                         <Fragment>
+                            <img
+                            alt="talents-tube"
+                            src='/statique/images/inscription/validation-plateforme-recrutement-video.svg'
+                            className={classes.iconButton}/>
                             <Typography gutterBottom align="center" className={classes.title}>
-                                e-mail validé
+                                Bienvenue sur Talents Tube
                             </Typography>
-                            <Typography gutterBottom align="left" className={classes.text}>
-                                Votre email a bien été validé. 
+                            <Typography gutterBottom align="center" className={classes.etape}>
+                                Étape 1. 
+                            </Typography>
+                            <Typography gutterBottom align="center" className={classes.texteEtape}>
+                                Découvrez les entreprises et les offres d’emploi en vidéo. 
+                            </Typography>
+                            <Typography gutterBottom align="center" className={classes.etape}>
+                                Étape 2. 
+                            </Typography>
+                            <Typography gutterBottom align="center" className={classes.texteEtape}>
+                                Postulez en vidéo. 
+                            </Typography>
+                            <Typography gutterBottom align="center" className={classes.etape}>
+                                Étape 3. 
+                            </Typography>
+                            <Typography gutterBottom align="center" className={classes.texteEtape}>
+                            Gérez vos candidatures depuis votre compte Talent. 
+                            </Typography>
+                            
+                            <Typography gutterBottom align="center" className={classes.text}>
                                 
-                            </Typography>
-                            <Typography gutterBottom align="left" className={classes.text}>
-                                Vous pouvez maintenant vous connecter.
                                 <Button
                                     variant="contained"
                                     className={classes.button}
                                     classes={{ root: classes.rootButton }}
                                     onClick={() => Router.push('/Login')}
                                 >
-                                    Connexion
+                                    Se connecter
                                 </Button>
 
                             </Typography>
-                            <section className={classes.bottomContainer}>
+                            {/* <section className={classes.bottomContainer}>
                                 <Button
                                     variant="contained"
                                     className={classes.button}
@@ -108,7 +145,7 @@ class ConfirmAccount extends Component {
                                 >
                                     Connexion
                             </Button>
-                            </section>
+                            </section> */}
                         </Fragment>
                     )}
                 </div>

nextjs/pages/Entreprise.js

@@ -26,6 +26,7 @@ import withWidth from '@material-ui/core/withWidth'
 import Hidden from '@material-ui/core/Hidden';
 import NoResult from '../components/atoms/NoResult';
 import OgHead from '../components/atoms/OgHead';
+
 const renderLoader = () => <p>Chargement</p>;
 const styles = theme => ({
     companyContainer: {
@@ -285,6 +286,8 @@ const styles = theme => ({
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
         alignSelf: 'center',
+        textDecoration:'none',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     },
     voirOffre: {
         textTransform: 'inherit',
@@ -353,13 +356,13 @@ const CustomTableBody = ({ rowIds, Row, style, className }) => (
 );
 
 const { publicRuntimeConfig } = getConfig()
-
 class Entreprise extends React.Component {
     state = {
         loading: true,
     };
 
     componentDidMount() {
+        localStorage.setItem('loginRedirect', window.location.pathname)
         this.props.countCompanyViewRequest(this.props.company.id);
     }
 
@@ -528,11 +531,18 @@ class Entreprise extends React.Component {
                                 </SimpleCollapse>
 
                                 <div className={classes.shareContainer}>
-                                    <Button
+                                    {/* <Button
                                         variant="contained"
                                         className={classes.button}
                                         onClick={() => Router.push(`/Reponse?companyId=${company.id}`)}
-                                    >Candidature spontanée</Button>
+                                    >Candidature spontanée</Button> */}
+                                    <a
+                                    href={`/Reponse?companyId=${company.id}`}
+                                    variant="contained"
+                                    className={classes.button}
+                                    classes={{ root: classes.rootButton }}
+                                    // onClick={() => Router.push(`/Reponse?companyId=${companyId}`)}
+                                    >Candidature spontanée</a>
                                     
                                     <Typography className={classes.contentCondition}>
                                         ou

nextjs/pages/Inscription.js

@@ -146,12 +146,21 @@ class LoginPage extends React.Component {
             email: "",
             password: ""
         },
-        errors: {},
+        errors: { message: "" },
         loading: false,
         tabIndex: 0,
-        openSnack: false
+        openSnack: false,
+        success: false,
     };
+    UNSAFE_componentWillReceiveProps(nextProps) {
 
+        this.setState({
+            errors: !!!nextProps.errors ? { errors: { message: "" } } : nextProps.errors,
+            loading: nextProps.loading,
+            success: nextProps.success,
+            openSnack: !_.isEmpty(nextProps.errors) || nextProps.success
+        })
+    }
     static getInitialProps({ query }) {
         const { error, inscription } = query
         let err = null;
@@ -160,9 +169,10 @@ class LoginPage extends React.Component {
         return { errors: err, openSnack: !!error, inscription };
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        
-    }
+    handleClose = e =>
+        this.setState({
+            openSnack: false
+        });
 
     componentDidMount() {
         
@@ -206,12 +216,12 @@ class LoginPage extends React.Component {
 
     render() {
         const { classes } = this.props;
-        const { data, errors, loading, openSnack } = this.state;
+        const { data,success, errors, loading, openSnack } = this.state;
 
         return (
             <Layout>
                 <Head>
-                    <title key="title">Login</title>
+                    <title key="title">Inscription</title>
                     <meta key="robots" name="robots" content="noindex, follow"></meta>
                 </Head>
                 <div className={classes.container}>
@@ -227,14 +237,17 @@ class LoginPage extends React.Component {
                            
 
                                 
-                                    <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} />
+                                    <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} erreurs={errors.message} />
                                 
                             
                         </Fragment>
                     )}
                 </div>
-                <Snack variant="error" message={!!!_.isEmpty(this.state.errors) && this.state.errors.message}
-                    openSnack={this.state.openSnack} onClose={this.handleClose} />
+                {/* <Snack name={success ? 'snackSuccess' : 'snackWarning'}
+                    variant={success ? 'success' : 'warning'}
+                    message={success ? 'Inscription validée.' : errors.message}
+                    openSnack={openSnack}
+                    onClose={this.handleClose} /> */}
             </Layout>
         );
     }

nextjs/pages/Login.js

@@ -23,6 +23,7 @@ import jssPluginPropsSort from 'jss-plugin-props-sort';
 import Head from 'next/head'
 import ReCAPTCHA from "react-google-recaptcha";
 import getConfig from 'next/config'
+import FacebookLogin from 'react-facebook-login';
 const {publicRuntimeConfig} = getConfig()
 
 function TabContainer({ children, dir }) {
@@ -230,11 +231,14 @@ class LoginPage extends React.Component {
     handleClose = (event, reason) => {
         this.setState({ openSnack: false });
     }
+    responseFacebook = (response) => {
+        console.log(response);
+      }
 
     render() {
         const { classes } = this.props;
         const { data, errors, loading, openSnack } = this.state;
-
+        
         return (
             <Layout>
                 <Head>
@@ -280,7 +284,7 @@ class LoginPage extends React.Component {
                                                 onChange={this.onChange}
                                                 autoComplete="username"
                                                 variant="outlined"
-                                                error={this.state.errors && !!this.state.errors.email}
+                                                error={!!!_.isEmpty(this.state.errors)  || (this.state.errors && !!this.state.errors.email)}
                                                 className={'cypInputEmail'}
                                                 required
 
@@ -298,11 +302,19 @@ class LoginPage extends React.Component {
                                                 autoComplete="current-password"
                                                 variant="outlined"
                                                 className={'cypInputPassword'}
+                                                error={!!!_.isEmpty(this.state.errors)}
+                                                helperText={!!!_.isEmpty(this.state.errors) && this.state.errors.message}
                                                 required
                                             />
                                             <Button type="submit" variant="contained" className={classes.button + ' ' + classes.buttonImportant + ' cypButtonConnexion'}>
                                                 Se connecter
-                                        </Button>
+                                            </Button>
+                                            {/* <FacebookLogin
+                                            appId="1800752833559014"
+                                            autoLoad={true}
+                                            fields="name,email,picture"
+                                            textButton ="Connexion Facebook"
+                                            callback={this.responseFacebook} /> */}
                                             <ReCAPTCHA
                                                 id="component-outlined"
                                                 ref={recaptchaRef}
@@ -361,8 +373,8 @@ class LoginPage extends React.Component {
                         </Fragment>
                     )}
                 </div>
-                <Snack variant="error" message={!!!_.isEmpty(this.state.errors) && this.state.errors.message}
-                    openSnack={this.state.openSnack} onClose={this.handleClose} />
+                {/* <Snack variant="error" message={!!!_.isEmpty(this.state.errors) && this.state.errors.message}
+                    openSnack={this.state.openSnack} onClose={this.handleClose} /> */}
             </Layout>
         );
     }

nextjs/pages/Reponse.js

@@ -36,9 +36,9 @@ const styles = theme => ({
   },
   rootStepperContainer: {
     padding: theme.spacing(2, 12),
-    width: '25vw',
+    width: '50vw',
     [theme.breakpoints.up('md')]: {
-      width: '7vw',
+      width: '25vw',
       alignItems: 'center',
     },
     '& .MuiStep-horizontal, & .MuiStepLabel-iconContainer': {
@@ -48,11 +48,30 @@ const styles = theme => ({
       },
     },
     '& .Mui-disabled .MuiStepConnector-line': {
-      borderColor: theme.palette.answer.main + '!important',
+      borderColor:  'd2d3d3 !important',
     },
     '& .Mui-disabled .MuiStepIcon-root': {
       color: theme.palette.answer.main + '!important',
     },
+    '& .MuiStepIcon-root': {
+      color:  '#1689FB !important',
+    },
+    '& .MuiTypography-root ': {
+      color:  '#1e2327 !important',
+    },
+    
+  },
+  stepContainer:{
+    width:'600px',
+    alignItems: 'center',
+    textAlign: 'center',
+    align: 'center',
+  },
+  stepLabel:{
+    // width:'150px',
+    // display:'inline',
+    // alignItems: 'center',
+    // align: 'center',
   },
   rootStepperDefault: {
     '& .MuiStepConnector-line': {
@@ -75,15 +94,29 @@ const styles = theme => ({
     flexDirection: 'column',
     padding: theme.spacing(0, 1.5),
   },
+  titreContainer: {
+    backgroundColor: '#fff',
+    borderRadius: '5px',
+    maxWidth:'600px',
+    boxShadow: '0px 6px 16px rgba(30, 35, 39, 0.15)',
+    display: 'flex',
+    padding: '25px',
+    margin: '40px 0 20px 0',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+
+  },
   logoContainer: {
     display: 'flex',
     alignItems: 'center',
-    width: 60,
-    height: 60,
+    width: 75,
+    height: 75,
     backgroundColor: 'white',
     boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
     border: 'solid 5px white',
     borderRadius: '6px',
+    marginLeft:'30px',
+
   },
   recorderContainer: {
     //display: 'flex',
@@ -107,11 +140,11 @@ const styles = theme => ({
     objectFit: 'contain',
   },
   title: {
-    fontSize: '1em',
+    fontSize: '1.25em',
     fontWeight: '500',
   },
   companyName: {
-    fontSize: '0.9em',
+    fontSize: '1em',
     fontWeight: '300',
   },
   textContainer: {
@@ -147,6 +180,12 @@ const styles = theme => ({
     fontSize: '1.15em',
     paddingLeft: theme.spacing(2),
   },
+  textButtonReponse: {
+    fontWeight: '700',
+    fontSize: '1.15em',
+    paddingLeft: theme.spacing(2),
+    color:'#1e2327',
+  },
   iconHelpButton: {
     fontSize: '1.5em',
     fontWeight: '500',
@@ -167,6 +206,7 @@ const styles = theme => ({
   },
 
   captureButton: {
+    width:400,
     color: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.main,
     padding: theme.spacing(5, 2),
@@ -177,6 +217,7 @@ const styles = theme => ({
     },
   },
   importButton: {
+    width:400,
     color: theme.palette.primary.main,
     backgroundColor: theme.palette.secondary.main,
     padding: theme.spacing(3, 2),
@@ -198,9 +239,13 @@ const styles = theme => ({
     fontSize: '2.5em',
     color: theme.palette.primary.main,
   },
+  InputKeyboardArrowDownIconNoir: {
+    fontSize: '2.5em',
+    color: '#1e2327',
+  },
 });
 
-const steps = ["", ""]
+const steps = ["Réaliser une vidéo de réponse",  "Renseigner mes informations"]
 
 const Recorder = dynamic(() => import('../components/organisms/Recorder'), {
   ssr: false
@@ -214,6 +259,7 @@ class Reponse extends React.Component {
     data:{},
     openSnack: false,
     errors: {},
+    openStudio : false
   };
 
   componentDidMount() {
@@ -269,6 +315,16 @@ class Reponse extends React.Component {
       this.setState({ openSnack: false });
   }
 
+  realise =() =>{
+    console.log("realise");
+    this.setState({ openStudio: true});
+  }
+
+  retour =() =>{
+    console.log("retour");
+    this.setState({ openStudio: false});
+  }
+
   render() {
     const { loading, activeStep } = this.state;
     const { classes, menu, offre, company } = this.props;
@@ -296,23 +352,25 @@ class Reponse extends React.Component {
         <section className={classes.headerContainer}>
          { !!offre.company && (
          
-         <Fragment>
-           <div className={classes.logoContainer}>
-            <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoUrl}  alt="companylogo"/>
-          </div>
-          <div className={classes.infoContainer}>
-            <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
-              {!!offre.title? offre.title: ''}
-            </Typography>
-            <Typography gutterBottom variant="subtitle1" className={classes.companyName}>
-              {!!offre.company.brand_name? offre.company.brand_name: ''}
-            </Typography>
-            {/* ville */}
-          </div>
-          </Fragment>)
+        
+           <div className={classes.titreContainer}>
+              <div className={classes.logoContainer}>
+                <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoUrl}  alt="companylogo"/>
+              </div>
+              <div className={classes.infoContainer}>
+                <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
+                  {!!offre.title? offre.title: ''}
+                </Typography>
+                <Typography gutterBottom variant="subtitle1" className={classes.companyName}>
+                  {!!offre.company.brand_name? offre.company.brand_name: ''}
+                </Typography>
+                {/* ville */}
+              </div>
+            </div>
+          )
           }
           { !!company.brand_name && (<Fragment><div className={classes.logoContainer}>
-            <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoCompanyUrl} alt="companylogo"/>
+            {/* <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoCompanyUrl} alt="companylogo"/> */}
           </div>
           <div className={classes.infoContainer}>
             <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
@@ -326,86 +384,126 @@ class Reponse extends React.Component {
           }
 
         </section>
-
-        <Stepper activeStep={activeStep} classes={{ root: rootStepper }} className={classes.rootStepperContainer}>
+        <section className={classes.headerContainer}>  
+        <Stepper activeStep={activeStep} classes={{ root: rootStepper }} className={classes.rootStepperContainer} alternativeLabel>
           {steps.map((label, index) => {
             return (
-              <Step key={label} >
-                <StepLabel>{label}</StepLabel>
+              <Step className={classes.stepContainer} key={index} >
+                <StepLabel className={classes.stepLabel}>{label}</StepLabel>
               </Step>
             );
           })}
         </Stepper>
+        </section>
         {loading ? ( <Loader />)
         : activeStep === 0 ? 
         (
           <div className={classes.root}>
-
-            <div className={classes.textContainer}>
-              <Typography gutterBottom align="center">
-              Vous allez postuler en <span>vidéo</span> !
-              </Typography>
-              <Typography gutterBottom align="center">
-                C'est <span>simple</span>,<span> rapide</span> et <span>plus humain</span>
-              </Typography>    
-            </div>
-
-            <div className={ classes.helpContainer}>
-              <Button component="span" className={classes.helpButton} classes={{ root: classes.rootButton }} onClick={() => Router.push(`/Conseils`)}> 
-              <Typography align="center" className={classes.textButton}>
-                Par <span className={classes.underlined}>ici</span> pour quelques conseils !               
-              </Typography>
-              <KeyboardArrowRightIcon className={ classes.HelpKeyboardArrowRightIcon }/>
-              </Button>
-              </div>
-    { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
-             (
-            <Fragment>
-              <input
-                type="file" accept="video/*" capture="camcorder"
-                className={classes.input}
-                style={{ display: 'none' }}
-                id="record-button-file"
-                multiple
-                onChange={this.inputCamRecorderChange}
-              />
-              <label htmlFor="record-button-file">
-                <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
-                  <img alt="talents-tube" src='/static/images/capture.svg' className={classes.iconButton} />
-                  <Typography align="left" className={classes.textButton}>
-                    Je <span className={classes.underlined}>réalise</span> ma vidéo de réponse
+            {this.state.openStudio == false &&
+            <div>
+              {/* <div className={classes.textContainer}>
+                <Typography gutterBottom align="center">
+                Vous allez postuler en <span>vidéo</span> !
                 </Typography>
-                <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                <Typography gutterBottom align="center">
+                  C'est <span>simple</span>,<span> rapide</span> et <span>plus humain</span>
+                </Typography>    
+              </div> */}
+
+              {/* <div className={ classes.helpContainer}>
+                <Button component="span" className={classes.helpButton} classes={{ root: classes.rootButton }} onClick={() => Router.push(`/Conseils`)}> 
+                <Typography align="center" className={classes.textButton}>
+                  Par <span className={classes.underlined}>ici</span> pour quelques conseils !               
+                </Typography>
+                <KeyboardArrowRightIcon className={ classes.HelpKeyboardArrowRightIcon }/>
                 </Button>
-              </label>
-            </Fragment>
+              </div> */}
+            </div>
+            }
+            {/* Soit on affiche le module Web RTC soit on affiche un module de camrecorder */}
+            { /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)  ?
+            (
+              <Fragment>
+                <input
+                  type="file" accept="video/*" capture="camcorder"
+                  className={classes.input}
+                  style={{ display: 'none' }}
+                  id="record-button-file"
+                  multiple
+                  onChange={this.inputCamRecorderChange}
+                />
+                <label htmlFor="record-button-file">
+                  <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }}>
+                    <img alt="talents-tube" src='/statique/images/capture.svg' className={classes.iconButton} />
+                    <Typography align="left" className={classes.textButton}>
+                      Je <span className={classes.underlined}>réalise</span> ma vidéo de réponse
+                  </Typography>
+                  <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                  </Button>
+                </label>
+              </Fragment>
             ):
             (
-              <div className={classes.recorderContainer}>
-                <Recorder uploader={this.props.uploadMedia} />
-              </div>
+              <Fragment>
+                  
+                {this.state.openStudio == false ?
+                  <Button component="span" className={classes.captureButton} classes={{ root: classes.rootButton }} onClick={this.realise}>
+                    <img alt="talents-tube" src='/statique/images/capture.svg' className={classes.iconButton} />
+                    <Typography align="left" className={classes.textButton}>
+                      Je <span className={classes.underlined}>réalise</span> ma vidéo de réponse
+                  </Typography>
+                  <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                  </Button>
+                :
+                  <div className={classes.recorderContainer}>
+                    <Button onClick={this.retour}>Retour au menu</Button>
+                   <Recorder uploader={this.props.uploadMedia} />
+                   
+                  </div>
+                  
+                }
+              </Fragment>
+              // <div className={classes.recorderContainer}>
+              //   <Recorder uploader={this.props.uploadMedia} />
+              // </div>
             )
             }
-        
-            <input
-              type="file" 
-              accept="video/*" 
-              className={classes.input+' cypButtonImportVid'}
-              style={{ display: 'none' }}
-              id="import-button-file"
-              onChange={this.inputFilesystemChange}
-            />
-            <label htmlFor="import-button-file">
-              <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
-                <img alt="talents-tube" src='/static/images/import.svg' className={classes.iconButton} />
-                <Typography align="left" className={classes.textButton}>
-                  J'<span className={classes.underlined}>importe</span> ma vidéo de réponse
-                  
-              </Typography>
-              <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
-              </Button>
-            </label>
-            
+            {this.state.openStudio == false ?
+              <div>
+                <div>
+                  <input
+                  type="file" 
+                  accept="video/*" 
+                  className={classes.input+' cypButtonImportVid'}
+                  style={{ display: 'none' }}
+                  id="import-button-file"
+                  onChange={this.inputFilesystemChange}
+                  />
+                  <label htmlFor="import-button-file">
+                  <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
+                    <img alt="talents-tube" src='/statique/images/Import.svg' className={classes.iconButton} />
+                    <Typography align="left" className={classes.textButton}>
+                      J'<span className={classes.underlined}>importe</span> ma vidéo de réponse
+                      
+                  </Typography>
+                  <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
+                  </Button>
+                  </label>
+                </div>
+                <div>
+                  <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }} onClick={() => Router.push(`/Conseils`)}>
+                    <img alt="talents-tube" src='/statique/images/comment-faire-une-video-reponse.svg' className={classes.iconButton} />
+                    <Typography align="left" className={classes.textButtonReponse}>
+                      Comment faire ma vidéo de réponse
+                      
+                  </Typography>
+                  <KeyboardArrowRightIcon className={ classes. InputKeyboardArrowDownIconNoir }/>
+                  </Button>
+                </div>
+              </div>
+            :
+            <div></div>
+            }
           </div>
         ) :
           (

nextjs/pages/VerifyEmail.js

@@ -5,8 +5,15 @@ import Typography from '@material-ui/core/Typography'
 import Button from '@material-ui/core/Button';
 import Router from 'next/router';
 import Head from 'next/head'
-
+import { TextField } from '@material-ui/core';
 const styles = theme => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        margin: theme.spacing(1),
+      },
     container: {
         display: 'flex',
         flexDirection: 'column',
@@ -24,33 +31,74 @@ const styles = theme => ({
         width: '100%',
     },
     title: {
-        fontFamily: 'Dosis',
-        fontSize: '1.5em',
+        fontFamily: 'Roboto',
+        fontSize: '1.625em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),
     },
     text: {
+        fontFamily: 'Roboto',
+        width:"400px",
         fontSize: '1em',
         fontWeight: '300',
         padding: theme.spacing(1, 0),
     },
+    textSpam:{
+        fontFamily: 'Roboto',
+        width:"400px",
+        fontSize: "1em",
+        fontWeight: "500",
+        padding: theme.spacing(1, 0),
+    },
     email: {
         fontWeight: '500',
     },
     bottomText: {
         fontWeight: '500',
     },
+
+    iconButton:{
+        marginTop: "50px",
+
+        [theme.breakpoints.down('md')]: {
+            marginTop: "50px",
+            
+        },
+    },
+    textContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+
+    },
+    notUnderline:{
+        textDecoration :'none'
+    },
+    rootButton: {
+        '&:hover': {
+          backgroundColor: theme.palette.primary.important + '!important',
+        },
+      },
     button: {
         textTransform: 'inherit',
+        marginLeft: theme.spacing(8),
+        marginRight: theme.spacing(8),
         marginTop: theme.spacing(4),
         marginBottom: theme.spacing(2),
-        marginRight: 'auto',
-        marginLeft: 'auto',
-        padding: theme.spacing(1.2, 1),
+        padding: theme.spacing(1.2, 2),
         borderRadius: '3px',
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.important,
+        [theme.breakpoints.up('sm')]: {
+            margin: 'auto',
+        },
     },
+    buttonImportant: {
+        marginTop: theme.spacing(6),
+    },
+      champEmail:{
+          width:'400px'
+      }
 
 });
 class VerifyEmail extends Component {
@@ -62,20 +110,48 @@ class VerifyEmail extends Component {
                     <title key="title">Vérification d'email</title>
                     <meta key="robots" name="robots" content="noindex, nofollow"></meta>
                 </Head>
-                <div className={classes.container}>
-                    <Typography gutterBottom align="center" className={classes.title}>
-                        Consultez vos e-mails
-                    </Typography>
-                    <Typography gutterBottom align="left" className={classes.text}>
-                        Un e-mail a été envoyé à l'adresse <span className={classes.email}>{email}</span>
-                    </Typography>
-                    <Typography gutterBottom align="left" className={classes.text}>
-                        Cliquez sur le lien dans l'e-mail que nous vous avons envoyé pour activer votre compte.
-                    </Typography>
-                    <Typography gutterBottom align="left" className={classes.text}>
-                    N'oubliez pas de consulter vos spams, si vous ne trouvez pas le lien d'activation dans votre boite de réception.
-                    </Typography>
+                <div className={classes.root}>
+                    <div className={classes.textContainer}>
+                        <img
+                            alt="talents-tube"
+                            src='/statique/images/inscription/inscription-plateforme-recrutement-video.svg'
+                            className={classes.iconButton}/>
+                        <Typography gutterBottom align="center" className={classes.title}>
+                            Consultez vos e-mails 
+                        </Typography>
+                        <Typography gutterBottom align="left" className={classes.text}>
+                            Cliquez sur le lien dans l’email que nous vous avons envoyé pour activer votre compte Talent. Vous pourrez ensuite vous connecter.
+
+                        </Typography>
+                        <TextField
+                        value={email}
+                        className={classes.champEmail}
+                        id="emailVerif"
+                        name="emailVerif"
+                        label="Email"
+                        margin="normal"
+                        variant="outlined"
+                        InputProps={{
+                            readOnly: true,
+                          }}
+                        
+                        />
+                        <Typography  align="center" className={classes.textSpam}>
+                        Vous n'avez pas reçu l'email ? Pensez à consulter vos spams
+                        </Typography>
+                        <a
+                        href={`/Login`}
+                        variant="contained"
+                        className={classes.notUnderline}
+                        
+                        >
+                            <Button variant="contained" className={classes.button + ' ' + classes.buttonImportant + ' cypButtonConnexion'}>
+                                                    Se connecter
+                            </Button>
+                        </a>
+                    </div>
                     <section className={classes.bottomContainer}>
+                        
                         {/* <Typography gutterBottom align="center" className={classes.bottomText}>
                             Cliquez sur suivant pour continuer votre candidature
                         </Typography>

nextjs/pages/_document.js

@@ -34,7 +34,7 @@ class MyDocument extends Document {
 
           <link href="https://fonts.googleapis.com/css?family=Dosis:600|Roboto:200,300,400,500,700,900&display=swap" rel="stylesheet">
           </link>
-          {/* <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script> */}
+          <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script>
           <script type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
           {/* Global Site Tag (gtag.js) - Google Analytics */}
           {/* <script

nextjs/public/statique/images/comment-faire-une-video-reponse.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="61.875" height="67.637" viewBox="0 0 61.875 67.637">
+  <g id="capture" transform="translate(-3.819 12.637)">
+    <path id="Tracé_267" data-name="Tracé 267" d="M249.806,254.569H236.819A3.831,3.831,0,0,1,233,250.75v-9.931A3.831,3.831,0,0,1,236.819,237h12.986a3.831,3.831,0,0,1,3.819,3.819v9.931A3.831,3.831,0,0,1,249.806,254.569Z" transform="translate(-206.646 -214.465)" fill="#25d89a"/>
+    <path id="Tracé_268" data-name="Tracé 268" d="M235.875,281.75,229,288.625l-48.125-6.875L174,274.875,180.875,268h55Z" transform="translate(-170.181 -233.625)" fill="#d0e7fe"/>
+    <rect id="Rectangle_315" data-name="Rectangle 315" width="55" height="13.75" transform="translate(3.819 41.25)" fill="#fff"/>
+    <circle id="Ellipse_117" data-name="Ellipse 117" cx="6.875" cy="6.875" r="6.875" transform="translate(29.792 6.875)" fill="#25d89a"/>
+    <text id="_" data-name="?" transform="matrix(0.921, 0.391, -0.391, 0.921, 45.851, 8.063)" fill="#ff5a5f" font-size="11" font-family="Roboto-Black, Roboto" font-weight="800"><tspan x="-2.801" y="0">?</tspan></text>
+    <text id="_2" data-name="?" transform="translate(39.881 3.168) rotate(-20)" fill="#ff5a5f" font-size="16" font-family="Roboto-Black, Roboto" font-weight="800"><tspan x="-4.074" y="0">?</tspan></text>
+  </g>
+</svg>

nextjs/public/statique/images/inscription/candidature-video-envoyee.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <g id="Groupe_8166" data-name="Groupe 8166" transform="translate(-928 -199.541)">
+    <circle id="Ellipse_130" data-name="Ellipse 130" cx="50" cy="50" r="50" transform="translate(928 199.541)" fill="#1689fb"/>
+    <g id="XMLID_1840_" transform="translate(951.228 222.333)">
+      <g id="XMLID_1021_" transform="translate(0)">
+        <path id="XMLID_1068_" d="M51.417,65.633a1.045,1.045,0,0,0-.432-1.413,16.381,16.381,0,0,0-18.064,1.8l-1.688-1.688,2.756-2.756A1.045,1.045,0,0,0,32.512,60.1l-2.756,2.756-6.725-6.725a14.6,14.6,0,0,0,1.186-15.582,1.045,1.045,0,1,0-1.845.98,12.44,12.44,0,0,1-.836,13.107L17.1,50.208a2.563,2.563,0,0,0-4.219.93L.16,85.851a2.568,2.568,0,0,0,2.4,3.449,2.592,2.592,0,0,0,.893-.16L38.162,76.415a2.563,2.563,0,0,0,.93-4.219L34.407,67.51A14.289,14.289,0,0,1,50,66.065a1.045,1.045,0,0,0,1.413-.432ZM16.637,82.081,7.219,72.663l2.609-7.119L23.755,79.471Zm-5.1,1.871L5.348,77.767l1.079-2.942,8.048,8.048Zm-8.8,3.227a.474.474,0,0,1-.609-.608l2.434-6.641L9.37,84.744ZM37.743,74.111a.462.462,0,0,1-.3.343l-6.421,2.354-5.941-5.941A1.045,1.045,0,1,0,23.6,72.344L28.86,77.6l-2.942,1.079-15.3-15.3L11.7,60.44,16.956,65.7a1.044,1.044,0,1,0,1.477-1.477l-5.941-5.941,2.354-6.421a.462.462,0,0,1,.343-.3.5.5,0,0,1,.108-.012.454.454,0,0,1,.329.14L37.615,73.673a.462.462,0,0,1,.128.438Z" transform="translate(0 -35.82)" fill="#fff"/>
+        <path id="XMLID_1441_" d="M292.642,16.779a1.044,1.044,0,0,0,1.045-1.045,1.588,1.588,0,0,1,1.587-1.586,3.68,3.68,0,0,0,3.675-3.675,1.045,1.045,0,0,0-2.089,0,1.588,1.588,0,0,1-1.586,1.586,3.68,3.68,0,0,0-3.676,3.675A1.045,1.045,0,0,0,292.642,16.779Z" transform="translate(-261.139 -8.443)" fill="#fff"/>
+        <path id="XMLID_1462_" d="M381.363,109.1a3.8,3.8,0,0,0,3.8-3.8,1.709,1.709,0,0,1,1.707-1.707,1.045,1.045,0,0,0,0-2.089,3.8,3.8,0,0,0-3.8,3.8,1.709,1.709,0,0,1-1.707,1.707,1.045,1.045,0,1,0,0,2.089Z" transform="translate(-340.594 -90.91)" fill="#fff"/>
+        <path id="XMLID_1489_" d="M448,164.827a3.342,3.342,0,1,0,3.342-3.342A3.346,3.346,0,0,0,448,164.827Zm3.342-1.253a1.253,1.253,0,1,1-1.253,1.253A1.255,1.255,0,0,1,451.345,163.574Z" transform="translate(-401.207 -144.617)" fill="#fff"/>
+        <path id="XMLID_1502_" d="M286.452,112.539a3.342,3.342,0,1,0-3.342-3.342A3.346,3.346,0,0,0,286.452,112.539Zm0-4.6A1.253,1.253,0,1,1,285.2,109.2,1.255,1.255,0,0,1,286.452,107.943Z" transform="translate(-253.538 -94.797)" fill="#fff"/>
+        <path id="XMLID_1619_" d="M99.344,6.685A3.342,3.342,0,1,0,96,3.342,3.346,3.346,0,0,0,99.344,6.685Zm0-4.6a1.253,1.253,0,1,1-1.253,1.253A1.255,1.255,0,0,1,99.344,2.089Z" transform="translate(-85.974)" fill="#fff"/>
+        <path id="XMLID_1620_" d="M437.216,348.435a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,1,0,1.477-1.477Z" transform="translate(-389.951 -311.766)" fill="#fff"/>
+        <path id="XMLID_1659_" d="M484.356,395.575a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,0,0,1.477-1.477Z" transform="translate(-432.167 -353.982)" fill="#fff"/>
+        <path id="XMLID_1690_" d="M483.864,348.435l-.985.985a1.044,1.044,0,1,0,1.477,1.477l.985-.985a1.045,1.045,0,0,0-1.477-1.477Z" transform="translate(-432.167 -311.766)" fill="#fff"/>
+        <path id="XMLID_1712_" d="M436.724,395.575l-.985.985a1.045,1.045,0,0,0,1.477,1.477l.985-.985a1.045,1.045,0,1,0-1.477-1.477Z" transform="translate(-389.951 -353.982)" fill="#fff"/>
+        <path id="XMLID_1715_" d="M483.618,3.074a1.041,1.041,0,0,0,.739-.306l.985-.985A1.045,1.045,0,0,0,483.864.306l-.985.985a1.045,1.045,0,0,0,.739,1.783Z" transform="translate(-432.167 0)" fill="#fff"/>
+        <path id="XMLID_1747_" d="M436.477,50.213a1.041,1.041,0,0,0,.739-.306l.985-.985a1.045,1.045,0,1,0-1.477-1.477l-.985.985a1.045,1.045,0,0,0,.739,1.783Z" transform="translate(-389.95 -42.215)" fill="#fff"/>
+        <path id="XMLID_1750_" d="M484.356,47.446a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,0,0,1.477-1.477Z" transform="translate(-432.167 -42.216)" fill="#fff"/>
+        <path id="XMLID_1751_" d="M436.723,2.768A1.045,1.045,0,0,0,438.2,1.291l-.985-.985a1.045,1.045,0,0,0-1.477,1.477Z" transform="translate(-389.95 0)" fill="#fff"/>
+        <path id="XMLID_1755_" d="M192.266,300.78a1.045,1.045,0,1,0,.738.306A1.052,1.052,0,0,0,192.266,300.78Z" transform="translate(-171.247 -269.363)" fill="#fff"/>
+        <path id="XMLID_1756_" d="M338,193.993l-.757.757a1.045,1.045,0,1,0,1.477,1.477l.757-.757A1.045,1.045,0,0,0,338,193.993Z" transform="translate(-301.745 -173.456)" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

nextjs/public/statique/images/inscription/candidature-video-envoyee.svg_.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <g id="Groupe_8166" data-name="Groupe 8166" transform="translate(-928 -199.541)">
+    <circle id="Ellipse_130" data-name="Ellipse 130" cx="50" cy="50" r="50" transform="translate(928 199.541)" fill="#1689fb"/>
+    <g id="XMLID_1840_" transform="translate(951.228 222.333)">
+      <g id="XMLID_1021_" transform="translate(0)">
+        <path id="XMLID_1068_" d="M51.417,65.633a1.045,1.045,0,0,0-.432-1.413,16.381,16.381,0,0,0-18.064,1.8l-1.688-1.688,2.756-2.756A1.045,1.045,0,0,0,32.512,60.1l-2.756,2.756-6.725-6.725a14.6,14.6,0,0,0,1.186-15.582,1.045,1.045,0,1,0-1.845.98,12.44,12.44,0,0,1-.836,13.107L17.1,50.208a2.563,2.563,0,0,0-4.219.93L.16,85.851a2.568,2.568,0,0,0,2.4,3.449,2.592,2.592,0,0,0,.893-.16L38.162,76.415a2.563,2.563,0,0,0,.93-4.219L34.407,67.51A14.289,14.289,0,0,1,50,66.065a1.045,1.045,0,0,0,1.413-.432ZM16.637,82.081,7.219,72.663l2.609-7.119L23.755,79.471Zm-5.1,1.871L5.348,77.767l1.079-2.942,8.048,8.048Zm-8.8,3.227a.474.474,0,0,1-.609-.608l2.434-6.641L9.37,84.744ZM37.743,74.111a.462.462,0,0,1-.3.343l-6.421,2.354-5.941-5.941A1.045,1.045,0,1,0,23.6,72.344L28.86,77.6l-2.942,1.079-15.3-15.3L11.7,60.44,16.956,65.7a1.044,1.044,0,1,0,1.477-1.477l-5.941-5.941,2.354-6.421a.462.462,0,0,1,.343-.3.5.5,0,0,1,.108-.012.454.454,0,0,1,.329.14L37.615,73.673a.462.462,0,0,1,.128.438Z" transform="translate(0 -35.82)" fill="#fff"/>
+        <path id="XMLID_1441_" d="M292.642,16.779a1.044,1.044,0,0,0,1.045-1.045,1.588,1.588,0,0,1,1.587-1.586,3.68,3.68,0,0,0,3.675-3.675,1.045,1.045,0,0,0-2.089,0,1.588,1.588,0,0,1-1.586,1.586,3.68,3.68,0,0,0-3.676,3.675A1.045,1.045,0,0,0,292.642,16.779Z" transform="translate(-261.139 -8.443)" fill="#fff"/>
+        <path id="XMLID_1462_" d="M381.363,109.1a3.8,3.8,0,0,0,3.8-3.8,1.709,1.709,0,0,1,1.707-1.707,1.045,1.045,0,0,0,0-2.089,3.8,3.8,0,0,0-3.8,3.8,1.709,1.709,0,0,1-1.707,1.707,1.045,1.045,0,1,0,0,2.089Z" transform="translate(-340.594 -90.91)" fill="#fff"/>
+        <path id="XMLID_1489_" d="M448,164.827a3.342,3.342,0,1,0,3.342-3.342A3.346,3.346,0,0,0,448,164.827Zm3.342-1.253a1.253,1.253,0,1,1-1.253,1.253A1.255,1.255,0,0,1,451.345,163.574Z" transform="translate(-401.207 -144.617)" fill="#fff"/>
+        <path id="XMLID_1502_" d="M286.452,112.539a3.342,3.342,0,1,0-3.342-3.342A3.346,3.346,0,0,0,286.452,112.539Zm0-4.6A1.253,1.253,0,1,1,285.2,109.2,1.255,1.255,0,0,1,286.452,107.943Z" transform="translate(-253.538 -94.797)" fill="#fff"/>
+        <path id="XMLID_1619_" d="M99.344,6.685A3.342,3.342,0,1,0,96,3.342,3.346,3.346,0,0,0,99.344,6.685Zm0-4.6a1.253,1.253,0,1,1-1.253,1.253A1.255,1.255,0,0,1,99.344,2.089Z" transform="translate(-85.974)" fill="#fff"/>
+        <path id="XMLID_1620_" d="M437.216,348.435a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,1,0,1.477-1.477Z" transform="translate(-389.951 -311.766)" fill="#fff"/>
+        <path id="XMLID_1659_" d="M484.356,395.575a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,0,0,1.477-1.477Z" transform="translate(-432.167 -353.982)" fill="#fff"/>
+        <path id="XMLID_1690_" d="M483.864,348.435l-.985.985a1.044,1.044,0,1,0,1.477,1.477l.985-.985a1.045,1.045,0,0,0-1.477-1.477Z" transform="translate(-432.167 -311.766)" fill="#fff"/>
+        <path id="XMLID_1712_" d="M436.724,395.575l-.985.985a1.045,1.045,0,0,0,1.477,1.477l.985-.985a1.045,1.045,0,1,0-1.477-1.477Z" transform="translate(-389.951 -353.982)" fill="#fff"/>
+        <path id="XMLID_1715_" d="M483.618,3.074a1.041,1.041,0,0,0,.739-.306l.985-.985A1.045,1.045,0,0,0,483.864.306l-.985.985a1.045,1.045,0,0,0,.739,1.783Z" transform="translate(-432.167 0)" fill="#fff"/>
+        <path id="XMLID_1747_" d="M436.477,50.213a1.041,1.041,0,0,0,.739-.306l.985-.985a1.045,1.045,0,1,0-1.477-1.477l-.985.985a1.045,1.045,0,0,0,.739,1.783Z" transform="translate(-389.95 -42.215)" fill="#fff"/>
+        <path id="XMLID_1750_" d="M484.356,47.446a1.045,1.045,0,1,0-1.477,1.477l.985.985a1.045,1.045,0,0,0,1.477-1.477Z" transform="translate(-432.167 -42.216)" fill="#fff"/>
+        <path id="XMLID_1751_" d="M436.723,2.768A1.045,1.045,0,0,0,438.2,1.291l-.985-.985a1.045,1.045,0,0,0-1.477,1.477Z" transform="translate(-389.95 0)" fill="#fff"/>
+        <path id="XMLID_1755_" d="M192.266,300.78a1.045,1.045,0,1,0,.738.306A1.052,1.052,0,0,0,192.266,300.78Z" transform="translate(-171.247 -269.363)" fill="#fff"/>
+        <path id="XMLID_1756_" d="M338,193.993l-.757.757a1.045,1.045,0,1,0,1.477,1.477l.757-.757A1.045,1.045,0,0,0,338,193.993Z" transform="translate(-301.745 -173.456)" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

nextjs/public/statique/images/inscription/inscription-plateforme-recrutement-video.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <g id="Groupe_8216" data-name="Groupe 8216" transform="translate(-907 -178)">
+    <g id="Groupe_8166" data-name="Groupe 8166" transform="translate(-21 -21.541)">
+      <circle id="Ellipse_130" data-name="Ellipse 130" cx="50" cy="50" r="50" transform="translate(928 199.541)" fill="#1689fb"/>
+      <g id="Groupe_8190" data-name="Groupe 8190" transform="translate(950.061 230.494)">
+        <g id="_001-mail" data-name="001-mail" transform="translate(0 0)">
+          <g id="Groupe_8165" data-name="Groupe 8165">
+            <path id="Tracé_428" data-name="Tracé 428" d="M50.345,76H4.851A4.858,4.858,0,0,0,0,80.851v29.107a4.859,4.859,0,0,0,4.851,4.851H50.345a4.857,4.857,0,0,0,4.851-4.851V80.851A4.856,4.856,0,0,0,50.345,76Zm-.679,3.234L31.028,97.773a4.851,4.851,0,0,1-6.864,0L5.531,79.234ZM3.234,109.3V81.512l13.976,13.9Zm2.3,2.275L19.5,97.694l2.378,2.366a8.085,8.085,0,0,0,11.431,0l2.381-2.369,13.97,13.881ZM51.962,109.3,37.986,95.413l13.976-13.9Z" transform="translate(0 -76)" fill="#fff"/>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

nextjs/public/statique/images/inscription/validation-plateforme-recrutement-video.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <g id="Groupe_8222" data-name="Groupe 8222" transform="translate(-905 -178)">
+    <g id="Groupe_8166" data-name="Groupe 8166" transform="translate(-23 -21.541)">
+      <circle id="Ellipse_130" data-name="Ellipse 130" cx="50" cy="50" r="50" transform="translate(928 199.541)" fill="#1689fb"/>
+      <g id="_001-like" data-name="001-like" transform="translate(948.325 227.541)">
+        <path id="Tracé_429" data-name="Tracé 429" d="M52.8,33.254a6.076,6.076,0,0,0,1.422-4.061,6.239,6.239,0,0,0-1.33-3.519,5.467,5.467,0,0,0-1.3-6.291C49.963,17.9,47.2,17.235,43.376,17.42a32.1,32.1,0,0,0-5.033.644h-.01c-.511.092-1.054.2-1.606.327-.041-.655.072-2.281,1.279-5.943,1.432-4.357,1.35-7.692-.266-9.922A6.5,6.5,0,0,0,32.533,0a2.569,2.569,0,0,0-1.974.9c-1.135,1.32-1,3.754-.859,4.879-1.35,3.621-5.135,12.5-8.336,14.965a1.1,1.1,0,0,0-.164.143,10.988,10.988,0,0,0-2,3.007,4.221,4.221,0,0,0-2.025-.511H10.93a4.258,4.258,0,0,0-4.255,4.255V44.26a4.258,4.258,0,0,0,4.255,4.255h6.24a4.246,4.246,0,0,0,2.455-.777l2.4.286a102.986,102.986,0,0,0,13.635.747c1.217.092,2.363.143,3.427.143a22.95,22.95,0,0,0,4.756-.43c3.13-.665,5.268-1.995,6.352-3.948a6.261,6.261,0,0,0,.7-3.918,6.524,6.524,0,0,0,2.322-5.309A6.91,6.91,0,0,0,52.8,33.254ZM10.93,45.753A1.5,1.5,0,0,1,9.437,44.26V27.628a1.5,1.5,0,0,1,1.493-1.493h6.24a1.5,1.5,0,0,1,1.493,1.493V44.25a1.5,1.5,0,0,1-1.493,1.493H10.93Zm39.248-13.7a1.375,1.375,0,0,0-.184,1.667,4.256,4.256,0,0,1,.471,1.708,4.093,4.093,0,0,1-1.923,3.539,1.394,1.394,0,0,0-.471,1.575,3.612,3.612,0,0,1-.276,2.639c-.685,1.227-2.209,2.107-4.521,2.6a26.947,26.947,0,0,1-7.457.225h-.143a100.965,100.965,0,0,1-13.3-.726h-.01l-1.033-.123a4.334,4.334,0,0,0,.092-.9V27.628a4.327,4.327,0,0,0-.194-1.268,8.549,8.549,0,0,1,1.9-3.508C27.726,19.21,32.216,6.925,32.41,6.393a1.3,1.3,0,0,0,.061-.685A6.392,6.392,0,0,1,32.6,2.741a3.67,3.67,0,0,1,2.885,1.381c1.043,1.442,1,4.02-.123,7.436-1.718,5.206-1.862,7.948-.5,9.155a2.229,2.229,0,0,0,2.23.4c.624-.143,1.217-.266,1.78-.358l.133-.031c3.14-.685,8.766-1.1,10.72.675a2.943,2.943,0,0,1,.348,3.733,1.368,1.368,0,0,0,.245,1.78A3.875,3.875,0,0,1,51.456,29.3,3.8,3.8,0,0,1,50.178,32.057Z" transform="translate(-1 -4)" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

nextjs/sagas/userSaga.js

@@ -23,7 +23,7 @@ import _ from "lodash";
 export function* requestLoginSaga(action) {
   try {
     const res = yield call(api.user.login, action.data);
-
+    
     if (!!res.token) {
 
       localStorage.setItem('ttJWT', res.token)
@@ -33,17 +33,14 @@ export function* requestLoginSaga(action) {
       yield put(userLoggedIn());
       yield put(fetchCurrentUserRequest());
       let url = localStorage.getItem('loginRedirect');
-      console.log("requestLoginSaga1!!!!!!!!!!!!!! "+url)
-      console.log(url)
       if (!!!url)
         url = "/"
-      console.log(url)
       Router.push(url);
       // <Redirect to={url}/>
-      console.log("requestLoginSaga2!!!!!!!!!!!!!! "+url)
+      
       //localStorage.setItem('loginRedirect', '/');
     } else{
-      throw new Error("Mauvais identifiants.")  
+      throw new Error("Aucun compte n'est associé à cette adresse email. Vérifiez l'e-mail..")  
       console.log("requestLoginSaga!!!!!!!!!!!!!! Mauvais identifiants.")
     }
       
@@ -51,7 +48,7 @@ export function* requestLoginSaga(action) {
   } catch (error) {
     setAuthorizationHeader();
     console.log("requestLoginSaga!!!!!!!!!!!!!! Mauvais identifiants.")
-    yield put(requestLoginFailure({ message: "Mauvais identifiants" }));
+    yield put(requestLoginFailure({ message: "Email ou mot de passe incorrect" }));
   }
 }
 
@@ -121,7 +118,7 @@ export function* requestNewsletterSubscribitionSaga(action) {
     } else
       console.error(res.data.message);
     if (_.startsWith(res.data.message, 'Unsuccessful: 400 MJ18')) {
-      throw new Error("Existe déjà.")
+      throw new Error("Cet utilisateur existe déjà.")
     }
   } catch (err) {
     console.error(err.message)
@@ -143,12 +140,14 @@ export function* requestRegisterSaga(action) {
       yield put(sendConfirmationEmailRequest(res));
       Router.push(`/VerifyEmail/${action.payload.email}`);
 
-    } else
-      throw new Error("L'inscription a échouée. Merci de contacter contact@talentstube.com")
+    } else{
+      throw new Error("Il existe déjà un compte Talent associé à cet e-mail ")
+    }
+      
 
   } catch (err) {
     console.error(err)
-    yield put(registerUserFailure(err));
+    yield put(registerUserFailure({ err: err, message: err.message }));
   }
 }
 

nextjs/server.js

@@ -17,6 +17,9 @@ const FacebookStrategy = require('passport-facebook').Strategy
 const LinkedInStrategy = require('passport-linkedin-oauth2').Strategy
 const bodyParser = require('body-parser');
 
+const clePubliqueMailJet = "355697fac93fca865660734b4fdffaeb"
+const clePriveMailJet = "ddecf75321ca89c09e561857b13534c8"
+
 passport.use(new FacebookStrategy({
   clientID: process.env.NODE_ENV === 'production' ? process.env.TT_FACEBOOK_ID : process.env.FACEBOOK_ID,
   clientSecret: process.env.NODE_ENV === 'production' ? process.env.TT_FACEBOOK_SECRET : process.env.FACEBOOK_SECRET,
@@ -181,6 +184,25 @@ app.prepare()
       app.render(req, res, actualPage, queryParams)
     })
 
+    // server.post('/NewsletterSubscription', jsonParser, (req, res) => {
+     
+    //   let email = req.body.email;
+
+    //   if (!!!email) {
+    //     res.status(404).json({ success: false, message: 'Mauvais paramètre.' });
+    //   }
+
+    //   var mailjet = require('node-mailjet')
+    //     .connect(process.env.MJ_APIKEY_PUBLIC, process.env.MJ_APIKEY_PRIVATE)
+    //   let error = null;
+    //   let mailjetResponse = mailjet.post('contact')
+    //     .request({ Email: email })
+    //     .then(rep => res.json({ success: true }), rep => res.json({ success: false, message: rep.message }))
+    //     .catch((err) => { 
+    //      });
+
+    // })
+
     server.post('/NewsletterSubscription', jsonParser, (req, res) => {
      
       let email = req.body.email;
@@ -188,16 +210,86 @@ app.prepare()
       if (!!!email) {
         res.status(404).json({ success: false, message: 'Mauvais paramètre.' });
       }
+      // var mailjet = require ('node-mailjet')
+      //     .connect(process.env.MJ_APIKEY_PUBLIC, process.env.MJ_APIKEY_PRIVATE)
 
+      //     mailjet.post('contact')
+      //     .request({Email: email})
+      //     .catch((err)=>console.log(err));
+
+      // res.json({success:true});
+      // })
       var mailjet = require('node-mailjet')
-        .connect(process.env.MJ_APIKEY_PUBLIC, process.env.MJ_APIKEY_PRIVATE)
+      .connect(clePubliqueMailJet, clePriveMailJet)
       let error = null;
-      let mailjetResponse = mailjet.post('contact')
-        .request({ Email: email })
-        .then(rep => res.json({ success: true }), rep => res.json({ success: false, message: rep.message }))
-        .catch((err) => { 
-         });
-
+      console.log("envoi du contact a mailjet")
+      let mailjetResponse = mailjet
+        .post('contact')
+        .action("managemanycontacts")
+        .request({
+          "Contacts":[
+            {
+              "Email":email,
+              "IsExcludedFromCampaigns":"false",
+              "Properties":"object"
+            }
+          ],
+          "ContactsLists":[
+            {
+              "Action":"addforce",
+              "ListID":"2400791"
+            },
+            
+          ] 
+          })
+        .then(rep => res.json({ success: true }), rep => {
+          console.log("success")
+          res.json({ success: false, message: rep.message })
+          
+        })
+        .catch((err) => console.log("erreur"));
+      console.log("Fin envoi du contact a mailjet")
+      // US technique 444
+      // var mailjet2 = require('node-mailjet')
+      //   .connect('805b8adce80bc6aa9422ddff20bb4171', 'f3bce955f21bc9456d65245c50e8c512')
+      
+      // console.log("envoi du mail avec mailjet laniau2")
+      // let request = mailjet2.post("send", {'version': 'v3.1'})
+      // .request({
+      //   "Messages":[
+      //     {
+      //       "From": {
+      //         "Email": "l.laniau@talentstube.com",
+      //         "Name": "Laurent"
+      //       },
+      //       "To": [
+      //         {
+      //           "Email": "l.laniau@talentstube.com",
+      //           "Name": "Laurent"
+      //         }
+      //       ],
+      //       "TemplateID": 2087555,
+      //       "TemplateLanguage": true,
+      //       "Variables": {
+      //         "prénom": "\"]]</title><!--[if !mso]><!-- --><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><!--<![endif]--><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><style type=\"text/css",
+      //         "lien": '<p style="display:inline-block;background:#36eda4;color:#ffffff;font-family:Arial,sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;border-radius:3px"><span style="font-size:11px;text-align:center;background-color:#36eda4;color:#ffffff;font-family:Arial"><b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="www.talentstube.com">Activer mon compte</a> &nbsp; &nbsp; &nbsp;</b></span></p>'
+      //         },
+      //       "Subject": "Test [[data:prénom:'Corentin']]",
+      //       "TextPart": "My first Mailjet email",
+      //       "HTMLPart": "<h3>Dear passenger 1, welcome to <a href='https://www.mailjet.com/'>Mailjet</a>!</h3><br />May the delivery force be with you!",
+      //       "CustomID": "AppGettingStartedTest"
+      //     }
+      //   ]
+      // })
+      // request
+      // .then((result) => {
+      //   console.log(result.body)
+      // })
+      // .catch((err) => {
+      //   console.log(err.statusCode)
+      // })
+      // mailer.sendTransactionnelEmail();  
+      // console.log("Fin envoi du mail a mailjet")
     })
 
     server.post('/sendConfirmationEmail', jsonParser, (req, res) => {

nextjs/src/mailer.js

@@ -1,5 +1,8 @@
-const nodemailer = require("nodemailer");
 
+const nodemailer = require("nodemailer");
+const mailFrom = "noreply@talentstube.io"
+const clePubliqueMailJet = "355697fac93fca865660734b4fdffaeb"
+const clePriveMailJet = "ddecf75321ca89c09e561857b13534c8"
 
 function setup() {
   return nodemailer.createTransport({
@@ -11,33 +14,151 @@ function setup() {
     }
   });
 }
-
+exports.sendTransactionnelEmail = function () {
+  // US technique 444
+      var mailjet2 = require('node-mailjet')
+        .connect('805b8adce80bc6aa9422ddff20bb4171', 'f3bce955f21bc9456d65245c50e8c512')
+      
+      console.log("envoi du mail avec mailjet laniau2")
+      let request = mailjet2.post("send", {'version': 'v3.1'})
+      .request({
+        "Messages":[
+          {
+            "From": {
+              "Email": "l.laniau@talentstube.com",
+              "Name": "Laurent"
+            },
+            "To": [
+              {
+                "Email": "l.laniau@talentstube.com",
+                "Name": "Laurent"
+              }
+            ],
+            "TemplateID": 2087555,
+            "TemplateLanguage": true,
+            "Variables": {
+              "prénom": "\"]]</title><!--[if !mso]><!-- --><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><!--<![endif]--><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><style type=\"text/css",
+              "lien": '<p style="display:inline-block;background:#36eda4;color:#ffffff;font-family:Arial,sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;border-radius:3px"><span style="font-size:11px;text-align:center;background-color:#36eda4;color:#ffffff;font-family:Arial"><b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="www.talentstube.com">Activer mon compte</a> &nbsp; &nbsp; &nbsp;</b></span></p>'
+              },
+            "Subject": "Test [[data:prénom:'ggg']]",
+            "TextPart": "",
+            "HTMLPart": "",
+            "CustomID": "AppGettingStartedTest"
+          }
+        ]
+      })
+      request
+      .then((result) => {
+        console.log(result.body)
+      })
+      .catch((err) => {
+        console.log(err.statusCode)
+      })
+}
 exports.sendConfirmationEmail = function (nom, prenom, tokenUrl, mail) {
-  const tranport = setup();
-  const email = {
-    from: process.env.EMAIL_FROM,
-    to: process.env.NODE_ENV === 'production'? mail : 'l.laniau@talentstube.com',
-    subject: `Bienvenue ${mail} `,
-    text: `
-    Bonjour ${prenom} ${nom},
+  // const tranport = setup();
+  // const email = {
+  //   from: process.env.EMAIL_FROM,
+  //   to: process.env.NODE_ENV === 'production'? mail : 'l.laniau@talentstube.com',
+  //   subject: `Bienvenue ${mail} `,
+  //   text: `
+  //   Bonjour ${prenom} ${nom},
 
-    Veuillez cliquer sur le lien ci-dessous pour activer votre compte Talents Tube.
+  //   Veuillez cliquer sur le lien ci-dessous pour activer votre compte Talents Tube.
 
-    ${tokenUrl}
+  //   ${tokenUrl}
 
-    *Ce lien ne peut être utilisé qu’une seule fois pour valider votre compte.
+  //   *Ce lien ne peut être utilisé qu’une seule fois pour valider votre compte.
 
-    Si vous n’êtes pas à l’origine de l’inscription sur Talents Tube, veuillez contacter le support Talents Tube.
+  //   Si vous n’êtes pas à l’origine de l’inscription sur Talents Tube, veuillez contacter le support Talents Tube.
 
-    Merci de votre compréhension.
+  //   Merci de votre compréhension.
 
-    Talents Tube
+  //   Talents Tube
 
-    `
+  //  };
+  // var mailjet2 = require('node-mailjet')
+  //       .connect('805b8adce80bc6aa9422ddff20bb4171', 'f3bce955f21bc9456d65245c50e8c512')
+      
+  //     console.log("envoi du mail avec mailjet laniau2")
+  //     let request = mailjet2.post("send", {'version': 'v3.1'})
+  //     .request({
+  //       "Messages":[
+  //         {
+  //           "From": {
+  //             "Email": "l.laniau@talentstube.com",
+  //             "Name": "Laurent"
+  //           },
+  //           "To": [
+  //             {
+  //               "Email": "l.laniau@talentstube.com",
+  //               "Name": "Laurent"
+  //             }
+  //           ],
+  //           "TemplateID": 2087555,
+  //           "TemplateLanguage": true,
+  //           "Variables": {
+  //             "prénom": "\"]]</title><!--[if !mso]><!-- --><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><!--<![endif]--><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><style type=\"text/css",
+  //             "lien": '<p style="display:inline-block;background:#36eda4;color:#ffffff;font-family:Arial,sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;border-radius:3px"><span style="font-size:11px;text-align:center;background-color:#36eda4;color:#ffffff;font-family:Arial"><b>&nbsp; &nbsp; &nbsp; &nbsp;<a href="www.talentstube.com">Activer mon compte</a> &nbsp; &nbsp; &nbsp;</b></span></p>'
+  //             },
+  //           "Subject": "Test [[data:prénom:'ggg']]",
+  //           "TextPart": "My first Mailjet email",
+  //           "HTMLPart": "<h3>Dear passenger 1, welcome to <a href='https://www.mailjet.com/'>Mailjet</a>!</h3><br />May the delivery force be with you!",
+  //           "CustomID": "AppGettingStartedTest"
+  //         }
+  //       ]
+  //     })
+  //     request
+  //     .then((result) => {
+  //       console.log(result.body)
+  //     })
+  //     .catch((err) => {
+  //       console.log(err.statusCode)
+  //     })
+  var mailjet2 = require('node-mailjet')
+        .connect(clePubliqueMailJet, clePriveMailJet)
+      
+      console.log("envoi du mail avec mailjet "+mailFrom)
+      let request = mailjet2.post("send", {'version': 'v3.1'})
+      .request({
+        "Messages":[
+          {
+            "From": {
+              "Email": mailFrom,
+              "Name": "Talents Tube"
+            },
+            "To": [
+              {
+                "Email": mail,
+                "Name": prenom
+              }
+            ],
+            "TemplateID": 2115317,
+            "TemplateLanguage": true,
+            "Variables": {
+              "nom": nom,
+              "prenom": prenom,
+              // "tokenUrl": "<a href='"+tokenUrl+"'>Activer le compte</a>"
+              "tokenUrl": tokenUrl
+              },
+            "Subject": "Bienvenue sur Talents Tube",
+            "TextPart": "",
+            "HTMLPart": "",
+            "CustomID": "AppGettingStartedTest"
+          }
+        ]
+      })
+      request
+      .then((result) => {
+        console.log(result.body)
+      })
+      .catch((err) => {
+        console.log(err.statusCode)
+      }) 
     // ,
     // html: `
     // `
-  };
+  
 
-  tranport.sendMail(email);
+  // tranport.sendMail(email);
 }