From 58cda9cc7fb79ca9df6746de7f9662bc08dc156a Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Fri, 13 Oct 2017 12:29:40 +0200
Subject: initial commit

---
 src/components/auth/AuthLayout.js |  88 ++++++++++++++++
 src/components/auth/Import.js     | 168 +++++++++++++++++++++++++++++++
 src/components/auth/Invite.js     | 111 ++++++++++++++++++++
 src/components/auth/Login.js      | 161 +++++++++++++++++++++++++++++
 src/components/auth/Password.js   | 135 +++++++++++++++++++++++++
 src/components/auth/Pricing.js    | 130 ++++++++++++++++++++++++
 src/components/auth/Signup.js     | 206 ++++++++++++++++++++++++++++++++++++++
 src/components/auth/Welcome.js    |  69 +++++++++++++
 8 files changed, 1068 insertions(+)
 create mode 100644 src/components/auth/AuthLayout.js
 create mode 100644 src/components/auth/Import.js
 create mode 100644 src/components/auth/Invite.js
 create mode 100644 src/components/auth/Login.js
 create mode 100644 src/components/auth/Password.js
 create mode 100644 src/components/auth/Pricing.js
 create mode 100644 src/components/auth/Signup.js
 create mode 100644 src/components/auth/Welcome.js

(limited to 'src/components/auth')

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
new file mode 100644
index 000000000..2741b8a15
--- /dev/null
+++ b/src/components/auth/AuthLayout.js
@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { RouteTransition } from 'react-router-transition';
+import { intlShape } from 'react-intl';
+
+import Link from '../ui/Link';
+import InfoBar from '../ui/InfoBar';
+
+import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types';
+import globalMessages from '../../i18n/globalMessages';
+
+@observer
+export default class AuthLayout extends Component {
+  static propTypes = {
+    children: oneOrManyChildElements.isRequired,
+    pathname: PropTypes.string.isRequired,
+    error: globalErrorPropType.isRequired,
+    isOnline: PropTypes.bool.isRequired,
+    isAPIHealthy: PropTypes.bool.isRequired,
+    retryHealthCheck: PropTypes.func.isRequired,
+    isHealthCheckLoading: PropTypes.bool.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      children,
+      pathname,
+      error,
+      isOnline,
+      isAPIHealthy,
+      retryHealthCheck,
+      isHealthCheckLoading,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="auth">
+        {!isOnline && (
+          <InfoBar
+            type="warning"
+          >
+            <span className="mdi mdi-flash" />
+            {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+          </InfoBar>
+        )}
+        {isOnline && !isAPIHealthy && (
+          <InfoBar
+            type="danger"
+            ctaLabel="Try again"
+            ctaLoading={isHealthCheckLoading}
+            sticky
+            onClick={retryHealthCheck}
+          >
+            <span className="mdi mdi-flash" />
+            {intl.formatMessage(globalMessages.APIUnhealthy)}
+          </InfoBar>
+        )}
+        <div className="auth__layout">
+          <RouteTransition
+            pathname={pathname}
+            atEnter={{ opacity: 0 }}
+            atLeave={{ opacity: 0 }}
+            atActive={{ opacity: 1 }}
+            mapStyles={styles => ({
+              transform: `translateX(${styles.translateX}%)`,
+              opacity: styles.opacity,
+            })}
+            component="span"
+          >
+            {/* Inject globalError into children  */}
+            {React.cloneElement(children, {
+              error,
+            })}
+          </RouteTransition>
+        </div>
+        {/* </div> */}
+        <Link to="https://adlk.io" className="auth__adlk" target="_blank">
+          <img src="./assets/images/adlk.svg" alt="" />
+        </Link>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
new file mode 100644
index 000000000..cf83aa9c8
--- /dev/null
+++ b/src/components/auth/Import.js
@@ -0,0 +1,168 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+import classnames from 'classnames';
+
+import Form from '../../lib/Form';
+import Toggle from '../ui/Toggle';
+import Button from '../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'import.headline',
+    defaultMessage: '!!!Import your Franz 4 services',
+  },
+  notSupportedHeadline: {
+    id: 'import.notSupportedHeadline',
+    defaultMessage: '!!!Services not yet supported in Franz 5',
+  },
+  submitButtonLabel: {
+    id: 'import.submit.label',
+    defaultMessage: '!!!Import {count} services',
+  },
+  skipButtonLabel: {
+    id: 'import.skip.label',
+    defaultMessage: '!!!I want add services manually',
+  },
+});
+
+@observer
+export default class Import extends Component {
+  static propTypes = {
+    services: MobxPropTypes.arrayOrObservableArray.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    inviteRoute: PropTypes.string.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  prepareForm() {
+    const { services } = this.props;
+
+    const config = {
+      fields: {
+        import: [...services.filter(s => s.recipe).map(s => ({
+          add: {
+            default: true,
+            options: s,
+          },
+        }))],
+      },
+    };
+
+    return new Form(config, this.context.intl);
+  }
+
+  submit(e) {
+    const { services } = this.props;
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        const servicesImport = form.values().import
+          .map((value, i) => !value.add || services.filter(s => s.recipe)[i])
+          .filter(s => typeof s !== 'boolean');
+
+        this.props.onSubmit({ services: servicesImport });
+      },
+      onError: () => {},
+    });
+  }
+
+  render() {
+    this.form = this.prepareForm();
+    const { intl } = this.context;
+    const { services, isSubmitting, inviteRoute } = this.props;
+
+    const availableServices = services.filter(s => s.recipe);
+    const unavailableServices = services.filter(s => !s.recipe);
+
+    return (
+      <div className="auth__scroll-container">
+        <div className="auth__container auth__container--signup">
+          <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+            <img
+              src="./assets/images/logo.svg"
+              className="auth__logo"
+              alt=""
+            />
+            <h1>
+              {intl.formatMessage(messages.headline)}
+            </h1>
+            <table className="service-table available-services">
+              <tbody>
+                {this.form.$('import').map((service, i) => (
+                  <tr
+                    key={service.id}
+                    className="service-table__row"
+                    onClick={() => service.$('add').set(!service.$('add').value)}
+                  >
+                    <td className="service-table__toggle">
+                      <Toggle
+                        field={service.$('add')}
+                        showLabel={false}
+                      />
+                    </td>
+                    <td className="service-table__column-icon">
+                      <img
+                        src={availableServices[i].custom_icon || availableServices[i].recipe.icons.svg}
+                        className={classnames({
+                          'service-table__icon': true,
+                          'has-custom-icon': availableServices[i].custom_icon,
+                        })}
+                        alt=""
+                      />
+                    </td>
+                    <td className="service-table__column-name">
+                      {availableServices[i].name !== ''
+                        ? availableServices[i].name
+                        : availableServices[i].recipe.name}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            {unavailableServices.length > 0 && (
+              <div className="unavailable-services">
+                <strong>{intl.formatMessage(messages.notSupportedHeadline)}</strong>
+                <p>
+                  {services.filter(s => !s.recipe).map((service, i) => (
+                    <span key={service.id}>
+                      {service.name !== '' ? service.name : service.service}
+                      {unavailableServices.length > i + 1 ? ', ' : ''}
+                    </span>
+                  ))}
+                </p>
+              </div>
+            )}
+
+            {isSubmitting ? (
+              <Button
+                className="auth__button is-loading"
+                label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
+                loaded={false}
+                disabled
+              />
+            ) : (
+              <Button
+                type="submit"
+                className="auth__button"
+                label={intl.formatMessage(messages.submitButtonLabel)}
+              />
+            )}
+            <Link
+              to={inviteRoute}
+              className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
+            >
+              {intl.formatMessage(messages.skipButtonLabel)}
+            </Link>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
new file mode 100644
index 000000000..c1d815dcd
--- /dev/null
+++ b/src/components/auth/Invite.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+
+import Form from '../../lib/Form';
+import { email } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'invite.headline.friends',
+    defaultMessage: '!!!Invite 3 of your friends or colleagues',
+  },
+  nameLabel: {
+    id: 'invite.name.label',
+    defaultMessage: '!!!Name',
+  },
+  emailLabel: {
+    id: 'invite.email.label',
+    defaultMessage: '!!!Email address',
+  },
+  submitButtonLabel: {
+    id: 'invite.submit.label',
+    defaultMessage: '!!!Send invites',
+  },
+  skipButtonLabel: {
+    id: 'invite.skip.label',
+    defaultMessage: '!!!I want to do this later',
+  },
+});
+
+@observer
+export default class Invite extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      invite: [...Array(3).fill({
+        name: {
+          label: this.context.intl.formatMessage(messages.nameLabel),
+          // value: '',
+          placeholder: this.context.intl.formatMessage(messages.nameLabel),
+        },
+        email: {
+          label: this.context.intl.formatMessage(messages.emailLabel),
+          // value: '',
+          validate: [email],
+          placeholder: this.context.intl.formatMessage(messages.emailLabel),
+        },
+      })],
+    },
+  }, this.context.intl);
+
+  submit(e) {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        this.props.onSubmit({ invites: form.values().invite });
+      },
+      onError: () => {},
+    });
+  }
+
+  render() {
+    const { form } = this;
+    const { intl } = this.context;
+
+    return (
+      <div className="auth__container auth__container--signup">
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <img
+            src="./assets/images/logo.svg"
+            className="auth__logo"
+            alt=""
+          />
+          <h1>
+            {intl.formatMessage(messages.headline)}
+          </h1>
+          {form.$('invite').map(invite => (
+            <div className="grid" key={invite.key}>
+              <div className="grid__row">
+                <Input field={invite.$('name')} showLabel={false} />
+                <Input field={invite.$('email')} showLabel={false} />
+              </div>
+            </div>
+          ))}
+          <Button
+            type="submit"
+            className="auth__button"
+            label={intl.formatMessage(messages.submitButtonLabel)}
+          />
+          <Link
+            to="/"
+            className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
+          >
+            {intl.formatMessage(messages.skipButtonLabel)}
+          </Link>
+        </form>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
new file mode 100644
index 000000000..015079f02
--- /dev/null
+++ b/src/components/auth/Login.js
@@ -0,0 +1,161 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Form from '../../lib/Form';
+import { required, email } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+import Link from '../ui/Link';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+// import Appear from '../ui/effects/Appear';
+
+const messages = defineMessages({
+  headline: {
+    id: 'login.headline',
+    defaultMessage: '!!!Sign in',
+  },
+  emailLabel: {
+    id: 'login.email.label',
+    defaultMessage: '!!!Email address',
+  },
+  passwordLabel: {
+    id: 'login.password.label',
+    defaultMessage: '!!!Password',
+  },
+  submitButtonLabel: {
+    id: 'login.submit.label',
+    defaultMessage: '!!!Sign in',
+  },
+  invalidCredentials: {
+    id: 'login.invalidCredentials',
+    defaultMessage: '!!!Email or password not valid',
+  },
+  tokenExpired: {
+    id: 'login.tokenExpired',
+    defaultMessage: '!!!Your session expired, please login again.',
+  },
+  serverLogout: {
+    id: 'login.serverLogout',
+    defaultMessage: '!!!Your session expired, please login again.',
+  },
+  signupLink: {
+    id: 'login.link.signup',
+    defaultMessage: '!!!Create a free account',
+  },
+  passwordLink: {
+    id: 'login.link.password',
+    defaultMessage: '!!!Forgot password',
+  },
+});
+
+@observer
+export default class Login extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    isTokenExpired: PropTypes.bool.isRequired,
+    isServerLogout: PropTypes.bool.isRequired,
+    signupRoute: PropTypes.string.isRequired,
+    passwordRoute: PropTypes.string.isRequired,
+    error: globalErrorPropType.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      email: {
+        label: this.context.intl.formatMessage(messages.emailLabel),
+        value: '',
+        validate: [required, email],
+      },
+      password: {
+        label: this.context.intl.formatMessage(messages.passwordLabel),
+        value: '',
+        validate: [required],
+        type: 'password',
+      },
+    },
+  }, this.context.intl);
+
+  submit(e) {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        this.props.onSubmit(form.values());
+      },
+      onError: () => {},
+    });
+  }
+
+  emailField = null;
+
+  render() {
+    const { form } = this;
+    const { intl } = this.context;
+    const {
+      isSubmitting,
+      isTokenExpired,
+      isServerLogout,
+      signupRoute,
+      passwordRoute,
+      error,
+    } = this.props;
+
+    return (
+      <div className="auth__container">
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <img
+            src="./assets/images/logo.svg"
+            className="auth__logo"
+            alt=""
+          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+          {isTokenExpired && (
+            <p className="error-message center">{intl.formatMessage(messages.tokenExpired)}</p>
+          )}
+          {isServerLogout && (
+            <p className="error-message center">{intl.formatMessage(messages.serverLogout)}</p>
+          )}
+          <Input
+            field={form.$('email')}
+            ref={(element) => { this.emailField = element; }}
+            focus
+          />
+          <Input
+            field={form.$('password')}
+            showPasswordToggle
+          />
+          {error.code === 'invalid-credentials' && (
+            <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+          )}
+          {isSubmitting ? (
+            <Button
+              className="auth__button is-loading"
+              buttonType="secondary"
+              label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
+              loaded={false}
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              className="auth__button"
+              label={intl.formatMessage(messages.submitButtonLabel)}
+            />
+          )}
+        </form>
+        <div className="auth__links">
+          <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
+          <Link to={passwordRoute}>{intl.formatMessage(messages.passwordLink)}</Link>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
new file mode 100644
index 000000000..d2b196853
--- /dev/null
+++ b/src/components/auth/Password.js
@@ -0,0 +1,135 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Form from '../../lib/Form';
+import { required, email } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+import Link from '../ui/Link';
+import Infobox from '../ui/Infobox';
+
+const messages = defineMessages({
+  headline: {
+    id: 'password.headline',
+    defaultMessage: '!!!Forgot password',
+  },
+  emailLabel: {
+    id: 'password.email.label',
+    defaultMessage: '!!!Email address',
+  },
+  submitButtonLabel: {
+    id: 'password.submit.label',
+    defaultMessage: '!!!Submit',
+  },
+  successInfo: {
+    id: 'password.successInfo',
+    defaultMessage: '!!!Your new password was sent to your email address',
+  },
+  noUser: {
+    id: 'password.noUser',
+    defaultMessage: '!!!No user affiliated with that email address',
+  },
+  signupLink: {
+    id: 'password.link.signup',
+    defaultMessage: '!!!Create a free account',
+  },
+  loginLink: {
+    id: 'password.link.login',
+    defaultMessage: '!!!Sign in to your account',
+  },
+});
+
+@observer
+export default class Password extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    signupRoute: PropTypes.string.isRequired,
+    loginRoute: PropTypes.string.isRequired,
+    status: MobxPropTypes.arrayOrObservableArray.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      email: {
+        label: this.context.intl.formatMessage(messages.emailLabel),
+        value: '',
+        validate: [required, email],
+      },
+    },
+  }, this.context.intl);
+
+  submit(e) {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        this.props.onSubmit(form.values());
+      },
+      onError: () => {},
+    });
+  }
+
+  render() {
+    const { form } = this;
+    const { intl } = this.context;
+    const {
+      isSubmitting,
+      signupRoute,
+      loginRoute,
+      status,
+    } = this.props;
+
+    return (
+      <div className="auth__container">
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <img
+            src="./assets/images/logo.svg"
+            className="auth__logo"
+            alt=""
+          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+          {status.length > 0 && status.includes('sent') && (
+            <Infobox
+              type="success"
+              icon="checkbox-marked-circle-outline"
+            >
+              {intl.formatMessage(messages.successInfo)}
+            </Infobox>
+          )}
+          <Input
+            field={form.$('email')}
+            focus
+          />
+          {status.length > 0 && status.includes('no-user') && (
+            <p className="error-message center">{intl.formatMessage(messages.noUser)}</p>
+          )}
+          {isSubmitting ? (
+            <Button
+              className="auth__button is-loading"
+              buttonType="secondary"
+              label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
+              loaded={false}
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              className="auth__button"
+              label={intl.formatMessage(messages.submitButtonLabel)}
+            />
+          )}
+        </form>
+        <div className="auth__links">
+          <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
+          <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
new file mode 100644
index 000000000..761561a89
--- /dev/null
+++ b/src/components/auth/Pricing.js
@@ -0,0 +1,130 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+// import { Link } from 'react-router';
+
+// import Button from '../ui/Button';
+import Loader from '../ui/Loader';
+import Appear from '../ui/effects/Appear';
+import SubscriptionForm from '../../containers/ui/SubscriptionFormScreen';
+
+const messages = defineMessages({
+  headline: {
+    id: 'pricing.headline',
+    defaultMessage: '!!!Support Franz',
+  },
+  monthlySupportLabel: {
+    id: 'pricing.support.label',
+    defaultMessage: '!!!Select your support plan',
+  },
+  submitButtonLabel: {
+    id: 'pricing.submit.label',
+    defaultMessage: '!!!Support the development of Franz',
+  },
+  skipPayment: {
+    id: 'pricing.link.skipPayment',
+    defaultMessage: '!!!I don\'t want to support the development of Franz.',
+  },
+});
+
+@observer
+export default class Signup extends Component {
+  static propTypes = {
+    donor: MobxPropTypes.objectOrObservableObject.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    isLoadingUser: PropTypes.bool.isRequired,
+    onCloseSubscriptionWindow: PropTypes.func.isRequired,
+    skipAction: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      donor,
+      isLoading,
+      isLoadingUser,
+      onCloseSubscriptionWindow,
+      skipAction,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="auth__scroll-container">
+        <div className="auth__container auth__container--signup">
+          <form className="franz-form auth__form">
+            <img
+              src="./assets/images/sm.png"
+              className="auth__logo auth__logo--sm"
+              alt=""
+            />
+            <h1>{intl.formatMessage(messages.headline)}</h1>
+            <div className="auth__letter">
+              {isLoadingUser && (
+                <p>Loading</p>
+              )}
+              {!isLoadingUser && (
+                donor.amount ? (
+                  <span>
+                    <p>
+                      Thank you so much for your previous donation of <strong>$ {donor.amount}</strong>.
+                      <br />
+                      Your support allowed us to get where we are today.
+                      <br />
+                    </p>
+                    <p>
+                      As an early supporter, you get <strong>a lifetime premium supporter license</strong> without any
+                      additional charges.
+                    </p>
+                    <p>
+                      However, If you want to keep supporting us, you are more than welcome to subscribe to a plan.
+                      <br /><br />
+                    </p>
+                  </span>
+                ) : (
+                  <span>
+                    <p>
+                      We built Franz with a lot of effort, manpower and love,
+                      to bring you the best messaging experience.
+                      <br />
+                    </p>
+                    <p>
+                      Getting a Franz Premium Supporter License will allow us to keep improving Franz for you.
+                    </p>
+                  </span>
+                )
+              )}
+              <p>
+                Thanks for being a hero.
+              </p>
+              <p>
+                <strong>Stefan Malzner</strong>
+              </p>
+            </div>
+            <Loader loaded={!isLoading}>
+              <Appear transitionName="slideDown">
+                <span className="label">{intl.formatMessage(messages.monthlySupportLabel)}</span>
+                <SubscriptionForm
+                  onCloseWindow={onCloseSubscriptionWindow}
+                  showSkipOption
+                  skipAction={skipAction}
+                  hideInfo={Boolean(donor.amount)}
+                  skipButtonLabel={intl.formatMessage(messages.skipPayment)}
+                />
+                {/* <Link
+                  to={inviteRoute}
+                  className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
+                >
+                  {intl.formatMessage(messages.skipPayment)}
+                </Link> */}
+              </Appear>
+            </Loader>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
new file mode 100644
index 000000000..71ca16111
--- /dev/null
+++ b/src/components/auth/Signup.js
@@ -0,0 +1,206 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Form from '../../lib/Form';
+import { required, email, minLength } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Radio from '../ui/Radio';
+import Button from '../ui/Button';
+import Link from '../ui/Link';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+const messages = defineMessages({
+  headline: {
+    id: 'signup.headline',
+    defaultMessage: '!!!Sign up',
+  },
+  firstnameLabel: {
+    id: 'signup.firstname.label',
+    defaultMessage: '!!!Firstname',
+  },
+  lastnameLabel: {
+    id: 'signup.lastname.label',
+    defaultMessage: '!!!Lastname',
+  },
+  emailLabel: {
+    id: 'signup.email.label',
+    defaultMessage: '!!!Email address',
+  },
+  companyLabel: {
+    id: 'signup.company.label',
+    defaultMessage: '!!!Company',
+  },
+  passwordLabel: {
+    id: 'signup.password.label',
+    defaultMessage: '!!!Password',
+  },
+  legalInfo: {
+    id: 'signup.legal.info',
+    defaultMessage: '!!!By creating a Franz account you accept the',
+  },
+  terms: {
+    id: 'signup.legal.terms',
+    defaultMessage: '!!!Terms of service',
+  },
+  privacy: {
+    id: 'signup.legal.privacy',
+    defaultMessage: '!!!Privacy Statement',
+  },
+  submitButtonLabel: {
+    id: 'signup.submit.label',
+    defaultMessage: '!!!Create account',
+  },
+  loginLink: {
+    id: 'signup.link.login',
+    defaultMessage: '!!!Already have an account, sign in?',
+  },
+  emailDuplicate: {
+    id: 'signup.emailDuplicate',
+    defaultMessage: '!!!A user with that email address already exists',
+  },
+});
+
+@observer
+export default class Signup extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    loginRoute: PropTypes.string.isRequired,
+    error: globalErrorPropType.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      accountType: {
+        value: 'individual',
+        validate: [required],
+        options: [{
+          value: 'individual',
+          label: 'Individual',
+        }, {
+          value: 'non-profit',
+          label: 'Non-Profit',
+        }, {
+          value: 'company',
+          label: 'Company',
+        }],
+      },
+      firstname: {
+        label: this.context.intl.formatMessage(messages.firstnameLabel),
+        value: '',
+        validate: [required],
+      },
+      lastname: {
+        label: this.context.intl.formatMessage(messages.lastnameLabel),
+        value: '',
+        validate: [required],
+      },
+      email: {
+        label: this.context.intl.formatMessage(messages.emailLabel),
+        value: '',
+        validate: [required, email],
+      },
+      organization: {
+        label: this.context.intl.formatMessage(messages.companyLabel),
+        value: '', // TODO: make required when accountType: company
+      },
+      password: {
+        label: this.context.intl.formatMessage(messages.passwordLabel),
+        value: '',
+        validate: [required, minLength(6)],
+        type: 'password',
+      },
+    },
+  }, this.context.intl);
+
+  submit(e) {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        this.props.onSubmit(form.values());
+      },
+      onError: () => {},
+    });
+  }
+
+  render() {
+    const { form } = this;
+    const { intl } = this.context;
+    const { isSubmitting, loginRoute, error } = this.props;
+
+    return (
+      <div className="auth__scroll-container">
+        <div className="auth__container auth__container--signup">
+          <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+            <img
+              src="./assets/images/logo.svg"
+              className="auth__logo"
+              alt=""
+            />
+            <h1>{intl.formatMessage(messages.headline)}</h1>
+            <Radio field={form.$('accountType')} showLabel={false} />
+            <div className="grid__row">
+              <Input field={form.$('firstname')} focus />
+              <Input field={form.$('lastname')} />
+            </div>
+            <Input field={form.$('email')} />
+            <Input
+              field={form.$('password')}
+              showPasswordToggle
+              scorePassword
+            />
+            {form.$('accountType').value === 'company' && (
+              <Input field={form.$('organization')} />
+            )}
+            {error.code === 'email-duplicate' && (
+              <p className="error-message center">{intl.formatMessage(messages.emailDuplicate)}</p>
+            )}
+            {isSubmitting ? (
+              <Button
+                className="auth__button is-loading"
+                label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
+                loaded={false}
+                disabled
+              />
+            ) : (
+              <Button
+                type="submit"
+                className="auth__button"
+                label={intl.formatMessage(messages.submitButtonLabel)}
+              />
+            )}
+            <p className="legal">
+              {intl.formatMessage(messages.legalInfo)}
+              <br />
+              <Link
+                to="http://meetfranz.com/terms"
+                target="_blank"
+                className="link"
+              >
+                {intl.formatMessage(messages.terms)}
+              </Link>
+              &nbsp;&amp;&nbsp;
+              <Link
+                to="http://meetfranz.com/privacy"
+                target="_blank"
+                className="link"
+              >
+                {intl.formatMessage(messages.privacy)}
+              </Link>.
+            </p>
+          </form>
+          <div className="auth__links">
+            <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
new file mode 100644
index 000000000..06b10ecfe
--- /dev/null
+++ b/src/components/auth/Welcome.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Link from '../ui/Link';
+
+const messages = defineMessages({
+  signupButton: {
+    id: 'welcome.signupButton',
+    defaultMessage: '!!!Create a free account',
+  },
+  loginButton: {
+    id: 'welcome.loginButton',
+    defaultMessage: '!!!Login to your account',
+  },
+});
+
+@observer
+export default class Login extends Component {
+  static propTypes = {
+    loginRoute: PropTypes.string.isRequired,
+    signupRoute: PropTypes.string.isRequired,
+    recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { intl } = this.context;
+    const {
+      loginRoute,
+      signupRoute,
+      recipes,
+    } = this.props;
+
+    return (
+      <div className="welcome">
+        <div className="welcome__content">
+          <img src="./assets/images/logo.svg" className="welcome__logo" alt="" />
+          {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */}
+          <div className="welcome__text">
+            <h1>Franz</h1>
+          </div>
+        </div>
+        <div className="welcome__buttons">
+          <Link to={signupRoute} className="button">
+            {intl.formatMessage(messages.signupButton)}
+          </Link>
+          <Link to={loginRoute} className="button">
+            {intl.formatMessage(messages.loginButton)}
+          </Link>
+        </div>
+        <div className="welcome__featured-services">
+          {recipes.map(recipe => (
+            <img
+              key={recipe.id}
+              src={recipe.icons.svg}
+              className="welcome__featured-service"
+              alt=""
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
-- 
cgit v1.2.3-54-g00ecf