Добавлена страница вёрстка для страницы смены пароля после процесса аутентификации

src/components/auth/PasswordChange.jsx

@@ -0,0 +1,83 @@
+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 passwordChangedMessages from './PasswordChange.messages';
+
+import icons from 'components/ui/icons.scss';
+import styles from './passwordChange.scss';
+
+class Body extends BaseAuthBody {
+    static propTypes = {
+        ...BaseAuthBody.propTypes/*,
+        // Я так полагаю, это правила валидации?
+        login: PropTypes.func.isRequired,
+        auth: PropTypes.shape({
+            error: PropTypes.string,
+            login: PropTypes.shape({
+                login: PropTypes.stirng
+            })
+        })*/
+    };
+
+    render() {
+        return (
+            <div>
+                {this.renderErrors()}
+
+                <div className={styles.security}>
+                    <span className={icons.lock} />
+                </div>
+
+                <p className={styles.descriptionText}>
+                    <Message {...passwordChangedMessages.changePasswordMessage} />
+                </p>
+
+                <Input {...this.bindField('newPassword')}
+                    icon="key"
+                    color="darkBlue"
+                    autoFocus
+                    required
+                    placeholder={passwordChangedMessages.newPassword}
+                />
+
+                <Input {...this.bindField('newRePassword')}
+                    icon="key"
+                    color="darkBlue"
+                    required
+                    placeholder={passwordChangedMessages.newRePassword}
+                />
+            </div>
+        );
+    }
+
+    onFormSubmit() {
+        this.props.login(this.serialize());
+    }
+}
+
+export default function PasswordChange() {
+    return {
+        Title: () => ( // TODO: separate component for PageTitle
+            <Message {...passwordChangedMessages.changePasswordTitle}>
+                {(msg) => <span>{msg}<Helmet title={msg} /></span>}
+            </Message>
+        ),
+        Body,
+        Footer: () => (
+            <button className={buttons.darkBlue} type="submit">
+                <Message {...passwordChangedMessages.change} />
+            </button>
+        ),
+        Links: () => (
+            <a href="/oauth/permissions">
+                <Message {...passwordChangedMessages.skipThisStep} />
+            </a>
+        )
+    };
+}

src/components/auth/PasswordChange.messages.js

@@ -0,0 +1,28 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    changePasswordTitle: {
+        id: 'changePasswordTitle',
+        defaultMessage: 'Change password'
+    },
+    changePasswordMessage: {
+        id: 'passwordChangeMessage',
+        defaultMessage: 'To enhance the security of your account, please change your password.'
+    },
+    skipThisStep: {
+        id: 'skipThisStep',
+        defaultMessage: 'Skip password changing'
+    },
+    change: {
+        id: 'change',
+        defaultMessage: 'Change'
+    },
+    newPassword: {
+        id: 'newPassword',
+        defaultMessage: 'Enter new password'
+    },
+    newRePassword: {
+        id: 'newRePassword',
+        defaultMessage: 'Repeat new password'
+    }
+});

src/components/auth/passwordChange.scss

@@ -0,0 +1,16 @@
+@import '~components/ui/colors.scss';
+
+.descriptionText {
+    font-size: 15px;
+    line-height: 1.4;
+    padding-bottom: 8px;
+    color: #aaa;
+}
+
+// TODO: вынести иконки такого типа в какую-то внешнюю структуру?
+.security {
+    color: #fff;
+    font-size: 90px;
+    line-height: 1;
+    margin-bottom: 15px;
+}

src/components/ui/buttons.scss

@@ -59,3 +59,4 @@
 @include button-theme('blue', $blue);
 @include button-theme('green', $green);
 @include button-theme('orange', $orange);
+@include button-theme('darkBlue', $dark_blue);

src/components/ui/form.scss

@@ -102,6 +102,7 @@
 @include input-theme('green', $green);
 @include input-theme('blue', $blue);
 @include input-theme('red', $red);
+@include input-theme('darkBlue', $dark_blue);
 
 
 /**