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

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

src/index.html

@@ -7,7 +7,8 @@
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
 
-    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
+    <link href="//fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic" rel="stylesheet" type="text/css">
+    <link href="//fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic" rel="stylesheet" type="text/css">
 </head>
 <body>
 

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) {
                 <Route path="/activation" components={new Activation()} />
                 <Route path="/oauth/permissions" components={new Permissions()} onEnter={checkAuth} />
                 <Route path="/password-change" components={new PasswordChange()} />
+                <Route path="/forgot-password" components={new ForgotPassword()} />
             </Route>
 
             <Route path="oauth" component={OAuthInit} />