mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-16 02:08:59 +05:30
Category -> Profile. Создал ProfileField
This commit is contained in:
SleepWalker
parent
0c61b18b5e
commit
ed5566d55f
@ -1,105 +0,0 @@
|
||||
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;
|
||||
console.log(user);
|
||||
|
||||
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={user.passwordChangedAt} />
|
||||
</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}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
83
src/components/profile/Profile.jsx
Normal file
83
src/components/profile/Profile.jsx
Normal file
@ -0,0 +1,83 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { FormattedMessage as Message, FormattedRelative as Relative } from 'react-intl';
|
||||
import Helmet from 'react-helmet';
|
||||
|
||||
import { userShape } from 'components/user/User';
|
||||
|
||||
import ProfileField from './ProfileField';
|
||||
import styles from './profile.scss';
|
||||
|
||||
export class Profile extends Component {
|
||||
static displayName = 'Profile';
|
||||
static propTypes = {
|
||||
user: userShape
|
||||
};
|
||||
|
||||
render() {
|
||||
const { user } = this.props;
|
||||
|
||||
const pageTitle = 'Настройки аккаунта Ely.by';
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Helmet title={pageTitle} />
|
||||
<h2 className={styles.title}>
|
||||
{pageTitle}
|
||||
</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>
|
||||
|
||||
<ProfileField
|
||||
label={'Ник'}
|
||||
value={user.username}
|
||||
warningMessage={'Найден аккаунт Mojang с таким же ником и, по правилам проекта, его владелец вправе потребовать восстановления контроля над ником.'}
|
||||
/>
|
||||
|
||||
<ProfileField
|
||||
label={'E-mail'}
|
||||
value={user.email}
|
||||
/>
|
||||
|
||||
<ProfileField
|
||||
label={'Пароль'}
|
||||
value={<span>Изменён <Relative value={user.passwordChangedAt} /></span>}
|
||||
warningMessage={user.shouldChangePassword ? (
|
||||
<span>
|
||||
Для пароля применяется старый алгоритм хэширования<br />
|
||||
Пожалуйста, смените пароль.
|
||||
</span>
|
||||
) : ''}
|
||||
/>
|
||||
|
||||
<ProfileField
|
||||
label={'Двухфакторная аутентификация'}
|
||||
value={'Не включена'}
|
||||
/>
|
||||
|
||||
<ProfileField
|
||||
label={'UUID'}
|
||||
value={user.uuid}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
40
src/components/profile/ProfileField.jsx
Normal file
40
src/components/profile/ProfileField.jsx
Normal file
@ -0,0 +1,40 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
import styles from './profile.scss';
|
||||
|
||||
export default class ProfileField extends Component {
|
||||
static displayName = 'ProfileField';
|
||||
static propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
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;
|
||||
|
||||
return (
|
||||
<div className={styles.paramItem}>
|
||||
<div className={styles.paramRow}>
|
||||
<div className={styles.paramName}>{label}:</div>
|
||||
<div className={styles.paramValue}>{value}</div>
|
||||
|
||||
{readonly ? '' : (
|
||||
<div className={styles.paramAction}>
|
||||
<a href="#">
|
||||
<span className={styles.paramEditIcon} />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{warningMessage ? (
|
||||
<div className={styles.paramMessage}>
|
||||
{warningMessage}
|
||||
</div>
|
||||
) : ''}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,11 @@
|
||||
@import '~components/ui/fonts.scss';
|
||||
@import '~components/ui/colors.scss';
|
||||
|
||||
.container {
|
||||
margin-top: 55px;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
font-family: $font-family-title;
|
||||
font-size: 30px;
|
||||
@ -2,17 +2,13 @@ import React, { Component } from 'react';
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import ProfilePage from 'pages/profile/ProfilePage';
|
||||
import { Profile } from 'components/profile/Profile';
|
||||
|
||||
class IndexPage extends Component {
|
||||
displayName = 'IndexPage';
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<ProfilePage {...this.props} />
|
||||
</div>
|
||||
);
|
||||
return (<Profile {...this.props} />);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
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);
|
||||
@ -1,5 +0,0 @@
|
||||
@import "~components/ui/colors.scss";
|
||||
|
||||
.content {
|
||||
margin-top: 55px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user