From 8f23ca678d93144cc86c3c7a46f8d1e66bb64c7a Mon Sep 17 00:00:00 2001 From: riley Date: Tue, 28 Feb 2017 16:30:05 -0700 Subject: [PATCH] add Alert component to coral-ui --- client/coral-admin/src/actions/auth.js | 4 ++-- client/coral-admin/src/components/AdminLogin.js | 10 ++++++++-- .../src/containers/LayoutContainer.js | 6 ++++-- client/coral-admin/src/reducers/auth.js | 7 ++++++- client/coral-admin/src/translations.json | 8 +++++++- .../components/CreateUsernameDialog.js | 3 +-- .../coral-sign-in/components/SignInContent.js | 3 +-- .../coral-sign-in/components/SignUpContent.js | 3 +-- client/coral-sign-in/components/styles.css | 17 ----------------- client/coral-ui/components/Alert.css | 16 ++++++++++++++++ .../components/Alert.js | 2 +- client/coral-ui/index.js | 1 + 12 files changed, 48 insertions(+), 32 deletions(-) create mode 100644 client/coral-ui/components/Alert.css rename client/{coral-sign-in => coral-ui}/components/Alert.js (87%) diff --git a/client/coral-admin/src/actions/auth.js b/client/coral-admin/src/actions/auth.js index 0eb17f74c..66c063d00 100644 --- a/client/coral-admin/src/actions/auth.js +++ b/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}); }); }; diff --git a/client/coral-admin/src/components/AdminLogin.js b/client/coral-admin/src/components/AdminLogin.js index b96a84031..1475ccce7 100644 --- a/client/coral-admin/src/components/AdminLogin.js +++ b/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 (

Permission Required

Sign in to interact with your community.

+ {errorMessage && {lang.t(`errors.${errorMessage}`)}} ; } if (!isAdmin) { - return ; + return ; } if (isAdmin && loggedIn) { return ; } return ; diff --git a/client/coral-admin/src/reducers/auth.js b/client/coral-admin/src/reducers/auth.js index 095ef7aac..d2f178773 100644 --- a/client/coral-admin/src/reducers/auth.js +++ b/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; } diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index 7219a22ca..0fbd09011 100644 --- a/client/coral-admin/src/translations.json +++ b/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" diff --git a/client/coral-sign-in/components/CreateUsernameDialog.js b/client/coral-sign-in/components/CreateUsernameDialog.js index d0e348046..4a7a99b81 100644 --- a/client/coral-sign-in/components/CreateUsernameDialog.js +++ b/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'; diff --git a/client/coral-sign-in/components/SignInContent.js b/client/coral-sign-in/components/SignInContent.js index 1f339979b..a0ed5b5b4 100644 --- a/client/coral-sign-in/components/SignInContent.js +++ b/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'; diff --git a/client/coral-sign-in/components/SignUpContent.js b/client/coral-sign-in/components/SignUpContent.js index 6a781675b..c1e1d36cc 100644 --- a/client/coral-sign-in/components/SignUpContent.js +++ b/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'; diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css index 31d4a4fed..d3cd47b87 100644 --- a/client/coral-sign-in/components/styles.css +++ b/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; diff --git a/client/coral-ui/components/Alert.css b/client/coral-ui/components/Alert.css new file mode 100644 index 000000000..47b4787a1 --- /dev/null +++ b/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; +} diff --git a/client/coral-sign-in/components/Alert.js b/client/coral-ui/components/Alert.js similarity index 87% rename from client/coral-sign-in/components/Alert.js rename to client/coral-ui/components/Alert.js index 019c3456a..02f0524ff 100644 --- a/client/coral-sign-in/components/Alert.js +++ b/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}) => (