diff --git a/src/components/auth/Activation.jsx b/src/components/auth/Activation.jsx index c454325..5b610cd 100644 --- a/src/components/auth/Activation.jsx +++ b/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 ( -
- +
+ + {(msg) => } + }> @@ -30,8 +33,7 @@ export default class Activation extends Component {
- {/* TODO: E-mail i18n*/} - +
@@ -40,7 +42,7 @@ export default class Activation extends Component { -
+
diff --git a/src/components/auth/Activation.messages.js b/src/components/auth/Activation.messages.js new file mode 100644 index 0000000..5a990ca --- /dev/null +++ b/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?' + } +}); diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.jsx index 87c8379..c1d2a1f 100644 --- a/src/components/auth/Login.jsx +++ b/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 ( -
- +
+ + {(msg) => } + }> - + - diff --git a/src/components/auth/Login.messages.js b/src/components/auth/Login.messages.js new file mode 100644 index 0000000..0d402e9 --- /dev/null +++ b/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' + } +}); diff --git a/src/components/auth/Password.jsx b/src/components/auth/Password.jsx index 547af3b..94fd6f6 100644 --- a/src/components/auth/Password.jsx +++ b/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 ( -
- }> +
+ + {(msg) => } + + + }> @@ -39,7 +45,7 @@ export default class Password extends Component { erickskrauch@yandex.ru
- + } /> @@ -49,7 +55,7 @@ export default class Password extends Component { -
+
diff --git a/src/components/auth/Password.messages.js b/src/components/auth/Password.messages.js new file mode 100644 index 0000000..9dfc523 --- /dev/null +++ b/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' + } +}); diff --git a/src/components/auth/Permissions.jsx b/src/components/auth/Permissions.jsx index 39af1fb..8bbf6ea 100644 --- a/src/components/auth/Permissions.jsx +++ b/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 ( -
- +
+ + {(msg) => } + }> @@ -53,7 +55,7 @@ export default class Permissions extends Component { -
+
diff --git a/src/components/auth/Permissions.messages.js b/src/components/auth/Permissions.messages.js new file mode 100644 index 0000000..064de46 --- /dev/null +++ b/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' + } +}); diff --git a/src/components/auth/Register.jsx b/src/components/auth/Register.jsx index 51d0f91..94e2db6 100644 --- a/src/components/auth/Register.jsx +++ b/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 ( -
- +
+ + {(msg) => } + }> - {/* TODO: E-mail i18n*/} - - {/* TODO: E-mail i18n*/} - - {/* TODO: Account password i18n*/} - - {/* TODO: Account password i18n*/} - + + + + - diff --git a/src/components/auth/Register.messages.js b/src/components/auth/Register.messages.js new file mode 100644 index 0000000..7619754 --- /dev/null +++ b/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' + } +}); diff --git a/src/components/auth/SignIn.messages.js b/src/components/auth/SignIn.messages.js deleted file mode 100644 index eda1be8..0000000 --- a/src/components/auth/SignIn.messages.js +++ /dev/null @@ -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?' - }, -}); diff --git a/src/components/auth/activation.scss b/src/components/auth/activation.scss new file mode 100644 index 0000000..7abef3d --- /dev/null +++ b/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; +} diff --git a/src/components/auth/helpLinks.scss b/src/components/auth/helpLinks.scss new file mode 100644 index 0000000..d2f51b5 --- /dev/null +++ b/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; + } + } +} diff --git a/src/components/auth/password.scss b/src/components/auth/password.scss new file mode 100644 index 0000000..9c13724 --- /dev/null +++ b/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; +} diff --git a/src/components/auth/signIn.scss b/src/components/auth/permissions.scss similarity index 57% rename from src/components/auth/signIn.scss rename to src/components/auth/permissions.scss index 95919f9..19c0658 100644 --- a/src/components/auth/signIn.scss +++ b/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; diff --git a/src/components/ui/Form.jsx b/src/components/ui/Form.jsx index 0f5c3e7..c06435e 100644 --- a/src/components/ui/Form.jsx +++ b/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 ( -
-