From e5552ee5f85621a105399fc0b132ce8b045f2510 Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Sun, 17 Apr 2016 12:35:04 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=D0=B2=D0=B5=D1=80=D1=81=D1=82?= =?UTF-8?q?=D0=B0=D0=BB=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20=D1=81=D0=BC?= =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D0=BF=D0=B0=D1=80=D0=BE=D0=BB=D1=8F=20?= =?UTF-8?q?=D0=B8=20=D1=87=D1=83=D1=82=D0=BE=D0=BA=20=D0=BE=D1=82=D1=80?= =?UTF-8?q?=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE=D1=80=D0=B8=D0=BB=20=D0=BF?= =?UTF-8?q?=D1=80=D0=BE=D1=84=D0=B8=D0=BB=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/profile/Profile.jsx | 98 ++++++++++--------- src/components/profile/ProfileField.jsx | 9 +- .../profile/changePassword/ChangePassword.jsx | 65 ++++++++++++ .../changePassword/ChangePassword.messages.js | 39 ++++++++ src/components/profile/profile.scss | 60 +++--------- src/components/profile/profileForm.scss | 65 ++++++++++++ src/components/ui/buttons.scss | 5 + src/pages/index/IndexPage.jsx | 9 +- src/pages/profile/ProfilePage.jsx | 15 +++ src/pages/profile/profile.scss | 3 + src/routes.js | 7 ++ 11 files changed, 279 insertions(+), 96 deletions(-) create mode 100644 src/components/profile/changePassword/ChangePassword.jsx create mode 100644 src/components/profile/changePassword/ChangePassword.messages.js create mode 100644 src/components/profile/profileForm.scss create mode 100644 src/pages/profile/ProfilePage.jsx create mode 100644 src/pages/profile/profile.scss diff --git a/src/components/profile/Profile.jsx b/src/components/profile/Profile.jsx index 27e2272..04cf88c 100644 --- a/src/components/profile/Profile.jsx +++ b/src/components/profile/Profile.jsx @@ -7,9 +7,10 @@ import { userShape } from 'components/user/User'; import ProfileField from './ProfileField'; import styles from './profile.scss'; +import profileForm from './profileForm.scss'; import messages from './Profile.messages'; -export class Profile extends Component { +export default class Profile extends Component { static displayName = 'Profile'; static propTypes = { user: userShape @@ -19,62 +20,67 @@ export class Profile extends Component { const { user } = this.props; return ( -
+
{(pageTitle) => ( -

+

{pageTitle}

)} -
-
- +
+
+
+ +
-
-
-

- -

-

- -

+
+
+
+

+ +

+

+ +

+
+ + } + value={user.username} + warningMessage={} + /> + + + + } + link="/profile/change-password" + value={) + }} />} + warningMessage={user.shouldChangePassword ? ( + + ) : ''} + /> + + } + value={} + /> + +
- - } - value={user.username} - warningMessage={} - /> - - - - } - value={) - }} />} - warningMessage={user.shouldChangePassword ? ( - - ) : ''} - /> - - } - value={} - /> - -
diff --git a/src/components/profile/ProfileField.jsx b/src/components/profile/ProfileField.jsx index 9021af2..41ee9a1 100644 --- a/src/components/profile/ProfileField.jsx +++ b/src/components/profile/ProfileField.jsx @@ -1,18 +1,21 @@ import React, { Component, PropTypes } from 'react'; +import { Link } from 'react-router'; + import styles from './profile.scss'; export default class ProfileField extends Component { static displayName = 'ProfileField'; static propTypes = { label: React.PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired, + link: PropTypes.string, value: React.PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired, warningMessage: React.PropTypes.oneOfType([PropTypes.string, PropTypes.element]), readonly: PropTypes.bool }; render() { - const {label, value, warningMessage, readonly} = this.props; + const {label, value, warningMessage, readonly, link = '#'} = this.props; return (
@@ -22,9 +25,9 @@ export default class ProfileField extends Component { {readonly ? '' : (
- + - +
)}
diff --git a/src/components/profile/changePassword/ChangePassword.jsx b/src/components/profile/changePassword/ChangePassword.jsx new file mode 100644 index 0000000..c9c122e --- /dev/null +++ b/src/components/profile/changePassword/ChangePassword.jsx @@ -0,0 +1,65 @@ +import React, { Component } from 'react'; + +import { FormattedMessage as Message } from 'react-intl'; +import { Link } from 'react-router'; +import Helmet from 'react-helmet'; +import classNames from 'classnames'; + +import { LabeledInput } from 'components/ui/Form'; +import buttons from 'components/ui/buttons.scss'; + +import styles from 'components/profile/profileForm.scss'; +import messages from './ChangePassword.messages'; + +export default class ChangePassword extends Component { + displayName = 'ChangePassword'; + + render() { + return ( +
+ + +
+
+ + {(pageTitle) => ( +

+ + {pageTitle} +

+ )} + + +
+

+ +
+ + + +

+
+ +
+ +
+ +
+

+ +

+
+ +
+ +
+
+ + +
+
+ ); + } +} diff --git a/src/components/profile/changePassword/ChangePassword.messages.js b/src/components/profile/changePassword/ChangePassword.messages.js new file mode 100644 index 0000000..19873c8 --- /dev/null +++ b/src/components/profile/changePassword/ChangePassword.messages.js @@ -0,0 +1,39 @@ +import { defineMessages } from 'react-intl'; + +export default defineMessages({ + changePasswordTitle: { + id: 'changePasswordTitle', + defaultMessage: 'Change password' + // defaultMessage: 'Смена пароля' + }, + changePasswordDescription: { + id: 'changePasswordDescription', + defaultMessage: 'Please take a password, that will be different from your passwords on the other sites and will not be the same you are using to enter Minecraft game servers you are playing.' + // defaultMessage: 'Придумайте пароль, который будет отличаться от ваших паролей на других сайтах и не будет совпадаеть с тем паролем, который вы используете для входа на различные игровые сервера Minecraft.' + }, + achievementLossWarning: { + id: 'achievementLossWarning', + defaultMessage: 'Are you cherish your game achievements, right?' + // defaultMessage: 'Вы ведь дорожите своими игровыми достижениями?' + }, + passwordRequirements: { + id: 'passwordRequirements', + defaultMessage: 'Password must contain at least 8 characters. It can be any symbols — do not limit yourself, create an unpredictable password!' + // defaultMessage: 'Пароль должен содержать не менее 8 символов. Это могут быть любым символы — не ограничивайте себя, придумайте непредсказуемый пароль!' + }, + changePasswordButton: { + id: 'changePasswordButton', + defaultMessage: 'Change password' + // defaultMessage: 'Сменить пароль' + }, + newPasswordLabel: { + id: 'newPasswordLabel', + defaultMessage: 'New password:' + // defaultMessage: 'Новый пароль:' + }, + repeatNewPasswordLabel: { + id: 'repeatNewPasswordLabel', + defaultMessage: 'Repeat the password:' + // defaultMessage: 'Повторите указанный пароль:' + } +}); diff --git a/src/components/profile/profile.scss b/src/components/profile/profile.scss index a41b93a..09ad9a4 100644 --- a/src/components/profile/profile.scss +++ b/src/components/profile/profile.scss @@ -1,62 +1,32 @@ @import '~components/ui/fonts.scss'; @import '~components/ui/colors.scss'; -.container { - margin-top: 55px; -} - - -.title { - font-family: $font-family-title; - font-size: 30px; - margin-bottom: 12px; -} - -.content { +.indexContent { display: flex; } -.description { - font-size: 14px; - line-height: 1.4; - color: #9a9a9a; - width: 340px; - padding: 12px 20px 0 0; - box-sizing: border-box; -} - -.options { - background: #fff; +.formColumn { flex-grow: 1; max-width: 416px; border-bottom: 10px solid #ddd8ce; } -.optionsTitle { - position: relative; - font-size: 24px; - font-family: $font-family-title; - padding-bottom: 9px; - - &:after { - content: ''; - display: block; - - position: absolute; - left: 0; - bottom: 0; - height: 3px; - width: 86px; - - background: $green; - } +.descriptionColumn { + width: 340px; + padding: 12px 20px 0 0; + box-sizing: border-box; } -.optionsDescription { - font-size: 13px; +.indexTitle { + font-family: $font-family-title; + font-size: 30px; + margin-bottom: 12px; +} + +.indexDescription { + font-size: 14px; + line-height: 1.4; color: #9a9a9a; - line-height: 1.25; - margin-top: 25px; } .item { diff --git a/src/components/profile/profileForm.scss b/src/components/profile/profileForm.scss new file mode 100644 index 0000000..ff5a10a --- /dev/null +++ b/src/components/profile/profileForm.scss @@ -0,0 +1,65 @@ +@import '~components/ui/fonts.scss'; +@import '~components/ui/colors.scss'; + +.contentWithBackButton { + position: relative; + padding-left: 60px; + width: 400px; + margin: 0 auto; +} + +.backButton { + composes: arrow from 'components/ui/icons.scss'; + + position: absolute; + left: 0; + top: 15px; + width: 25px; + height: 25px; + padding: 15px; + + transform: rotate(90deg); + + color: #ccc; + font-size: 25px; +} + +.form { + background: #fff; + overflow: hidden; // disable margin collapsing +} + +.formBody { + margin: 30px; +} + +.formRow { + margin: 25px 0; +} + +.title { + position: relative; + font-size: 24px; + font-family: $font-family-title; + padding-bottom: 9px; + + &:after { + content: ''; + display: block; + + position: absolute; + left: 0; + bottom: 0; + height: 3px; + width: 86px; + + background: $green; + } +} + +.description { + font-size: 13px; + color: #9a9a9a; + line-height: 1.3; + margin-top: 25px; +} diff --git a/src/components/ui/buttons.scss b/src/components/ui/buttons.scss index 282d7fd..40d21fb 100644 --- a/src/components/ui/buttons.scss +++ b/src/components/ui/buttons.scss @@ -71,3 +71,8 @@ @include button-theme('orange', $orange); @include button-theme('darkBlue', $dark_blue); @include button-theme('lightViolet', $light_violet); + +.block { + display: block; + width: 100%; +} diff --git a/src/pages/index/IndexPage.jsx b/src/pages/index/IndexPage.jsx index ca6d1d4..ed6c213 100644 --- a/src/pages/index/IndexPage.jsx +++ b/src/pages/index/IndexPage.jsx @@ -2,13 +2,18 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { Profile } from 'components/profile/Profile'; +import ProfilePage from 'pages/profile/ProfilePage'; +import Profile from 'components/profile/Profile'; class IndexPage extends Component { displayName = 'IndexPage'; render() { - return (); + return ( + + + + ); } } diff --git a/src/pages/profile/ProfilePage.jsx b/src/pages/profile/ProfilePage.jsx new file mode 100644 index 0000000..23c80d6 --- /dev/null +++ b/src/pages/profile/ProfilePage.jsx @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; + +import styles from './profile.scss'; + +export default class ProfilePage extends Component { + displayName = 'ProfilePage'; + + render() { + return ( +
+ {this.props.children} +
+ ); + } +} diff --git a/src/pages/profile/profile.scss b/src/pages/profile/profile.scss new file mode 100644 index 0000000..3d6c38b --- /dev/null +++ b/src/pages/profile/profile.scss @@ -0,0 +1,3 @@ +.container { + margin-top: 55px; +} diff --git a/src/routes.js b/src/routes.js index d7f96e0..7447b13 100644 --- a/src/routes.js +++ b/src/routes.js @@ -4,6 +4,7 @@ import { Route, IndexRoute } from 'react-router'; import RootPage from 'pages/root/RootPage'; import IndexPage from 'pages/index/IndexPage'; import AuthPage from 'pages/auth/AuthPage'; +import ProfilePage from 'pages/profile/ProfilePage'; import { authenticate } from 'components/user/actions'; @@ -18,6 +19,8 @@ import ChangePassword from 'components/auth/changePassword/ChangePassword'; import ForgotPassword from 'components/auth/forgotPassword/ForgotPassword'; import Finish from 'components/auth/finish/Finish'; +import ProfileChangePassword from 'components/profile/changePassword/ChangePassword'; + import authFlow from 'services/authFlow'; export default function routesFactory(store) { @@ -50,6 +53,10 @@ export default function routesFactory(store) { + + + + ); }