change PermissionRequired to LoginView and create a login form. delete old login page

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

@@ -1,6 +1,19 @@
 import * as actions from '../constants/auth';
 import coralApi from '../../../coral-framework/helpers/response';
 
+// Log In.
+export const handleLogin = (email, password) => dispatch => {
+  dispatch({type: actions.LOGIN_REQUEST});
+  return coralApi('/auth/local', {method: 'POST', body: {email, password}})
+    .then(result => {
+      const isAdmin = !!result.user.roles.filter(i => i === 'ADMIN').length;
+      dispatch(checkLoginSuccess(result.user, isAdmin));
+    })
+    .catch(error => {
+      console.error(error);
+    });
+};
+
 // Check Login
 
 const checkLoginRequest = () => ({type: actions.CHECK_LOGIN_REQUEST});

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

@@ -0,0 +1,49 @@
+import React, {PropTypes} from 'react';
+import Layout from 'coral-admin/src/components/ui/Layout';
+import styles from './NotFound.css';
+import {Button, TextField} from 'coral-ui';
+
+class LoginView extends React.Component {
+
+  constructor (props) {
+    super(props);
+    this.state = {email: '', password: ''};
+  }
+
+  handleSignIn = e => {
+    e.preventDefault();
+    this.props.handleLogin(this.state.email, this.state.password);
+  }
+
+  render () {
+    return (
+      <Layout fixedDrawer restricted={true}>
+        <div className={styles.layout}>
+          <h1>Permission Required</h1>
+          <p>Sign in to interact with your community.</p>
+          <form onSubmit={this.handleSignIn}>
+            <TextField
+              label='email'
+              value={this.state.email}
+              onChange={e => this.setState({email: e.target.value})} />
+            <TextField
+              label='password'
+              value={this.state.password}
+              onChange={e => this.setState({password: e.target.value})}
+              type='password' />
+            <Button
+              type='submit'
+              cStyle='black'
+              onClick={this.handleSignIn} full>Sign In</Button>
+          </form>
+        </div>
+      </Layout>
+    );
+  }
+}
+
+LoginView.propTypes = {
+  handleLogin: PropTypes.func.isRequired
+};
+
+export default LoginView;

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

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

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

@@ -1,13 +0,0 @@
-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/components/ui/Drawer.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Navigation, Drawer} from 'react-mdl';
 import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 
-export default ({handleLogout, restricted = false}) => (
+const CoralDrawer = ({handleLogout, restricted = false}) => (
   <Drawer className={styles.header}>
     { !restricted ?
       <div>
@@ -45,5 +45,11 @@ export default ({handleLogout, restricted = false}) => (
   </Drawer>
 );
 
+CoralDrawer.propTypes = {
+  handleLogout: PropTypes.func.isRequired,
+  restricted: PropTypes.bool // hide app elements from a logged out user
+};
+
 const lang = new I18n(translations);
 
+export default CoralDrawer;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
@@ -6,7 +6,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import {Logo} from './Logo';
 
-export default ({handleLogout, restricted = false}) => (
+const CoralHeader = ({handleLogout, restricted = false}) => (
   <Header className={styles.header}>
     <Logo className={styles.logo} />
     {
@@ -64,4 +64,11 @@ export default ({handleLogout, restricted = false}) => (
   </Header>
 );
 
+CoralHeader.propTypes = {
+  handleLogout: PropTypes.func.isRequired,
+  restricted: PropTypes.bool // hide elemnts from a user that's logged out
+};
+
 const lang = new I18n(translations);
+
+export default CoralHeader;

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

@@ -1,15 +1,22 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Layout as LayoutMDL} from 'react-mdl';
 import Header from './Header';
 import Drawer from './Drawer';
 import styles from './Layout.css';
 
-export const Layout = ({children, ...props}) => (
+const Layout = ({children, handleLogout = () => {}, restricted = false, ...props}) => (
   <LayoutMDL fixedDrawer>
-    <Header {...props} />
-    <Drawer {...props} />
-    <div className={styles.layout} >
+    <Header handleLogout={handleLogout} restricted={restricted} {...props} />
+    <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
+    <div className={styles.layout}>
       {children}
     </div>
   </LayoutMDL>
 );
+
+Layout.propTypes = {
+  handleLogout: PropTypes.func,
+  restricted: PropTypes.bool // hide elements from a user that's logged out
+};
+
+export default Layout;

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

@@ -7,3 +7,7 @@ export const CHECK_CSRF_TOKEN = 'CHECK_CSRF_TOKEN';
 export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
 export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
 export const LOGOUT_FAILURE = 'LOGOUT_FAILURE';
+
+export const LOGIN_REQUEST = 'LOGIN_REQUEST';
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
+export const LOGIN_FAILURE = 'LOGIN_FAILURE';

client/coral-admin/src/containers/Install/InstallContainer.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import styles from './style.css';
 import {Wizard, WizardNav} from 'coral-ui';
-import {Layout} from '../../components/ui/Layout';
+import Layout from 'coral-admin/src/components/ui/Layout';
 
 import {
   nextStep,

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

@@ -1,24 +1,23 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import {Layout} from '../components/ui/Layout';
-import {checkLogin, logout} from '../actions/auth';
+import Layout from '../components/ui/Layout';
+import {checkLogin, handleLogin, logout} from '../actions/auth';
 import {FullLoading} from '../components/FullLoading';
-import {PermissionRequired} from '../components/PermissionRequired';
+import LoginView from '../components/LoginView';
 
 class LayoutContainer extends Component {
   componentWillMount () {
     const {checkLogin} = this.props;
-    checkLogin().then(() => {
-      if (!this.props.auth.isAdmin) {
-        location.href = '/admin/login';
-      }
-    });
+    checkLogin();
   }
   render () {
     const {isAdmin, loggedIn, loadingUser} = this.props.auth;
+    const {handleLogout} = this.props;
     if (loadingUser) { return <FullLoading />; }
-    if (!isAdmin) { return <PermissionRequired />; }
-    if (isAdmin && loggedIn) { return <Layout {...this.props} />; }
+    if (!isAdmin) {
+      return <LoginView handleLogin={this.props.handleLogin} />;
+    }
+    if (isAdmin && loggedIn) { return <Layout handleLogout={handleLogout} {...this.props} />; }
     return <FullLoading />;
   }
 }
@@ -29,6 +28,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   checkLogin: () => dispatch(checkLogin()),
+  handleLogin: (username, password) => dispatch(handleLogin(username, password)),
   handleLogout: () => dispatch(logout())
 });
 

routes/admin/index.js

@@ -15,10 +15,6 @@ router.get('/password-reset', (req, res) => {
   res.render('password-reset', {redirectUri: process.env.TALK_ROOT_URL});
 });
 
-router.get('/login', (req, res, next) => {
-  res.render('admin/login');
-});
-
 router.get('*', (req, res) => {
   res.render('admin', {basePath: '/client/coral-admin'});
 });

views/admin/login.ejs

@@ -1,132 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
-    <title>Admin Login</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
-
-    <style media="screen">
-      body, #root {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        background: #fff;
-      }
-
-      #root form {
-        max-width: 300px;
-        border: 1px solid lightgrey;
-        box-shadow: 0px 10px 24px 2px rgba(0,0,0,0.2);
-        margin: 50px auto;
-        padding: 15px;
-      }
-
-      .legend {
-        text-align: center;
-        width: 100%;
-        font-weight: bold;
-      }
-
-      label {
-        display: block;
-        margin-top: 10px;
-        margin-bottom: 3px;
-        padding-right: 30px;
-      }
-
-      small {
-        color: #888;
-      }
-
-      input {
-        border-radius: 4px;
-        margin-top: 3px;
-        border: 1px solid lightgrey;
-        font-size: 16px;
-        width: 100%;
-        padding: 14px;
-        height: 100%;
-        display: inline-block;
-      }
-
-      .submit-password-reset {
-        border-radius: 4px;
-        border: none;
-        display: block;
-        background-color: #333;
-        color: white;
-        text-align: center;
-        width: 100%;
-        padding: 10px;
-        margin-top: 10px;
-        cursor: pointer;
-      }
-
-      .error-console {
-        display: none;
-        margin-top: 10px;
-        border-radius: 4px;
-        background-color: pink;
-        color: red;
-        border: 1px solid red;
-        padding: 10px;
-      }
-
-      .error-console.active {
-        display: block;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root">
-      <form id="login-form">
-        <legend class="legend">Admin Login</legend>
-        <label for="email">
-          Email
-          <input type="email" name="email" placeholder=""/>
-        </label>
-
-        <label for="password">
-          Password
-          <input type="password" name="password" placeholder="" />
-        </label>
-        <button class="submit-password-reset" type="submit">Login</button>
-        <div class="error-console"></div>
-      </form>
-    </div>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-    <script>
-      $(function () {
-        function showError(message) {
-          $('.error-console').text(message).addClass('active');
-        }
-
-        function handleSubmit (e) {
-          e.preventDefault();
-          $('.error-console').removeClass('active');
-
-          var password = $('[name="password"]').val();
-          var email = $('[name="email"]').val();
-
-          $.ajax({
-            url: '/api/v1/auth/local',
-            contentType: 'application/json',
-            method: 'POST',
-            headers: {
-              'X-CSRF-Token': '<%= csrfToken %>'
-            },
-            data: JSON.stringify({password: password, email: email})
-          }).then(function (success) {
-            location.href = '/admin';
-          }).catch(function (error) {
-            showError(error.responseText);
-          });
-        }
-
-        $('#login-form').on('submit', handleSubmit);
-      });
-    </script>
-  </body>
-</html>