wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-20 12:40:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Success Button SVG and Redirect to signIn

Browse Source
This commit is contained in:
Belen Curcio
2016-11-17 10:39:51 -03:00
parent 9f13357d25
commit 19ede0ff89
6 changed files with 105 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-framework/actions/auth.js
+3 -1
View File
@@ -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)));
};
client/coral-framework/reducers/auth.js
+24 -32
View File
@@ -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 :
client/coral-sign-in/components/SignUpContent.js
+8 -8
View File
@@ -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"
/>
<div className={styles.action}>
{
!props.auth.isLoading ?
<Button type="submit" cStyle="black" className={styles.signInButton}>
{lang.t('signIn.signUp')}
</Button>
:
<Spinner />
}
{ !props.auth.isLoading && !props.auth.successSignUp && (
<Button type="submit" cStyle="black" className={styles.signInButton}>
{lang.t('signIn.signUp')}
</Button>
)}
{ props.auth.isLoading && <Spinner /> }
{ !props.auth.isLoading && props.auth.successSignUp && <Success /> }
</div>
</form>
<div className={styles.footer}>
client/coral-sign-in/containers/SignInContainer.js
+2 -2
View File
@@ -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 })();
}
}
}
client/coral-ui/components/Success.css
+55
View File
@@ -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;
}
}
client/coral-ui/components/Success.js
+13
View File
@@ -0,0 +1,13 @@
import React from 'react';
import styles from './Success.css';
const Success = () => (
<div className={styles.container}>
<svg className={styles.checkmark} viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
<circle className={styles.circle} cx="26" cy="26" r="25" fill="none"></circle>
<path className={styles.check} fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>
</div>
);
export default Success;