Merge pull request #103 from coralproject/logout

Admin Logout

client/coral-admin/src/actions/auth.js

@@ -17,3 +17,17 @@ export const checkLogin = () => dispatch => {
     })
     .catch(error => dispatch(checkLoginFailure(error)));
 };
+
+// LogOut Actions
+
+const logOutRequest = () => ({type: actions.LOGOUT_REQUEST});
+const logOutSuccess = () => ({type: actions.LOGOUT_SUCCESS});
+const logOutFailure = () => ({type: actions.LOGOUT_FAILURE});
+
+export const logout = () => dispatch => {
+  dispatch(logOutRequest());
+  fetch(`${base}/auth`, getInit('DELETE'))
+    .then(handleResp)
+    .then(() => dispatch(logOutSuccess()))
+    .catch(error => dispatch(logOutFailure(error)));
+};

client/coral-admin/src/components/FullLoading.css

@@ -0,0 +1,12 @@
+.layout {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.layout h1 {
+  font-size: 40px;
+}
+
+.layout img {
+  width: 100%;
+}

client/coral-admin/src/components/FullLoading.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Layout} from 'react-mdl';
+import styles from './FullLoading.css';
+import {CoralLogo} from 'coral-ui';
+
+export const FullLoading = () => (
+  <Layout fixedDrawer>
+    <div className={styles.layout} >
+      <h1>Loading</h1>
+      <CoralLogo />
+    </div>
+  </Layout>
+);

client/coral-admin/src/components/ui/Header.css

@@ -1,6 +1,5 @@
 .header {
     background: #505050;
-    overflow: hidden;
 }
 
 .header > div {
@@ -14,8 +13,35 @@
     background: #232323;
 }
 
-.version {
+.rightPanel {
     position: absolute;
     right: 0;
-    width: 50px;
+    width: 170px;
+}
+
+.rightPanel ul {
+  list-style: none;
+  line-height: 38px;
+}
+
+.rightPanel li {
+  display: inline-block;
+  float: right;
+  margin-left: 15px;
+}
+
+.rightPanel .settings {
+  vertical-align: middle;
+  border-radius: 3px;
+  border: solid 1px #9e9e9e;
+  line-height: 10px;
+}
+
+.rightPanel .settings > div {
+  position: relative;
+}
+
+.rightPanel .settings:hover {
+  background: rgba(158, 158, 158, 0.69);
+  cursor: pointer;
 }

client/coral-admin/src/components/ui/Header.js

@@ -1,21 +1,36 @@
 import React from 'react';
-import {Navigation, Header} from 'react-mdl';
+import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import {Logo} from './Logo';
 
-export default () => (
+export default ({handleLogout}) => (
   <Header className={styles.header}>
     <Logo />
     <Navigation>
-      <IndexLink className={styles.navLink} to="/admin" activeClassName={styles.active}>{lang.t('configure.moderate')}</IndexLink>
-      <Link className={styles.navLink} to="/admin/community" activeClassName={styles.active}>{lang.t('configure.community')}</Link>
-      <Link className={styles.navLink} to="/admin/configure" activeClassName={styles.active}>{lang.t('configure.configure')}</Link>
+      <IndexLink className={styles.navLink} to="/admin"
+                 activeClassName={styles.active}>{lang.t('configure.moderate')}</IndexLink>
+      <Link className={styles.navLink} to="/admin/community"
+            activeClassName={styles.active}>{lang.t('configure.community')}</Link>
+      <Link className={styles.navLink} to="/admin/configure"
+            activeClassName={styles.active}>{lang.t('configure.configure')}</Link>
     </Navigation>
-    <div className={styles.version}>
-      {`v${process.env.VERSION}`}
+    <div className={styles.rightPanel}>
+      <ul>
+        <li className={styles.settings}>
+          <div>
+            <IconButton name="settings" id="menu-settings"/>
+            <Menu target="menu-settings" align="right">
+              <MenuItem onClick={handleLogout}>Sign Out</MenuItem>
+            </Menu>
+          </div>
+        </li>
+        <li>
+          {`v${process.env.VERSION}`}
+        </li>
+      </ul>
     </div>
   </Header>
 );

client/coral-admin/src/components/ui/Layout.js

@@ -4,9 +4,9 @@ import Header from './Header';
 import Drawer from './Drawer';
 import styles from './Layout.css';
 
-export const Layout = ({children}) => (
+export const Layout = ({children, ...props}) => (
   <LayoutMDL fixedDrawer>
-    <Header />
+    <Header {...props}/>
     <Drawer />
     <div className={styles.layout} >
       {children}

client/coral-admin/src/components/ui/Logo.css

@@ -1,7 +1,9 @@
 .logo h1 {
     color: #272727;
     font-size: 20px;
-    padding: 0 30px;
+    margin: 0;
+    line-height: 60px;
+    padding: 0 20px;
 }
 
 .logo span {
@@ -13,6 +15,7 @@
 
 .logo {
     background: #E5E5E5;
+    height: 100%;
 }
 
 

client/coral-admin/src/containers/LayoutContainer.js

@@ -1,37 +1,31 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {Layout} from '../components/ui/Layout';
-import {checkLogin} from '../actions/auth';
-import {NotFound} from '../components/NotFound';
+import {checkLogin, logout} from '../actions/auth';
+import {FullLoading} from '../components/FullLoading';
 import {PermissionRequired} from '../components/PermissionRequired';
 
 class LayoutContainer extends Component {
   componentWillMount () {
-    this.props.checkLogin();
+    const {checkLogin} = this.props;
+    checkLogin();
   }
   render () {
-    const {isAdmin, loggedIn} = this.props.auth;
-
-    if (!loggedIn) {
-      return <NotFound />;
-    }
-
-    if (!isAdmin && loggedIn) {
-      return <PermissionRequired />;
-    }
-
-    return <Layout {...this.props} />;
+    const {isAdmin, loggedIn, loadingUser} = this.props.auth;
+    if (loadingUser) { return <FullLoading />; }
+    if (!isAdmin) { return <PermissionRequired />; }
+    if (isAdmin && loggedIn) { return <Layout {...this.props} />; }
+    return <FullLoading />;
   }
 }
 
-LayoutContainer.propTypes = {};
-
 const mapStateToProps = state => ({
   auth: state.auth.toJS()
 });
 
 const mapDispatchToProps = dispatch => ({
   checkLogin: () => dispatch(checkLogin()),
+  handleLogout: () => dispatch(logout())
 });
 
 export default connect(

client/coral-admin/src/reducers/auth.js

@@ -9,19 +9,25 @@ const initialState = Map({
 
 export default function auth (state = initialState, action) {
   switch (action.type) {
+  case actions.CHECK_LOGIN_REQUEST:
+    return state
+      .set('loadingUser', true);
   case actions.CHECK_LOGIN_FAILURE:
     return state
       .set('loggedIn', false)
+      .set('loadingUser', false)
       .set('user', null);
   case actions.CHECK_LOGIN_SUCCESS:
     return state
       .set('loggedIn', true)
+      .set('loadingUser', false)
       .set('isAdmin', action.isAdmin)
       .set('user', action.user);
   case actions.LOGOUT_SUCCESS:
     return state
       .set('loggedIn', false)
-      .set('user', null);
+      .set('user', null)
+      .set('isAdmin', false);
   default :
     return state;
   }