Добавлена страница с отправкой письма для восстановления пароля от аккаунта

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 (
+            <div>
+                {this.renderErrors()}
+
+                <p className={styles.descriptionText}>
+                    <Message {...messages.forgotPasswordMessage} />
+                </p>
+
+                <Input {...this.bindField('email')}
+                    icon="envelope"
+                    color="lightViolet"
+                    autoFocus
+                    required
+                    placeholder={messages.accountEmail}
+                />
+
+                <p>TODO: тут ещё должна быть капча</p>
+                <p>TODO: эту страницу пока что не имплементим</p>
+            </div>
+        );
+    }
+
+    onFormSubmit() {
+        // TODO: обработчик отправки письма с инструкцией по смене аккаунта
+        //this.props.login(this.serialize());
+    }
+}
+
+export default function ForgotPassword() {
+    var Title = () => ( // TODO: separate component for PageTitle
+        <Message {...messages.forgotPasswordTitle}>
+            {(msg) => <span>{msg}<Helmet title={msg} /></span>}
+        </Message>
+    );
+    Title.goBack = true;
+
+    return {
+        Title,
+        Body,
+        Footer: () => (
+            <button className={buttons.lightViolet} type="submit">
+                <Message {...messages.sendMail} />
+            </button>
+        ),
+        Links: () => (
+            <a href="/send-message">
+                <Message {...messages.contactSupport} />
+            </a>
+        )
+    };
+}

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'
+    }
+});

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() {
             </button>
         ),
         Links: () => (
-            <a href="#">
+            <Link to="/forgot-password">
                 <Message {...passwordMessages.forgotPassword} />
-            </a>
+            </Link>
         )
     };
 }

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() {
             </button>
         ),
         Links: () => (
-            <a href="#">
+            <Link to="/forgot-password">
                 <Message {...messages.forgotPassword} />
-            </a>
+            </Link>
         )
     };
 }

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;
+}

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);

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);
 
 
 /**