Очень грубо перенес текущие вьюхи на анимацию согласно прототипу

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
+        <Message {...messages.accountActivationTitle}>
+            {(msg) => <span>{msg}<Helmet title={msg} /></span>}
+        </Message>
+    );
+    Title.goBack = '/register';
+
+    return {
+        Title,
+        Body: () => (
+            <div>
+                <div className={styles.description}>
+                    <div className={styles.descriptionImage} />
+
+                    <div className={styles.descriptionText}>
+                        <Message {...messages.activationMailWasSent} values={{
+                            email: (<b>erickskrauch@yandex.ru</b>)
+                        }} />
+                    </div>
+                </div>
+                <div className={styles.formRow}>
+                    <Input color="blue" className={styles.activationCodeInput} placeholder={messages.enterTheCode} />
+                </div>
+            </div>
+        ),
+        Footer: (props) => (
+            <button className={buttons.blue} onClick={(event) => {
+                event.preventDefault();
+
+                props.history.push('/oauth/permissions');
+            }}>
+                <Message {...messages.confirmEmail} />
+            </button>
+        ),
+        Links: () => (
+            <a href="#">
+                <Message {...messages.didNotReceivedEmail} />
+            </a>
+        )
+    };
+}
+
+
+export class _Activation extends Component {
     displayName = 'Activation';
 
     render() {

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?'
     }
 });

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
+            <Message {...messages.loginTitle}>
+                {(msg) => <span>{msg}<Helmet title={msg} /></span>}
+            </Message>
+        ),
+        Body: () => <Input icon="envelope" type="email" placeholder={messages.emailOrUsername} />,
+        Footer: (props) => (
+            <button className={buttons.green} onClick={(event) => {
+                event.preventDefault();
+
+                props.history.push('/password');
+            }}>
+                <Message {...messages.next} />
+            </button>
+        ),
+        Links: () => (
+            <a href="#">
+                <Message {...passwordMessages.forgotPassword} />
+            </a>
+        )
+    };
+}
+
+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);

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 (
+            <TransitionMotion
+                styles={{
+                    [path]: {
+                        Title,
+                        Body,
+                        Footer,
+                        Links,
+                        hasBackButton: previousRoute && previousRoute.pathname === Title.type.goBack,
+                        transformSpring: spring(0),
+                        opacitySpring: spring(1)
+                    },
+                    common: {
+                        heightSpring: spring(height[path] || 0, heightSpringConfig)
+                    }
+                }}
+                willEnter={this.willEnter}
+                willLeave={this.willLeave}
+            >
+                {(items) => {
+                    var keys = Object.keys(items).filter((key) => key !== 'common');
+                    return (
+                        <div>
+                            <Panel>
+                                <PanelHeader>
+                                    <div style={{
+                                        position: 'relative',
+                                        height: '59px',
+                                        overflow: 'hidden'
+                                    }}>
+                                        {keys.map((key) => this.getHeader(key, items[key]))}
+                                    </div>
+                                </PanelHeader>
+                                <PanelBody style={{
+                                    overflow: 'hidden'
+                                }}>
+                                    <div style={{
+                                        position: 'relative',
+                                        height: previousRoute ? `${items.common.heightSpring}px` : `${height[path]}px`
+                                    }}>
+                                        {keys.map((key) => this.getBody(key, items[key]))}
+                                    </div>
+                                </PanelBody>
+                                <PanelFooter>
+                                    <div style={{
+                                        position: 'relative',
+                                        height: '50px',
+                                        overflow: 'hidden'
+                                    }}>
+                                        {keys.map((key) => this.getFooter(key, items[key]))}
+                                    </div>
+                                </PanelFooter>
+                            </Panel>
+                            <div className={helpLinksStyles} style={{position: 'relative', height: '20px'}}>
+                                {keys.map((key) => this.getLinks(key, items[key]))}
+                            </div>
+                        </div>
+                    );
+                }}
+            </TransitionMotion>
+        );
+    }
+
+    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 = (
+            <button style={sideScrollStyle} onClick={this.onGoBack} className={panelStyles.headerControl}>
+                <span className={icons.arrowLeft} />
+            </button>
+        );
+
+        return (
+            <div key={`header${key}`} style={style}>
+                {hasBackButton ? backButton : null}
+                <div style={scrollStyle}>
+                    {Title}
+                </div>
+            </div>
+        );
+    }
+
+    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 (
+            <ReactHeight key={`body${key}`} style={style} onHeightReady={this.updateHeight}>
+                {Body}
+            </ReactHeight>
+        );
+    }
+
+    getFooter(key, props) {
+        var {opacitySpring, Footer} = props;
+
+        var style = {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            opacity: opacitySpring
+        };
+
+        return (
+            <div key={`footer${key}`} style={style}>
+                {Footer}
+            </div>
+        );
+    }
+
+    getLinks(key, props) {
+        var {opacitySpring, Links} = props;
+
+        var style = {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            opacity: opacitySpring
+        };
+
+        return (
+            <div key={`links${key}`} style={style}>
+                {Links}
+            </div>
+        );
+    }
+}
+

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
+        <Message {...messages.passwordTitle}>
+            {(msg) => <span>{msg}<Helmet title={msg} /></span>}
+        </Message>
+    );
+    Title.goBack = '/login';
+
+    return {
+        Title,
+        Body: () => (
+            <div>
+                <PanelBodyHeader type="error">
+                    <Message {...messages.invalidPassword} />
+                    <br/>
+                    <Message {...messages.suggestResetPassword} values={{
+                        link: (
+                            <a href="#">
+                                <Message {...messages.forgotYourPassword} />
+                            </a>
+                        )
+                    }} />
+                </PanelBodyHeader>
+                <div className={styles.miniProfile}>
+                    <div className={styles.avatar}>
+                        {/*<img src="//lorempixel.com/g/90/90" />*/}
+                        <span className={icons.user} />
+                    </div>
+                    <div className={styles.email}>
+                        {/* На деле тут может быть и ник, в зависимости от того, что введут в 1 вьюху */}
+                        erickskrauch@yandex.ru
+                    </div>
+                </div>
+                <Input icon="key" type="password" placeholder={messages.accountPassword} />
+
+                <Checkbox label={<Message {...messages.rememberMe} />} />
+            </div>
+        ),
+        Footer: (props) => (
+            <button className={buttons.green} onClick={(event) => {
+                event.preventDefault();
+
+                props.history.push('/oauth/permissions');
+            }}>
+                <Message {...messages.signInButton} />
+            </button>
+        ),
+        Links: () => (
+            <a href="#">
+                <Message {...messages.forgotPassword} />
+            </a>
+        )
+    };
+}
+
+export class _Password extends Component {
     displayName = 'Password';
 
     render() {

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
+            <Message {...messages.permissionsTitle}>
+                {(msg) => <span>{msg}<Helmet title={msg} /></span>}
+            </Message>
+        ),
+        Body: () => (
+            <div>
+                <PanelBodyHeader>
+                    <div className={styles.authInfo}>
+                        <div className={styles.authInfoAvatar}>
+                            {/*<img src="//lorempixel.com/g/90/90" />*/}
+                            <span className={icons.user} />
+                        </div>
+                        <div className={styles.authInfoTitle}>
+                            <Message {...messages.youAuthorizedAs} />
+                        </div>
+                        <div className={styles.authInfoEmail}>
+                            erickskrauch@yandex.ru
+                        </div>
+                    </div>
+                </PanelBodyHeader>
+                <div className={styles.permissionsContainer}>
+                    <div className={styles.permissionsTitle}>
+                        <Message {...messages.theAppNeedsAccess} />
+                    </div>
+                    <ul className={styles.permissionsList}>
+                        <li>Authorization for Minecraft servers</li>
+                        <li>Manage your skins directory and additional rows for multiline</li>
+                        <li>Change the active skin</li>
+                        <li>View your E-mail address</li>
+                    </ul>
+                </div>
+            </div>
+        ),
+        Footer: () => (
+            <button className={buttons.green}>
+                <Message {...messages.approve} />
+            </button>
+        ),
+        Links: () => (
+            <a href="#">
+                <Message {...messages.decline} />
+            </a>
+        )
+    };
+}
+
+export class _Permissions extends Component {
     displayName = 'Permissions';
 
     render() {

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
+            <Message {...messages.registerTitle}>
+                {(msg) => <span>{msg}<Helmet title={msg} /></span>}
+            </Message>
+        ),
+        Body: () => (
+            <div>
+                <Input icon="user" color="blue" type="text" placeholder={messages.yourNickname} />
+                <Input icon="envelope" color="blue" type="email" placeholder={messages.yourEmail} />
+                <Input icon="key" color="blue" type="password" placeholder={messages.accountPassword} />
+                <Input icon="key" color="blue" type="password" placeholder={messages.repeatPassword} />
+
+                <Checkbox color="blue" label={
+                    <Message {...messages.acceptRules} values={{
+                        link: (
+                            <a href="#">
+                                <Message {...messages.termsOfService} />
+                            </a>
+                        )
+                    }} />
+                } />
+            </div>
+        ),
+        Footer: (props) => (
+            <button className={buttons.blue} onClick={(event) => {
+                event.preventDefault();
+
+                props.history.push('/activation');
+            }}>
+                <Message {...messages.signUpButton} />
+            </button>
+        ),
+        Links: () => (
+            <a href="#">
+                <Message {...activationMessages.didNotReceivedEmail} />
+            </a>
+        )
+    };
+}
+
+export class _Register extends Component {
     displayName = 'Register';
 
     render() {

src/components/ui/panel.scss

@@ -65,6 +65,10 @@ $bodyTopBottomPadding: 15px;
     > * {
         flex-grow: 1;
     }
+
+    button { // TODO: добавленно временно, пока не устаканится лейаут панелек
+        width: 100%;
+    }
 }
 
 .bodyHeader {

src/components/userbar/Userbar.jsx

@@ -15,6 +15,9 @@ export default class Userbar extends Component {
                 <Link to="/register" className={buttons.blue}>
                     <Message {...messages.register} />
                 </Link>
+                <Link to="/oauth/permissions" className={buttons.blue}>
+                    Test oAuth
+                </Link>
             </div>
         );
     }