8 files changed, 330 insertions, 0 deletions

diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
new file mode 100644
index 000000000..004054fdd
--- /dev/null
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import AuthLayout from '../../components/auth/AuthLayout';
+import AppStore from '../../stores/AppStore';
+import GlobalErrorStore from '../../stores/GlobalErrorStore';
+
+import { oneOrManyChildElements } from '../../prop-types';
+
+@inject('stores', 'actions') @observer
+export default class AuthLayoutContainer extends Component {
+  static propTypes = {
+    children: oneOrManyChildElements.isRequired,
+    location: PropTypes.shape({
+      pathname: PropTypes.string.isRequired,
+    }).isRequired,
+  };
+
+  render() {
+    const { stores, actions, children, location } = this.props;
+    return (
+      <AuthLayout
+        error={stores.globalError.response}
+        pathname={location.pathname}
+        isOnline={stores.app.isOnline}
+        isAPIHealthy={!stores.app.healthCheckRequest.isError}
+        retryHealthCheck={actions.app.healthCheck}
+        isHealthCheckLoading={stores.app.healthCheckRequest.isExecuting}
+      >
+        {children}
+      </AuthLayout>
+    );
+  }
+}
+
+AuthLayoutContainer.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    app: PropTypes.instanceOf(AppStore).isRequired,
+    globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    app: PropTypes.shape({
+      healthCheck: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/ImportScreen.js b/src/containers/auth/ImportScreen.js
new file mode 100644
index 000000000..ddd56ffb6
--- /dev/null
+++ b/src/containers/auth/ImportScreen.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import Import from '../../components/auth/Import';
+import UserStore from '../../stores/UserStore';
+import { gaPage } from '../../lib/analytics';
+
+@inject('stores', 'actions') @observer
+export default class ImportScreen extends Component {
+  componentDidMount() {
+    gaPage('Auth/Import');
+  }
+
+  render() {
+    const { actions, stores } = this.props;
+
+    if (stores.user.isImportLegacyServicesCompleted) {
+      stores.router.push(stores.user.inviteRoute);
+    }
+
+    return (
+      <Import
+        services={stores.user.legacyServices}
+        onSubmit={actions.user.importLegacyServices}
+        isSubmitting={stores.user.isImportLegacyServicesExecuting}
+        inviteRoute={stores.user.inviteRoute}
+      />
+    );
+  }
+}
+
+ImportScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      importLegacyServices: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
new file mode 100644
index 000000000..51971f436
--- /dev/null
+++ b/src/containers/auth/InviteScreen.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import Invite from '../../components/auth/Invite';
+import { gaPage } from '../../lib/analytics';
+
+@inject('stores', 'actions') @observer
+export default class InviteScreen extends Component {
+  componentDidMount() {
+    gaPage('Auth/Invite');
+  }
+
+  render() {
+    const { actions } = this.props;
+    return (
+      <Invite
+        onSubmit={actions.user.invite}
+      />
+    );
+  }
+}
+
+InviteScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      invite: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/LoginScreen.js b/src/containers/auth/LoginScreen.js
new file mode 100644
index 000000000..9e22c5141
--- /dev/null
+++ b/src/containers/auth/LoginScreen.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import Login from '../../components/auth/Login';
+import UserStore from '../../stores/UserStore';
+import { gaPage } from '../../lib/analytics';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+@inject('stores', 'actions') @observer
+export default class LoginScreen extends Component {
+  static propTypes = {
+    error: globalErrorPropType.isRequired,
+  };
+
+  componentDidMount() {
+    gaPage('Auth/Login');
+  }
+
+  render() {
+    const { actions, stores, error } = this.props;
+    return (
+      <Login
+        onSubmit={actions.user.login}
+        isSubmitting={stores.user.loginRequest.isExecuting}
+        isTokenExpired={stores.user.isTokenExpired}
+        isServerLogout={stores.user.logoutReason === stores.user.logoutReasonTypes.SERVER}
+        signupRoute={stores.user.signupRoute}
+        passwordRoute={stores.user.passwordRoute}
+        error={error}
+      />
+    );
+  }
+}
+
+LoginScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      login: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/PasswordScreen.js b/src/containers/auth/PasswordScreen.js
new file mode 100644
index 000000000..d88cb08e6
--- /dev/null
+++ b/src/containers/auth/PasswordScreen.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import Password from '../../components/auth/Password';
+import UserStore from '../../stores/UserStore';
+import { gaPage } from '../../lib/analytics';
+
+@inject('stores', 'actions') @observer
+export default class PasswordScreen extends Component {
+  componentDidMount() {
+    gaPage('Auth/Password Retrieve');
+  }
+
+  render() {
+    const { actions, stores } = this.props;
+
+    return (
+      <Password
+        onSubmit={actions.user.retrievePassword}
+        isSubmitting={stores.user.passwordRequest.isExecuting}
+        signupRoute={stores.user.signupRoute}
+        loginRoute={stores.user.loginRoute}
+        status={stores.user.actionStatus}
+      />
+    );
+  }
+}
+
+PasswordScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      retrievePassword: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
new file mode 100644
index 000000000..7e1586535
--- /dev/null
+++ b/src/containers/auth/PricingScreen.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { RouterStore } from 'mobx-react-router';
+
+import Pricing from '../../components/auth/Pricing';
+import UserStore from '../../stores/UserStore';
+import PaymentStore from '../../stores/PaymentStore';
+import { gaPage } from '../../lib/analytics';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+@inject('stores', 'actions') @observer
+export default class PricingScreen extends Component {
+  static propTypes = {
+    error: globalErrorPropType.isRequired,
+  };
+
+  componentDidMount() {
+    gaPage('Auth/Pricing');
+  }
+
+  render() {
+    const { actions, stores, error } = this.props;
+
+    const nextStepRoute = stores.user.legacyServices.length ? stores.user.importRoute : stores.user.inviteRoute;
+
+    return (
+      <Pricing
+        donor={stores.user.data.donor || {}}
+        onSubmit={actions.user.signup}
+        onCloseSubscriptionWindow={() => this.props.stores.router.push(nextStepRoute)}
+        isLoading={stores.payment.plansRequest.isExecuting}
+        isLoadingUser={stores.user.getUserInfoRequest.isExecuting}
+        error={error}
+        skipAction={() => this.props.stores.router.push(nextStepRoute)}
+      />
+    );
+  }
+}
+
+PricingScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      signup: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+    payment: PropTypes.instanceOf(PaymentStore).isRequired,
+    router: PropTypes.instanceOf(RouterStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
new file mode 100644
index 000000000..3b86ab138
--- /dev/null
+++ b/src/containers/auth/SignupScreen.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import Signup from '../../components/auth/Signup';
+import UserStore from '../../stores/UserStore';
+import { gaPage } from '../../lib/analytics';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+@inject('stores', 'actions') @observer
+export default class SignupScreen extends Component {
+  static propTypes = {
+    error: globalErrorPropType.isRequired,
+  };
+
+  componentDidMount() {
+    gaPage('Auth/Signup');
+  }
+
+  render() {
+    const { actions, stores, error } = this.props;
+    return (
+      <Signup
+        onSubmit={actions.user.signup}
+        isSubmitting={stores.user.signupRequest.isExecuting}
+        loginRoute={stores.user.loginRoute}
+        error={error}
+      />
+    );
+  }
+}
+
+SignupScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      signup: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/WelcomeScreen.js b/src/containers/auth/WelcomeScreen.js
new file mode 100644
index 000000000..e413264a6
--- /dev/null
+++ b/src/containers/auth/WelcomeScreen.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import Welcome from '../../components/auth/Welcome';
+import UserStore from '../../stores/UserStore';
+import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
+import { gaPage } from '../../lib/analytics';
+
+@inject('stores', 'actions') @observer
+export default class LoginScreen extends Component {
+  componentDidMount() {
+    gaPage('Auth/Welcome');
+  }
+
+  render() {
+    const { user, recipePreviews } = this.props.stores;
+
+    return (
+      <Welcome
+        loginRoute={user.loginRoute}
+        signupRoute={user.signupRoute}
+        recipes={recipePreviews.featured}
+      />
+    );
+  }
+}
+
+LoginScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+    recipePreviews: PropTypes.instanceOf(RecipePreviewsStore).isRequired,
+  }).isRequired,
+};