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

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

src/icons/webfont/lock.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg id="Untitled-%u0421%u0442%u0440%u0430%u043D%u0438%u0446%u0430%201" viewBox="0 0 32 32" style="background-color:#ffffff00" version="1.1"
+	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
+	x="0px" y="0px" width="32px" height="32px"
+>
+	<g id="%u0421%u043B%u043E%u0439%201">
+		<path id="locked" d="M 24.9997 31.9998 L 6.9997 31.9998 C 5.3428 31.9998 3.9997 30.6566 3.9997 28.9998 L 3.9997 17.9998 C 3.9997 16.343 5.3428 14.9998 6.9997 14.9998 L 7.9996 14.9998 L 7.9996 6.9999 C 7.9996 3.1338 11.5814 -0.0002 15.9996 -0.0002 C 20.418 -0.0002 23.9996 3.1338 23.9996 6.9999 L 23.9996 14.9998 L 24.9997 14.9998 C 26.6566 14.9998 27.9997 16.343 27.9997 17.9998 L 27.9997 28.9998 C 27.9997 30.6566 26.6566 31.9998 24.9997 31.9998 ZM 19.9996 6.9999 C 19.9996 5.343 18.2089 3.9999 15.9996 3.9999 C 13.7906 3.9999 11.9996 5.343 11.9996 6.9999 L 11.9996 13.9998 C 11.9996 14.351 12.0843 14.6866 12.2321 14.9998 L 19.7672 14.9998 C 19.915 14.6866 19.9996 14.351 19.9996 13.9998 L 19.9996 6.9999 ZM 15.9996 17.9998 C 13.7906 17.9998 11.9996 19.7907 11.9996 21.9998 C 11.9996 23.4795 12.8052 24.7684 13.9997 25.4604 L 13.9997 26.9998 C 13.9997 28.1044 14.8951 28.9998 15.9996 28.9998 C 17.1044 28.9998 17.9998 28.1044 17.9998 26.9998 L 17.9998 25.4603 C 19.1942 24.7683 19.9996 23.4794 19.9996 21.9998 C 19.9996 19.7907 18.2089 17.9998 15.9996 17.9998 Z" fill="#000000"/>
+	</g>
+</svg>

src/index.html

@@ -7,7 +7,7 @@
     <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='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
 </head>
 <body>
 

src/routes.js

@@ -11,6 +11,7 @@ import Permissions from 'components/auth/Permissions';
 import Activation from 'components/auth/Activation';
 import Password from 'components/auth/Password';
 import Logout from 'components/auth/Logout';
+import PasswordChange from 'components/auth/PasswordChange';
 
 export default function routesFactory(store) {
     function checkAuth(nextState, replace) {
@@ -47,6 +48,7 @@ export default function routesFactory(store) {
                 <Route path="/activation" components={new Activation()} />
                 <Route path="/oauth/permissions" components={new Permissions()} onEnter={checkAuth} />
                 <Route path="/oauth/:id" component={Permissions} />
+                <Route path="/password-change" components={new PasswordChange()} />
             </Route>
 
             <Route path="logout" component={Logout} />