diff --git a/src/components/profile/Category.jsx b/src/components/profile/Category.jsx new file mode 100644 index 0000000..e673c17 --- /dev/null +++ b/src/components/profile/Category.jsx @@ -0,0 +1,105 @@ +import React, { Component } from 'react'; + +import { FormattedMessage as Message, FormattedRelative as Relative } from 'react-intl'; + +import styles from './category.scss'; + +export class Category extends Component { + static displayName = 'Logout'; + + render() { + var { user } = this.props; + var changePassDate = Date.now() - (1000 * 60 * 60 * 24 * 30 * 3); + + return ( +
+

+ Настройки аккаунта Ely.by +

+
+
+ Благодаря аккаунту Ely.by вы можете получить доступ ко многим ресурсам, связанным с Minecraft. + Берегите свой аккаунт, используйте надёжный пароль и регулярно его меняйте. +
+ +
+
+

Персональные данные

+

+ Здесь вы можете сменить ключевые параметры вашего аккаунта. Обратите внимание, что для + всех действий необходимо подтверждение при помощи ввода пароля. +

+
+ +
+
+
Ник:
+
{user.username}
+
+ + + +
+
+
+ Найден аккаунт Mojang с таким же ником и, по правилам проекта, его владелец вправе + потребовать восстановления контроля над ником. +
+
+ +
+
+
E-mail:
+
{user.email}
+
+ + + +
+
+
+ +
+
+
Пароль:
+
+ Изменён +
+
+ + + +
+
+ {user.shouldChangePassword ? ( +
+ Для пароля применяется старый алгоритм хэширования
+ Пожалуйста, смените пароль. +
+ ) : ''} +
+ +
+
+
Двухфакторная аутентификация:
+
Не включена
+
+ + + +
+
+
+ +
+
+
UUID:
+
{user.uuid || 'df936908-b2e1-544d-96f8-2977ec213022'}
+
+
+
+
+
+ ); + } +} diff --git a/src/components/profile/category.scss b/src/components/profile/category.scss new file mode 100644 index 0000000..b61fc71 --- /dev/null +++ b/src/components/profile/category.scss @@ -0,0 +1,121 @@ +@import '~components/ui/fonts.scss'; +@import '~components/ui/colors.scss'; + +.title { + font-family: $font-family-title; + font-size: 30px; + margin-bottom: 12px; +} + +.content { + 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; + 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; + } +} + +.optionsDescription { + font-size: 13px; + color: #9a9a9a; + line-height: 1.25; + margin-top: 25px; +} + +.item { + padding: 30px; + border-bottom: 1px solid #eee; + + &:last-child { + border-bottom: none; + } +} + +.paramItem { + composes: item; + + $padding: 20px; + + padding-top: $padding; + padding-bottom: $padding; + + color: #666666; +} + +.paramRow { + display: flex; + align-items: baseline; + flex-basis: 0; + flex-grow: 1; + + font-size: 14px; +} + +.paramName { + width: 125px; + font-family: $font-family-title; +} + +.paramValue { + flex-grow: 1; +} + +.uuidValue { + composes: paramName; + composes: paramValue; +} + +.paramAction { + text-align: center; +} + +.paramEditIcon { + composes: pencil from 'components/ui/icons.scss'; + + color: $light; + transition: .4s; + + a:hover & { + color: #444; + } +} + +.paramMessage { + padding: 10px 40px 0 0; + + color: $red; + font-size: 11px; + line-height: 1.2; +} diff --git a/src/components/user/User.js b/src/components/user/User.js index 28fdeb0..f8523d3 100644 --- a/src/components/user/User.js +++ b/src/components/user/User.js @@ -24,7 +24,7 @@ export default class User { goal: null, // the goal with wich user entered site isGuest: true, isActive: true, - shouldChangePassword: false + shouldChangePassword: false // TODO: нужно ещё пробросить причину необходимости смены }; const user = Object.keys(defaults).reduce((user, key) => { diff --git a/src/components/userbar/LoggedInPanel.js b/src/components/userbar/LoggedInPanel.js index 5758e90..25ba982 100644 --- a/src/components/userbar/LoggedInPanel.js +++ b/src/components/userbar/LoggedInPanel.js @@ -27,7 +27,7 @@ export default class LoggedInPanel extends Component { return (
- + {user.username} diff --git a/src/icons/webfont/pencil.svg b/src/icons/webfont/pencil.svg new file mode 100644 index 0000000..5565d96 --- /dev/null +++ b/src/icons/webfont/pencil.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/pages/index/IndexPage.jsx b/src/pages/index/IndexPage.jsx index 427985f..e70be31 100644 --- a/src/pages/index/IndexPage.jsx +++ b/src/pages/index/IndexPage.jsx @@ -2,6 +2,8 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; +import ProfilePage from 'pages/profile/ProfilePage'; + import authFlow from 'services/authFlow'; class IndexPage extends Component { @@ -14,14 +16,9 @@ class IndexPage extends Component { } render() { - const {user, children} = this.props; - return (
-

- Hello {user.username}! -

- {children} +
); } diff --git a/src/pages/profile/ProfilePage.jsx b/src/pages/profile/ProfilePage.jsx new file mode 100644 index 0000000..1173aa6 --- /dev/null +++ b/src/pages/profile/ProfilePage.jsx @@ -0,0 +1,33 @@ +import React, { Component, PropTypes } from 'react'; + +import { connect } from 'react-redux'; + +import { Category } from 'components/profile/Category'; + +import styles from './profile.scss'; + +class ProfilePage extends Component { + static displayName = 'AuthPage'; + static propTypes = { + /*client: PropTypes.shape({ + id: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + description: PropTypes.string.isRequired + })*/ + }; + + state = { + }; + + render() { + return ( +
+ +
+ ); + } +} + +export default connect((state) => ({ + //client: state.auth.client +}))(ProfilePage); diff --git a/src/pages/profile/profile.scss b/src/pages/profile/profile.scss new file mode 100644 index 0000000..56a0366 --- /dev/null +++ b/src/pages/profile/profile.scss @@ -0,0 +1,5 @@ +@import "~components/ui/colors.scss"; + +.content { + margin-top: 55px; +}