From e2273f581038aca6a1a28c42da8b1619e9a51e7f Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Tue, 28 Feb 2017 14:32:01 -0700 Subject: [PATCH] change PermissionRequired to LoginView and create a login form. delete old login page --- client/coral-admin/src/actions/auth.js | 13 ++ .../coral-admin/src/components/LoginView.js | 49 +++++++ .../coral-admin/src/components/NotFound.css | 10 +- .../src/components/PermissionRequired.js | 13 -- .../coral-admin/src/components/ui/Drawer.js | 10 +- .../coral-admin/src/components/ui/Header.js | 11 +- .../coral-admin/src/components/ui/Layout.js | 17 ++- client/coral-admin/src/constants/auth.js | 4 + .../containers/Install/InstallContainer.js | 2 +- .../src/containers/LayoutContainer.js | 20 +-- routes/admin/index.js | 4 - views/admin/login.ejs | 132 ------------------ 12 files changed, 109 insertions(+), 176 deletions(-) create mode 100644 client/coral-admin/src/components/LoginView.js delete mode 100644 client/coral-admin/src/components/PermissionRequired.js delete mode 100644 views/admin/login.ejs diff --git a/client/coral-admin/src/actions/auth.js b/client/coral-admin/src/actions/auth.js index c2f3a8056..0eb17f74c 100644 --- a/client/coral-admin/src/actions/auth.js +++ b/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}); diff --git a/client/coral-admin/src/components/LoginView.js b/client/coral-admin/src/components/LoginView.js new file mode 100644 index 000000000..e9b740683 --- /dev/null +++ b/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 ( + +
+

Permission Required

+

Sign in to interact with your community.

+
+ this.setState({email: e.target.value})} /> + this.setState({password: e.target.value})} + type='password' /> + + +
+ + ); + } +} + +LoginView.propTypes = { + handleLogin: PropTypes.func.isRequired +}; + +export default LoginView; diff --git a/client/coral-admin/src/components/NotFound.css b/client/coral-admin/src/components/NotFound.css index fc9aedc6b..e0e04e0fd 100644 --- a/client/coral-admin/src/components/NotFound.css +++ b/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; } diff --git a/client/coral-admin/src/components/PermissionRequired.js b/client/coral-admin/src/components/PermissionRequired.js deleted file mode 100644 index c61ab1cef..000000000 --- a/client/coral-admin/src/components/PermissionRequired.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import {Layout} from 'react-mdl'; -import styles from './NotFound.css'; - -export const PermissionRequired = () => ( - -
-

Permission Required

-

We’re sorry, but you don’t have access to that page.

- Communicorn -
- -); diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/ui/Drawer.js index 8fdf4f19d..9af651f3b 100644 --- a/client/coral-admin/src/components/ui/Drawer.js +++ b/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}) => ( { !restricted ?
@@ -45,5 +45,11 @@ export default ({handleLogout, restricted = false}) => ( ); +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; diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js index 556b33b6c..4a2314926 100644 --- a/client/coral-admin/src/components/ui/Header.js +++ b/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}) => (
{ @@ -64,4 +64,11 @@ export default ({handleLogout, restricted = false}) => (
); +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; diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js index f28e8dd80..c8b5bf57a 100644 --- a/client/coral-admin/src/components/ui/Layout.js +++ b/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}) => ( -
- -
+
+ +
{children}
); + +Layout.propTypes = { + handleLogout: PropTypes.func, + restricted: PropTypes.bool // hide elements from a user that's logged out +}; + +export default Layout; diff --git a/client/coral-admin/src/constants/auth.js b/client/coral-admin/src/constants/auth.js index f77deb670..88a9c4a3f 100644 --- a/client/coral-admin/src/constants/auth.js +++ b/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'; diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js index 7a8634180..123a1493b 100644 --- a/client/coral-admin/src/containers/Install/InstallContainer.js +++ b/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, diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js index 5ce208503..ce3c7d1bf 100644 --- a/client/coral-admin/src/containers/LayoutContainer.js +++ b/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 ; } - if (!isAdmin) { return ; } - if (isAdmin && loggedIn) { return ; } + if (!isAdmin) { + return ; + } + if (isAdmin && loggedIn) { return ; } return ; } } @@ -29,6 +28,7 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => ({ checkLogin: () => dispatch(checkLogin()), + handleLogin: (username, password) => dispatch(handleLogin(username, password)), handleLogout: () => dispatch(logout()) }); diff --git a/routes/admin/index.js b/routes/admin/index.js index a3699143e..e2473bca9 100644 --- a/routes/admin/index.js +++ b/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'}); }); diff --git a/views/admin/login.ejs b/views/admin/login.ejs deleted file mode 100644 index e88dd86fd..000000000 --- a/views/admin/login.ejs +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - Admin Login - - - - - - -
-
- Admin Login - - - - -
-
-
- - - -