[Ivan Diaz] - Add widget Animation

src/app/main/main-home/main-home-page-login-widget.js

@@ -11,27 +11,80 @@ import Input              from 'core-components/input';
 import Button             from 'core-components/button';
 
 var MainHomePageLoginWidget = React.createClass({
+
+    getInitialState() {
+        return {
+            showed: 'login'
+        };
+    },
+
+    getDefaultAnimation() {
+        return {
+            rotateY: -90
+        };
+    },
+
     render() {
         return (
-            <Motion defaultStyle={{animation: -90}} style={{animation: spring(0, [200,10])}}>
-                {({animation}) => (
-                    <Widget className="main-home-page--widget" title="Login" style={{transform: `rotateY(${animation}deg)`}}>
-                        <Form className="login-widget--form" onSubmit={this.handleSubmit}>
-                            <div className="login-widget--inputs">
-                                <Input placeholder="email" name="email" className="login-widget--input"/>
-                                <Input placeholder="password" name="password" type="password" className="login-widget--input"/>
-                            </div>
-                            <Button type="primary">LOG IN</Button>
-                        </Form>
-                        <Button className="login-widget--forgot-password" type="link">{'Forgot your password?'}</Button>
-                    </Widget>
-                )}
+            <Motion defaultStyle={this.getDefaultAnimation()} style={{ rotateY: (this.state.showed == 'login') ? spring(0, [100, 20]) : spring(180, [100, 20])}}>
+                {(animation) => {
+                    return (
+                        <div className="main-home-page--widget-container">
+                            {this.renderLogin(animation)}
+                            {this.renderPasswordRecovery(animation)}
+                        </div>
+                    )
+                }}
             </Motion>
         );
     },
 
-    handleSubmit(formState) {
+    renderLogin(variants) {
+        var loginStyle = {
+            transform: `rotateY(${(variants.rotateY) ? variants.rotateY: 0}deg)`
+        };
+
+        return (
+            <Widget className="main-home-page--widget" title="Login" style={loginStyle}>
+                <Form className="login-widget--form" onSubmit={this.handleLoginFormSubmit}>
+                    <div className="login-widget--inputs">
+                        <Input placeholder="email" name="email" className="login-widget--input"/>
+                        <Input placeholder="password" name="password" type="password" className="login-widget--input"/>
+                    </div>
+                    <Button type="primary">LOG IN</Button>
+                </Form>
+                <Button className="login-widget--forgot-password" type="link" onClick={this.handleForgetPasswordClick}>
+                    {'Forgot your password?'}
+                </Button>
+            </Widget>
+        );
+    },
+
+    renderPasswordRecovery(variants) {
+        var passwordRecoveryStyle = {
+            transform: `rotateY(${-180+variants.rotateY}deg)`
+        };
+
+        return (
+            <Widget className="main-home-page--widget main-home-page--password-widget" title="Password Recovery" style={passwordRecoveryStyle}>
+                <Form className="login-widget--form" onSubmit={this.handleSubmit}>
+                    <div className="login-widget--inputs">
+                        <Input placeholder="email" name="email" className="login-widget--input"/>
+                    </div>
+                    <Button type="primary">Recover my password</Button>
+                </Form>
+            </Widget>
+        );
+    },
+
+    handleLoginFormSubmit(formState) {
         UserActions.login(formState.email, formState.password);
+    },
+
+    handleForgetPasswordClick() {
+        this.setState({
+            showed: 'password'
+        });
     }
 });
 

src/app/main/main-home/main-home-page.scss

@@ -1,8 +1,21 @@
 .main-home-page {
 
-  &--widget {
+  &--widget-container {
+    position: relative;
     display: inline-block;
     margin: 35px auto 0;
     height: 327px;
+    width: 324px;
+  }
+
+  &--widget {
+    display: inline-block;
+    backface-visibility: hidden;
+    position: absolute;
+    left: 0;
+  }
+
+  &--password-widget {
+//    backface-visibility: visible;
   }
 }

src/core-components/widget.scss

@@ -6,6 +6,8 @@
   text-align: center;
   padding: 20px;
   width: 324px;
+  min-height: 327px;
+
 
   &--title {
     text-transform: uppercase;