diff --git a/package.json b/package.json index f2d69b8..73dbdd5 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "intl-messageformat": "^1.1.0", "react": "^0.14.0", "react-dom": "^0.14.3", + "react-height": "^2.0.3", "react-helmet": "^2.3.1", "react-intl": "^2.0.0-beta-2", "react-motion": "^0.3.1", diff --git a/src/components/auth/Activation.jsx b/src/components/auth/Activation.jsx index 5b610cd..3c6e5d2 100644 --- a/src/components/auth/Activation.jsx +++ b/src/components/auth/Activation.jsx @@ -11,7 +11,51 @@ import styles from './activation.scss'; import {helpLinks as helpLinksStyles} from './helpLinks.scss'; import messages from './Activation.messages'; -export default class Activation extends Component { +export default function Activation() { + var Title = () => ( // TODO: separate component for PageTitle + + {(msg) => {msg}} + + ); + Title.goBack = '/register'; + + return { + Title, + Body: () => ( +
+
+
+ +
+ erickskrauch@yandex.ru) + }} /> +
+
+
+ +
+
+ ), + Footer: (props) => ( + + ), + Links: () => ( + + + + ) + }; +} + + +export class _Activation extends Component { displayName = 'Activation'; render() { diff --git a/src/components/auth/Activation.messages.js b/src/components/auth/Activation.messages.js index 5a990ca..92b1379 100644 --- a/src/components/auth/Activation.messages.js +++ b/src/components/auth/Activation.messages.js @@ -24,10 +24,5 @@ export default defineMessages({ 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 00c7353..c0f2b42 100644 --- a/src/components/auth/Login.jsx +++ b/src/components/auth/Login.jsx @@ -13,7 +13,40 @@ import messages from './Login.messages'; import {helpLinks as helpLinksStyles} from './helpLinks.scss'; import passwordMessages from './Password.messages'; -class Login extends Component { +export default function Login() { + var context = { + onSubmit(event) { + event.preventDefault(); + + this.props.push('/password'); + } + }; + + return { + Title: () => ( // TODO: separate component for PageTitle + + {(msg) => {msg}} + + ), + Body: () => , + Footer: (props) => ( + + ), + Links: () => ( + + + + ) + }; +} + +class _Login extends Component { displayName = 'Login'; render() { @@ -50,6 +83,6 @@ class Login extends Component { } -export default connect(null, { - push: routeActions.push -})(Login); +// export connect(null, { +// push: routeActions.push +// })(Login); diff --git a/src/components/auth/PanelTransition.jsx b/src/components/auth/PanelTransition.jsx new file mode 100644 index 0000000..6943c26 --- /dev/null +++ b/src/components/auth/PanelTransition.jsx @@ -0,0 +1,264 @@ +import React, { Component } from 'react'; + +import { TransitionMotion, spring } from 'react-motion'; +import ReactHeight from 'react-height'; + +import { Panel, PanelBody, PanelFooter, PanelHeader } from 'components/ui/Panel'; +import {helpLinks as helpLinksStyles} from 'components/auth/helpLinks.scss'; +import panelStyles from 'components/ui/panel.scss'; +import icons from 'components/ui/icons.scss'; + + +const opacitySpringConfig = [200, 20]; +const heightSpringConfig = [200, 18]; +const transformSpringConfig = [500, 20]; + +// TODO: сделать более быстрый фейд на горизонтальном скролле + +export default class PanelTransition extends Component { + state = { + height: {} + }; + + componentWillReceiveProps() { + this.setState({ + previousRoute: this.props.location + }); + } + + render() { + var {previousRoute, height} = this.state; + + var {path, Title, Body, Footer, Links} = this.props; + + return ( + + {(items) => { + var keys = Object.keys(items).filter((key) => key !== 'common'); + return ( +
+ + +
+ {keys.map((key) => this.getHeader(key, items[key]))} +
+ + +
+ {keys.map((key) => this.getBody(key, items[key]))} +
+ + +
+ {keys.map((key) => this.getFooter(key, items[key]))} +
+ + +
+ {keys.map((key) => this.getLinks(key, items[key]))} +
+
+ ); + }} + + ); + } + + willEnter = (key, styles) => { + var map = { + '/login': -1, + '/register': -1, + '/password': 1, + '/activation': 1, + '/oauth/permissions': 1 + }; + var sign = map[key]; + + return { + ...styles, + transformSpring: spring(sign * 100, transformSpringConfig), + opacitySpring: spring(1, opacitySpringConfig) + }; + }; + + willLeave = (key, styles) => { + var map = { + '/login': -1, + '/register': -1, + '/password': 1, + '/activation': 1, + '/oauth/permissions': 1 + }; + var sign = map[key]; + + return { + ...styles, + transformSpring: spring(sign * 100, transformSpringConfig), + opacitySpring: spring(0, opacitySpringConfig) + }; + }; + + updateHeight = (height) => { + this.setState({ + height: { + ...this.state.height, + [this.props.path]: height + } + }); + }; + + onGoBack = (event) => { + event.preventDefault(); + + this.props.history.goBack(); + }; + + getHeader(key, props) { + var {hasBackButton, transformSpring, Title} = props; + + var style = { + position: 'absolute', + top: 0, + left: 0, + width: '100%' + }; + + var scrollStyle = { + WebkitTransform: `translateY(${transformSpring}%)`, + transform: `translateY(${transformSpring}%)` + }; + + var sideScrollStyle = { + position: 'relative', + zIndex: 2, + WebkitTransform: `translateX(${-Math.abs(transformSpring)}%)`, + transform: `translateX(${-Math.abs(transformSpring)}%)` + }; + + var backButton = ( + + ); + + return ( +
+ {hasBackButton ? backButton : null} +
+ {Title} +
+
+ ); + } + + getBody(key, props) { + var {transformSpring, opacitySpring, Body} = props; + + var {previousRoute} = this.state; + + var next = this.props.path; + var prev = previousRoute && previousRoute.pathname; + + var not = (path) => prev !== path && next !== path; + + var map = { + '/login': not('/password') ? 'Y' : 'X', + '/password': not('/login') ? 'Y' : 'X', + '/register': not('/activation') ? 'Y' : 'X', + '/activation': not('/register') ? 'Y' : 'X', + '/oauth/permissions': 'Y' + }; + + var direction = map[key]; + + if (direction === 'Y') { + transformSpring = Math.abs(transformSpring); + if (prev === key) { + transformSpring *= -1; + } + } + + var style = { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + WebkitTransform: `translate${direction}(${transformSpring}%)`, + transform: `translate${direction}(${transformSpring}%)`, + opacity: opacitySpring + }; + + return ( + + {Body} + + ); + } + + getFooter(key, props) { + var {opacitySpring, Footer} = props; + + var style = { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + opacity: opacitySpring + }; + + return ( +
+ {Footer} +
+ ); + } + + getLinks(key, props) { + var {opacitySpring, Links} = props; + + var style = { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + opacity: opacitySpring + }; + + return ( +
+ {Links} +
+ ); + } +} + diff --git a/src/components/auth/Password.jsx b/src/components/auth/Password.jsx index 94fd6f6..64a10ab 100644 --- a/src/components/auth/Password.jsx +++ b/src/components/auth/Password.jsx @@ -12,7 +12,62 @@ import styles from './password.scss'; import {helpLinks as helpLinksStyles} from './helpLinks.scss'; import messages from './Password.messages'; -export default class Password extends Component { +export default function Password() { + var Title = () => ( // TODO: separate component for PageTitle + + {(msg) => {msg}} + + ); + Title.goBack = '/login'; + + return { + Title, + Body: () => ( +
+ + +
+ + + + ) + }} /> + +
+
+ {/**/} + +
+
+ {/* На деле тут может быть и ник, в зависимости от того, что введут в 1 вьюху */} + erickskrauch@yandex.ru +
+
+ + + } /> +
+ ), + Footer: (props) => ( + + ), + Links: () => ( + + + + ) + }; +} + +export class _Password extends Component { displayName = 'Password'; render() { diff --git a/src/components/auth/Permissions.jsx b/src/components/auth/Permissions.jsx index 8bbf6ea..b1559dc 100644 --- a/src/components/auth/Permissions.jsx +++ b/src/components/auth/Permissions.jsx @@ -11,7 +11,56 @@ import styles from './permissions.scss'; import {helpLinks as helpLinksStyles} from './helpLinks.scss'; import messages from './Permissions.messages'; -export default class Permissions extends Component { +export default function Permissions() { + return { + Title: () => ( // TODO: separate component for PageTitle + + {(msg) => {msg}} + + ), + Body: () => ( +
+ +
+
+ {/**/} + +
+
+ +
+
+ erickskrauch@yandex.ru +
+
+ +
+
+ +
+
    +
  • Authorization for Minecraft servers
    • +
  • Manage your skins directory and additional rows for multiline
    • +
  • Change the active skin
    • +
  • View your E-mail address
    • +
+
+
+ ), + Footer: () => ( + + ), + Links: () => ( + + + + ) + }; +} + +export class _Permissions extends Component { displayName = 'Permissions'; render() { diff --git a/src/components/auth/Register.jsx b/src/components/auth/Register.jsx index 7975791..fb4fa0c 100644 --- a/src/components/auth/Register.jsx +++ b/src/components/auth/Register.jsx @@ -11,7 +11,49 @@ import {helpLinks as helpLinksStyles} from './helpLinks.scss'; import messages from './Register.messages'; import activationMessages from './Activation.messages'; -export default class Register extends Component { +export default function Register() { + return { + Title: () => ( // TODO: separate component for PageTitle + + {(msg) => {msg}} + + ), + Body: () => ( +
+ + + + + + + + + ) + }} /> + } /> +
+ ), + Footer: (props) => ( + + ), + Links: () => ( + + + + ) + }; +} + +export class _Register extends Component { displayName = 'Register'; render() { diff --git a/src/components/ui/panel.scss b/src/components/ui/panel.scss index 898f726..66faa51 100644 --- a/src/components/ui/panel.scss +++ b/src/components/ui/panel.scss @@ -65,6 +65,10 @@ $bodyTopBottomPadding: 15px; > * { flex-grow: 1; } + + button { // TODO: добавленно временно, пока не устаканится лейаут панелек + width: 100%; + } } .bodyHeader { diff --git a/src/components/userbar/Userbar.jsx b/src/components/userbar/Userbar.jsx index 1c15e65..8f17617 100644 --- a/src/components/userbar/Userbar.jsx +++ b/src/components/userbar/Userbar.jsx @@ -15,6 +15,9 @@ export default class Userbar extends Component { + + Test oAuth +
); } diff --git a/src/pages/auth/AuthPage.jsx b/src/pages/auth/AuthPage.jsx index 82aaa0d..657c07f 100644 --- a/src/pages/auth/AuthPage.jsx +++ b/src/pages/auth/AuthPage.jsx @@ -1,14 +1,11 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { TransitionMotion, spring } from 'react-motion'; - import AppInfo from 'components/auth/AppInfo'; +import PanelTransition from 'components/auth/PanelTransition'; import styles from './auth.scss'; -const springConfig = [200, 20]; - class AuthPage extends Component { displayName = 'AuthPage'; @@ -18,320 +15,17 @@ class AuthPage extends Component { description: `Лучший альтернативный лаунчер для Minecraft с большим количеством версий и их модификаций, а также возмоностью входа как с лицензионным аккаунтом, так и без него.` }; - var { path, children } = this.props; - return (
- - {(items) => ( -
- {Object.keys(items).map((path) => { - const {children, x} = items[path]; - - const style = { - position: 'absolute', - top: 0, - left: 0, - width: '100%', - transform: `translateX(${x}%)` - }; - - return ( -
- {children} -
- ); - })} -
- )} - - +
); } - - willEnter(key, styles) { - return { - ...styles, - x: spring(100, springConfig) - }; - } - - willLeave(key, styles) { - return { - ...styles, - x: spring(-100, springConfig) - }; - } -} - - -import { FormattedMessage as Message } from 'react-intl'; -import Helmet from 'react-helmet'; -import ReactHeight from 'react-height'; - -import panelStyles from 'components/ui/panel.scss'; -import buttons from 'components/ui/buttons.scss'; -import icons from 'components/ui/icons.scss'; -import { Panel, PanelBody, PanelFooter, PanelHeader } from 'components/ui/Panel'; -import { Input, Checkbox } from 'components/ui/Form'; - -import messages from 'components/auth/Login.messages'; -import regMessages from 'components/auth/Register.messages'; -import {helpLinks as helpLinksStyles} from 'components/auth/helpLinks.scss'; -import passwordMessages from 'components/auth/Password.messages'; - -const opacitySpringConfig = [200, 20]; -const heightSpringConfig = [200, 18]; -const transformSpringConfig = [500, 20]; - -// TODO: сделать более быстрый фейд на горизонтальном скролле - -class TheDemo extends Component { - state = { - isFirstPage: true, - height: {} - }; - - render() { - var {isFirstPage} = this.state; - - var path = `page${isFirstPage ? '1' : '2'}`; - - return ( - - {(items) => { - var keys = Object.keys(items).filter((key) => key !== 'common'); - return ( -
- - -
- {keys.map((key) => this.getHeader(key, items[key]))} -
- - -
- {keys.map((key) => this.getBody(key, items[key]))} -
- - -
- {keys.map((key) => this.getFooter(key, items[key]))} -
- - -
- {keys.map((key) => this.getLinks(key, items[key]))} -
-
- ); - }} - - ); - } - - willEnter = (key, styles) => { - var sign = this.state.isFirstPage ? -1 : 1; - - return { - ...styles, - transformSpring: spring(sign * 100, transformSpringConfig), - opacitySpring: spring(1, opacitySpringConfig) - }; - }; - - willLeave = (key, styles) => { - var sign = this.state.isFirstPage ? -1 : 1; - - return { - ...styles, - transformSpring: spring(sign * -100, transformSpringConfig), - opacitySpring: spring(0, opacitySpringConfig) - }; - }; - - getBody(key, props) { - var {isFirstPage, transformSpring, opacitySpring} = props; - - var style = { - position: 'absolute', - top: 0, - left: 0, - width: '100%', - WebkitTransform: `translateX(${transformSpring}%)`, - transform: `translateX(${transformSpring}%)`, - opacity: opacitySpring - }; - - return (isFirstPage ? ( - - - - ) : ( - - - - - - - - - - ) - }} /> - } /> - - )); - } - - updateHeight = (height) => { - this.setState({ - height: { - ...this.state.height, - [`page${this.state.isFirstPage ? '1' : '2'}`]: height - } - }); - }; - - getFooter(key, props) { - var {isFirstPage, opacitySpring} = props; - - var style = { - position: 'absolute', - top: 0, - left: 0, - width: '100%', - opacity: opacitySpring - }; - - return (isFirstPage ? ( - - ) : ( - - )); - } - - getHeader(key, props) { - var {isFirstPage, transformSpring} = props; - - var style = { - position: 'absolute', - top: 0, - left: 0, - width: '100%' - }; - - var scrollStyle = { - WebkitTransform: `translateY(${transformSpring}%)`, - transform: `translateY(${transformSpring}%)` - }; - - var sideScrollStyle = { - position: 'relative', - zIndex: 2, - WebkitTransform: `translateX(${-Math.abs(transformSpring)}%)`, - transform: `translateX(${-Math.abs(transformSpring)}%)` - }; - - return (isFirstPage ? ( -
- - {(msg) =>
{msg}
} - -
- ) : ( -
- - - {(msg) =>
{msg}
} - -
- )); - } - - getLinks(key, props) { - var {isFirstPage, opacitySpring} = props; - - var style = { - position: 'absolute', - top: 0, - left: 0, - width: '100%', - opacity: opacitySpring - }; - - return (isFirstPage ? ( -
- - - -
- ) : ( -
- - {'test 123'} - -
- )); - } - - onSwitchViews = (event) => { - event.preventDefault(); - - this.setState({ - isFirstPage: !this.state.isFirstPage - }); - }; } export default connect((state) => ({ diff --git a/src/routes.js b/src/routes.js index 4a1d106..02e6b1c 100644 --- a/src/routes.js +++ b/src/routes.js @@ -27,11 +27,11 @@ export default ( - - - - - + + + + +