add and test logout
This commit is contained in:
parent
515febceb2
commit
64b2ea3da4
8 changed files with 84 additions and 8 deletions
|
@ -85,10 +85,34 @@ function Nav(props) {
|
|||
</li>
|
||||
</ul>
|
||||
<ul className="nav__items-right" title="user-menu">
|
||||
<li className="nav__item">
|
||||
{props.user.authenticated && <p>Hello, {props.user.username}!</p>}
|
||||
{!props.user.authenticated && <p><Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link></p>}
|
||||
</li>
|
||||
{(() => {
|
||||
if (!props.user.authenticated) {
|
||||
return (
|
||||
<li className="nav__item">
|
||||
<p>
|
||||
<Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link>
|
||||
</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<li className="nav__item">
|
||||
<a>Hello, {props.user.username}!</a>
|
||||
<ul className="nav__dropdown">
|
||||
<li>
|
||||
<Link to="/sketches">
|
||||
My Sketches
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a onClick={props.logoutUser} >
|
||||
Logout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
);
|
||||
})()}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
|
@ -105,7 +129,8 @@ Nav.propTypes = {
|
|||
}).isRequired,
|
||||
project: PropTypes.shape({
|
||||
id: PropTypes.string
|
||||
})
|
||||
}),
|
||||
logoutUser: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default Nav;
|
||||
|
|
|
@ -15,6 +15,7 @@ import * as IDEActions from '../actions/ide';
|
|||
import * as ProjectActions from '../actions/project';
|
||||
import * as EditorAccessibilityActions from '../actions/editorAccessibility';
|
||||
import * as PreferencesActions from '../actions/preferences';
|
||||
import * as UserActions from '../../User/actions';
|
||||
import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
|
||||
import SplitPane from 'react-split-pane';
|
||||
import Overlay from '../../App/components/Overlay';
|
||||
|
@ -117,6 +118,7 @@ class IDEView extends React.Component {
|
|||
exportProjectAsZip={this.props.exportProjectAsZip}
|
||||
cloneProject={this.props.cloneProject}
|
||||
project={this.props.project}
|
||||
logoutUser={this.props.logoutUser}
|
||||
/>
|
||||
<Toolbar
|
||||
className="Toolbar"
|
||||
|
@ -366,7 +368,8 @@ IDEView.propTypes = {
|
|||
hideEditFileName: PropTypes.func.isRequired,
|
||||
updateFileName: PropTypes.func.isRequired,
|
||||
showEditProjectName: PropTypes.func.isRequired,
|
||||
hideEditProjectName: PropTypes.func.isRequired
|
||||
hideEditProjectName: PropTypes.func.isRequired,
|
||||
logoutUser: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
function mapStateToProps(state) {
|
||||
|
@ -390,7 +393,8 @@ function mapDispatchToProps(dispatch) {
|
|||
FileActions,
|
||||
ProjectActions,
|
||||
IDEActions,
|
||||
PreferencesActions),
|
||||
PreferencesActions,
|
||||
UserActions),
|
||||
dispatch);
|
||||
}
|
||||
|
||||
|
|
|
@ -56,3 +56,16 @@ export function getUser() {
|
|||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function logoutUser() {
|
||||
return (dispatch) => {
|
||||
axios.get(`${ROOT_URL}/logout`, { withCredentials: true })
|
||||
.then(() => {
|
||||
dispatch({
|
||||
type: ActionTypes.UNAUTH_USER
|
||||
});
|
||||
})
|
||||
.catch(response => dispatch(authError(response.data.error)));
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -5,6 +5,10 @@ const user = (state = { authenticated: false }, action) => {
|
|||
case ActionTypes.AUTH_USER:
|
||||
return { ...action.user,
|
||||
authenticated: true };
|
||||
case ActionTypes.UNAUTH_USER:
|
||||
return {
|
||||
authenticated: false
|
||||
};
|
||||
case ActionTypes.AUTH_ERROR:
|
||||
return {
|
||||
authenticated: false
|
||||
|
|
|
@ -11,6 +11,10 @@ body, input, button {
|
|||
color: $light-primary-text-color;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $light-background-color;
|
||||
}
|
||||
|
||||
.root-app, .app {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.nav {
|
||||
width: 100%;
|
||||
padding: #{10 / $base-font-size}rem #{40 / $base-font-size}rem;
|
||||
padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem;
|
||||
padding-left: #{170 / $base-font-size}rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
@ -24,4 +24,22 @@
|
|||
& + & {
|
||||
margin-left: #{20 / $base-font-size}rem;
|
||||
}
|
||||
position: relative;
|
||||
&:hover .nav__dropdown {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
background-color: $light-background-color;
|
||||
padding: #{10 / $base-font-size}rem;
|
||||
left: #{-10 / $base-font-size}rem;
|
||||
border: 1px solid $ide-border-color;
|
||||
& li + li {
|
||||
margin-top: #{10 / $base-font-size}rem;
|
||||
}
|
||||
width: #{140 / $base-font-size}rem;
|
||||
}
|
|
@ -30,3 +30,9 @@ export function getSession(req, res) {
|
|||
}
|
||||
return res.status(404).send({ message: 'Session does not exist' });
|
||||
}
|
||||
|
||||
export function destroySession(req, res) {
|
||||
req.logout();
|
||||
res.json({success: true});
|
||||
}
|
||||
|
||||
|
|
|
@ -7,6 +7,8 @@ router.route('/login').post(SessionController.createSession);
|
|||
|
||||
router.route('/session').get(SessionController.getSession);
|
||||
|
||||
router.route('/logout').get(SessionController.destroySession);
|
||||
|
||||
export default router;
|
||||
|
||||
// TODO add github authentication stuff
|
||||
|
|
Loading…
Reference in a new issue