var React = require('react');
var Modal = require('../modal/modal.jsx');

require('./registration.scss');

Modal.setAppElement(document.getElementById('view'));

var Registration = React.createClass({
    propTypes: {
        isOpen: React.PropTypes.bool,
        onRegistrationDone: React.PropTypes.func,
        onRequestClose: React.PropTypes.func
    },
    onMessage: function (e) {
        if (e.origin != window.location.origin) return;
        if (e.data == 'registration-done') this.props.onRegistrationDone();
    },
    componentDidMount: function () {
        window.addEventListener('message', this.onMessage);
    },
    componentWillUnmount: function () {
        window.removeEventListener('message', this.onMessage);
    },
    render: function () {
        var frameSettings = {
            width: 610,
            height: 438
        };
        return (
            <Modal
                    isOpen={this.props.isOpen}
                    onRequestClose={this.props.onRequestClose}
                    className="registration"
                    frameSettings={frameSettings}>
                <iframe src="/accounts/standalone-registration/" {...frameSettings} />
            </Modal>
        );
    }
});

module.exports = Registration;

var React = require('react');
var Modal = require('../modal/modal.jsx');

require('./registration.scss');

Modal.setAppElement(document.getElementById('view'));

var Registration = React.createClass({
    propTypes: {
        isOpen: React.PropTypes.bool,
        onRegistrationDone: React.PropTypes.func,
        onRequestClose: React.PropTypes.func
    },
    onMessage: function (e) {
        if (e.origin != window.location.origin) return;
        if (e.source != this.refs.registrationIframe.contentWindow) return;
        if (e.data == 'registration-done') this.props.onRegistrationDone();
        if (e.data == 'registration-relaunch') {
            this.refs.registrationIframe.contentWindow.location.reload();
        }
    },
    toggleMessageListener: function (present) {
        if (present) {
            window.addEventListener('message', this.onMessage);
        } else {
            window.removeEventListener('message', this.onMessage);
        }
    },
    componentDidMount: function () {
        if (this.props.isOpen) this.toggleMessageListener(true);
    },
    componentDidUpdate: function (prevProps) {
        this.toggleMessageListener(this.props.isOpen && !prevProps.isOpen);
    },
    componentWillUnmount: function () {
        this.toggleMessageListener(false);
    },
    render: function () {
        var frameSettings = {
            width: 610,
            height: 438
        };
        return (
            <Modal
                    isOpen={this.props.isOpen}
                    onRequestClose={this.props.onRequestClose}
                    className="registration"
                    frameSettings={frameSettings}>
                <iframe ref="registrationIframe" src="/accounts/standalone-registration/" {...frameSettings} />
            </Modal>
        );
    }
});

module.exports = Registration;

Handle relaunch requests from the iframe
Handle relaunch requests from the iframe

Only attach the message listener when the modal is displaying. This prevents multiple listeners being set up by multiple registration components on the page.

Also, scope the `onMessage` handler to that component's iframe, so that we don't respond to other component's messages.
