accounts-frontend/src/components/profile/Profile.js

193 lines
5.6 KiB
JavaScript
Raw Normal View History

// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
2019-11-11 14:10:05 +05:30
import { FormattedMessage as Message } from 'react-intl';
import { Link } from 'react-router-dom';
import Helmet from 'react-helmet';
import { ChangeLanguageLink } from 'components/languageSwitcher';
2019-11-11 14:10:05 +05:30
import { RelativeTime } from 'components/ui';
import ProfileField from './ProfileField';
import styles from './profile.scss';
import profileForm from './profileForm.scss';
import messages from './Profile.intl.json';
import RulesPage from 'pages/rules/RulesPage';
import type { User } from 'components/user';
type OwnProps = {||};
type Props = {
...OwnProps,
user: User,
interfaceLocale: string,
};
class Profile extends Component<Props> {
UUID: ?HTMLElement;
render() {
const { user, interfaceLocale } = this.props;
return (
<div>
<Message {...messages.accountPreferencesTitle}>
{(pageTitle: string) => (
<h2 className={styles.indexTitle}>
<Helmet title={pageTitle} />
{pageTitle}
</h2>
)}
</Message>
<div className={styles.indexContent}>
<div className={styles.descriptionColumn}>
<div className={styles.indexDescription}>
<Message {...messages.accountDescription} />
</div>
</div>
<div className={styles.formColumn}>
<div className={profileForm.form}>
<div className={styles.item}>
<h3 className={profileForm.title}>
<Message {...messages.personalData} />
</h3>
<p className={profileForm.description}>
<Message {...messages.preferencesDescription} />
</p>
</div>
<ProfileField
link="/profile/change-username"
label={<Message {...messages.nickname} />}
value={user.username}
warningMessage={
user.hasMojangUsernameCollision ? (
<Message
{...messages.mojangPriorityWarning}
values={{
rules: (
<Link
to={{
pathname: '/rules',
hash: `#${RulesPage.getRuleHash(1, 4)}`,
}}
>
<Message {...messages.projectRules} />
</Link>
),
}}
/>
) : (
''
)
}
/>
<ProfileField
link="/profile/change-email"
label={<Message {...messages.email} />}
value={user.email}
/>
<ProfileField
link="/profile/change-password"
label={<Message {...messages.password} />}
value={
<Message
{...messages.changedAt}
values={{
at: (
<RelativeTime
timestamp={user.passwordChangedAt * 1000}
/>
),
}}
/>
}
/>
<ProfileField
label={<Message {...messages.siteLanguage} />}
value={<ChangeLanguageLink />}
warningMessage={
user.lang === interfaceLocale ? (
''
) : (
<Message
{...messages.languageIsUnavailableWarning}
values={{
locale: user.lang,
participateInTheTranslation: (
<a href="http://ely.by/translate" target="_blank">
<Message
{...messages.participateInTheTranslation}
/>
</a>
),
}}
/>
)
}
/>
<ProfileField
link="/profile/mfa"
label={<Message {...messages.twoFactorAuth} />}
value={
user.isOtpEnabled ? (
<Message {...messages.enabled} />
) : (
<Message {...messages.disabled} />
)
}
/>
<ProfileField
label={<Message {...messages.uuid} />}
value={
<span
className={styles.uuid}
ref={this.setUUID.bind(this)}
onMouseOver={this.handleUUIDMouseOver.bind(this)}
>
{user.uuid}
</span>
}
/>
</div>
</div>
</div>
</div>
);
}
handleUUIDMouseOver() {
if (!this.UUID) {
return;
}
const el = this.UUID;
try {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(el);
selection.removeAllRanges();
selection.addRange(range);
} catch (err) {
// the browser does not support an API
}
}
setUUID(el: ?HTMLElement) {
this.UUID = el;
}
}
export default connect<Props, OwnProps, _, _, _, _>(({ user, i18n }) => ({
user,
interfaceLocale: i18n.locale,
}))(Profile);