diff --git a/src/components/auth/register/RegisterBody.jsx b/src/components/auth/register/RegisterBody.jsx
index 5338521..e2060de 100644
--- a/src/components/auth/register/RegisterBody.jsx
+++ b/src/components/auth/register/RegisterBody.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
import { Input, Checkbox, Captcha } from 'components/ui/form';
import BaseAuthBody from 'components/auth/BaseAuthBody';
diff --git a/src/components/footerMenu/FooterMenu.jsx b/src/components/footerMenu/FooterMenu.jsx
index dc46a5e..18eb43a 100644
--- a/src/components/footerMenu/FooterMenu.jsx
+++ b/src/components/footerMenu/FooterMenu.jsx
@@ -1,6 +1,6 @@
import React, { Component, PropTypes } from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
import { FormattedMessage as Message } from 'react-intl';
import { LangMenu } from 'components/langMenu';
diff --git a/src/components/profile/Profile.jsx b/src/components/profile/Profile.jsx
index 9c93f30..ed27509 100644
--- a/src/components/profile/Profile.jsx
+++ b/src/components/profile/Profile.jsx
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { FormattedMessage as Message, FormattedRelative as Relative, FormattedHTMLMessage as HTMLMessage } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
import Helmet from 'react-helmet';
import { userShape } from 'components/user/User';
@@ -15,7 +15,7 @@ import messages from './Profile.intl.json';
import RulesPage from 'pages/rules/RulesPage';
-export default class Profile extends Component {
+class Profile extends Component {
static displayName = 'Profile';
static propTypes = {
user: userShape
@@ -130,3 +130,9 @@ export default class Profile extends Component {
this.UUID = el;
}
}
+
+import { connect } from 'react-redux';
+
+export default connect((state) => ({
+ user: state.user
+}))(Profile);
diff --git a/src/components/profile/ProfileField.jsx b/src/components/profile/ProfileField.jsx
index bc40320..20a819d 100644
--- a/src/components/profile/ProfileField.jsx
+++ b/src/components/profile/ProfileField.jsx
@@ -1,6 +1,6 @@
import React, { Component, PropTypes } from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
import styles from './profile.scss';
diff --git a/src/components/profile/ProfileForm.jsx b/src/components/profile/ProfileForm.jsx
index e39452d..ac6818d 100644
--- a/src/components/profile/ProfileForm.jsx
+++ b/src/components/profile/ProfileForm.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
import FormComponent from 'components/ui/form/FormComponent';
diff --git a/src/components/ui/popup/PopupStack.jsx b/src/components/ui/popup/PopupStack.jsx
index e319143..0292f00 100644
--- a/src/components/ui/popup/PopupStack.jsx
+++ b/src/components/ui/popup/PopupStack.jsx
@@ -1,7 +1,7 @@
import React, { Component, PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
-import { browserHistory } from 'react-router';
+import { browserHistory } from 'services/history';
import styles from './popup.scss';
@@ -18,7 +18,7 @@ export class PopupStack extends Component {
componentWillMount() {
document.addEventListener('keyup', this.onKeyPress);
- this.unlistenTransition = browserHistory.listenBefore(this.onRouteLeave);
+ this.unlistenTransition = browserHistory.listen(this.onRouteLeave);
}
componentWillUnmount() {
diff --git a/src/components/ui/scrollTo.js b/src/components/ui/scrollTo.js
deleted file mode 100644
index 1c3825e..0000000
--- a/src/components/ui/scrollTo.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Implements scroll to animation with momentum effect
- *
- * @see http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html
- */
-
-import { rAF, getScrollTop } from 'functions';
-
-const TIME_CONSTANT = 100; // higher numbers - slower animation
-export function scrollTo(y) {
- const start = Date.now();
- let scrollWasTouched = false;
- rAF(() => { // wrap in rAF to optimize initial reading of scrollTop
- const contentHeight = document.documentElement.scrollHeight;
- const windowHeight = window.innerHeight;
- if (contentHeight < y + windowHeight) {
- y = contentHeight - windowHeight;
- }
-
- const amplitude = y - getScrollTop();
-
- (function animateScroll() {
- const elapsed = Date.now() - start;
-
- let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT);
-
- if (Math.abs(delta) > 0.5 && !scrollWasTouched) {
- rAF(animateScroll);
- } else {
- delta = 0;
- document.removeEventListener('mousewheel', markScrollTouched);
- document.removeEventListener('touchstart', markScrollTouched);
- }
-
- if (scrollWasTouched) {
- return;
- }
-
- const newScrollTop = y + delta;
- window.scrollTo(0, newScrollTop);
- }());
- });
-
- document.addEventListener('mousewheel', markScrollTouched);
- document.addEventListener('touchstart', markScrollTouched);
- function markScrollTouched() {
- scrollWasTouched = true;
- }
-}
diff --git a/src/components/userbar/Userbar.jsx b/src/components/userbar/Userbar.jsx
index 60ebc90..d159231 100644
--- a/src/components/userbar/Userbar.jsx
+++ b/src/components/userbar/Userbar.jsx
@@ -1,6 +1,6 @@
import React, { Component, PropTypes } from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
import { FormattedMessage as Message } from 'react-intl';
import buttons from 'components/ui/buttons.scss';
diff --git a/src/containers/AuthFlowRoute.jsx b/src/containers/AuthFlowRoute.jsx
new file mode 100644
index 0000000..332ce8d
--- /dev/null
+++ b/src/containers/AuthFlowRoute.jsx
@@ -0,0 +1,19 @@
+import { PropTypes } from 'react';
+import { Route } from 'react-router-dom';
+
+import AuthFlowRouteContents from './AuthFlowRouteContents';
+
+export default function AuthFlowRoute(props) {
+ const {component: Component, ...routeProps} = props;
+
+ return (
+
(
+
+ )}/>
+ );
+}
+
+AuthFlowRoute.propTypes = {
+ component: PropTypes.any,
+ routerProps: PropTypes.object
+};
diff --git a/src/containers/AuthFlowRouteContents.jsx b/src/containers/AuthFlowRouteContents.jsx
new file mode 100644
index 0000000..4d3f80d
--- /dev/null
+++ b/src/containers/AuthFlowRouteContents.jsx
@@ -0,0 +1,51 @@
+import { Component, PropTypes } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import authFlow from 'services/authFlow';
+
+export default class AuthFlowRouteContents extends Component {
+ static propTypes = {
+ component: PropTypes.any,
+ routerProps: PropTypes.object
+ };
+
+ state = {
+ component: null
+ };
+
+ componentDidMount() {
+ this.handleProps(this.props);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.handleProps(nextProps);
+ }
+
+ render() {
+ return this.state.component;
+ }
+
+ handleProps(props) {
+ const {routerProps} = props;
+
+ authFlow.handleRequest({
+ path: routerProps.location.pathname,
+ params: routerProps.match.params,
+ query: routerProps.location.query
+ }, this.onRedirect.bind(this), this.onRouteAllowed.bind(this, props));
+ }
+
+ onRedirect(path) {
+ this.setState({
+ component:
+ });
+ }
+
+ onRouteAllowed(props) {
+ const {component: Component} = props;
+
+ this.setState({
+ component:
+ });
+ }
+}
diff --git a/src/containers/PrivateRoute.jsx b/src/containers/PrivateRoute.jsx
new file mode 100644
index 0000000..d8bc315
--- /dev/null
+++ b/src/containers/PrivateRoute.jsx
@@ -0,0 +1,20 @@
+import authFlow from 'services/authFlow';
+import { Route, Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+const PrivateRoute = ({user, component: Component, ...rest}) => (
+ (
+ user.isGuest ? (
+
+ ) : (
+
+ )
+ )}/>
+);
+
+export default connect((state) => ({
+ user: state.user
+}))(PrivateRoute);
diff --git a/src/functions.js b/src/functions.js
index 2759246..68a9595 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -92,3 +92,83 @@ export function getScrollTop() {
const doc = document.documentElement;
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
}
+
+/**
+ * Implements scroll to animation with momentum effect
+ *
+ * @see http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html
+ */
+
+const TIME_CONSTANT = 100; // higher numbers - slower animation
+export function scrollTo(y) {
+ const start = Date.now();
+ let scrollWasTouched = false;
+ rAF(() => { // wrap in rAF to optimize initial reading of scrollTop
+ const contentHeight = document.documentElement.scrollHeight;
+ const windowHeight = window.innerHeight;
+ if (contentHeight < y + windowHeight) {
+ y = contentHeight - windowHeight;
+ }
+
+ const amplitude = y - getScrollTop();
+
+ (function animateScroll() {
+ const elapsed = Date.now() - start;
+
+ let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT);
+
+ if (Math.abs(delta) > 0.5 && !scrollWasTouched) {
+ rAF(animateScroll);
+ } else {
+ delta = 0;
+ document.removeEventListener('mousewheel', markScrollTouched);
+ document.removeEventListener('touchstart', markScrollTouched);
+ }
+
+ if (scrollWasTouched) {
+ return;
+ }
+
+ const newScrollTop = y + delta;
+ window.scrollTo(0, newScrollTop);
+ }());
+ });
+
+ document.addEventListener('mousewheel', markScrollTouched);
+ document.addEventListener('touchstart', markScrollTouched);
+ function markScrollTouched() {
+ scrollWasTouched = true;
+ }
+}
+
+const SCROLL_ANCHOR_OFFSET = 80; // 50 + 30 (header height + some spacing)
+// Первый скролл выполняется сразу после загрузки страницы, так что чтобы снизить
+// нагрузку на рендеринг мы откладываем первый скрол на 200ms
+let isFirstScroll = true;
+/**
+ * Scrolls to page's top or #anchor link, if any
+ */
+export function restoreScroll() {
+ const {hash} = location;
+
+ setTimeout(() => {
+ isFirstScroll = false;
+ const id = hash.replace('#', '');
+ const el = id ? document.getElementById(id) : null;
+ const viewPort = document.body;
+
+ if (!viewPort) {
+ console.log('Can not find viewPort element'); // eslint-disable-line
+ return;
+ }
+
+ let y = 0;
+ if (el) {
+ const {top} = el.getBoundingClientRect();
+
+ y = getScrollTop() + top - SCROLL_ANCHOR_OFFSET;
+ }
+
+ scrollTo(y, viewPort);
+ }, isFirstScroll ? 200 : 0);
+}
diff --git a/src/index.js b/src/index.js
index 14b7748..fd592c6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,17 +4,19 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { Provider as ReduxProvider } from 'react-redux';
-import { Router, browserHistory } from 'react-router';
+import { Router, Route, Switch } from 'react-router-dom';
import { factory as userFactory } from 'components/user/factory';
import { IntlProvider } from 'components/i18n';
-import routesFactory from 'routes';
+import authFlow from 'services/authFlow';
import storeFactory from 'storeFactory';
import bsodFactory from 'components/ui/bsod/factory';
import loader from 'services/loader';
import logger from 'services/logger';
import font from 'services/font';
-import history from 'services/history';
+import history, { browserHistory } from 'services/history';
+import RootPage from 'pages/root/RootPage';
+import AuthFlowRoute from 'containers/AuthFlowRoute';
history.init();
@@ -24,7 +26,8 @@ logger.init({
const store = storeFactory();
-bsodFactory(store, stopLoading);
+bsodFactory(store, () => loader.hide());
+authFlow.setStore(store);
Promise.all([
userFactory(store),
@@ -34,11 +37,11 @@ Promise.all([
ReactDOM.render(
- {
- restoreScroll();
- stopLoading();
- }}>
- {routesFactory(store)}
+
+
+ null} />
+
+
,
@@ -48,45 +51,6 @@ Promise.all([
initAnalytics();
});
-
-function stopLoading() {
- loader.hide();
-}
-
-import { scrollTo } from 'components/ui/scrollTo';
-import { getScrollTop } from 'functions';
-const SCROLL_ANCHOR_OFFSET = 80; // 50 + 30 (header height + some spacing)
-// Первый скролл выполняется сразу после загрузки страницы, так что чтобы снизить
-// нагрузку на рендеринг мы откладываем первый скрол на 200ms
-let isFirstScroll = true;
-/**
- * Scrolls to page's top or #anchor link, if any
- */
-function restoreScroll() {
- const {hash} = location;
-
- setTimeout(() => {
- isFirstScroll = false;
- const id = hash.replace('#', '');
- const el = id ? document.getElementById(id) : null;
- const viewPort = document.body;
-
- if (!viewPort) {
- console.log('Can not find viewPort element'); // eslint-disable-line
- return;
- }
-
- let y = 0;
- if (el) {
- const {top} = el.getBoundingClientRect();
-
- y = getScrollTop() + top - SCROLL_ANCHOR_OFFSET;
- }
-
- scrollTo(y, viewPort);
- }, isFirstScroll ? 200 : 0);
-}
-
import { loadScript, debounce } from 'functions';
const trackPageView = debounce(_trackPageView);
function initAnalytics() {
diff --git a/src/pages/404/PageNotFound.jsx b/src/pages/404/PageNotFound.jsx
index 136d1fb..920be65 100644
--- a/src/pages/404/PageNotFound.jsx
+++ b/src/pages/404/PageNotFound.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { FooterMenu } from 'components/footerMenu';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
import { FormattedMessage as Message } from 'react-intl';
import Helmet from 'react-helmet';
diff --git a/src/pages/auth/AuthPage.jsx b/src/pages/auth/AuthPage.jsx
index 4ee6fbd..08382aa 100644
--- a/src/pages/auth/AuthPage.jsx
+++ b/src/pages/auth/AuthPage.jsx
@@ -1,10 +1,22 @@
-import React, { Component, PropTypes } from 'react';
+import { Component, PropTypes } from 'react';
-import { connect } from 'react-redux';
+import { Route, Switch, Redirect } from 'react-router-dom';
import AppInfo from 'components/auth/appInfo/AppInfo';
import PanelTransition from 'components/auth/PanelTransition';
+import Register from 'components/auth/register/Register';
+import Login from 'components/auth/login/Login';
+import Permissions from 'components/auth/permissions/Permissions';
+import ChooseAccount from 'components/auth/chooseAccount/ChooseAccount';
+import Activation from 'components/auth/activation/Activation';
+import ResendActivation from 'components/auth/resendActivation/ResendActivation';
+import Password from 'components/auth/password/Password';
+import AcceptRules from 'components/auth/acceptRules/AcceptRules';
+import ForgotPassword from 'components/auth/forgotPassword/ForgotPassword';
+import RecoverPassword from 'components/auth/recoverPassword/RecoverPassword';
+import Finish from 'components/auth/finish/Finish';
+
import styles from './auth.scss';
class AuthPage extends Component {
@@ -31,7 +43,20 @@ class AuthPage extends Component {