diff --git a/client/src/app/main/main-home/main-home-page-login-widget.js b/client/src/app/main/main-home/main-home-page-login-widget.js index 37884eb8..fb2a0eb1 100644 --- a/client/src/app/main/main-home/main-home-page-login-widget.js +++ b/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 ( - + {this.renderLogin()} {this.renderPasswordRecovery()} @@ -37,18 +39,18 @@ let MainHomePageLoginWidget = React.createClass({ renderLogin() { return ( - -
-
- - - + + +
+ + +
-
+
- @@ -57,28 +59,45 @@ let MainHomePageLoginWidget = React.createClass({ renderPasswordRecovery() { return ( - -
-
- + + +
+
-
+
- + {this.renderRecoverStatus()} ); }, + renderRecoverStatus() { + let status = null; + + if (this.state.recoverSent) { + status = ( + + {i18n('RECOVER_SENT')} + + ); + } + + return status; + }, + handleLoginFormSubmit(formState) { UserActions.login(formState); }, handleForgotPasswordSubmit() { - + this.setState({ + recoverSent: true + }); }, handleLoginFormErrorsValidation(errors) { diff --git a/client/src/app/main/main-home/main-home-page-login-widget.scss b/client/src/app/main/main-home/main-home-page-login-widget.scss index e62067a2..248ae7f2 100644 --- a/client/src/app/main/main-home/main-home-page-login-widget.scss +++ b/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; + } } \ No newline at end of file diff --git a/client/src/core-components/message.js b/client/src/core-components/message.js index 5c00c5a7..413f65ef 100644 --- a/client/src/core-components/message.js +++ b/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) }; diff --git a/client/src/core-components/message.scss b/client/src/core-components/message.scss index 010f7034..c8b8c980 100644 --- a/client/src/core-components/message.scss +++ b/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; + } } } \ No newline at end of file diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index f7cb3111..ea2f2ce1 100644 --- a/client/src/data/languages/en.js +++ b/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',