ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-06-29 03:33:22 +05:30
Code Issues Packages Projects Releases Wiki Activity

Добавлена первичная вёрстка для профиля пользователя

Browse Source
This commit is contained in:
ErickSkrauch 2016-03-10 01:10:28 +03:00
parent e94b04551d
commit d725bc2bfe
8 changed files with 275 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/profile/Category.jsx Normal file
View File

@ -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 (
<div>
<h2 className={styles.title}>
Настройки аккаунта Ely.by
</h2>
<div className={styles.content}>
<div className={styles.description}>
Благодаря аккаунту Ely.by вы можете получить доступ ко многим ресурсам, связанным с Minecraft.
Берегите свой аккаунт, используйте надёжный пароль и регулярно его меняйте.
</div>
<div className={styles.options}>
<div className={styles.item}>
<h3 className={styles.optionsTitle}>Персональные данные</h3>
<p className={styles.optionsDescription}>
Здесь вы можете сменить ключевые параметры вашего аккаунта. Обратите внимание, что для
всех действий необходимо подтверждение при помощи ввода пароля.
</p>
</div>
<div className={styles.paramItem}>
<div className={styles.paramRow}>
<div className={styles.paramName}>Ник:</div>
<div className={styles.paramValue}>{user.username}</div>
<div className={styles.paramAction}>
<a href="#">
<span className={styles.paramEditIcon} />
</a>
</div>
</div>
<div className={styles.paramMessage}>
Найден аккаунт Mojang с таким же ником и, по правилам проекта, его владелец вправе
потребовать восстановления контроля над ником.
</div>
</div>
<div className={styles.paramItem}>
<div className={styles.paramRow}>
<div className={styles.paramName}>E-mail:</div>
<div className={styles.paramValue}>{user.email}</div>
<div className={styles.paramAction}>
<a href="#">
<span className={styles.paramEditIcon} />
</a>
</div>
</div>
</div>
<div className={styles.paramItem}>
<div className={styles.paramRow}>
<div className={styles.paramName}>Пароль:</div>
<div className={styles.paramValue}>
Изменён <Relative value={changePassDate} />
</div>
<div className={styles.paramAction}>
<a href="#">
<span className={styles.paramEditIcon} />
</a>
</div>
</div>
{user.shouldChangePassword ? (
<div className={styles.paramMessage}>
Для пароля применяется старый алгоритм хэширования<br />
Пожалуйста, смените пароль.
</div>
) : ''}
</div>
<div className={styles.paramItem}>
<div className={styles.paramRow}>
<div className={styles.paramName}>Двухфакторная аутентификация:</div>
<div className={styles.paramValue}>Не включена</div>
<div className={styles.paramAction}>
<a href="#">
<span className={styles.paramEditIcon} />
</a>
</div>
</div>
</div>
<div className={styles.paramItem}>
<div className={styles.paramRow}>
<div className={styles.paramName}>UUID:</div>
<div className={styles.uuidValue}>{user.uuid || 'df936908-b2e1-544d-96f8-2977ec213022'}</div>
</div>
</div>
</div>
</div>
</div>
);
}
}

121
src/components/profile/category.scss Normal file
View File

@ -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;
}

2
src/components/user/User.js
View File

@ -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) => {

2
src/components/userbar/LoggedInPanel.js
View File

@ -27,7 +27,7 @@ export default class LoggedInPanel extends Component {
return (
<div className={buttonGroups.horizontalGroup}>
<Link to="/profile" className={classNames(buttons.green, buttonGroups.item)}>
<Link to="/" className={classNames(buttons.green, buttonGroups.item)}>
<span className={styles.userIcon} />
<span className={styles.userName}>{user.username}</span>
</Link>

6
src/icons/webfont/pencil.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<path d="M13.5 0c1.381 0 2.5 1.119 2.5 2.5 0 0.563-0.186 1.082-0.5 1.5l-1 1-3.5-3.5 1-1c0.418-0.314 0.937-0.5 1.5-0.5zM1 11.5l-1 4.5 4.5-1 9.25-9.25-3.5-3.5-9.25 9.25zM11.181 5.681l-7 7-0.862-0.862 7-7 0.862 0.862z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 543 B

9
src/pages/index/IndexPage.jsx
View File

@ -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 (
<div>
<h1>
Hello {user.username}!
</h1>
{children}
<ProfilePage {...this.props} />
</div>
);
}

33
src/pages/profile/ProfilePage.jsx Normal file
View File

@ -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 (
<div className={styles.content}>
<Category {...this.props} />
</div>
);
}
}
export default connect((state) => ({
//client: state.auth.client
}))(ProfilePage);

5
src/pages/profile/profile.scss Normal file
View File

@ -0,0 +1,5 @@
@import "~components/ui/colors.scss";
.content {
margin-top: 55px;
}