no follow

US 238 : Mise en place de la version
US 435 et 355 sur le module webRTC new look
2020-12-13 23:47:51 +01:00 · 2020-12-11 16:14:48 +01:00 · 2020-12-11 15:34:22 +01:00 · 2020-12-10 17:31:58 +01:00 · 2020-12-10 16:57:22 +01:00 · 2020-12-10 16:52:29 +01:00
31 changed files with 926 additions and 182 deletions
@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Head from 'next/head'
-
+ 
 const OgHead = props => {
    return (
        <Head>
            <title key="title">{props.seo_title}</title>
-            {/* <meta name="robots" content="noindex, nofollow"></meta> */}
+            <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} />
@@ -119,7 +119,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")
@@ -250,6 +250,7 @@ class Etape2 extends React.Component {
                                
                                <div className={classes.recorderContainer}>
                                    <Recorder uploader={this.props.uploadMediaPres} titreBouton="Remplacer ma vidéo"/>
+                                    
                                </div>
                                )
                            }
@@ -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'))
    {
@@ -1,4 +1,4 @@
-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 TextField from '@material-ui/core/TextField';
@@ -10,6 +10,23 @@ 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 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 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: {
@@ -89,19 +106,122 @@ const styles = theme => ({
            color: theme.palette.secondary.main,
        },
    },
+    remplacerButton: {
+        color: '#1E2327',
+        borderColor: '#1E2327',
+        border: '2px solid',
+        padding: '9.6px 8px',
+        margin:'15px 0px 25px 0px',
+        textTransform: 'inherit',
+    },
+    player:{
+        width:"100px"
+    }
+    
 });
-
+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 = {
+        open: false
+      };
+    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('');
+        }
+    }
+
+    onSuggestionSelected = (suggestion) => {
+
+        console.log('Selected suggestion:', suggestion)
+        const address = suggestion.description;
+        this.setState({
+            value: address
+        });
+
+        geocodeByAddress(address)
+            .then(address => {
+                console.log('Selected ' + 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: '#ffffff', 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.
+	}
+
    state = {
        file: null,
        firstname: '',
@@ -112,13 +232,19 @@ class Answer extends Component {
        twitter: '',
        website: '',
        mediaId: null,
+        mediaUrl: null,
+        thumbnails:null,
+        heure: null,
        companyId: null,
+        address:'',
+        errorMessage:''
    };

    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value })
    }

+
    UNSAFE_componentWillReceiveProps(nextProps) {
        this.setState({
            firstname: nextProps.user.firstname,
@@ -129,11 +255,16 @@ class Answer extends Component {
            twitter: nextProps.user.twitter,
            website: nextProps.user.website,
            mediaId: nextProps.mediaId,
+            mediaUrl: nextProps.mediaUrl,
+            thumbnails: nextProps.thumbnails,
+            heure: nextProps.heure,
            companyId: nextProps.companyId,
        })
    }

    componentDidMount() {
+        console.log("ANSWER !!!!!!! !!!!!! !!!!!! ");
+        console.log(this.props);
        this.setState({
            firstname: this.props.user.firstname,
            lastname: this.props.user.lastname,
@@ -142,6 +273,11 @@ class Answer extends Component {
            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
+
        })
    }

@@ -170,7 +306,10 @@ class Answer extends Component {
            {
                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
            })
    }

@@ -184,12 +323,30 @@ class Answer extends Component {
        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 inputProps = {
+            value: this.state.address,
+            onChange: this.onChange,
+          }
        return (
            <section className={classes.container}>
+                
                <form className={classes.form}
                    autoComplete="off">
                    {!!logoUrl && <Avatar className={classes.logo}
@@ -218,6 +375,39 @@ class Answer extends Component {
                                </Button>
                            </label></Fragment>)
                    }
+                    <Player fluid={false} width={450} 
+                    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"
+                    />
+
+                    {/* <GooglePlaceAutocomplete
+                        name="location"
+                        label="Location"
+                        onSuggestionSelected={this.onSuggestionSelected}
+                        textFieldProps={{ onChange: (e) => this.onChange(e), value: this.state.value, placeholder: 'Search for a place'}}
+                        types={['(regions)']}
+                        renderTarget={() => (<div />)}
+                    /> */}
+                    <Button className={classes.remplacerButton} onClick={this.openDialog.bind(this)}>
+                        Remplacer ma vidéo
+                    </Button>
+                    <Dialog open={this.state.open} onEnter={console.log("Hey.")}>
+                        <DialogTitle> Souhaitez-vous remplacer votre vidéo de réponse ?</DialogTitle>
+                        <DialogContent> Cette vidéo sera définitivement supprimée. Vous pourrez importer ou réaliser une nouvelle video 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="lastname"
                        required
@@ -311,6 +501,7 @@ class Answer extends Component {
                        value={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 +512,20 @@ class Answer extends Component {
 }

 function mapStateToProps(state, ownProps) {
+    // console.log(state.media.message.heure);
    return {
        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))
@@ -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: {
@@ -152,6 +153,11 @@ const styles = theme => ({
        justifyContent: 'center',
        padding: theme.spacing(6, 4),
    },
+    version:{
+        marginTop: '15px',
+        fontSize: '0.7em',
+        fontWeight: '300',
+    }

 });

@@ -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}>
@@ -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>
    );
@@ -1,8 +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;

@@ -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;
@@ -388,16 +388,25 @@ 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>
                  <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} />
@@ -445,7 +454,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'>
@@ -561,12 +570,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
@@ -43,6 +43,7 @@ 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%',
@@ -295,6 +296,9 @@ const styles = theme => ({
      paddingRight: 0,
    },
  },
+  loadingBar:{
+    top:'100px'
+  }
 });
 let urlEnv;

@@ -351,7 +355,7 @@ class HeaderOffre extends React.Component {
            onClick={this.toggleDrawer('right', false)}
            onKeyDown={this.toggleDrawer('right', false)}
          >{!!this.props.loading &&
-            (<Loader />
+            (<LoadingBar className={classes.loadingBar}/>
            )}
            {!!!this.props.loading && !!!this.props.fetched
              &&
@@ -459,12 +463,18 @@ class HeaderOffre extends React.Component {
                        </ListItemText>
                      </a>
                    </ActiveLink>
+                    
+                    <a className={classes.desktopMenuItem} href="https://blog.talentstube.com/" target="_blank">
+                      <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
@@ -37,6 +37,9 @@ const styles = theme => ({
        paddingTop: theme.spacing(10),
        justifyContent: 'center',
    },
+    lien:{
+        textDecoration:'none'
+    },
    container: {
        padding: theme.spacing(0, 1),
        [theme.breakpoints.up('md')]: {
@@ -112,7 +115,8 @@ const styles = theme => ({
        // justifyContent: 'flex-start',
        width: '100%',
        borderBottom: '1px solid #E8E8E9',
-        paddingBottom: '20px'
+        paddingBottom: '15px',
+        marginBottom: '10px'
    },
    IconTextContainerMobile: {
        display: '',
@@ -132,7 +136,7 @@ const styles = theme => ({
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        top:'40px',
-        margin: theme.spacing(0, 0),
+        margin: theme.spacing(0, 1),
    },
    tagsContainer: {
        display: 'flex',
@@ -148,6 +152,7 @@ const styles = theme => ({
        display: 'flex',
        flexDirection: 'column',
        alignSelf: 'center',
+        textAlign:'center'
    },
    discoverContainerCompany: {
        backgroundColor: theme.palette.background.grey,
@@ -175,26 +180,15 @@ const styles = theme => ({
    discoverContainerImage: {
        cursor: 'pointer',
        position: 'relative',
-         
+        height:'auto',
        '& img': {
            width: '100%',
            borderRadius: '5px',
-            backgroundColor: 'rgba(30, 35, 39, 0.8)',    
-             
+            filter: 'brightness(60%)',
            '&:hover': {
-                backgroundColor: 'rgba(30, 35, 39, 0.2)',
-                flex :"1",
-                //   transform: 'translateY(-5px)',
-
-                  '& .cardHover': {
-                      backgroundColor: 'rgba(0,0,0,0)',
-                  },
-                //transform: 'translateY(-5px)',
-               
-               
+                filter: 'brightness(55%)',
             },
        },
-        
        [theme.breakpoints.up('md')]: {
            width: '100%',
        },
@@ -215,18 +209,30 @@ const styles = theme => ({
        width: '120px',
        height: '120px',
        marginBottom:'20px',
+        border: 'solid 5px white',
+        display: 'flex',
+        boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
+        alignItems: 'center',
+        borderRadius: '5px',
+        backgroundColor: 'white'
+
    },
    logoMobile: {
        width: '80px',
        height: '80px',
        marginTop:'20px',
-        
+        border: 'solid 5px white',
+        display: 'flex',
+        boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
+        alignItems: 'center',
+        borderRadius: '5px',
+        backgroundColor: 'white'
    },
    stickyContainer:{
        margin: '10px 0px',
        borderBottom: '1px solid #E8E8E9',
-        marginBottom: '30px',
-        paddingBottom: '15px',
+        marginBottom: '20px',
+        paddingBottom: '5px',

    },
    stickySeparation:{
@@ -242,7 +248,7 @@ const styles = theme => ({
        color: '#1E2327',
    },
    stickyEntreprise:{
-        fontWeight: '300',
+        fontWeight: '400',
        fontSize: '1em',
        marginBottom:'20px',
        color: '#1E2327',
@@ -253,7 +259,7 @@ const styles = theme => ({
    title: {
        fontSize: '1.875em',
        fontWeight: '600',
-        marginTop:'40px',
+        marginTop:'10px',
        marginBottom:'20px',
        paddingRight:'20px',
        color: '#1E2327',
@@ -274,15 +280,15 @@ const styles = theme => ({
    },
    voirEntreprise: {
        fontSize: '1.625em',
-            fontWeight: '600',
-            position: 'absolute',
-            top: '0px',
-            left: '40px',
-            right: '40px',
-            color: '#fff',
-            textAlign:'left',
-            lineHeight : '40px',
-            marginBottom : '40px'
+        fontWeight: '600',
+        position: 'absolute',
+        top: '20px',
+        left: '40px',
+        right: '40px',
+        color: '#fff',
+        textAlign:'left',
+        lineHeight : '40px',
+        marginBottom : '40px'

    },
    voirEntrepriseMobile: {
@@ -297,6 +303,32 @@ const styles = theme => ({
        lineHeight : '40px',
        marginBottom : '40px'

+    },
+    voirTerritoire: {
+        fontSize: '1.625em',
+        fontWeight: '600',
+        position: 'absolute',
+        top: '-20px',
+        left: '40px',
+        right: '40px',
+        color: '#fff',
+        textAlign:'left',
+        lineHeight : '40px',
+        marginBottom : '40px'
+
+    },
+    voirTerritoireMobile: {
+        fontSize: '1.125em',
+        fontWeight: '600',
+        position: 'absolute',
+        top: '-20px',
+        left: '40px',
+        right: '40px',
+        color: '#fff',
+        textAlign:'left',
+        lineHeight : '40px',
+        marginBottom : '40px'
+
    },
    contentText: {
        width:"95%",
@@ -322,10 +354,11 @@ const styles = theme => ({
        fontSize: '1em',
        fontWeight: '500',
        textAlign: 'center',
+        marginTop:'30px'
    },
    companyName: {
        fontSize: '1.3em',
-        fontWeight: '300',
+        fontWeight: '400',
        [theme.breakpoints.up('md')]: {
            fontSize: '1em',
        },
@@ -333,7 +366,7 @@ const styles = theme => ({
    iconText: {
        marginLeft: 0,
        justifyContent: 'flex-start',
-        fontWeight: 400,
+        fontWeight: '400',
        padding: theme.spacing(0.25, 0),
    },
    iconTextDesktop: {
@@ -356,14 +389,8 @@ const styles = theme => ({
        paddingLeft: theme.spacing(1),
        // borderBottom: '1px solid #E8E8E9',
        paddingBottom: '1px',
-        verticalAlign: 'middle'
-    },
-    iconTextTextDesktop: {
-        fontWeight: 'lighter',
-        color: theme.palette.offerlistitem.text,
-        fontSize: '1em',
-        paddingLeft: theme.spacing(1),
-        width: '100%',
+        verticalAlign: 'middle',
+        fontWeight: '400',
    },
    
    tags: {
@@ -575,8 +602,7 @@ const styles = theme => ({
        },

        poste: {
-            // backgroundColor :'#000',
-            // opacity:'0.5',
+            
            fontSize: '2.250em',
            fontWeight: '600',
            position: 'absolute',
@@ -764,7 +790,6 @@ function OffreDetail(props) {
        </Typography>
        {/* <SimpleCollapse> */}
        <Typography gutterBottom className={classes.contentText}>
-            
            <div
            dangerouslySetInnerHTML={{
                __html: offre.description
@@ -839,7 +864,7 @@ function OffreDetail(props) {
                                                            Lire la vidéo
                                                        </Typography>
                                                    </div>
-                                                </Link>         
+                                            </Link>         
                                        </div>        
                                    </Suspense>         
                                    <div className={classes.container}>
@@ -894,7 +919,7 @@ function OffreDetail(props) {
                                                <Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&type=Territoire`} >   
                                                    <div className={classes.discoverContainerImage}>
                                                        <img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />
-                                                        <Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirEntreprise} align="center">
+                                                        <Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirTerritoire} align="center">
                                                            Découvrir le territoire {(offre.territories) ? offre.territories[0].territory.brand_name : ''}
                                                        </Typography>
                                                        <KeyboardArrowleftIcon className={classes.iconPlayBas} />
@@ -914,14 +939,14 @@ function OffreDetail(props) {
                            <StickyBox style={{width:'33%', marginLeft:'40px', padding : '0 15px'}}>
                                     
                                    <section className={classes.stickyContainer}>
-                                        <a href={entrepriseLink} >
+                                        <a href={entrepriseLink} className={classes.lien}>
                                            <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
                                                                    src={logoUrl} alt={offre.company.brand_name && offre.company.brand_name} />    
                                        </a>
                                        <Typography variant="h4" component="h4" className={classes.stickyTitle}>
                                            {offre.title}
                                        </Typography>
-                                        <a href={entrepriseLink} >
+                                        <a href={entrepriseLink} className={classes.lien}>
                                            <Typography variant="h5" component="h5" className={classes.stickyEntreprise}>
                                            {offre.company.brand_name && offre.company.brand_name}
                                            </Typography>
@@ -941,17 +966,16 @@ function OffreDetail(props) {
                                    </section>    
                                {!offre.is_promoted && (
                                    <div className={classes.shareContainer}>
-                                        <Link href={`/Reponse?adId=${offre.id}`}>
+                                        <a href={`/Reponse?adId=${offre.id}`} className={classes.lien}>
                                            <Button
                                                cyp="ButtonApply"
                                                variant="contained"
                                                className={classes.button}

-                                            >Postuler</Button>
-                                        </Link>
-                                        <Typography className={classes.contentCondition}>
-                                            ou
-                                        </Typography>
+                                >Postuler </Button>
+                                        </a>
+                                        
+                                        
                                        <Typography gutterBottom className={classes.contentShare}>
                                            Partager l'offre sur votre réseau
                                        </Typography>
@@ -999,7 +1023,7 @@ function OffreDetail(props) {
                <section className={classes.headerContainerMobile}>
                    <div >

-                        <a href={entrepriseLink} >
+                        <a href={entrepriseLink} className={classes.lien}>
                            <Avatar className={classes.logoMobile} classes={{ img: classes.MuiAvatarImg }}
                                src={logoUrl} alt="companylogo" />
                        </a>
@@ -1009,7 +1033,7 @@ function OffreDetail(props) {
                        <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
                            {offre.title}
                        </Typography>
-                        <a href={entrepriseLink}  >
+                        <a href={entrepriseLink}  className={classes.lien}>
                            <Typography gutterBottom variant="subtitle1" className={classes.text}>
                                {offre.company.brand_name && offre.company.brand_name} 
                            </Typography>
@@ -1064,7 +1088,7 @@ function OffreDetail(props) {
                                <Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&type=Territoire`} >   
                                    <div className={classes.discoverContainerImage}>
                                        <img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />
-                                        <Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirEntrepriseMobile} align="center">
+                                        <Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirTerritoireMobile} align="center">
                                            Découvrir le territoire {(offre.territories) ? offre.territories[0].territory.brand_name : ''}
                                        </Typography>
                                        <KeyboardArrowleftIcon className={classes.iconPlayBasMobile} />
@@ -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,6 +18,7 @@ const RTCRecorder = dynamic(() => import('RecordRTC'), {

 const videoJsOptions = {
    controls: true,
+    width: '550',
    languages: {
        fr: {
          
@@ -25,7 +27,7 @@ const videoJsOptions = {
      },
    autoplay:true,
    preload:"auto",
-    playsinline : true,
+    playsinline : false,
    //videoEngine: 'webm-wasm',
    //liveui : true,
    fluid: true,
@@ -36,9 +38,11 @@ const videoJsOptions = {
        volumePanel: false,
        deviceButton: false,
        recordIndicator:true,
-        recordToggle: true
+        recordToggle: false,
+        PictureInPictureToggle:false,
+        PlayToggle:false
    },
-    // poster: "https://vignette.wikia.nocookie.net/charabattles/images/e/eb/Chuck_norris.jpg/revision/latest/scale-to-width-down/400?cb=20170412123612&path-prefix=fr",
+     poster: '/statique/images/webrtc/module-video-talents-tube.jpg',
    plugins: {
      /*
      // wavesurfer section is only needed when recording audio-only
@@ -60,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
@@ -125,7 +199,7 @@ var myButtonDom = myButton.el();


 // Now I am setting the text as you needed.
-myButtonDom.innerHTML = "Youi";
+// myButtonDom.innerHTML = "Youi";

 myButtonDom.onclick = function(){
  //alert("Redirecting");
@@ -181,26 +255,44 @@ myButtonDom.onclick = function(){
        this.props.uploader(formData);
    }

-    pausePlayer = () => {
+    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) {
@@ -209,18 +301,20 @@ myButtonDom.onclick = function(){
            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>}
-                    <Button className={classes.button} variant="outlined" color="primary" onClick={this.pausePlayer}>Lancer enregistrement</Button>
-                    <Button className={classes.button}  variant="outlined" color="primary" onClick={this.arretPlayer}>Arreter enregistrement</Button>
                </div>
                <div id="controleNav">
                    
@@ -111,6 +111,7 @@ class Register extends React.Component {
            password: '',
            checkNewsletter: false,
            checkCGU: false,
+            adId : ''
        },
        errors: {
            email:null,
@@ -133,13 +134,22 @@ class Register extends React.Component {
        
        return errors;
    };
+    
+    componentDidMount() {
+        this.setState({
+            data: {...this.state.data, adId: localStorage.getItem('adId')},
+        })
+    }

    onRegister = e => {
        e.preventDefault();
+        
+        
        const 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)
@@ -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,44 @@ 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,   
+    },
+    TwitterIconMobile: {
+        color: theme.palette.social.twitter,
+    },
+    LinkedinIconMobile: {
+        color: theme.palette.social.linkedin,
+    },
+    MailIconMobile: {
+        color: theme.palette.social.mail,
    },
 }));

@@ -51,19 +80,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=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>
+            </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=Talent's 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 Talent's 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>
    );
 }
@@ -2,7 +2,7 @@ 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/Close';
+import Close from '@material-ui/icons/Close';
 import Typography from '@material-ui/core/Typography';

 const styles = theme => ({
@@ -12,28 +12,33 @@ const styles = theme => ({
    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)',
+    // 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: '64px',
-    background: theme.palette.background.main,
+    height: '100px',
+    backgroundColor: '#1E2327',
    position: 'fixed',
    [theme.breakpoints.up('sm')]: {
-      height: '64px'
+      height: '100px'
    }
  },
  icon: {
    fontSize: '3em',
-    textAlign :'right'
+    textAlign :'right',
+    top:'30px',
+    right:'30px',
+    color:'#fff',
+    margin:'20px'
  },
  title: { 
    color: theme.palette.primary.dark,
  },
  content: {
-    top: '64px',
+    top: '100px',
    width: '100%',
    minHeight: '1000px',
    display: 'flex',
@@ -44,7 +49,7 @@ const styles = theme => ({
    backgroundColor: '#1E2327',
  },
  contentFixed: {
-     height: 'calc(100vh - 64px)',
+     height: 'calc(100vh - 100px)',
    backgroundColor: '#1E2327',
  },
  back: {
@@ -56,7 +61,7 @@ const styles = theme => ({
    borderRadius: '50%',
    position: 'absolute',
    right: theme.spacing(1),
-    backgroundColor: '#fff'
+    backgroundColor: '#34383C'
  },
  player: {
    background:'#1E2327'
@@ -78,7 +83,7 @@ function LayoutBack(props) {
            className={classes.back}
            focusVisibleClassName={classes.focusVisible}
            onClick={() => Router.push(props.url)}>
-            <ArrowLeft color="#fff" classes={{ root: classes.icon }}></ArrowLeft>
+            <Close color="#fff" classes={{ root: classes.icon }}></Close>
          </ButtonBase>
          <Typography
            component="h1"
@@ -23,6 +23,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',
@@ -116,9 +120,9 @@ function LayoutOffre(props) {
              variant="contained"
              className={classes.button + ' cypButtonApply'}
              classes={{ root: classes.rootButton}}
-              onClick={() => Router.push(`/Reponse?adId=${offreId}`)}
+              
            >
-              Postuler
+              <a href={`/Reponse?adId=${offreId}`} className={classes.lien }>Postuler</a>
            </Button>
            <SocialShare url={socialShareUrl} />

@@ -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',
@@ -14,14 +15,27 @@ const styles = theme => ({
    padding: theme.spacing(6,0),
    color: theme.palette.primary.main,
  },
+  root: {
+    top:"200px",
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(2),
+    },
+  },
 })

 class LoaderVideo extends React.Component {
  render() {
    const { classes } = 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 + ' ' + 'alert alert-info'}><CircularProgress color="primary" />Veuillez ne pas quitter la page.<br/> Le temps de chargement peut varier de quelques secondes à plusieurs minutes en fonction de la qualité de votre connexion internet.<br/></div>
+        <div >
+        <LinearProgress />
+        <LinearProgress color="secondary" />
+        </div>
+      </div>
+      )

  }
 }
@@ -12,6 +12,7 @@ axios.interceptors.response.use(response => {
 }, error => {
    if (error.response.status === 401) {
        localStorage.setItem('ttJWT', '');
+        console.log("REPONSE REDIRECT LOGIN")
        Router.push("/Login");
    }
    return error;
@@ -41,20 +41,21 @@ 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',
+        // 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.3.4',
        adListDefaultUrl: '/statique/images/default/default_picture_company.svg',
        cachedMediaUrl: '/media/cache/profile_thumb/uploads/img/',
        postedContentUrl: '/uploads/img/',
@@ -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",
@@ -55,7 +56,10 @@
    "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-sticky-box": "^0.9.3",
    "react-swipeable-views": "^0.13.3",
    "reactstrap": "^6.4.0",
@@ -70,6 +74,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"
  },
@@ -127,7 +127,8 @@ function mapStateToProps(state, ownProps) {
 }

 ConfirmAccount.getInitialProps = function (context) {
-    const { token, email } = context.query
+    const { token, email, url } = context.query
+    localStorage.setItem('loginRedirect', url)
    context.store.dispatch(requestConfirmationAccountRequest({ 'confirmationToken': token, 'email': email }))
    return email;
 }
@@ -63,7 +63,10 @@ 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();
@@ -0,0 +1,252 @@
+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: {},
+        loading: false,
+        tabIndex: 0,
+        openSnack: false
+    };
+
+    static getInitialProps({ query }) {
+        const { error, inscription } = query
+        let err = null;
+        if (!!error)
+            err = { message: error };
+        return { errors: err, openSnack: !!error, inscription };
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        
+    }
+
+    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, errors, loading, openSnack } = this.state;
+
+        return (
+            <Layout>
+                <Head>
+                    <title key="title">Login</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} />
+                                
+                            
+                        </Fragment>
+                    )}
+                </div>
+                <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
+    };
+}
+
+
+
+export default withStyles(styles)(connect(mapStateToProps, {   })(LoginPage));
@@ -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';
@@ -149,7 +149,8 @@ class LoginPage extends React.Component {
        errors: {},
        loading: false,
        tabIndex: 0,
-        openSnack: false
+        openSnack: false,
+        redirection:""
    };

    static getInitialProps({ query }) {
@@ -175,8 +176,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')
        })
    }

@@ -312,7 +316,9 @@ class LoginPage extends React.Component {
                                            >
                                                <Link href={"/ResetPassword"} className={classes.link}>
                                                    Mot de passe oublié ?
-                                        </Link>
+                                                    
+                                                </Link>
+                                                
                                            </Typography>


@@ -332,9 +338,9 @@ class LoginPage extends React.Component {
                                                align="center"
                                                className={classes.formText}
                                            >Je ne possède pas de compte Talents Tube ?
-                                        <span onClick={() => this.handleChangeIndex(1)} className={classes.formLink}>
-                                                    S'inscrire
-                                        </span>
+                                        
+                                                    <Link href="/Inscription">S'inscrire</Link>
+                                        
                                            </Typography>

                                        </div>
@@ -348,9 +354,9 @@ class LoginPage extends React.Component {
                                    </div>

                                </TabContainer>
-                                <TabContainer dir={'x'}>
+                                {/* <TabContainer dir={'x'}>
                                    <Register linkedInAuth={this.linkedInAuth} facebookAuth={this.facebookAuth} />
-                                </TabContainer>
+                                </TabContainer> */}
                            </SwipeableViews>
                        </Fragment>
                    )}
@@ -363,6 +369,7 @@ class LoginPage extends React.Component {
 }

 function mapStateToProps(state, ownProps) {
+    
    return {
        loading: !!state.user.loading,
        errors: state.user.errors || ownProps.errors
@@ -19,6 +19,8 @@ const { publicRuntimeConfig } = getConfig()
 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);
    }

@@ -92,7 +92,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;
@@ -217,11 +217,15 @@ class Reponse extends React.Component {
  };

  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})
@@ -427,7 +431,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 +442,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,
@@ -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" />
@@ -34,7 +34,7 @@ class MyDocument extends Document {

          <link href="https://fonts.googleapis.com/css?family=Dosis:600|Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">
          </link>
-
+          <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script>
          <script type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          {/* <script
@@ -46,8 +46,10 @@ export function* postAdAnswerRequestSaga(action) {
  } catch (err) {
    if (_.includes(err, "401")) {
      console.error("401")
-      console.error(window.location)
-      localStorage.setItem('loginRedirect', window.location)
+      console.error(window.location.pathname)
+      console.log("ERREUR 401")
+      localStorage.setItem('loginRedirect', window.location.pathname)
+      console.log("ERREUR 401")
      Router.push("/Login");
    }
    yield put(postAdAnswerRequestFailure(err.response));
@@ -67,7 +69,8 @@ export function* uploadMediaSaga(action) {
  } catch (err) {
    if (_.includes(err, "401") || err.response.status === 401) {
    
-      localStorage.setItem('loginRedirect', window.location)
+      localStorage.setItem('loginRedirect', window.location.pathname)
+      console.log("ERREUR 401")
      Router.push("/Login");
    }
    yield put(uploadMediaFailure(err.response));
@@ -87,7 +90,8 @@ export function* uploadMediaPresSaga(action) {
  } catch (err) {
    if (_.includes(err, "401") || err.response.status === 401) {
    
-      localStorage.setItem('loginRedirect', window.location)
+      localStorage.setItem('loginRedirect', window.location.pathname)
+      console.log("ERREUR 401")
      Router.push("/Login");
    }
    yield put(uploadMediaPresFailure(err.response));
@@ -107,7 +111,8 @@ export function* uploadMediaCvSaga(action) {
  } catch (err) {
    if (_.includes(err, "401") || err.response.status === 401) {
    
-      localStorage.setItem('loginRedirect', window.location)
+      localStorage.setItem('loginRedirect', window.location.pathname)
+      console.log("ERREUR 401")
      Router.push("/Login");
    }
    yield put(uploadMediaCvFailure(err.response));
@@ -126,6 +131,7 @@ export function* fetchJobsAnsweredRequestSaga(action) {
  } catch (err) {
    if (_.includes(err, "401") || err.response.status === 401) {
      localStorage.setItem('loginRedirect', "/Candidatures")
+      console.log("ERREUR 401")
      Router.push("/Login");

    }
@@ -149,6 +155,7 @@ export function* fetchAnswerRequestSaga(action) {

    if (_.includes(err, "401") || err.response.status === 401) {
      localStorage.setItem('loginRedirect', "/Candidatures")
+      console.log("ERREUR 401")
      Router.push("/Login");
    }
    yield put(fetchAnswerFailure(err.response));
@@ -171,7 +178,8 @@ export function* postAnswerMessageSaga(action) {

  } catch (err) {
    if (_.includes(err, "401")) {
-      localStorage.setItem('loginRedirect', window.location)
+      localStorage.setItem('loginRedirect', window.location.pathname)
+      console.log("ERREUR 401")
      Router.push("/Login");
    }
    yield put(postMessageAnswerFailure(err.response));
@@ -191,6 +199,7 @@ export function* fetchAnswerMessagesRequestSaga(action) {
  } catch (err) {
    if (_.includes(err, "401")) {
      localStorage.setItem('loginRedirect', "/Candidatures")
+      console.log("ERREUR 401")
      Router.push("/Login");
    }
    yield put(fetchAnswerMessagesFailure(err.response));
@@ -33,16 +33,25 @@ export function* requestLoginSaga(action) {
      yield put(userLoggedIn());
      yield put(fetchCurrentUserRequest());
      let url = localStorage.getItem('loginRedirect');
+      console.log("requestLoginSaga1!!!!!!!!!!!!!! "+url)
+      console.log(url)
      if (!!!url)
        url = "/"
+      console.log(url)
      Router.push(url);
-      localStorage.setItem('loginRedirect', '/');
-    } else
-      throw new Error("Mauvais identifiants.")
+      // <Redirect to={url}/>
+      console.log("requestLoginSaga2!!!!!!!!!!!!!! "+url)
+      //localStorage.setItem('loginRedirect', '/');
+    } else{
+      throw new Error("Mauvais identifiants.")  
+      console.log("requestLoginSaga!!!!!!!!!!!!!! Mauvais identifiants.")
+    }
+      

  } catch (error) {
    setAuthorizationHeader();
-    yield put(requestLoginFailure({ message: "Mauvais identifiants." }));
+    console.log("requestLoginSaga!!!!!!!!!!!!!! Mauvais identifiants.")
+    yield put(requestLoginFailure({ message: "Mauvais identifiants" }));
  }
 }

@@ -124,15 +133,18 @@ export function* requestRegisterSaga(action) {
  try {
    //console.log('function* requestRegisterSaga')
    const res = yield call(api.user.register, action.payload);
-
+    console.log("requestRegisterSaga");
+    console.log(res);
+    console.log(action);
    if (res.data.status === 'success') {

      yield put(registerUserSuccess(res));
+      
      yield put(sendConfirmationEmailRequest(res));
      Router.push(`/VerifyEmail/${action.payload.email}`);

    } else
-      throw new Error("L'inscription à échouée. Merci de contacter contact@talentstube.com")
+      throw new Error("L'inscription a échouée. Merci de contacter contact@talentstube.com")

  } catch (err) {
    console.error(err)
@@ -260,7 +272,8 @@ export function* requestUpdateUserRequestSaga(action) {
  } catch (err) {
    
    if (_.includes(err, "401") || (!!err.response && err.response.status === 401)) {
-      localStorage.setItem('loginRedirect', window.location)
+      localStorage.setItem('loginRedirect', window.location.pathname)
+      console.log("ERREUR 401")
      Router.push("/Login");
    }
    yield put(updateUserPictureFailure(err.response));
@@ -175,9 +175,9 @@ app.prepare()
      app.render(req, res, actualPage, queryParams)
    })

-    server.get('/ConfirmAccount/:token/:email', (req, res) => {
+    server.get('/ConfirmAccount/:token/:email/:url', (req, res) => {
      const actualPage = '/ConfirmAccount'
-      const queryParams = { token: req.params.token, email: req.params.email }
+      const queryParams = { token: req.params.token, email: req.params.email, url: req.params.url }
      app.render(req, res, actualPage, queryParams)
    })

@@ -206,9 +206,13 @@ app.prepare()
      const email = req.body.email
      const nom = req.body.lastname
      const prenom = req.body.firstname
-
-      const tokenUrl = `${process.env.FRONT_SERVER}/ConfirmAccount/${token}/${email}`
-
+      console.log("prenom "+prenom)
+      const url = req.body.adId
+      console.log("Envoi d'email "+url)
+      //TODO Ajouter le contexte de l'annonce 
+      //Envoyer URL
+      const tokenUrl = `${process.env.FRONT_SERVER}/ConfirmAccount/${token}/${email}/${url}`
+      console.log("tokenUrl "+tokenUrl)
      mailer.sendConfirmationEmail(nom, prenom, tokenUrl, email);

      res.json({ status: 'success' });
Author	SHA1	Message	Date
llaniau	67b3c97806	no follow	2020-12-13 23:47:51 +01:00
llaniau	ee636e27ff	US 238 : Mise en place de la version	2020-12-11 16:14:48 +01:00
llaniau	ff5055c411	US 435 et 355 sur le module webRTC new look	2020-12-11 15:34:22 +01:00
llaniau	d5b1fcd74a	Reglage mise en page Offre emploi	2020-12-10 17:31:58 +01:00
llaniau	5ace82986f	US 443: Stocker id annonce dans le mail	2020-12-10 16:57:22 +01:00
llaniau	c989b6ddfe	Point mise en page Corentin	2020-12-10 16:52:29 +01:00
llaniau	f3f94e9b51	Navigation intelligente lors du login	2020-12-09 14:08:35 +01:00