Ivan - Create message component and implement in password recover page [skip ci]

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

@@ -11,6 +11,7 @@ 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 Message         from 'core-components/message';
 
 const MainRecoverPasswordPage = React.createClass({
 
@@ -59,9 +60,9 @@ const MainRecoverPasswordPage = React.createClass({
     renderRecoverStatus() {
         switch (this.state.recoverStatus) {
             case 'valid':
-                return <div className="recover-password__text_valid">{i18n('VALID_RECOVER')}</div>;
+                return <Message type="success">{i18n('VALID_RECOVER')}</Message>;
             case 'invalid':
-                return <div className="recover-password__text_invalid">{i18n('INVALID_RECOVER')}</div>;
+                return <Message type="error">{i18n('INVALID_RECOVER')}</Message>;
             case 'waiting':
                 return null;
         }

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

@@ -9,6 +9,10 @@
         margin: 10px 0 0 0;
     }
 
+    &__submit-button {
+        margin-bottom: 40px;
+    }
+
     &__text_valid {
         color: green;
     }

client/src/core-components/icon.js

@@ -5,12 +5,12 @@ const Icon = React.createClass({
 
     propTypes: {
         name: React.PropTypes.string.isRequired,
-        size: React.PropTypes.number
+        size: React.PropTypes.string
     },
 
     getDefaultProps() {
         return {
-            size: 0
+            size: 'lg'
         };
     },
 

client/src/core-components/message.js

@@ -0,0 +1,79 @@
+import React              from 'react';
+import classNames         from 'classnames';
+
+import {Motion, spring}   from 'react-motion';
+import Icon               from 'core-components/icon';
+
+const Message = React.createClass({
+
+    propTypes: {
+        title: React.PropTypes.string,
+        children: React.PropTypes.node,
+        type: React.PropTypes.oneOf(['success', 'error', 'info'])
+    },
+
+    getDefaultProps() {
+        return {
+            type: 'info'
+        };
+    },
+
+    render() {
+        return (
+            <Motion {...this.getAnimationProps()}>
+                {this.renderMessage}
+            </Motion>
+        );
+    },
+
+    getAnimationProps() {
+        return {
+            defaultStyle: {
+                opacity: spring(0, [100, 30])
+            },
+            style: {
+                opacity: spring(1, [100, 30])
+            }
+        };
+    },
+
+    renderMessage(style) {
+        return (
+            <div className={this.getClass()} style={style} aria-live="assertive">
+                <Icon className="message__icon" name={this.getIconName()} size={this.getIconSize()} />
+                <div className="message__title">{this.props.title}</div>
+                <div className="message__content">{this.props.children}</div>
+            </div>
+        )
+    },
+
+    getClass() {
+        let classes = {
+            'message': true,
+            'message_success': (this.props.type === 'success'),
+            'message_error': (this.props.type === 'error'),
+            'message_info': (this.props.type === 'info'),
+            'message_with-title': (this.props.title),
+
+            [this.props.className]: (this.props.className)
+        };
+
+        return classNames(classes);
+    },
+
+    getIconName() {
+        let iconNames = {
+            'success': 'check-circle',
+            'error': 'exclamation-circle',
+            'info': 'info-circle'
+        };
+
+        return iconNames[this.props.type];
+    },
+
+    getIconSize() {
+        return (this.props.title) ? '2x' : 'lg';
+    }
+});
+
+export default Message;

client/src/core-components/message.scss

@@ -0,0 +1,86 @@
+@import "../scss/vars";
+
+.message {
+    padding: 10px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+
+    &__icon {
+        position: absolute;
+        top: 13px;
+        left: 13px;
+    }
+
+    &__title {
+
+    }
+
+    &__content {
+        color: white;
+    }
+
+    &_success {
+        background-color: #d8f7b3;
+
+        .message__icon {
+            color: #189e1e;
+        }
+
+        .message__title {
+            color: $primary-blue;
+        }
+
+        .message__content {
+            color: $primary-blue;
+        }
+    }
+
+    &_error {
+        background-color: #ffb4b4;
+
+        .message__icon {
+            color: red;
+        }
+
+        .message__title {
+            color: #bb4242;
+        }
+
+        .message__content {
+            color: white;
+        }
+    }
+
+    &_info {
+        background-color: #a2e1ff;
+
+        .message__icon {
+            color: #4c80ff;
+        }
+
+        .message__title {
+            color: $primary-blue;
+        }
+
+        .message__content {
+            color: $primary-blue;
+        }
+    }
+
+    &_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;
+        }
+    }
+}

client/src/stores/user-store.js

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