From 19ede0ff8925a0774429976e27424aba992a5938 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 17 Nov 2016 10:39:51 -0300 Subject: [PATCH] Success Button SVG and Redirect to signIn --- client/coral-framework/actions/auth.js | 4 +- client/coral-framework/reducers/auth.js | 56 ++++++++----------- .../coral-sign-in/components/SignUpContent.js | 16 +++--- .../containers/SignInContainer.js | 4 +- client/coral-ui/components/Success.css | 55 ++++++++++++++++++ client/coral-ui/components/Success.js | 13 +++++ 6 files changed, 105 insertions(+), 43 deletions(-) create mode 100644 client/coral-ui/components/Success.css create mode 100644 client/coral-ui/components/Success.js diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js index 19fa2c499..fd749cd50 100644 --- a/client/coral-framework/actions/auth.js +++ b/client/coral-framework/actions/auth.js @@ -71,7 +71,9 @@ export const fetchSignUp = formData => dispatch => { .then(handleResp) .then(({user}) => { dispatch(signUpSuccess(user)); - dispatch(hideSignInDialog()); + setTimeout(() =>{ + dispatch(changeView('SIGNIN')); + }, 3000); }) .catch((error) => dispatch(signUpFailure(error))); }; diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js index c2bdc20db..1662a9635 100644 --- a/client/coral-framework/reducers/auth.js +++ b/client/coral-framework/reducers/auth.js @@ -1,20 +1,5 @@ import {Map} from 'immutable'; - -import { - SHOW_SIGNIN_DIALOG, - HIDE_SIGNIN_DIALOG, - CHANGE_VIEW, - CLEAN_STATE, - FETCH_SIGNIN_REQUEST, - FETCH_SIGNIN_FAILURE, - FETCH_SIGNIN_SUCCESS, - FETCH_SIGNIN_FACEBOOK_SUCCESS, - FETCH_SIGNIN_FACEBOOK_FAILURE, - LOGOUT_SUCCESS, - FETCH_SIGNUP_FAILURE, - AVAILABLE_FIELD, - UNAVAILABLE_FIELD -} from '../constants/auth'; +import * as actions from '../constants/auth'; const initialState = Map({ isLoading: false, @@ -22,17 +7,17 @@ const initialState = Map({ user: null, showSignInDialog: false, view: 'SIGNIN', - signInError: '', signUpError: '', emailAvailable: true, + successSignUp: false }); export default function auth (state = initialState, action) { switch (action.type) { - case SHOW_SIGNIN_DIALOG : + case actions.SHOW_SIGNIN_DIALOG : return state .set('showSignInDialog', true); - case HIDE_SIGNIN_DIALOG : + case actions.HIDE_SIGNIN_DIALOG : return state.merge(Map({ isLoading: false, showSignInDialog: false, @@ -40,43 +25,50 @@ export default function auth (state = initialState, action) { signInError: '', signUpError: '', emailAvailable: true, + successSignUp: false })); - case CHANGE_VIEW : + case actions.CHANGE_VIEW : return state .set('view', action.view); - case CLEAN_STATE: + case actions.CLEAN_STATE: return initialState; - case FETCH_SIGNIN_REQUEST: + case actions.FETCH_SIGNIN_REQUEST: return state .set('isLoading', true); - case FETCH_SIGNIN_SUCCESS: + case actions.FETCH_SIGNIN_SUCCESS: return state .set('loggedIn', true) .set('user', action.user); - case FETCH_SIGNIN_FAILURE: + case actions.FETCH_SIGNIN_FAILURE: return state .set('isLoading', false) .set('signInError', action.error); - case FETCH_SIGNIN_FACEBOOK_SUCCESS: + case actions.FETCH_SIGNIN_FACEBOOK_SUCCESS: return state .set('user', action.user) .set('loggedIn', true); - case FETCH_SIGNIN_FACEBOOK_FAILURE: + case actions.FETCH_SIGNIN_FACEBOOK_FAILURE: return state .set('error', action.error) .set('user', null); - case FETCH_SIGNUP_FAILURE: - console.log(action); + case actions.FETCH_SIGNUP_REQUEST: return state - .set('signUpError', action.error); - case LOGOUT_SUCCESS: + .set('isLoading', true); + case actions.FETCH_SIGNUP_FAILURE: + return state + .set('isLoading', false); + case actions.FETCH_SIGNUP_SUCCESS: + return state + .set('isLoading', false) + .set('successSignUp', true); + case actions.LOGOUT_SUCCESS: return state .set('loggedIn', false) .set('user', null); - case AVAILABLE_FIELD: + case actions.AVAILABLE_FIELD: return state .set(`${action.field}Available`, true); - case UNAVAILABLE_FIELD: + case actions.UNAVAILABLE_FIELD: return state .set(`${action.field}Available`, false); default : diff --git a/client/coral-sign-in/components/SignUpContent.js b/client/coral-sign-in/components/SignUpContent.js index adc377dbf..f90e0db5f 100644 --- a/client/coral-sign-in/components/SignUpContent.js +++ b/client/coral-sign-in/components/SignUpContent.js @@ -3,6 +3,7 @@ import FormField from './FormField'; import Alert from './Alert'; import Button from 'coral-ui/components/Button'; import Spinner from 'coral-ui/components/Spinner'; +import Success from 'coral-ui/components/Success'; import styles from './styles.css'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations'; @@ -68,14 +69,13 @@ const SignUpContent = ({handleChange, formData, ...props}) => ( minLength="8" />
- { - !props.auth.isLoading ? - - : - - } + { !props.auth.isLoading && !props.auth.successSignUp && ( + + )} + { props.auth.isLoading && } + { !props.auth.isLoading && props.auth.successSignUp && }
diff --git a/client/coral-sign-in/containers/SignInContainer.js b/client/coral-sign-in/containers/SignInContainer.js index 120e97120..0d138c3b0 100644 --- a/client/coral-sign-in/containers/SignInContainer.js +++ b/client/coral-sign-in/containers/SignInContainer.js @@ -76,7 +76,7 @@ class SignInContainer extends Component { if (!value.length) { addError(name, 'Please, fill this field'); } else if (name === 'confirmPassword' && formData.confirmPassword !== formData.password) { - addError(name, 'Passwords don`t match. Please, check again.'); + addError('confirmPassword', 'Passwords don`t match. Please, check again'); } else if (!validate[name](value)) { addError(name, errorMsj[name]); } else { @@ -85,7 +85,7 @@ class SignInContainer extends Component { this.setState(state => ({...state, errors})); // Checks Email Availability if (name === 'email') { - debounce(() => checkAvailability({[name]: value}), 250); + debounce(() => checkAvailability({[name]: value}), 200, { 'maxWait': 1000 })(); } } } diff --git a/client/coral-ui/components/Success.css b/client/coral-ui/components/Success.css new file mode 100644 index 000000000..00b5ba260 --- /dev/null +++ b/client/coral-ui/components/Success.css @@ -0,0 +1,55 @@ +.container { + display: block; + text-align: center; +} + +.circle { + stroke-dasharray: 166; + stroke-dashoffset: 166; + stroke-width: 2; + stroke-miterlimit: 10; + stroke: #00897B; + fill: none; + animation: stroke .6s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards; +} + +.checkmark { + width: 56px; + height: 56px; + border-radius: 50%; + display: block; + stroke-width: 2; + stroke: #fff; + stroke-miterlimit: 10; + margin: 10% auto; + box-shadow: inset 0px 0px 0px #00897B; + animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; +} + +.check { + transform-origin: 50% 50%; + stroke-dasharray: 48; + stroke-dashoffset: 48; + animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .8s forwards; +} + +@keyframes stroke { + 100% { + stroke-dashoffset: 0; + } +} + +@keyframes scale { + 0%, 100% { + transform: none; + } + 50% { + transform: scale3d(1.1, 1.1, 1); + } +} + +@keyframes fill { + 100% { + box-shadow: inset 0px 0px 0px 30px #00897B; + } +} \ No newline at end of file diff --git a/client/coral-ui/components/Success.js b/client/coral-ui/components/Success.js new file mode 100644 index 000000000..7429b9a6e --- /dev/null +++ b/client/coral-ui/components/Success.js @@ -0,0 +1,13 @@ +import React from 'react'; +import styles from './Success.css'; + +const Success = () => ( +
+ + + + +
+); + +export default Success; \ No newline at end of file