Sign in with local account

client/coral-framework/actions/auth.js

@@ -16,15 +16,15 @@ export const cleanState = () => ({type: actions.CLEAN_STATE});
 // Sign In Actions
 
 const signInRequest = () => ({type: actions.FETCH_SIGNIN_REQUEST});
-const signInSuccess = () => ({type: actions.FETCH_SIGNIN_SUCCESS});
-const signInFailure = () => ({type: actions.FETCH_SIGNIN_FAILURE});
+const signInSuccess = (user) => ({type: actions.FETCH_SIGNIN_SUCCESS, user});
+const signInFailure = (error) => ({type: actions.FETCH_SIGNIN_FAILURE, error});
 
-export const fetchSignIn = () => dispatch => {
+export const fetchSignIn = (formData) => dispatch => {
   dispatch(signInRequest());
-  fetch(`${base}/auth`, getInit('POST'))
+  fetch(`${base}/auth/local`, getInit('POST', formData))
     .then(handleResp)
-    .then(() => dispatch(signInSuccess()))
-    .catch(error => dispatch(signInFailure(error)));
+    .then(({user}) => dispatch(signInSuccess(user)))
+    .catch(() => dispatch(signInFailure('Email and/or password combination incorrect.')));
 };
 
 // Sign In - Facebook

client/coral-framework/reducers/auth.js

@@ -17,10 +17,10 @@ const initialState = Map({
   auth: Map(),
   isLoading: false,
   loggedIn: false,
-  error: '',
   user: null,
   showSignInDialog: false,
-  view: 'SIGNIN'
+  view: 'SIGNIN',
+  signInError: ''
 });
 
 export const getEmail = state => state.auth.formData.email;
@@ -42,10 +42,15 @@ export default function auth (state = initialState, action) {
       .set('isLoading', true);
   case FETCH_SIGNIN_FAILURE:
     return state
-      .set('isLoading', false);
+      .set('isLoading', false)
+      .set('signInError', action.error);
   case FETCH_SIGNIN_SUCCESS:
     return state
-      .set('isLoading', false);
+      .set('signInError', '')
+      .set('isLoading', false)
+      .set('loggedIn', true)
+      .set('user', action.user)
+      .set('showSignInDialog', false);
   case FETCH_SIGNIN_FACEBOOK_SUCCESS:
     return state
       .set('user', action.user)

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

@@ -27,7 +27,7 @@ const SignInContent = ({handleChange, formData, ...props}) => (
         {lang.t('signIn.or')}
       </h1>
     </div>
-    { props.message && <Alert>{props.message}</Alert> }
+    { props.signInError && <Alert>{props.signInError}</Alert> }
     <form onSubmit={props.handleSignIn}>
       <FormField
         id="email"

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

@@ -83,10 +83,9 @@ input.error{
     padding: 3px 0 16px;
 }
 
-.alert--success {
-    border: solid 1px #c0c4da;
-    background: #afb5c2;
-    color: #131314;
+.alert {
+    padding: 10px;
+    margin-bottom: 20px;
 }
 
 .alert--success {
@@ -96,9 +95,8 @@ input.error{
 }
 
 .alert--error {
-    border: solid 1px #f44336;
-    background: #F1A097;
-    color: #741818;
+    background: #FFEBEE;
+    color: #B71C1C;
 }
 
 .userBox a {

client/coral-sign-in/containers/SignInContainer.js

@@ -133,6 +133,7 @@ class SignInContainer extends Component {
           showErrors={showErrors}
           formData={formData}
           errors={errors}
+          signInError={auth.get('signInError')}
           {...this}
           {...this.props}
         />