pass through logout callback to GUI

src/components/navigation/www/accountnav.jsx

@@ -7,7 +7,7 @@ const React = require('react');
 const Avatar = require('../../avatar/avatar.jsx');
 const Dropdown = require('../../dropdown/dropdown.jsx');
 
-require('./navigation.scss');
+require('./accountnav.scss');
 
 const AccountNav = ({
     classroomId,
@@ -21,7 +21,7 @@ const AccountNav = ({
     onClickLogout,
     onClose
 }) => (
-    <React.Fragment>
+    <div id="account-nav">
         <a
             className={classNames({
                 'user-info': true,
@@ -82,7 +82,7 @@ const AccountNav = ({
                 </a>
             </li>
         </Dropdown>
-    </React.Fragment>
+    </div>
 );
 
 AccountNav.propTypes = {

src/components/navigation/www/accountnav.scss

@@ -0,0 +1,91 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+#account-nav {
+    .user-info {
+        display: inline-block;
+        padding: 14px 15px 4px 15px;
+        max-width: 260px;
+        height: 33px;
+        overflow: hidden;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: $type-white;
+        font-size: .8125rem;
+        font-weight: normal;
+
+        .avatar {
+            margin-right: 10px;
+            border-radius: 3px;
+            width: 24px;
+            height: 24px;
+            vertical-align: middle;
+        }
+
+        &:hover {
+            background-color: $active-gray;
+        }
+
+        &.open {
+            background-color: $active-gray;
+        }
+
+        &:after {
+            display: inline-block;
+            margin-left: 8px;
+
+            background-image: url("/images/dropdown.png");
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 50%;
+            width: 20px;
+            height: 20px;
+            vertical-align: middle;
+            content: " ";
+        }
+    }
+
+    .dropdown {
+        top: 50px;
+        padding: 0;
+        padding-top: 5px;
+        width: 100%;
+        box-sizing: border-box;
+    }
+}
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    #account-nav {
+        .user-info {
+            .avatar {
+                margin-right: 0;
+            }
+
+            &:after {
+                display: none;
+            }
+        }
+    }
+}
+
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    #account-nav {
+        .user-info {
+            .avatar {
+                margin-right: 0;
+            }
+
+            &:after {
+                display: none;
+            }
+        }
+    }
+}
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+}

src/components/navigation/www/navigation.jsx

@@ -113,6 +113,8 @@ class Navigation extends React.Component {
     handleCloseLogin () {
         this.setState({loginOpen: false});
     }
+    // NOTE: TODO: continue here. Should move these two functions up to a redux level,
+    // maybe into session...
     handleLogIn (formData, callback) {
         this.setState({loginError: null});
         formData.useMessages = true;

src/components/navigation/www/navigation.scss

@@ -182,55 +182,6 @@
             }
         }
     }
-
-    .account-nav {
-        .user-info {
-            padding-top: 14px;
-            max-width: 260px;
-        }
-
-        > a {
-            display: inline-block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            font-size: .8125rem;
-            font-weight: normal;
-
-            .avatar {
-                margin-right: 10px;
-                border-radius: 3px;
-                width: 24px;
-                height: 24px;
-                vertical-align: middle;
-            }
-
-            &.open {
-                background-color: $active-gray;
-            }
-
-            &:after {
-                display: inline-block;
-                margin-left: 8px;
-
-                background-image: url("/images/dropdown.png");
-                background-repeat: no-repeat;
-                background-position: center center;
-                background-size: 50%;
-                width: 20px;
-                height: 20px;
-                vertical-align: middle;
-                content: " ";
-            }
-        }
-
-        .dropdown {
-            top: 50px;
-            padding: 0;
-            padding-top: 5px;
-            width: 100%;
-            box-sizing: border-box;
-        }
-    }
 }
 
 //4 columns
@@ -245,16 +196,6 @@
 
             &.account-nav {
                 margin-left: 0;
-
-                > a {
-                    .avatar {
-                        margin-right: 0;
-                    }
-
-                    &:after {
-                        display: none;
-                    }
-                }
             }
         }
 
@@ -283,16 +224,6 @@
 
             &.account-nav {
                 margin-left: 0;
-
-                > a {
-                    .avatar {
-                        margin-right: 0;
-                    }
-
-                    &:after {
-                        display: none;
-                    }
-                }
             }
         }
 

src/views/preview/preview.jsx

@@ -8,6 +8,7 @@ const connect = require('react-redux').connect;
 const injectIntl = require('react-intl').injectIntl;
 const parser = require('scratch-parser');
 const Page = require('../../components/page/www/page.jsx');
+const api = require('../../lib/api');
 const render = require('../../lib/render.jsx');
 const storage = require('../../lib/storage.js').default;
 const log = require('../../lib/log');
@@ -30,6 +31,8 @@ class Preview extends React.Component {
             'handleToggleStudio',
             'handleFavoriteToggle',
             'handleLoadMore',
+            // temporary, to pass to GUI. Remove when nav bar components are shared between www and gui.
+            'handleLogout',
             'handleLoveToggle',
             'handlePermissions',
             'handlePopState',
@@ -141,6 +144,21 @@ class Preview extends React.Component {
                 });
             });
     }
+    // Temporarily duplicated this function from navigation.jsx here.
+    // Should move handling of login/logout into session.js, and handle them
+    // from here as well as navigation.jsx.
+    handleLogout (e) {
+        e.preventDefault();
+        api({
+            host: '',
+            method: 'post',
+            uri: '/accounts/logout/',
+            useCsrf: true
+        }, err => {
+            if (err) log.error(err);
+            window.location = '/';
+        });
+    }
     handleReportClick () {
         this.setState({reportOpen: true});
     }
@@ -315,7 +333,6 @@ class Preview extends React.Component {
                         replies={this.props.replies}
                         reportOpen={this.state.reportOpen}
                         studios={this.props.studios}
-                        user={this.props.user}
                         userOwnsProject={this.userOwnsProject()}
                         onAddToStudioClicked={this.handleAddToStudioClick}
                         onAddToStudioClosed={this.handleAddToStudioClose}
@@ -339,6 +356,7 @@ class Preview extends React.Component {
                     className="gui"
                     projectHost={this.props.projectHost}
                     projectId={this.state.projectId}
+                    onClickLogout={this.handleLogout}
                 />
         );
     }