From bef0910bc3cf8449ef957c5039ebd9f858fc563c Mon Sep 17 00:00:00 2001
From: ErickSkrauch <erickskrauch@yandex.ru>
Date: Sun, 28 Feb 2016 00:26:13 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B0?=
 =?UTF-8?q?=20=D1=81=20=D0=BE=D1=82=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=B9=20=D0=BF=D0=B8=D1=81=D1=8C=D0=BC=D0=B0=20=D0=B4=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=B2=D0=BE=D1=81=D1=81=D1=82=D0=B0=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BF=D0=B0=D1=80=D0=BE=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=BE=D1=82=20=D0=B0=D0=BA=D0=BA=D0=B0=D1=83=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/auth/ForgotPassword.jsx        | 78 +++++++++++++++++++
 .../auth/ForgotPassword.messages.js           | 24 ++++++
 src/components/auth/Login.jsx                 |  5 +-
 src/components/auth/Password.jsx              |  5 +-
 src/components/auth/forgotPassword.scss       |  8 ++
 src/components/ui/buttons.scss                |  1 +
 src/components/ui/form.scss                   |  1 +
 src/index.html                                |  3 +-
 src/routes.js                                 |  2 +
 9 files changed, 122 insertions(+), 5 deletions(-)
 create mode 100644 src/components/auth/ForgotPassword.jsx
 create mode 100644 src/components/auth/ForgotPassword.messages.js
 create mode 100644 src/components/auth/forgotPassword.scss

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