tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Add SubmitButton with loading [skip ci]

This commit is contained in:
ivan 2016-08-01 16:15:52 -03:00
parent db32a2a6ab
commit dae244bee2
9 changed files with 180 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
client/src/app/main/main-home/main-home-page-login-widget.js
View File

@ -8,6 +8,7 @@ import UserStore from 'stores/user-store';
import focus from 'lib-core/focus';
import i18n from 'lib-app/i18n';
import SubmitButton from 'core-components/submit-button';
import Button from 'core-components/button';
import Form from 'core-components/form';
import Input from 'core-components/input';
@ -25,7 +26,8 @@ let MainHomePageLoginWidget = React.createClass({
sideToShow: 'front',
loginFormErrors: {},
recoverFormErrors: {},
recoverSent: false
recoverSent: false,
loading: false
};
},
@ -41,14 +43,14 @@ let MainHomePageLoginWidget = React.createClass({
renderLogin() {
return (
<Widget className="main-home-page__widget" title="Login" ref="loginWidget">
<Form className="login-widget__form" ref="loginForm" onSubmit={this.handleLoginFormSubmit} errors={this.state.loginFormErrors} onValidateErrors={this.handleLoginFormErrorsValidation}>
<Form {...this.getLoginFormProps()}>
<div className="login-widget__inputs">
<Input placeholder="email" name="email" className="login-widget__input" validation="EMAIL" required/>
<Input placeholder="password" name="password" className="login-widget__input" password required/>
<Checkbox name="remember" label="Remember Me" className="login-widget__input"/>
</div>
<div className="login-widget__submit-button">
<Button type="primary">LOG IN</Button>
<SubmitButton type="primary">LOG IN</SubmitButton>
</div>
</Form>
<Button className="login-widget__forgot-password" type="link" onClick={this.handleForgotPasswordClick} onMouseDown={(event) => {event.preventDefault()}}>
@ -61,12 +63,12 @@ let MainHomePageLoginWidget = React.createClass({
renderPasswordRecovery() {
return (
<Widget className="main-home-page__widget login-widget_password" title={i18n('RECOVER_PASSWORD')} ref="recoverWidget">
<Form className="login-widget__form" ref="recoverForm" onSubmit={this.handleForgotPasswordSubmit} errors={this.state.recoverFormErrors} onValidateErrors={this.handleRecoverFormErrorsValidation}>
<Form {...this.getRecoverFormProps()}>
<div className="login-widget__inputs">
<Input placeholder="email" name="email" className="login-widget__input" validation="EMAIL" required/>
</div>
<div className="login-widget__submit-button">
<Button type="primary">{i18n('RECOVER_PASSWORD')}</Button>
<SubmitButton type="primary">{i18n('RECOVER_PASSWORD')}</SubmitButton>
</div>
</Form>
<Button className="login-widget__forgot-password" type="link" onClick={this.handleBackToLoginClick} onMouseDown={(event) => {event.preventDefault()}}>
@ -91,12 +93,42 @@ let MainHomePageLoginWidget = React.createClass({
return status;
},
getLoginFormProps() {
return {
loading: this.state.loading,
className: 'login-widget__form',
ref: 'loginForm',
onSubmit:this.handleLoginFormSubmit,
errors: this.state.loginFormErrors,
onValidateErrors: this.handleLoginFormErrorsValidation
};
},
getRecoverFormProps() {
return {
loading: this.state.loading,
className: 'login-widget__form',
ref: 'recoverForm',
onSubmit:this.handleForgotPasswordSubmit,
errors: this.state.recoverFormErrors,
onValidateErrors: this.handleRecoverFormErrorsValidation
};
},
handleLoginFormSubmit(formState) {
UserActions.login(formState);
this.setState({
loading: true
});
},
handleForgotPasswordSubmit(formState) {
UserActions.sendRecover(formState);
this.setState({
loading: true
});
},
handleLoginFormErrorsValidation(errors) {
@ -119,13 +151,15 @@ let MainHomePageLoginWidget = React.createClass({
handleBackToLoginClick() {
this.setState({
sideToShow: 'front'
sideToShow: 'front',
recoverSent: false
}, this.moveFocusToCurrentSide);
},
onUserStoreChanged(event) {
if (event === 'LOGIN_FAIL') {
this.setState({
loading: false,
loginFormErrors: {
password: i18n('ERROR_PASSWORD')
}
@ -136,6 +170,7 @@ let MainHomePageLoginWidget = React.createClass({
if (event === 'SEND_RECOVER_FAIL') {
this.setState({
loading: false,
recoverFormErrors: {
email: i18n('EMAIL_NOT_EXIST')
}
@ -147,6 +182,7 @@ let MainHomePageLoginWidget = React.createClass({
if (event === 'SEND_RECOVER_SUCCESS') {
this.setState({
loading: false,
recoverSent: true
});
}

19
client/src/app/main/main-recover-password/main-recover-password-page.js
View File

@ -10,7 +10,7 @@ import i18n from 'lib-app/i18n';
import Widget from 'core-components/widget';
import Form from 'core-components/form';
import Input from 'core-components/input';
import Button from 'core-components/button';
import SubmitButton from 'core-components/submit-button';
import Message from 'core-components/message';
const MainRecoverPasswordPage = React.createClass({
@ -34,7 +34,8 @@ const MainRecoverPasswordPage = React.createClass({
getInitialState() {
return {
recoverStatus: 'waiting'
recoverStatus: 'waiting',
loading: false
};
},
@ -42,13 +43,13 @@ const MainRecoverPasswordPage = React.createClass({
return (
<div className="main-recover-password-page">
<Widget title={i18n('RECOVER_PASSWORD')} className="col-md-4 col-md-offset-4">
<Form className="recover-password__form" onSubmit={this.handleRecoverPasswordSubmit}>
<Form className="recover-password__form" onSubmit={this.handleRecoverPasswordSubmit} loading={this.state.loading}>
<div className="recover-password__inputs">
<Input placeholder={i18n('NEW_PASSWORD')} name="password" className="recover-password__input" validation="PASSWORD" password required/>
<Input placeholder={i18n('REPEAT_NEW_PASSWORD')} name="password-repeat" className="recover-password__input" validation="REPEAT_PASSWORD" password required/>
</div>
<div className="recover-password__submit-button">
<Button type="primary">{i18n('SUBMIT')}</Button>
<SubmitButton type="primary">{i18n('SUBMIT')}</SubmitButton>
</div>
{this.renderRecoverStatus()}
</Form>
@ -74,16 +75,22 @@ const MainRecoverPasswordPage = React.createClass({
recoverData.email = this.props.location.query.email;
UserActions.recoverPassword(formState);
this.setState({
loading: true
});
},
onUserStoreChanged(event) {
if (event === 'VALID_RECOVER') {
setTimeout(CommonActions.loggedOut, 2000);
this.setState({
recoverStatus: 'valid'
recoverStatus: 'valid',
loading: false
});
} else {
this.setState({
recoverStatus: 'invalid'
recoverStatus: 'invalid',
loading: false
});
}
}

5
client/src/core-components/button.js
View File

@ -6,7 +6,7 @@ import classNames from 'classnames';
// CORE LIBS
import callback from 'lib-core/callback';
let Button = React.createClass({
const Button = React.createClass({
contextTypes: {
router: React.PropTypes.object
@ -54,7 +54,8 @@ let Button = React.createClass({
getClass() {
let classes = {
'button': true
'button': true,
'button_disabled': this.props.disabled
};
classes['button-' + this.props.type] = (this.props.type);

4
client/src/core-components/button.scss
View File

@ -27,4 +27,8 @@
outline: none;
}
}
&_disabled {
background-color: #ec9696;
}
}

12
client/src/core-components/form.js
View File

@ -10,11 +10,22 @@ const Checkbox = require('core-components/checkbox');
const Form = React.createClass({
propTypes: {
loading: React.PropTypes.bool,
errors: React.PropTypes.object,
onValidateErrors: React.PropTypes.func,
onSubmit: React.PropTypes.func
},
childContextTypes: {
loading: React.PropTypes.bool
},
getChildContext() {
return {
loading: this.props.loading
};
},
getInitialState() {
return {
form: {},
@ -41,6 +52,7 @@ const Form = React.createClass({
props.onSubmit = this.handleSubmit;
delete props.errors;
delete props.loading;
delete props.onValidateErrors;
return props;

58
client/src/core-components/submit-button.js Normal file
View File

@ -0,0 +1,58 @@
// VENDOR LIBS
import React from 'react';
import _ from 'lodash';
import classNames from 'classnames';
// CORE LIBS
import Button from 'core-components/button';
const SubmitButton = React.createClass({
contextTypes: {
loading: React.PropTypes.bool
},
propTypes: {
children: React.PropTypes.node
},
getDefaultProps() {
return {
type: 'primary'
};
},
render() {
return (
<Button {...this.getProps()}>
{(this.context.loading) ? this.renderLoading() : this.props.children}
</Button>
);
},
renderLoading() {
return (
<div className="submit-button__loader"></div>
);
},
getProps() {
return _.extend({}, this.props, {
disabled: this.context.loading,
className: this.getClass()
});
},
getClass() {
let classes = {
'submit-button': true,
'submit-button_loading': this.context.loading
};
classes[this.props.className] = (this.props.className);
return classNames(classes);
}
});
export default SubmitButton;

46
client/src/core-components/submit-button.scss Normal file
View File

@ -0,0 +1,46 @@
.submit-button {
position: relative;
&__loader {
position: absolute;
top: 7px;
left: 103px;
font-size: 4px;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: turnAnimation 1.1s infinite linear;
animation: turnAnimation 1.1s infinite linear;
}
&__loader,
&__loader:after {
border-radius: 50%;
width: 30px;
height: 30px;
}
@-webkit-keyframes turnAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes turnAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}

4
client/src/data/fixtures/user-fixtures.js
View File

@ -49,7 +49,7 @@ module.exports = [
},
{
path: 'user/send-recover-password',
time: 100,
time: 2000,
response: function (data) {
if (data.email.length > 10) {
@ -68,7 +68,7 @@ module.exports = [
},
{
path: 'user/recover-password',
time: 100,
time: 1000,
response: function (data) {
if (data.password.length > 6) {

1
client/src/stores/user-store.js
View File

@ -72,7 +72,6 @@ const UserStore = Reflux.createStore({
data: recoverData
}).then(() => {
this.trigger('VALID_RECOVER');
setTimeout(CommonActions.loggedOut, 1000);
}, () => {
this.trigger('INVALID_RECOVER')
});