diff --git a/client/coral-sign-in/components/ForgotContent.js b/client/coral-sign-in/components/ForgotContent.js new file mode 100644 index 000000000..9f32f6933 --- /dev/null +++ b/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}) => ( +
+
+

{lang.t('signIn.recoverPassword')}

+
+
+
+ + +
+ +
+
+ {lang.t('signIn.needAnAccount')} changeView('SIGNUP')}>{lang.t('signIn.register')} + {lang.t('signIn.alreadyHaveAnAccount')} changeView('SIGNIN')}>{lang.t('signIn.signIn')} +
+
+); + +export default ForgotContent; diff --git a/client/coral-sign-in/components/SignDialog.js b/client/coral-sign-in/components/SignDialog.js index 6aadc1744..e5c6f0ea4 100644 --- a/client/coral-sign-in/components/SignDialog.js +++ b/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}) => ( + × {view === 'SIGNIN' && } {view === 'SIGNUP' && } + {view === 'FORGOT' && } ); diff --git a/client/coral-sign-in/components/SignInContent.js b/client/coral-sign-in/components/SignInContent.js index 54428dbe9..4764f1cb2 100644 --- a/client/coral-sign-in/components/SignInContent.js +++ b/client/coral-sign-in/components/SignInContent.js @@ -32,7 +32,7 @@ const SignInContent = ({openFacebookWindow, changeView}) => (
- {lang.t('signIn.forgotYourPass')} + changeView('FORGOT')}>{lang.t('signIn.forgotYourPass')} {lang.t('signIn.needAnAccount')} changeView('SIGNUP')}>{lang.t('signIn.register')}
diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css index b289ac8fb..e7d77b85c 100644 --- a/client/coral-sign-in/components/styles.css +++ b/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; } \ No newline at end of file diff --git a/client/coral-sign-in/containers/SignInContainer.js b/client/coral-sign-in/containers/SignInContainer.js index 4a1364ca6..e9e32d474 100644 --- a/client/coral-sign-in/containers/SignInContainer.js +++ b/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( diff --git a/client/coral-sign-in/translations.js b/client/coral-sign-in/translations.js index 1f11935bd..a0fd7015e 100644 --- a/client/coral-sign-in/translations.js +++ b/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' } } };