diff --git a/src/components/auth/ForgotPassword.jsx b/src/components/auth/ForgotPassword.jsx new file mode 100644 index 0000000..6f86f13 --- /dev/null +++ b/src/components/auth/ForgotPassword.jsx @@ -0,0 +1,78 @@ +import React, { PropTypes } from 'react'; + +import { FormattedMessage as Message } from 'react-intl'; +import Helmet from 'react-helmet'; + +import buttons from 'components/ui/buttons.scss'; +import { Input } from 'components/ui/Form'; + +import BaseAuthBody from './BaseAuthBody'; +import messages from './ForgotPassword.messages'; + +import styles from './forgotPassword.scss'; + +class Body extends BaseAuthBody { + static propTypes = { + ...BaseAuthBody.propTypes, + //login: PropTypes.func.isRequired, + auth: PropTypes.shape({ + error: PropTypes.string, + login: PropTypes.shape({ + email: PropTypes.stirng + }) + }) + }; + + // Если юзер вводил своё мыло во время попытки авторизации, то почему бы его сюда автоматически не подставить? + render() { + return ( +
+ {this.renderErrors()} + +

+ +

+ + + +

TODO: тут ещё должна быть капча

+

TODO: эту страницу пока что не имплементим

+
+ ); + } + + onFormSubmit() { + // TODO: обработчик отправки письма с инструкцией по смене аккаунта + //this.props.login(this.serialize()); + } +} + +export default function ForgotPassword() { + var Title = () => ( // TODO: separate component for PageTitle + + {(msg) => {msg}} + + ); + Title.goBack = true; + + return { + Title, + Body, + Footer: () => ( + + ), + Links: () => ( + + + + ) + }; +} diff --git a/src/components/auth/ForgotPassword.messages.js b/src/components/auth/ForgotPassword.messages.js new file mode 100644 index 0000000..f53d0ed --- /dev/null +++ b/src/components/auth/ForgotPassword.messages.js @@ -0,0 +1,24 @@ +import { defineMessages } from 'react-intl'; + +export default defineMessages({ + forgotPasswordTitle: { + id: 'forgotPasswordTitle', + defaultMessage: 'Forgot password' + }, + contactSupport: { + id: 'contactSupport', + defaultMessage: 'Contact support' + }, + sendMail: { + id: 'sendMail', + defaultMessage: 'Send mail' + }, + forgotPasswordMessage: { + id: 'forgotPasswordMessage', + defaultMessage: 'Specify the registration E-mail address for your account and we will send an email with instructions for further password recovery.' + }, + accountEmail: { + id: 'accountEmail', + defaultMessage: 'Enter account E-mail' + } +}); diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.jsx index e62fa88..2f17d5c 100644 --- a/src/components/auth/Login.jsx +++ b/src/components/auth/Login.jsx @@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'; import { FormattedMessage as Message } from 'react-intl'; import Helmet from 'react-helmet'; +import { Link } from 'react-router'; import buttons from 'components/ui/buttons.scss'; import { Input } from 'components/ui/Form'; @@ -56,9 +57,9 @@ export default function Login() { ), Links: () => ( - + - + ) }; } diff --git a/src/components/auth/Password.jsx b/src/components/auth/Password.jsx index a9352e5..3585610 100644 --- a/src/components/auth/Password.jsx +++ b/src/components/auth/Password.jsx @@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'; import { FormattedMessage as Message } from 'react-intl'; import Helmet from 'react-helmet'; +import { Link } from 'react-router'; import buttons from 'components/ui/buttons.scss'; import icons from 'components/ui/icons.scss'; @@ -85,9 +86,9 @@ export default function Password() { ), Links: () => ( - + - + ) }; } diff --git a/src/components/auth/forgotPassword.scss b/src/components/auth/forgotPassword.scss new file mode 100644 index 0000000..fcf5777 --- /dev/null +++ b/src/components/auth/forgotPassword.scss @@ -0,0 +1,8 @@ +@import '~components/ui/colors.scss'; + +.descriptionText { + font-size: 15px; + line-height: 1.4; + padding-bottom: 8px; + color: #aaa; +} diff --git a/src/components/ui/buttons.scss b/src/components/ui/buttons.scss index 156a912..5f2447e 100644 --- a/src/components/ui/buttons.scss +++ b/src/components/ui/buttons.scss @@ -60,3 +60,4 @@ @include button-theme('green', $green); @include button-theme('orange', $orange); @include button-theme('darkBlue', $dark_blue); +@include button-theme('lightViolet', $light_violet); diff --git a/src/components/ui/form.scss b/src/components/ui/form.scss index 4d1ac2d..11ded25 100644 --- a/src/components/ui/form.scss +++ b/src/components/ui/form.scss @@ -103,6 +103,7 @@ @include input-theme('blue', $blue); @include input-theme('red', $red); @include input-theme('darkBlue', $dark_blue); +@include input-theme('lightViolet', $light_violet); /** diff --git a/src/index.html b/src/index.html index 5dd7b24..e34ca08 100644 --- a/src/index.html +++ b/src/index.html @@ -7,7 +7,8 @@ - + + diff --git a/src/routes.js b/src/routes.js index 27d9888..7aeeecc 100644 --- a/src/routes.js +++ b/src/routes.js @@ -15,6 +15,7 @@ import Activation from 'components/auth/Activation'; import Password from 'components/auth/Password'; import Logout from 'components/auth/Logout'; import PasswordChange from 'components/auth/PasswordChange'; +import ForgotPassword from 'components/auth/ForgotPassword'; export default function routesFactory(store) { function checkAuth(nextState, replace) { @@ -77,6 +78,7 @@ export default function routesFactory(store) { +