Ivan - Implement message component in login recover widget [skip ci]

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

@@ -14,6 +14,7 @@ import Input            from 'core-components/input';
 import Checkbox         from 'core-components/checkbox';
 import Widget           from 'core-components/widget';
 import WidgetTransition from 'core-components/widget-transition';
+import Message          from 'core-components/message';
 
 let MainHomePageLoginWidget = React.createClass({
     
@@ -22,13 +23,14 @@ let MainHomePageLoginWidget = React.createClass({
     getInitialState() {
         return {
             sideToShow: 'front',
-            loginFormErrors: {}
+            loginFormErrors: {},
+            recoverSent: false
         };
     },
 
     render() {
         return (
-            <WidgetTransition sideToShow={this.state.sideToShow} className={classNames('login-widget--container', this.props.className)}>
+            <WidgetTransition sideToShow={this.state.sideToShow} className={classNames('login-widget__container', this.props.className)}>
                 {this.renderLogin()}
                 {this.renderPasswordRecovery()}
             </WidgetTransition>
@@ -37,18 +39,18 @@ let MainHomePageLoginWidget = React.createClass({
 
     renderLogin() {
         return (
-            <Widget className="main-home-page--widget" title="Login" ref="loginWidget">
+            <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 className="login-widget__form" ref="loginForm" onSubmit={this.handleLoginFormSubmit} errors={this.state.loginFormErrors} onValidateErrors={this.handleLoginFormErrorsValidation}>
-                    <div className="login-widget--inputs">
+                    <div className="login-widget__inputs">
-                        <Input placeholder="email" name="email" className="login-widget--input" validation="EMAIL" required/>
+                        <Input placeholder="email" name="email" className="login-widget__input" validation="EMAIL" required/>
-                        <Input placeholder="password" name="password" className="login-widget--input" password required/>
+                        <Input placeholder="password" name="password" className="login-widget__input" password required/>
-                        <Checkbox name="remember" label="Remember Me" className="login-widget--input"/>
+                        <Checkbox name="remember" label="Remember Me" className="login-widget__input"/>
                     </div>
-                    <div className="login-widget--submit-button">
+                    <div className="login-widget__submit-button">
                         <Button type="primary">LOG IN</Button>
                     </div>
                 </Form>
-                <Button className="login-widget--forgot-password" type="link" onClick={this.handleForgotPasswordClick} onMouseDown={(event) => {event.preventDefault()}}>
+                <Button className="login-widget__forgot-password" type="link" onClick={this.handleForgotPasswordClick} onMouseDown={(event) => {event.preventDefault()}}>
                     {i18n('FORGOT_PASSWORD')}
                 </Button>
             </Widget>
@@ -57,28 +59,45 @@ let MainHomePageLoginWidget = React.createClass({
 
     renderPasswordRecovery() {
         return (
-            <Widget className="main-home-page--widget main-home-page--password-widget" title={i18n('RECOVER_PASSWORD')} ref="recoverWidget">
+            <Widget className="main-home-page__widget login-widget_password" title={i18n('RECOVER_PASSWORD')} ref="recoverWidget">
-                <Form className="login-widget--form" onSubmit={this.handleForgotPasswordSubmit}>
+                <Form className="login-widget__form" onSubmit={this.handleForgotPasswordSubmit}>
-                    <div className="login-widget--inputs">
+                    <div className="login-widget__inputs">
-                        <Input placeholder="email" name="email" className="login-widget--input" validation="EMAIL"/>
+                        <Input placeholder="email" name="email" className="login-widget__input" validation="EMAIL"/>
                     </div>
-                    <div className="login-widget--submit-button">
+                    <div className="login-widget__submit-button">
                         <Button type="primary">Recover my password</Button>
                     </div>
                 </Form>
-                <Button className="login-widget--forgot-password" type="link" onClick={this.handleBackToLoginClick} onMouseDown={(event) => {event.preventDefault()}}>
+                <Button className="login-widget__forgot-password" type="link" onClick={this.handleBackToLoginClick} onMouseDown={(event) => {event.preventDefault()}}>
                     {'Back to login form'}
                 </Button>
+                {this.renderRecoverStatus()}
             </Widget>
         );
     },
 
+    renderRecoverStatus() {
+        let status = null;
+
+        if (this.state.recoverSent) {
+            status = (
+                <Message className="login-widget__message" type="info" leftAligned>
+                    {i18n('RECOVER_SENT')}
+                </Message>
+            );
+        }
+
+        return status;
+    },
+
     handleLoginFormSubmit(formState) {
         UserActions.login(formState);
     },
 
     handleForgotPasswordSubmit() {
-
+        this.setState({
+            recoverSent: true
+        });
     },
 
     handleLoginFormErrorsValidation(errors) {

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

@@ -1,20 +1,28 @@
 .login-widget {
 
-    &--container {
+    &__container {
         height: 361px;
     }
 
-    &--input {
+    &__input {
         margin: 10px 0;
     }
 
-    &--inputs {
+    &__inputs {
         display: inline-block;
         margin: 0 auto 20px;
         text-align: left;
     }
 
-    &--forgot-password {
+    &__forgot-password {
         margin-top: 20px;
     }
+
+    &__message {
+        margin-top: 18px;
+    }
+
+    &_password {
+        width: 324px;
+    }
 }

client/src/core-components/message.js

@@ -54,6 +54,7 @@ const Message = React.createClass({
             'message_error': (this.props.type === 'error'),
             'message_info': (this.props.type === 'info'),
             'message_with-title': (this.props.title),
+            'message_left-aligned': (this.props.leftAligned),
 
             [this.props.className]: (this.props.className)
         };

client/src/core-components/message.scss

@@ -71,16 +71,28 @@
     &_with-title {
         text-align: left;
 
-        .message__title {
-            font-size: $font-size--md;
-            font-weight: bold;
-        }
-
         .message__icon {
             position: initial;
             float: left;
             margin-top: 7px;
             margin-right: 20px;
         }
+
+        .message__title {
+            font-size: $font-size--md;
+            font-weight: bold;
+        }
+
+        .message__content {
+            font-size: $font-size--sm;
+            overflow: auto;
+        }
+    }
+
+    &_left-aligned {
+        .message__content {
+            text-align: left;
+            padding-left: 28px;
+        }
     }
 }

client/src/data/languages/en.js

@@ -4,6 +4,7 @@ export default {
     'SIGN_UP': 'Sign up',
     'FORGOT_PASSWORD': 'Forgot your password?',
     'RECOVER_PASSWORD': 'Recover Password',
+    'RECOVER_SENT': 'An email with password recover instructions has been sent.',
     'NEW_PASSWORD': 'New password',
     'REPEAT_NEW_PASSWORD': 'Repeat new password',
     'VALID_RECOVER': 'Password recovered successfully',