From d6dc3a8ba1163d8c96adbdc172a0e5519c7c0e29 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sat, 12 Nov 2016 12:21:33 -0300 Subject: [PATCH] Sign up steps and Login --- client/coral-framework/actions/auth.js | 25 +++++++ client/coral-framework/constants/auth.js | 6 +- client/coral-framework/reducers/auth.js | 13 ++-- client/coral-sign-in/components/Button.js | 4 +- client/coral-sign-in/components/SignDialog.js | 15 +++++ client/coral-sign-in/components/SignIn.js | 12 ---- .../coral-sign-in/components/SignInContent.js | 41 ++++++++++++ .../coral-sign-in/components/SignInDialog.js | 37 ---------- .../coral-sign-in/components/SignUpContent.js | 48 +++++++++++++ client/coral-sign-in/components/styles.css | 67 +++++++++++++++++-- .../containers/SignInContainer.js | 15 +++-- client/coral-sign-in/translations.js | 32 +++++++-- client/coral-ui/components/Dialog.js | 6 +- client/coral-ui/index.js | 2 +- 14 files changed, 251 insertions(+), 72 deletions(-) create mode 100644 client/coral-sign-in/components/SignDialog.js delete mode 100644 client/coral-sign-in/components/SignIn.js create mode 100644 client/coral-sign-in/components/SignInContent.js delete mode 100644 client/coral-sign-in/components/SignInDialog.js create mode 100644 client/coral-sign-in/components/SignUpContent.js diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js index 805f9f412..b77b00003 100644 --- a/client/coral-framework/actions/auth.js +++ b/client/coral-framework/actions/auth.js @@ -64,3 +64,28 @@ export const loginFacebookRequest = () => ({ export const loginRequest = () => ({ type: actions.USER_SIGNIN_REQUEST }); + +const showSignInForm = () => ({ + type: actions.SHOW_SIGNIN_FORM +}); + +const showSignUpForm = () => ({ + type: actions.SHOW_SIGNUP_FORM +}); + +const newStep = (step) => ({ + type: actions.NEW_STEP, + step +}); + +export const goTo = (step) => dispatch => { + dispatch(newStep(step)); + switch (step) { + case 1 : + return dispatch(showSignInForm()); + case 2 : + return dispatch(showSignUpForm()); + default : + return dispatch(showSignInForm()); + } +}; diff --git a/client/coral-framework/constants/auth.js b/client/coral-framework/constants/auth.js index c69bad344..476e4f225 100644 --- a/client/coral-framework/constants/auth.js +++ b/client/coral-framework/constants/auth.js @@ -8,4 +8,8 @@ export const USER_LOGOUT_REQUEST = 'USER_LOGOUT_REQUEST'; export const USER_LOGOUT_SUCCESS = 'USER_LOGOUT_SUCCESS'; export const USER_LOGOUT_FAILURE = 'USER_LOGOUT_FAILURE'; export const SHOW_SIGNIN_DIALOG = 'SHOW_SIGNIN_DIALOG'; -export const HIDE_SIGNIN_DIALOG = 'HIDE_SIGNIN_DIALOG'; \ No newline at end of file +export const HIDE_SIGNIN_DIALOG = 'HIDE_SIGNIN_DIALOG'; + +export const NEW_STEP = 'NEW_STEP'; +export const SHOW_SIGNIN_FORM = 'SHOW_SIGNIN_FORM'; +export const SHOW_SIGNUP_FORM = 'SHOW_SIGNUP_FORM'; diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js index a6c4369f9..babbe20d1 100644 --- a/client/coral-framework/reducers/auth.js +++ b/client/coral-framework/reducers/auth.js @@ -2,7 +2,8 @@ import {Map} from 'immutable'; import { SHOW_SIGNIN_DIALOG, - HIDE_SIGNIN_DIALOG + HIDE_SIGNIN_DIALOG, + NEW_STEP } from '../constants/auth'; const initialState = Map({ @@ -10,17 +11,21 @@ const initialState = Map({ loggedIn: false, error: '', user: {}, - showSignInDialog: false + showSignInDialog: false, + step: 1 }); export default function community (state = initialState, action) { switch (action.type) { case SHOW_SIGNIN_DIALOG : return state - .set('showSignInDialog', true) + .set('showSignInDialog', true); case HIDE_SIGNIN_DIALOG : return state - .set('showSignInDialog', false) + .set('showSignInDialog', false); + case NEW_STEP : + return state + .set('step', action.step); default : return state; } diff --git a/client/coral-sign-in/components/Button.js b/client/coral-sign-in/components/Button.js index fd8cc85c7..3f736ac3d 100644 --- a/client/coral-sign-in/components/Button.js +++ b/client/coral-sign-in/components/Button.js @@ -1,9 +1,9 @@ import React from 'react'; import styles from './styles.css'; -const Button = ({type = 'local', children, ...props}) => ( +const Button = ({type = 'local', children, className, ...props}) => ( - {children} - -); - -export default SignIn; diff --git a/client/coral-sign-in/components/SignInContent.js b/client/coral-sign-in/components/SignInContent.js new file mode 100644 index 000000000..f8893fb25 --- /dev/null +++ b/client/coral-sign-in/components/SignInContent.js @@ -0,0 +1,41 @@ +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 SignInContent = ({openFacebookWindow, goTo}) => ( +
+
+

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

+
+
+ +
+
+

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

+
+
+
+ + +
+
+ + +
+ +
+
+ {lang.t('signIn.forgotYourPass')} + {lang.t('signIn.needAnAccount')} goTo(2)}>{lang.t('signIn.register')} +
+
+); + +export default SignInContent; diff --git a/client/coral-sign-in/components/SignInDialog.js b/client/coral-sign-in/components/SignInDialog.js deleted file mode 100644 index f4f089a19..000000000 --- a/client/coral-sign-in/components/SignInDialog.js +++ /dev/null @@ -1,37 +0,0 @@ -import React, {Component} from 'react'; -import { Dialog } from 'coral-ui'; -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 SignInDialog = ({open, openFacebookWindow}) => ( - -

Sign In

- -
-
- - - - Forgot Password - Need an Account? Register -
- -); - -export default SignInDialog; diff --git a/client/coral-sign-in/components/SignUpContent.js b/client/coral-sign-in/components/SignUpContent.js new file mode 100644 index 000000000..2568797a7 --- /dev/null +++ b/client/coral-sign-in/components/SignUpContent.js @@ -0,0 +1,48 @@ +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 SignUpContent = ({goTo, openFacebookWindow}) => ( +
+
+

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

+
+
+ +
+
+

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

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ {lang.t('signIn.alreadyHaveAnAccount')} goTo(1)}>{lang.t('signIn.signIn')} +
+
+); + +export default SignUpContent; diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css index 594b2e701..b289ac8fb 100644 --- a/client/coral-sign-in/components/styles.css +++ b/client/coral-sign-in/components/styles.css @@ -12,7 +12,6 @@ font-family: 'Roboto','Helvetica','Arial',sans-serif; font-size: 14px; font-weight: 500; - text-transform: uppercase; letter-spacing: 0; overflow: hidden; will-change: box-shadow,transform; @@ -24,20 +23,27 @@ text-align: center; line-height: 36px; vertical-align: middle; + width: 100%; + margin: 0; } -.local { +.type--black { + color: #E0E0E0; + background: #212121; +} + +.type--local { background: #E0E0E0; color: #212121; } -.facebook { +.type--facebook { background-color: #4267b2; border-color: #4267b2; color: rgb(255, 255, 255); } -.facebook:hover { +.type--facebook:hover { background-color: #365899; border-color: #365899; } @@ -45,4 +51,57 @@ .dialog { width: 400px; border: none; + border: none; + box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); + width: 280px; +} + +.header { + margin-bottom: 20px; +} + +.header h1, .separator h1{ + text-align: center; + font-size: 1.2em; +} + +.formField label { + font-size: 1.08em; + font-weight: bold; + margin-bottom: 5px; +} + +.formField input { + width: 100%; + display: block; + border: none; + outline: none; + border: 1px solid rgba(0,0,0,.12); + padding: 10px 6px; + box-sizing: border-box; + border-radius: 2px; + margin: 5px auto; +} + +.footer { + margin: 20px auto 10px; + text-align: center; +} + +.footer span { + display: block; + margin-bottom: 5px; +} + +.footer a { + color: #2c69b6; + cursor: pointer; +} + +.socialConnections { + margin-bottom: 20px; +} + +.signInButton { + margin-top: 10px; } \ 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 4df96c49a..7c7bd7775 100644 --- a/client/coral-sign-in/containers/SignInContainer.js +++ b/client/coral-sign-in/containers/SignInContainer.js @@ -1,15 +1,15 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; -import SignIn from '../components/SignIn'; -import SignInDialog from '../components/SignInDialog'; +import SignDialog from '../components/SignDialog'; import Button from '../components/Button'; import { loginFacebookCallback, loginFacebook, logout, - showSignInDialog + showSignInDialog, + goTo, } from '../../coral-framework/actions/auth'; class SignInContainer extends Component { @@ -19,6 +19,7 @@ class SignInContainer extends Component { this.openFacebookWindow = this.openFacebookWindow.bind(this); this.openSignInDialog = this.openSignInDialog.bind(this); this.logout = this.logout.bind(this); + this.goTo = this.goTo.bind(this); } componentDidMount() { @@ -37,6 +38,10 @@ class SignInContainer extends Component { this.props.dispatch(showSignInDialog()); } + goTo(step = 1) { + this.props.dispatch(goTo(step)); + } + render() { const {auth} = this.props; return ( @@ -44,9 +49,11 @@ class SignInContainer extends Component { - ); diff --git a/client/coral-sign-in/translations.js b/client/coral-sign-in/translations.js index 16e3a0425..1f11935bd 100644 --- a/client/coral-sign-in/translations.js +++ b/client/coral-sign-in/translations.js @@ -1,14 +1,38 @@ export default { en: { 'signIn': { - facebookLogin: 'Continue with Facebook', - logout: 'Logout' + facebookSignIn: 'Sign in with Facebook', + facebookSignUp: 'Sign up with Facebook', + logout: 'Logout', + signIn: 'Sign In', + or: 'Or', + email: 'E-mail Address', + password: 'Password', + forgotYourPass: 'Forgot your password?', + needAnAccount: 'Need an account?', + register: 'Register', + signUp: 'Sign Up', + confirmPassword: 'Confirm Password', + username: 'Username', + alreadyHaveAnAccount: 'Already have an account?' } }, es: { 'signIn': { - facebookLogin: 'Continuar con Facebook', - logout: 'Salir' + facebookSignIn: 'Entrar con Facebook', + facebookSignUp: 'Regístrate con Facebook', + logout: 'Salir', + signIn: 'Entrar', + or: 'o', + email: 'E-mail', + password: 'Contraseña', + forgotYourPass: 'Has olvidado tu contraseña?', + needAnAccount: 'Necesitas una cuenta?', + register: 'Regístrate', + signUp: 'Registro', + confirmPassword: 'Confirmar Contraseña', + username: 'Usuario', + alreadyHaveAnAccount: 'Ya tienes una cuenta?' } } }; diff --git a/client/coral-ui/components/Dialog.js b/client/coral-ui/components/Dialog.js index 54f0723e6..3f6585297 100644 --- a/client/coral-ui/components/Dialog.js +++ b/client/coral-ui/components/Dialog.js @@ -47,7 +47,7 @@ export default class Dialog extends Component { } render() { - const { children, className = '', onClose, onCancel, open, ...rest } = this.props; + const {children, className = '', onClose, onCancel, open, ...rest} = this.props; // eslint-disable-line return ( {children} - ) + ); } -} \ No newline at end of file +} diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js index 3d76a5912..5116a16dd 100644 --- a/client/coral-ui/index.js +++ b/client/coral-ui/index.js @@ -1 +1 @@ -export { default as Dialog } from './components/Dialog'; \ No newline at end of file +export {default as Dialog} from './components/Dialog';