Merge pull request #45 from rschamp/feature/join

Implement join flow

server/proxies.json

@@ -2,11 +2,12 @@
     {
         "root": "/",
         "paths": [
-            "/accounts/",
             "/accounts/",
             "/csrf_token/",
+            "/fragment/",
             "/get_image/",
-            "/session/"
+            "/session/",
+            "/static/"
         ]
     }
 ]

src/_mixins.scss

@@ -0,0 +1,19 @@
+@mixin modal-iframe($iframe-width, $iframe-height, $padding: 0) {
+    &.ReactModal__Content {
+        top: 50%;
+        right: auto;
+        bottom: auto;
+        left: 50%;
+        margin-top: -($iframe-height + $padding * 2)/2;
+        margin-left: -($iframe-width + $padding * 2)/2;
+        padding: $padding;
+        width: $iframe-width;
+        height: $iframe-height;
+
+        iframe {
+            border: 0;
+            width: $iframe-width;
+            height: $iframe-height;
+        }
+    }
+}

src/components/intro/intro.scss

@@ -1,4 +1,5 @@
 @import "../../colors";
+@import "../../mixins";
 
 .intro {
     display: flex;
@@ -224,22 +225,5 @@
 }
 
 .video-modal {
-    $video-width: 570px;
-    $video-height: 357px;
-    $padding: 15px;
-    top: 50%;
-    right: auto;
-    bottom: auto;
-    left: 50%;
-    margin-top: -($video-height + $padding * 2)/2;
-    margin-left: -($video-width + $padding * 2)/2;
-    padding: $padding;
-    width: $video-width;
-    height: $video-height;
-
-    iframe {
-        border: 0;
-        width: $video-width;
-        height: $video-height;
-    }
+    @include modal-iframe(570px, 357px, 15px);
 }

src/components/navigation/navigation.jsx

@@ -11,6 +11,7 @@ var Avatar = require('../avatar/avatar.jsx');
 var Dropdown = require('./dropdown.jsx');
 var Input = require('../forms/input.jsx');
 var Login = require('../login/login.jsx');
+var Registration = require('../registration/registration.jsx');
 
 require('./navigation.scss');
 
@@ -22,9 +23,10 @@ var Navigation = React.createClass({
     ],
     getInitialState: function () {
         return {
+            'accountNavOpen': false,
             'loginOpen': false,
             'loginError': null,
-            'accountNavOpen': false
+            'registrationOpen': false
         };
     },
     componentDidUpdate: function (prevProps, prevState) {
@@ -39,6 +41,10 @@ var Navigation = React.createClass({
         if (!this.state.session.user) return;
         return '/users/' + this.state.session.user.username + '/';
     },
+    handleJoinClick: function (e) {
+        e.preventDefault();
+        this.setState({'registrationOpen': true});
+    },
     handleLoginClick: function (e) {
         e.preventDefault();
         this.setState({'loginOpen': !this.state.loginOpen});
@@ -87,6 +93,13 @@ var Navigation = React.createClass({
     closeAccountNav: function () {
         this.setState({'accountNavOpen': false});
     },
+    closeRegistration: function () {
+        this.setState({'registrationOpen': false});
+    },
+    completeRegistration: function () {
+        window.refreshSession();
+        this.closeRegistration();
+    },
     render: function () {
         var classes = classNames({
             'inner': true,
@@ -136,7 +149,14 @@ var Navigation = React.createClass({
                             </Dropdown>
                         </li>
                     ] : [
-                        <li className="link right join" key="join"><a href="/join">Join Scratch</a></li>,
+                        <li className="link right join" key="join">
+                            <a href="#" onClick={this.handleJoinClick}>Join Scratch</a>
+                        </li>,
+                        <Registration
+                                key="registration"
+                                isOpen={this.state.registrationOpen}
+                                onRequestClose={this.closeRegistration}
+                                onRegistrationDone={this.completeRegistration} />,
                         <li className="link right login-item" key="login">
                             <a
                                 href="#"

src/components/registration/registration.jsx

@@ -0,0 +1,36 @@
+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 () {
+        return (
+            <Modal
+                    isOpen={this.props.isOpen}
+                    onRequestClose={this.props.onRequestClose}
+                    className="registration">
+                <iframe src="/accounts/standalone-registration/" />
+            </Modal>
+        );
+    }
+});
+
+module.exports = Registration;

src/components/registration/registration.scss

@@ -0,0 +1,6 @@
+@import "../../mixins";
+
+.registration {
+    @include modal-iframe(610px, 438px);
+    overflow: hidden;
+}