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) *