Переводы профиля

src/components/profile/Profile.jsx

@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
 
-import { FormattedMessage as Message, FormattedRelative as Relative } from 'react-intl';
+import { FormattedMessage as Message, FormattedRelative as Relative, FormattedHTMLMessage as HTMLMessage } from 'react-intl';
 import Helmet from 'react-helmet';
 
 import { userShape } from 'components/user/User';
 
 import ProfileField from './ProfileField';
 import styles from './profile.scss';
+import messages from './Profile.messages';
 
 export class Profile extends Component {
     static displayName = 'Profile';
@@ -17,36 +18,36 @@ export class Profile extends Component {
     render() {
         const { user } = this.props;
 
-        const pageTitle = 'Настройки аккаунта Ely.by';
-
         return (
             <div className={styles.container}>
-                <Helmet title={pageTitle} />
-                <h2 className={styles.title}>
-                    {pageTitle}
-                </h2>
+                <Message {...messages.accountPreferencesTitle}>
+                    {(pageTitle) => (
+                        <h2 className={styles.title}>
+                            <Helmet title={pageTitle} />
+                            {pageTitle}
+                        </h2>
+                    )}
+                </Message>
 
                 <div className={styles.content}>
                     <div className={styles.description}>
-                        Благодаря аккаунту Ely.by вы можете получить доступ ко многим ресурсам, связанным с Minecraft.
-                        Берегите свой аккаунт, используйте надёжный пароль и регулярно его меняйте.
+                        <Message {...messages.accountDescription} />
                     </div>
 
                     <div className={styles.options}>
                         <div className={styles.item}>
                             <h3 className={styles.optionsTitle}>
-                                Персональные данные
+                                <Message {...messages.personalData} />
                             </h3>
                             <p className={styles.optionsDescription}>
-                                Здесь вы можете сменить ключевые параметры вашего аккаунта. Обратите внимание, что для
-                                всех действий необходимо подтверждение при помощи ввода пароля.
+                                <Message {...messages.preferencesDescription} />
                             </p>
                         </div>
 
                         <ProfileField
-                            label={'Ник'}
+                            label={<Message {...messages.nickname} />}
                             value={user.username}
-                            warningMessage={'Найден аккаунт Mojang с таким же ником и, по правилам проекта, его владелец вправе потребовать восстановления контроля над ником.'}
+                            warningMessage={<Message {...messages.mojangPriorityWarning} />}
                         />
 
                         <ProfileField
@@ -55,19 +56,18 @@ export class Profile extends Component {
                         />
 
                         <ProfileField
-                            label={'Пароль'}
-                            value={<span>Изменён <Relative value={user.passwordChangedAt * 1000} /></span>}
+                            label={<Message {...messages.password} />}
+                            value={<Message {...messages.changedAt} values={{
+                                at: (<Relative value={user.passwordChangedAt * 1000} />)
+                            }} />}
                             warningMessage={user.shouldChangePassword ? (
-                                <span>
-                                    Для пароля применяется старый алгоритм хэширования<br />
-                                    Пожалуйста, смените пароль.
-                                </span>
+                                <HTMLMessage {...messages.oldHashingAlgoWarning} />
                             ) : ''}
                         />
 
                         <ProfileField
-                            label={'Двухфакторная аутентификация'}
-                            value={'Не включена'}
+                            label={<Message {...messages.twoFactorAuth} />}
+                            value={<Message {...messages.disabled} />}
                         />
 
                         <ProfileField

src/components/profile/Profile.messages.js

@@ -0,0 +1,59 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    accountPreferencesTitle: {
+        id: 'accountPreferencesTitle',
+        defaultMessage: 'Ely.by account preferences'
+        // defaultMessage: 'Настройки аккаунта Ely.by'
+    },
+    personalData: {
+        id: 'personalData',
+        defaultMessage: 'Personal data'
+        // defaultMessage: 'Персональные данные'
+    },
+    accountDescription: {
+        id: 'accountDescription',
+        defaultMessage: 'Ely.by account allows you to get access to many Minecraft resources. Please, take care of your account safety. Use secure password and change it regularly.'
+        // defaultMessage: 'Благодаря аккаунту Ely.by вы можете получить доступ ко многим ресурсам, связанным с Minecraft. Берегите свой аккаунт, используйте надёжный пароль и регулярно его меняйте.'
+    },
+    preferencesDescription: {
+        id: 'preferencesDescription',
+        defaultMessage: 'Here you can change the key preferences of your account. Please note that all actions must be confirmed by entering a password.'
+        // defaultMessage: 'Здесь вы можете сменить ключевые параметры вашего аккаунта. Обратите внимание, что для всех действий необходимо подтверждение при помощи ввода пароля.'
+    },
+    mojangPriorityWarning: {
+        id: 'mojangPriorityWarning',
+        defaultMessage: 'A Mojang account with the same nickname was found. According to project rules, account owner has the right to demand the restoration of control over nickname.'
+        // defaultMessage: 'Найден аккаунт Mojang с таким же ником и, по правилам проекта, его владелец вправе потребовать восстановления контроля над ником.'
+    },
+    oldHashingAlgoWarning: {
+        id: 'oldHashingAlgoWarning',
+        defaultMessage: 'Your was hashed with an old hashing algorithm.<br />Please, change password.'
+        // defaultMessage: 'Для пароля применяется старый алгоритм хэширования<br />Пожалуйста, смените пароль.'
+    },
+    changedAt: {
+        id: 'changedAt',
+        defaultMessage: 'Changed {at}'
+        // defaultMessage: 'Изменен {at}'
+    },
+    disabled: {
+        id: 'disabled',
+        defaultMessage: 'Disabled'
+        // defaultMessage: 'Не включена'
+    },
+    nickname: {
+        id: 'nickname',
+        defaultMessage: 'Nickname'
+        // defaultMessage: 'Ник'
+    },
+    password: {
+        id: 'password',
+        defaultMessage: 'Password'
+        // defaultMessage: 'Пароль'
+    },
+    twoFactorAuth: {
+        id: 'twoFactorAuth',
+        defaultMessage: 'Two factor auth'
+        // defaultMessage: 'Двухфакторная аутентификация'
+    }
+});

src/components/profile/ProfileField.jsx

@@ -5,7 +5,7 @@ import styles from './profile.scss';
 export default class ProfileField extends Component {
     static displayName = 'ProfileField';
     static propTypes = {
-        label: PropTypes.string.isRequired,
+        label: React.PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
         value: React.PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
         warningMessage: React.PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
         readonly: PropTypes.bool