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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="nav__items-right" title="user-menu">
|
<ul className="nav__items-right" title="user-menu">
|
||||||
<li className="nav__item">
|
{(() => {
|
||||||
{props.user.authenticated && <p>Hello, {props.user.username}!</p>}
|
if (!props.user.authenticated) {
|
||||||
{!props.user.authenticated && <p><Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link></p>}
|
return (
|
||||||
</li>
|
<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>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
|
@ -105,7 +129,8 @@ Nav.propTypes = {
|
||||||
}).isRequired,
|
}).isRequired,
|
||||||
project: PropTypes.shape({
|
project: PropTypes.shape({
|
||||||
id: PropTypes.string
|
id: PropTypes.string
|
||||||
})
|
}),
|
||||||
|
logoutUser: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Nav;
|
export default Nav;
|
||||||
|
|
|
@ -15,6 +15,7 @@ import * as IDEActions from '../actions/ide';
|
||||||
import * as ProjectActions from '../actions/project';
|
import * as ProjectActions from '../actions/project';
|
||||||
import * as EditorAccessibilityActions from '../actions/editorAccessibility';
|
import * as EditorAccessibilityActions from '../actions/editorAccessibility';
|
||||||
import * as PreferencesActions from '../actions/preferences';
|
import * as PreferencesActions from '../actions/preferences';
|
||||||
|
import * as UserActions from '../../User/actions';
|
||||||
import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
|
import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
|
||||||
import SplitPane from 'react-split-pane';
|
import SplitPane from 'react-split-pane';
|
||||||
import Overlay from '../../App/components/Overlay';
|
import Overlay from '../../App/components/Overlay';
|
||||||
|
@ -117,6 +118,7 @@ class IDEView extends React.Component {
|
||||||
exportProjectAsZip={this.props.exportProjectAsZip}
|
exportProjectAsZip={this.props.exportProjectAsZip}
|
||||||
cloneProject={this.props.cloneProject}
|
cloneProject={this.props.cloneProject}
|
||||||
project={this.props.project}
|
project={this.props.project}
|
||||||
|
logoutUser={this.props.logoutUser}
|
||||||
/>
|
/>
|
||||||
<Toolbar
|
<Toolbar
|
||||||
className="Toolbar"
|
className="Toolbar"
|
||||||
|
@ -366,7 +368,8 @@ IDEView.propTypes = {
|
||||||
hideEditFileName: PropTypes.func.isRequired,
|
hideEditFileName: PropTypes.func.isRequired,
|
||||||
updateFileName: PropTypes.func.isRequired,
|
updateFileName: PropTypes.func.isRequired,
|
||||||
showEditProjectName: PropTypes.func.isRequired,
|
showEditProjectName: PropTypes.func.isRequired,
|
||||||
hideEditProjectName: PropTypes.func.isRequired
|
hideEditProjectName: PropTypes.func.isRequired,
|
||||||
|
logoutUser: PropTypes.func.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
function mapStateToProps(state) {
|
function mapStateToProps(state) {
|
||||||
|
@ -390,7 +393,8 @@ function mapDispatchToProps(dispatch) {
|
||||||
FileActions,
|
FileActions,
|
||||||
ProjectActions,
|
ProjectActions,
|
||||||
IDEActions,
|
IDEActions,
|
||||||
PreferencesActions),
|
PreferencesActions,
|
||||||
|
UserActions),
|
||||||
dispatch);
|
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:
|
case ActionTypes.AUTH_USER:
|
||||||
return { ...action.user,
|
return { ...action.user,
|
||||||
authenticated: true };
|
authenticated: true };
|
||||||
|
case ActionTypes.UNAUTH_USER:
|
||||||
|
return {
|
||||||
|
authenticated: false
|
||||||
|
};
|
||||||
case ActionTypes.AUTH_ERROR:
|
case ActionTypes.AUTH_ERROR:
|
||||||
return {
|
return {
|
||||||
authenticated: false
|
authenticated: false
|
||||||
|
|
|
@ -11,6 +11,10 @@ body, input, button {
|
||||||
color: $light-primary-text-color;
|
color: $light-primary-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $light-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
.root-app, .app {
|
.root-app, .app {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.nav {
|
.nav {
|
||||||
width: 100%;
|
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;
|
padding-left: #{170 / $base-font-size}rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -24,4 +24,22 @@
|
||||||
& + & {
|
& + & {
|
||||||
margin-left: #{20 / $base-font-size}rem;
|
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' });
|
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('/session').get(SessionController.getSession);
|
||||||
|
|
||||||
|
router.route('/logout').get(SessionController.destroySession);
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
|
|
||||||
// TODO add github authentication stuff
|
// TODO add github authentication stuff
|
||||||
|
|
Loading…
Reference in a new issue