diff --git a/src/components/navigation/www/accountnav.jsx b/src/components/navigation/www/accountnav.jsx
new file mode 100644
index 000000000..a0d441626
--- /dev/null
+++ b/src/components/navigation/www/accountnav.jsx
@@ -0,0 +1,101 @@
+const classNames = require('classnames');
+const FormattedMessage = require('react-intl').FormattedMessage;
+const injectIntl = require('react-intl').injectIntl;
+const PropTypes = require('prop-types');
+const React = require('react');
+
+const Avatar = require('../../avatar/avatar.jsx');
+const Dropdown = require('../../dropdown/dropdown.jsx');
+
+require('./accountnav.scss');
+
+const AccountNav = ({
+ classroomId,
+ isEducator,
+ isOpen,
+ isStudent,
+ profileUrl,
+ thumbnailUrl,
+ username,
+ onClick,
+ onClickLogout,
+ onClose
+}) => (
+
+);
+
+AccountNav.propTypes = {
+ classroomId: PropTypes.string,
+ isEducator: PropTypes.bool,
+ isOpen: PropTypes.bool,
+ isStudent: PropTypes.bool,
+ onClick: PropTypes.func,
+ onClickLogout: PropTypes.func,
+ onClose: PropTypes.func,
+ profileUrl: PropTypes.string,
+ thumbnailUrl: PropTypes.string,
+ username: PropTypes.string
+};
+
+module.exports = injectIntl(AccountNav);
diff --git a/src/components/navigation/www/accountnav.scss b/src/components/navigation/www/accountnav.scss
new file mode 100644
index 000000000..ebee28122
--- /dev/null
+++ b/src/components/navigation/www/accountnav.scss
@@ -0,0 +1,98 @@
+@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 {
+ margin-left: 0;
+
+ .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 {
+ margin-left: 0;
+
+ .user-info {
+ .avatar {
+ margin-right: 0;
+ }
+
+ &:after {
+ display: none;
+ }
+ }
+ }
+}
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+ .account-nav {
+ margin-left: 0;
+ }
+}
diff --git a/src/components/navigation/www/navigation.jsx b/src/components/navigation/www/navigation.jsx
index 1a0fedb9f..4eb2c26e9 100644
--- a/src/components/navigation/www/navigation.jsx
+++ b/src/components/navigation/www/navigation.jsx
@@ -11,7 +11,6 @@ const messageCountActions = require('../../../redux/message-count.js');
const sessionActions = require('../../../redux/session.js');
const api = require('../../../lib/api');
-const Avatar = require('../../avatar/avatar.jsx');
const Button = require('../../forms/button.jsx');
const Dropdown = require('../../dropdown/dropdown.jsx');
const Form = require('../../forms/form.jsx');
@@ -21,6 +20,7 @@ const Login = require('../../login/login.jsx');
const Modal = require('../../modal/base/modal.jsx');
const NavigationBox = require('../base/navigation.jsx');
const Registration = require('../../registration/registration.jsx');
+const AccountNav = require('./accountnav.jsx');
require('./navigation.scss');
@@ -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;
@@ -268,66 +270,18 @@ class Navigation extends React.Component {
className="link right account-nav"
key="account-nav"
>
-
-
-
- {this.props.session.session.user.username}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {this.props.permissions.educator ? [
-
-
-
-
-
- ] : []}
- {this.props.permissions.student ? [
-
-
-
-
-
- ] : []}
-
-
-
-
-
-
-
-
-
-
-
+ isStudent={this.props.permissions.student}
+ profileUrl={this.getProfileUrl()}
+ thumbnailUrl={this.props.session.session.user.thumbnailUrl}
+ username={this.props.session.session.user.username}
+ onClick={this.handleAccountNavClick}
+ onClickLogout={this.handleLogOut}
+ onClose={this.handleCloseAccountNav}
+ />
] : [
({
searchTerm: state.navigation
});
-const ConnectedNavigation = connect(mapStateToProps)(Navigation);
+const mapDispatchToProps = () => ({});
+
+const ConnectedNavigation = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(Navigation);
module.exports = injectIntl(ConnectedNavigation);
diff --git a/src/components/navigation/www/navigation.scss b/src/components/navigation/www/navigation.scss
index cfa5a72c1..c736fa1f4 100644
--- a/src/components/navigation/www/navigation.scss
+++ b/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
@@ -242,20 +193,6 @@
&.login-item {
margin-left: 0;
}
-
- &.account-nav {
- margin-left: 0;
-
- > a {
- .avatar {
- margin-right: 0;
- }
-
- &:after {
- display: none;
- }
- }
- }
}
.create,
@@ -280,20 +217,6 @@
&.login-item {
margin-left: 0;
}
-
- &.account-nav {
- margin-left: 0;
-
- > a {
- .avatar {
- margin-right: 0;
- }
-
- &:after {
- display: none;
- }
- }
- }
}
.discuss,
@@ -313,8 +236,7 @@
width: $cols8;
> ul > li {
- &.login-item,
- &.account-nav {
+ &.login-item {
margin-left: 0;
}
}
diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx
index d221c2513..a9bb1275e 100644
--- a/src/views/preview/preview.jsx
+++ b/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}
/>
);
}