diff --git a/client/coral-admin/src/actions/auth.js b/client/coral-admin/src/actions/auth.js index 389e8b4d2..3e6d81ae1 100644 --- a/client/coral-admin/src/actions/auth.js +++ b/client/coral-admin/src/actions/auth.js @@ -2,15 +2,24 @@ import * as actions from '../constants/auth'; import coralApi from 'coral-framework/helpers/response'; // Log In. -export const handleLogin = (email, password) => dispatch => { +export const handleLogin = (email, password, recaptchaResponse) => dispatch => { dispatch({type: actions.LOGIN_REQUEST}); - return coralApi('/auth/local', {method: 'POST', body: {email, password}}) + const params = {method: 'POST', body: {email, password}}; + if (recaptchaResponse) { + params.headers = {'X-Recaptcha-Response': recaptchaResponse}; + } + return coralApi('/auth/local', params) .then(result => { const isAdmin = !!result.user.roles.filter(i => i === 'ADMIN').length; dispatch(checkLoginSuccess(result.user, isAdmin)); }) .catch(error => { - dispatch({type: actions.LOGIN_FAILURE, message: error.translation_key}); + + if (error.translation_key === 'LOGIN_MAXIMUM_EXCEEDED') { + dispatch({type: actions.LOGIN_MAXIMUM_EXCEEDED, message: error.translation_key}); + } else { + dispatch({type: actions.LOGIN_FAILURE, message: error.translation_key}); + } }); }; diff --git a/client/coral-admin/src/components/AdminLogin.js b/client/coral-admin/src/components/AdminLogin.js index 7c7d4b00f..11e840eb7 100644 --- a/client/coral-admin/src/components/AdminLogin.js +++ b/client/coral-admin/src/components/AdminLogin.js @@ -4,6 +4,7 @@ import styles from './NotFound.css'; import {Button, TextField, Alert, Success} from 'coral-ui'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations'; +import Recaptcha from 'react-recaptcha'; const lang = new I18n(translations); class AdminLogin extends React.Component { @@ -18,13 +19,22 @@ class AdminLogin extends React.Component { this.props.handleLogin(this.state.email, this.state.password); } + onRecaptchaLoad = () => { + + // do something? + } + + onRecaptchaVerify = (recaptchaResponse) => { + this.props.handleLogin(this.state.email, this.state.password, recaptchaResponse); + } + handleRequestPassword = e => { e.preventDefault(); this.props.requestPasswordReset(this.state.email); } render () { - const {errorMessage} = this.props; + const {errorMessage, loginMaxExceeded} = this.props; const signInForm = (
); const requestPasswordForm = ( @@ -84,6 +103,7 @@ class AdminLogin extends React.Component { } AdminLogin.propTypes = { + loginMaxExceeded: PropTypes.bool.isRequired, handleLogin: PropTypes.func.isRequired, passwordRequestSuccess: PropTypes.string, loginError: PropTypes.string diff --git a/client/coral-admin/src/constants/auth.js b/client/coral-admin/src/constants/auth.js index 3c47bfc45..93cd61544 100644 --- a/client/coral-admin/src/constants/auth.js +++ b/client/coral-admin/src/constants/auth.js @@ -11,6 +11,7 @@ export const LOGOUT_FAILURE = 'LOGOUT_FAILURE'; export const LOGIN_REQUEST = 'LOGIN_REQUEST'; export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'; export const LOGIN_FAILURE = 'LOGIN_FAILURE'; +export const LOGIN_MAXIMUM_EXCEEDED = 'LOGIN_MAXIMUM_EXCEEDED'; export const FETCH_FORGOT_PASSWORD_REQUEST = 'FETCH_FORGOT_PASSWORD_REQUEST'; export const FETCH_FORGOT_PASSWORD_SUCCESS = 'FETCH_FORGOT_PASSWORD_SUCCESS'; diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js index d122cd23a..d2493a548 100644 --- a/client/coral-admin/src/containers/LayoutContainer.js +++ b/client/coral-admin/src/containers/LayoutContainer.js @@ -16,12 +16,14 @@ class LayoutContainer extends Component { loggedIn, loadingUser, loginError, + loginMaxExceeded, passwordRequestSuccess } = this.props.auth; const {handleLogout} = this.props; if (loadingUser) { return