Close and Cancel actions

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './styles.css';
+import Button from './Button';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations';
+const lang = new I18n(translations);
+
+const ForgotContent = ({changeView}) => (
+  <div>
+    <div className={styles.header}>
+      <h1>{lang.t('signIn.recoverPassword')}</h1>
+    </div>
+    <form>
+      <div className={styles.formField}>
+        <label htmlFor="email">{lang.t('signIn.email')}</label>
+        <input type="text" id="email" />
+      </div>
+      <Button type="black" className={styles.signInButton} onClick={()=>{}}>
+        {lang.t('signIn.recoverPassword')}
+      </Button>
+    </form>
+    <div className={styles.footer}>
+      <span>{lang.t('signIn.needAnAccount')} <a onClick={() => changeView('SIGNUP')}>{lang.t('signIn.register')}</a></span>
+      <span>{lang.t('signIn.alreadyHaveAnAccount')} <a onClick={() => changeView('SIGNIN')}>{lang.t('signIn.signIn')}</a></span>
+    </div>
+  </div>
+);
+
+export default ForgotContent;

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

@@ -4,11 +4,14 @@ import styles from './styles.css';
 
 import SignInContent from './SignInContent';
 import SingUpContent from './SignUpContent';
+import ForgotContent from './ForgotContent';
 
-const SignDialog = ({open, view, ...props}) => (
+const SignDialog = ({open, view, onClose, ...props}) => (
   <Dialog className={styles.dialog} open={open}>
+    <span className={styles.close} onClick={onClose}>×</span>
     {view === 'SIGNIN' && <SignInContent {...props} />}
     {view === 'SIGNUP' && <SingUpContent {...props} />}
+    {view === 'FORGOT' && <ForgotContent {...props} />}
   </Dialog>
 );
 

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

@@ -32,7 +32,7 @@ const SignInContent = ({openFacebookWindow, changeView}) => (
       </Button>
     </form>
     <div className={styles.footer}>
-      <span><a>{lang.t('signIn.forgotYourPass')}</a></span>
+      <span><a onClick={() => changeView('FORGOT')}>{lang.t('signIn.forgotYourPass')}</a></span>
       <span>{lang.t('signIn.needAnAccount')} <a onClick={() => changeView('SIGNUP')}>{lang.t('signIn.register')}</a></span>
     </div>
   </div>

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

@@ -104,4 +104,20 @@
 
 .signInButton {
     margin-top: 10px;
+}
+
+.close {
+    font-size: 20px;
+    line-height: 14px;
+    top: 10px;
+    right: 10px;
+    position: absolute;
+    display: block;
+    font-weight: bold;
+    color: #363636;
+    cursor: pointer;
+}
+
+.close:hover {
+    color: #6b6b6b;
 }

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

@@ -10,6 +10,7 @@ import {
   logout,
   showSignInDialog,
   changeView,
+  hideSignInDialog
 } from '../../coral-framework/actions/auth';
 
 class SignInContainer extends Component {
@@ -38,16 +39,15 @@ class SignInContainer extends Component {
   }
 }
 
-const mapStateToProps = state => ({
-  auth: state.auth
-});
+const mapStateToProps = ({auth}) => ({auth});
 
 const mapDispatchToProps = dispatch => ({
   loginFacebookCallback: () => dispatch(loginFacebookCallback()),
   loginFacebook: () => dispatch(loginFacebook()),
   logout: () => dispatch(logout()),
   showSignInDialog: () => dispatch(showSignInDialog()),
-  changeView: (view) => dispatch(changeView(view))
+  changeView: (view) => dispatch(changeView(view)),
+  onClose: () => dispatch(hideSignInDialog())
 });
 
 export default connect(

client/coral-sign-in/translations.js

@@ -14,7 +14,8 @@ export default {
       signUp: 'Sign Up',
       confirmPassword: 'Confirm Password',
       username: 'Username',
-      alreadyHaveAnAccount: 'Already have an account?'
+      alreadyHaveAnAccount: 'Already have an account?',
+      recoverPassword: 'Recover password'
     }
   },
   es: {
@@ -32,7 +33,8 @@ export default {
       signUp: 'Registro',
       confirmPassword: 'Confirmar Contraseña',
       username: 'Usuario',
-      alreadyHaveAnAccount: 'Ya tienes una cuenta?'
+      alreadyHaveAnAccount: 'Ya tienes una cuenta?',
+      recoverPassword: 'Recuperar contraseña'
     }
   }
 };