add Alert component to coral-ui

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

@@ -1,5 +1,5 @@
 import * as actions from '../constants/auth';
-import coralApi from '../../../coral-framework/helpers/response';
+import coralApi from 'coral-framework/helpers/response';
 
 // Log In.
 export const handleLogin = (email, password) => dispatch => {
@@ -10,7 +10,7 @@ export const handleLogin = (email, password) => dispatch => {
       dispatch(checkLoginSuccess(result.user, isAdmin));
     })
     .catch(error => {
-      console.error(error);
+      dispatch({type: actions.LOGIN_FAILURE, message: error.translation_key});
     });
 };
 

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

@@ -1,7 +1,10 @@
 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';
+import {Button, TextField, Alert} from 'coral-ui';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations';
+const lang = new I18n(translations);
 
 class AdminLogin extends React.Component {
 
@@ -16,12 +19,14 @@ class AdminLogin extends React.Component {
   }
 
   render () {
+    const {errorMessage} = this.props;
     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}>
+            {errorMessage && <Alert>{lang.t(`errors.${errorMessage}`)}</Alert>}
             <TextField
               label='email'
               value={this.state.email}
@@ -43,7 +48,8 @@ class AdminLogin extends React.Component {
 }
 
 AdminLogin.propTypes = {
-  handleLogin: PropTypes.func.isRequired
+  handleLogin: PropTypes.func.isRequired,
+  loginError: PropTypes.string
 };
 
 export default AdminLogin;

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

@@ -11,11 +11,13 @@ class LayoutContainer extends Component {
     checkLogin();
   }
   render () {
-    const {isAdmin, loggedIn, loadingUser} = this.props.auth;
+    const {isAdmin, loggedIn, loadingUser, loginError} = this.props.auth;
     const {handleLogout} = this.props;
     if (loadingUser) { return <FullLoading />; }
     if (!isAdmin) {
-      return <AdminLogin handleLogin={this.props.handleLogin} />;
+      return <AdminLogin
+        handleLogin={this.props.handleLogin}
+        errorMessage={loginError} />;
     }
     if (isAdmin && loggedIn) { return <Layout handleLogout={handleLogout} {...this.props} />; }
     return <FullLoading />;

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

@@ -4,7 +4,8 @@ import * as actions from '../constants/auth';
 const initialState = Map({
   loggedIn: false,
   user: null,
-  isAdmin: false
+  isAdmin: false,
+  loginError: null
 });
 
 export default function auth (state = initialState, action) {
@@ -25,6 +26,10 @@ export default function auth (state = initialState, action) {
       .set('user', action.user);
   case actions.LOGOUT_SUCCESS:
     return initialState;
+  case actions.LOGIN_REQUEST:
+    return state.set('loginError', null);
+  case actions.LOGIN_FAILURE:
+    return state.set('loginError', action.message);
   default :
     return state;
   }

client/coral-admin/src/translations.json

@@ -1,5 +1,8 @@
 {
   "en": {
+    "errors": {
+      "NOT_AUTHORIZED": "Your username or password is not recognized by our system."
+    },
     "community": {
       "username_and_email": "Username and Email",
       "account_creation_date": "Account Creation Date",
@@ -132,6 +135,9 @@
     }
   },
   "es": {
+    "errors": {
+      "NOT_AUTHORIZED": "Acción no autorizada."
+    },
     "community": {
       "username_and_email": "Usuario y E-mail",
       "account_creation_date": "Fecha de creación de la cuenta",
@@ -213,7 +219,7 @@
     },
     "bandialog": {
       "ban_user": "Quieres suspender el Usuario?",
-      "are_you_sure": "Estas segura que quieres suspender a {props.author.username}?",
+      "are_you_sure": "Estas segura que quieres suspender a {0}?",
       "note": "Nota: Suspender este usuario también va a colocar este comentario en la cola de Rechazados.",
       "cancel": "Cancelar",
       "yes_ban_user": "Si, Suspendan el usuario"

client/coral-sign-in/components/CreateUsernameDialog.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import TextField from 'coral-ui/components/TextField';
-import Alert from './Alert';
 import Button from 'coral-ui/components/Button';
-import {Dialog} from 'coral-ui';
+import {Dialog, Alert} from 'coral-ui';
 import FakeComment from './FakeComment';
 
 import styles from './styles.css';

client/coral-sign-in/components/SignInContent.js

@@ -1,6 +1,5 @@
 import React, {PropTypes} from 'react';
-import Alert from './Alert';
-import {Button, TextField, Spinner, Success} from 'coral-ui';
+import {Button, TextField, Spinner, Success, Alert} from 'coral-ui';
 import styles from './styles.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';

client/coral-sign-in/components/SignUpContent.js

@@ -1,6 +1,5 @@
 import React, {PropTypes} from 'react';
-import Alert from './Alert';
-import {Button, TextField, Spinner, Success} from 'coral-ui';
+import {Button, TextField, Spinner, Success, Alert} from 'coral-ui';
 import styles from './styles.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';

client/coral-sign-in/components/styles.css

@@ -65,23 +65,6 @@ input.error{
     padding: 3px 0 16px;
 }
 
-.alert {
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 2px;
-}
-
-.alert--success {
-    border: solid 1px #1ec00e;
-    background: #cbf1b8;
-    color: #006900;
-}
-
-.alert--error {
-    background: #FFEBEE;
-    color: #B71C1C;
-}
-
 .userBox {
   padding: 10px 0 20px;
   letter-spacing: 0.1px;

client/coral-ui/components/Alert.css

@@ -0,0 +1,16 @@
+.alert {
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 2px;
+}
+
+.alert--success {
+    border: solid 1px #1ec00e;
+    background: #cbf1b8;
+    color: #006900;
+}
+
+.alert--error {
+    background: #FFEBEE;
+    color: #B71C1C;
+}

client/coral-ui/components/Alert.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './Alert.css';
 
 const Alert = ({cStyle = 'error', children, className, ...props}) => (
   <div

client/coral-ui/index.js

@@ -1,3 +1,4 @@
+export {default as Alert} from './components/Alert';
 export {default as Dialog} from './components/Dialog';
 export {default as CoralLogo} from './components/CoralLogo';
 export {default as FabButton} from './components/FabButton';