diff --git a/client/src/app-components/password-recovery.js b/client/src/app-components/password-recovery.js new file mode 100644 index 00000000..0ad6b79f --- /dev/null +++ b/client/src/app-components/password-recovery.js @@ -0,0 +1,54 @@ +import React from 'react'; +import classNames from 'classnames'; + +import i18n from 'lib-app/i18n'; + +import Form from 'core-components/form'; +import FormField from 'core-components/form-field'; +import Widget from 'core-components/widget'; +import Button from 'core-components/button'; +import SubmitButton from 'core-components/submit-button'; + +class PasswordRecovery extends React.Component { + + static propTypes = { + recoverSent: React.PropTypes.bool, + formProps: React.PropTypes.object, + onBackToLoginClick: React.PropTypes.func + }; + + render() { + return ( + +
+
+ +
+
+ {i18n('RECOVER_PASSWORD')} +
+
+ + {this.renderRecoverStatus()} +
+ ); + } + + renderRecoverStatus() { + let status = null; + + if (this.props.recoverSent) { + status = ( + + {i18n('RECOVER_SENT')} + + ); + } + + return status; + } +} + +export default PasswordRecovery; diff --git a/client/src/app-components/password-recovery.scss b/client/src/app-components/password-recovery.scss new file mode 100644 index 00000000..cf33ab9f --- /dev/null +++ b/client/src/app-components/password-recovery.scss @@ -0,0 +1,16 @@ +.password-recovery { + + &__inputs { + display: inline-block; + margin: 0 auto 20px; + text-align: left; + } + + &__forgot-password { + margin-top: 20px; + } + + &__message { + margin-top: 18px; + } +} diff --git a/client/src/app/admin/admin-login-page.js b/client/src/app/admin/admin-login-page.js index 54d38d5d..358ba8f6 100644 --- a/client/src/app/admin/admin-login-page.js +++ b/client/src/app/admin/admin-login-page.js @@ -6,14 +6,51 @@ import i18n from 'lib-app/i18n'; import API from 'lib-app/api-call'; import SessionActions from 'actions/session-actions'; +import Button from 'core-components/button'; import Form from 'core-components/form'; import FormField from 'core-components/form-field'; import SubmitButton from 'core-components/submit-button'; import Message from 'core-components/message'; import Widget from 'core-components/widget'; +import WidgetTransition from 'core-components/widget-transition'; class AdminLoginPage extends React.Component { + + state = { + sideToShow: 'front' + }; + render() { + return ( + + {this.renderLogin()} + {this.renderPasswordRecovery()} + + ) + } + + renderLogin() { + return ( +
+ +
OpenSupports Admin Panel
+
+
+ + + {i18n('LOG_IN')} + +
+ {this.renderMessage()} + +
+
+ ); + } + + renderPasswordRecovery() { return (
@@ -30,6 +67,10 @@ class AdminLoginPage extends React.Component {
); } + + onForgotPasswordClick() { + this.setState({sideToShow: 'back'}); + } renderMessage() { let message = null; 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 94c061c1..656170ac 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 @@ -9,6 +9,7 @@ import API from 'lib-app/api-call'; import focus from 'lib-core/focus'; import i18n from 'lib-app/i18n'; +import PasswordRecovery from 'app-components/password-recovery.js'; import SubmitButton from 'core-components/submit-button'; import Button from 'core-components/button'; import Form from 'core-components/form'; @@ -65,7 +66,8 @@ class MainHomePageLoginWidget extends React.Component { renderPasswordRecovery() { return ( - + + /*
@@ -78,7 +80,7 @@ class MainHomePageLoginWidget extends React.Component { {i18n('BACK_LOGIN_FORM')} {this.renderRecoverStatus()} - + */ ); } 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 f9de5447..c1b42380 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 @@ -17,4 +17,4 @@ &__message { margin-top: 18px; } -} \ No newline at end of file +}