Fix: don't check https

nextjs/actions/media.js

@@ -5,9 +5,6 @@ import {
     UPLOAD_MEDIA_PRES_REQUEST,
     UPLOAD_MEDIA_PRES_FAILURE,
     UPLOAD_MEDIA_PRES_SUCCESS,
-    UPLOAD_MEDIA_CV_REQUEST,
-    UPLOAD_MEDIA_CV_FAILURE,
-    UPLOAD_MEDIA_CV_SUCCESS,
   
   } from "../types";
   
@@ -41,19 +38,6 @@ import {
     res
   });
 
-  export const uploadMediaCv = payload => ({
-    type: UPLOAD_MEDIA_CV_REQUEST,
-    payload
-  });
-  
-  export const uploadMediaCvFailure = errors => ({
-    type: UPLOAD_MEDIA_CV_FAILURE,
-    errors
-  });
-  
-  export const uploadMediaCvSuccess = res => ({
-    type: UPLOAD_MEDIA_CV_SUCCESS,
-    res
-  });
+
   
 

nextjs/actions/mediaCv.js

@@ -0,0 +1,25 @@
+import {
+    UPLOAD_MEDIA_CV_REQUEST,
+    UPLOAD_MEDIA_CV_FAILURE,
+    UPLOAD_MEDIA_CV_SUCCESS,
+  
+  } from "../types";
+  
+
+
+  export const uploadMediaCv = payload => ({
+    type: UPLOAD_MEDIA_CV_REQUEST,
+    payload
+  });
+  
+  export const uploadMediaCvFailure = errors => ({
+    type: UPLOAD_MEDIA_CV_FAILURE,
+    errors
+  });
+  
+  export const uploadMediaCvSuccess = res => ({
+    type: UPLOAD_MEDIA_CV_SUCCESS,
+    res
+  });
+  
+

nextjs/components/atoms/ChatCard.js

@@ -6,6 +6,8 @@ import VideoVimeo from './VideoVimeo'
 import ChatCardMessage from './ChatCardMessage'
 import _ from "lodash"
 import Ar from "lodash/array"
+import {TextField, Button, Grid, Hidden} from '@material-ui/core';
+import ButtonBase from '@material-ui/core/ButtonBase';
 
 const useStyles = makeStyles(theme => ({
     card: {
@@ -31,14 +33,14 @@ const useStyles = makeStyles(theme => ({
         padding: theme.spacing(2,0),
     },
     currentUserBubble: {
-        background: theme.palette.primary.important,
+        
         alignSelf: 'flex-end',
     },
     currentMessageSender: {
         color: theme.palette.primary.important,
     },
     otherUserBubble: {
-        background: theme.palette.primary.main,
+       
         alignSelf: 'flex-start',
     },
     otherMessageSender: {
@@ -55,6 +57,21 @@ const useStyles = makeStyles(theme => ({
         },
 
     },
+    cartoucheChat: {
+        // display: 'flex',
+        padding: theme.spacing(2) + 'px 18vw'
+    }
+    ,
+    grille: {
+        paddingTop: theme.spacing(4),
+        paddingBottom: theme.spacing(4),
+        paddingLeft : theme.spacing(4),
+        marginBottom: "30px",
+
+        borderRadius: "5px",
+        border: "1px solid #1E2327",
+        color: theme.palette.primary.dark
+    },
 }));
 
 export default function ChatCard(props) {
@@ -65,19 +82,37 @@ export default function ChatCard(props) {
     const bubbleClass = (userFirstName === props.message.sender.firstname && userLastName === props.message.sender.lastname) ? classes.currentUserBubble : classes.otherUserBubble
     const messageSenderClass = (userFirstName === props.message.sender.firstname && userLastName === props.message.sender.lastname) ? classes.currentMessageSender : classes.otherMessageSender
     const bubbleSide = (userFirstName === props.message.sender.firstname && userLastName === props.message.sender.lastname) ? 'right' : 'left'
-
+    // const logoUrl = (props.answer.ad
+    //     ? (props.answer.ad.company.logo
+    //         ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + this.props.answer.ad.company.logo
+    //         : publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg")
+    //     : "")
+    const logoUrl = ""
     
     return (
-        <Fragment>
-            <ChatCardMessage side={bubbleSide} firstname={props.message.sender.firstname} lastname={props.message.sender.lastname} picture={userPicture} video={(props.message.video) ? true : false} message={(props.message.video) ? (<VideoVimeo classesOverride={ classes.videoVimeo } videoId={Ar.last(_.split(props.message.video.cdn_url, '/'))} />) : props.message.content} messageSenderClass={messageSenderClass} bubbleClass={bubbleClass}/>
+        <section className={classes.grille}>
+            
+            <ChatCardMessage side={bubbleSide} firstname={props.message.sender.firstname} lastname={props.message.sender.lastname} picture={userPicture} 
+            video={
+                (props.message.video) 
+                ? true :
+                 false} 
+            message={
+                (props.message.video) 
+                ? (<VideoVimeo classesOverride={ classes.videoVimeo } videoId={Ar.last(_.split(props.message.video.cdn_url, '/'))} />) 
+                : ""}
+            messageTexte = {props.message.content} 
+            messageSenderClass={messageSenderClass} bubbleClass={bubbleClass}
+            envoyeLe={(new Date(props.message.c_time)).toLocaleDateString("fr-FR")}
+            envoyeA ={(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")}/>
 
             <Typography
                 className={classes.messageDate}
                 align="center"
             >
-                Envoyé le  {(new Date(props.message.c_time)).toLocaleDateString("fr-FR")} à {(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")}
+                {/* Envoyé le  {(new Date(props.message.c_time)).toLocaleDateString("fr-FR")} à {(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")} */}
             </Typography>
-        </Fragment>
+        </section>
     )
 }
 

nextjs/components/atoms/ChatCardMessage.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Typography } from '@material-ui/core';
+import {  Grid} from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import _ from "lodash"
 
@@ -15,13 +16,18 @@ const useStyles = makeStyles(theme => ({
         justifyContent: 'flex-end',
     },
     messageSender: {
-        fontSize: '0.9em',
-        fontWeight: '300',
-        color: theme.palette.primary.important,
+        fontSize: '1em',
+        fontWeight: '600',
+        color: theme.palette.primary.dark,
     },
     messageContent: {
-        fontWeight: '300',
-        color: theme.palette.secondary.main,
+        fontWeight: '600',
+        color: theme.palette.primary.dark,
+        
+    },
+    messageTexteContent: {
+        marginTop: theme.spacing(1),
+        
     },
     userBubble: {
         width: 'auto',
@@ -57,37 +63,58 @@ const useStyles = makeStyles(theme => ({
     },
     second: {
         order: 2,
+    },
+    grille: {
+        paddingTop: theme.spacing(4),
+        paddingBottom: theme.spacing(4),
+        paddingLeft : theme.spacing(4),
+        marginBottom: "30px",
+
+        borderRadius: "5px",
+        border: "1px solid #1E2327",
+        color: theme.palette.primary.dark
     }
 }));
 
 export default function ChatCardMessage(props) {
-    const { side, firstname, lastname, picture, message, video, messageSenderClass, bubbleClass } = props;
+    const { side, firstname, lastname, picture, message, messageTexte, video, messageSenderClass, bubbleClass, envoyeLe, envoyeA } = props;
     const classes = useStyles();
 
     const userBubble = (video) ? classes.userBubble +' '+ classes.userBubbleVideo : classes.userBubble
     return (
-            <section className={(side==='left')? classes.userMessageLeft : classes.userMessageRight }>
-                
+            
+                <div >
                 {picture ?
-                    <img alt="talents-tube" src={`http://localhost/uploads/img/${picture}`} className={(side==='left')? classes.first+' '+classes.avatar : classes.second +' '+classes.avatar} />
+                    <img alt="talents-tube" src={`http://recruteur.talentstube.com/uploads/img/${picture}`} className={(side==='left')? classes.first+' '+classes.avatar : classes.second +' '+classes.avatar} />
                     :
                     <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={(side==='left')? classes.first +' '+ classes.avatar : classes.second+' '+classes.avatar } />
                 }
                 <div className={(side==='left')? classes.second : classes.first}>
                     <Typography
-                        className={classes.messageSender +' '+ messageSenderClass}
+                        className={classes.messageSender }
                     >
                         {firstname + ' ' + lastname}
                     </Typography>
+                    <Typography
+                        className={classes.messageSender }
+                    >
+                        Envoyé le  {envoyeLe} à {envoyeA}
+                    </Typography>
                     <div className={userBubble + ' ' + bubbleClass}>
                         <Typography
                             className={classes.messageContent}
                         >
+                          
                             {message}
+                             <br></br>
+                            <span className={classes.messageTexteContent}>{messageTexte== message? "" : messageTexte}</span>
+                            
                         </Typography>
+                        
                     </div>
                 </div>
-            </section>
+                </div>
+            
     )
 }
 

nextjs/components/atoms/IconText.js

@@ -9,6 +9,9 @@ import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
 import Business from '@material-ui/icons/Business';
 import Typography from '@material-ui/core/Typography';
 import WatchLater from '@material-ui/icons/WatchLater';
+import Home from '@material-ui/icons/Home';
+import People from '@material-ui/icons/People';
+import Place from '@material-ui/icons/Place';
 
 const variantIcon = {
   assignment: AssignmentIcon,
@@ -17,6 +20,9 @@ const variantIcon = {
   business_center: BusinessCenterIcon,
   business: Business,
   watch_later: WatchLater,
+  home: Home,
+  people: People,
+  place: Place,
 };
 
 const styles = theme => ({

nextjs/components/atoms/IconTextInline.js

@@ -4,18 +4,24 @@ import { withStyles } from '@material-ui/core/styles';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import RoomIcon from '@material-ui/icons/Room';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
+import HomeOnIcon from '@material-ui/icons/Home';
 import WatchLater from '@material-ui/icons/WatchLater';
 import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
+import People from '@material-ui/icons/People';
 import Typography from '@material-ui/core/Typography';
 import Business from '@material-ui/icons/Business';
+import Place from '@material-ui/icons/Place';
 
 const variantIcon = {
   assignment: AssignmentIcon,
   room: RoomIcon,
   location_on: LocationOnIcon,
+  home: HomeOnIcon,
   watch_later: WatchLater,
   business_center: BusinessCenterIcon,
   business: Business,
+  people: People,
+  place: Place,
 };
 
 const styles = theme => ({

nextjs/components/atoms/NoResult.js

@@ -8,7 +8,7 @@ const styles = theme => ({
         padding: theme.spacing(0, 4),
     },
     text: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1,2em',
         fontWeight: '500',
         color: theme.palette.primary.main,

nextjs/components/atoms/OgHead.js

@@ -1,17 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Head from 'next/head'
+const urlEnv = process.env.NODE_ENV;
 
 const OgHead = props => {
     return (
         <Head>
             <title key="title">{props.seo_title}</title>
-            <meta name="robots" content="noindex, nofollow"></meta>
+            
             <meta name="description" kenoindexy="description" content={props.seo_description} />
             <meta name="keywords" content={props.seo_key}/>
             <meta key="og:url" property="og:url" content={props.seo_url} />
             <meta key="og:type" property="og:type" content="article" />
             <meta key="og:title" property="og:title" content={props.seo_title} />
+            <meta property="fb:app_id" content="1800752833559014" data-react-helmet="true"></meta>
             <meta
                 key="og:description"
                 property="og:description"
@@ -19,16 +21,22 @@ const OgHead = props => {
             />
             <meta name="keywords" content={props.seo_key}/>
             <meta key="og:image" property="og:image" content={props.image} />
+            <meta key="og:image:width" property="og:image:width" content="355" />
+            <meta key="og:image:height" property="og:image:height" content="200" />
             <meta name="twitter:card" content="summary"/>
             <meta name="twitter:site" content="@TalentsTube"/>
             <meta name="twitter:title" content={props.seo_title}/>
             <meta name="twitter:description" content={props.seo_description}/>
             <meta name="twitter:image" content={props.image}/>
+            
+            {/* A ENLEVER EN PROD */}
+            {/* <meta name="robots" content="noindex, nofollow"></meta> */}
+            
+            
             {/* <meta httpEquiv='cache-control' content='no-store,no-cache'></meta>
             <meta httpEquiv='expires' content='0'></meta>
             <meta httpEquiv='pragma' content='no-cache'></meta> */}
-            {/* <link rel="canonical" href={ props.seo_url} />     */}
-            
+            <link rel="canonical" href={ props.seo_url} />  
         </Head>
         
     )

nextjs/components/atoms/VideoVimeo.js

@@ -72,7 +72,7 @@ export default function VideoVimeo(props) {
         
         <section className={className +' '+classesOverride}>
             <iframe className='player' 
-            src={"https://player.vimeo.com/video/"+ videoId + options+"?autoplay="+autoplay} 
+            src={"https://player.vimeo.com/video/"+ videoId + options+"?texttrack=fr&autoplay="+autoplay} 
             frameBorder="0" 
             title={title} 
             webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen></iframe>

nextjs/components/atoms/theme.js

@@ -24,8 +24,8 @@ const theme = createMuiTheme({
     },
     offerlistitem: {
       title: '#1E2327',
-      icon: '#BBBCBD',
-      text: '#787B7D',
+      icon: '#1E2327',
+      text: '#1E2327',
     },
     answer: {
       main: '#E8E8E8',

nextjs/components/organisms/AccountCv.js

@@ -0,0 +1,334 @@
+import React, { Fragment } from 'react';
+import { connect } from "react-redux";
+import { fetchCurrentUserRequest } from '../../actions/user'
+import { fetchCompanyRequest } from '../../actions/companies'
+import { uploadMediaCv } from '../../actions/mediaCv'
+import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/styles';
+import { Button, Typography, Divider, Hidden } from '@material-ui/core';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import LoaderVideo from '../templates/loaderVideo'
+import Snack from '../atoms/snack';
+import Snackbar from '@material-ui/core/Snackbar';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import ReactHtmlParser from 'react-html-parser';
+import getConfig from 'next/config'
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Description from '@material-ui/icons/Description';
+import Grid from '@material-ui/core/Grid';
+import Container from '@material-ui/core/Container';
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    margin: theme.spacing(1),
+  },
+  rootButton: {
+    textTransform: 'inherit',
+  },
+  underlined: {
+    textDecoration: 'underline',
+  },
+  textButton: {
+    fontWeight: '700',
+    fontSize: '1.15em',
+    paddingLeft: theme.spacing(2),
+  },
+  InputKeyboardArrowDownIcon: {
+    fontSize: '2.5em',
+    color: theme.palette.primary.dark,
+  },
+  importButton: {
+    color: "#1e2327",
+    backgroundColor:  "#fff",
+    padding: theme.spacing(3, 2),
+    margin: theme.spacing(1),
+    width: "100%",
+    textAlign: "right",
+    boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
+            'px rgba(0, 0, 0, 0.14)',
+    '&:hover': {
+        color: "#1e2327",
+        backgroundColor:  "#fff",
+    }
+  },
+  grille :{
+        paddingTop:theme.spacing(4),
+        paddingRight:"30px",
+        width: "100%",
+        marginBottom:"30px",
+        
+        borderRadius: "5px",
+        border: "1px solid #1E2327",
+        color:theme.palette.primary.dark
+  },
+  grille2 :{
+    margin:'10px',     
+    width: "100%",
+    marginBottom:"30px",
+
+},
+  button: {
+    width:"200px",
+    textTransform: 'inherit',
+    margin: theme.spacing(0, 8),
+    padding: theme.spacing(1.2, 2),
+    [theme.breakpoints.up('sm')]: {
+      margin: 'auto',
+    },
+  },
+  boutonMobile:{
+    width:"200px",
+    textAlign :"center",
+    color: theme.palette.secondary.main,
+    backgroundColor: theme.palette.primary.important,
+    margin : "0px !important"
+  },
+  lien:{
+    textDecoration:'none',
+    color:'#fff'
+  },
+  centered:{
+    textAlign:"center"
+  }
+});
+
+
+const { publicRuntimeConfig } = getConfig();
+class Etape3 extends React.Component {
+  state = {
+    loading: true,
+    openSnack: false,
+    cv:false,
+    errors: {},
+    success : {}
+  };
+
+  componentDidMount() {
+    localStorage.setItem('loginRedirect', window.location.pathname)
+
+    if(!!!localStorage.getItem('ttJWT'))
+    {
+      Router.push("/Login")
+    }
+    else
+      this.setState({
+        loading: false,
+        cvLink: this.props.user.cv
+      })
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    console.log(nextProps);
+    this.setState({
+        cvLink: nextProps.cvLink,
+        loading: nextProps.loading,
+        openSnack: !!!_.isEmpty(nextProps.errors),
+        errors: !!!nextProps.errors ? { errors: { message: "" } } : nextProps.errors,
+    })
+
+    if (nextProps.mediaCv.statusCv === 'success') {
+      const success = {};
+      success.message ="Profil mis à jour";
+      console.log("CV mis à jour!!!")
+      if(nextProps.mediaCv) console.log(nextProps.mediaCv.message)
+      this.setState({
+        cvLink: nextProps.mediaCv.message,
+        
+    })
+      this.setState({ success });
+      
+    }
+
+    
+  }
+
+  inputFilesystemChangeCv = (e) => {
+    this.uploadMediaCv(e)
+  }
+  
+  uploadMediaCv = (e) => {
+    var file = e.target.files[0]
+
+    const data = new FormData()
+    data.append('upload', file)
+    console.log ("envoi de cv")
+    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(classes) {
+    console.log("afficher lien");
+     if (this.state.cvLink !="") {
+      
+        return (
+          
+          <Fragment>
+            <Hidden>&nbsp;</Hidden>
+            <Hidden>&nbsp;</Hidden>
+            
+            <Hidden>&nbsp;</Hidden>
+            <Hidden>&nbsp;</Hidden>
+            
+            <Hidden>&nbsp;</Hidden>
+                <div className={classes.centered} >
+                <Typography >
+                  <a href={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.postedContentCv + this.state.cvLink} 
+                  target="_blank" className={classes.lien}
+
+                  >
+                  <Button
+                            variant="contained"
+                            className={classes.button + ' ' + classes.boutonMobile}
+                          >Visualiser mon CV
+                      </Button>
+                  
+                    </a>
+                    <br />
+                
+                </Typography>
+                </div>
+ 
+          </Fragment>
+            
+        );
+      
+    }
+    return "";
+  }
+
+  render() {
+    const { classes, company } = this.props;
+    const { loading } = this.state;
+    return (
+      <Grid
+            container
+            direction="row"
+            alignItems="flex-start"
+            className={classes.grille}
+            justify="center"
+            alignItems="center">
+              
+        
+          <Grid item lg={12} md={12} xl={12} xs={12} className={classes.grilleGauche}>
+            <div id="cv">
+        
+          <Typography 
+          align="center"
+          gutterBottom
+          variant="headline"
+          variant="h6"
+          component="h2" 
+          className={classes.h6}>
+          <Description className={classes.menuIcon}></Description> Curriculum vitae
+          </Typography>
+          <Typography 
+          align="center">Importez votre CV pour permettre aux recruteurs d’en savoir plus sur vous.
+          </Typography>
+
+          </div>
+            <Fragment>
+          { loading ? 
+          
+            <LoaderVideo textePrincipal="Votre candidature vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/> :
+            <Grid
+            container
+            spacing={4}
+            direction="row"
+            alignItems="flex-start"
+            className={classes.grille2}
+            justify="center"
+            alignItems="center">
+              <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+              <Fragment>
+              {this.AfficherSuccess()}
+                
+                <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-cv"
+                  onChange={this.inputFilesystemChangeCv}
+                />
+                <label htmlFor="import-button-file-cv">
+                  <Button component="span" className={classes.importButton} classes={{ root: classes.rootButton }}>
+                    <img alt="talents-tube" src='/statique/images/Import-cv-candidat.svg' className={classes.iconButton} />
+                    <Typography  className={classes.textButton}>
+                      J'<span className={classes.underlined}>importe</span> mon CV 
+                    </Typography>
+                    <KeyboardArrowDownIcon className={ classes. InputKeyboardArrowDownIcon }/>
+                  </Button>
+                  
+                </label>
+                <Hidden>&nbsp;</Hidden>
+                {this.AfficherLienCv(classes)}
+                <Hidden>&nbsp;</Hidden>
+                <Hidden>&nbsp;</Hidden>
+                <Hidden>&nbsp;</Hidden>
+              </Fragment>
+              </Grid>
+              </Grid>
+          }
+          </Fragment>
+        </Grid>
+        
+    </Grid>
+    ); 
+  }
+
+}
+
+Etape3.getInitialProps = function (context) {
+
+  const { adId, companyId } = context.query
+  const {res} = context
+    //TODO :really needed ?
+     context.store.dispatch(fetchCurrentUserRequest())
+
+  if(!!adId)
+    context.store.dispatch(fetchJobRequest(adId))
+  else if(!!companyId)
+    context.store.dispatch(fetchCompanyRequest(companyId))
+
+    return {};//leave this please
+}
+
+function mapStateToProps(state) {
+  // console.log("mapStateToProps")
+  // console.log(state.loading)
+  // console.log(state.user)
+  // console.log(state.media.message)
+  return {
+    user: state.user ,
+    cvLink : state.user.cv,
+    loading: !!state.media.loading,
+    cv : true,
+    mediaCv: state.mediaCv,
+    //errors:  errorMessageSelector(state),
+    user: state.user,
+    company: state.company
+  };
+}
+export default withStyles(styles)(connect(mapStateToProps, { fetchCurrentUserRequest, fetchCompanyRequest, uploadMediaCv })(Etape3));

nextjs/components/organisms/AccountEtape1.js

@@ -12,6 +12,13 @@ import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from
 import {
     Button,
 } from '@material-ui/core';
+import Link from 'next/link'
+//US475
+import GooglePlaceAutocomplete from 'mui-places-autocomplete'
+import { geocodeByAddress } from 'react-places-autocomplete'
+//US487
+import Autosuggest from 'react-autosuggest';
+
 
 const styles = theme => ({
     container: {
@@ -56,6 +63,24 @@ const styles = theme => ({
         },
         padding: '5px',
     },
+    labelGeoloc:{
+        paddingLeft:"14px",
+        fontSize: "0.8rem",
+        color:"#1E2327",
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontWeight: "400",
+        lineHeight: "1",
+        letterSpacing: "0.00938em",    }
+    ,conteneurGoogle:{
+        border:"1px solid rgb(200, 200, 200)",
+        borderRadius :"5px",
+        padding:"5px 0px",
+        
+
+    },
+    conteneurGoogleComposant:{
+        paddingLeft:"14px"
+    }
 });
 
 const { publicRuntimeConfig } = getConfig();
@@ -71,6 +96,9 @@ class AccountEtape1 extends Component {
         this.handleClose = this.handleClose.bind(this);
         this.onBlur = this.onBlur.bind(this)
         this.onSubmit = this.onSubmit.bind(this);
+        this.choisirMetier = this.choisirMetier.bind(this);
+        this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
+        this.onChange = this.onChange.bind(this);
     }
 
     state = {
@@ -90,7 +118,24 @@ class AccountEtape1 extends Component {
         website: '',
         mediaId: null,
         companyId: null,
-        
+        geoloc: '',
+        value:'',
+        route: '',
+        street_number: '',
+        locality: '',
+        administrative_area_level_2: '',
+        administrative_area_level_1: '',
+        country: '',
+        postal_code: '',
+        formatted_address:"",
+        lat:"",
+        lng:"",
+        appellationId:"",
+        appellationLibelle:"",
+        value: '',
+        suggestions: [],
+        valueMetier: '',
+        suggestionsMetier: [],
     };
 
     handleChange = (e) => {
@@ -110,12 +155,7 @@ class AccountEtape1 extends Component {
       //setOpen(false);
     };
 
-    onBlur(e) {
-        console.log("blur")
-        this.setState({ [e.target.name]: e.target.value });
-        
-        this.soumettre(e.target.name, "unitaire");
-      }     
+    
     
 
     UNSAFE_componentWillReceiveProps(nextProps) {
@@ -124,21 +164,22 @@ class AccountEtape1 extends Component {
             lastname: nextProps.user.lastname,
             phone: nextProps.user.phone,
             email: nextProps.user.email,
-            currentJob: nextProps.user.currentJob,
-            address1 : nextProps.user.address1,
-            address2 : nextProps.user.address2,
-            zipCode : nextProps.user.zipCode,
-            city : nextProps.user.city,
-            country : nextProps.user.country,
             linkedin: nextProps.user.linkedin,
             twitter: nextProps.user.twitter,
             website: nextProps.user.website,
             companyId: nextProps.companyId,
+            value: nextProps.user.geoloc && nextProps.user.geoloc[0].formatted_address ? nextProps.user.geoloc[0].formatted_address :"",
+            valueMetier: nextProps.user.appellationLibelle  ? nextProps.user.appellationLibelle :"",
+            geoloc: nextProps.user.geoloc && nextProps.user.geoloc[0].formatted_address ? nextProps.user.geoloc[0].formatted_address :"",
+            formatted_address:nextProps.user.geoloc && nextProps.user.geoloc[0].formatted_address ? nextProps.user.geoloc[0].formatted_address :"",
+            appellationLibelle:nextProps.user.appellationLibelle  ? nextProps.user.appellationLibelle :"",
             errors: !!!nextProps.errors ? { errors: { message: "" } } : nextProps.errors,
         })
     }
 
     componentDidMount() {
+        console.log("USER ................................");
+        console.log(this.props.user);
         this.setState({
             firstname: this.props.user.firstname,
             lastname: this.props.user.lastname,
@@ -153,10 +194,144 @@ class AccountEtape1 extends Component {
             linkedin: this.props.user.linkedin,
             twitter: this.props.user.twitter,
             website: this.props.user.website,
+            value: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
+            valueMetier: this.props.user.appellationLibelle  ? this.props.user.appellationLibelle :"",
+            geoloc: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
+            route: "",
+            street_number: "",
+            locality: "",
+            administrative_area_level_2: "",
+            administrative_area_level_1: "",
+            country: "",
+            postal_code: "",
+            formatted_address:this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
+            lat:"",
+            lng:"",
+            appellationId:"",
+            appellationLibelle:this.props.user.appellationLibelle  ? this.props.user.appellationLibelle :"",
         })
         
     }
 
+    
+    
+
+    remplirLocation = (typeDonnee, donnee) =>{
+        console.log("DEBUT remplirLocation");
+        console.log(typeDonnee);
+        console.log(donnee);
+        if(typeDonnee=='"street_number"') {
+            this.setState({ street_number: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"route"') {
+            this.setState({ route: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"locality"') {
+            this.setState({ locality: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"administrative_area_level_2"') {
+            this.setState({ administrative_area_level_2: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"administrative_area_level_1"') {
+            this.setState({ administrative_area_level_1: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"country"') {
+            this.setState({ country: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"postal_code"') {
+            this.setState({ postal_code: donnee.replace('"', '') }) 
+        }
+        console.log("FIN remplirLocation");  
+        
+    }
+
+    onSuggestionSelected = (suggestion) => {
+        
+        console.log('Selected suggestion:', suggestion)
+        let address = suggestion.description;
+        var words = address.split(',');
+        if(words.length<3){
+            address = "mairie de "+address;
+        }
+        this.setState({ geoloc: address})
+        this.setState({
+            value: address
+        });
+
+        geocodeByAddress(address)
+            .then(address => {
+                console.log("ADRESSE");
+                console.log(address);
+                if(address[0].address_components[0]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[0].types[0]), JSON.stringify(address[0].address_components[0].long_name))
+                }
+                if(address[0].address_components[1]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[1].types[0]), JSON.stringify(address[0].address_components[1].long_name))
+                }
+                if(address[0].address_components[2]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[2].types[0]), JSON.stringify(address[0].address_components[2].long_name))
+                }
+                if(address[0].address_components[3]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[3].types[0]), JSON.stringify(address[0].address_components[3].long_name))
+                }
+                if(address[0].address_components[4]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[4].types[0]), JSON.stringify(address[0].address_components[4].long_name))
+                }
+                if(address[0].address_components[5]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[5].types[0]), JSON.stringify(address[0].address_components[5].long_name))
+                }
+                if(address[0].address_components[6]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[6].types[0]), JSON.stringify(address[0].address_components[6].long_name))
+                }
+                if(address[0].geometry){
+
+                    console.log(address[0].geometry.location_type);
+                    let gps =JSON.stringify(address[0].geometry.location);
+                    const obj = JSON.parse(gps);  
+                    this.setState({ formatted_address: JSON.stringify(address[0].formatted_address) })     
+                    this.setState({ lat: obj.lat.toString()})     
+                    this.setState({ lng: obj.lng.toString()})     
+                }
+                
+                
+                // console.log("GEOLOC ON geocodeByAddress")
+                // console.log(this.state.geoloc)
+                // document.getElementById("geoloc").value =JSON.stringify(address[0]);
+                // this.props.onSelectionChanged(address[0]);
+            })
+            .catch(error => console.error('Error', error))
+    }
+
+    onSuggestionSelected(suggestion) {
+        
+        // Add your business logic here. In this case we just log...
+        console.log('Selected suggestion:', suggestion)
+      }
+
+    renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions, loading }) => (
+        <div>
+          <input className={styles.inputSearchBar}  {...getInputProps()} />
+          <div >
+            {loading && <div>Loading...</div>}
+            {suggestions.map(suggestion => {
+              const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
+              const style = suggestion.active
+                      ? { backgroundColor: 'red', cursor: 'pointer',border: '1px solid' }
+                      : { backgroundColor: '#123456', cursor: 'pointer',border: '1px solid' };
+              return (<div {...getSuggestionItemProps(suggestion,{className,style})}>
+                <span >{suggestion.description}</span> 
+              </div>
+              )
+            })}
+          </div>
+        </div>
+      );
+
+
+    callbackFunc  = ( autoCompleteData ) => {
+		//You can use the address data, passed by autocomplete as you want.
+	}
+
+
+
+    handleChange = (e) => {    
+        this.setState({ [e.target.name]: e.target.value })
+    }
+    
     onSubmit = (e) => {
         
         e.preventDefault();
@@ -166,6 +341,28 @@ class AccountEtape1 extends Component {
         this.soumettre(e.target.name, "global")
         
     }
+
+    onChange = (e) => {
+
+        this.setState({
+            value: e.target.value
+        });
+
+        if (e.target.value === '') {
+            console.log('cleared');
+            //this.props.onSelectionChanged('');
+        }
+    }
+
+    onBlur(e) {
+        console.log("blur");
+        console.log(e.target.value);
+        console.log(e.target.name);
+        this.setState({ [e.target.name]: e.target.value });
+        
+        this.soumettre(e.target.name, "unitaire");
+    }     
+
     soumettre(champ, type){
         console.log("soumettre");
         console.log(champ);
@@ -190,7 +387,25 @@ class AccountEtape1 extends Component {
             data.append('linkedin', this.state.linkedin)
             data.append('twitter', this.state.twitter)
             data.append('website', this.state.website)
+            console.log("GEOLOC ON SUBMIT")
+            console.log(this.state)
+            data.append('geoloc', this.state.geoloc)
             
+            data.append('street_number', this.state.street_number.replace('"', ''))
+            data.append('route', this.state.route.replace('"', ''))
+            data.append('locality', this.state.locality.replace('"', ''))
+            data.append('administrative_area_level_2', this.state.administrative_area_level_2.replace('"', ''))
+            data.append('administrative_area_level_1', this.state.administrative_area_level_1.replace('"', ''))
+            data.append('country', this.state.country.replace('"', ''))
+            data.append('postal_code', this.state.postal_code.replace('"', ''))
+            data.append('formatted_address', this.state.formatted_address.replace('"', ''))
+            data.append('lat', this.state.lat)
+            data.append('lng', this.state.lng)
+            //Compétences
+            data.append('appellationId', this.state.appellationId)
+            data.append('appellationLibelle', this.state.appellationLibelle)
+
+
             //TODO:maybe add this two in a single transactionnal saga
             this.props.updateUserRequest(data) 
             
@@ -207,7 +422,7 @@ class AccountEtape1 extends Component {
         if (type=="global" || (champ=="lastname" &&  data.lastname=="")) errors.message += " Veuillez saisir votre nom<br />";
         if (type=="global" || (champ=="phone" && data.phone=="")) errors.message += "Veuillez saisir un numéro de téléphone<br />";
         if (type=="global" || (champ=="currentJob" &&  data.currentJob=="")) errors.message += "Veuillez saisir votre intitulé de poste actuel ou poste recherché<br />";
-        if (type=="global" || (champ=="zipCode" && (data.zipCode && data.zipCode!="") && !Validator.isPostalCode(data.zipCode, "FR"))) errors.message += "Le code postal n'est pas correct<br />";
+        // if (type=="global" || (champ=="zipCode" && (data.zipCode && data.zipCode!="") && !Validator.isPostalCode(data.zipCode, "FR"))) errors.message += "Le code postal n'est pas correct<br />";
         // if ((data.website && data.website!="") && !Validator.isURL(data.website)) errors.message += " Veuillez ajouter un site internet avec une url valide<br />";
          if (!Validator.isMobilePhone(data.phone, "fr-FR") && !Validator.isNumeric(data.phone, "fr-FR")) errors.message += "Le téléphone n'est pas correct<br />";
         //console.log(errors.email);
@@ -258,10 +473,108 @@ class AccountEtape1 extends Component {
         this.props.updateUserPictureRequest(data)
     }
 
+    // METIER
+    // Filter logic
+    getSuggestionsMetier = async (valueMetier) => {
+        console.log("getSuggestionsMetier");
+        const inputValue = valueMetier.trim().toLowerCase();
+        let response = await fetch(publicRuntimeConfig.symphonyUrl+"api/getAppelationsLibelle?q=" + inputValue );
+        // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+        let data = await response.json()
+        return data;
+    };
+
+    // Trigger suggestions
+    getSuggestionMetierValue = suggestion => {
+        console.log('getSuggestionMetierValue Le code : '+suggestion.code);
+        console.log('getSuggestionMetierValue Le libellé : '+suggestion.libelle);
+        document.getElementById('appellation_id').value =suggestion.code;
+        document.getElementById('appellation_libelle').value = suggestion.libelle;
+        this.setState({ appellationId: suggestion.code }) 
+        this.setState({ appellationLibelle: suggestion.libelle }) 
+        this.soumettre("appellation", "unitaire") 
+        return suggestion.libelle;
+    }
+    // Render Each Option
+    renderSuggestionMetier = suggestion => (
+    //     <div style="position: absolute; right: 0px; z-index: 1; will-change: transform; top: 0px; left: 0px; transform: translate3d(14px, 53px, 0px);" data-placement="bottom-start">
+    //     <div class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded" style="opacity: 1; transform: none; transform-origin: 0px 0px 0px; transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
+    //       <ul class="MuiList-root MuiList-padding" role="menu" tabindex="-1">
+    //       <div class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" tabindex="0" role="menuitem" aria-disabled="false" id="downshift-0-item-0">
+    //         <div>
+    //           <strong style="font-weight: 500;">{suggestion.libelle} </strong>
+    //           <span style="font-weight: 300;">, {suggestion.code}</span>
+    //         </div>
+    //         <span class="MuiTouchRipple-root"></span>
+    //       </div>
+    //       </ul>
+    //     </div>
+    // </div>
+
+        <span className="suggestion-content" >
+            
+            <span className="name" >
+                {suggestion.libelle} 
+            </span>
+        </span>
+    );
+    refreshPage() {
+        window.location.replace("/");
+    }
+
+    choisirMetier = (code) =>{
+        console.log("choisir metier "+code);
+    }
+
+    handleClick(code, libelle) {
+
+        //console.log('Le code : '+code);
+        // document.getElementById('appellation_id').value =code;
+        // document.getElementById('appellation_libelle').value = libelle;
+        // this.setState({ appellationId: code }) 
+        // this.setState({ appellationLibelle: libelle }) 
+        // this.soumettre("appellation", "unitaire")
+         //console.log('Le libellé : '+libelle);
+      }
+
+        // OnChange event handler
+    onChangeMetier = (event, { newValue }) => {
+        console.log("newValue "+newValue);
+        this.setState({
+            valueMetier: newValue
+        });
+    };
+
+    // Suggestion rerender when user types
+    onSuggestionsMetierFetchRequested = ({ value }) => {
+        this.getSuggestionsMetier(value)
+            .then(data => {
+                if (data.Error) {
+                    this.setState({
+                        suggestionsMetier: []
+                    });
+                } else {
+                    console.log("onSuggestionsMetierFetchRequested"+data);
+                    console.log("onSuggestionsMetierFetchRequested"+value);
+                    this.setState({
+                        suggestionsMetier: data
+                    });
+                }
+            })
+    };
+
+    // Triggered on clear
+    onSuggestionsMetierClearRequested = () => {
+        this.setState({
+            suggestionsMetier: []
+        });
+    };
+
     
 
     render() {
         const { classes, user } = this.props
+        const {  valueMetier, suggestionsMetier } = this.state;
         const logoUrl = user.picture;
         function refresh() {
             document
@@ -269,6 +582,22 @@ class AccountEtape1 extends Component {
                 .reload(true);
             
         }
+
+        const inputPropsMetier = {
+            placeholder: 'Saisir un métier',
+            value:this.state.valueMetier,
+            onChange: this.onChangeMetier
+          };
+
+        const inputProps = {
+            value: this.state.address,
+            onChange: this.onChange,
+          }
+
+        const searchOptions = {
+        componentRestrictions: { country: ['fr'] },
+        }
+
         return (
           <section className={classes.container}>
             <form className={classes.form}
@@ -358,9 +687,18 @@ class AccountEtape1 extends Component {
                         onBlur={this.onBlur} 
                     />
 
-                    
+                    <Autosuggest
+                    suggestions={suggestionsMetier}
+                    onSuggestionsFetchRequested={this.onSuggestionsMetierFetchRequested}
+                    onSuggestionsClearRequested={this.onSuggestionsMetierClearRequested}
+                    getSuggestionValue={this.getSuggestionMetierValue}
+                    renderSuggestion={this.renderSuggestionMetier}
+                    inputProps={inputPropsMetier}
+                    />
+                    <input type="hidden" id="appellation_id" value={this.state.appellationId =='null' || this.state.appellationId ==''  ? '' :this.state.appellationId}></input>
+                    <input type="hidden" id="appellation_libelle" value={this.state.appellationLibelle =='null' || this.state.appellationLibelle ==''  ? '' :this.state.appellationLibelle}></input>
 
-                    <TextField
+                    {/* <TextField
                         name="currentJob"
                         id="outlined"
                         label="Poste actuel"
@@ -368,12 +706,59 @@ class AccountEtape1 extends Component {
                         className={classes.textField}
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
-                        value={this.state.currentJob  ? this.state.currentJob : ''}
+                        value={this.state.currentJob =='null' || this.state.currentJob ==''  ? '' :this.state.currentJob}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    />
+                    /> */}
+                    <div className={classes.container}>
+                        <div 
+                        className={classes.conteneurGoogle}
+                        classes={{ root: classes.rootTextfield }} 
+                        style={{ position: 'relative', zIndex:2, width: '100%' }}>
+                            <label htmlFor="outlined-required"
+                            className={classes.labelGeoloc}>
+                                Adresse
+                            </label>
+                            <div className={classes.conteneurGoogleComposant}>
+                                <GooglePlaceAutocomplete
+                                    style={{ paddingLeft:'14px !important', left: 0, right: 0, zIndex: '2 !important', width: '100%' }}
+                                    name="location"
+                                    label="Location"
+                                    id="outlined-required"
+                                    variant="outlined"
+                                    textFieldProps={{ id: "outlined-required" }}
+                                    className={classes.textField}
+                                    value="test"
+                                    classes={{ root: classes.rootTextfield }} 
+                                    options={this.searchOptions}
+                                    onSuggestionSelected={this.onSuggestionSelected}
+                                    textFieldProps={{ onChange: (e) => this.onChange(e), value: this.state.value, placeholder: 'Ex : Rue de Rivoli, Paris, France', fullWidth: true, size:"small"}}
+                                    types={['(regions)']}
+                                    componentRestrictions={{country: 'fr'}}
+                                    renderTarget={() => (
+                                        <div   
+                                        style={{
+                                            
+                                            width: '100%',
+                                            zIndex:9
+                                        }}
+                                        >
+                                        </div>
+                                    )}
+                                />
+                            </div>
+                        </div>
+                        {/* <Input 
+                        name="geoloc" 
+                        id="geoloc" 
+                        label="geoloc" 
+                        ref="geoloc" 
+                        onChange={this.handleChange}
+                        value={this.state.geoloc =='null' || this.state.geoloc ==''  ? '' :this.state.geoloc}
+                        /> */}
+                    </div>
 
-                    <TextField
+                    {/* <TextField
                         name="address1"
                         id="outlined"
                         label="Adresse"
@@ -383,9 +768,9 @@ class AccountEtape1 extends Component {
                         value={this.state.address1 ? this.state.address1 : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    />
+                    /> */}
 
-                    <TextField
+                    {/* <TextField
                         name="address2"
                         id="outlined"
                         label="Adresse complémentaire"
@@ -395,9 +780,9 @@ class AccountEtape1 extends Component {
                         value={this.state.address2 ? this.state.address2  : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    />    
-                    <div className={classes.container}>
-                    <TextField
+                    />     */}
+                    {/* <div className={classes.container}> */}
+                    {/* <TextField
                         name="zipCode"
                         id="outlined"
                         label="Code postal"
@@ -407,9 +792,9 @@ class AccountEtape1 extends Component {
                         value={this.state.zipCode ? this.state.zipCode : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    /> 
+                    />  */}
 
-                    <TextField
+                    {/* <TextField
                         name="city"
                         id="outlined"
                         label="Ville"
@@ -419,9 +804,9 @@ class AccountEtape1 extends Component {
                         value={this.state.city ? this.state.city : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    />      
+                    />       */}
 
-                    <TextField
+                    {/* <TextField
                         name="country"
                         id="outlined"
                         label="Pays"
@@ -431,8 +816,8 @@ class AccountEtape1 extends Component {
                         value={this.state.country ? this.state.country : ''}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
-                    />
-                    </div>           
+                    /> */}
+                    {/* </div>            */}
 
                     <TextField
                         name="linkedin"
@@ -442,7 +827,7 @@ class AccountEtape1 extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://www.linkedin.com/in/"
-                        value={this.state.linkedin  ? this.state.linkedin : ''}
+                        value={this.state.linkedin =='null' || this.state.linkedin ==''  ? '' :this.state.linkedin}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
 
@@ -456,7 +841,7 @@ class AccountEtape1 extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://twitter.com/.."
-                        value={this.state.twitter   ? this.state.twitter : ''}
+                        value={this.state.twitter =='null' || this.state.twitter ==''  ? '' :this.state.twitter}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
                     />
@@ -466,21 +851,22 @@ class AccountEtape1 extends Component {
                         id="outlined"
                         label="Site internet"
                         className={classes.textField}
-                        classes={{ root: classes.rootTextfield }}
+                        
                         variant="outlined"
                         placeholder="http://monsite.fr"
-                        value={this.state.website ? this.state.website : ''}
+                        value={this.state.website =='null' || this.state.website ==''  ? '' :this.state.website}
                         onChange={this.handleChange}
                         onBlur={this.onBlur} 
                     />
                     <Button
-                            type="submit"
+                            onClick={this.refreshPage}
                             variant="contained"
                             color="primary"
                             
                             className={classes.button}>
                             Enregistrer
                         </Button>
+                        
                 </form>
                 {/* <div id="F" className={classes.foot}>
                     <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Mettre à jour!</Button>
@@ -500,4 +886,4 @@ function mapStateToProps(state, ownProps) {
     };
 }
 
-export default withStyles(styles)(connect(mapStateToProps, {  updateUserRequest })(AccountEtape1));
+export default withStyles(styles)(connect(mapStateToProps, {  updateUserRequest })(AccountEtape1));

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})
@@ -119,7 +122,7 @@ class Etape2 extends React.Component {
     
 
     componentDidMount() {
-        localStorage.setItem('loginRedirect', window.location)
+        localStorage.setItem('loginRedirect', window.location.pathname)
 
         if (!!!localStorage.getItem('ttJWT')) {
             Router.push("/Login")
@@ -197,6 +200,7 @@ class Etape2 extends React.Component {
     render() {
         const {classes, company} = this.props;
         const {loading, activeStep} = this.state;
+        if (typeof global.navigator === 'undefined') global.navigator = {};
         let video;
         if (this.state.videoPres) {
             video = <VideoVimeo videoId={Ar.last(_.split(this.state.videoPres, '/'))}  autoplay='1' classesOverride="videoPresentation"/>;
@@ -207,7 +211,7 @@ class Etape2 extends React.Component {
             <section className={classes.container}>
                 <Fragment>
                     {this.AfficherSuccess()}
-                    { loading ? <LoaderVideo/>  : <div></div> }
+                    { loading ? <LoaderVideo textePrincipal="Votre vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/>  : <div></div> }
                     
                     <div className={classes.root}>
                     <Hidden xsUp>
@@ -218,14 +222,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}
@@ -250,6 +255,7 @@ class Etape2 extends React.Component {
                                 
                                 <div className={classes.recorderContainer}>
                                     <Recorder uploader={this.props.uploadMediaPres} titreBouton="Remplacer ma vidéo"/>
+                                    
                                 </div>
                                 )
                             }

nextjs/components/organisms/AccountEtape3.js

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import { connect } from "react-redux";
 import { fetchCurrentUserRequest } from '../../actions/user'
 import { fetchCompanyRequest } from '../../actions/companies'
-import { uploadMediaCv } from '../../actions/media'
+import { uploadMediaCv } from '../../actions/mediaCv'
 import { withStyles } from '@material-ui/core/styles'
 import { makeStyles } from '@material-ui/styles';
 import { Button, Typography, Divider, Hidden } from '@material-ui/core';
@@ -69,7 +69,7 @@ class Etape3 extends React.Component {
   };
 
   componentDidMount() {
-    localStorage.setItem('loginRedirect', window.location)
+    localStorage.setItem('loginRedirect', window.location.pathname)
 
     if(!!!localStorage.getItem('ttJWT'))
     {
@@ -191,7 +191,7 @@ class Etape3 extends React.Component {
     return (
       <Fragment>
       { loading ? 
-        <LoaderVideo /> :
+        <LoaderVideo textePrincipal="Votre candidature vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/> :
         <Fragment>
           {this.AfficherSuccess()}
           
@@ -246,7 +246,7 @@ function mapStateToProps(state) {
   // console.log(state.media.message)
   return {
     user: state.user ,
-    cvLink : state.media.message,
+    cvLink : state.mediaCv.message,
     loading: !!state.media.loading,
     cv : true,
     //errors:  errorMessageSelector(state),

nextjs/components/organisms/AccountProfile.js

@@ -26,7 +26,7 @@ import BottomNavigation from '@material-ui/core/BottomNavigation';
 import RefreshIcon from '@material-ui/icons/Refresh';
 // import FavoriteIcon from '@material-ui/icons/Favorite'; import LocationOnIcon
 // from '@material-ui/icons/LocationOn';
-
+import Link from 'next/link'
 import Box from '@material-ui/core/Box';
 
 import {

nextjs/components/organisms/AccountProfile2.js

@@ -0,0 +1,325 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+// import AccountStep from "../../components/organisms/AccountStep";
+import AccountInfo from '../organisms/AccountInfo';
+import AccountVideo from '../organisms/AccountVideo';
+import AccountCv from '../organisms/AccountCv';
+import {withStyles} from '@material-ui/core/styles';
+// import Switch from '@material-ui/core/Switch';
+import PhoneIcon from '@material-ui/icons/Phone';
+import MailIcon from '@material-ui/icons/Mail';
+import PublicIcon from '@material-ui/icons/Public';
+import DuoIcon from '@material-ui/icons/Duo';
+import LinkedInIcon from '@material-ui/icons/LinkedIn';
+import Facebook from '@material-ui/icons/Facebook';
+// import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel
+// from '@material-ui/core/FormControlLabel'; import FormControl from
+// '@material-ui/core/FormControl';
+import {updateUserRequest, updateUserPictureRequest} from '../../actions/user'
+import {makeStyles} from '@material-ui/styles';
+import {connect} from 'react-redux'
+import getConfig from 'next/config'
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+// import BottomNavigationAction from
+// '@material-ui/core/BottomNavigationAction';
+import RefreshIcon from '@material-ui/icons/Refresh';
+// import FavoriteIcon from '@material-ui/icons/Favorite'; import LocationOnIcon
+// from '@material-ui/icons/LocationOn';
+import Link from 'next/link'
+import Box from '@material-ui/core/Box';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+import {
+    Card,
+    CardActions,
+    CardContent,
+    Avatar,
+    Typography,
+    Divider,
+    Button,
+    LinearProgress,
+    Stepper,
+    Step,
+    StepLabel,
+    StepContent,
+    StepButton,
+    Paper,
+    Grid
+} from '@material-ui/core';
+
+const styles = theme => ({
+    container: {
+        width: '100%'
+    },
+    button: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(8),
+        marginRight: theme.spacing(8),
+        padding: theme.spacing(1.2, 2),
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.important
+    },
+    stickToBottom: {
+        width: '100%',
+        position: 'fixed',
+        bottom: 0
+    },
+    menu: {
+        backgroundColor: "#DAE8F2"
+    },
+});
+
+const useStyles = makeStyles(theme => ({
+    root: {},
+    details: {
+        display: 'flex'
+    },
+    avatar: {
+        marginLeft: 'auto',
+        height: 110,
+        width: 100,
+        flexShrink: 0,
+        flexGrow: 0
+    },
+    progress: {
+        marginTop: theme.spacing(2)
+    },
+    information: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.palette.primary.main,
+        [
+            theme
+                .breakpoints
+                .up('md')
+        ]: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-around',
+            backgroundColor: theme.palette.primary.main,
+            padding: theme.spacing(7, 7)
+        },
+        '& a': {
+            textDecoration: 'none'
+        }
+    },
+    texteBlanc: {
+        color: "#fff"
+    },
+    uploadButton: {
+        marginRight: theme.spacing(2)
+    },
+    button: {
+        marginTop: theme.spacing(1),
+        marginRight: theme.spacing(1)
+    },
+    actionsContainer: {
+        marginBottom: theme.spacing(2)
+    },
+    resetContainer: {
+        padding: theme.spacing(3)
+    },
+    conteneur:{
+        backgroundColor: "#f3f3f4",
+    }
+}));
+
+function getSteps() {
+    return ['Informations personnelles', 'Vidéo de présentation', 'Expériences professionnelles'];
+}
+
+function getStepContent(step) {
+    switch (step) {
+        case 0:
+            return <AccountEtape1 ></AccountEtape1>;
+        case 1:
+            return <AccountEtape2></AccountEtape2>;
+        case 2:
+            return <AccountEtape3></AccountEtape3>;
+        default:
+            return 'Unknown step';
+    }
+}
+
+const AccountProfile = props => {
+    const {
+        className,
+        user,
+        ...rest
+    } = props;
+    const logoUrl = user.picture;
+    const classes = useStyles();
+
+    // const user = {   name: 'Laurent Laniau',   city: 'Questembert',   country:
+    // 'France',   timezone: '',   avatar: '/images/avatars/avatar_11.png' };
+    const {publicRuntimeConfig} = getConfig()
+    const [activeStep,
+        setActiveStep] = React.useState(0);
+    const [completed,
+        setCompleted] = React.useState(new Set());
+    const [skipped,
+        setSkipped] = React.useState(new Set());
+    const [state,
+        setState] = React.useState({checkedA: true, checkedB: true});
+    const steps = getSteps();
+
+    const totalSteps = () => {
+        return getSteps().length;
+    };
+
+    const isStepOptional = (step) => {
+        return step === 4;
+    };
+
+    const handleSkip = () => {
+        if (!isStepOptional(activeStep)) {
+            // You probably want to guard against something like this it should never occur
+            // unless someone's actively trying to break something.
+            throw new Error("You can't skip a step that isn't optional.");
+        }
+
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+        setSkipped((prevSkipped) => {
+            const newSkipped = new Set(prevSkipped.values());
+            newSkipped.add(activeStep);
+            return newSkipped;
+        });
+    };
+
+    const skippedSteps = () => {
+        return skipped.size;
+    };
+
+    const completedSteps = () => {
+        return completed.size;
+    };
+
+    const allStepsCompleted = () => {
+        return completedSteps() === totalSteps() - skippedSteps();
+    };
+
+    const isLastStep = () => {
+        return activeStep === totalSteps() - 1;
+    };
+
+    const handleNext = () => {
+        const newActiveStep = isLastStep() && !allStepsCompleted()
+            ? // It's the last step, but not all steps have been completed
+            // find the first step that has been completed
+            steps.findIndex((step, i) => !completed.has(i))
+            : activeStep + 1;
+
+        setActiveStep(newActiveStep);
+    };
+
+    const handleBack = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+
+    const handleStep = (step) => () => {
+        console.log("step");
+        console.log(step);
+        setActiveStep(step);
+    };
+
+    const handleComplete = () => {
+        const newCompleted = new Set(completed);
+        newCompleted.add(activeStep);
+        setCompleted(newCompleted);
+
+        /**
+     * Sigh... it would be much nicer to replace the following if conditional with
+     * `if (!this.allStepsComplete())` however state is not set when we do this,
+     * thus we have to resort to not being very DRY.
+     */
+        if (completed.size !== totalSteps() - skippedSteps()) {
+            handleNext();
+        }
+    };
+
+    const handleReset = () => {
+        setActiveStep(0);
+        setCompleted(new Set());
+        setSkipped(new Set());
+    };
+
+    const isStepSkipped = (step) => {
+        return skipped.has(step);
+    };
+
+    const handleChange = (event, newValue) => {
+
+       
+    };
+
+    function isStepComplete(step) {
+        return completed.has(step);
+    }
+    function refresh() {
+        document
+            .location
+            .reload(true);
+        console.log("refresh")
+    }
+
+    return (
+        
+        <Grid
+            container
+            
+            >
+            <Grid item lg={12} md={12} xl={12} xs={12} >
+                <div >
+                    <Paper  elevation={0} >
+
+                            <Tabs
+                            value={1}
+                            onChange={handleChange}
+                            indicatorColor="primary"
+                            textColor="theme.palette.primary.dark"
+                            centered
+                            >
+                                <Link href="/Candidatures"><Tab label="Mes candidatures" /></Link>
+                                <Tab label="Mon profil" />
+                                
+                            </Tabs>
+                    </Paper>
+                   
+                </div>
+            
+            </Grid>
+            <Grid item lg={3} md={3} xl={4} xs={12}>
+                
+                
+            </Grid>
+            <Grid item lg={6} md={6} xl={4} xs={12} >
+                
+                <AccountInfo ></AccountInfo>
+                <AccountVideo ></AccountVideo>
+                <AccountCv ></AccountCv>
+            </Grid>
+            <Grid item lg={3} md={3} xl={4} xs={12}>
+                
+                
+            </Grid>
+
+        </Grid>
+
+    );
+};
+
+AccountProfile.propTypes = {
+    className: PropTypes.string
+};
+function mapStateToProps(state, ownProps) {
+    return {
+        user: state.user,
+        loading: !!state.user.loading,
+        errors: state.user.errors || ownProps.errors
+    };
+}
+
+export default withStyles(styles)(connect(mapStateToProps, {updateUserRequest})(AccountProfile))

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/AccountVideo.js

@@ -0,0 +1,430 @@
+import React, {Fragment} from 'react'
+import {connect} from "react-redux";
+import {makeStyles} from '@material-ui/styles';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import {Button, Typography} from '@material-ui/core';
+import dynamic from 'next/dynamic'
+import {withStyles} from '@material-ui/core/styles'
+import {uploadMediaPres} from '../../actions/media'
+import {errorMessageSelector} from '../../reducers/media'
+import {fetchCompanyRequest} from '../../actions/companies'
+import {fetchCurrentUserRequest} from '../../actions/user'
+import VideoVimeo from '../atoms/VideoVimeo'
+import Router from 'next/router'
+import LoaderVideo from '../templates/loaderVideo'
+import Ar from "lodash/array"
+import Snackbar from '@material-ui/core/Snackbar';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
+import Grid from '@material-ui/core/Grid';
+import Container from '@material-ui/core/Container';
+import Hidden from '@material-ui/core/Hidden';
+import Movie from '@material-ui/icons/Movie';
+
+
+
+
+
+const styles = theme => ({
+    container: {
+        width: '100%',
+    },
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        margin: theme.spacing(1),
+        flexWrap: 'wrap',
+        overflow: 'hidden',
+        backgroundColor: theme.palette.background.paper,
+    },
+    
+    recorderContainer: {
+        //display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%'
+    },
+    rootButton: {
+        textTransform: 'inherit'
+    },
+    underlined: {
+        textDecoration: 'underline'
+    },
+    textButton: {
+        fontWeight: '700',
+        fontSize: '1.15em',
+        paddingLeft: theme.spacing(2)
+    },
+    videoPresentation: {    
+        width: "100%",
+        height: "100%"
+    },
+    conseilButton: {
+        color: "#1e2327",
+        backgroundColor:  "#fff",
+        padding: theme.spacing(3, 2),
+        margin: theme.spacing(1),
+        width: "100%",
+        textAlign: "right",
+        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
+                'px rgba(0, 0, 0, 0.14)',
+        '&:hover': {
+            color: "#1e2327",
+            backgroundColor:  "#fff",
+        }
+    },
+    captureButton: {
+        width:"100%",
+        color: theme.palette.secondary.main,
+        backgroundColor: theme.palette.primary.main,
+        padding: theme.spacing(5, 2),
+        margin: theme.spacing(1),
+        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 4px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.14)',
+        '&:hover': {
+          backgroundColor: theme.palette.primary.main,
+        },
+      },
+    importButton: {
+        color: "#1e2327",
+        backgroundColor:  "#fff",
+        padding: theme.spacing(3, 2),
+        margin: theme.spacing(1),
+        width: "100%",
+        textAlign: "right",
+        boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1' +
+                'px rgba(0, 0, 0, 0.14)',
+        '&:hover': {
+            color: "#1e2327",
+            backgroundColor:  "#fff",
+        }
+    },
+    InputKeyboardArrowDownIconBlank: {
+        fontSize: '2.5em',
+        color: "#ffffff",
+        textAlign: "right"
+    },
+    InputKeyboardArrowDownIcon: {
+        fontSize: '2.5em',
+        color: "#1e2327",
+        textAlign: "right"
+    },
+    buttons :{
+        display: "inline-table",
+    },
+    grille :{
+        paddingTop:theme.spacing(4),
+        width: "100%",
+        marginBottom:"30px",
+        
+        borderRadius: "5px",
+        border: "1px solid #1E2327",
+        color:theme.palette.primary.dark
+    },
+});
+const Recorder = dynamic(() => import ('./Recorder'), {ssr: false})
+class Etape2 extends React.Component {
+    state = {
+        loading: true,
+        activeStep: 0,
+        data: {},
+        openSnack: false,
+        errors: {},
+        success : {},
+        openStudio : false
+    };
+    
+
+    componentDidMount() {
+        localStorage.setItem('loginRedirect', window.location.pathname)
+
+        if (!!!localStorage.getItem('ttJWT')) {
+            Router.push("/Login")
+        } else 
+            this.setState({loading: false, firstname: this.props.user.firstname, videoPres: this.props.user.videoPres, video: this.props.user.presentation_video_id})
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+
+        this.setState({
+            loading: nextProps.loading,
+            openSnack: !!!_.isEmpty(nextProps.errors),
+            errors: !!!nextProps.errors
+                ? {
+                    errors: {
+                        message: ""
+                    }
+                }
+                : nextProps.errors,
+            videoPres: nextProps.videoPres ? nextProps.videoPres : this.props.user.videoPres,
+            video: nextProps.video
+        })
+        //window.location.reload(false);
+        if (nextProps.media.statusPres === 'success') {
+            const success = {};
+            success.message ="Profil mise à jour";
+            this.setState({ success });
+            this.setActiveStep(1);
+        }
+    }
+
+    setActiveStep = (step) => {
+        this.setState({activeStep: step})
+    }
+
+    inputFilesystemChangePres = (e) => {
+        this.uploadMediaPres(e)
+    }
+
+    inputCamRecorderChange = (e) => {
+        this.uploadMediaPres(e)
+    }
+
+    uploadMediaPres = (e) => {
+        var file = e.target.files[0]
+        console.log ("envoi de video pres")
+        const data = new FormData()
+        data.append('upload', file)
+        //this.setState({ videoPres: videoPres })
+        console.log("VIDEO PRES OK");
+        this
+            .props
+            .uploadMediaPres(data);
+        
+    }
+
+    AfficherSuccess() {
+      if (!this.state.success || !this.state.success.message) { 
+          
+      } 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 "";
+    }
+
+    handleClose = (event, reason) => {
+        this.setState({openSnack: false});
+    }
+
+    realise =() =>{
+        console.log("realise");
+        this.setState({ openStudio: true});
+    }
+
+    retour =() =>{
+        console.log("retour");
+        this.setState({ openStudio: false});
+    }
+   
+    render() {
+        const {classes, company} = this.props;
+        const {loading, activeStep} = this.state;
+        let video;
+        if (this.props.user.videoPres) {
+            video = <VideoVimeo videoId={Ar.last(_.split(this.props.user.videoPres, '/'))}  autoplay='1' classesOverride="videoPresentation"/>;
+        } else {
+            video = "----";
+        }
+        if (typeof global.navigator === 'undefined') global.navigator = {};
+        
+        return (
+           
+            <Grid
+            container
+            direction="row"
+            justify="space-between"
+            alignItems="flex-start"
+            className={classes.grille}
+            justify="center"
+            alignItems="center">
+                <Grid item lg={12} md={12} xl={12} xs={12} >
+                    <div id="video">
+                    
+                    <Typography 
+                    align="center"
+                    gutterBottom
+                    variant="headline"
+                    variant="h6"
+                    component="h2" 
+                    className={classes.h6}>
+                    <Movie className={classes.menuIcon}></Movie> Vidéo de présentation
+                    </Typography>
+                    <Typography 
+                    align="center">Donnez envie au recruteur de vous rencontrer grâce à la vidéo !</Typography>
+
+                    </div>
+                    <Fragment>
+                        {this.AfficherSuccess()}
+                        { loading ? <LoaderVideo textePrincipal="Votre vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/>  : <div></div> }
+                        
+                        <div className={classes.root}>
+                        <Hidden xsUp>
+                                &nbsp;                   
+                        </Hidden>
+                        <Container maxWidth="md">
+                            
+                            <Grid container
+                                justify="center"
+                                alignItems="center" 
+                                spacing={2}
+                                className={classes.buttons}>
+                                <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+                                    
+
+
+                                { /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 présentation
+                                            </Typography>
+                                            <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                                            </Button>
+                                        </label>
+                                        </Fragment>
+                                    ):
+                                    (
+
+                                    <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 présentation
+                                          </Typography>
+                                          <KeyboardArrowRightIcon className={ classes.InputKeyboardArrowRightIcon }/>
+                                          </Button>
+                                        :
+                                            <div className={classes.recorderContainer}>
+                                                <Button onClick={this.retour}>Retour au menu</Button>
+                                                <Recorder uploader={this.props.uploadMediaPres} titreBouton="Remplacer ma vidéo"  />
+                                                
+                                            </div>
+                                        }
+                                    </Fragment>
+                                    )
+                                }
+                                </Grid>
+                                <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+                                    
+                                    <div>
+                                            <input
+                                                type="file"
+                                                accept="video/*"
+                                                className={classes.input + ' cypButtonImportVid'}
+                                                style={{display: 'none'}}
+                                                id="import-button-file-pres"
+                                                onChange={this.inputFilesystemChangePres}/>
+                                            <label htmlFor="import-button-file-pres">
+                                                <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 présentation
+
+                                                    </Typography>
+                                                    <KeyboardArrowDownIcon className={classes.InputKeyboardArrowDownIcon}/>
+                                                </Button>
+                                            </label>
+                                    </div>
+                                    <div> 
+                                        <label htmlFor="import-conseil">
+                                            <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.textButton}>
+                                                    <span className={classes.underlined}>Comment</span> créer ma vidéo de présentation
+                                                </Typography>
+                                                <KeyboardArrowDownIcon className={classes.InputKeyboardArrowDownIcon}/>
+                                            </Button>
+                                        </label>
+                                    </div>
+                                
+                                </Grid> 
+                                <Hidden xsUp>
+                                    &nbsp;                   
+                                </Hidden>
+                            
+                                <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
+                                    <div className={classes.videoPresentation}>
+                                        {video}   
+                                    </div>                
+                                </Grid>
+                                
+                            </Grid>
+                        </Container>      
+                        </div>
+                        {/* <div className={classes.textContainer}>
+                            
+                        </div> */}
+                                
+                    </Fragment>
+                </Grid>
+            </Grid>
+            
+
+        );
+    }
+
+}
+
+Etape2.getInitialProps = function (context) {
+
+    const {companyId} = context.query
+    const {res} = context
+    //TODO :really needed ?
+    context
+        .store
+        .dispatch(fetchCurrentUserRequest())
+
+    if (!!companyId) 
+        context.store.dispatch(fetchCompanyRequest(companyId))
+
+    return {}; //leave this please
+}
+
+function mapStateToProps(state) {
+
+    return {
+        loading: !!state.media.loading,
+        media: state.media,
+        offre: state.ad,
+        //errors:  errorMessageSelector(state),
+        user: state.user,
+        company: state.company
+    };
+}
+
+export default withStyles(styles)(connect(mapStateToProps, {fetchCurrentUserRequest, fetchCompanyRequest, uploadMediaPres})(Etape2));

nextjs/components/organisms/Answer.js

@@ -1,6 +1,6 @@
-import React, { Component, Fragment } from 'react'
+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'
@@ -10,6 +10,28 @@ import Avatar from '@material-ui/core/Avatar';
 import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
 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'
+import Dialog from '@material-ui/core/Dialog';
+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/mediaCv'
+import GetApp from '@material-ui/icons/GetApp';
+// import PlacesAutocomplete from 'react-places-autocomplete';
+// import {
+//     geocodeByAddress,
+//     geocodeByPlaceId,
+//     getLatLng,
+//   } from 'react-places-autocomplete';
+// import GoogleAutoComplete from 'react-google-autocomplete-address-fields';
+
+
 
 const styles = theme => ({
     container: {
@@ -61,10 +83,7 @@ const styles = theme => ({
     },
     rootButton: {
         textTransform: 'inherit',
-        border: '1px solid',
-        '&:hover': {
-            border: '1px solid',
-        },
+        
     },
     button: {
         textTransform: 'inherit',
@@ -74,32 +93,89 @@ const styles = theme => ({
         color: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.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,
-        },
+    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: {
+        padding: '4px 8px',
+        textTransform: 'inherit',
+        border: '2px solid #1E2327',
+        color: '#1E2327',
+    },
+    remplacerButton: {
+        color: '#1E2327',
+        borderColor: '#1E2327',
+        border: '2px solid',
+        padding: '9.6px 8px',
+        margin:'15px 0px 25px 0px',
+        textTransform: 'inherit',
+    },
+    popup: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        fontWeight: '400',
+        color: '#8E9092'
+    },
+    player:{
+        width:"100px"
+    },
+    labelGeoloc:{
+        paddingLeft:"14px",
+        fontSize: "0.8rem",
+        color:"#1E2327",
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontWeight: "400",
+        lineHeight: "1",
+        letterSpacing: "0.00938em",    }
+    ,conteneurGoogle:{
+        border:"1px solid rgb(200, 200, 200)",
+        borderRadius :"5px",
+        padding:"5px 0px",
+        
 
+    },
+    conteneurGoogleComposant:{
+        paddingLeft:"14px"
+    }
+    
+});
+export const getCountryFromAddress = (address) => {
+    if (!address) {
+        return '';
+    }
+    try {
+        const country = address.address_components.filter(component => component.types.includes('country')).map(c => c.long_name)[0];
+        console.log('using country for filter ' + country);
+        return country;
+    } catch (error) {
+        console.log(error);
+        return '';
+    }
+}
 const { publicRuntimeConfig } = getConfig()
+
 //https://xd.adobe.com/view/ba98331a-9145-4d67-7e27-25a36e519ef4-cca9/screen/a96779d7-bdb3-410a-8f19-e6987acb98ee/Candidature-Step-3
 class Answer extends Component {
-
+    
     constructor(props) {
         super(props);
 
-        // This binding is necessary to make `this` work in the callback
-        this.onSubmit = this.onSubmit.bind(this);
+        
+        const viewValue = this.props.value;
+        
+        this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
+        this.onChange = this.onChange.bind(this);
+         
     }
 
     state = {
@@ -108,52 +184,348 @@ class Answer extends Component {
         lastname: '',
         phone: '',
         currentJob: '',
+        geoloc: '',
+        value:'',
+        route: '',
+        street_number: '',
+        locality: '',
+        administrative_area_level_2: '',
+        administrative_area_level_1: '',
+        country: '',
+        postal_code: '',
+        formatted_address:"",
+        lat:"",
+        lng:"",
         linkedin: '',
         twitter: '',
         website: '',
         mediaId: null,
+        mediaUrl: null,
+        thumbnails:null,
+        heure: null,
         companyId: null,
+        address:'',
+        errorMessage:'',
+        open: false,
+        loading: true,
+        openSnack: false,
+        cv:false,
     };
 
-    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,
+            firstname: this.state.firstname,
+            lastname: this.state.lastname,
+            phone: this.state.phone,
+            currentJob: this.state.currentJob,
+            geoloc: this.state.geoloc,
+            value: this.state.value,
+            route: this.state.route,
+            street_number: this.state.street_number,
+            locality: this.state.locality,
+            administrative_area_level_2: this.state.administrative_area_level_2,
+            administrative_area_level_1: this.state.administrative_area_level_1,
+            country: this.state.country,
+            postal_code: this.state.postal_code,
+            formatted_address : this.state.formatted_address,
+            lat:this.state.lat,
+            lng: this.state.lng,
+            linkedin: this.state.linkedin,
+            twitter: this.state.twitter,
+            website: this.state.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,
+            value: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
+            geoloc: this.props.user.geoloc && this.props.user.geoloc[0].formatted_address ? this.props.user.geoloc[0].formatted_address :"",
+            route: "",
+            street_number: "",
+            locality: "",
+            administrative_area_level_2: "",
+            administrative_area_level_1: "",
+            country: "",
+            postal_code: "",
+            formatted_address:"",
+            lat:"",
+            lng:"",
             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.user.cv
+
         })
+        console.log(this.state);
     }
+    
+    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 });
+    }
+
+    closeDialog() {
+        this.setState({ open: false });
+    }
+
+    refreshDialog() {
+        this.setState({ open: false });
+        window.location.reload();
+    }
+
+    onChange = (e) => {
+
+        this.setState({
+            value: e.target.value
+        });
+
+        if (e.target.value === '') {
+            console.log('cleared');
+            //this.props.onSelectionChanged('');
+        }
+    }
+
+    remplirLocation = (typeDonnee, donnee) =>{
+        console.log("DEBUT remplirLocation");
+        console.log(typeDonnee);
+        console.log(donnee);
+        if(typeDonnee=='"street_number"') {
+            this.setState({ street_number: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"route"') {
+            this.setState({ route: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"locality"') {
+            this.setState({ locality: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"administrative_area_level_2"') {
+            this.setState({ administrative_area_level_2: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"administrative_area_level_1"') {
+            this.setState({ administrative_area_level_1: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"country"') {
+            this.setState({ country: donnee.replace('"', '') }) 
+        }else if(typeDonnee=='"postal_code"') {
+            this.setState({ postal_code: donnee.replace('"', '') }) 
+        }
+        console.log("FIN remplirLocation");  
+        
+    }
+
+    onSuggestionSelected = (suggestion) => {
+        
+        console.log('Selected suggestion:', suggestion)
+        let address = suggestion.description;
+        var words = address.split(',');
+        if(words.length<3){
+            address = "mairie de "+address;
+        }
+        this.setState({ geoloc: address})
+        this.setState({
+            value: address
+        });
+
+        geocodeByAddress(address)
+            .then(address => {
+                console.log("ADRESSE");
+                console.log(address);
+                if(address[0].address_components[0]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[0].types[0]), JSON.stringify(address[0].address_components[0].long_name))
+                }
+                if(address[0].address_components[1]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[1].types[0]), JSON.stringify(address[0].address_components[1].long_name))
+                }
+                if(address[0].address_components[2]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[2].types[0]), JSON.stringify(address[0].address_components[2].long_name))
+                }
+                if(address[0].address_components[3]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[3].types[0]), JSON.stringify(address[0].address_components[3].long_name))
+                }
+                if(address[0].address_components[4]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[4].types[0]), JSON.stringify(address[0].address_components[4].long_name))
+                }
+                if(address[0].address_components[5]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[5].types[0]), JSON.stringify(address[0].address_components[5].long_name))
+                }
+                if(address[0].address_components[6]){
+                    this.remplirLocation(JSON.stringify(address[0].address_components[6].types[0]), JSON.stringify(address[0].address_components[6].long_name))
+                }
+                if(address[0].geometry){
+
+                    console.log(address[0].geometry.location_type);
+                    let gps =JSON.stringify(address[0].geometry.location);
+                    const obj = JSON.parse(gps);  
+                    this.setState({ formatted_address: JSON.stringify(address[0].formatted_address) })     
+                    this.setState({ lat: obj.lat.toString()})     
+                    this.setState({ lng: obj.lng.toString()})     
+                }
+                
+                
+                // console.log("GEOLOC ON geocodeByAddress")
+                // console.log(this.state.geoloc)
+                // document.getElementById("geoloc").value =JSON.stringify(address[0]);
+                // this.props.onSelectionChanged(address[0]);
+            })
+            .catch(error => console.error('Error', error))
+    }
+
+    onSuggestionSelected(suggestion) {
+        
+        // Add your business logic here. In this case we just log...
+        console.log('Selected suggestion:', suggestion)
+      }
+
+    renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions, loading }) => (
+        <div>
+          <input className={styles.inputSearchBar}  {...getInputProps()} />
+          <div >
+            {loading && <div>Loading...</div>}
+            {suggestions.map(suggestion => {
+              const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
+              const style = suggestion.active
+                      ? { backgroundColor: 'red', cursor: 'pointer',border: '1px solid' }
+                      : { backgroundColor: '#123456', cursor: 'pointer',border: '1px solid' };
+              return (<div {...getSuggestionItemProps(suggestion,{className,style})}>
+                <span >{suggestion.description}</span> 
+              </div>
+              )
+            })}
+          </div>
+        </div>
+      );
+
+
+    callbackFunc  = ( autoCompleteData ) => {
+		//You can use the address data, passed by autocomplete as you want.
+	}
+
+
+
+    handleChange = (e) => {    
+        this.setState({ [e.target.name]: e.target.value })
+    }
+
+
+    
 
     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)
         data.append('lastname', this.state.lastname)
         data.append('phone', this.state.phone)
         data.append('currentJob', this.state.currentJob)
+        console.log("GEOLOC ON SUBMIT")
+        console.log(this.state)
+        data.append('geoloc', this.state.geoloc)
+        
+        data.append('street_number', this.state.street_number.replace('"', ''))
+        data.append('route', this.state.route.replace('"', ''))
+        data.append('locality', this.state.locality.replace('"', ''))
+        data.append('administrative_area_level_2', this.state.administrative_area_level_2.replace('"', ''))
+        data.append('administrative_area_level_1', this.state.administrative_area_level_1.replace('"', ''))
+        data.append('country', this.state.country.replace('"', ''))
+        data.append('postal_code', this.state.postal_code.replace('"', ''))
+        data.append('formatted_address', this.state.formatted_address.replace('"', ''))
+        data.append('lat', this.state.lat)
+        data.append('lng', this.state.lng)
+        //
         data.append('linkedin', this.state.linkedin)
         data.append('twitter', this.state.twitter)
         data.append('website', this.state.website)
@@ -166,38 +538,67 @@ class Answer extends Component {
         //     //TODO Envoyer un mail a chaque user
         //     console.log(user.email)
         // )
+        // US 471 : TODO envoyer le lien du cv pour le mettre dans la candidature (this.state.cvLink)
+        
+        console.log(this.state.cvLink, "lien CV")
         this.props.postAdAnswerRequest(
             {
                 adId: this.props.adId,
                 companyId: this.props.companyId,
-                mediaId: this.props.mediaId
+                mediaId: this.props.mediaId,
+                mediaUrl: this.props.mediaUrl,
+                thumbnails : this.props.thumbnails,
+                heure: this.props.heure
             })
     }
 
-    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)
+    //     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));
     }
+    
+
+    
 
     render() {
         const { classes, user } = this.props
         const logoUrl = user.picture;
+        const { loading } = this.state;
+        const inputProps = {
+            value: this.state.address,
+            onChange: this.onChange,
+          }
+          const searchOptions = {
+            componentRestrictions: { country: ['fr'] },
+          }
+        
         return (
             <section className={classes.container}>
+                
                 <form className={classes.form}
                     autoComplete="off">
                     {!!logoUrl && <Avatar className={classes.logo}
                         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}
@@ -217,19 +618,35 @@ class Answer extends Component {
                                     <KeyboardArrowRightIcon className={classes.InputKeyboardArrowRightIcon} />
                                 </Button>
                             </label></Fragment>)
-                    }
-                    <TextField
-                        name="lastname"
-                        required
-                        id="outlined-required"
-                        label="Nom"
-                        className={classes.textField}
-                        classes={{ root: classes.rootTextfield }}
-                        variant="outlined"
-                        value={this.state.lastname}
-                        onChange={this.handleChange}
+                    } */}
+                    <Player fluid={false} width={"75%"} height={350} 
+                    playsInline className={classes.player} 
+                     src={publicRuntimeConfig.symphonyUrl + "uploads/videos/"+this.state.mediaUrl}
+                    //src={this.state.mediaUrl}
+                    // src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
                     />
 
+                    
+                    <Button className={classes.remplacerButton} onClick={this.openDialog.bind(this)}>
+                        Remplacer ma vidéo
+                    </Button>
+                    <Dialog open={this.state.open}>
+                        <DialogTitle> Souhaitez-vous remplacer votre vidéo de réponse ?</DialogTitle>
+                        <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>
+                            Annuler
+                        </Button>
+                        <Button onClick={this.refreshDialog.bind(this)} >
+                            Remplacer
+                        </Button>
+                        </DialogActions>
+                    </Dialog>
+
+                    
+                    
+                     
                     <TextField
                         name="firstname"
                         required
@@ -240,8 +657,71 @@ 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
+                        name="lastname"
+                        required
+                        id="outlined-required"
+                        label="Nom"
+                        className={classes.textField}
+                        classes={{ root: classes.rootTextfield }}
+                        variant="outlined"
+                        value={this.state.lastname}
+                        onChange={this.handleChange}
+                        error={!!_.isEmpty(this.state.lastname)}
+                        helperText={!!_.isEmpty(this.state.lastname) && "Veuillez saisir votre nom"}
+                        required
+                    />
+
+                    <div 
+                    className={classes.conteneurGoogle}
+                    classes={{ root: classes.rootTextfield }} 
+                    style={{ position: 'relative', zIndex:2, width: '100%' }}>
+                         <label htmlFor="outlined-required"
+                          className={classes.labelGeoloc}>
+                            Adresse
+                        </label>
+                        <div className={classes.conteneurGoogleComposant}>
+                            <GooglePlaceAutocomplete
+                                style={{ paddingLeft:'14px !important', left: 0, right: 0, zIndex: '2 !important', width: '100%' }}
+                                name="location"
+                                label="Location"
+                                id="outlined-required"
+                                variant="outlined"
+                                textFieldProps={{ id: "outlined-required" }}
+                                className={classes.textField}
+                                classes={{ root: classes.rootTextfield }} 
+                                options={this.searchOptions}
+                                onSuggestionSelected={this.onSuggestionSelected}
+                                textFieldProps={{ onChange: (e) => this.onChange(e), value: this.state.value, placeholder: 'Ex : Rue de Rivoli, Paris, France', fullWidth: true, size:"small"}}
+                                types={['(regions)']}
+                                componentRestrictions={{country: 'fr'}}
+                                renderTarget={() => (
+                                    <div   
+                                    style={{
+                                        
+                                        width: '100%',
+                                        zIndex:9
+                                    }}
+                                    >
+                                    </div>
+                                )}
+                            />
+                        </div>
+                       
+                        {/* <Input 
+                        name="geoloc" 
+                        id="geoloc" 
+                        label="geoloc" 
+                        ref="geoloc" 
+                        onChange={this.handleChange}
+                        value={this.state.geoloc =='null' || this.state.geoloc ==''  ? '' :this.state.geoloc}
+                        /> */}
+                    </div>
+
                     <TextField
                         name="phone"
                         id="outlined"
@@ -252,6 +732,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
@@ -271,10 +752,33 @@ class Answer extends Component {
                         className={classes.textField}
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
-                        value={this.state.currentJob}
+                        value={this.state.currentJob =='null' || this.state.currentJob ==''  ? '' :this.state.currentJob}
                         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"
@@ -283,7 +787,7 @@ class Answer extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://www.linkedin.com/in/"
-                        value={this.state.linkedin}
+                        value={this.state.linkedin =='null' || this.state.linkedin ==''  ? '' :this.state.linkedin}
                         onChange={this.handleChange}
 
                     />
@@ -296,7 +800,7 @@ class Answer extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://twitter.com/.."
-                        value={this.state.twitter}
+                        value={this.state.twitter =='null' || this.state.twitter ==''  ? '' :this.state.twitter}
                         onChange={this.handleChange}
                     />
 
@@ -308,9 +812,10 @@ class Answer extends Component {
                         classes={{ root: classes.rootTextfield }}
                         variant="outlined"
                         placeholder="http://monsite.fr"
-                        value={this.state.website}
+                        value={this.state.website =='null' || this.state.website ==''  ? '' :this.state.website}
                         onChange={this.handleChange}
                     />
+                    
                 </form>
                 <div id="F" className={classes.foot}>
                 <Button variant="contained" className={classes.button + ' cypButtonSendApplication'} onClick={this.onSubmit}>Envoyer ma candidature</Button>
@@ -321,13 +826,24 @@ class Answer extends Component {
 }
 
 function mapStateToProps(state, ownProps) {
+    // console.log(state.media.message.heure);
     return {
-        user: state.user,
-        loading: !!state.user.loading,
+        user: state.user ,
+        cvLink : state.mediaCv.message,
+        loading: !!state.media.loading,
+        cv : true,
+        // user: state.user,
+        // loading: !!state.user.loading,
         pictureLoading: !!state.user.pictureLoading,
         errors: state.user.errors || ownProps.errors,
         mediaId: state.media.message && state.media.message.mediaId,
+        mediaUrl: state.media.message && state.media.message.originalUrl,
+        thumbnails: state.media.message && state.media.message.thumbnails,
+        mediaUrlVimeo: state.media.message && state.media.message.uriVimeo,
+        mediaFileName: state.media.message && state.media.message.filename,
+        heure: state.media.message && state.media.message.heure,
     };
+    
 }
 
-export default withStyles(styles)(connect(mapStateToProps, { postAdAnswerRequest, updateUserRequest, updateUserPictureRequest })(Answer))
+export default withStyles(styles)(connect(mapStateToProps, { postAdAnswerRequest, updateUserRequest, updateUserPictureRequest, uploadMediaCv })(Answer))

nextjs/components/organisms/AnswerDetail.js

@@ -0,0 +1,39 @@
+import React, { Fragment } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import _ from "lodash"
+import Ar from "lodash/array"
+import VideoVimeo from '../atoms/VideoVimeo'
+
+const useStyles = makeStyles(theme => ({
+    card: {
+        width: '100%',
+    },
+    title: {
+        fontSize: '1em',
+        fontWeight: '500',
+    },
+    titleBorder: {
+        '&:after': {
+            content: '""',
+            width: '15px',
+            borderBottom: 'solid 2px',
+            borderColor: theme.palette.primary.main + '!important',
+            display: 'flex',
+        },
+    },
+    video: {
+        [theme.breakpoints.up('md')]: {
+            paddingBottom: '35%', /* 16:9 */
+        },
+    }
+}));
+
+export default function CandidatureDetail(props) {
+    const classes = useStyles();
+
+    return (
+        <Fragment>
+            <VideoVimeo classes={{ video: classes.video }}  videoId={Ar.last(_.split(props.video.cdn_url, '/'))} />
+        </Fragment>
+    );
+}

nextjs/components/organisms/AnswerRow.js

@@ -8,7 +8,7 @@ import Chip from '@material-ui/core/Chip';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
-import IconText from './../atoms/IconText';
+import IconText from './../atoms/IconTextInline';
 import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import Link from 'next/link';
@@ -83,11 +83,11 @@ const styles = theme => ({
   },
   iconTextIcon: {
     color: theme.palette.offerlistitem.icon,
-    fontSize: '0.8em',
+    fontSize: '1em',
   },
   iconTextText: {
     color: theme.palette.offerlistitem.text,
-    fontSize: '0.6em',
+    fontSize: '1em',
     paddingLeft: theme.spacing(1),
   },
   bottomCard: {
@@ -96,8 +96,9 @@ const styles = theme => ({
     width: '90%',
   },
   chip: {
-    color: theme.palette.secondary.main,
-    backgroundColor: theme.palette.primary.important,
+    marginTop :"10px",
+    backgroundColor:"#E7F3FF",
+    color:theme.palette.primary.dark,
   },
   icon: {
     color: theme.palette.secondary.dark,
@@ -112,50 +113,30 @@ const { publicRuntimeConfig } = getConfig()
 //must go in API
 const status = new Map([
 
-  ["DRAFT"
-    , "Brouillon"]
+  ["A_TRAITER"
+    , "Envoyée"]
   ,
-  ["TO_PUBLISH"
-    , "En cours de validation"]
+  ["CONTACTE"
+    , "En cours de traitement"]
   ,
-  ["VALIDATED"
-    , "Validée"]
+  ["ENTRETIEN"
+    , "En cours de traitement"]
   ,
-  ["PUBLISHED"
-    , "Publiée"]
+  ["REFUSE"
+    , "Refusée"]
   ,
-  ["CLOSED"
-    , "Cloturée"]
+  ["EMBAUCHE"
+    , "Embauchée"]
   ,
   ["EXPIRED"
     , "Expirée"]
   ,
-  ["SENDED"
+  [""
     , "Envoyée"]
   ,
-  ["DECLINED"
-    , "Refusée"]
+  ["Null"
+    , "Envoyée"]
   ,
-  ["NEW"
-    , "Nouveau"]
-  ,
-  ["VIEWED"
-    , "Visionnée"]
-  ,
-  ["NEGATIVE"
-    , "Négatif"]
-  ,
-  ["POSITIVE"
-    , "Positif"]
-  ,
-  ["INFOS"
-    , "Demande d’informations"]
-  ,
-  ["CONTACTED"
-    , "Demande d’informations"]
-  ,
-  ["CONTACTED.RDV"
-    , "Convocation entretien"]
 
 ])
 class AnswerRowComponent extends React.Component {
@@ -169,14 +150,16 @@ class AnswerRowComponent extends React.Component {
       companyR = rowData.ad.company;
     else
       companyR = company;
-
+    console.log(rowData);
+    const ville = (rowData.ad && rowData.ad.location && rowData.ad.location.gmap_address && rowData.ad.location.gmap_address.address_components[0] )
+      ? rowData.ad.location.gmap_address.address_components[0].long_name
+      : "ND"
     const imgUrl = (rowData.ad && rowData.ad.video && rowData.ad.video.thumbnails[0] && rowData.ad.video.thumbnails[0].sizes[4])
       ? rowData.ad.video.thumbnails[0].sizes[4].link
       : publicRuntimeConfig.adListDefaultUrl
     const logoUrl = publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + companyR.logo
-
     return (
-      <Link href={`/Candidature/${rowData.id}`} >
+      <Link href={`/Answer/${rowData.id}`} >
         <Card className={classes.card} >
           {rowData.ad ? (
               <CardContent className={classes.content}>
@@ -204,8 +187,18 @@ class AnswerRowComponent extends React.Component {
                   className={classes.companyTitle}>
                   {rowData.ad.company.brand_name&&rowData.ad.company.brand_name}
                 </Typography>
+                <Typography
+                  variant="headline"
+                  variant="h6"
+                  component="h4"
+                  className={classes.companyTitle}>
+                  <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="place" text={ville} />  
+                  <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={rowData.ad.extra&&rowData.ad.extra.contract_type?rowData.ad.extra.contract_type:"ND"} />  
+                  <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={(new Date(rowData.c_time)).toLocaleDateString("fr-FR")} />  
+                  
+                </Typography>
                 <div className={ classes.bottomCard }>
-                  <Chip size="small" label={status.get(rowData.status)} className={classes.chip} />
+                  <Chip size="small" label={status.get(rowData.status_reponse)? status.get(rowData.status_reponse) : "Envoyée" } className={classes.chip} />
                   <ArrowForwardIcon className={classes.icon} />
                 </div>
               </div>
@@ -236,8 +229,15 @@ class AnswerRowComponent extends React.Component {
                   className={classes.companyTitle}>
                   {rowData.company.brand_name&&rowData.company.brand_name}
                 </Typography>
+                <Typography
+                  variant="headline"
+                  variant="h6"
+                  component="h4"
+                  className={classes.companyTitle}>
+                  <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={(new Date(rowData.c_time)).toLocaleDateString("fr-FR")} />  
+                </Typography>
                 <div className={ classes.bottomCard }>
-                  <Chip size="small" label={status.get(rowData.status)} className={classes.chip} />
+                <Chip size="small" label={status.get(rowData.status_reponse)? status.get(rowData.status_reponse) : "Envoyée" } className={classes.chip} />
                   <ArrowForwardIcon className={classes.icon} />
                 </div>
               </div>

nextjs/components/organisms/Chat.js

@@ -9,8 +9,9 @@ import IconAdd from '@material-ui/icons/Add';
 import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
 import { useDispatch } from 'react-redux';
 import { useSelector } from 'react-redux'
-
-
+import {  Grid, Hidden} from '@material-ui/core';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import { Typography } from '@material-ui/core';
 const useStyles = makeStyles(theme => ({
     card: {
         width: '100%',
@@ -44,23 +45,13 @@ const useStyles = makeStyles(theme => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        backgroundColor: theme.palette.input.main,
         padding: theme.spacing(1),
         width: '100%',
         [theme.breakpoints.up('md')]: {
             padding: theme.spacing(3),
         },
     },
-    button: {
-        backgroundColor: 'inherit',
-        borderRadius: '0',
-        '& svg': {
-            fontSize: '1.5rem',
-            [theme.breakpoints.up('sm')]: {
-                fontSize: '2rem',
-            },
-        }
-    },
+
     icon: {
         color: theme.palette.secondary.main,
         background: theme.palette.primary.important,
@@ -85,6 +76,68 @@ const useStyles = makeStyles(theme => ({
             display: 'flex',
         },
     },
+    grille: {
+        paddingTop: theme.spacing(4),
+        paddingBottom: theme.spacing(4),
+        paddingLeft : theme.spacing(4),
+        marginBottom: "30px",
+
+        borderRadius: "5px",
+        border: "1px solid #1E2327",
+        color: theme.palette.primary.dark
+    },
+    menuLien: {
+        fontSize: "1em",
+        textTransform: "uppercase",
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        color: theme.palette.primary.dark,
+        textDecoration: "none",
+        '&:hover': {
+            color: theme.palette.primary.dark
+        },
+        '&:active': {
+            color: theme.palette.primary.dark
+        },
+        '&:visited': {
+            color: theme.palette.primary.dark
+        }
+    },
+    grilleGauche: {
+        textAlign: "center"
+    },
+    grilleDroite: {
+        textAlign: "center"
+    },
+    grilleBas: {
+        backgroundColor: theme.palette.secondary.dark
+    },
+    chip: {
+        marginTop: "10px",
+        backgroundColor: "#E7F3FF",
+        color: theme.palette.primary.dark
+    },
+    icon: {
+        color: theme.palette.secondary.dark
+    },
+    cartoucheEntreprise: {
+        // display: 'flex',
+        padding: theme.spacing(2) + 'px ',
+        [theme.breakpoints.up('md')]: {
+            padding: theme.spacing(2) + 'px 18vw',
+        },
+    },
+    textField: {
+        width: '85%',
+        '&:disabled': {
+            color: theme.palette.secondary.dark,
+        },
+        '& label': {
+            color: theme.palette.primary.dark,
+        },
+        '& fieldset:hover': {
+            borderColor: theme.palette.primary.main + ' !important',
+        },
+    },
 }));
 
 
@@ -105,42 +158,95 @@ function Chat(props) {
         sendMessage(text);
         setText('');
     }
+    // const logoUrl = (props.answer.ad
+    //     ? (props.answer.ad.company.logo
+    //         ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + this.props.answer.ad.company.logo
+    //         : publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg")
+    //     : "")
+    const logoUrl = props.logoUrl
 
     return (
         <Fragment>
-            <div className={classes.wrapper}>
-                <div className={classes.contain}>
-                    {
-                            _.orderBy(messages, ['c_time'], ['asc']).map((message, index) => {
-                                return <ChatCard message={message} key={index}></ChatCard>
-                            })
-                    }
+            <section className={classes.cartoucheEntreprise}>
+                <Grid container spacing={2} className={classes.grille}>
+                    <Grid item>
+                        <ButtonBase className={classes.image}>
+                            <img alt="talents-tube" src={logoUrl} className={classes.userAvatar}/>
+                        
+                        </ButtonBase>
+                    </Grid>
+                    <Grid item lg={12} xl container>
+                        <Grid item xs container direction="column" spacing={2}>
+                            <Grid item xl>
+                                <Typography gutterBottom variant="subtitle1">
+                                    {props.nomCompany}
+                                    {/* {(this.props.answer.ad
+                                        ? (this.props.answer.ad.company.brand_name
+                                            ? this.props.answer.ad.company.brand_name
+                                            : "")
+                                        : this.props.answer.company.brand_name)} */}
+                                </Typography>
+                                <Typography variant="body2" gutterBottom>
+                                    {props.nomAd}
+                                    {/* {this.props.answer.ad
+                                        ? (this.props.answer.ad.title
+                                            ? this.props.answer.ad.title
+                                            : "Candidature spontanée")
+                                        : "Candidature spontanée"} */}
+                                </Typography>
+                                
+                            </Grid>
+                        
+                        </Grid>
+                        
+                    </Grid>
+                </Grid>
+            </section>
+            <section className={classes.cartoucheEntreprise}>
+                
+                    <Grid container spacing={2} className={classes.grille} direction="column">
+                        <Grid item >                 
+                        <TextField
+                            fullWidth
+                            multiline
+                            rows={10}
+                            name="chattext"
+                            id="outlined"
+                            label="Envoyer un email"
+                            value={text}
+                            onChange={(e) => setText(e.target.value)}
+                            placeholder={"Ecrivez un message pour l'entreprise"}
+                            variant="outlined"
+                            className={classes.textField}
 
-                </div>
-            </div>
+                        />
+                        </Grid>
+                        <Grid item>  
+                            <Button
+                                    onClick={()=>postMessage()}
+                                    variant="contained"
+                                    color="primary"
+                                    className={classes.button}>
+                                    Envoyer
+                            </Button>
+                        </Grid>
+                </Grid>
+                <Grid container spacing={2}  direction="column">
+                    <div>
+                        {
+                                _.orderBy(messages, ['c_time'], ['desc']).map((message, index) => {
+                                    return <ChatCard message={message} key={index}></ChatCard>
+                                })
+                        }
+
+                    </div>                    
+                </Grid>
+                    
+               
+            </section>
             <div id="F" className={classes.foot}>
-                <div className={classes.filterForm}>
-                    <TextField
-                        fullWidth
-                        multiline
-                        rows={isWidthUp('md', props.width) ? 8 : 1}
-                        id="standard-search"
-                        name="chattext"
-                        value={text}
-                        onChange={(e) => setText(e.target.value)}
-                        placeholder={"Message"}
-                        className={classes.textField}
-                        InputLabelProps={{
-                            shrink: true,
-                        }}
-                    />
-                    <Button onClick={()=>postMessage()}
-                        disabled={loadingMessage}
-                        variant="contained"
-                        className={classes.button}>
-                        <ArrowUpwardIcon className={classes.icon}/>
-                    </Button >
-                </div>
+                
+                
             </div>
 
         </Fragment>

nextjs/components/organisms/CompanyRow.js

@@ -139,7 +139,7 @@ class CompanyRowComponent extends React.Component {
   render() {
     const { classes, theme, rowData } = this.props;
 
-    const imgDefaultUrl = "/static/images/default/default_picture_company.svg"
+    const imgDefaultUrl = "https://blog.talentstube.com/wp-content/uploads/2021/01/default_picture_company.jpg"
 
     const imgUrl = (rowData.presentation_video && rowData.presentation_video.thumbnails[0] && rowData.presentation_video.thumbnails[0].sizes[4]) ? rowData.presentation_video.thumbnails[0].sizes[4].link : imgDefaultUrl
     const logoUrl = publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + rowData.logo

nextjs/components/organisms/Footer.js

@@ -5,10 +5,11 @@ import { Fragment } from 'react';
 import NewsLetterRegistration from './NewsLetterRegistration'
 import dynamic from 'next/dynamic'
 import Button from '@material-ui/core/Button'
-
+import getConfig from 'next/config'
 const PWAInstallSnack = dynamic(() => import('./PWAInstallSnack'), {
     ssr: false
 });
+const { publicRuntimeConfig } = getConfig();
 
 const styles = theme => ({
     root: {
@@ -58,7 +59,7 @@ const styles = theme => ({
     titleContainer: {
         color: theme.palette.primary.darkMain,
         fontSize: '1.5em',
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontWeight: '600',
         [theme.breakpoints.up('md')]: {
             fontSize: '1.2em',
@@ -112,7 +113,7 @@ const styles = theme => ({
         },
     },
     titleReactApp: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         paddingTop: theme.spacing(4),
@@ -152,6 +153,11 @@ const styles = theme => ({
         justifyContent: 'center',
         padding: theme.spacing(6, 4),
     },
+    version:{
+        marginTop: '15px',
+        fontSize: '0.7em',
+        fontWeight: '300',
+    }
 
 });
 
@@ -197,7 +203,7 @@ function Footer(props) {
                     <Link href="/Offres"  >
                         <a>
                             <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
-                                Offre d'emploi
+                                Offres d'emploi
                             </Typography>
                         </a>
                     </Link>
@@ -215,6 +221,12 @@ function Footer(props) {
                             </Typography>
                         </a>
                     </Link>
+                    <a href="https://blog.talentstube.com" target="_blank">
+                        <Typography gutterBottom color="secondary" component="p" className={classes.textContainer} 
+                                    >
+                            Blog
+                        </Typography>
+                    </a>
                 </section>
                 <section className={classes.container}>
                     <Typography color="secondary" component="p" className={classes.titleContainer}>
@@ -262,7 +274,7 @@ function Footer(props) {
                         56 000 Vannes
                 </Typography>
                     <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
-                    <a href="tel:+33230050631"  >02.30.05.06.31 </a> 
+                    <a href="tel:+33756850954"  >07.56.85.09.54 </a> 
                 </Typography>
                     {/* <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                         contact@talentstube.com
@@ -277,6 +289,9 @@ function Footer(props) {
                 <a href="https://www.bretagne.bzh/" target="_blank" className={classes.darkMenuItem} rel="noopener">
                     <img alt="Région Bretagne" src='/static/images/logos/Logo-region.svg' className={classes.footerLogo} />
                 </a>
+                <Typography   className={classes.version} align="center" >
+                {publicRuntimeConfig.version}
+                </Typography>
             </section>
         </div>
     );

nextjs/components/organisms/FooterAccueil.js

@@ -0,0 +1,246 @@
+import Link from 'next/link'
+import { withStyles } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core';
+import { Fragment } from 'react';
+import NewsLetterRegistration from './NewsLetterRegistration'
+import dynamic from 'next/dynamic'
+import Button from '@material-ui/core/Button'
+import getConfig from 'next/config'
+const { publicRuntimeConfig } = getConfig();
+
+const styles = theme => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: "#1E2327",
+        [theme.breakpoints.up('md')]: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'space-around',
+            backgroundColor: "#1E2327",
+            padding: theme.spacing(10, 18),
+        },
+        '& a': {
+            textDecoration: 'none',
+            color:"#fff"
+        },
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        padding: theme.spacing(0, 5),
+        paddingBottom: theme.spacing(3.5),
+        '&:first-child': {
+            paddingTop: theme.spacing(4),
+        },
+        [theme.breakpoints.up('md')]: {
+            padding: 0,
+            '&:first-child': {
+                paddingTop: 0,
+            },
+        },
+
+    },
+    containerRegion: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        backgroundColor: theme.palette.secondary.main,
+        padding: theme.spacing(3),
+        [theme.breakpoints.up('md')]: {
+            padding: theme.spacing(8, 0),
+        },
+
+    },
+    titleContainer: {
+        color: "#fff",
+        fontSize: '1.5em',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        fontWeight: '600',
+        [theme.breakpoints.up('md')]: {
+            fontSize: '1.2em',
+            paddingBottom: theme.spacing(2),
+        },
+    },
+    textContainer: {
+        fontWeight: '300',
+        fontSize: '0.9em',
+        [theme.breakpoints.up('md')]: {
+            fontWeight: '300',
+            fontSize: '0.8em',
+        },
+    },
+    textContainerRegion: {
+        fontWeight: '300',
+        fontSize: '0.9em',
+        color: theme.palette.primary.dark,
+    },
+    footerLogo: {
+        width: '15vw',
+        [theme.breakpoints.up('md')]: {
+            width: '4vw',
+        },
+    },
+    footerLogoTT: {
+        width: '70%',
+        [theme.breakpoints.up('md')]: {
+            paddingBottom: theme.spacing(1),
+            width: '100%'
+        },
+    },
+    containerReactApp: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: 'auto',
+        paddingTop: theme.spacing(4),
+        backgroundColor: "#000",
+        [theme.breakpoints.down('xs')]: {
+            height: '100vh',
+        },
+        [theme.breakpoints.up('md')]: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-around',
+            height: '35vh',
+            padding: theme.spacing(6, 1),
+            position: 'relative',
+        },
+    },
+    titleReactApp: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        fontSize: '1.5em',
+        fontWeight: '600',
+        paddingTop: theme.spacing(4),
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4),
+        [theme.breakpoints.up('md')]: {
+            order: 1,
+            width: '20%',
+            textAlign: 'left',
+        },
+    },
+    buttonReactApp: {
+        textTransform: 'inherit',
+        margin: theme.spacing(0, 8),
+        padding: theme.spacing(1.2, 2),
+        [theme.breakpoints.up('md')]: {
+            order: 3,
+            margin: 'inherit',
+            marginRight: '5vw',
+        },
+    },
+    imageReactApp: {
+        width: '100%',
+        [theme.breakpoints.up('sm')]: {
+            width: 'auto',
+        },
+        [theme.breakpoints.up('md')]: {
+            width: '25%',
+            order: 2,
+            position: 'absolute',
+            bottom: 0,
+        },
+    },
+    containerNewsletter: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing(6, 4),
+    },
+    version:{
+        marginTop: '15px',
+        fontSize: '0.7em',
+        fontWeight: '300',
+    }
+
+});
+
+function Footer(props) {
+    const { classes } = props;
+    return (
+        <div>
+
+
+            <section className={classes.containerNewsletter}>
+                <NewsLetterRegistration />
+            </section>
+
+            <div className={classes.root}>
+                <section className={classes.container}>
+                    <img alt="talents-tube" src='/static/images/logos/TalentsTube_logo-blanc.svg' className={classes.footerLogoTT} />
+                    
+                </section>
+                <section className={classes.container}>
+                    <Typography color="secondary" component="p" className={classes.titleContainer}>
+                        Informations
+                    </Typography>
+
+                    <Link href="/Cgu"  >
+                        <a>
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                CGU
+                            </Typography>
+                        </a>
+                    </Link>
+
+                    <Link href="/MentionsLegales"  >
+                        <a>
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Mentions légales
+                            </Typography>
+                        </a>
+                    </Link>
+                    <Link href="/Confidentialite"  >
+                        <a>
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Politique de confidentialité et Protection <br />des données
+                            </Typography>
+                        </a>
+                    </Link>
+                    <Link href="" >
+                        <a href="https://blog.talentstube.com/contact" target="_blank">
+                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                                Contact
+                            </Typography>
+                        </a>
+                    </Link>
+                </section>
+                <section className={classes.container}>
+                    <Typography color="secondary" component="p" className={classes.titleContainer}>
+                        Rencontrons-nous
+                </Typography>
+                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                        3, rue Louis de Broglie
+                </Typography>
+                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                        56 000 Vannes
+                </Typography>
+                    <Typography gutterBottom  component="p" className={classes.textContainer}>
+                    <a href="tel:+33756850954"  >*07.56.85.09.54 </a> 
+                </Typography>
+                    {/* <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
+                        contact@talentstube.com
+                </Typography> */}
+                </section>
+
+            </div>
+            <section className={classes.containerRegion}>
+                <Typography gutterBottom component="p" className={classes.textContainerRegion} align="center" >
+                    Entreprise soutenue par
+                </Typography>
+                <a href="https://www.bretagne.bzh/" target="_blank" className={classes.darkMenuItem} rel="noopener">
+                    <img alt="Région Bretagne" src='/static/images/logos/Logo-region.svg' className={classes.footerLogo} />
+                </a>
+                <Typography   className={classes.version} align="center" >
+                {publicRuntimeConfig.version}
+                </Typography>
+            </section>
+        </div>
+    );
+}
+
+export default withStyles(styles)(Footer)

nextjs/components/organisms/GriddleCustomNextButton.js

@@ -1,7 +1,8 @@
 import React from 'react';
 
 const NextButton = ({ hasNext, onClick, style, className, text }) => hasNext ? (
-  <button type="button" onClick={onClick} style={style} className={className}>Suivant</button>
+  // <button type="button" onClick={onClick} style={style} className={className}>Suivant</button>
+  <div></div>              
 ) :
 null;
 

nextjs/components/organisms/GriddleCustomPageDropdown.js

@@ -0,0 +1,35 @@
+// import React, { useState } from 'react';
+// import Pagination from '@material-ui/lab/Pagination';
+// import PaginationItem from '@material-ui/lab/PaginationItem';
+// export default function GriddleCustomPageDropdown(props) {
+//   let [page] = React.useState(1);
+//   let PageDropDown = null;
+//   const setPage = (event, newPage) => {
+//     console.log('test');
+//     setPage(newPage);
+
+//   };
+//   return (
+//     <Pagination count={props.maxPages} defaultPage={props.currentPage} onChange={props.setPage}/>
+//   );
+// }
+
+// const [page, setPage] = useState(1);
+//   const handleChangePage = (event, newPage) => {
+    
+//     setPage(newPage);
+//   };
+// const PageDropDown = ({ maxPages, currentPage, setPage  }) => <Pagination count={maxPages} defaultPage={currentPage} onChangePage={handleChangePage}/> ;
+
+// export default PageDropDown;
+
+
+import React from 'react';
+import Pagination from '@material-ui/lab/Pagination';
+
+const NextButton = ({ maxPages, currentPage, setPage, className, text }) => maxPages ? (
+  <Pagination count={maxPages} defaultPage={currentPage} onChange={setPage} shape="rounded"/>              
+) :
+null;
+
+export default NextButton;

nextjs/components/organisms/GriddleCustomPreviousButton.js

@@ -1,8 +1,9 @@
 import React from 'react';
 
 const PreviousButton = ({ hasPrevious, onClick, style, className, text }) => hasPrevious ? (
-  <button type="button" onClick={onClick} style={style} className={className}>Précédent</button>
-) :
+  // <button type="button" onClick={onClick} style={style} className={className}>Précédent</button>
+  <div></div>
+  ) :
 null;
 
 export default PreviousButton;

nextjs/components/organisms/Header.js

@@ -40,6 +40,7 @@ import ActiveLink from "./../atoms/Activelink";
 import axios from 'axios';
 import setAuthorizationHeader from "../../data/setAuthorizationHeader";
 import getConfig from 'next/config'
+import Router from 'next/router'
 
 const styles = theme => ({
   root: {
@@ -224,6 +225,9 @@ const styles = theme => ({
     justifyContent: 'space-between',
     padding: 0,
   },
+  appBar:{
+    position:'fixed'
+  },
   appBarDesktopSection: {
     display: 'flex',
     alignItems: 'center',
@@ -302,11 +306,11 @@ class Header extends React.Component {
     left: false,
     bottom: false,
     right: false,
-    toggle: true
+    toggle: true,
+   
   };
 
 
-
   componentDidMount() {
 
   }
@@ -327,12 +331,26 @@ class Header extends React.Component {
   }
 
   toggle = () => this.setState(state => ({ toggle: !state.toggle }))
+  chargerPage =(type)=> {
+    console.log(type);
+    //Router.replace(page);
+    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)}>
@@ -354,6 +372,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 }}>
@@ -383,16 +402,27 @@ class Header extends React.Component {
                         </ListItemText>
                       </ListItem></a>
                     </ActiveLink>
+                    
+                    <a className={classes.darkMenuItem + ' ' + classes.darkMenuItemSpecific} href="https://blog.talentstube.com/" target="_blank">
+                      <ListItem classes={{ root: classes.rootListItem }}>
+                        <NotesIcon className={classes.icon} />
+                        <ListItemText classes={{ primary: classes.ListItemText }} primary='Blog'>
+                        </ListItemText>
+                      </ListItem>
+                    </a>
+                    
                   </div>
+                  {/* FIN Menu Accueil /Offres Entreprises */}
+                  {/* Menu recruteur */}
                   <div>
-                    <div className={classes.blogLinkGroup}>
+                    {/* <div className={classes.blogLinkGroup}>
                       <a href={publicRuntimeConfig.blogUrl} className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <NotesIcon className={classes.icon} />
                         <ListItemText classes={{ primary: classes.ListItemText }} primary='Blog'>
                         </ListItemText>
                       </ListItem>
                       </a>
-                    </div>
+                    </div> */}
                     <div className={classes.recruteurLinkGroup}>
                       <a href={publicRuntimeConfig.symphonyUrl } className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
                         <SupervisorAccountIcon className={classes.icon} />
@@ -401,6 +431,7 @@ class Header extends React.Component {
                       </ListItem></a>
                     </div>
                   </div>
+                  {/* FIN Menu recruteur*/}
 
                 </div>
               </List>
@@ -415,9 +446,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}>
@@ -440,7 +473,7 @@ class Header extends React.Component {
                       </ListItem></a>
                     </Link>
                     {/* TODO */}
-                    <Link href="/Login?inscription=true"  >
+                    <Link href="/Inscription"  >
                       <a className={classes.lightMenuItem + ' cypRegister'}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItem }}>
                         <PersonAddIcon className={classes.icon} />
                         <ListItemText primary='Inscription'>
@@ -452,22 +485,24 @@ class Header extends React.Component {
                   <Divider light={true} />
 
                   <div className={classes.linkGroup}>
-                    <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
+                    {/* <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
                       <WorkOutlineIcon className={classes.icon} />
                       <ListItemText primary='Connexion recruteurs'>
                       </ListItemText>
                     </ListItem>
-                    </a>
+                    </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}
@@ -480,29 +515,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="/profil2"  >
+                      <a className={classes.lightMenuItem}>
+                        <ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <AccountCircleIcon className={classes.icon} />
+                        <ListItemText primary='Mon profil'>
+                        </ListItemText>
+                        </ListItem>
+                      </a>
+                    </Link>
+                    
+                    <Link href="/Parametres"  >
+                      <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <SettingsIcon className={classes.icon} />
+                        <ListItemText primary='Paramètres'>
+                        </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");
@@ -538,13 +595,13 @@ class Header extends React.Component {
 
                 <List className={classes.desktopMenuList}>
                   <div>
-                    <ActiveLink activeClassName={classes.active} href="/Offres"  >
-                      <a className={classes.desktopMenuItem}>
+                    <ActiveLink activeClassName={classes.active} href="/Offres"   >
+                      <a className={classes.desktopMenuItem} >
                         <ListItemText primary="Offres d'emploi">
                         </ListItemText>
                       </a>
                     </ActiveLink>
-                    <ActiveLink activeClassName={classes.active} href="/Entreprises"  >
+                    <ActiveLink activeClassName={classes.active} href="/Entreprises"    >
                       <a className={classes.desktopMenuItem}>
                         <ListItemText primary='Nos entreprises'>
                         </ListItemText>
@@ -556,12 +613,18 @@ class Header extends React.Component {
                         </ListItemText>
                       </a>
                     </ActiveLink>
+                    
+                    <a className={classes.desktopMenuItem} target="_blank" href="https://blog.talentstube.com/">
+                      <ListItemText primary='Blog'>
+                      </ListItemText>
+                    </a>
+                    
                   </div>
 
                   <div>
                     {!!!this.props.loading && !!!this.props.fetched &&
                       <Fragment>
-                        <Link href="/Login?inscription=true"  >
+                        <Link href="/Inscription"  >
                           <a className={classes.desktopMenuItem}>
                             <ListItem classes={{ root: classes.rootListItemDesktop }}>
                               <Button
@@ -588,7 +651,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"
@@ -603,14 +666,14 @@ class Header extends React.Component {
                   </div>
                 </List>
               </section>
-              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
+              {/* <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
 
                 <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
                   <ListItemText primary='Espace recruteurs'>
                   </ListItemText>
                   <ArrowForward className={classes.icon} />
                 </a>
-              </section>
+              </section> */}
             </Toolbar>
           </AppBar>)
           :

nextjs/components/organisms/HeaderPersonnalise.js

@@ -0,0 +1,634 @@
+import React, { Fragment, Children } from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import { withStyles, getMuiTheme } from '@material-ui/core/styles';
+import MenuIcon from '@material-ui/icons/Menu';
+import Link from 'next/link'
+import Drawer from '@material-ui/core/Drawer';
+import Divider from '@material-ui/core/Divider';
+import HomeIcon from '@material-ui/icons/HomeOutlined';
+import OfferIcon from '@material-ui/icons/LocalOfferOutlined';
+import CompanyIcon from '@material-ui/icons/DomainOutlined';
+import HelpIcon from '@material-ui/icons/HelpOutline';
+import VideoIcon from '@material-ui/icons/OndemandVideoOutlined';
+import NotesIcon from '@material-ui/icons/NotesOutlined';
+import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';
+import PersonIcon from '@material-ui/icons/Person';
+import PersonAddIcon from '@material-ui/icons/PersonAdd';
+import WorkOutlineIcon from '@material-ui/icons/WorkOutline';
+import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined';
+import FolderSharedIcon from '@material-ui/icons/FolderShared';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import PermContactCalendar from '@material-ui/icons/PermContactCalendar';
+import VideoCam from '@material-ui/icons/Videocam';
+import SettingsIcon from '@material-ui/icons/Settings';
+import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import { ListItemText } from '@material-ui/core';
+import Loader from '../templates/loader'
+import { connect } from 'react-redux'
+import { fetchCurrentUserRequest } from "../../actions/user";
+import { requestLogout } from "../../actions/auth";
+import Button from '@material-ui/core/Button';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
+import Typography from '@material-ui/core/Typography';
+import { withRouter } from "next/router";
+import ActiveLink from "../atoms/Activelink";
+import axios from 'axios';
+import setAuthorizationHeader from "../../data/setAuthorizationHeader";
+import getConfig from 'next/config'
+import Router from 'next/router'
+import ButtonBase from "@material-ui/core/ButtonBase";
+import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+import LoadingBar from 'react-redux-loading-bar'
+const styles = theme => ({
+  root: {
+    width: '100%',
+    position: 'relative',
+    zIndex: '999',
+    '& a': {
+      textDecoration: 'none'
+    }
+  },
+  toolbar: {
+    height: '64px',
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+    display: 'block'
+  },
+  menuLogo: {
+    cursor: 'pointer',
+    [theme.breakpoints.down('md')]: {
+      width: '200px'
+    },
+    [theme.breakpoints.down('sm')]: {
+      width: '130px'
+    },
+  },
+  menuAvatar: {
+    width: '2.5em',
+    borderRadius: '50%',
+    marginTop: theme.spacing(2),
+    marginLeft: theme.spacing(2),
+  },
+  menuUserName: {
+    color: theme.palette.menu.emailText,
+    fontSize: '1.3rem',
+    fontWeight: '500',
+  },
+  menuUserEmail: {
+    color: theme.palette.menu.emailText,
+    fontSize: '0.9rem',
+    fontWeight: '200',
+  },
+  darkDivider: {
+    background: 'whitesmoke',
+    opacity: '0.1',
+  },
+  List: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: '100%',
+    paddingTop: 0,
+    paddingBottom: 0,
+    '&>a:first-child': {
+      minHeight: '64px',
+      height: '64px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    [theme.breakpoints.up('md')]: {
+      '&>a:first-child': {
+        height: '64px',
+      },
+      '&>a:first-child li': {
+        height: '64px',
+        alignItems: 'center',
+      },
+    },
+  },
+  fullList: {
+    width: 'auto',
+    cursor: 'pointer',
+    paddingBottom: 0
+  },
+  lightFullList: {
+    height: '100vh',
+    backgroundColor: theme.palette.background.default,
+  },
+  darkFullList: {
+    backgroundColor: theme.palette.background.dark,
+  },
+  lightMenuItem: {
+    color: theme.palette.menu.lightText,
+    textDecoration: 'none',
+  },
+  darkMenuItem: {
+    color: theme.palette.menu.darkText,
+    textDecoration: 'none',
+  },
+  darkMenuItemSpecific: {
+    '&:hover,&:active': {
+      color: theme.palette.primary.main,
+    }
+  },
+  links: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: '100%',
+  },
+  linkGroup: {
+    padding: theme.spacing(1.2, 0),
+    paddingLeft: 0,
+  },
+  videothequeLinkGroup: {
+    backgroundColor: theme.palette.background.videotheque,
+  },
+  blogLinkGroup: {
+    backgroundColor: theme.palette.background.blog,
+  },
+  recruteurLinkGroup: {
+    backgroundColor: theme.palette.background.recruteur,
+  },
+  rootListItem: {
+    padding: theme.spacing(1, 2),
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  rootListItemIcon: {
+    padding: theme.spacing(1, 2),
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  ListItemUserConnected: {
+    flexDirection: 'column',
+  },
+  ListItemText: {
+    fontSize: '1em',
+  },
+  icon: {
+    paddingRight: theme.spacing(2.5),
+  },
+  iconAccount: {
+    color: theme.palette.primary.dark,
+  },
+  title: {
+    color: theme.palette.secondary.main,
+    fontSize: '1.5em'
+  },
+  email: {
+    color: theme.palette.menu.emailText,
+    fontSize: '0.9em'
+  },
+  button: {
+    padding: theme.spacing(0.5, 1),
+    textTransform: 'inherit',
+    '& svg': {
+      width: '0.7em',
+      height: '0.7em',
+    },
+  },
+
+  active: {
+    '& span, & svg': {
+      color: theme.palette.primary.main + ' !important',
+    },
+  },
+
+  //DESKTOP PART
+
+  desktopMenuItem: {
+    [theme.breakpoints.down('md')]: {
+      padding: theme.spacing(0.4),
+    },
+    '& span.MuiTypography-root': {
+      fontSize: '0.8rem',
+      fontWeight: '500',
+    },
+  },
+  desktopMenuList: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 0,
+  },
+  appBar:{
+    position:'fixed'
+  },
+  appBarDesktopSection: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  appBarDesktopSection1: {
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    borderRight: 'solid 1px whitesmoke',
+  },
+  appBarDesktopSection2: {
+    width: '100%',
+    justifyContent: 'space-between',
+    padding: theme.spacing(0, 2),
+    '& ul': {
+      width: '95%',
+    },
+    '& ul>div': {
+      display: 'flex',
+    },
+    '& ul > div:nth-child(1) a span': {
+      color: theme.palette.primary.dark,
+      '&:hover, &:active': {
+        color: theme.palette.primary.main,
+      }
+    },
+    '& .MuiListItemText-root': {
+      padding: theme.spacing(0, 1),
+      [theme.breakpoints.down('md')]: {
+        padding: theme.spacing(0),
+      },
+    },
+    '& a:last-child .MuiButtonBase-root span': {
+      color: theme.palette.secondary.main,
+    },
+  },
+  appBarDesktopSection3: {
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    backgroundColor: theme.palette.primary.dark,
+    '& a': {
+      display: 'flex',
+      alignItems: 'flex-end',
+    },
+    '& span, & svg': {
+      color: theme.palette.secondary.main,
+    },
+  },
+  toolbarDesktop: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: '64px',
+  },
+  desktopMenuButtonLogin: {
+    background: theme.palette.primary.main,
+    borderColor: theme.palette.primary.main,
+  },
+  rootListItemDesktop: {
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(1),
+    },
+  },
+  iconDesktop: {
+    paddingRight: theme.spacing(2.5),
+    [theme.breakpoints.up('md')]: {
+      paddingRight: 0,
+    },
+  },
+});
+let urlEnv;
+
+class HeaderPersonnalise extends React.Component {
+  state = {
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+    toggle: true
+  };
+
+  redirectionrecruteur=(props) => {
+    console.log("redirection recruteur")
+     localStorage.removeItem("ttJWT");
+     //this.openDialog()
+     props.requestLogout();
+     window.location.href = "https://recruteur.talentstube.com/";
+  }
+
+  componentDidMount() {
+
+  }
+
+  
+
+  toggleDrawer = (side, open) => () => {
+    this.setState({
+      [side]: open,
+    });
+  };
+
+  onRedirectAccount = e => {
+      urlEnv = (process.env.NODE_ENV !== 'production') ? '//localhost/app_dev.php' : process.env.SERVER_URL;
+      e.preventDefault();
+      var redirectAccountUrl = urlEnv + "/api/talent?bearer=" + localStorage.getItem("ttJWT");
+      window.open(redirectAccountUrl);
+  }
+
+  toggle = () => this.setState(state => ({ toggle: !state.toggle }))
+  chargerPage =(type)=> {
+    console.log(type);
+    //Router.replace(page);
+    sessionStorage.setItem(type+'_currentPage',1);
+
+  } 
+  render() {
+    const { classes } = this.props;
+    const { publicRuntimeConfig } = getConfig();
+
+
+    return (
+      <div className={classes.root}>
+
+
+        <Drawer anchor="right" open={this.state.right} onClose={this.toggleDrawer('right', false)}>
+          <div
+            tabIndex={0}
+            role="button"
+            onClick={this.toggleDrawer('right', false)}
+            onKeyDown={this.toggleDrawer('right', false)}
+          >{!!this.props.loading &&
+            (<Loader />
+            )}
+            {!!!this.props.loading && !!!this.props.fetched
+              &&
+              <div className={classes.fullList + ' ' + classes.darkFullList}>
+                <List>
+                  <Link href="/"  >
+                    <a className={classes.darkMenuItem + ' cypFrontPage'}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                      <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-blanc.svg' className={classes.menuLogo} />
+                    </ListItem></a>
+                  </Link>
+
+
+                  <Divider light={true} />
+
+                  <div className={classes.linkGroup}>
+                    <Link href="/Login" >
+                      <a className={classes.lightMenuItem + ' cypConnexion'}><ListItem classes={{ root: classes.rootListItemIcon }} >
+                        <PersonIcon className={classes.icon} />
+                        <ListItemText classes={{ primary: classes.ListItemText }} primary='Connexion'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                    {/* TODO */}
+                    <Link href="/Inscription"  >
+                      <a className={classes.lightMenuItem + ' cypRegister'}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItem }}>
+                        <PersonAddIcon className={classes.icon} />
+                        <ListItemText primary='Inscription'>
+                        </ListItemText>
+                      </ListItem></a>
+                    </Link>
+                  </div>
+
+                  <Divider light={true} />
+
+                  <div className={classes.linkGroup}>
+                    {/* <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.lightMenuItem}><ListItem classes={{ primary: classes.ListItemText }} classes={{ root: classes.rootListItemIcon }}>
+                      <WorkOutlineIcon className={classes.icon} />
+                      <ListItemText primary='Connexion recruteurs'>
+                      </ListItemText>
+                    </ListItem>
+                    </a> */}
+                  </div>
+                </List>
+              </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}
+                  </Typography>
+
+                  <Typography gutterBottom component="h3" className={classes.menuUserEmail} >
+                    {this.props.user.email}
+                  </Typography>
+                </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="/profil2"  >
+                      <a className={classes.lightMenuItem}>
+                        <ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <AccountCircleIcon className={classes.icon} />
+                        <ListItemText primary='Mon profil'>
+                        </ListItemText>
+                        </ListItem>
+                      </a>
+                    </Link>
+                    
+                    <Link href="/Parametres"  >
+                      <a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                        <SettingsIcon className={classes.icon} />
+                        <ListItemText primary='Paramètres'>
+                        </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");
+                    return this.props.requestLogout();
+                  }} className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
+                      <PowerSettingsNewIcon className={classes.icon} />
+                      <ListItemText primary='Déconnexion'>
+                      </ListItemText>
+                    </ListItem></a>
+                </Link>
+              </Fragment>
+            }
+          </div>
+        </Drawer>
+
+        {isWidthUp('md', this.props.width) ?
+          (<AppBar position="static" className={classes.appBar}>
+            <Toolbar disableGutters={true} className={classes.toolbarDesktop}>
+              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection1}>
+                <Link href="/"  >
+                  <a className={classes.darkMenuItem}>
+                    <ListItem classes={{ root: classes.rootListItemDesktop }}>
+                      <img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.desktopMenuLogo} />
+                    </ListItem>
+                  </a>
+                </Link>
+              </section>
+              <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection2}>
+                {/* <IconButton className={classes.menuButton} onClick={this.toggleDrawer('left', true)}
+                  color="inherit" aria-label="Open drawer">
+                  <MenuIcon />
+                </IconButton> */}
+
+                <List className={classes.desktopMenuList}>
+                  <div>
+                    <ActiveLink activeClassName={classes.active} href="/Offres"   >
+                      <a className={classes.desktopMenuItem} >
+                        <ListItemText primary="Offres d'emploi">
+                        </ListItemText>
+                      </a>
+                    </ActiveLink>
+                    <ActiveLink activeClassName={classes.active} href="/Entreprises"    >
+                      <a className={classes.desktopMenuItem}>
+                        <ListItemText primary='Nos entreprises'>
+                        </ListItemText>
+                      </a>
+                    </ActiveLink>
+                    <ActiveLink activeClassName={classes.active} href="/Help"  >
+                      <a className={classes.desktopMenuItem}>
+                        <ListItemText primary='Comment ça marche ?'>
+                        </ListItemText>
+                      </a>
+                    </ActiveLink>
+                    
+                    <a className={classes.desktopMenuItem} target="_blank" href="https://blog.talentstube.com/">
+                      <ListItemText primary='Blog'>
+                      </ListItemText>
+                    </a>
+                    
+                  </div>
+
+                  <div>
+                    {!!!this.props.loading && !!!this.props.fetched &&
+                      <Fragment>
+                        <Link href="/Inscription"  >
+                          <a className={classes.desktopMenuItem}>
+                            <ListItem classes={{ root: classes.rootListItemDesktop }}>
+                              <Button
+                                variant="outlined"
+                                className={classes.button + ' ' + classes.desktopMenuButtonRegister}>
+                                <PersonAddIcon className={classes.iconDesktop} />
+                                <ListItemText classes={{ primary: classes.ListItemText }} primary='Inscription'></ListItemText>
+                              </Button >
+                            </ListItem>
+                          </a>
+                        </Link>
+
+                        <Link href="/Login"  >
+                          <a className={classes.desktopMenuItem}>
+                            <ListItem classes={{ root: classes.rootListItemDesktop }}>
+                              <Button
+                                variant="outlined"
+                                className={classes.button + ' ' + classes.desktopMenuButtonLogin}>
+                                <PersonIcon className={classes.iconDesktop} />
+                                <ListItemText classes={{ primary: classes.ListItemText }} primary='Connexion'></ListItemText>
+                              </Button >
+                            </ListItem>
+                          </a>
+                        </Link>
+                      </Fragment>
+                    }
+                    {!!!this.props.loading && !!this.props.fetched &&
+                      <IconButton
+                        edge="end"
+                        aria-label="Profile"
+                        aria-controls={'primary-search-account-menu'}
+                        aria-haspopup="true"
+                        onClick={this.toggleDrawer('right', true)}
+                        className={classes.iconAccount + ' cypConnexionMenu'}
+                      >
+                        <AccountCircleOutlinedIcon />
+                      </IconButton>
+                    }
+                  </div>
+                </List>
+              </section>
+              {/* <section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
+
+                <a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
+                  <ListItemText primary='Espace recruteurs'>
+                  </ListItemText>
+                  <ArrowForward className={classes.icon} />
+                </a>
+              </section> */}
+            </Toolbar>
+          </AppBar>)
+          :
+          (
+            <AppBar position="static" className={classes.appBar}>
+              <Toolbar className={classes.toolbar}>
+                {/* <IconButton className={classes.menuButton} onClick={this.toggleDrawer('left', true)}
+                  color="inherit" role="button">
+                  <MenuIcon />
+                </IconButton> */}
+                <ButtonBase name='back'
+                  focusRipple
+                  className={classes.back}
+                  focusVisibleClassName={classes.focusVisible}
+                  onClick={() => Router.push("/"+this.props.retour)}>
+                  <ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
+                </ButtonBase>
+                <div className={classes.grow} />
+                <Link href="/"  >
+                  <a><img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} /></a>
+                </Link>
+                <div className={classes.grow} />
+                <IconButton
+                  edge="end"
+                  aria-label="Profile"
+                  aria-controls={'primary-search-account-menu'}
+                  aria-haspopup="true"
+                  onClick={this.toggleDrawer('right', true)}
+                  className={classes.iconAccount + ' cypConnexionMenu'}
+
+                >
+                  <AccountCircleOutlinedIcon />
+                </IconButton>
+              </Toolbar>
+            </AppBar>
+          )}
+      </div >
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+    fetched: !!state.user.fetched,
+    loading: !!state.user.loading
+  };
+}
+export default (connect(mapStateToProps, { fetchCurrentUserRequest, requestLogout })(withStyles(styles)(withWidth()(HeaderPersonnalise))));

nextjs/components/organisms/OffreRow.js

@@ -42,7 +42,7 @@ const styles = theme => ({
     },
     margin: '1vh 2vh 1vh 2vh',
     [theme.breakpoints.up('sm')]: {
-      margin: '1vh 0 1vh 0',
+      margin: '2vh 0 2vh 0',
     },
   },
   detailsContainer: {
@@ -156,7 +156,7 @@ class OffreRowComponent extends React.Component {
               </Typography>
               <div>
                 {rowData.is_promoted && (
-                  <Chip label="Pourvue" className={classes.chip} />
+                  <Chip label="Offre pourvue" className={classes.chip} />
                 )}
 
                 {!rowData.is_promoted && (

nextjs/components/organisms/PWAInstallSnack.js

@@ -22,8 +22,8 @@ const styles = theme => ({
     },
     askToInstallText: {
         fontSize: '1.4em',
-        fontWeight: '500',
-        fontFamily: 'Dosis',
+        fontWeight: '600',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     },
     installApp: {
         width: '100%',

nextjs/components/organisms/Recorder.js

@@ -7,6 +7,7 @@ import axios from 'axios'
 import setAuthorizationHeader from "../../data/setAuthorizationHeader";
 import 'videojs/dist/video-js.css';
 import 'videojs-record/dist/css/videojs.record.css';
+import ArrowRight from '@material-ui/icons/ArrowRight';
 
 dynamic(() => import('webrtc-adapter'), {
     ssr: false
@@ -17,8 +18,31 @@ const RTCRecorder = dynamic(() => import('RecordRTC'), {
 
 const videoJsOptions = {
     controls: true,
-
+    width: '550',
+    languages: {
+        fr: {
+          
+            Replay: 'Jouer'
+        }
+      },
+    autoplay:true,
+    preload:"auto",
+    playsinline : false,
+    //videoEngine: 'webm-wasm',
+    //liveui : true,
     fluid: true,
+    nativeControlsForTouch:false,
+    controlBar: {
+        // hide fullscreen and volume controls
+        fullscreenToggle: false,
+        volumePanel: false,
+        deviceButton: false,
+        recordIndicator:true,
+        recordToggle: false,
+        PictureInPictureToggle:false,
+        PlayToggle:false
+    },
+     poster: '/statique/images/webrtc/module-video-talents-tube.svg',
     plugins: {
       /*
       // wavesurfer section is only needed when recording audio-only
@@ -40,37 +64,107 @@ const videoJsOptions = {
       }
     }
   };
-
-const styles = theme => ({
-    root: {
-        margin: theme.spacing(1),
-        maxWidth: '400px', [theme.breakpoints.down('md')]: {
-            maxWidth: `${100 - (theme.spacing(1))}vw`
+    const styles = theme => ({
+        primary: {
+            color: theme.palette.primary.main,
         },
-        sendContainer: {
-            textAlign: 'center'
+        root: {
+            position: 'relative',
+            textAlign: 'center',
+            paddingTop: theme.spacing(10),
+            justifyContent: 'center',
         },
         button: {
+            color: '#FFFFFF',
+            padding: '9.6px 16px',
+            borderColor: '#25D89A',
+            border: '2px solid',
+            margin:'15px 8px 25px 8px',
             textTransform: 'inherit',
-            marginLeft: theme.spacing(8),
-            marginRight: theme.spacing(8),
-            marginTop: theme.spacing(4),
-            marginBottom: theme.spacing(2),
-            padding: theme.spacing(1.2, 2),
-            //borderRadius: '3px',
-            [theme.breakpoints.up('sm')]: {
-                margin: 'auto',
-            },
+            backgroundColor:'#25D89A',
+        },
+        buttonRelancer:{
+            color: '#1E2327',
+            borderColor: '#1E2327',
+            border: '2px solid',
+            margin: '15px 8px 25px 8px',
+            padding: '9.6px 16px',
+            textTransform: 'inherit',
+            color: '#1E2327',
+            borderColor: '#1E2327',
 
         },
-    }
-})
+
+        buttonArret: {
+            color: '#FFFFFF',
+            borderColor: '#FF5A5F',
+            border: '2px solid',
+            padding: '9.6px 16px',
+            margin:'15px 8px 25px 8px',
+            textTransform: 'inherit',
+            backgroundColor:'#FF5A5F',
+        },
+        buttonLire: {
+            color: '#FFFFFF',
+            padding: '9.6px 16px',
+            margin:'15px 8px 25px 8px',
+            textTransform: 'inherit',
+            backgroundColor:'#1689FB',
+        },
+        conteneurVideo:{
+            width:'550px!important'
+        },
+        sendContainer: {
+                         left: '-40px'
+        },
+    
+      
+    })
+
+// const styles = theme => ({
+//     root: {
+//         margin: theme.spacing(1),
+//         maxWidth: '400px', [theme.breakpoints.down('md')]: {
+//             maxWidth: `${100 - (theme.spacing(1))}vw`
+//         },
+//         sendContainer: {
+//             textAlign: 'center'
+//         },
+//         bouton: {
+//             textTransform: 'inherit',
+//             marginLeft: theme.spacing(1),
+//             marginRight: theme.spacing(1),
+//             padding: theme.spacing(1.2, 2),
+//             color: theme.palette.secondary.main,
+//             backgroundColor: theme.palette.primary.important,
+//         },
+//         conteneurVideo:{
+//             width:'550px!important'
+//         }
+//     }
+// })
 class Recorder extends Component {
 
     state={
-        canSend:false
+        canSend:false,
+        isActiveLancer:true,
+        isActiveArreter:false,
+        isActiveLancerReplay:false,
+        lancerText:"Démarrer l’enregistrement",
+        lancerStyleRelance : 0,
     }
 
+    handleLancer = (replay)=>{
+        this.setState({
+            isActiveLancer: !this.state.isActiveLancer,
+            isActiveArreter: !this.state.isActiveArreter,
+            lancerText : "Refaire une vidéo",
+        })
+        replay==1 ? this.setState({isActiveLancerReplay: 1}) : this.setState({isActiveLancerReplay: 0})  
+        this.setState({lancerStyleRelance: 1})
+    }
+
+
     async componentDidMount() {
         var record = (await import('videojs-record')).default
         // instantiate Video.js
@@ -81,10 +175,35 @@ class Recorder extends Component {
                 ' and recordrtc ' + RTCRecorder.VERSION;
             videojs.log(version_info);
         });
+        var vid= this.player;
+        this.player.bigPlayButton.hide();
+
+
+        // When you pass text in options it just creates a control text,
+        // which is displayed as tooltip when hovered on 
+        // this button viz the span in you div,
+        var myButton = this.player.controlBar.addChild("button");
+
+
+
+        // There are many functions available for button component 
+        // like below mentioned in this docs 
+        // https://docs.videojs.com/button. 
+        // You can set attributes and clasess as well.
+
+        // Getting html DOM
+        var myButtonDom = myButton.el();
+
+        myButtonDom.onclick = function(){
+        //alert("Redirecting");
+        vid.pause();
+        }  
+   
 
         // device is ready
         this.player.on('deviceReady', () => {
             console.info('device is ready!');
+            this.player.record().start();
             this.setState({canSend:false});
         });
 
@@ -127,11 +246,51 @@ class Recorder extends Component {
         formData.append('upload', this.player.recordedData, "myupload");
 
         this.props.uploader(formData);
+        console.log("REDIRECTION OU PAS");
+        console.log(this.props.retour);
+        if(this.props.retour=="home"){
+            window.location.replace("/");
+        }
     }
 
+    recordPlayer = () => {
+        // console.log('accessing recording: ', this.player.recordedData)
+        if (this.player) {
+            //this.player.recorder.start()
+            this.player.ready();
+            this.player.record().getDevice();
+            this.handleLancer(0);   
+        }
+    }
+
+    playPlayerAuto = () => {
+        // console.log('accessing recording: ', this.player.recordedData)
+        if (this.player) {
+            //this.player.recorder.start()
+            this.player.autoplay('play');
+            
+        }
+    }
+    pausePlayerAuto = () => {
+        // console.log('accessing recording: ', this.player.recordedData)
+        if (this.player) {
+            //this.player.recorder.start()
+            this.player.autoplay('pause');
+            
+        }
+    }
+    
+     arretPlayer = () => {
+        // console.log('accessing recording: ', this.player.recordedData)
+        if (this.player) {
+            this.player.record().stop();
+            this.handleLancer(1);
+        }
+     }
+
     render() {
         const { classes, titreBouton } = this.props;
-        let titreButtonLabel= "Envoyer";
+        let titreButtonLabel= "Choisir cette vidéo";
         
 
         if (titreBouton) {
@@ -140,17 +299,24 @@ class Recorder extends Component {
             console.log(titreButtonLabel);       
         }
         return (
-            <div>
+            <div className={classes.conteneurVideo}>
                 <div data-vjs-player>
-                    <video id="myVideo" ref={node => this.videoNode = node} className="video-js vjs-default-skin" playsInline></video>
+                    <video id="myVideo" width='550' ref={node => this.videoNode = node} className="video-js vjs-default-skin" playsInline></video>
                 </div>
                 <div className={classes.sendContainer}>
-                   { this.state.canSend && <Button type="submit" variant="outlined" color="primary"
+                   
+                    {this.state.isActiveLancer ? <Button className={this.state.lancerStyleRelance==1 ? classes.buttonRelancer: classes.button}   onClick={this.recordPlayer}>{this.state.lancerText}</Button> : null }
+                    {this.state.isActiveArreter ?<Button className={classes.buttonArret}    onClick={this.arretPlayer}>Arrêter l'enregistrement</Button> : null }
+                    {/* {this.state.isActiveLancerReplay ?<Button cyp="ButtonApply" variant="contained" className={classes.buttonLire}   onClick={this.playPlayerAuto}><ArrowRight className={ classes.InputKeyboardArrowRightIcon }/>Relire</Button>: null } */}
+                    { this.state.canSend && <Button type="submit" className={classes.button}
                         className={classes.button}
                         onClick={this.sendBlob}>
                         {titreButtonLabel}
                     </Button>}
                 </div>
+                <div id="controleNav">
+                    
+                </div>
             </div>
         );
     }

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: {
@@ -31,6 +32,26 @@ const styles = theme => ({
         display: 'flex',
         flexDirection: 'column',
     },
+    connexionRecruteur:{
+        textAlign : "center",
+        marginTop:"40px",
+        backgroundColor:"#1E2327",
+        padding:"30px 0",
+        width:"100%",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '300',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+
+    },
+    enSavoirPlus:{
+        textAlign : "center",
+        textDecoration :"none",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '600',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    },
     formText: {
         padding: theme.spacing(0, 2),
         paddingTop: theme.spacing(3),
@@ -100,6 +121,18 @@ const styles = theme => ({
         marginTop: theme.spacing(6),
         marginBottom: theme.spacing(2),
     },
+    titre: {
+        fontWeight: 600,
+        fontSize: "1.875em",
+        marginBottom:"20px",
+        fontFamily: "Roboto",
+    },
+    cgu: {
+        fontFamily: "Roboto",
+        fontSize: "1em",
+        fontWeight: "300",
+
+    },
 });
 
 class Register extends React.Component {
@@ -107,20 +140,25 @@ class Register extends React.Component {
         data: {
             firstname: '',
             lastname: '',
+            phone: '',
             email: '',
             password: '',
             checkNewsletter: false,
             checkCGU: false,
+            adId : ''
         },
         errors: {
             email:null,
             password:null,
             firstname:null,
+            phone:null,
             lastname:null,
+            phone:null,
             checkCGU:null
         },
         loading: false,
-        showPassword: false
+        showPassword: false,
+        passwordValid : false
     }
 
     validate = data => {
@@ -131,18 +169,28 @@ 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;
     };
+    
+    componentDidMount() {
+        this.setState({
+            data: {...this.state.data, adId: localStorage.getItem('adId')},
+        })
+    }
 
     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)
         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 })
@@ -156,10 +204,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 } });
     };
@@ -173,7 +223,7 @@ class Register extends React.Component {
     };
 
     render() {
-        const { classes } = this.props;
+        const { classes, erreurs } = this.props;
         const { data, errors } = this.state;
 
         return (
@@ -181,17 +231,12 @@ class Register extends React.Component {
 
                 <form className={classes.form}>
 
-                    <TextField
-                        value={data.lastname}
-                        onChange={this.onChange}
-                        id="nom"
-                        name="lastname"
-                        label="Nom"
-                        margin="normal"
-                        variant="outlined"
-                        required
-                        error={!!errors.lastname}
-                    />
+                    <Typography
+                        className={classes.titre}    
+                        align="left"
+                    >
+                        Inscription   
+                    </Typography>
                     <TextField
                         value={data.firstname}
                         onChange={this.onChange}
@@ -202,8 +247,36 @@ class Register extends React.Component {
                         variant="outlined"
                         required
                         error={!!errors.firstname}
+                        helperText={!!errors.firstname && "Veuillez saisir votre prénom."}
                     />
 
+                    <TextField
+                        className={classes.champ}
+                        value={data.lastname}
+                        onChange={this.onChange}
+                        id="nom"
+                        name="lastname"
+                        label="Nom"
+                        margin="normal"
+                        variant="outlined"
+                        required
+                        error={!!errors.lastname}
+                        helperText={!!errors.lastname && "Veuillez saisir votre nom."}
+                    />
+
+                    <TextField
+                        className={classes.champ}
+                        value={data.phone}
+                        onChange={this.onChange}
+                        id="telephone"
+                        name="phone"
+                        label="Téléphone"
+                        margin="normal"
+                        variant="outlined"
+                    />
+
+                    
+
                     <TextField
                         value={data.email}
                         onChange={this.onChange}
@@ -214,14 +287,14 @@ class Register extends React.Component {
                         type="email"
                         variant="outlined"
                         required
-                        error={!!errors.email}
-                        autoComplete="username email"
+                        error={!!errors.email || !!erreurs}
+                        helperText={!!errors.email  ? "Saisissez une adresse e-mail valide." : !!erreurs && erreurs}
                     />
 
 
                     <TextField
                         className={clsx(classes.margin, classes.textField)}
-                        label="Password"
+                        label="Mot de passe"
                         name="password"
                         id="adornment-password"
                         variant="outlined"
@@ -230,6 +303,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">
@@ -273,6 +347,7 @@ class Register extends React.Component {
                         label="Je déclare avoir pris connaissance et accepte les termes et les CGU *"
                         required
                     />
+                    <Link href={`/Cgu`} className={classes.cgu}>Lire les CGU</Link>
                     <Button type="submit" variant="contained" className={classes.button + ' ' + classes.buttonImportant + ' cypButtonRegister'} onClick={this.onRegister}>
                         S'inscrire
                     </Button>
@@ -300,7 +375,15 @@ class Register extends React.Component {
                         </Link>
                     </Typography>
                 </div>
+                <div className={classes.connexionRecruteur}>
+                    Vous êtes recruteur ? <a className={classes.enSavoirPlus} href='https://recruteur.talentstube.com'><span >En savoir plus</span></a>
+                </div>
+                <Snack name= 'snackWarning'
+                    variant= 'warning'
+                    message={errors.message}
+                    />
             </div>
+
         );
     }
 }
@@ -309,6 +392,7 @@ function mapStateToProps(state) {
     return {
         loading: !!state.user.loading,
         errors: !!state.user.errors ?state.user.errors: {
+            phone:null,
             email:null,
             password:null,
             firstname:null,

nextjs/components/organisms/SocialShare.js

@@ -5,6 +5,7 @@ import { loadCSS } from 'fg-loadcss';
 import { makeStyles } from '@material-ui/core/styles';
 import { red } from '@material-ui/core/colors';
 import Icon from '@material-ui/core/Icon';
+import Hidden from '@material-ui/core/Hidden';
 
 const useStyles = makeStyles(theme => ({
     root: {
@@ -26,16 +27,52 @@ const useStyles = makeStyles(theme => ({
         textAlign: 'center',
     },
     FacebookIcon: {
-        backgroundColor: theme.palette.social.facebook,
+        color: theme.palette.social.facebook,
+        '&:hover': {
+            backgroundColor: theme.palette.social.facebook,
+            color: '#fff',
+        }
     },
     TwitterIcon: {
-        backgroundColor: theme.palette.social.twitter,
+        color: theme.palette.social.twitter,
+        '&:hover': {
+            backgroundColor: theme.palette.social.twitter,
+            color: '#fff',
+        }
     },
     LinkedinIcon: {
-        backgroundColor: theme.palette.social.linkedin,
+        color: theme.palette.social.linkedin,
+        '&:hover': {
+            backgroundColor: theme.palette.social.linkedin,
+            color: '#fff',
+        }
     },
     MailIcon: {
-        backgroundColor: theme.palette.social.mail,
+        color: theme.palette.social.mail,
+        '&:hover': {
+            backgroundColor: theme.palette.social.mail,
+            color: '#fff',
+        }
+    },
+    FacebookIconMobile: {
+        color: theme.palette.social.facebook,
+        paddingRight:'0px',
+        paddingLeft:'3px'    
+    },
+    TwitterIconMobile: {
+        color: theme.palette.social.twitter,
+        paddingRight:'3px' ,
+        paddingLeft:'3px'  
+    },
+    LinkedinIconMobile: {
+        color: theme.palette.social.linkedin,
+        paddingRight:'3px',
+        paddingLeft:'3px'   
+    },
+    MailIconMobile: {
+        color: theme.palette.social.mail,
+        paddingRight:'3px' ,
+        paddingLeft:'3px'  
     },
 }));
 
@@ -51,19 +88,36 @@ export default function SocialShare(props) {
 
     return (
         <div className={classes.root}>
+            <Hidden smDown>
+                <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')}  />
+                </a>
+                <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.TwitterIcon, 'fab fa-twitter')} color="secondary" />
+                </a>
+                <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talents Tube")} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.LinkedinIcon, 'fab fa-linkedin-in')} color="secondary" />
+                </a>
+                {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
+                <a href={"mailto:?subject=Offre d'emploi Talents Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
+                    <Icon className={clsx(classes.icon, classes.MailIcon, 'fas fa-envelope')} color="secondary" />
+                </a>
+            </Hidden>
+            <Hidden mdUp>
             <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
-                <Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')} color="secondary" />
-            </a>
-            <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
-                <Icon className={clsx(classes.icon, classes.TwitterIcon, 'fab fa-twitter')} color="secondary" />
-            </a>
-            <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talent's Tube")} target="_blank">
-                <Icon className={clsx(classes.icon, classes.LinkedinIcon, 'fab fa-linkedin-in')} color="secondary" />
-            </a>
-            {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
-            <a href={"mailto:?subject=Offre d'emploi Talent's Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
-                <Icon className={clsx(classes.icon, classes.MailIcon, 'fas fa-envelope')} color="secondary" />
-            </a>
+                    <Icon className={clsx(classes.icon, classes.FacebookIconMobile, 'fab fa-facebook-f')}  />
+                </a>
+                <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.TwitterIconMobile, 'fab fa-twitter')} color="secondary" />
+                </a>
+                <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talents Tube")} target="_blank">
+                    <Icon className={clsx(classes.icon, classes.LinkedinIconMobile, 'fab fa-linkedin-in')} color="secondary" />
+                </a>
+                {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
+                <a href={"mailto:?subject=Offre d'emploi Talents Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
+                    <Icon className={clsx(classes.icon, classes.MailIconMobile, 'fas fa-envelope')} color="secondary" />
+                </a>
+            </Hidden>
         </div>
     );
 }

nextjs/components/templates/Grid.js

@@ -1,4 +1,4 @@
-import Griddle, { utils } from "griddle-react";
+import Griddle, { utils, plugins } from "griddle-react";
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 import { withStyles } from '@material-ui/core/styles';
@@ -7,6 +7,7 @@ import TextField from '@material-ui/core/TextField';
 import GriddleCustomTable from "../organisms/GriddleCustomTableComponent";
 import GriddleCustomNextButton from "../organisms/GriddleCustomNextButton"
 import GriddleCustomPreviousButton from "../organisms/GriddleCustomPreviousButton"
+import GriddleCustomPageDropdown from "../organisms/GriddleCustomPageDropdown"
 import Loader from './loader'
 import IconSearch from '@material-ui/icons/Search';
 import NoResult from './../atoms/NoResult';
@@ -80,6 +81,7 @@ class Grid extends Component {
         recordCount: 0,
         promoted: false,
         filterText: "",
+        // options: [],
     };
 
     async componentDidMount() {
@@ -98,6 +100,18 @@ class Grid extends Component {
                 limit: this.props.limit
             }
         );
+        // let options = [];
+        // let startIndex = Math.max(this.props.currentPage - 5, 0);
+        // let endIndex = Math.min(startIndex + 11, this.props.maxPage);
+
+        // if (this.props.maxPage >= 11 && (endIndex - startIndex) <= 10) {
+        //     startIndex = endIndex - 11;
+        // }
+
+        // for(let i = startIndex; i < endIndex ; i++){
+        //   let selected = this.props.currentPage == i ? "current-page-selected" : "";
+        //     options.push(<button className={selected} data-value={i} onClick={this.pageChange}>{i + 1}</button>);
+        // }
     }
 
     UNSAFE_componentWillReceiveProps(nextProps) {
@@ -147,10 +161,19 @@ class Grid extends Component {
 
     };
 
-    _onGetPage = pageNumber => {
+    _onGetPage = (pageNumber, page) => {
+        const { pageSize, filterText, promoted } = this.state;
+        this.props.dataFetcher({ offset: (page - 1) * pageSize + 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
+        console.log(pageNumber);
+        console.log(page);
+        sessionStorage.setItem(this.props.type+'_currentPage', page);
+        console.log("On get Page");
+    };
+
+    _onSetPage = pageNumber => {
         const { pageSize, filterText, promoted } = this.state;
         this.props.dataFetcher({ offset: (pageNumber - 1) * pageSize + 1, limit: pageSize, keyword: filterText, isPromoted: promoted });
-        
+        console.log("On set Page");
     };
 
     _onFilter = filterText => {
@@ -172,6 +195,7 @@ class Grid extends Component {
     }
 
     render() {
+        
         const { classes, placeholder } = this.props
         const style = {
             styles: {
@@ -189,7 +213,7 @@ class Grid extends Component {
                 NextButton: {
                     fontSize: '0.9em',
                     fontWeight: '600',
-                    fontFamily: 'Dosis',
+                    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
                     textTransform: 'inherit',
                     marginLeft: '64px',
                     marginRight: '64px',
@@ -205,7 +229,7 @@ class Grid extends Component {
                 PreviousButton: {
                     fontSize: '0.9em',
                     fontWeight: '600',
-                    fontFamily: 'Dosis',
+                    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
                     textTransform: 'inherit',
                     marginLeft: '64px',
                     marginRight: '64px',
@@ -221,8 +245,8 @@ class Grid extends Component {
                 PageDropdown: {
                     fontSize: '0.9em',
                     fontWeight: '600',
-                    fontFamily: 'Dosis',
-                    display: 'none',
+                    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+                    // display: 'none',
                 },
             }
         }
@@ -230,10 +254,12 @@ class Grid extends Component {
         const { filterText, data, currentPage, pageSize, recordCount, loading } = this.state;
 
         const NewLayout = ({ Table, Pagination, Filter }) => (
+            
             <div>
                 {/* <Filter /> */}
                 <Table />
                 <Pagination />
+                
             </div>
         );
 
@@ -297,6 +323,7 @@ class Grid extends Component {
                                 recordCount,
                             }}
                             useCustomPagerComponent="true"
+                            plugins={plugins.localPlugin}
                             components={{
                                 Layout: NewLayout,
                                 Row: this.props.CustomRowComponent,
@@ -304,12 +331,15 @@ class Grid extends Component {
                                 TableBody: CustomTableBody,
                                 PreviousButton: GriddleCustomPreviousButton,
                                 NextButton: GriddleCustomNextButton,
+                                PageDropdown: GriddleCustomPageDropdown,
+                                
                             }}
                             events={{
                                 onNext: this._onNext,
                                 onPrevious: this._onPrevious,
                                 onGetPage: this._onGetPage,
-                                onFilter: this._onFilter
+                                onFilter: this._onFilter,
+                                onSetPage: this._onSetPage
                             }}
                             styleConfig={style}
                         />

nextjs/components/templates/LayoutBack.js

@@ -1,9 +1,17 @@
+import React, { Component, useEffect } from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Router from 'next/router';
 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 { Button, Hidden } from '@material-ui/core';
+import Dialog from '@material-ui/core/Dialog';
+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';
+
 
 const styles = theme => ({
   inner: {
@@ -54,13 +62,70 @@ const styles = theme => ({
     position: 'absolute',
     left: theme.spacing(1),
   },
+  retour:{
+    fontFamily: 'Roboto',
+    color: '#1E2327',
+    fontSize: '0.8rem',
+    fontWeight: '500',
+
+  },
+  popup:{
+    fontFamily: 'Roboto',
+    color: '#1E2327',
+    fontSize: '0.8rem',
+    fontWeight: '500',
+  }
 });
 
-function LayoutBack(props) {
+class LayoutBack extends Component {
+  constructor(props) {
+    super(props);
+    
+  }
 
-  const { classes, height} = props;
+  state = {
+    open: false,
+
+  };
+  openDialog() {
+      this.setState({ open: true });
+  }
+
+  closeDialog() {
+      this.setState({ open: false });
+  }
+
+  refreshDialog() {
+      this.setState({ open: false });
+      window.location.reload();
+  }
+
+
+  
+  // Add a listener to prevent browser page refresh
+  componentWillMount() {
+    if (typeof window !== "undefined") {
+      window.onbeforeunload = (e) => { 
+        console.log('Stop this');
+        // this.openDialog();
+        e.preventDefault()
+        e.returnValue = '';
+      };
+    }
+  }
+
+  // Clear listener
+  componentWillUnmount() {
+    window.onbeforeunload = null
+  }
+  
+
+
+  render() {
+  const { classes, height} = this.props;
   
   //height fixed = height 100vh
+  var openStudio = this.props.openStudio ? 1 : 0;
   const content = (height == 'fixed') ? classes.content+' '+classes.contentFixed : classes.content
   return (
     <RootContainer align='center'>
@@ -70,24 +135,50 @@ function LayoutBack(props) {
             focusRipple
             className={classes.back}
             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}>
+              <div onClick={this.props.step==1 || openStudio==1 ? this.openDialog.bind(this) : () => Router.back()}>Retour</div>
+              
+            </Hidden>
+
+                    <Dialog open={this.state.open}>
+                        <DialogTitle className={classes.popup}>  Souhaitez-vous poursuivre votre candidature ?</DialogTitle>
+                        <DialogContent className={classes.popup}> Si vous cliquez sur le bouton Supprimer, tous les éléments associés à votre candidature (vidéo, CV…) seront définitivement supprimés. </DialogContent>
+                        <DialogActions className={classes.popup}>
+                        
+                        
+                        <Button onClick={this.refreshDialog.bind(this)} >
+                          Supprimer
+                        </Button>
+                        <Button onClick={this.closeDialog.bind(this)} autoFocus>
+                            Poursuivre
+                        </Button>
+                        </DialogActions>
+                    </Dialog>
           </ButtonBase>
           <Typography
             component="h1"
             align="center"
             className={classes.title}
           >
-            {props.text}
+            {this.props.text}
           </Typography>
         </div>
       </div>
       <div id="C" className={content}>
-        {props.children}
+        {this.props.children}
       </div>
 
     </RootContainer>
   )
+  }
+}
+LayoutBack.defaultProps = {
+  step: 0,
+  openStudio:false
 }
 
 export default withStyles(styles)(LayoutBack)

nextjs/components/templates/LayoutBackUrl.js

@@ -0,0 +1,105 @@
+import { withStyles } from '@material-ui/core/styles'
+import Router from 'next/router';
+import RootContainer from '../atoms/RootContainer'
+import ButtonBase from "@material-ui/core/ButtonBase";
+import Close from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+const styles = theme => ({
+  inner: {
+    height: '100%',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.04), 0 1px 10px 0 rgba(0, 0, 0, 0.04), 0 3px 5px -1px rgba(0, 0, 0, 0.04)',
+    backgroundColor: '#1E2327',
+    right:'30px'
+  },
+  head: {
+    zIndex: '999',
+    width: '100%',
+    height: '100px',
+    backgroundColor: '#1E2327',
+    position: 'fixed',
+    [theme.breakpoints.up('sm')]: {
+      height: '100px'
+    }
+  },
+  icon: {
+    fontSize: '3em',
+    textAlign :'right',
+    top:'30px',
+    right:'30px',
+    color:'#fff',
+    margin:'20px'
+  },
+  title: { 
+    color: theme.palette.primary.dark,
+  },
+  content: {
+    top: '100px',
+    width: '100%',
+    minHeight: '1000px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    position: 'relative',
+    backgroundColor: '#1E2327',
+  },
+  contentFixed: {
+     height: 'calc(100vh - 100px)',
+    backgroundColor: '#1E2327',
+  },
+  back: {
+    zIndex: 10,
+    border: 'none',
+    padding: theme.spacing(0.2),
+    textAlign: 'center',
+    textDecoration: 'none',
+    borderRadius: '50%',
+    position: 'absolute',
+    right: theme.spacing(1),
+    backgroundColor: '#34383C'
+  },
+  player: {
+    background:'#1E2327'
+  },
+});
+
+function LayoutBack(props) {
+
+  const { classes, height} = props;
+  
+  //height fixed = height 100vh
+  const content = (height == 'fixed') ? classes.content+' '+classes.contentFixed : classes.content
+  return (
+    <RootContainer align='center' className={content}>
+      <div id="H" className={classes.head}>
+        <div className={classes.inner}>
+          <ButtonBase name='back'
+            focusRipple
+            className={classes.back}
+            focusVisibleClassName={classes.focusVisible}
+            onClick={() => Router.push(props.url)}>
+            <Close color="#fff" classes={{ root: classes.icon }}></Close>
+          </ButtonBase>
+          <Typography
+            component="h1"
+            align="center"
+            className={classes.title}
+          >
+            {props.text}
+          </Typography>
+        </div>
+      </div>
+      <div id="C" className={content}>
+        {props.children}
+      </div>
+
+    </RootContainer>
+  )
+}
+
+export default withStyles(styles)(LayoutBack)

nextjs/components/templates/LayoutCompany.js

@@ -6,8 +6,9 @@ import RootContainer from '../atoms/RootContainer'
 import ButtonBase from "@material-ui/core/ButtonBase";
 import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import HideOnScroll from '../atoms/CollapsibleBack';
+import SocialShare from '../organisms/SocialShare'
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
-import Header from '../organisms/Header'
+import HeaderEntreprise from '../organisms/HeaderPersonnalise'
 import {AppBar,CssBaseline,Container,Toolbar,IconButton,Typography} from "@material-ui/core";
 import Hidden from '@material-ui/core/Hidden';
 import Link from 'next/link'
@@ -71,6 +72,7 @@ const styles = theme => ({
     padding: theme.spacing(1.2, 2),
     color: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.important,
+    textDecoration:'none',
   },
   voirOffre: {
     textTransform: 'inherit',
@@ -79,62 +81,56 @@ const styles = theme => ({
     padding: theme.spacing(1.2, 2),
     color: '#BBBCBD',
     backgroundColor: '#F3F3F4',
-    
+  },
+  lien:{
+    textDecoration:'none',
+    color:'#fff'
   },
 })
 
 function LayoutCompany(props) {
 
-  const { classes, companyId } = props;
-
+  const { classes, companyId, companyLibelle } = props;
+  const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Entreprise/${companyId}-${_.kebabCase(companyLibelle)}`;
   return (
-    <React.Fragment>
-      {isWidthUp('sm', props.width) ?
-        (<Header />)
-        :
-        (<HideOnScroll threshold={50}>
-          <AppBar className={classes.appBar}>
-            <Toolbar>
-              <ButtonBase name='back'
-                focusRipple
-                className={classes.back}
-                focusVisibleClassName={classes.focusVisible}
-                onClick={() => Router.back()}>
-                <ArrowLeft classes={{ root: classes.icon }}></ArrowLeft>
-              </ButtonBase>
-            </Toolbar>
-          </AppBar>
-        </HideOnScroll>)
-      }
-
-      <Container classes={{ root: classes.RootContainer }}>
+    
         <RootContainer>
+        <HeaderEntreprise  retour="Entreprises" menu="Entreprises"/>
           <div id="C" className={classes.content}>
             {props.children}
           </div>
           
           <Hidden mdUp>
           <div id="F" className={classes.foot}>
-          <Link href="#discover"  >
+          <Button
+              variant="contained"
+              className={classes.button + ' cypButtonApply'}
+              classes={{ root: classes.rootButton}}
+              
+            >
+              <a href={`/Reponse?companyId=${companyId}`} className={classes.lien }>Postuler</a>
+            </Button>
+            <SocialShare url={socialShareUrl} />
+          {/* <Link href="#discover"  >
             <Button
                 variant="contained"
                 className={classes.voirOffre + ' cypButtonApply'}
             >Voir les offres</Button>
                                             
-          </Link>
-            <Button
+          </Link> */}
+            {/* <a
+              href={`/Reponse?companyId=${companyId}`}
               variant="contained"
               className={classes.button}
               classes={{ root: classes.rootButton }}
-              onClick={() => Router.push(`/Reponse?companyId=${companyId}`)}
+              // onClick={() => Router.push(`/Reponse?companyId=${companyId}`)}
             >
-              Candidature spontanée</Button>
+              Candidature spontanée</a> */}
           </div>
           </Hidden>
 
         </RootContainer>
-      </Container>
-    </React.Fragment>
+      
 
   )
 }

nextjs/components/templates/LayoutOffre.js

@@ -5,11 +5,14 @@ import Router from 'next/router';
 import RootContainer from '../atoms/RootContainer'
 import ButtonBase from "@material-ui/core/ButtonBase";
 import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
-import Header from '../organisms/Header'
+import HeaderPersonnalise from '../organisms/HeaderPersonnalise'
+import SocialShare from '../organisms/SocialShare'
 import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
 import Hidden from '@material-ui/core/Hidden';
 import Link from 'next/link'
-
+import getConfig from 'next/config'
+import _ from "lodash/string";
+const { publicRuntimeConfig } = getConfig()
 const styles = theme => ({
   foot: {
     display: 'flex',
@@ -22,6 +25,10 @@ const styles = theme => ({
     backgroundColor: theme.palette.secondary.main,
     boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
   },
+  lien:{
+    textDecoration:'none',
+    color:'#fff'
+  },
   contentDefault: {
     height: 'auto',
     position: 'relative',
@@ -57,8 +64,8 @@ const styles = theme => ({
   },
   button: {
     textTransform: 'inherit',
-    marginLeft: theme.spacing(8),
-    marginRight: theme.spacing(8),
+    marginLeft: theme.spacing(4.5),
+    marginRight: theme.spacing(4.5),
     padding: theme.spacing(1.2, 2),
     color: theme.palette.secondary.main,
     backgroundColor: theme.palette.primary.important,
@@ -72,26 +79,22 @@ const styles = theme => ({
     backgroundColor: '#F3F3F4',
 
   },
+  pourvuButton:{
+        padding :'10px',
+        textTransform: 'inherit',
+  },
 })
 
 function LayoutOffre(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('sm', props.width) ?
-        (<Header />)
-        :
-        (<ButtonBase name='back'
-          focusRipple
-          className={classes.back}
-          focusVisibleClassName={classes.focusVisible}
-          onClick={() => Router.back()}>
-          <ArrowLeft classes={{ root: classes.icon }}></ArrowLeft>
-        </ButtonBase>)
-      }
+      
+      <HeaderPersonnalise retour="Offres" menu="Offres d'emploi"/>
+        
       <div id="C" className={contentClass}>
         {props.children}
       </div>
@@ -101,21 +104,36 @@ function LayoutOffre(props) {
           <div id="F" className={classes.foot}>
             {/* <div className={classes.inner}>
           <div className={classes.grow} /> */}
-            <Link href={`/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`} >
+            {/* <Link href={`/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`} >
               <Button
                   variant="contained"
                   className={classes.voirEntreprise + ' cypButtonApply'}
-              >Voir l'entreprise</Button>
-                                    
-             </Link>
+              >Voir l'entreprise</Button>              
+             </Link> */}
             
             <Button
               variant="contained"
               className={classes.button + ' cypButtonApply'}
               classes={{ root: classes.rootButton}}
-              onClick={() => Router.push(`/Reponse?adId=${offreId}`)}
+              
             >
-              Postuler</Button>
+              <a href={`/Reponse?adId=${offreId}`} className={classes.lien }>Postuler</a>
+            </Button>
+            <SocialShare url={socialShareUrl} />
+
+            {/* <div className={classes.grow} />
+        </div> */}
+          </div>
+        )}
+        {isProvided && (
+          <div id="F" className={classes.foot}>
+            {/* <div className={classes.inner}>
+          <div className={classes.grow} /> */}
+            
+            
+            <Button variant="contained" disabled className={classes.pourvuButton}>
+                                        Offre pourvue
+            </Button>
             {/* <div className={classes.grow} />
         </div> */}
           </div>
@@ -130,4 +148,4 @@ LayoutOffre.propTypes = {
   offre: PropTypes.object,
 };
 
-export default withStyles(styles)(withWidth()(LayoutOffre))
+export default withStyles(styles)(LayoutOffre)

nextjs/components/templates/loader.js

@@ -8,7 +8,7 @@ const styles = theme => ({
     alignItems: 'center',
     textAlign: 'center',
     justifyContent: 'center',
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontWeight: '500',
     fontSize: '1em',
     padding: theme.spacing(6,0),

nextjs/components/templates/loaderVideo.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { withStyles } from '@material-ui/core/styles'
+import LinearProgress from '@material-ui/core/LinearProgress';
 const styles = theme => ({
   loader: {
     display: 'flex',
@@ -8,20 +9,45 @@ const styles = theme => ({
     alignItems: 'center',
     textAlign: 'center',
     justifyContent: 'center',
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontWeight: '500',
     fontSize: '1em',
     padding: theme.spacing(6,0),
-    color: theme.palette.primary.main,
+    margin:'50px 0',
+  },
+  loaderGras:{
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    paddingTop:'10px',
+    fontSize: '1.875em',
+    fontWeight: '500',
+    marginBottom:'30px',
+
+  },
+  loaderSecondaire:{
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    fontSize: '1em',
+    fontWeight: '300',
+  },
+  root: {
+    top:"200px",
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(2),
+    },
   },
 })
 
 class LoaderVideo extends React.Component {
   render() {
-    const { classes } = this.props;
+    const { classes, textePrincipal, texteSecondaire } = this.props;
     return (
-      <div className={classes.loader + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Chargement... <br/>Le temps de chargement peut varier de quelques secondes à <b>plusieurs minutes</b> en fonction de la qualité de votre connexion internet.<br/></div>
-    )
+      <div className={classes.root}>
+        <div className={classes.loader }><CircularProgress color="primary" /><span className={classes.loaderGras }>{textePrincipal}</span><br/><span className={classes.loaderSecondaire }> {texteSecondaire}</span><br/></div>
+        <div >
+        
+        </div>
+      </div>
+      )
 
   }
 }

nextjs/data/api.js

@@ -2,21 +2,29 @@ import axios from "axios";
 import { fetchAnswerFailure } from "../actions/answer";
 import setAuthorizationHeader from "./setAuthorizationHeader";
 import Router from 'next/router';
+
+var https = require('https');
+
 //axios.defaults.headers.common = { 'X-Requested-With': 'XMLHttpRequest' }
 axios.defaults.baseURL = (process.env.NODE_ENV !== 'production') ?
     'http://localhost/app_dev.php/' :
     process.env.SERVER_URL;
 
+const httpsAgent = new https.Agent({ rejectUnauthorized: false });
+axios.defaults.httpsAgent = httpsAgent;
+
 axios.interceptors.response.use(response => {
     return response;
 }, error => {
     if (error.response.status === 401) {
         localStorage.setItem('ttJWT', '');
+        console.log("REPONSE REDIRECT LOGIN")
         Router.push("/Login");
     }
     return error;
 });
 
+
 export default {
     user: {
         login: credentials =>
@@ -96,7 +104,7 @@ export default {
         postAnswer: (payload) => {
             return axios.post("/api/answers", { adId: payload.adId, mediaId: payload.mediaId, companyId: payload.companyId }).then(res => res)
         },
-        fetchJobsAnswered: ({ limit = null, order = "", keyword = "", offset = 1 }) => {
+        fetchJobsAnswered: ({ limit = null, order = "desc", keyword = "", offset = 1 }) => {
             return axios.get(`api/answers`, { params: { offset, limit, order, keyword } }).then(res => res.data)
         },
         fetchAnswer: (payload) => {
@@ -128,6 +136,9 @@ export default {
                 withCredentials: true
             }).then(res => res)
         },
+        
+    },
+    cv:{
         uploadMediaCv: (payload) => {
             return axios.post("/api/mediaCv", payload, {
                 headers: {
@@ -141,14 +152,34 @@ export default {
         countAdView: id => {
             if (!!localStorage.ttJWT)
                 setAuthorizationHeader(localStorage.ttJWT)
-            axios.get(`api/adAjaxRecStat/${id}`)
+                let continuerAds = true;
+            
+                if (sessionStorage.getItem("ads"+id)){
+                    continuerAds=false;
+                }
+             
+                if( continuerAds){
+                    axios.get(`api/adAjaxRecStat/${id}`)
+                    sessionStorage.setItem('ads'+id, id);
+                }
         },
         countCompanyView: id => {
-            if (!!localStorage.ttJWT)
-                setAuthorizationHeader(localStorage.ttJWT)
-            axios.get(`api/companyAjaxRecStat/${id}`)
+            if (!!localStorage.ttJWT){
+                setAuthorizationHeader(localStorage.ttJWT);
+            }
+
+            let continuer = true;
+            
+            if (sessionStorage.getItem("companies"+id)){
+                continuer=false;
+            }
+         
+            if( continuer){
+                axios.get(`api/companyAjaxRecStat/${id}`);
+                sessionStorage.setItem('companies'+id, id);
+            }
         }, 
     }
 
 
-};
+};

nextjs/next.config.js

@@ -41,21 +41,22 @@ module.exports = withPlugins(
     [{
       publicRuntimeConfig: {
         // DEV
-        // symphonyUrl: 'http://localhost/app_dev.php/',
+        // symphonyUrl: 'http://localhost/',
         // blogUrl: 'https://blog.talentstube.com',
         // frontServerUrl: 'http://localhost:3000',
         // cvThequeUrl: 'https://recruteur.talentstube.com',
         // PROD
-        // symphonyUrl: 'https://recruteur.talentstube.com/',
-        // blogUrl: 'https://blog.talentstube.com',
-        // frontServerUrl: 'https://www.talentstube.com/',
-        // cvThequeUrl: 'https://recruteur.talentstube.com',
-        // PRE PROD
-        symphonyUrl: 'https://pp.talentstube.com/',
+        symphonyUrl: 'https://recruteur.talentstube.com/',
         blogUrl: 'https://blog.talentstube.com',
-        frontServerUrl: 'https://pp.app.talentstube.com/',
+        frontServerUrl: 'https://www.talentstube.com/',
         cvThequeUrl: 'https://recruteur.talentstube.com',
-        adListDefaultUrl: '/statique/images/default/default_picture_company.svg',
+        // PRE PROD
+        // symphonyUrl: 'https://pp.talentstube.com/',
+        // blogUrl: 'https://blog.talentstube.com',
+        // frontServerUrl: 'https://pp.app.talentstube.com/',
+        // cvThequeUrl: 'https://recruteur.talentstube.com',
+        version : 'V2.11.2',
+        adListDefaultUrl: '/statique/images/default/default_picture_company.jpg',
         cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
         postedContentUrl: '/uploads/img/',
         postedContentCv: '/uploads/cv/',

nextjs/out/sitemap_local.xml

@@ -1,28 +1,594 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
   <url>
-    <loc>https://app.talentstube.com/Candidature</loc>
-    <lastmod>2019-09-17</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Cgu</loc>
-    <lastmod>2019-09-17</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Confidentialite</loc>
-    <lastmod>2019-11-04</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Entreprises</loc>
-    <lastmod>2019-09-17</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Help</loc>
-    <lastmod>2019-10-11</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Login</loc>
-    <lastmod>2019-10-14</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/MentionsLegales</loc>
-    <lastmod>2019-11-04</lastmod>
-  </url>,<url>
-    <loc>https://app.talentstube.com/Offres</loc>
-    <lastmod>2019-10-16</lastmod>
+    <loc>https://www.talentstube.com/Offre/154-carrossier-f-h</loc>
+    <lastmod>2021-07-03</lastmod>
+    <priority>1.00</priority>
   </url>
-</urlset>
+  <url>
+    <loc>https://www.talentstube.com/Offre/155-mecanicien-f-h</loc>
+    <lastmod>2021-07-03</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/152-animateur-des-relais-assistants-maternels-f-h</loc>
+    <lastmod>2021-06-27</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/147-monteur-de-systemes-mecanises-h-f</loc>
+    <lastmod>2021-06-28</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/33350-greenyard-frozen</loc>
+    <lastmod>2021-06-28</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/149-commercial-b-to-b-f-h/</loc>
+    <lastmod>2021-05-17</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/150-responsable-webmarketing-f-h/</loc>
+    <lastmod>2021-05-17</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/33190-les-francas-doubs/</loc>
+    <lastmod>2021-04-26</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/148-educateur-de-jeunes-enfants-f-h</loc>
+    <lastmod>2021-04-26</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/146-animateur-ado-f-h</loc>
+    <lastmod>2021-04-17</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/144-soudeur-f-h</loc>
+    <lastmod>2021-04-19</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/143-dessinateur-3-d-f-h</loc>
+    <lastmod>2021-04-19</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/142-charge-daffaires-f-h</loc>
+    <lastmod>2021-03-24</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=146&amp;url=/Offre/146-animateur-ado-f-h&amp;videoId=535772088&amp;typeEntite=Offre&amp;nameCompany=Les%20Francas%20du%20Doubs&amp;nameOffre=Animateur%20Ado%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>	
+  <url>
+    <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/135-commercial-b-to-c-f-h&amp;videoId=502499843&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20C%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>	
+  <url>
+    <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/135-commercial-b-to-c-f-h&amp;videoId=502499843&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20C%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>	
+  <url>
+    <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/135-commercial-b-to-c-f-h&amp;videoId=502499843&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20C%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>	
+  <url>
+    <loc>https://www.talentstube.com/Player?id=133&amp;url=/Offre/133-gestionnaire-de-copropriete-f-h&amp;videoId=500395879&amp;typeEntite=Offre&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=Gestionnaire%20de%20co%20propriete</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=132&amp;url=/Offre/132-comptable-f-h&amp;videoId=495504495&amp;typeEntite=Offre&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=Comptable%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=130&amp;url=/Offre/130-assistant-f-h&amp;videoId=495156742&amp;typeEntite=Offre&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=Assistant%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=131&amp;url=/Offre/131-poseur-f-h&amp;videoId=494089386&amp;typeEntite=Offre&amp;nameCompany=TPC%20Ouest&amp;nameOffre=Poseur%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=131&amp;url=/Offre/140-aide-a-domicile-f-h&amp;videoId=507891163&amp;typeEntite=Offre&amp;nameCompany=ADMR56&amp;nameOffre=Aide%20a%20domicile</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=135&amp;url=/Offre/129-commercial-b-to-b-f-h&amp;videoId=491331138&amp;typeEntite=Offre&amp;nameCompany=Fym%20Action&amp;nameOffre=Commercial%20B%20to%20b%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=122&amp;url=/Offre/122-chauffeurs-spl-f-h&amp;videoId=482599011&amp;typeEntite=Offre&amp;nameCompany=AER%20Recyclage&amp;nameOffre=Chauffeurs%20SPL%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=128&amp;url=/Offre/128-techniciens-poseurs-f-h&amp;videoId=485471109&amp;typeEntite=Offre&amp;nameCompany=Pro%20Fermetures&amp;nameOffre=Techniciens%20Poseurs%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=113&amp;url=/Offre/113-aide-a-domicile-f-h&amp;videoId=440702903&amp;typeEntite=Offre&amp;nameCompany=Onela&amp;nameOffre=Aide%20à%20domicile%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=120&amp;url=/Offre/120-technico-commercial-f-h&amp;videoId=462942715&amp;typeEntite=Offre&amp;nameCompany=Temporis&amp;nameOffre=Technico-Commercial%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=115&amp;url=/Offre/115-technicien-ramoneur-fumiste-f-h&amp;videoId=460206945&amp;typeEntite=Offre&amp;nameCompany=La%20Centrale%20des%20Ramoneurs&amp;nameOffre=Technicien%20Ramoneur%20/%20Fumiste%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=109&amp;url=/Offre/109-equipier-de-plateforme-polyvalent-f-h&amp;videoId=422692890&amp;typeEntite=Offre&amp;nameCompany=AER%20Recyclage&amp;nameOffre=Equipier%20de%20plateforme%20polyvalent%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=112&amp;url=/Offre/112-conseillers-technico-commerciaux-h-f&amp;videoId=438478115&amp;typeEntite=Offre&amp;nameCompany=Pro%20Fermetures&amp;nameOffre=Conseillers%20Technico-Commerciaux%20(H/F)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=111&amp;url=/Offre/111-couvreur-etancheur-f-h&amp;videoId=432410136&amp;typeEntite=Offre&amp;nameCompany=Blandin&amp;nameOffre=Couvreur/Étancheur%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=108&amp;url=/Offre/108-plombier-chauffagiste-f-h&amp;videoId=398509552&amp;typeEntite=Offre&amp;nameCompany=Blandin&amp;nameOffre=Plombier/Chauffagiste%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=107&amp;url=/Offre/107-operateur-soudeur-chaudronnier-f-h&amp;videoId=397982745&amp;typeEntite=Offre&amp;nameCompany=GEIQ%20Industrie%2044&amp;nameOffre=Opérateur%20Soudeur%20/%20Chaudronnier%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=101&amp;url=/Offre/101-conducteurs-routiers-f-h&amp;videoId=391023366&amp;typeEntite=Offre&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=Conducteurs%20routiers%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=103&amp;url=/Offre/103-agents-de-quai-f-h&amp;videoId=391023871&amp;typeEntite=Offre&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=Agents%20de%20quai%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=77&amp;url=/Offre/77-commercial-sedentaire-en-vente-directe-b-to-b-h-f&amp;videoId=343666512&amp;typeEntite=Offre&amp;nameCompany=Télémaque&amp;nameOffre=Commercial%20sédentaire%20en%20vente%20directe%20B%20to%20B%20(H/F)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=102&amp;url=/Offre/102-preparateurs-de-commandes-f-h&amp;videoId=391023988&amp;typeEntite=Offre&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=Préparateurs%20de%20commandes%20(F/H)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=46&amp;url=/Offre/46-conducteurs-routiers-h-f&amp;videoId=273464203&amp;typeEntite=Offre&amp;nameCompany=Groupe%20MOUSSET&amp;nameOffre=Conducteurs%20routiers%20(H/F)</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=32518&amp;url=/Entreprise/32518-cabinet-jourdan&amp;videoId=491607083&amp;typeEntite=Entreprise&amp;nameCompany=Cabinet%20JOURDAN&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=32507&amp;url=/Entreprise/32507-tpc-ouest&amp;videoId=489836459&amp;typeEntite=Entreprise&amp;nameCompany=TPC%20Ouest&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=32355&amp;url=/Entreprise/32355-hyphae&amp;videoId=478847996&amp;typeEntite=Entreprise&amp;nameCompany=HYPHAE&amp;nameOffre=</loc>
+    <lastmod>2021-02-04</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=21247&amp;url=/Entreprise/21247-lactalis-logistique-et-transports&amp;videoId=391023777&amp;typeEntite=Entreprise&amp;nameCompany=Lactalis%20Logistique%20et%20Transports&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=19800&amp;url=/Entreprise/19800-silvadec&amp;videoId=386500340&amp;typeEntite=Entreprise&amp;nameCompany=Silvadec&amp;nameOffre=</loc>
+    <lastmod>2021-02-04</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=19205&amp;url=/Entreprise/19205-intermarche-logistique-alimentaire-international&amp;videoId=385268706&amp;typeEntite=Entreprise&amp;nameCompany=Intermarché%20Logistique%20Alimentaire%20International&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Player?id=12480&amp;url=/Entreprise/12480-fym-action&amp;videoId=345898361&amp;typeEntite=Entreprise&amp;nameCompany=Fym%20Action&amp;nameOffre=</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+   <url>
+    <loc>https://www.talentstube.com/Offre/143-dessinateur-3d-f-h</loc>
+    <lastmod>2021-03-31</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/140-aide-a-domicile-f-h</loc>
+    <lastmod>2021-02-10</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/133-gestionnaire-de-copropriete-f-h</loc>
+    <lastmod>2021-01-29</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprises</loc>
+    <lastmod>2021-01-18</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com</loc>
+    <lastmod>2021-03-09</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offres</loc>
+    <lastmod>2021-01-18</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/134-assistant-administratif-et-commercial-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/135-commercial-b-to-c-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/130-assistant-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/131-poseur-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/132-comptable-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/129-commerciaux-b-to-b-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/128-techniciens-poseurs-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/122-chauffeurs-spl-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/115-technicien-ramoneur-fumiste-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/109-equipier-de-plateforme-polyvalent-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/111-couvreur-etancheur-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/107-operateur-soudeur-chaudronnier-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/103-agents-de-quai-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/102-preparateurs-de-commandes-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/46-conducteurs-routiers-h-f</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/32507-tpc-ouest</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/32355-hyphae</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/28481-onela</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/28172-pro-fermetures</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/26064-aer-recyclage</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/21247-lactalis-logistique-et-transports</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/19800-silvadec</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/19205-intermarche-logistique-alimentaire-international</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/18143-l-n-u-f-lisieux</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/17467-l-n-u-f-vallet</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16785-nachos</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16639-fast-point</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16247-sasp</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16015-la-veggisserie</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16007-bforpu-b</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/15797-sinay</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/15559-monibrand</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/13464-jpa</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/12531-grand-ouest-etiquettes</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/12480-fym-action</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11592-youston</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11413-les-vergers-de-chateaubourg</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11345-telemaque</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/9138-vital-concept</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/8639-mma-questembert</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7593-opticultures</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7174-atlantem</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7004-la-table-de-la-desirade</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6898-le-ptit-club</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6555-mazars</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6363-square-habitat</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/5250-linpac-packaging-pontivy-groupe-klockner-pentaplast</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4211-progressis-ge</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4097-a-2-com</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4088-venetis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4059-eiffage-construction-grand-ouest</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/3381-mairie-saint-hilaire-de-riez</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2958-skiold-acemo</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2527-groupe-mousset</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2341-temporis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1899-faurecia</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1691-groupe-syselec</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1467-groupe-rocher-operations</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1297-albea</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/438-bouyer-leroux</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/266-mgdis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/157-medaviz</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/95-multiplast</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/52-talents-tube</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/46-actual</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/18-coriolis-composites</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/17-thibault-bergeron</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+</urlset>

nextjs/package.json

@@ -12,7 +12,7 @@
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@ostai/next-css": "^1.0.2",
     "autosuggest-highlight": "^3.1.1",
-    "axios": "^0.18.0",
+    "axios": "^0.23.0",
     "connect-mongo": "^2.0.1",
     "cross-env": "^5.2.0",
     "css-loader": "^3.2.0",
@@ -27,6 +27,7 @@
     "jss": "latest",
     "lodash": "^4.17.11",
     "mongodb": "^3.1.6",
+    "mui-places-autocomplete": "^2.0.0",
     "nedb": "^1.8.0",
     "next": "^9.1.1",
     "next-auth": "^1.11.0",
@@ -35,7 +36,7 @@
     "next-optimized-images": "^1.4.1",
     "next-redux-saga": "^4.0.2",
     "next-redux-wrapper": "^3.0.0-alpha.2",
-    "next-seo": "^4.7.3",
+    "next-seo": "^4.18.0",
     "next-transpile-modules": "^2.3.1",
     "node-mailjet": "^3.3.1",
     "nodemailer": "^4.6.8",
@@ -50,12 +51,20 @@
     "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-helmet": "^6.1.0",
     "react-html-parser": "^2.0.2",
     "react-jss": "latest",
     "react-moment": "^0.9.7",
+    "react-places-autocomplete": "^7.3.0",
     "react-redux": "^7.0.3",
+    "react-redux-loading-bar": "^5.0.0",
+    "react-router-dom": "^5.2.0",
+    "react-select": "^3.1.1",
+    "react-slick": "^0.28.1",
+    "react-sticky-box": "^0.9.3",
     "react-swipeable-views": "^0.13.3",
     "reactstrap": "^6.4.0",
     "recordrtc": "^5.5.4",
@@ -69,6 +78,7 @@
     "terser": "3.14",
     "universal-cookie": "^3.0.4",
     "validator": "^11.0.0",
+    "video-react": "^0.14.1",
     "videojs-record": "^3.8.0",
     "webrtc-adapter": "^7.2.3"
   },

nextjs/pages/Answer.js

@@ -0,0 +1,443 @@
+import React, {Fragment} from 'react';
+import {connect} from "react-redux";
+import PropTypes from 'prop-types';
+
+import _ from "lodash"
+import {withStyles} from '@material-ui/core/styles';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import {TextField, Button, Typography, Grid, Hidden} from '@material-ui/core';
+import SwipeableViews from 'react-swipeable-views';
+import Snack from '../components/atoms/snack'
+import Loader from '../components/templates/loader'
+import LayoutCandidature from '../components/templates/LayoutCandidature';
+import CandidatureDetail from '../components/organisms/AnswerDetail'
+import OffreDetail from '../components/organisms/OffreDetail'
+import Chat from '../components/organisms/Chat'
+import AppBar from '@material-ui/core/AppBar';
+import {AnswersSelector} from '../reducers/answers'
+import {fetchAnswerRequest} from '../actions/answer'
+import Head from 'next/head'
+import Chip from '@material-ui/core/Chip';
+import getConfig from 'next/config'
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import ButtonBase from '@material-ui/core/ButtonBase';
+
+const {publicRuntimeConfig} = getConfig()
+const styles = theme => ({
+    root: {
+        position: 'relative',
+        textAlign: 'center',
+        paddingTop: theme.spacing(20),
+        justifyContent: 'center'
+    },
+    container: {
+        // display: 'flex',
+        // flexDirection: 'column',
+        height: '100%'
+    },
+    userDataContainer: {
+        // display: 'flex',
+        padding: theme.spacing(2) + 'px ',
+        [theme.breakpoints.up('md')]: {
+            padding: theme.spacing(2) + 'px 18vw',
+        },
+    },
+    userTextContainer: {
+        // display: 'flex',
+        // flexDirection: 'column',
+        paddingLeft: theme.spacing(2)
+    },
+    AppBar: {
+        top: '64px',
+        position: 'fixed'
+    },
+    SwipeableViews: {
+        paddingTop: '64px'
+    },
+    tab: {
+        '& span.MuiTab-wrapper': {
+            fontSize: '1.1em',
+            fontWeight: '300',
+            textTransform: 'none'
+        }
+    },
+    title: {
+        fontSize: '1em',
+        fontWeight: '500'
+    },
+    titleBorder: {
+        '&:after': {
+            content: '""',
+            width: '15px',
+            borderBottom: 'solid 2px',
+            borderColor: theme.palette.primary.main + '!important',
+            // display: 'flex'
+        }
+    },
+    userTextName: {
+        fontWeight: '500',
+        fontSize: '1em'
+    },
+    userTextDate: {
+        fontWeight: '500',
+        fontSize: '0.9em'
+    },
+    texteInfo:{
+        fontWeight: '300',
+        fontSize: '0.9em'
+    },
+    userAvatar: {
+        maxWidth: '104px',
+        
+    },
+    menuLogo: {
+        cursor: 'pointer',
+        [
+            theme
+                .breakpoints
+                .down('md')
+        ]: {
+            width: '200px'
+        },
+        [
+            theme
+                .breakpoints
+                .down('sm')
+        ]: {
+            width: '130px'
+        }
+    },
+    information: {
+        padding: "1em",
+        width: "100%",
+        backgroundColor: theme.palette.secondary.main,
+        borderRadius: "5px",
+        marginBottom: "30px",
+        borderColor: "1px solid #E5E5E6"
+
+    },
+    grille: {
+        paddingTop: theme.spacing(4),
+        paddingBottom: theme.spacing(4),
+        paddingLeft : theme.spacing(4),
+        marginBottom: "30px",
+
+        borderRadius: "5px",
+        border: "1px solid #1E2327",
+        color: theme.palette.primary.dark
+    },
+    menuLien: {
+        fontSize: "1em",
+        textTransform: "uppercase",
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        color: theme.palette.primary.dark,
+        textDecoration: "none",
+        '&:hover': {
+            color: theme.palette.primary.dark
+        },
+        '&:active': {
+            color: theme.palette.primary.dark
+        },
+        '&:visited': {
+            color: theme.palette.primary.dark
+        }
+    },
+    grilleGauche: {
+        textAlign: "center"
+    },
+    grilleDroite: {
+        textAlign: "center"
+    },
+    grilleBas: {
+        backgroundColor: theme.palette.secondary.dark
+    },
+    chip: {
+        marginTop: "10px",
+        backgroundColor: "#E7F3FF",
+        color: theme.palette.primary.dark
+    },
+    icon: {
+        color: theme.palette.secondary.dark
+    }
+});
+
+function TabContainer({children, dir}) {
+    return (
+        <Typography
+            component="div"
+            dir={dir}
+            style={{
+            padding: 8 * 3
+        }}>
+            {children}
+        </Typography>
+    );
+}
+const status = new Map([
+
+    ["A_TRAITER"
+      , "Envoyée"]
+    ,
+    ["CONTACTE"
+      , "En cours de traitement"]
+    ,
+    ["ENTRETIEN"
+      , "En cours de traitement"]
+    ,
+    ["REFUSE"
+      , "Refusée"]
+    ,
+    ["EMBAUCHE"
+      , "Embauchée"]
+    ,
+    ["EXPIRED"
+      , "Expirée"]
+    ,
+    [""
+      , "Envoyée"]
+    ,
+    ["Null"
+      , "Envoyée"]
+    ,
+  
+  ])
+class Candidature extends React.Component {
+    state = {
+        data: {},
+        errors: {},
+        loading: true,
+        tabIndex: 0,
+        openSnack: false
+    }
+
+    static getInitialProps(context) {
+        const {id} = context.query
+        return {
+            id: id * 1
+        }
+    }
+
+    componentDidMount() {
+
+        this
+            .props
+            .fetchAnswerRequest(this.props.id)
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        this.setState({loading: nextProps.answer.loading})
+    }
+
+    componentWillUnmount() {}
+
+    handleChange = (event, newValue) => {
+        this.setState({tabIndex: newValue});
+    }
+
+    handleChangeIndex = (index) => {
+        this.setState({tabIndex: index});
+    }
+
+    render() {
+        const {classes} = this.props;
+        const {data, errors, loading, openSnack} = this.state;
+        console.log("test");
+        const logoUrl = (this.props.answer.ad
+            ? (this.props.answer.ad.company.logo
+                ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + this.props.answer.ad.company.logo
+                : publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg")
+            :  this.props.answer.company
+            ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + this.props.answer.company.logo
+            : publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg")
+        const nomCompany = (this.props.answer.ad
+            ? (this.props.answer.ad.company.brand_name
+                ? this.props.answer.ad.company.brand_name
+                : "")
+            : this.props.answer.company
+                ? this.props.answer.company.brand_name
+                : "")
+
+        const nomAd = (this.props.answer.ad
+            ? (this.props.answer.ad.title
+                ? this.props.answer.ad.title
+                : "Candidature spontanée")
+            : "Candidature spontanée")
+        
+                //L'entreprise {nomCompany} étudie actuellement votre candidature
+
+        const infos = new Map([
+
+            [
+                "A_TRAITER", "Votre candidature a bien été envoyée à l’entreprise "+nomCompany
+            ],
+            [
+                "CONTACTE", "L'entreprise "+nomCompany+" étudie actuellement votre candidature"
+            ],
+            [
+                "ENTRETIEN", "L'entreprise "+nomCompany+" étudie actuellement votre candidature"
+            ],
+            [
+                "REFUSE", "Votre candidature a été refusée par l’entreprise "+nomCompany+"."
+
+
+            ],
+            [
+                "EMBAUCHE", "Votre candidature a été acceptée par l’entreprise "+nomCompany+"."
+            ],
+            [
+                "EXPIRED", "Expirée"
+            ],
+            [
+                "", "Envoyée"
+            ],
+            ["Null", "Envoyée"]
+        ])
+        //brand_name
+        return (
+            <LayoutCandidature>
+                <Head>
+                    <title key="title">Candidature</title>
+                    <meta name="robots" content="noindex, nofollow"></meta>
+                </Head>
+                <Fragment>
+                    <div className={classes.container}>
+                        {/* {!!errors && (<div className="alert alert-danger">{errors && errors.message}</div> )} */}
+                        {loading && (<Loader/>)}
+                        {!loading && (
+
+                            <Fragment>
+                                <AppBar color="default" className={classes.AppBar}>
+                                    <Tabs
+                                        value={this.state.tabIndex}
+                                        onChange={this.handleChange}
+                                        indicatorColor="primary"
+                                        variant="fullWidth">
+                                        <Tab label="Candidature" className={classes.tab}/>
+                                        <Tab label="Messagerie" className={classes.tab}/>
+                                        <Tab label="Offre d'emploi" className={classes.tab}/>
+                                    </Tabs>
+                                </AppBar>
+                                <SwipeableViews
+                                    axis={'x'}
+                                    index={this.state.tabIndex}
+                                    onChangeIndex={() => this.handleChangeIndex()}
+                                    className={classes.SwipeableViews}>
+                                    <TabContainer dir={'x'}>
+                                        <Fragment>
+                                            <section className={classes.userDataContainer}>
+                                                <Grid container spacing={2} className={classes.grille}>
+                                                    <Grid item>
+                                                        <ButtonBase className={classes.image}>
+                                                            <img alt="talents-tube" src={logoUrl} className={classes.userAvatar}/>
+                                                        
+                                                        </ButtonBase>
+                                                    </Grid>
+                                                    <Grid item lg={12} xl container>
+                                                        <Grid item xs container direction="column" spacing={2}>
+                                                            <Grid item xl>
+                                                                <Typography gutterBottom variant="subtitle1">
+                                                                    {(this.props.answer.ad
+                                                                        ? (this.props.answer.ad.company.brand_name
+                                                                            ? this.props.answer.ad.company.brand_name
+                                                                            : "")
+                                                                        : this.props.answer.company.brand_name)}
+                                                                </Typography>
+                                                                <Typography variant="body2" gutterBottom>
+                                                                    {this.props.answer.ad
+                                                                        ? (this.props.answer.ad.title
+                                                                            ? this.props.answer.ad.title
+                                                                            : "Candidature spontanée")
+                                                                        : "Candidature spontanée"}
+                                                                </Typography>
+                                                                
+                                                            </Grid>
+                                                        
+                                                        </Grid>
+                                                        
+                                                    </Grid>
+                                                </Grid>
+                                                <Grid container spacing={2} className={classes.grille}>
+                                                    <Grid container >
+
+                                                        
+                                                            <Grid item>
+                                                            <Typography gutterBottom className={classes.userTextDate}>
+                                                                Envoyé le : 
+                                                            </Typography>
+                                                            </Grid>
+                                                            <Grid item xs={12} sm container>
+                                                            <Typography gutterBottom className={classes.texteInfo}>
+                                                                {(new Date(this.props.answer.c_time)).toLocaleDateString("fr-FR")}
+                                                            </Typography>
+                                                            </Grid>
+                                                            
+                                                    </Grid>
+                                                    <Grid container spacing={2} >
+
+                                                        
+                                                            <Grid item>
+                                                            <Typography gutterBottom variant="subtitle1" className={classes.userTextDate}>
+                         
+                                                                Statut :
+                                                            </Typography>
+                                                            </Grid>
+                                                            <Grid item xl={12} xl >
+                                                                <Grid  xl={12} xl container>
+                                                                    <Typography gutterBottom className={classes.texteInfo}>
+                                                                        <Chip size="small" label={status.get(this.props.answer.status_reponse)? status.get(this.props.answer.status_reponse) : "Envoyée" } className={classes.chip} /> 
+                                                                    </Typography>
+                                                                </Grid>
+                                                                <Grid  xl={12} xl container>
+                                                                    <Typography gutterBottom className={classes.texteInfo}>
+                                                                        {infos.get(this.props.answer.status_reponse)
+                                                                            ? infos.get(this.props.answer.status_reponse)
+                                                                            : "L'entreprise "+nomCompany+" étudie actuellement votre candidature"}
+                                                                    </Typography>
+                                                                </Grid>
+                                                            </Grid>
+                                                            
+                                                    </Grid>
+                                                </Grid>
+                                                
+                                                
+                                                    <Grid item className={classes.grille} spacing={2}>                
+                                                    {this.props.answer.video && <CandidatureDetail {...this.props.answer}/>}
+                                                    </Grid>
+                                                   
+
+                                            </section>
+                                           
+                                        </Fragment>
+                                    </TabContainer>
+                                    <TabContainer dir={'x'}>
+                                        {this.props.answer.messages && <Chat answerId={this.props.answer.id} nomCompany={nomCompany} logoUrl={logoUrl} nomAd={nomAd}></Chat>}
+                                    </TabContainer>
+                                    <TabContainer dir={'x'}>
+                                        {this.props.answer.ad && <OffreDetail isCandidature='true' offre={this.props.answer.ad}/>}
+                                    </TabContainer>
+                                </SwipeableViews>
+                            </Fragment>
+                        )}
+                    </div>
+                    <Snack
+                        variant="error"
+                        message={this.state.errors.message}
+                        openSnack={this.state.openSnack}
+                        onClose={this.handleClose}/>
+                </Fragment>
+            </LayoutCandidature>
+        );
+    }
+}
+
+function mapStateToProps(state) {
+    return {answer: state.answer, user: state.user}
+}
+
+Candidature.propTypes = {
+    classes: PropTypes.object.isRequired,
+    id: PropTypes.number
+};
+
+export default withStyles(styles)(connect(mapStateToProps, {fetchAnswerRequest})(Candidature))

nextjs/pages/Candidatures.js

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useState } from 'react'
 import { connect } from "react-redux";
 import PropTypes from 'prop-types';
 import _ from "lodash"
@@ -12,8 +12,34 @@ import { fetchJobsAnsweredRequest } from '../actions/answer'
 import { AnswersSelector } from '../reducers/answers'
 import Head from 'next/head'
 import Link from 'next/link';
+import AppBar from '@material-ui/core/AppBar';
+import Paper from '@material-ui/core/Paper';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Box from '@material-ui/core/Box';
+import GridBouton from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import AccountIcon from '@material-ui/icons/AccountCircle';
+import MovieIcon from '@material-ui/icons/Movie';
+import DescriptionIcon from '@material-ui/icons/Description';
 
 const styles = theme => ({
+    menu: {
+        flexGrow: 1,
+    },
+    menu2: {
+        flexGrow: 1,
+        textAlign: 'center',
+        justifyContent: 'center',
+        padding: theme.spacing(2),
+        
+    },
+    indicatorColor:{
+        backgroundColor: theme.palette.primary.main,
+    },
+    textColor:{
+        color: theme.palette.primary.dark,
+    },
     root: {
         position: 'relative',
         textAlign: 'center',
@@ -33,7 +59,7 @@ const styles = theme => ({
         backgroundColor: theme.palette.primary.main,
     },
     title: {
-      fontFamily: 'Dosis',
+      fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
       fontSize: '1.5em',
       fontWeight: '600',
       textAlign: 'center',
@@ -41,13 +67,83 @@ const styles = theme => ({
       marginBottom: theme.spacing(3),
       padding: theme.spacing(0, 8),
     },
+    boutonAction:{
+        border: "none",
+        height: "6em",
+        padding: "1em",
+        backgroundColor: theme.palette.primary.main,
+        textAlign: "left",
+        borderRadius: "20px",
+        cursor: "pointer",
+        boxShadow: "0px 2px 5px rgb(30 35 39 / 5%)",
+        transition: "background-color 0.3s",
+        transition: "box-shadow 0.5s",
+        color: "#fff !important"
+    },
+    conteneurbouton:{
+        width:"100%",
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "space-around"
+    },
+    conteneurbouton1:{
+        width:"30%",
+        display:"inline-block",
+        paddingRight:"2em",
+    },
+    conteneurbouton2:{
+        width:"30%",
+        display:"inline-block",
+        paddingRight:"2em",
+    },
+    conteneurbouton3:{
+        width:"30%",
+        display:"inline-block",
+        paddingRight:"2em",
+    },
+    paper: {
+        width: "100%",
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        
+      },
 
 });
-
 class Candidatures extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+    }
+
+    state = {
+        value: "",
+        setValue:"",
+    }
+
+    componentDidMount() {
+        this.setState({
+            value: 0,
+        })
+        
+    }
 
     render() {
         const { classes } = this.props;
+        const tabData = 0;
+        const handleChange = (event, newValue) => {
+            this.setState({
+                    value: newValue,
+            })
+            if(newValue==0){
+                document.location.href="/Candidatures";
+            }else if(newValue==1){
+                document.location.href="/profil2";
+            }else if(newValue==2){
+                document.location.href="/Parametres";
+            }
+            
+            //
+            console.log(newValue);
+        };
 
         return (
             <LayoutGrid backLink="/">
@@ -55,14 +151,158 @@ class Candidatures extends React.Component {
                 <title key="title">Candidatures</title>
                 <meta name="robots" content="noindex, nofollow"></meta>
             </Head>
+            {/* <div className={classes.root}>
+                <AppBar position="static" color="default">
+                    <Tabs
+                    value={this.state.value}
+                    onChange={handleChange}
+                    indicatorColor="primary"
+                    textColor="primary"
+                    variant="scrollable"
+                    scrollButtons="auto"
+                    aria-label="scrollable auto tabs example"
+                    >
+                    <Tab label="Item One" {...a11yProps(0)} />
+                    <Tab label="Item Two" {...a11yProps(1)} />
+                    <Tab label="Item Three" {...a11yProps(2)} />
+                    <Tab label="Item Four" {...a11yProps(3)} />
+                    <Tab label="Item Five" {...a11yProps(4)} />
+                    <Tab label="Item Six" {...a11yProps(5)} />
+                    <Tab label="Item Seven" {...a11yProps(6)} />
+                    </Tabs>
+                </AppBar>
+                <TabPanel value={this.state.value} index={0}>
+                    Item One
+                </TabPanel>
+                <TabPanel value={this.state.value} index={1}>
+                    Item Two
+                </TabPanel>
+                <TabPanel value={this.state.value} index={2}>
+                    Item Three
+                </TabPanel>
+                <TabPanel value={this.state.value} index={3}>
+                    Item Four
+                </TabPanel>
+                <TabPanel value={this.state.value} index={4}>
+                    Item Five
+                </TabPanel>
+                <TabPanel value={this.state.value} index={5}>
+                    Item Six
+                </TabPanel>
+                <TabPanel value={this.state.value} index={6}>
+                    Item Seven
+                </TabPanel>
+                </div> */}
+                <div>
+                    <Paper className={classes.menu}>
 
-                {/* TODO */}
+                            <Tabs
+                            value={this.state.value}
+                            onChange={handleChange}
+                            indicatorColor="primary"
+                            textColor="primary"
+                            centered
+                            >
+                                <Tab label="Mes candidatures" />
+                                <Tab label="Mon profil" />
+                                
+                            </Tabs>
+                    </Paper>
+                   
+                </div>
+                
+                {/* Boutons d'actions */}
+
+                {/* <div className={classes.conteneurbouton}>
+                    <div className={classes.conteneurbouton1}>
+                        <div className={classes.boutonAction}>test</div>
+                    </div>
+                    <div className={classes.conteneurbouton2}>
+                        <div className={classes.boutonAction}>test2</div>
+                    </div>
+                    <div className={classes.conteneurbouton3}>
+                        <div className={classes.boutonAction}>test3</div>
+                    </div>
+                </div> */}
+                <GridBouton container className={classes.menu2} spacing={4}>
+                    <GridBouton item xs={12} sm={1} lg={1} >
+                    </GridBouton >
+                    <GridBouton item xs={12} sm={10} lg={10} >
+                        <GridBouton container justify="center" spacing={4}>
+                            <GridBouton key={0} item  xs={12} sm={4} >
+                                <Link href={"/profil2#information"} >
+                                    <Paper className={classes.paper}  elevation={0}>
+                                        <div className={classes.boutonAction}>
+                                            <div>
+                                                <IconButton
+                                                    key="info"
+                                                    color="inherit"
+                                                    className={classes.close}
+                                                    
+                                                >
+                                                <AccountIcon />
+                                            </IconButton>
+                                            </div>
+                                            Compléter mes informations
+                                        </div>
+                                    </Paper>
+                                </Link>
+                            </GridBouton>
+                            <GridBouton key={1} item  xs={12} sm={4}>
+                                <Link href={"/profil2#video"} >
+                                    <Paper className={classes.paper}  elevation={0}>
+                                        <div className={classes.boutonAction}>
+                                            <div>
+                                                <IconButton
+                                                    key="video"
+                                                    color="inherit"
+                                                    className={classes.close}
+                                                >
+                                                    <MovieIcon />
+                                                </IconButton>
+                                            </div>
+                                            Ajouter ma vidéo de présentation
+                                        </div>
+                                    </Paper>
+                                </Link>
+                            </GridBouton>
+                            <GridBouton key={2} item  xs={12} sm={4}>
+                                    <Link href={"/profil2#cv"} >
+                                    <Paper className={classes.paper}  elevation={0}>
+                                        
+                                        <div className={classes.boutonAction}>
+                                            <div>
+                                                <IconButton
+                                                    key="cv"
+                                                    color="inherit"
+                                                    className={classes.close}
+                                                >
+                                                    <DescriptionIcon />
+                                                </IconButton>
+                                            </div>
+                                            Ajouter mon CV
+                                        </div>
+                                    </Paper>
+                                </Link>
+                            </GridBouton>
+                        </GridBouton>
+                    </GridBouton>
+                    <GridBouton item xs={12} sm={1} lg={1} >
+                    </GridBouton >
+                </GridBouton>
+                
+                
                 <Typography component="h1" align="center" className={classes.title} gutterBottom>
                     Mes candidatures
                 </Typography>
 
                 <div className={classes.container}>
+                
 
+
+
+
+                    
                     <Grid CustomRowComponent={AnswerRow}
                         dataFetcher={this.props.fetchJobsAnsweredRequest}
                         data={this.props.answers}

nextjs/pages/Cgu.js

@@ -22,7 +22,7 @@ const styles = theme => ({
         bottom: 0,
     },
     title: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),

nextjs/pages/Confidentialite.js

@@ -22,7 +22,7 @@ const styles = theme => ({
         bottom: 0,
     },
     title: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),

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>
@@ -128,6 +165,7 @@ function mapStateToProps(state, ownProps) {
 
 ConfirmAccount.getInitialProps = function (context) {
     const { token, email } = context.query
+    //localStorage.setItem('loginRedirect', url)
     context.store.dispatch(requestConfirmationAccountRequest({ 'confirmationToken': token, 'email': email }))
     return email;
 }

nextjs/pages/Entreprises.js

@@ -11,9 +11,8 @@ import CompanyRow from "../components/organisms/CompanyRow"
 import { fetchCompaniesRequest } from '../actions/companies'
 import { CompaniesSelector } from '../reducers/companies'
 import { connect } from "react-redux";
-import Head from 'next/head'
 import OgHead from '../components/atoms/OgHead';
-
+import { SocialProfileJsonLd } from 'next-seo';
 const styles = theme => ({
   root: {
     position: 'relative',
@@ -45,7 +44,7 @@ const styles = theme => ({
     },
   },
   title: {
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontSize: '1.5em',
     fontWeight: '600',
     textAlign: 'center',
@@ -63,13 +62,16 @@ const styles = theme => ({
 });
 
 class Entreprises extends React.Component {
-
+  componentDidMount() {    
+    localStorage.setItem('loginRedirect', window.location.pathname)
+    console.log("Redirect"+window.location.pathname)
+  }
   render() {
     const { classes } = this.props;
     const { publicRuntimeConfig } = getConfig();
     const socialShareUrl = typeof window !== 'undefined' ? window.location
             : publicRuntimeConfig.frontServerUrl + `/Entreprises`;
-    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
+    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "img/default_picture_svg"
     const imgUrl = DefaultUrl ;
     return (
       <LayoutGrid backLink="/">
@@ -100,7 +102,18 @@ class Entreprises extends React.Component {
                     image={imgUrl}
                     seo_key="Recrutement, video"
                     
-                ></OgHead>
+          ></OgHead>
+          <SocialProfileJsonLd
+          type="Talents Tube"
+          name="Talents Tube"
+          url="https://www.talentstube.com"
+          sameAs={[
+              'https://www.facebook.com/TalentsTuber',
+              'https://www.instagram.com/talents.tube/',
+              'https://www.linkedin.com/company/talentstube/',
+              'https://twitter.com/TalentsTuber',
+          ]}
+          />
         <Typography gutterBottom component="h1"
           className={classes.title}>
           Les entreprises en <span className={classes.primary}>vidéo</span>

nextjs/pages/Help.js

@@ -25,7 +25,7 @@ const styles = theme => ({
     },
   },
   title: {
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontSize: '1.5em',
     fontWeight: '600',
     padding: theme.spacing(3, 0),

nextjs/pages/Inscription.js

@@ -0,0 +1,259 @@
+import React, { Fragment } from 'react';
+import PropTypes from "prop-types";
+import Layout from '../components/templates/Layout';
+import { TextField, Button, Typography } from '@material-ui/core';
+import SwipeableViews from 'react-swipeable-views';
+import AppBar from '@material-ui/core/AppBar';
+import Link from '@material-ui/core/Link';
+import { withStyles } from '@material-ui/core/styles';
+import Loader from '../components/templates/loader'
+import { connect } from "react-redux";
+import Validator from "validator";
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Router from 'next/router'
+import Register from '../components/organisms/Register';
+// import { requestLogin, requestOauthLogin, requestLoginFailure } from "../actions/auth";
+import { makeStyles } from '@material-ui/core/styles';
+import { amber, green } from '@material-ui/core/colors';
+import _ from "lodash"
+import Snack from '../components/atoms/snack'
+import SocialButtonsAuth from '../components/atoms/SocialButtonsAuth';
+import jssPluginPropsSort from 'jss-plugin-props-sort';
+import Head from 'next/head'
+import ReCAPTCHA from "react-google-recaptcha";
+import getConfig from 'next/config'
+const {publicRuntimeConfig} = getConfig()
+
+function TabContainer({ children, dir }) {
+    return (
+        <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
+            {children}
+        </Typography>
+    );
+}
+
+TabContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+    dir: PropTypes.string.isRequired,
+};
+
+const styles = theme => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    AppBar: {
+        position: 'fixed',
+        top: theme.spacing(8),
+    },
+    tab: {
+        '& span.MuiTab-wrapper': {
+            fontSize: '1.1em',
+            fontWeight: '600',
+            textTransform: 'none',
+        }
+    },
+    tabContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        paddingTop: theme.spacing(4),
+        [theme.breakpoints.up('sm')]: {
+            padding: '5vw 10vw',
+        },
+        [theme.breakpoints.up('md')]: {
+            padding: '5vw 25vw',
+        },
+    },
+    textField: {
+        width: '100%'
+    },
+    form: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    formText: {
+        padding: theme.spacing(0, 2),
+        paddingTop: theme.spacing(3),
+        fontSize: '0.9em',
+        fontWeight: '300',
+    },
+    formLink: {
+        paddingLeft: theme.spacing(1),
+        fontWeight: '500',
+        cursor: 'pointer',
+    },
+    forgetPasswordText: {
+        marginTop: theme.spacing(2),
+    },
+    conditionalText: {
+        display: 'flex',
+        flexDirection: 'row',
+        color: theme.palette.primary.conditional,
+        textTransform: 'uppercase',
+
+        '&:before': {
+            content: '""',
+            flex: '1 1',
+            borderBottom: '1px solid',
+            borderColor: theme.palette.primary.conditional,
+            marginRight: '10px',
+            marginTop: 'auto',
+            marginBottom: 'auto',
+        },
+        '&:after': {
+            content: '""',
+            flex: '1 1',
+            borderBottom: '1px solid',
+            borderColor: theme.palette.primary.conditional,
+            marginLeft: '10px',
+            marginTop: 'auto',
+            marginBottom: 'auto',
+        },
+    },
+    link: {
+        color: theme.palette.primary.dark,
+        fontWeight: 400,
+        fontSize: '0.9em',
+    },
+    input50: {
+        width: '50%',
+    },
+    button: {
+        textTransform: 'inherit',
+        marginLeft: theme.spacing(8),
+        marginRight: theme.spacing(8),
+        marginTop: theme.spacing(4),
+        marginBottom: theme.spacing(2),
+        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),
+    }
+});
+
+const recaptchaRef = React.createRef();
+class LoginPage extends React.Component {
+    state = {
+        data: {
+            email: "",
+            password: ""
+        },
+        errors: { message: "" },
+        loading: false,
+        tabIndex: 0,
+        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;
+        if (!!error)
+            err = { message: error };
+        return { errors: err, openSnack: !!error, inscription };
+    }
+
+    handleClose = e =>
+        this.setState({
+            openSnack: false
+        });
+
+    componentDidMount() {
+        
+    }
+
+    onChange = e =>
+        this.setState({
+            data: { ...this.state.data, [e.target.name]: e.target.value }
+        });
+
+    // onSubmit = e => {
+    //     e.preventDefault();
+    //     const errors = this.validate(this.state.data);
+    //     recaptchaRef.current.execute();
+    //     this.setState({ errors });
+    //     if (Object.keys(errors).length === 0) {
+    //         this.setState({ loading: true });
+    //         this.props.requestLogin(this.state.data)
+    //     }
+    // };
+
+    submit = data => { this.props.login(data) }
+
+    validate = data => {
+        const errors = {};
+        if (!Validator.isEmail(data.email)) errors.email = "Invalid email";
+        if (!data.password) errors.password = "Can't be blank";
+        return errors;
+    };
+
+    // linkedInAuth = () => {
+    //     this.props.requestOauthLogin();
+    //     Router.push('/auth/linkedin')
+    // }
+
+    // facebookAuth = () => {
+    //     this.props.requestOauthLogin();
+    //     Router.push('/auth/facebook')
+    // }
+
+
+    render() {
+        const { classes } = this.props;
+        const { data,success, errors, loading, openSnack } = this.state;
+
+        return (
+            <Layout>
+                <Head>
+                    <title key="title">Inscription</title>
+                    <meta key="robots" name="robots" content="noindex, follow"></meta>
+                </Head>
+                <div className={classes.container}>
+                    {/* {!!errors && (
+                        <div className="alert alert-danger">{errors && errors.message}</div>
+                    )} */}
+                    {loading && (
+                        <Loader />
+                    )}
+                    {!loading && (
+                        <Fragment> 
+                             <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} erreurs={errors.message} />
+                        </Fragment> 
+                    )}
+                </div>
+                {/* <Snack name={success ? 'snackSuccess' : 'snackWarning'}
+                    variant={success ? 'success' : 'warning'}
+                    message={success ? 'Inscription validée.' : errors.message}
+                    openSnack={openSnack}
+                    onClose={this.handleClose} /> */}
+            </Layout>
+        );
+    }
+}
+
+function mapStateToProps(state, ownProps) {
+    return {
+        loading: !!state.user.loading,
+        errors: state.user.errors || ownProps.errors
+    };
+}
+
+
+
+export default withStyles(styles)(connect(mapStateToProps, {   })(LoginPage));

nextjs/pages/Login.js

@@ -12,7 +12,7 @@ import Validator from "validator";
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Router from 'next/router'
-import Register from '../components/organisms/Register';
+// import Register from '../components/organisms/Register';
 import { requestLogin, requestOauthLogin, requestLoginFailure } from "../actions/auth";
 import { makeStyles } from '@material-ui/core/styles';
 import { amber, green } from '@material-ui/core/colors';
@@ -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 }) {
@@ -82,7 +83,7 @@ const styles = theme => ({
     formLink: {
         paddingLeft: theme.spacing(1),
         fontWeight: '500',
-        cursor: 'pointer',
+        color: theme.palette.primary.dark,
     },
     forgetPasswordText: {
         marginTop: theme.spacing(2),
@@ -137,6 +138,32 @@ const styles = theme => ({
     buttonImportant: {
         marginTop: theme.spacing(6),
     },
+    titre: {
+        fontWeight: 600,
+        fontSize: "1.875em",
+        marginBottom:"20px",
+        fontFamily: "Roboto",
+    },
+    connexionRecruteur:{
+        textAlign : "center",
+        marginTop:"40px",
+        backgroundColor:"#1E2327",
+        padding:"30px 0",
+        width:"100%",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '300',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+
+    },
+    enSavoirPlus:{
+        textAlign : "center",
+        textDecoration :"none",
+        color:"#fff",
+        fontSize: '1em',
+        fontWeight: '600',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    },
 });
 
 const recaptchaRef = React.createRef();
@@ -149,7 +176,8 @@ class LoginPage extends React.Component {
         errors: {},
         loading: false,
         tabIndex: 0,
-        openSnack: false
+        openSnack: false,
+        redirection:""
     };
 
     static getInitialProps({ query }) {
@@ -175,8 +203,11 @@ class LoginPage extends React.Component {
     }
 
     componentDidMount() {
+        console.log("redirect login");
+        console.log(localStorage.getItem('loginRedirect'));
         this.setState({
             tabIndex: (this.props.inscription) ? 1 : 0,
+            redirection : localStorage.getItem('loginRedirect')
         })
     }
 
@@ -226,11 +257,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>
@@ -246,7 +280,7 @@ class LoginPage extends React.Component {
                     )}
                     {!loading && (
                         <Fragment>
-                            <AppBar className={classes.AppBar} color="default">
+                            {/* <AppBar className={classes.AppBar} color="default">
                                 <Tabs
                                     value={this.state.tabIndex}
                                     onChange={this.handleChange}
@@ -256,7 +290,7 @@ class LoginPage extends React.Component {
                                     <Tab label="Connexion" className={classes.tab} />
                                     <Tab label="Inscription" className={classes.tab} />
                                 </Tabs>
-                            </AppBar>
+                            </AppBar> */}
                             <SwipeableViews
                                 axis={'x'}
                                 index={this.state.tabIndex}
@@ -265,6 +299,12 @@ class LoginPage extends React.Component {
                                 <TabContainer dir={'x'}>
                                     <div className={classes.tabContainer}>
                                         <form className={classes.form} onSubmit={this.onSubmit}>
+                                            <Typography
+                                                className={classes.titre}    
+                                                align="left"
+                                            >
+                                                   Connexion   
+                                            </Typography>
                                             <TextField
                                                 value={data.email}
                                                 id="email"
@@ -276,7 +316,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
 
@@ -294,11 +334,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}
@@ -312,7 +360,9 @@ class LoginPage extends React.Component {
                                             >
                                                 <Link href={"/ResetPassword"} className={classes.link}>
                                                     Mot de passe oublié ?
-                                        </Link>
+                                                    
+                                                </Link>
+                                                
                                             </Typography>
 
 
@@ -327,16 +377,22 @@ class LoginPage extends React.Component {
                                         {/* <SocialButtonsAuth linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} /> */}
 
                                         <div className={classes.form}>
-                                            <Typography
-                                                paragraph={true}
-                                                align="center"
-                                                className={classes.formText}
-                                            >Je ne possède pas de compte Talents Tube ?
-                                        <span onClick={() => this.handleChangeIndex(1)} className={classes.formLink}>
+                                        <Typography
+                                            paragraph={true}
+                                            align="center"
+                                            className={classes.formText}
+                                        >Je ne possède pas de compte Talents Tube ? 
+                                            <Link href={"/Inscription"} >
+                                                <span className={classes.formLink}>
                                                     S'inscrire
-                                        </span>
-                                            </Typography>
+                                                </span>
+                                            </Link>
+                                        </Typography>
+                    
 
+                                        </div>
+                                        <div className={classes.connexionRecruteur}>
+                                            Vous êtes recruteur ? <a className={classes.enSavoirPlus} href='https://recruteur.talentstube.com'><span >Connexion</span></a>
                                         </div>
                                         <div className={classes.form}>
                                             <Typography
@@ -348,21 +404,22 @@ class LoginPage extends React.Component {
                                     </div>
 
                                 </TabContainer>
-                                <TabContainer dir={'x'}>
+                                {/* <TabContainer dir={'x'}>
                                     <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} />
-                                </TabContainer>
+                                </TabContainer> */}
                             </SwipeableViews>
                         </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>
         );
     }
 }
 
 function mapStateToProps(state, ownProps) {
+    
     return {
         loading: !!state.user.loading,
         errors: state.user.errors || ownProps.errors

nextjs/pages/MentionsLegales.js

@@ -22,7 +22,7 @@ const styles = theme => ({
         bottom: 0,
     },
     title: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),
@@ -76,7 +76,7 @@ class MentionsLegales extends Component {
                             `
                             TALENTS TUBE est joignable :
                             - Par internet : via le formulaire de contact sur le site ` }<a href="http://blog.talentstube.com" className={classes.link} target="_blank">blog.talentstube.com</a>{`;
-                            - Par téléphone au 02 30 05 06 31, du lundi au vendredi de 9 h à 18 h;
+                            - Par téléphone au 07 56 85 27 36, du lundi au vendredi de 9 h à 18 h;
                             - Par voie postale :
                             TALENTS TUBE
                             3 Rue Louis de Broglie

nextjs/pages/Offre.js

@@ -4,9 +4,11 @@ import { connect } from "react-redux";
 import PropTypes from 'prop-types';
 import getConfig from 'next/config'
 import { withStyles } from '@material-ui/core/styles';
+import OgHead from '../components/atoms/OgHead'
+import RootContainer from '../components/atoms/RootContainer'
 import LayoutOffre from "../components/templates/LayoutOffre";
-const OffreDetail = lazy(() => import('../components/organisms/OffreDetail'));
-//import OffreDetail   from "../components/organisms/OffreDetail";
+// const OffreDetail = lazy(() => import('../components/organisms/OffreDetail'));
+import OffreDetail   from "../components/organisms/OffreDetail";
 import { fetchJobRequest, clearAd, countAdViewRequest } from '../actions/ads'
 import _ from "lodash/string";
 const renderLoader = () => <p>Chargement</p>;
@@ -15,9 +17,15 @@ const styles = theme => ({
 });
 
 const { publicRuntimeConfig } = getConfig()
-class Offre extends React.Component {
+let descriptionSEO = ""
+let titleSEO = ""
 
+
+class Offre extends React.Component {
+    
     componentDidMount() {
+        localStorage.setItem('loginRedirect', window.location.pathname)
+        localStorage.setItem('adId', this.props.offre.id)
         this.props.countAdViewRequest(this.props.offre.id);
     }
 
@@ -30,11 +38,30 @@ class Offre extends React.Component {
     }
     render() {
         const { classes, offre } = this.props;
-
+        descriptionSEO=""
+        offre.company && offre.company.brand_name ? descriptionSEO += offre.company.brand_name : ""
+        descriptionSEO +=  " recrute un(e) "+offre.title+", "+(offre.location && offre.location.gmap_address.formatted_address)+". Envoyez votre candidature vidéo"
+        titleSEO =  "Offre d'emploi "+offre && offre.title && offre.title.replace(' (F/H)', '')+", "+(offre.location && offre.location.gmap_address.formatted_address)+". Envoyez votre candidature vidéo"
+        const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `Offre/${offre.id}-${_.kebabCase(offre.title)}`;
+        const DefaultUrl = "https://blog.talentstube.com/wp-content/uploads/2021/01/default_picture_company.jpg"
+        const imgUrl = (offre.company && offre.company.presentation_video && offre.company.presentation_video.thumbnails && offre.company.presentation_video.thumbnails[0] && offre.company.presentation_video.thumbnails[0].sizes[3]) ? offre.company.presentation_video.thumbnails[0].sizes[3].link : DefaultUrl
+        const imgUrlDesktop = (offre.company && offre.company.presentation_video && offre.company.presentation_video.thumbnails && offre.company.presentation_video.thumbnails[0] && offre.company.presentation_video.thumbnails[0].sizes[4]) ? offre.company.presentation_video.thumbnails[0].sizes[4].link : DefaultUrl
+        const imgUrlOffre = (offre && offre.video && offre.video.thumbnails && offre.video.thumbnails[0] && offre.video.thumbnails[0].sizes[3]) ? offre.video.thumbnails[0].sizes[3].link : DefaultUrl
+        const imgUrlDesktopOffre = (offre && offre.video && offre.video.thumbnails && offre.video.thumbnails[0] && offre.video.thumbnails[0].sizes[4]) ? offre.video.thumbnails[0].sizes[4].link : DefaultUrl
         return (
-            <LayoutOffre backLink="/Offres" offreId={offre.id} offre={offre} isProvided={offre.is_promoted}>
-                <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense>
-            </LayoutOffre>
+            <RootContainer>
+                <OgHead seo_title={titleSEO}
+                seo_description={descriptionSEO}
+                seo_url={socialShareUrl}
+                image={imgUrlOffre}
+            ></OgHead>
+           
+                <LayoutOffre backLink="/Offres" offreId={offre.id} offre={offre} isProvided={offre.is_promoted}>
+                
+                {/* <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense> */}
+                    <OffreDetail offre={offre}/>
+                </LayoutOffre>
+            </RootContainer>
         );
     }
 

nextjs/pages/Offres.js

@@ -11,11 +11,9 @@ import OffreRow from "../components/organisms/OffreRow"
 import Typography from '@material-ui/core/Typography';
 import { fetchJobsRequest, togglePromotedFilterRequest} from '../actions/ads'
 import { AdsSelector } from '../reducers/ads'
-import { TextField } from '@material-ui/core';
-import Head from 'next/head'
 import OgHead from '../components/atoms/OgHead';
 import getConfig from 'next/config'
-
+import { SocialProfileJsonLd } from 'next-seo';
 
 const styles = theme => ({
   root: {
@@ -40,7 +38,7 @@ const styles = theme => ({
 
   },
   title: {
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontSize: '1.5em',
     fontWeight: '600',
     textAlign: 'center',
@@ -92,7 +90,10 @@ class Offres extends React.Component {
     //this.props.promotedFilter =init
     return { init };
   }
-
+  componentDidMount() {    
+    localStorage.setItem('loginRedirect', window.location.pathname)
+    console.log("Redirect"+window.location.pathname)
+  }
   render() {
     
     const { classes } = this.props;
@@ -101,7 +102,7 @@ class Offres extends React.Component {
     const { publicRuntimeConfig } = getConfig();
     const socialShareUrl = typeof window !== 'undefined' ? window.location
             : publicRuntimeConfig.frontServerUrl + `/Offres`;
-    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
+    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "img/default_picture_svg"
     const imgUrl = DefaultUrl ;
     return (
       <LayoutGrid backLink="/">
@@ -111,7 +112,18 @@ class Offres extends React.Component {
                     image={imgUrl}
                     seo_key="Recrutement, video"
                     
-                ></OgHead>
+        ></OgHead>
+        <SocialProfileJsonLd
+          type="Talents Tube"
+          name="Talents Tube"
+          url="https://www.talentstube.com"
+          sameAs={[
+              'https://www.facebook.com/TalentsTuber',
+              'https://www.instagram.com/talents.tube/',
+              'https://www.linkedin.com/company/talentstube/',
+              'https://twitter.com/TalentsTuber',
+          ]}
+          />
 
         <Typography gutterBottom component="h1"
           className={classes.title}>

nextjs/pages/Parametres.js

@@ -39,7 +39,7 @@ const styles = theme => ({
         }
     },
     title: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),

nextjs/pages/Player.js

@@ -0,0 +1,134 @@
+import React, { Component, Fragment,lazy, Suspense,  useEffect  } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography'
+import LayoutBackUrl from '../components/templates/LayoutBackUrl';
+import RootContainer from '../components/atoms/RootContainer'
+import Router from 'next/router';
+import Head from 'next/head'
+// const VideoVimeo = lazy(() => import('../components/atoms/VideoVimeo'));
+import VideoVimeo from '../components/atoms/VideoVimeo';
+import queryString from 'query-string';
+import { fetchJobRequest, clearAd, countAdViewRequest } from '../actions/ads'
+const renderLoader = () => <p>Chargement</p>;
+import { NextSeo } from 'next-seo';
+import dynamic from 'next/dynamic'
+const styles = theme => ({
+    player: {
+        background:'#1E2327',
+        height: '100%'
+    },
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        height: '100%',
+        padding: '0 10px',
+    },
+    bottomContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignSelf: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+        bottom: 0,
+    },
+    title: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+        fontSize: '1.5em',
+        fontWeight: '600',
+        padding: theme.spacing(3, 0),
+    },
+    text: {
+        fontSize: '1em',
+        fontWeight: '300',
+        padding: theme.spacing(1, 0),
+        whiteSpace: 'pre-line',
+    },
+    video: {
+        width:"100%",
+        height:"100%",
+        [theme.breakpoints.up('md')]: {
+            paddingBottom: '35%', /* 16:9 */
+        },
+    }
+})
+
+let params = dynamic( () => window.location.search, {ssr: false} )
+class Player extends Component {
+    constructor(props)
+    {
+        super(props);
+        var today = new Date(),
+            date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
+
+        this.state = {
+            date: date
+        };
+        
+        console.log("LOCATION SEARCH");
+        console.log(params);
+    }
+    render() {
+        const { classes, id, url, typeEntite, videoId, nameCompany, nameOffre } = this.props
+        const urlEnv = process.env.NODE_ENV;
+        //pour la MEP
+        {/* A ENLEVER EN PROD */}
+        let nofollow = false;
+        // urlEnv == "development" ? nofollow = true : nofollow = true;
+        
+        console.log(id);
+        console.log(typeEntite);
+        let typeVideo= null;
+        let titleVideo= null;
+        let descriptionVideo= null;
+        if(typeEntite=="Offre"){
+            titleVideo=nameCompany+" recrute un(e)"+nameOffre
+            descriptionVideo=nameCompany+" recrute en vidéo un(e)"+nameOffre
+        }else if(typeEntite=="Entreprise"){
+            titleVideo="Découvrez l'entreprise "+nameCompany+" et ses offres d'emploi vidéo"
+            descriptionVideo="Découvrez l'entreprise "+nameCompany+" et ses offres d'emploi vidéo. Envoyez votre candidature spontanée en vidéo"
+        }else if(typeEntite=="Territoire"){
+            titleVideo="Découvrez le territoire "+nameCompany
+            descriptionVideo="Découvrez le territoire "+nameCompany
+        }
+        console.log(videoId);
+        
+        return (
+            <RootContainer>
+                <NextSeo
+                title={titleVideo}
+                description={descriptionVideo}
+                noindex={nofollow}
+                nofollow={nofollow}
+                openGraph={{
+                    title: titleVideo,
+                    description: descriptionVideo,
+                    url: "https://www.talentstube.com/Player?id="+id+"&url="+url+"&videoId="+videoId+"&typeEntite="+typeEntite+"&nameCompany="+nameCompany+"&nameOffre="+nameOffre,
+                    type: 'video.movie',
+                    video: {
+                        // Multiple Open Graph actors is only available in version `7.0.2-canary.35`+ of next
+                        releaseDate: this.state.date,
+                        // Multiple Open Graph tags is only available in version `7.0.2-canary.35`+ of next 
+                    },
+                    site_name: 'Talents Tube',
+                }}
+                />
+                <LayoutBackUrl text="Player" url={url} >   
+                    <VideoVimeo classes={{ video: classes.video }} videoId={videoId} options="" autoplay='1' /> 
+                </LayoutBackUrl>
+            </RootContainer>
+        )
+    }
+}
+
+Player.getInitialProps = function (context) {
+
+    let { id, url,videoId,typeEntite, nameCompany, nameOffre } = context.query;
+    let {res} = context;
+    return {id:id, url:url, videoId:videoId, typeEntite:typeEntite, nameCompany:nameCompany, nameOffre:nameOffre};
+  }
+
+
+
+
+export default withStyles(styles)(Player);

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,14 +259,19 @@ class Reponse extends React.Component {
     data:{},
     openSnack: false,
     errors: {},
+    openStudio : false
   };
 
   componentDidMount() {
-    localStorage.setItem('loginRedirect', window.location)
+    console.log('loginRedirect reponse');
+    console.log(window.location.pathname+ window.location.search);
+    
+    //localStorage.setItem('loginRedirect', window.location.pathname+ window.location.search)
 
     if(!!!localStorage.getItem('ttJWT'))
     {
-      Router.push("/Login")
+      console.log("REPONSE REDIRECT LOGIN")
+      Router.push("/Inscription")
     }
     else
       this.setState({loading: false})
@@ -265,11 +315,22 @@ 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;
-    const logoUrl = (offre.company ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + offre.company.logo : '');
     const logoCompanyUrl = ((company && company.logo) ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + company.logo : '');
+    const logoUrl = (offre.company ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + offre.company.logo : logoCompanyUrl);
+    
 
     let rootStepper = activeStep === 0 ? (
       classes.rootStepperDefault
@@ -277,35 +338,34 @@ class Reponse extends React.Component {
         classes.rootStepperActive
       )
     return (
-      <LayoutBack text="Candidature">
+      <LayoutBack text="Candidature" step={this.state.activeStep} openStudio={this.state.openStudio}>
         <Head>
-          <title>Candidature vidéo</title>
-          <meta name="description" content="Talent's tube, postulez en video." />
+
+          <title key="title">Candidature vidéo</title>
           <meta key="robots" name="robots" content="noindex, nofollow"></meta>
-          
         </Head>
         {/* https://codesandbox.io/s/ii0us */}
-       { loading ? 
-        <LoaderVideo /> :
-       <Fragment>
-        
         <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"/>
@@ -322,86 +382,132 @@ class Reponse extends React.Component {
           }
 
         </section>
-
-        <Stepper activeStep={activeStep} classes={{ root: rootStepper }} className={classes.rootStepperContainer}>
+       { loading ? 
+        <LoaderVideo textePrincipal="Votre candidature vidéo est en cours d’envoi..." texteSecondaire="Veuillez rester sur la page pendant le chargement qui peut durer plusieurs minutes."/> 
+      :
+       <Fragment>
+        
+        
+        <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>
         ) :
           (
@@ -427,7 +533,7 @@ Reponse.getInitialProps = function (context) {
   const { adId, companyId } = context.query
   const {res} = context
     //TODO :really needed ?
-     context.store.dispatch(fetchCurrentUserRequest())
+      context.store.dispatch(fetchCurrentUserRequest())
 
   if(!!adId)
     context.store.dispatch(fetchJobRequest(adId))
@@ -438,7 +544,9 @@ Reponse.getInitialProps = function (context) {
 }
 
 function mapStateToProps(state) {
+  console.log("attente")
   
+  console.log(state.media)
   return {
     loading: !!state.answer.loading || !!state.media.loading,
     media: state.media,

nextjs/pages/ResetPassword.js

@@ -25,7 +25,7 @@ const styles = theme => ({
         },
     },
     title: {
-        fontFamily: 'Dosis',
+        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
         fontSize: '1.5em',
         fontWeight: '600',
         padding: theme.spacing(3, 0),
@@ -116,7 +116,7 @@ class ResetPassword extends Component {
                         align="center"
                         variant="h5"
                     >
-                        Réinitialisation du mot de passe
+                        Modifier mot de passe
                     </Typography>
 
                     {loading && (

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import Document, { Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@material-ui/styles';
 import flush from 'styled-jsx/server';
@@ -18,7 +18,7 @@ class MyDocument extends Document {
     const { pageContext } = this.props;
 
     return (
-      <html lang="en" dir="ltr">
+      <html lang="fr" dir="ltr">
         <Head>
           <meta name="google-site-verification" content="CQsVLRoDEzxN5TT4zoTIPy_v4JWGPQgg29OLNx8EkXw" />
           <meta charSet="utf-8" />
@@ -31,11 +31,14 @@ class MyDocument extends Document {
           />
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
+          <link rel="preload" href="/statique/css/fonts.css" rel="stylesheet">
 
-          <link href="https://fonts.googleapis.com/css?family=Dosis:600|Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">
           </link>
-
-          <script type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
+          <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
+          <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
+          <link rel="stylesheet" type="text/css" href="/statique/css/autocomplete.css" />
+          <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script>
+          <script async type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
           {/* Global Site Tag (gtag.js) - Google Analytics */}
           {/* <script
             async
@@ -52,7 +55,7 @@ class MyDocument extends Document {
             }}
           /> */}
 
-          <script
+          <script defer 
             dangerouslySetInnerHTML={{
               __html: `
 (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':

nextjs/pages/index.js

@@ -12,14 +12,16 @@ import { connect } from 'react-redux'
 import { fetchEmphasisJobsRequest } from "../actions/ads";
 //const fetchEmphasisCompaniesRequest = lazy(() => import('../actions/companies'));
 import { fetchEmphasisCompaniesRequest } from "../actions/companies";
-import Loader from './../components/templates/loader'
+import Loader from '../components/templates/loader'
 import { isEmpty } from "lodash"
-import NoResult from './../components/atoms/NoResult';
+import NoResult from '../components/atoms/NoResult';
 // import Head from 'next/head'
 import dynamic from 'next/dynamic'
 import OgHead from '../components/atoms/OgHead';
 import getConfig from 'next/config'
-
+import { BreadcrumbJsonLd } from 'next-seo';
+import Slider from "react-slick";
+import Hidden from '@material-ui/core/Hidden';
 // const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
 //   ssr: false
 // });
@@ -78,6 +80,9 @@ const styles = theme => ({
   scrollerSectionCompany: {
     backgroundColor: theme.palette.background.grey,
   },
+  scrollerSectionSlider:{
+    backgroundColor: theme.palette.secondary.main,
+  },
   card: {
     margin: theme.spacing(1),
     width: '96%',
@@ -122,7 +127,7 @@ const styles = theme => ({
     color: theme.palette.secondary.text,
   },
   title: {
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontSize: '1.5em',
     fontWeight: '600',
     textAlign: 'center',
@@ -138,7 +143,233 @@ const styles = theme => ({
       margin: 'auto',
     },
   },
+  choix: {
+    color:"#fff",
+    position: "absolute",
+    top: "0",
+    bottom: "0",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  choixMobile: {
+    color:"#fff",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+
+  },
+  containerVideoGauche :{
+    position: "relative",
+    height:"100%",
+    width:"50%",
+    backgroundImage: 'url("/statique/images/accueil/trouver-un-job.jpg")',
+   
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundBlendMode: 'darken',
+    backgroundColor: 'rgba(30,35,39,0.4)',
+  },
+  containerVideoDroite :{
+    position: "relative",
+    backgroundColor:"red",
+    height:"100%",
+    width:"50%",
+    backgroundImage: 'url("/statique/images/accueil/recruter-des-talents.jpg") ',
+    
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundBlendMode: 'darken',
+    backgroundColor: 'rgba(30,35,39,0.5)',
+  },
+  containerVideoMobile :{
+    height:"100%",
+    width:"100%",
+    backgroundImage: 'url("/statique/images/accueil/trouver-un-job.jpg")',
+    padding :"0 30px",
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundBlendMode: 'darken',
+    backgroundColor: 'rgba(30,35,39,0.5)',
+  },
+  containerTitre :{
+
+  },
+  wrap :{
+    [theme.breakpoints.up('md')]: {
+      height: "85%",
+      width: "100%",
+      position: "relative",
+    },
+    height: "100%",
+    width: "100%",
+    position: "relative",
+  },
+  headerTitre :{
+    backgroundColor:"transparent",
+    height: "100px",
+    width: "100%",
+    position: "absolute",
+    top: "30px",
+    textAlign:"center",
+    color:"#fff",
+    zIndex : "1000"
+  },
+  headerTitreMobile :{
+    width: "100%",
+    textAlign:"center",
+    color:"#fff",
+    marginBottom:"30px"
+  },
+  blocRecruteur:{
+    backgroundColor:"#fff",
+    bottom:"40px", 
+    left:"60px",
+    position: "absolute",
+    padding:"50px",
+    fontWeight: "600",
+    minWidth:"40%",
+    borderRadius:"5px",
+  },
+  blocCandidat:{
+    backgroundColor:"#fff",
+    bottom:"40px", 
+    right:"60px",
+    position: "absolute",
+    padding:"50px",
+    fontWeight: "600",
+    minWidth:"40%",
+    borderRadius:"5px",
+  },
+  blocRecruteurMobile:{
+    backgroundColor:"#fff",
+    padding:"20px",
+    fontWeight: "600",
+    minWidth:"90%",
+    borderRadius:"5px",
+    margin :"15px 0"
+  },
+  blocCandidatMobile:{
+    backgroundColor:"#fff",
+    padding:"20px",
+    fontWeight: "600",
+    minWidth:"90%",
+    borderRadius:"5px",
+    margin :"60px 0 15px 0"
+  },
+  titreAccueil:{
+    fontSize:"2.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"0px",
+    fontWeight: "600",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueil2:{
+    fontSize:"1.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"40px",
+    fontWeight: "400",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueilMobile:{
+    fontSize:"2.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"0px",
+    fontWeight: "600",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  titreAccueil2Mobile:{
+    fontSize:"1.5em",
+    textAlign:"center",
+    color:"#fff",
+    paddingTop:"40px",
+    fontWeight: "400",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+  },
+  jeSuis:{
+    fontSize:"1em",
+    textTransform: "uppercase",
+    color:"#1E2327",
+    textAlign: "left",
+    fontWeight: "300",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    marginBottom:"1em"
+  },
+  jeSuisMobile:{
+    fontSize:"1em",
+    textTransform: "uppercase",
+    color:"#1E2327",
+    textAlign: "center",
+    fontWeight: "300",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    marginBottom:"1em"
+  },
+  action:{
+    fontSize:"1.5em",
+    color:"#1E2327",
+    textAlign: "left",
+    fontWeight: "600",
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
+    marginBottom:"1.5em"
+  },
+  boutonCandidat:{
+    width:"100%",
+  },
+  boutonRecruteur:{
+    width:"100%",
+    color: theme.palette.secondary.main,
+    backgroundColor: theme.palette.primary.important,
+  },
+  boutonCandidatMobile:{
+    width:"100%",
+    margin : "0px !important"
+  },
+  boutonRecruteurMobile:{
+    width:"100%",
+    color: theme.palette.secondary.main,
+    backgroundColor: theme.palette.primary.important,
+    margin : "0px !important"
+  },
+  temoignage:{
+    textAlign:"center"
+  },
+  lien:{
+    textDecoration:'none',
+    color:'#fff'
+  },
+  alignVertical:{
+    verticalAlign:"middle !important",
+    maxHeight :"80px",
+    minHeight :"60px",
+    
+  },
+  alignVerticalMobile:{
+    verticalAlign:"middle !important",
+    maxHeight :"70px",
+    minHeight :"70px",
+    
+  },
+  sliderDiv:{
+    padding:"30px"
+  },
+  sliderDivMobile:{
+    display: "inline !important",
+    padding:"10px",
+    
+  },
+  sliderContainerMobile:{
+    textAlign:"center"
+  }
 });
+///
 
 class Index extends React.Component {
   state = {
@@ -158,7 +389,22 @@ class Index extends React.Component {
   }
   render() {
     const { classes } = this.props;
-    
+    const settings = {
+      dots: false,
+      infinite: true,
+      slidesToShow: 5,
+      slidesToScroll: 1,
+      autoplay: true,
+      autoplaySpeed: 2000
+    };
+    const settingsMobile = {
+      dots: false,
+      infinite: true,
+      slidesToShow: 2,
+      slidesToScroll: 2,
+      autoplay: true,
+      autoplaySpeed: 2000
+    };
     const socialShareUrl = typeof window !== 'undefined' ? window.location
             : publicRuntimeConfig.frontServerUrl ;
     const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
@@ -172,10 +418,111 @@ class Index extends React.Component {
                     seo_key="Recrutement, video"
 
         ></OgHead>
+        <BreadcrumbJsonLd
+      itemListElements={[
+        {
+          position: 1,
+          name: 'Offres',
+          item: 'https://www.talentstube.com/Offres',
+        },
+        {
+          position: 2,
+          name: 'Entreprises',
+          item: 'https://www.talentstube.com/Offres',
+        },
+        {
+          position: 3,
+          name: 'Espace recruteur',
+          item: 'https://recruteur.talentstube.com/',
+        },
+        {
+          position: 4,
+          name: "Blog sur l'emploi",
+          item: 'https://blog.talentstube.com/',
+        },
+      ]}
+    />
+        <div className={classes.wrap}>
+            {/* PARTIE DESKTOP */}
+            <Hidden smDown>
+              <header className={classes.headerTitre}>
+                  <h1 className={classes.titreAccueil}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
+                  <span className={classes.titreAccueil2}>
+                  Parce que vous méritez mieux que du texte !
+                  </span>
+              </header>
+              <section className={classes.choix}>
+              
+                <div className={classes.containerVideoGauche}>
+                    
+                    <div className={classes.blocCandidat}>
+                        <div className={classes.jeSuis}>JE SUIS CANDIDAT</div>
+                        <div className={classes.action}>Je trouve un job</div>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => Router.push('/Offres')}
+                          className={classes.button + ' ' + classes.boutonCandidat}
+                        >Découvrir les offres
+                        </Button>
+
+
+                    </div>
+                </div>
+                <div className={classes.containerVideoDroite}>
+                  
+                  <div className={classes.blocRecruteur}>
+                    <div className={classes.jeSuis}>JE SUIS recruteur</div>
+                    <div className={classes.action}>Je recrute des talents</div>
+                    <a href='https://recruteur.talentstube.com' className={classes.lien}>
+                      <Button
+                          variant="contained"
+                          className={classes.button + ' ' + classes.boutonRecruteur}
+                        >Déposer une offre
+                    </Button>
+                    </a>
+                  </div>
+                </div>
+              </section>
+            </Hidden>
+            {/* PARTIE MOBILE */}   
+            <Hidden mdUp>
+              
+              <section className={classes.choixMobile}>
+                  
+                  <div className={classes.containerVideoMobile}>
+                    <div className={classes.headerTitreMobile}>
+                      <h1 className={classes.titreAccueilMobile}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
+                        <span className={classes.titreAccueil2Mobile}>
+                        Parce que vous méritez mieux que du texte !
+                        </span>
+                    </div>
+                    <div className={classes.blocCandidatMobile}>
+                        <div className={classes.jeSuisMobile}>JE SUIS CANDIDAT</div>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => Router.push('/Offres')}
+                          className={classes.button + ' ' + classes.boutonCandidatMobile}
+                        >Je trouve un job
+                        </Button>
+                    </div>
+                    <div className={classes.blocRecruteurMobile}>
+                      <div className={classes.jeSuisMobile}>JE SUIS recruteur</div>
+                      
+                      <a href='https://recruteur.talentstube.com' className={classes.lien}>
+                        <Button
+                            variant="contained"
+                            className={classes.button + ' ' + classes.boutonRecruteurMobile}
+                          >Je recrute des talents
+                      </Button>
+                      </a>
+                    </div>
+                  </div>
+              </section>  
+            </Hidden>
+          </div>
         <div className={classes.container}>
-
-          {/* <VideoSlider /> */}
-
           <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
             <div
               className={classes.HorizontalScrollerOffre}
@@ -185,7 +532,7 @@ class Index extends React.Component {
                   className={classes.beforeTitle}>
                   à la une
               </Typography>
-                <Typography gutterBottom component="h1"
+                <Typography gutterBottom component="h2"
                   className={classes.title}>
                   Les offres d'emploi en <span className={classes.primary}>vidéo</span>
                 </Typography>
@@ -224,7 +571,7 @@ class Index extends React.Component {
                   className={classes.beforeTitle}>
                   à la une
               </Typography>
-                <Typography gutterBottom component="h1"
+                <Typography gutterBottom component="h2"
                   className={classes.title}>
                   Les entreprises en <span className={classes.primary}>vidéo</span>
                 </Typography>
@@ -256,6 +603,185 @@ class Index extends React.Component {
           </Button>
           </section>
 
+          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionCompany}>
+            <div
+              className={classes.HorizontalScrollerOffre}
+            >
+              <div className={classes.titleContainer}>
+                <Typography gutterBottom
+                  className={classes.beforeTitle}>
+                  Témoignage
+              </Typography>
+                <Typography gutterBottom component="h2"
+                  className={classes.title}>
+                  Le recrutement en <span className={classes.primary}>vidéo</span>
+                </Typography>
+              </div>
+              <div className={classes.temoignage}>
+                {/* PARTIE DEsktop */}   
+                <Hidden smDown>
+                  <iframe width="70%" height="450" src="https://www.youtube.com/embed/sKh0u7Mbdps" 
+                  frameborder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                  allowfullscreen></iframe>
+                </Hidden>
+                {/* PARTIE MOBILE */}   
+                <Hidden mdUp>
+                <iframe width="90%" height="450" src="https://www.youtube.com/embed/sKh0u7Mbdps" 
+                  frameborder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                  allowfullscreen></iframe>
+                </Hidden>
+
+              </div>    
+              
+            </div>
+
+            
+          </section>
+          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionSlider}>
+          {/* PARTIE Desktop Slider des logos d'entreprises*/}   
+          <Hidden smDown>
+            <Slider ref={slider => (this.slider = slider)} {...settings}>
+            <a href="/Entreprise/21247-lactalis-logistique-et-transports">        
+              <div className={classes.sliderDiv}>
+                <img className={classes.alignVertical} alt="Offres d'emploi Lactalis" src="/statique/images/logos/recrutement-video-lactalis.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/28481-onela"> 
+              <div className={classes.sliderDiv}>
+                <img className={classes.alignVertical} alt="Offres d'emploi Onela" src="/statique/images/logos/recrutement-video-onela-service-a-domicile.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/19205-intermarche-logistique-alimentaire-international"> 
+              <div className={classes.sliderDiv}>
+              <img  className={classes.alignVertical} alt="Offres d'emploi Intermarché" src="/statique/images/logos/recrutement-video-intermarche.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/4059-eiffage-construction-grand-ouest"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Eiffage" src="/statique/images/logos/recrutement-video-eiffage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/8639-mma-questembert"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi MMA" src="/statique/images/logos/recrutement-video-mma-assurances.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32987-admr-56"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi ADMR" src="/statique/images/logos/recrutement-video-ADMR.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/13464-jpa"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi JPA" src="/statique/images/logos/recrutement-video-jpa.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/2527-groupe-mousset"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Groupe Mousset" src="/statique/images/logos/recrutement-video-groupe-mousset.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/1467-groupe-rocher-operations"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Groupe Rocher" src="/statique/images/logos/recrutement-video-groupe-rocher.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/26064-aer-recyclage"> 
+              <div className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi AER Recyclage" src="/statique/images/logos/recrutement-video-aer-recyclage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/46-actual"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi Actual" src="/statique/images/logos/recrutement-video-actual.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/31934-la-centrale-des-ramoneurs"> 
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi La centrale des ramoneurs" src="/statique/images/logos/recrutement-video-la-centrale-des-ramoneurs.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32507-tpc-ouest">
+              <div  className={classes.sliderDiv}>
+              <img className={classes.alignVertical} alt="Offres d'emploi TPC Ouest" src="/statique/images/logos/recrutement-video-tpc-ouest-btp.jpg"></img>
+              </div>
+            </a>
+            
+          </Slider>
+        </Hidden>
+        {/* PARTIE Mobile */}   
+        <Hidden mdUp>
+          <div  className={classes.sliderContainerMobile}>
+          <a href="/Entreprise/21247-lactalis-logistique-et-transports" >        
+              <div className={classes.sliderDivMobile}>
+                <img className={classes.alignVerticalMobile} alt="Offres d'emploi Lactalis" src="/statique/images/logos/recrutement-video-lactalis.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/28481-onela" > 
+              <div className={classes.sliderDivMobile}>
+                <img className={classes.alignVerticalMobile} alt="Offres d'emploi Onela" src="/statique/images/logos/recrutement-video-onela-service-a-domicile.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/19205-intermarche-logistique-alimentaire-international" > 
+              <div className={classes.sliderDivMobile}>
+              <img  className={classes.alignVerticalMobile} alt="Offres d'emploi Intermarché" src="/statique/images/logos/recrutement-video-intermarche.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/4059-eiffage-construction-grand-ouest" > 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Eiffage" src="/statique/images/logos/recrutement-video-eiffage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/8639-mma-questembert" > 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi MMA" src="/statique/images/logos/recrutement-video-mma-assurances.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32987-admr-56" > 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi ADMR" src="/statique/images/logos/recrutement-video-ADMR.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/13464-jpa"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi JPA" src="/statique/images/logos/recrutement-video-jpa.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/2527-groupe-mousset"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Groupe Mousset" src="/statique/images/logos/recrutement-video-groupe-mousset.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/1467-groupe-rocher-operations"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Groupe Rocher" src="/statique/images/logos/recrutement-video-groupe-rocher.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/26064-aer-recyclage"> 
+              <div className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi AER" src="/statique/images/logos/recrutement-video-aer-recyclage.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/46-actual"> 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi Actual" src="/statique/images/logos/recrutement-video-actual.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/31934-la-centrale-des-ramoneurs"> 
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="Offres d'emploi La centrale des ramoneurs" src="/statique/images/logos/recrutement-video-la-centrale-des-ramoneurs.jpg"></img>
+              </div>
+            </a>
+            <a href="/Entreprise/32507-tpc-ouest">
+              <div  className={classes.sliderDivMobile}>
+              <img className={classes.alignVerticalMobile} alt="TPC Ouest" src="/statique/images/logos/recrutement-video-tpc-ouest-btp.jpg"></img>
+              </div>
+            </a>   
+          </div>
+        </Hidden>
+        </section>        
           <Footer />
         </div>
       </Layout>

nextjs/pages/profil2.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+import Layout from "../components/templates/Layout";
+import AccountProfile2 from "../components/organisms/AccountProfile2";
+import { Typography } from '@material-ui/core';
+import Head from 'next/head'
+import AdBlockDetect from 'react-ad-block-detect';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        width: '100%'
+    },
+    button: {
+        marginRight: theme.spacing(1)
+    },
+    completed: {
+        display: 'inline-block'
+    },
+    instructions: {
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+    },
+    information: {
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundColor: theme.palette.primary.main,
+      color: "#fff",
+      fontWeight: '700',
+      fontSize: '1.15em',
+      fontFamily: 'Roboto',
+      [
+          theme
+              .breakpoints
+              .up('md')
+      ]: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          justifyContent: 'space-around',
+          backgroundColor: theme.palette.primary.main,
+          padding: theme.spacing(2, 2)
+      },
+      '& a': {
+          textDecoration: 'none'
+      },
+      texteBlanc: {
+        color: "#fff",
+        
+      },
+  },
+}));
+
+export default function HorizontalNonLinearStepper() {
+    const classes = useStyles();
+
+    return (
+        <Layout>
+            <Head>
+                <title key="title">Profil – Talents Tube..</title>
+                <meta key="robots" name="robots" content="noindex, nofollow"></meta>
+                
+            </Head>
+            <div >
+
+                <AdBlockDetect   > 
+                  <div className={classes.information}>
+                    
+                      <p>AdBlocks a été détecté. Pour que Talents Tube puisse fonctionner
+                          correctement, veuillez désactiver Ad Blocks</p>
+                    
+                  </div>
+                </AdBlockDetect>
+            </div>
+            <div >
+                <AccountProfile2/>
+            </div>
+
+        </Layout>
+    );
+}

nextjs/pages/profileStep.js

@@ -6,6 +6,7 @@ import { Typography } from '@material-ui/core';
 import Head from 'next/head'
 import AdBlockDetect from 'react-ad-block-detect';
 
+
 const useStyles = makeStyles((theme) => ({
     root: {
         width: '100%'
@@ -56,7 +57,7 @@ export default function HorizontalNonLinearStepper() {
     return (
         <Layout>
             <Head>
-                <title key="title">Profil – Talents Tube</title>
+                <title key="title">Profil – Talents Tube...</title>
                 <meta key="robots" name="robots" content="noindex, nofollow"></meta>
             </Head>
             <div >
@@ -71,9 +72,10 @@ export default function HorizontalNonLinearStepper() {
                 </AdBlockDetect>
             </div>
             <div >
+                
                 <AccountProfile/>
             </div>
 
         </Layout>
     );
-}
+}

nextjs/pages/test4.js

@@ -120,7 +120,7 @@ const styles = theme => ({
     color: theme.palette.secondary.text,
   },
   title: {
-    fontFamily: 'Dosis',
+    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
     fontSize: '1.5em',
     fontWeight: '600',
     textAlign: 'center',
@@ -136,6 +136,9 @@ const styles = theme => ({
       margin: 'auto',
     },
   },
+  container: {
+    
+  },
 });
 
 class Index extends React.Component {
@@ -148,6 +151,8 @@ class Index extends React.Component {
         suggestions: [],
         valueMetier: '',
         suggestionsMetier: [],
+        valueMetierCompetence: '',
+        suggestionsMetierCompetence: [],
     };
   }
 
@@ -174,12 +179,19 @@ class Index extends React.Component {
   getSuggestionValue = suggestion => suggestion.libelle;
   // Render Each Option
   renderSuggestion = suggestion => (
-      <span className="sugg-option">
-          
-          <span className="name">
-              {suggestion.libelle} ({suggestion.code})
-          </span>
-      </span>
+    <span className={'suggestion-content ' + suggestion.twitter}>
+    <span className="name">
+      {
+        parts.map((part, index) => {
+          const className = part.highlight ? 'highlight' : null;
+
+          return (
+            <span className={className} key={index}>{part.text}</span>
+          );
+        })
+      }
+    </span>
+  </span>
   );
 
   // OnChange event handler
@@ -227,10 +239,23 @@ class Index extends React.Component {
   getSuggestionMetierValue = suggestion => suggestion.libelle;
   // Render Each Option
   renderSuggestionMetier = suggestion => (
-      <span className="sugg-option">
+//     <div style="position: absolute; right: 0px; z-index: 1; will-change: transform; top: 0px; left: 0px; transform: translate3d(14px, 53px, 0px);" data-placement="bottom-start">
+//     <div class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded" style="opacity: 1; transform: none; transform-origin: 0px 0px 0px; transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
+//       <ul class="MuiList-root MuiList-padding" role="menu" tabindex="-1">
+//       <div class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" tabindex="0" role="menuitem" aria-disabled="false" id="downshift-0-item-0">
+//         <div>
+//           <strong style="font-weight: 500;">{suggestion.libelle} </strong>
+//           <span style="font-weight: 300;">, {suggestion.code}</span>
+//         </div>
+//         <span class="MuiTouchRipple-root"></span>
+//       </div>
+//       </ul>
+//     </div>
+// </div>
+<span className="suggestion-content">
           
           <span className="name">
-              {suggestion.libelle} ({suggestion.code})
+              {suggestion.libelle} 
           </span>
       </span>
   );
@@ -266,10 +291,64 @@ class Index extends React.Component {
   };
 
 
+  // METIER COMPETENCE
+  // Filter logic
+  getSuggestionsMetierCompetence = async (valueMetierCompetence) => {
+    const inputValue = valueMetierCompetence.trim().toLowerCase();
+    let response = await fetch(publicRuntimeConfig.symphonyUrl+"api/getDetailAppelation?q=" + inputValue );
+    // let response = await fetch("http://www.omdbapi.com/?s=" + inputValue + "&apikey=a591bb53");
+    let data = await response.json()
+    return data.competencesDeBase;
+  };
+
+  // Trigger suggestions
+  getSuggestionMetierCompetenceValue = suggestion => suggestion.libelle;
+  // Render Each Option
+  renderSuggestionMetierCompetence = suggestion => (
+    
+      <span className="sugg-option">
+          
+          <span className="name">
+              {suggestion.libelle}
+          </span>
+      </span>
+  );
+
+  // OnChange event handler
+  onChangeMetierCompetence = (event, { newValue }) => {
+      this.setState({
+          valueMetierCompetence: newValue
+      });
+  };
+
+  // Suggestion rerender when user types
+  onSuggestionsMetierCompetenceFetchRequested = ({ value }) => {
+      this.getSuggestionsMetierCompetence(value)
+          .then(data => {
+              if (data.Error) {
+                  this.setState({
+                      suggestionsMetierCompetence: []
+                  });
+              } else {
+                  this.setState({
+                      suggestionsMetierCompetence: data
+                  });
+              }
+          })
+  };
+
+  // Triggered on clear
+  onSuggestionsMetierCompetenceClearRequested = () => {
+      this.setState({
+          suggestionsMetierCompetence: []
+      });
+  };
+
+
 
   render() {
     const { classes } = this.props;
-    const { value, suggestions, valueMetier, suggestionsMetier } = this.state;
+    const { value, suggestions, valueMetier, suggestionsMetier, valueMetierCompetence, suggestionsMetierCompetence } = this.state;
     // Option props
     const inputProps = {
       placeholder: 'Saisir une compétence',
@@ -282,19 +361,22 @@ class Index extends React.Component {
       value:valueMetier,
       onChange: this.onChangeMetier
     };
+
+    const inputPropsMetierCompetence = {
+      placeholder: 'Saisir un id appellation',
+      value:valueMetierCompetence,
+      onChange: this.onChangeMetierCompetence
+    };
     const socialShareUrl = typeof window !== 'undefined' ? window.location
             : publicRuntimeConfig.frontServerUrl ;
     const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
     const imgUrl =  DefaultUrl
     return (
       <Layout>
-        <OgHead seo_title="Talents Tube - Plateforme de recrutement en vidéo"
-                    seo_description="Talents Tube est la première plateforme réservée aux offres d'emploi vidéo, vidéo marque employeur et aux CV vidéos. Découvrez une nouvelle méthode de recrutement."
-                    seo_url={socialShareUrl}
-                    image={imgUrl}
-                    seo_key="Recrutement, video"
-
-        ></OgHead>
+        <Head>
+          <title key="title">Recrutement vidéo : fonctionnement – Talents Tube</title>
+          <meta key="robots" name="robots" content="noindex, nofollow"></meta>
+        </Head>
         <div className={classes.container}>
 
           {/* <VideoSlider /> */}
@@ -319,6 +401,15 @@ class Index extends React.Component {
                 renderSuggestion={this.renderSuggestionMetier}
                 inputProps={inputPropsMetier}
             />
+
+            <Autosuggest
+                suggestions={suggestionsMetierCompetence}
+                onSuggestionsFetchRequested={this.onSuggestionsMetierCompetenceFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsMetierCompetenceClearRequested}
+                getSuggestionValue={this.getSuggestionMetierCompetenceValue}
+                renderSuggestion={this.renderSuggestionMetierCompetence}
+                inputProps={inputPropsMetierCompetence}
+            />
           </section>
 
           

nextjs/public/sitemap_local.xml

@@ -0,0 +1,354 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
+  <url>
+    <loc>https://www.talentstube.com/Offre/133-gestionnaire-de-copropriete-f-h</loc>
+    <lastmod>2021-01-29</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprises</loc>
+    <lastmod>2021-01-29</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offres</loc>
+    <lastmod>2021-01-29</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/134-assistant-administratif-et-commercial-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/135-commercial-b-to-c-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/130-assistant-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/131-poseur-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/132-comptable-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/129-commerciaux-b-to-b-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/128-techniciens-poseurs-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/122-chauffeurs-spl-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/115-technicien-ramoneur-fumiste-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/109-equipier-de-plateforme-polyvalent-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/111-couvreur-etancheur-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/107-operateur-soudeur-chaudronnier-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/103-agents-de-quai-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/102-preparateurs-de-commandes-f-h</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.80</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Offre/46-conducteurs-routiers-h-f</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/32507-tpc-ouest</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/32355-hyphae</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/28481-onela</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/28172-pro-fermetures</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/26064-aer-recyclage</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/21247-lactalis-logistique-et-transports</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/19800-silvadec</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/19205-intermarche-logistique-alimentaire-international</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/18143-l-n-u-f-lisieux</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/17467-l-n-u-f-vallet</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16785-nachos</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16639-fast-point</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16247-sasp</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16015-la-veggisserie</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/16007-bforpu-b</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/15797-sinay</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/15559-monibrand</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/13464-jpa</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/12531-grand-ouest-etiquettes</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/12480-fym-action</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11592-youston</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11413-les-vergers-de-chateaubourg</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/11345-telemaque</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/9138-vital-concept</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/8639-mma-questembert</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>1.00</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7593-opticultures</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7174-atlantem</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/7004-la-table-de-la-desirade</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6898-le-ptit-club</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6555-mazars</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/6363-square-habitat</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/5250-linpac-packaging-pontivy-groupe-klockner-pentaplast</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4211-progressis-ge</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4097-a-2-com</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4088-venetis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/4059-eiffage-construction-grand-ouest</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/3381-mairie-saint-hilaire-de-riez</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2958-skiold-acemo</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2527-groupe-mousset</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/2341-temporis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1899-faurecia</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1691-groupe-syselec</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1467-groupe-rocher-operations</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/1297-albea</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/438-bouyer-leroux</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/266-mgdis</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/157-medaviz</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/95-multiplast</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/52-talents-tube</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/46-actual</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/18-coriolis-composites</loc>
+    <lastmod>2021-01-23</lastmod>
+    <priority>0.70</priority>
+  </url>
+  <url>
+    <loc>https://www.talentstube.com/Entreprise/17-thibault-bergeron</loc>
+    <lastmod>2021-01-24</lastmod>
+    <priority>0.70</priority>
+  </url>
+</urlset>

nextjs/public/statique/css/autocomplete.css

@@ -0,0 +1,101 @@
+.react-autosuggest__container {
+  position: relative;
+  width: 85%;
+}
+
+.react-autosuggest__input {
+  width: 100%;
+  
+  height: 30px;
+  padding: 10px 0;
+  font-family: Roboto;
+  font-weight: 400;
+  font-size: 16px;
+  border: 1px solid;
+  border-color: rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+}
+
+.react-autosuggest__input:focus {
+  outline: none;
+}
+
+.react-autosuggest__container--open .react-autosuggest__input {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.react-autosuggest__suggestions-container {
+  display: none;
+}
+
+.react-autosuggest__container--open .react-autosuggest__suggestions-container {
+  display: block;
+  position: absolute;
+  top: 51px;
+  width: 280px;
+  border: 1px solid #aaa;
+  background-color: #fff;
+  font-family: Roboto;
+  font-weight: 300;
+  font-size: 16px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  z-index: 10;
+}
+
+.react-autosuggest__suggestions-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.react-autosuggest__suggestion {
+  cursor: pointer;
+  padding: 10px 20px;
+}
+
+.react-autosuggest__suggestion:not(:first-child) {
+  border-top: 1px solid #ddd;
+}
+
+.react-autosuggest__suggestion--focused {
+  background-color: #0C7EAF;
+  color: #fff;
+}
+
+.suggestion-content {
+  display: flex;
+  align-items: center;
+  background-repeat: no-repeat;
+}
+
+.dancounsell {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/dancounsell/48.jpg);
+}
+
+.ladylexy {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/48.jpg);
+}
+
+.mtnmissy {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/mtnmissy/48.jpg);
+}
+
+.steveodom {
+  background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/steveodom/48.jpg);
+}
+
+.name {
+  margin-left: 8px;
+  line-height: 15px;
+}
+
+.highlight {
+  color: #ee0000;
+  font-weight: bold;
+}
+
+.react-autosuggest__suggestion--focused .highlight {
+  color: #120000;
+}

nextjs/public/statique/css/fonts.css

@@ -0,0 +1,36 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

nextjs/public/statique/css/owl.carousel.css

@@ -0,0 +1,153 @@
+/* 
+ * 	Core Owl Carousel CSS File
+ *	v1.3.3
+ */
+
+/* clearfix */
+.owl-carousel .owl-wrapper:after {
+	content: ".";
+	display: block;
+	clear: both;
+	visibility: hidden;
+	line-height: 0;
+	height: 0;
+}
+/* display none until init */
+.owl-carousel{
+	display: none;
+	position: relative;
+	width: 100%;
+	-ms-touch-action: pan-y;
+}
+.owl-carousel .owl-wrapper{
+	display: none;
+	position: relative;
+	-webkit-transform: translate3d(0px, 0px, 0px);
+}
+.owl-carousel .owl-wrapper-outer{
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+}
+.owl-carousel .owl-wrapper-outer.autoHeight{
+	-webkit-transition: height 500ms ease-in-out;
+	-moz-transition: height 500ms ease-in-out;
+	-ms-transition: height 500ms ease-in-out;
+	-o-transition: height 500ms ease-in-out;
+	transition: height 500ms ease-in-out;
+}
+	
+.owl-carousel .owl-item{
+	float: left;
+}
+.owl-controls .owl-page,
+.owl-controls .owl-buttons div{
+	cursor: pointer;
+}
+.owl-controls {
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* mouse grab icon */
+.grabbing { 
+    cursor:url(../img/grabbing.png) 8 8, move;
+}
+
+/* fix */
+.owl-carousel  .owl-wrapper,
+.owl-carousel  .owl-item{
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility:    hidden;
+	-ms-backface-visibility:     hidden;
+  -webkit-transform: translate3d(0,0,0);
+  -moz-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+}
+
+/*
+* 	Owl Carousel Owl Demo Theme 
+*	v1.3.3
+*/
+
+.owl-theme .owl-controls{
+	margin-top: 10px;
+	text-align: center;
+}
+
+/* Styling Next and Prev buttons */
+
+.owl-theme .owl-controls .owl-buttons div{
+	color: #FFF;
+	display: inline-block;
+	zoom: 1;
+	*display: inline;/*IE7 life-saver */
+	margin: 5px;
+	padding: 3px 10px;
+	font-size: 12px;
+	-webkit-border-radius: 30px;
+	-moz-border-radius: 30px;
+	border-radius: 30px;
+	background: #869791;
+	filter: Alpha(Opacity=50);/*IE7 fix*/
+	opacity: 0.5;
+}
+/* Clickable class fix problem with hover on touch devices */
+/* Use it for non-touch hover action */
+.owl-theme .owl-controls.clickable .owl-buttons div:hover{
+	filter: Alpha(Opacity=100);/*IE7 fix*/
+	opacity: 1;
+	text-decoration: none;
+}
+
+/* Styling Pagination*/
+
+.owl-theme .owl-controls .owl-page{
+	display: inline-block;
+	zoom: 1;
+	*display: inline;/*IE7 life-saver */
+}
+.owl-theme .owl-controls .owl-page span{
+	display: block;
+	width: 12px;
+	height: 12px;
+	margin: 5px 7px;
+	filter: Alpha(Opacity=50);/*IE7 fix*/
+	opacity: 0.5;
+	-webkit-border-radius: 20px;
+	-moz-border-radius: 20px;
+	border-radius: 20px;
+	background: #FF5A5F;
+}
+
+.owl-theme .owl-controls .owl-page.active span,
+.owl-theme .owl-controls.clickable .owl-page:hover span{
+	filter: Alpha(Opacity=100);/*IE7 fix*/
+	opacity: 1;
+}
+
+/* If PaginationNumbers is true */
+
+.owl-theme .owl-controls .owl-page span.owl-numbers{
+	height: auto;
+	width: auto;
+	color: #FFF;
+	padding: 2px 10px;
+	font-size: 12px;
+	-webkit-border-radius: 30px;
+	-moz-border-radius: 30px;
+	border-radius: 30px;
+}
+
+.screenshot-slider .item{
+  margin: 3px;
+}
+.screenshot-slider .item img{
+  display: block;
+  width: 100%;
+  height: auto;
+}

nextjs/public/statique/images/Import-video-recruteur.svg

@@ -0,0 +1,31 @@
+<svg id="Import" xmlns="http://www.w3.org/2000/svg" width="73.762" height="56.425" viewBox="0 0 73.762 56.425">
+  <g id="Groupe_7895" data-name="Groupe 7895" transform="translate(9.499)">
+    <rect id="Rectangle_316" data-name="Rectangle 316" width="42.463" height="23.869" transform="translate(0 3.769) rotate(-5.093)"/>
+    <rect id="Rectangle_317" data-name="Rectangle 317" width="2.656" height="2.656" transform="translate(1.401 6.158) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_318" data-name="Rectangle 318" width="2.656" height="2.656" transform="translate(1.866 11.472) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_319" data-name="Rectangle 319" width="2.656" height="2.656" transform="translate(2.327 16.747) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_320" data-name="Rectangle 320" width="2.656" height="2.656" transform="translate(2.826 22.019) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_321" data-name="Rectangle 321" width="2.656" height="2.656" transform="translate(38.67 2.848) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_322" data-name="Rectangle 322" width="2.656" height="2.656" transform="translate(39.131 8.123) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_323" data-name="Rectangle 323" width="2.656" height="2.656" transform="translate(39.633 13.433) rotate(-5.093)" fill="#fff"/>
+    <rect id="Rectangle_324" data-name="Rectangle 324" width="2.656" height="2.656" transform="translate(40.094 18.708) rotate(-5.093)" fill="#fff"/>
+    <path id="Tracé_278" data-name="Tracé 278" d="M229.4,202.9l6.275,3.311-5.582,4.35Z" transform="translate(-210.257 -192.71)" fill="#fff"/>
+  </g>
+  <path id="Tracé_279" data-name="Tracé 279" d="M217.367,282.859l-6.93,6.93-48.507-6.93L155,275.93l6.93-6.93h55.437Z" transform="translate(-155 -233.363)" fill="#d0e7fe"/>
+  <path id="Tracé_280" data-name="Tracé 280" d="M173,269v6.93h48.507l6.93-6.93Z" transform="translate(-166.07 -233.363)" fill="#b8dbfe"/>
+  <g id="Groupe_7897" data-name="Groupe 7897" transform="translate(28.442 19.099)">
+    <g id="Groupe_7896" data-name="Groupe 7896" transform="translate(3.551)">
+      <path id="Tracé_281" data-name="Tracé 281" d="M239.065,257.45a.488.488,0,0,1-.231-.039.939.939,0,0,1-.693-1.155,50.925,50.925,0,0,0,1.463-12.088,51.857,51.857,0,0,0-.346-6.006.969.969,0,0,1,1.925-.231,55.915,55.915,0,0,1,.346,6.237,52.807,52.807,0,0,1-1.5,12.55A.952.952,0,0,1,239.065,257.45Z" transform="translate(-238.104 -232.827)" fill="#25d89a"/>
+      <path id="Tracé_282" data-name="Tracé 282" d="M240.5,229.337a1.021,1.021,0,0,1-.962-.808c-.077-.462-.154-.885-.27-1.347a.944.944,0,0,1,1.848-.385c.077.462.192.924.269,1.386a.969.969,0,0,1-.77,1.116A.141.141,0,0,1,240.5,229.337Z" transform="translate(-238.804 -226.042)" fill="#25d89a"/>
+    </g>
+    <path id="Tracé_283" data-name="Tracé 283" d="M233.084,279.525l-4.042-6.237a.972.972,0,1,1,1.617-1.078l3,4.62,4.62-3a.972.972,0,0,1,1.078,1.617Z" transform="translate(-228.879 -254.171)" fill="#25d89a"/>
+  </g>
+  <path id="Tracé_284" data-name="Tracé 284" d="M316.393,300.545h-9.008a.385.385,0,1,1,0-.77h8.7l5.505-5.659a.381.381,0,1,1,.539.539Z" transform="translate(-248.483 -248.739)" fill="#25d89a"/>
+  <path id="Tracé_285" data-name="Tracé 285" d="M317.93,299.2h-6.545a.385.385,0,0,1,0-.77h6.237l4.2-4.312a.381.381,0,1,1,.539.539Z" transform="translate(-250.943 -248.739)" fill="#fa6362"/>
+  <g id="Groupe_7899" data-name="Groupe 7899" transform="translate(30.144 40.641)">
+    <g id="Groupe_7898" data-name="Groupe 7898" transform="translate(0 0)">
+      <path id="Tracé_286" data-name="Tracé 286" d="M233.3,282l2.5,3.811,5.89-3.811h-3.542l-.654.423a1.636,1.636,0,0,0,.077-.423H233.3Z" transform="translate(-233.3 -282)" fill="#21b77e"/>
+    </g>
+  </g>
+  <rect id="Rectangle_325" data-name="Rectangle 325" width="55.437" height="13.859" transform="translate(0 42.566)" fill="#fff"/>
+</svg>

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>