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 (
-
- );
- }
+export {IntlInput as Input};
+
+export function Checkbox(props) {
+ var { label, color = 'green' } = props;
+
+ return (
+
+ );
}
+
+Checkbox.displayName = 'Checkbox';
diff --git a/src/pages/auth/auth.scss b/src/pages/auth/auth.scss
index e945dc7..6e02776 100644
--- a/src/pages/auth/auth.scss
+++ b/src/pages/auth/auth.scss
@@ -15,4 +15,5 @@ $sidebar-width: 320px;
.content {
margin-left: $sidebar-width;
padding: 55px 50px;
+ text-align: center;
}