Окончательно раскидал стили и переводы по модулям

src/components/auth/Activation.jsx

@@ -7,16 +7,19 @@ import buttons from 'components/ui/buttons.scss';
 import { Panel, PanelBody, PanelFooter } from 'components/ui/Panel';
 import { Input } from 'components/ui/Form';
 
-import styles from './signIn.scss';
-import messages from './SignIn.messages';
+import styles from './activation.scss';
+import {helpLinks as helpLinksStyles} from './helpLinks.scss';
+import messages from './Activation.messages';
 
 export default class Activation extends Component {
     displayName = 'Activation';
 
     render() {
         return (
-            <div className={styles.signIn}>
-                <Helmet title="Activation" />
+            <div>
+                <Message {...messages.accountActivationTitle}>
+                    {(msg) => <Helmet title={msg} />}
+                </Message>
 
                 <Panel icon="arrowLeft" title={<Message {...messages.accountActivationTitle} />}>
                     <PanelBody>
@@ -30,8 +33,7 @@ export default class Activation extends Component {
                             </div>
                         </div>
                         <div className={styles.formRow}>
-                            {/* TODO: E-mail i18n*/}
-                            <Input type="email" color="blue" className={styles.activationCodeInput} placeholder="Enter the code from E-mail here" />
+                            <Input color="blue" className={styles.activationCodeInput} placeholder={messages.enterTheCode} />
                         </div>
                     </PanelBody>
                     <PanelFooter>
@@ -40,7 +42,7 @@ export default class Activation extends Component {
                         </button>
                     </PanelFooter>
                 </Panel>
-                <div className={styles.helpLinks}>
+                <div className={helpLinksStyles}>
                     <a href="#">
                         <Message {...messages.didNotReceivedEmail} />
                     </a>

src/components/auth/Activation.messages.js

@@ -0,0 +1,33 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    accountActivationTitle: {
+        id: 'accountActivationTitle',
+        defaultMessage: 'Account activation'
+    },
+
+    activationMailWasSent: {
+        id: 'activationMailWasSent',
+        defaultMessage: 'Please check {email} for the message with the last registration step'
+    },
+
+    confirmEmail: {
+        id: 'confirmEmail',
+        defaultMessage: 'Confirm E-mail'
+    },
+
+    didNotReceivedEmail: {
+        id: 'didNotReceivedEmail',
+        defaultMessage: 'Did not received E-mail?'
+    },
+
+    enterTheCode: {
+        id: 'enterTheCode',
+        defaultMessage: 'Enter the code from E-mail here'
+    },
+
+    didNotReceivedEmail: {
+        id: 'didNotReceivedEmail',
+        defaultMessage: 'Did not received E-mail?'
+    }
+});

src/components/auth/Login.jsx

@@ -6,24 +6,26 @@ import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
 
 import buttons from 'components/ui/buttons.scss';
-import icons from 'components/ui/icons.scss';
-import { Panel, PanelBody, PanelFooter, PanelBodyHeader } from 'components/ui/Panel';
-import { Input, Checkbox } from 'components/ui/Form';
+import { Panel, PanelBody, PanelFooter } from 'components/ui/Panel';
+import { Input } from 'components/ui/Form';
 
-import styles from './signIn.scss';
-import messages from './SignIn.messages';
+import messages from './Login.messages';
+import {helpLinks as helpLinksStyles} from './helpLinks.scss';
+import passwordMessages from './Password.messages';
 
 class Login extends Component {
     displayName = 'Login';
 
     render() {
         return (
-            <div className={styles.signIn}>
-                <Helmet title="Login" />
+            <div>
+                <Message {...messages.signInTitle}>
+                    {(msg) => <Helmet title={msg} />}
+                </Message>
 
                 <Panel title={<Message {...messages.signInTitle} />}>
                     <PanelBody>
-                        <Input icon="envelope" type="email" placeholder="E-mail or username" />
+                        <Input icon="envelope" type="email" placeholder={messages.emailOrUsername} />
                     </PanelBody>
                     <PanelFooter>
                         <button className={buttons.green} onClick={this.onSubmit}>
@@ -31,9 +33,9 @@ class Login extends Component {
                         </button>
                     </PanelFooter>
                 </Panel>
-                <div className={styles.helpLinks}>
+                <div className={helpLinksStyles}>
                     <a href="#">
-                        <Message {...messages.forgotPassword} />
+                        <Message {...passwordMessages.forgotPassword} />
                     </a>
                 </div>
             </div>

src/components/auth/Login.messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    signInTitle: {
+        id: 'signInTitle',
+        defaultMessage: 'Sign in'
+    },
+
+    emailOrUsername: {
+        id: 'emailOrUsername',
+        defaultMessage: 'E-mail or username'
+    },
+
+    next: {
+        id: 'next',
+        defaultMessage: 'Next'
+    }
+});

src/components/auth/Password.jsx

@@ -1,22 +1,28 @@
 import React, { Component } from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
+import Helmet from 'react-helmet';
 
 import buttons from 'components/ui/buttons.scss';
 import icons from 'components/ui/icons.scss';
 import { Panel, PanelBody, PanelFooter, PanelBodyHeader } from 'components/ui/Panel';
 import { Input, Checkbox } from 'components/ui/Form';
 
-import styles from './signIn.scss';
-import messages from './SignIn.messages';
+import styles from './password.scss';
+import {helpLinks as helpLinksStyles} from './helpLinks.scss';
+import messages from './Password.messages';
 
 export default class Password extends Component {
     displayName = 'Password';
 
     render() {
         return (
-            <div className={styles.signIn}>
-                <Panel icon="arrowLeft" title={<Message {...messages.enterPassword} />}>
+            <div>
+                <Message {...messages.passwordTitle}>
+                    {(msg) => <Helmet title={msg} />}
+                </Message>
+
+                <Panel icon="arrowLeft" title={<Message {...messages.passwordTitle} />}>
                     <PanelBody>
                         <PanelBodyHeader type="error">
                             <Message {...messages.invalidPassword} />
@@ -39,7 +45,7 @@ export default class Password extends Component {
                                 erickskrauch@yandex.ru
                             </div>
                         </div>
-                        <Input icon="key" type="password" placeholder="Account password" />
+                        <Input icon="key" type="password" placeholder={messages.accountPassword} />
 
                         <Checkbox label={<Message {...messages.rememberMe} />} />
                     </PanelBody>
@@ -49,7 +55,7 @@ export default class Password extends Component {
                         </button>
                     </PanelFooter>
                 </Panel>
-                <div className={styles.helpLinks}>
+                <div className={helpLinksStyles}>
                     <a href="#">
                         <Message {...messages.forgotPassword} />
                     </a>

src/components/auth/Password.messages.js

@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    passwordTitle: {
+        id: 'passwordTitle',
+        defaultMessage: 'Enter password'
+    },
+
+    signInButton: {
+        id: 'signInButton',
+        defaultMessage: 'Sign in'
+    },
+
+    invalidPassword: {
+        id: 'invalidPassword',
+        defaultMessage: 'You entered wrong account password.'
+    },
+
+    suggestResetPassword: {
+        id: 'suggestResetPassword',
+        defaultMessage: 'Are you have {link}?'
+    },
+
+    forgotYourPassword: {
+        id: 'forgotYourPassword',
+        defaultMessage: 'forgot your password'
+    },
+
+    forgotPassword: {
+        id: 'forgotPassword',
+        defaultMessage: 'Forgot password'
+    },
+
+    accountPassword: {
+        id: 'accountPassword',
+        defaultMessage: 'Account password'
+    },
+
+    rememberMe: {
+        id: 'rememberMe',
+        defaultMessage: 'Remember me on this device'
+    }
+});

src/components/auth/Permissions.jsx

@@ -6,18 +6,20 @@ import Helmet from 'react-helmet';
 import buttons from 'components/ui/buttons.scss';
 import icons from 'components/ui/icons.scss';
 import { Panel, PanelBody, PanelFooter, PanelBodyHeader } from 'components/ui/Panel';
-import { Input, Checkbox } from 'components/ui/Form';
 
-import styles from './signIn.scss';
-import messages from './SignIn.messages';
+import styles from './permissions.scss';
+import {helpLinks as helpLinksStyles} from './helpLinks.scss';
+import messages from './Permissions.messages';
 
 export default class Permissions extends Component {
     displayName = 'Permissions';
 
     render() {
         return (
-            <div className={styles.signIn}>
-                <Helmet title="App premissions" />
+            <div>
+                <Message {...messages.permissionsTitle}>
+                    {(msg) => <Helmet title={msg} />}
+                </Message>
 
                 <Panel title={<Message {...messages.permissionsTitle} />}>
                     <PanelBody>
@@ -53,7 +55,7 @@ export default class Permissions extends Component {
                         </button>
                     </PanelFooter>
                 </Panel>
-                <div className={styles.helpLinks}>
+                <div className={helpLinksStyles}>
                     <a href="#">
                         <Message {...messages.decline} />
                     </a>

src/components/auth/Permissions.messages.js

@@ -0,0 +1,29 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    permissionsTitle: {
+        id: 'permissionsTitle',
+        defaultMessage: 'Application permissions'
+    },
+
+    youAuthorizedAs: {
+        id: 'youAuthorizedAs',
+        defaultMessage: 'You authorized as:'
+    },
+
+    theAppNeedsAccess: {
+        id: 'theAppNeedsAccess',
+        // Мне нельзя html? Получите неразрывный пробел! ˅˅˅˅˅˅˅˅˅˅˅
+        defaultMessage: 'This applications needs access              to your data'
+    },
+
+    decline: {
+        id: 'decline',
+        defaultMessage: 'Decline'
+    },
+
+    approve: {
+        id: 'approve',
+        defaultMessage: 'Approve'
+    }
+});

src/components/auth/Register.jsx

@@ -4,31 +4,29 @@ import { FormattedMessage as Message } from 'react-intl';
 import Helmet from 'react-helmet';
 
 import buttons from 'components/ui/buttons.scss';
-import icons from 'components/ui/icons.scss';
-import { Panel, PanelBody, PanelFooter, PanelBodyHeader } from 'components/ui/Panel';
+import { Panel, PanelBody, PanelFooter } from 'components/ui/Panel';
 import { Input, Checkbox } from 'components/ui/Form';
 
-import styles from './signIn.scss';
-import messages from './SignIn.messages';
+import {helpLinks as helpLinksStyles} from './helpLinks.scss';
+import messages from './Register.messages';
+import activationMessages from './Activation.messages';
 
 export default class Register extends Component {
     displayName = 'Register';
 
     render() {
         return (
-            <div className={styles.signIn}>
-                <Helmet title="Register" />
+            <div>
+                <Message {...messages.signUpTitle}>
+                    {(msg) => <Helmet title={msg} />}
+                </Message>
 
                 <Panel title={<Message {...messages.signUpTitle} />}>
                     <PanelBody>
-                        {/* TODO: E-mail i18n*/}
-                        <Input icon="user" color="blue" type="text" placeholder="Your nickname" />
-                        {/* TODO: E-mail i18n*/}
-                        <Input icon="envelope" color="blue" type="email" placeholder="Your E-mail" />
-                        {/* TODO: Account password i18n*/}
-                        <Input icon="key" color="blue" type="password" placeholder="Account password" />
-                        {/* TODO: Account password i18n*/}
-                        <Input icon="key" color="blue" type="password" placeholder="Repeat password" />
+                        <Input icon="user" color="blue" type="text" placeholder={messages.yourNickname} />
+                        <Input icon="envelope" color="blue" type="email" placeholder={messages.yourEmail} />
+                        <Input icon="key" color="blue" type="password" placeholder={messages.accountPassword} />
+                        <Input icon="key" color="blue" type="password" placeholder={messages.repeatPassword} />
 
                         <Checkbox color="blue" label={
                             <Message {...messages.acceptRules} values={{
@@ -46,9 +44,9 @@ export default class Register extends Component {
                         </button>
                     </PanelFooter>
                 </Panel>
-                <div className={styles.helpLinks}>
+                <div className={helpLinksStyles}>
                     <a href="#">
-                        <Message {...messages.didNotReceivedEmail} />
+                        <Message {...activationMessages.didNotReceivedEmail} />
                     </a>
                 </div>
             </div>

src/components/auth/Register.messages.js

@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    signUpTitle: {
+        id: 'signUpTitle',
+        defaultMessage: 'Sign Up'
+    },
+
+    yourNickname: {
+        id: 'yourNickname',
+        defaultMessage: 'Your nickname'
+    },
+
+    yourEmail: {
+        id: 'yourEmail',
+        defaultMessage: 'Your E-mail'
+    },
+
+    accountPassword: {
+        id: 'accountPassword',
+        defaultMessage: 'Account password'
+    },
+
+    repeatPassword: {
+        id: 'repeatPassword',
+        defaultMessage: 'Repeat password'
+    },
+
+    signUpButton: {
+        id: 'signUpButton',
+        defaultMessage: 'Register'
+    },
+
+    acceptRules: {
+        id: 'acceptRules',
+        defaultMessage: 'I agree with {link}'
+    },
+
+    termsOfService: {
+        id: 'termsOfService',
+        defaultMessage: 'Terms of service'
+    }
+});

src/components/auth/SignIn.messages.js

@@ -1,125 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-    signInTitle: {
-        id: 'signInTitle',
-        defaultMessage: 'Sign in'
-    },
-
-    next: {
-        id: 'next',
-        defaultMessage: 'Next'
-    },
-
-    enterPassword: {
-        id: 'enterPassword',
-        defaultMessage: 'Enter password'
-    },
-
-    rememberMe: {
-        id: 'rememberMe',
-        defaultMessage: 'Remember me on this device'
-    },
-
-    signInButton: {
-        id: 'signInButton',
-        defaultMessage: 'Sign in'
-    },
-
-    invalidPassword: {
-        id: 'invalidPassword',
-        defaultMessage: 'You entered wrong account password.'
-    },
-
-    suggestResetPassword: {
-        id: 'suggestResetPassword',
-        defaultMessage: 'Are you have {link}?'
-    },
-
-    forgotYourPassword: {
-        id: 'forgotYourPassword',
-        defaultMessage: 'forgot your password'
-    },
-
-    forgotPassword: {
-        id: 'forgotPassword',
-        defaultMessage: 'Forgot password'
-    },
-
-    contactSupport: {
-        id: 'contactSupport',
-        defaultMessage: 'Contact support'
-    },
-
-
-
-    permissionsTitle: {
-        id: 'permissionsTitle',
-        defaultMessage: 'Application permissions'
-    },
-
-    youAuthorizedAs: {
-        id: 'youAuthorizedAs',
-        defaultMessage: 'You authorized as:'
-    },
-
-    theAppNeedsAccess: {
-        id: 'theAppNeedsAccess',
-        // Мне нельзя html? Получите неразрывный пробел! ˅˅˅˅˅˅˅˅˅˅˅
-        defaultMessage: 'This applications needs access              to your data'
-    },
-
-    decline: {
-        id: 'decline',
-        defaultMessage: 'Decline'
-    },
-
-    approve: {
-        id: 'approve',
-        defaultMessage: 'Approve'
-    },
-
-
-
-    signUpTitle: {
-        id: 'signUpTitle',
-        defaultMessage: 'Sign Up'
-    },
-
-    signUpButton: {
-        id: 'signUpButton',
-        defaultMessage: 'Register'
-    },
-
-    acceptRules: {
-        id: 'acceptRules',
-        defaultMessage: 'I agree with {link}'
-    },
-
-    termsOfService: {
-        id: 'termsOfService',
-        defaultMessage: 'Terms of service'
-    },
-
-
-
-    accountActivationTitle: {
-        id: 'accountActivationTitle',
-        defaultMessage: 'Account activation'
-    },
-
-    activationMailWasSent: {
-        id: 'activationMailWasSent',
-        defaultMessage: 'Please check {email} for the message with the last registration step'
-    },
-
-    confirmEmail: {
-        id: 'confirmEmail',
-        defaultMessage: 'Confirm E-mail'
-    },
-
-    didNotReceivedEmail: {
-        id: 'didNotReceivedEmail',
-        defaultMessage: 'Did not received E-mail?'
-    },
-});

src/components/auth/activation.scss

@@ -0,0 +1,24 @@
+@import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+
+.description {
+}
+
+.descriptionImage {
+    composes: envelope from 'components/ui/icons.scss';
+
+    font-size: 100px;
+    color: $blue;
+}
+
+.descriptionText {
+    font-family: $font-family-title;
+    margin: 5px 0 19px;
+    line-height: 1.4;
+}
+
+.activationCodeInput {
+    composes: blueTextField from 'components/ui/form.scss';
+
+    text-align: center;
+}

src/components/auth/helpLinks.scss

@@ -0,0 +1,19 @@
+.helpLinks {
+    margin: 8px 0;
+
+    color: #444;
+    text-align: center;
+    font-size: 16px;
+
+    a {
+        color: #444;
+        border-bottom: 1px dotted #444;
+        text-decoration: none;
+        transition: .25s;
+
+        &:hover {
+            border-bottom-color: #777;
+            color: #777;
+        }
+    }
+}

src/components/auth/password.scss

@@ -0,0 +1,22 @@
+@import '~components/ui/fonts.scss';
+
+.avatar {
+    width: 90px;
+    height: 90px;
+    font-size: 90px;
+    line-height: 1;
+    margin: 0 auto;
+
+    img {
+        width: 100%;
+    }
+}
+
+.email {
+    font-family: $font-family-title;
+    font-size: 18px;
+    color: #fff;
+
+    margin-bottom: 15px;
+    margin-top: 10px;
+}

src/components/auth/permissions.scss

@@ -1,78 +1,6 @@
 @import '~components/ui/colors.scss';
-
-.signIn {
-    margin-bottom: 10px;
-    text-align: center;
-}
-
-.helpLinks {
-    margin: 8px 0;
-
-    color: #444;
-    text-align: center;
-    font-size: 16px;
-
-    a {
-        color: #444;
-        border-bottom: 1px dotted #444;
-        text-decoration: none;
-        transition: .25s;
-
-        &:hover {
-            border-bottom-color: #777;
-            color: #777;
-        }
-    }
-}
-
-// sign in second step
 @import '~components/ui/fonts.scss';
-.avatar {
-    width: 90px;
-    height: 90px;
-    font-size: 90px;
-    line-height: 1;
-    margin: 0 auto;
 
-    img {
-        width: 100%;
-    }
-}
-
-.email {
-    font-family: $font-family-title;
-    font-size: 18px;
-    color: #fff;
-
-    margin-bottom: 15px;
-    margin-top: 10px;
-}
-
-// account activation
-@import '~components/ui/fonts.scss';
-.description {
-}
-
-.descriptionImage {
-    composes: envelope from 'components/ui/icons.scss';
-
-    font-size: 100px;
-    color: $blue;
-}
-
-.descriptionText {
-    font-family: $font-family-title;
-    margin: 5px 0 19px;
-    line-height: 1.4;
-}
-
-.activationCodeInput {
-    composes: blueTextField from 'components/ui/form.scss';
-
-    text-align: center;
-}
-
-// app permissions
 .authInfo {
     // Отступы сверху и снизу разные т.к. мы ужимаем высоту линии строки с логином на 2 пикселя и из-за этого теряем отступ снизу
     padding: 5px 20px 7px;

src/components/ui/Form.jsx

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 
 import classNames from 'classnames';
+import {injectIntl, intlShape} from 'react-intl';
 
 import icons from './icons.scss';
 import styles from './form.scss';
 
-export function Input(props) {
+function Input(props) {
     var { icon, color = 'green' } = props;
 
     props = {
@@ -13,6 +14,10 @@ export function Input(props) {
         ...props
     };
 
+    if (props.placeholder && props.placeholder.id) {
+        props.placeholder = props.intl.formatMessage(props.placeholder);
+    }
+
     var baseClass = styles.formRow;
     if (icon) {
         baseClass = styles.formIconRow;
@@ -29,20 +34,27 @@ export function Input(props) {
     );
 }
 
-export class Checkbox extends Component {
-    displayName = 'Checkbox';
+Input.displayName = 'Input';
+Input.propTypes = {
+    intl: intlShape.isRequired
+};
 
-    render() {
-        var { label, color = 'green' } = this.props;
+const IntlInput = injectIntl(Input);
 
-        return (
-            <div className={styles[`${color}CheckboxRow`]}>
-                <label className={styles.checkboxContainer}>
-                    <input className={styles.checkboxInput} type="checkbox" />
-                    <div className={styles.checkbox} />
-                    {label}
-                </label>
-            </div>
-        );
-    }
+export {IntlInput as Input};
+
+export function Checkbox(props) {
+    var { label, color = 'green' } = props;
+
+    return (
+        <div className={styles[`${color}CheckboxRow`]}>
+            <label className={styles.checkboxContainer}>
+                <input className={styles.checkboxInput} type="checkbox" />
+                <div className={styles.checkbox} />
+                {label}
+            </label>
+        </div>
+    );
 }
+
+Checkbox.displayName = 'Checkbox';

src/pages/auth/auth.scss

@@ -15,4 +15,5 @@ $sidebar-width: 320px;
 .content {
     margin-left: $sidebar-width;
     padding: 55px 50px;
+    text-align: center;
 }