Permissions, views and somestyling

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

@@ -4,13 +4,16 @@ import {base, handleResp, getInit} from '../helpers/response';
 // Check Login
 
 const checkLoginRequest = () => ({type: actions.CHECK_LOGIN_REQUEST});
-const checkLoginSuccess = user => ({type: actions.CHECK_LOGIN_SUCCESS, user});
+const checkLoginSuccess = (user, isAdmin) => ({type: actions.CHECK_LOGIN_SUCCESS, user, isAdmin});
 const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error});
 
 export const checkLogin = () => dispatch => {
   dispatch(checkLoginRequest());
   fetch(`${base}/auth`, getInit('GET'))
     .then(handleResp)
-    .then(user => dispatch(checkLoginSuccess(user)))
+    .then(user => {
+      const isAdmin = !!user.roles.filter(i => i === 'admin').length;
+      dispatch(checkLoginSuccess(user, isAdmin));
+    })
     .catch(error => dispatch(checkLoginFailure(error)));
 };

client/coral-admin/src/components/NotFound.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/NotFound.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Layout} from 'react-mdl';
+import styles from './NotFound.css';
+
+export const NotFound = () => (
+  <Layout fixedDrawer>
+    <div className={styles.layout} >
+      <h1>Page Not Found</h1>
+      <p>The communicorn feels your pain.</p>
+      <img src="https://coralproject.net/images/communicorn.jpg" alt="Communicorn"/>
+    </div>
+  </Layout>
+);

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Layout} from 'react-mdl';
+import styles from './NotFound.css';
+
+export const PermissionRequired = () => (
+  <Layout fixedDrawer>
+    <div className={styles.layout} >
+      <h1>Permission Required</h1>
+      <p>We’re sorry, but you don’t have access to that page.</p>
+      <img src="https://coralproject.net/images/communicorn.jpg" alt="Communicorn"/>
+    </div>
+  </Layout>
+);

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

@@ -1,13 +1,25 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {Layout} from '../components/ui/Layout';
-import {checkLogin} from 'coral-framework/actions/auth';
+import {checkLogin} from '../actions/auth';
+import {NotFound} from '../components/NotFound';
+import {PermissionRequired} from '../components/PermissionRequired';
 
 class LayoutContainer extends Component {
   componentWillMount () {
     this.props.checkLogin();
   }
   render () {
+    const {isAdmin, loggedIn} = this.props.auth;
+
+    if (!loggedIn) {
+      return <NotFound />;
+    }
+
+    if (!isAdmin && loggedIn) {
+      return <PermissionRequired />;
+    }
+
     return <Layout {...this.props} />;
   }
 }

client/coral-admin/src/containers/ModerationQueue.css

@@ -1,4 +1,3 @@
-
 @custom-media --big-viewport (min-width: 780px);
 
 .listContainer {
@@ -6,8 +5,13 @@
   margin: 0 auto;
 }
 
+.tabBar {
+  background: #9E9E9E;
+}
+
 .tab {
   flex: 1;
+  color: white;
 }
 
 @media (--big-viewport) {

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

@@ -61,9 +61,9 @@ class ModerationQueue extends React.Component {
     return (
       <div>
         <div className='mdl-tabs mdl-js-tabs mdl-js-ripple-effect'>
-          <div className='mdl-tabs__tab-bar'>
+          <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
             <a href='#pending' onClick={() => this.onTabClick('pending')}
-              className={`mdl-tabs__tab is-active ${styles.tab}`}>{lang.t('modqueue.pending')}</a>
+              className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.pending')}</a>
             <a href='#rejected' onClick={() => this.onTabClick('rejected')}
               className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.rejected')}</a>
             <a href='#flagged' onClick={() => this.onTabClick('flagged')}

client/coral-admin/src/helpers/response.js

@@ -1,12 +1,15 @@
 export const base = '/api/v1';
 
 export const getInit = (method, body) => {
-  const headers = new Headers({
-    'Content-Type': 'application/json',
-    'Accept': 'application/json'
-  });
+  let init = {
+    method,
+    headers: new Headers({
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    }),
+    credentials: 'same-origin'
+  };
 
-  const init = {method, headers};
   if (method.toLowerCase() !== 'get') {
     init.body = JSON.stringify(body);
   }

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

@@ -3,7 +3,8 @@ import * as actions from '../constants/auth';
 
 const initialState = Map({
   loggedIn: false,
-  user: null
+  user: null,
+  isAdmin: false
 });
 
 export default function auth (state = initialState, action) {
@@ -15,6 +16,7 @@ export default function auth (state = initialState, action) {
   case actions.CHECK_LOGIN_SUCCESS:
     return state
       .set('loggedIn', true)
+      .set('isAdmin', action.isAdmin)
       .set('user', action.user);
   case actions.LOGOUT_SUCCESS:
     return state

routes/api/auth/index.js

@@ -8,7 +8,7 @@ const router = express.Router();
  * This returns the user if they are logged in.
  */
 router.get('/', authorization.needed(), (req, res) => {
-  res.json(req.user);
+  res.json(req.user.toObject());
 });
 
 /**