Login/Logout Restyling & Code Cleanup (#338)

frontend/components/AuthenticationFormWrapper/AuthenticationFormWrapper.jsx

@@ -10,12 +10,11 @@ class AuthenticationFormWrapper extends Component {
 
   render () {
     const { children } = this.props;
-    const { containerStyles, whiteTabStyles } = componentStyles;
+    const { containerStyles } = componentStyles;
 
     return (
       <div style={containerStyles}>
         <img alt="Kolide text logo" src="/assets/images/kolide-logo-text.svg" />
-        <div style={whiteTabStyles} />
         {children}
       </div>
     );

frontend/components/AuthenticationFormWrapper/styles.js

@@ -1,22 +1,6 @@
-import styles from '../../styles';
-
-const { color } = styles;
-
 export default {
   containerStyles: {
-    alignItems: 'center',
     display: 'flex',
-    justifyContent: 'center',
     flexDirection: 'column',
-    marginTop: '14vh',
-  },
-  whiteTabStyles: {
-    backgroundColor: color.white,
-    height: '30px',
-    marginTop: '12px',
-    borderTopLeftRadius: '4px',
-    borderTopRightRadius: '4px',
-    boxShadow: '0 5px 30px 0 rgba(0,0,0,0.3)',
-    width: '376px',
   },
 };

frontend/components/LoginRoutes/LoginRoutes.jsx

@@ -28,12 +28,11 @@ export class LoginRoutes extends Component {
   }
 
   render () {
-    const { containerStyles, logoStyles } = componentStyles;
+    const { containerStyles } = componentStyles;
     const { children, location: { pathname } } = this.props;
 
     return (
       <div style={containerStyles}>
-        <img style={logoStyles} alt="Kolide text logo" src="/assets/images/kolide-logo-text.svg" />
         <LoginPage pathname={pathname} />
         <RouteTransition
           pathname={pathname}

frontend/components/LoginRoutes/styles.js

@@ -3,10 +3,8 @@ export default {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
-    marginTop: '14vh',
     position: 'relative',
-  },
-  logoStyles: {
-    marginBottom: '40px',
+    height: 'calc(100vh - 94px)',
+    justifyContent: 'center',
   },
 };

frontend/components/forms/LoginForm/LoginForm.jsx

@@ -20,6 +20,7 @@ class LoginForm extends Component {
     }),
     onChange: PropTypes.func,
     onSubmit: PropTypes.func,
+    isHidden: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -145,13 +146,16 @@ class LoginForm extends Component {
       forgotPasswordStyles,
       forgotPasswordWrapperStyles,
       formStyles,
+      hideForm,
     } = componentStyles;
     const { serverErrors } = this.props;
     const { errors } = this.state;
     const { onInputChange, onFormSubmit } = this;
 
+    const byeFelicia = this.props.isHidden ? hideForm : {};
+
     return (
-      <form onSubmit={onFormSubmit} style={formStyles}>
+      <form onSubmit={onFormSubmit} style={[formStyles, byeFelicia]}>
         <div style={containerStyles}>
           <img alt="Avatar" src={avatar} />
           <InputFieldWithIcon

frontend/components/forms/LoginForm/styles.js

@@ -30,5 +30,15 @@ export default {
   },
   formStyles: {
     boxShadow: '0 5px 30px 0 rgba(0,0,0,0.30)',
+    marginTop: '-260px',
+    opacity: 1,
+    transform: 'scale(1.0)',
+    width: '460px',
+    alignSelf: 'center',
+  },
+  hideForm: {
+    opacity: 0,
+    transform: 'scale(1.3)',
+    transition: 'all 300ms ease-in',
   },
 };

frontend/components/forms/LogoutForm/styles.js

@@ -24,6 +24,8 @@ export default {
   },
   formStyles: {
     boxShadow: '0 5px 30px 0 rgba(0,0,0,0.30)',
+    width: '460px',
+    alignSelf: 'center',
   },
   subtextStyles: {
     color: color.textLight,

frontend/pages/LoginPage/LoginPage.jsx

@@ -2,8 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { includes } from 'lodash';
 import { push } from 'react-router-redux';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
+import AuthenticationFormWrapper from '../../components/AuthenticationFormWrapper';
 import { clearAuthErrors, loginUser } from '../../redux/nodes/auth/actions';
 import { clearRedirectLocation } from '../../redux/nodes/redirectLocation/actions';
 import debounce from '../../utilities/debounce';
@@ -85,14 +85,11 @@ export class LoginPage extends Component {
     const { loginVisible } = this.state;
     const { onChange, onSubmit, serverErrors } = this;
 
-    if (!loginVisible) {
-      return false;
-    }
-
     return (
       <LoginForm
         onChange={onChange}
         onSubmit={onSubmit}
+        isHidden={!loginVisible}
         serverErrors={serverErrors()}
       />
     );
@@ -102,16 +99,10 @@ export class LoginPage extends Component {
     const { showLoginForm } = this;
 
     return (
-      <div>
+      <AuthenticationFormWrapper>
         <LoginSuccessfulPage />
-        <ReactCSSTransitionGroup
-          transitionName="login-form-animation"
-          transitionEnterTimeout={500}
-          transitionLeaveTimeout={300}
-        >
-          {showLoginForm()}
-        </ReactCSSTransitionGroup>
-      </div>
+        {showLoginForm()}
+      </AuthenticationFormWrapper>
     );
   }
 }

frontend/pages/LoginPage/styles.scss

@@ -4,7 +4,7 @@
 }
 
 .login-form-animation-leave.login-form-animation-leave-active {
-  opacity: 0.01;
+  opacity: 0;
   transform: scale(1.3);
   transition: all 300ms ease-in;
 }

frontend/pages/LoginSuccessfulPage/styles.js

@@ -18,17 +18,14 @@ export default {
     backgroundColor: color.white,
     boxShadow: '0 5px 30px 0 rgba(0,0,0,0.30)',
     borderRadius: '4px',
-    marginTop: '-28px',
+    marginTop: '20px',
     paddingBottom: padding.base,
     paddingLeft: padding.base,
     paddingRight: padding.base,
     paddingTop: padding.most,
     textAlign: 'center',
     width: '340px',
-    position: 'absolute',
-    left: '50%',
-    marginLeft: '-187px',
     zIndex: '-1',
-
+    alignSelf: 'center',
   },
 };

frontend/pages/LogoutPage/LogoutPage.jsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { noop } from 'lodash';
 
 import AuthenticationFormWrapper from '../../components/AuthenticationFormWrapper';
+import componentStyles from './styles';
 import debounce from '../../utilities/debounce';
 import LogoutForm from '../../components/forms/LogoutForm';
 import { logoutUser } from '../../redux/nodes/auth/actions';
@@ -40,13 +41,17 @@ export class LogoutPage extends Component {
   render () {
     const { user } = this.props;
     const { onSubmit } = this;
+    const { authWrapperStyles, whiteTabStyles } = componentStyles;
 
     if (!user) return false;
 
     return (
-      <AuthenticationFormWrapper>
-        <LogoutForm onSubmit={onSubmit} user={user} />
-      </AuthenticationFormWrapper>
+      <div style={authWrapperStyles}>
+        <AuthenticationFormWrapper>
+          <div style={whiteTabStyles} />
+          <LogoutForm onSubmit={onSubmit} user={user} />
+        </AuthenticationFormWrapper>
+      </div>
     );
   }
 }

frontend/pages/LogoutPage/styles.js

@@ -0,0 +1,24 @@
+import styles from '../../styles';
+
+const { color } = styles;
+
+export default {
+  whiteTabStyles: {
+    backgroundColor: color.white,
+    height: '30px',
+    marginTop: '20px',
+    borderTopLeftRadius: '4px',
+    borderTopRightRadius: '4px',
+    boxShadow: '0 5px 30px 0 rgba(0,0,0,0.3)',
+    width: '376px',
+    alignSelf: 'center',
+  },
+  authWrapperStyles: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    height: 'calc(100vh - 94px)',
+    justifyContent: 'center',
+  },
+};