Merge branch 'master' of https://github.com/LLK/scratch-www into hotfix/conference-livestream

* 'master' of https://github.com/LLK/scratch-www:
  Only redirect approved educators to My Classes
  Lint
  Add "Request Account" button to Educators landing
  Add `align` prop to `SubNavigation` component

src/components/subnavigation/subnavigation.jsx

@@ -9,10 +9,21 @@ require('./subnavigation.scss');
  */
 var SubNavigation = React.createClass({
     type: 'SubNavigation',
+    getDefaultProps: function () {
+        return {
+            align: 'middle'
+        };
+    },
     render: function () {
         var classes = classNames(
-            'sub-nav',
+            [
-            this.props.className
+                'sub-nav',
+                this.props.className
+            ],
+            {
+                'sub-nav-align-left': this.props.align === 'left',
+                'sub-nav-align-right': this.props.align === 'right'
+            }
         );
         return (
             <div className={classes}>

src/components/subnavigation/subnavigation.scss

@@ -53,4 +53,18 @@
             }
         }
     }
+
+    &.sub-nav-align-left {
+        justify-content: flex-start;
+
+        li {
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+
+    &.sub-nav-align-right {
+        justify-content: flex-end;
+    }
 }

src/views/teachers/landing/l10n.json

@@ -19,5 +19,5 @@
     "teacherlanding.creativeComputing": "The <a href=\"http://scratched.gse.harvard.edu/guide/\">Creative Computing Curriculum Guide</a> provides plans, activities, and strategies for introducing creative computing.",
     "teacherlanding.accountsTitle": "Teacher Accounts in Scratch",
     "teacherlanding.accountsDescription": "As an educator, you can request a Scratch Teacher Account, which makes it easier to create accounts for groups of students and to manage your students’ projects and comments. To learn more, see the <a href=\"/educators/faq\">Teacher Account FAQ page</a>.",
-    "teacherlanding.accountsButton": "Coming Soon"
+    "teacherlanding.requestAccount": "Request Account"
 }

src/views/teachers/landing/landing.jsx

@@ -109,7 +109,11 @@ var Landing = injectIntl(React.createClass({
                             <p>
                                 <FormattedHTMLMessage id="teacherlanding.accountsDescription" />
                             </p>
-                            <div className="coming-soon"><FormattedMessage id="teacherlanding.accountsButton" /></div>
+                            <SubNavigation className="teacher-account-buttons" align="left">
+                                <a href="/educators/register">
+                                    <li><FormattedMessage id="teacherlanding.requestAccount" /></li>
+                                </a>
+                            </SubNavigation>
                         </div>
                         <img src="/images/teachers/teacher-account.png" alt="teacher account" id="teacher-icon"/>
                     </div>

src/views/teachers/landing/landing.scss

@@ -220,6 +220,15 @@ $story-width: $cols3;
             color: $ui-white;
         }
 
+        .teacher-account-buttons {
+            li {
+                border: 2px solid $ui-white;
+                padding: 16px;
+                font-size: 16px;
+                font-weight: 500;
+            }
+        }
+
         #left {
             width: $cols4;
             max-width: $cols4;
@@ -229,24 +238,6 @@ $story-width: $cols3;
             p {
                 margin-bottom: 3.5rem;
             }
-
-            .coming-soon {
-                border: 2px solid $ui-white;
-                border-radius: 50px;
-                box-shadow: none;
-                background-color: transparent;
-                padding: 16px 16px;
-                width: $cols5 / 2;
-                text-align: center;
-                color: $ui-white;
-                font-size: 16px;
-                font-weight: 500;
-                box-sizing: border-box;
-
-                &:hover {
-                    box-shadow: none;
-                }
-            }
         }
 
         img {

src/views/teacherwaitingroom/teacherwaitingroom.jsx

@@ -11,27 +11,28 @@ require('./teacherwaitingroom.scss');
 var TeacherWaitingRoom = React.createClass({
     displayName: 'TeacherWaitingRoom',
     componentWillReceiveProps: function (nextProps) {
-        if (nextProps.session.permissions.educator && nextProps.session.permissions.social) {
+        if (nextProps.approved) {
             window.location.href = '/educators/classes/';
         }
     },
     render: function () {
-        var permissions = this.props.session.permissions || {};
-        var user = this.props.session.user || {};
         return (
             <Deck className={classNames('teacher-waitingroom', this.props.className)}>
-                <TeacherApprovalStep confirmed={permissions.social}
+                <TeacherApprovalStep {... this.props} />
-                                     invited={permissions.educator_invitee}
-                                     educator={permissions.educator}
-                                     email={user.email} />
             </Deck>
         );
     }
 });
 
 var mapStateToProps = function (state) {
+    var permissions = state.session.session.permissions || {};
+    var user = state.session.session.user || {};
     return {
-        session: state.session.session
+        approved: permissions && permissions.educator && !permissions.educator_invitee && permissions.social,
+        confirmed: permissions && permissions.social,
+        invited: permissions && permissions.educator_invitee,
+        educator: permissions && permissions.educator,
+        email: user && user.email
     };
 };