Ivan - Add SubmitButton with loading [skip ci]

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

@@ -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
             });
         }

client/src/app/main/main-recover-password/main-recover-password-page.js

@@ -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
             });
         }
     }

client/src/core-components/button.js

@@ -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);

client/src/core-components/button.scss

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

client/src/core-components/form.js

@@ -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;

client/src/core-components/submit-button.js

@@ -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;

client/src/core-components/submit-button.scss

@@ -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);
+        }
+    }
+}

client/src/data/fixtures/user-fixtures.js

@@ -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) {

client/src/stores/user-store.js

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