From 954f6d9ee37d09840dd6b16295406bd3a5cfa832 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 15 Nov 2016 17:41:41 -0300
Subject: [PATCH] Sign in with local account

---
 client/coral-framework/actions/auth.js             | 12 ++++++------
 client/coral-framework/reducers/auth.js            | 13 +++++++++----
 client/coral-sign-in/components/SignInContent.js   |  2 +-
 client/coral-sign-in/components/styles.css         | 12 +++++-------
 client/coral-sign-in/containers/SignInContainer.js |  1 +
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js
index 3981d8021..896fb9aab 100644
--- a/client/coral-framework/actions/auth.js
+++ b/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
diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js
index 89e7c8012..001c98346 100644
--- a/client/coral-framework/reducers/auth.js
+++ b/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)
diff --git a/client/coral-sign-in/components/SignInContent.js b/client/coral-sign-in/components/SignInContent.js
index 6a1e726c5..aa3b712fa 100644
--- a/client/coral-sign-in/components/SignInContent.js
+++ b/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"
diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css
index 3a83d0985..a7c14d891 100644
--- a/client/coral-sign-in/components/styles.css
+++ b/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 {
diff --git a/client/coral-sign-in/containers/SignInContainer.js b/client/coral-sign-in/containers/SignInContainer.js
index 5f193f2e8..1fa3ff053 100644
--- a/client/coral-sign-in/containers/SignInContainer.js
+++ b/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}
         />