diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js index b53badf99..03ab61c76 100644 --- a/client/coral-framework/actions/auth.js +++ b/client/coral-framework/actions/auth.js @@ -150,10 +150,12 @@ export const fetchSignIn = (formData) => (dispatch) => { const signInFacebookRequest = () => ({ type: actions.FETCH_SIGNIN_FACEBOOK_REQUEST }); + const signInFacebookSuccess = (user) => ({ type: actions.FETCH_SIGNIN_FACEBOOK_SUCCESS, user }); + const signInFacebookFailure = (error) => ({ type: actions.FETCH_SIGNIN_FACEBOOK_FAILURE, error @@ -191,8 +193,8 @@ export const facebookCallback = (err, data) => (dispatch) => { return; } try { - const user = JSON.parse(data); - dispatch(signInFacebookSuccess(user)); + dispatch(handleAuthToken(data.token)); + dispatch(signInFacebookSuccess(data.user)); dispatch(hideSignInDialog()); dispatch(showCreateUsernameDialog()); dispatch(hideSignInDialog()); diff --git a/client/coral-framework/helpers/storage.js b/client/coral-framework/helpers/storage.js index fa20fa168..ec83c3fb3 100644 --- a/client/coral-framework/helpers/storage.js +++ b/client/coral-framework/helpers/storage.js @@ -86,7 +86,6 @@ export function clear() { } } -// Enable this to debug WEB Storage events // window.addEventListener('storage', function(e) { // const msg = `${e.key} " was changed in page ${e.url} from ${e.oldValue} to ${e.newValue}`; // console.log(msg); diff --git a/client/coral-sign-in/containers/SignInContainer.js b/client/coral-sign-in/containers/SignInContainer.js index d2095b527..de1d2086e 100644 --- a/client/coral-sign-in/containers/SignInContainer.js +++ b/client/coral-sign-in/containers/SignInContainer.js @@ -39,24 +39,26 @@ class SignInContainer extends Component { constructor(props) { super(props); this.state = this.initialState; + this.addError = this.addError.bind(this); + this.handleAuth = this.handleAuth.bind(this); + this.handleSignUp = this.handleSignUp.bind(this); + this.handleSignIn = this.handleSignIn.bind(this); this.handleChange = this.handleChange.bind(this); this.handleChangeEmail = this.handleChangeEmail.bind(this); this.handleResendVerification = this.handleResendVerification.bind(this); - this.handleSignUp = this.handleSignUp.bind(this); - this.handleSignIn = this.handleSignIn.bind(this); - this.addError = this.addError.bind(this); } static propTypes = { requireEmailConfirmation: PropTypes.bool.isRequired - } + }; - componentWillMount () { + componentWillMount() { this.props.checkLogin(); } componentDidMount() { - window.authCallback = this.props.facebookCallback; + window.addEventListener('storage', this.handleAuth); + const {formData} = this.state; const errors = Object.keys(formData).reduce((map, prop) => { map[prop] = lang.t('signIn.requiredField'); @@ -65,17 +67,36 @@ class SignInContainer extends Component { this.setState({errors}); } + componentWillUnmount() { + window.removeEventListener('storage', this.handleAuth); + } + + handleAuth(e) { + + // Listening to FB changes + // FB localStorage key is 'auth' + const authCallback = this.props.facebookCallback; + + if (e.key === 'auth') { + const {err, data} = JSON.parse(e.newValue); + authCallback(err, data); + } + } + handleChange(e) { const {name, value} = e.target; - this.setState((state) => ({ - ...state, - formData: { - ...state.formData, - [name]: value + this.setState( + (state) => ({ + ...state, + formData: { + ...state.formData, + [name]: value + } + }), + () => { + this.validation(name, value); } - }), () => { - this.validation(name, value); - }); + ); } handleChangeEmail(e) { @@ -85,7 +106,11 @@ class SignInContainer extends Component { handleResendVerification(e) { e.preventDefault(); - this.props.requestConfirmEmail(this.state.emailToBeResent, pym.parentUrl || location.href) + this.props + .requestConfirmEmail( + this.state.emailToBeResent, + pym.parentUrl || location.href + ) .then(() => { setTimeout(() => { @@ -110,12 +135,15 @@ class SignInContainer extends Component { if (!value.length) { addError(name, lang.t('signIn.requiredField')); - } else if (name === 'confirmPassword' && formData.confirmPassword !== formData.password) { + } else if ( + name === 'confirmPassword' && + formData.confirmPassword !== formData.password + ) { addError('confirmPassword', lang.t('signIn.passwordsDontMatch')); } else if (!validate[name](value)) { addError(name, errorMsj[name]); } else { - const { [name]: prop, ...errors } = this.state.errors; // eslint-disable-line + const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line // Removes Error this.setState((state) => ({...state, errors})); } @@ -181,14 +209,12 @@ const mapDispatchToProps = (dispatch) => ({ fetchSignInFacebook: () => dispatch(fetchSignInFacebook()), fetchSignUpFacebook: () => dispatch(fetchSignUpFacebook()), fetchForgotPassword: (formData) => dispatch(fetchForgotPassword(formData)), - requestConfirmEmail: (email, url) => dispatch(requestConfirmEmail(email, url)), + requestConfirmEmail: (email, url) => + dispatch(requestConfirmEmail(email, url)), changeView: (view) => dispatch(changeView(view)), handleClose: () => dispatch(hideSignInDialog()), invalidForm: (error) => dispatch(invalidForm(error)), validForm: () => dispatch(validForm()) }); -export default connect( - mapStateToProps, - mapDispatchToProps -)(SignInContainer); +export default connect(mapStateToProps, mapDispatchToProps)(SignInContainer); diff --git a/views/auth-callback.ejs b/views/auth-callback.ejs index a97884ae2..22103226d 100644 --- a/views/auth-callback.ejs +++ b/views/auth-callback.ejs @@ -5,7 +5,7 @@ <%/* set the auth data in localStorage, this will ensure that only javascript on the same domain can access the data, they can listen for updates by attaching to localStorage event changes */%> - localStorage.setItem('auth', <%- auth %>); + localStorage.setItem('auth', '<%- auth %>'); setTimeout(function() { window.close(); }, 50);