From aa422cb4f2950c7a2d6b58879131a56e2fb20c2b Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Fri, 26 Feb 2016 01:42:20 +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=D0=B2=D1=91=D1=80=D1=81=D1=82=D0=BA=D0=B0=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20?= =?UTF-8?q?=D1=81=D0=BC=D0=B5=D0=BD=D1=8B=20=D0=BF=D0=B0=D1=80=D0=BE=D0=BB?= =?UTF-8?q?=D1=8F=20=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D0=BF=D1=80=D0=BE?= =?UTF-8?q?=D1=86=D0=B5=D1=81=D1=81=D0=B0=20=D0=B0=D1=83=D1=82=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=B8=D1=84=D0=B8=D0=BA=D0=B0=D1=86=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auth/PasswordChange.jsx | 83 +++++++++++++++++++ .../auth/PasswordChange.messages.js | 28 +++++++ src/components/auth/passwordChange.scss | 16 ++++ src/components/ui/buttons.scss | 1 + src/components/ui/form.scss | 1 + src/icons/webfont/lock.svg | 10 +++ src/index.html | 2 +- src/routes.js | 2 + 8 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 src/components/auth/PasswordChange.jsx create mode 100644 src/components/auth/PasswordChange.messages.js create mode 100644 src/components/auth/passwordChange.scss create mode 100644 src/icons/webfont/lock.svg diff --git a/src/components/auth/PasswordChange.jsx b/src/components/auth/PasswordChange.jsx new file mode 100644 index 0000000..d886ccf --- /dev/null +++ b/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 ( +
+ {this.renderErrors()} + +
+ +
+ +

+ +

+ + + + +
+ ); + } + + onFormSubmit() { + this.props.login(this.serialize()); + } +} + +export default function PasswordChange() { + return { + Title: () => ( // TODO: separate component for PageTitle + + {(msg) => {msg}} + + ), + Body, + Footer: () => ( + + ), + Links: () => ( + + + + ) + }; +} diff --git a/src/components/auth/PasswordChange.messages.js b/src/components/auth/PasswordChange.messages.js new file mode 100644 index 0000000..566dce3 --- /dev/null +++ b/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' + } +}); diff --git a/src/components/auth/passwordChange.scss b/src/components/auth/passwordChange.scss new file mode 100644 index 0000000..1daf163 --- /dev/null +++ b/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; +} diff --git a/src/components/ui/buttons.scss b/src/components/ui/buttons.scss index 63b3b43..156a912 100644 --- a/src/components/ui/buttons.scss +++ b/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); diff --git a/src/components/ui/form.scss b/src/components/ui/form.scss index e9ceaf5..4d1ac2d 100644 --- a/src/components/ui/form.scss +++ b/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); /** diff --git a/src/icons/webfont/lock.svg b/src/icons/webfont/lock.svg new file mode 100644 index 0000000..de02fb7 --- /dev/null +++ b/src/icons/webfont/lock.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/src/index.html b/src/index.html index f740000..5dd7b24 100644 --- a/src/index.html +++ b/src/index.html @@ -7,7 +7,7 @@ - + diff --git a/src/routes.js b/src/routes.js index 15eea38..b2783c7 100644 --- a/src/routes.js +++ b/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) { +