diff --git a/package.json b/package.json
index 840ad6a..09aa2a3 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,11 @@
"react-dom": "^0.14.3",
"react-helmet": "^2.3.1",
"react-intl": "^2.0.0-pr-3",
+ "react-motion": "^0.3.1",
"react-redux": "^4.0.0",
- "react-router": "^2.0.0-rc4",
+ "react-router": "^2.0.0-rc5",
"redux": "^3.0.4",
- "redux-simple-router": "^1.0.2",
+ "redux-simple-router": "^2.0.0",
"redux-thunk": "^1.0.0"
},
"devDependencies": {
diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.jsx
index 16a4955..87c8379 100644
--- a/src/components/auth/Login.jsx
+++ b/src/components/auth/Login.jsx
@@ -1,4 +1,6 @@
import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { routeActions } from 'redux-simple-router';
import { FormattedMessage as Message } from 'react-intl';
import Helmet from 'react-helmet';
@@ -11,7 +13,7 @@ import { Input, Checkbox } from 'components/ui/Form';
import styles from './signIn.scss';
import messages from './SignIn.messages';
-export default class Login extends Component {
+class Login extends Component {
displayName = 'Login';
render() {
@@ -24,7 +26,7 @@ export default class Login extends Component {
-
@@ -37,4 +39,15 @@ export default class Login extends Component {
);
}
+
+ onSubmit = (event) => {
+ event.preventDefault();
+
+ this.props.push('/password');
+ };
}
+
+
+export default connect(null, {
+ push: routeActions.push
+})(Login);
diff --git a/src/components/auth/signIn.scss b/src/components/auth/signIn.scss
index 7617df2..c52da49 100644
--- a/src/components/auth/signIn.scss
+++ b/src/components/auth/signIn.scss
@@ -77,14 +77,14 @@ $authBodyLeftRightPadding: 32px;
$authBodyTopBottomPadding: 30px;
.authBody {
- composes: body from './../ui/panel.scss';
+ composes: body from 'components/ui/panel.scss';
padding: $authBodyTopBottomPadding $authBodyLeftRightPadding;
text-align: left;
}
.authBodyHeader {
- composes: defaultBodyHeader from './../ui/panel.scss';
+ composes: defaultBodyHeader from 'components/ui/panel.scss';
// Отступы сверху и снизу разные т.к. мы ужимаем высоту линии строки с логином на 2 пикселя и из-за этого теряем отступ снизу
padding: 15px $authBodyLeftRightPadding 17px;
diff --git a/src/index.js b/src/index.js
index 5e0e58a..3eafa7e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,7 @@ import { Provider as ReduxProvider } from 'react-redux';
import thunk from 'redux-thunk';
import { Router, browserHistory } from 'react-router';
-import { syncReduxAndRouter, routeReducer } from 'redux-simple-router';
+import { syncHistory, routeReducer } from 'redux-simple-router';
import { IntlProvider } from 'react-intl';
@@ -27,19 +27,20 @@ const reducer = combineReducers({
routing: routeReducer
});
+const reduxRouterMiddleware = syncHistory(browserHistory);
+
const store = applyMiddleware(
+ reduxRouterMiddleware,
thunk
)(createStore)(reducer);
-syncReduxAndRouter(browserHistory, store);
-
ReactDOM.render(
-
-
-
- {routes}
-
-
- ,
- document.getElementById('app')
+
+
+
+ {routes}
+
+
+ ,
+ document.getElementById('app')
);
diff --git a/src/pages/auth/AuthPage.jsx b/src/pages/auth/AuthPage.jsx
index bcd3482..9cbb087 100644
--- a/src/pages/auth/AuthPage.jsx
+++ b/src/pages/auth/AuthPage.jsx
@@ -1,10 +1,13 @@
import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { TransitionMotion, spring } from 'react-motion';
import AppInfo from 'components/auth/AppInfo';
import styles from './auth.scss';
-export default class AuthPage extends Component {
+class AuthPage extends Component {
displayName = 'AuthPage';
render() {
@@ -13,15 +16,65 @@ export default class AuthPage extends Component {
description: `Лучший альтернативный лаунчер для Minecraft с большим количеством версий и их модификаций, а также возмоностью входа как с лицензионным аккаунтом, так и без него.`
};
+ var { path, children } = this.props;
+
return (
- {this.props.children}
+
+ {(items) => (
+
+ {Object.keys(items).map((path) => {
+ const {children, x} = items[path];
+
+ const style = {
+ position: 'absolute',
+ top: 0,
+ width: '100%',
+ left: `${x}%`
+ };
+
+ return (
+
+ {children}
+
+ );
+ })}
+
+ )}
+
);
}
+
+ willEnter(key, styles) {
+ return {
+ ...styles,
+ x: spring(100)
+ };
+ }
+
+ willLeave(key, styles) {
+ return {
+ ...styles,
+ x: spring(-100)
+ };
+ }
}
+
+export default connect((state) => ({
+ path: state.routing.location.pathname
+}))(AuthPage);
diff --git a/src/routes.js b/src/routes.js
index d1e7855..4a1d106 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -11,9 +11,20 @@ import Permissions from 'components/auth/Permissions';
import Activation from 'components/auth/Activation';
import Password from 'components/auth/Password';
+function requireAuth(nextState, replace) {
+ // if (!auth.loggedIn()) {
+ replace({
+ pathname: '/login',
+ state: {
+ nextPathname: nextState.location.pathname
+ }
+ });
+ // }
+}
+
export default (
-
+
diff --git a/webpack.config.js b/webpack.config.js
index e5b4105..a5f545d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,6 +11,7 @@ var iconfontImporter = require('./webpack/node-sass-iconfont-importer');
/**
* TODO: https://babeljs.io/docs/plugins/
* TODO: отдельные конфиги для env (аля https://github.com/davezuko/react-redux-starter-kit)
+ * TODO: dev tools https://github.com/freeqaz/redux-simple-router-example/blob/master/index.jsx
* https://github.com/glenjamin/ultimate-hot-reloading-example ( обратить внимание на плагины babel )
* https://github.com/gajus/react-css-modules ( + BrowserSync)
*