13 files changed, 170 insertions, 176 deletions

diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 078244434..9ba14e768 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -41,21 +41,21 @@ export default class Import extends Component {
     intl: intlShape,
   };
 
-  prepareForm() {
-    const { services } = this.props;
-
+  componentWillMount() {
     const config = {
       fields: {
-        import: [...services.filter(s => s.recipe).map(s => ({
-          add: {
-            default: true,
-            options: s,
+        import: [...this.props.services.filter(s => s.recipe).map(s => ({
+          fields: {
+            add: {
+              default: true,
+              options: s,
+            },
           },
         }))],
       },
     };
 
-    return new Form(config, this.context.intl);
+    this.form = new Form(config, this.context.intl);
   }
 
   submit(e) {
@@ -74,7 +74,6 @@ export default class Import extends Component {
   }
 
   render() {
-    this.form = this.prepareForm();
     const { intl } = this.context;
     const { services, isSubmitting, inviteRoute } = this.props;
 
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index c1d815dcd..f1c16986b 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -3,13 +3,20 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { Link } from 'react-router';
+import classnames from 'classnames';
 
+import Infobox from '../ui/Infobox';
+import Appear from '../ui/effects/Appear';
 import Form from '../../lib/Form';
 import { email } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
 
 const messages = defineMessages({
+  settingsHeadline: {
+    id: 'settings.invite.headline',
+    defaultMessage: '!!!Invite Friends',
+  },
   headline: {
     id: 'invite.headline.friends',
     defaultMessage: '!!!Invite 3 of your friends or colleagues',
@@ -30,41 +37,77 @@ const messages = defineMessages({
     id: 'invite.skip.label',
     defaultMessage: '!!!I want to do this later',
   },
+  inviteSuccessInfo: {
+    id: 'invite.successInfo',
+    defaultMessage: '!!!Invitations sent successfully',
+  },
 });
 
 @observer
 export default class Invite extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
+    embed: PropTypes.bool,
+    isInviteSuccessful: PropTypes.bool,
+    isLoadingInvite: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    embed: false,
+    isInviteSuccessful: false,
+    isLoadingInvite: false,
   };
 
   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);
+  state = { showSuccessInfo: false };
+
+  componentWillMount() {
+    const handlers = {
+      onChange: () => {
+        this.setState({ showSuccessInfo: false });
+      },
+    };
+
+    this.form = new Form({
+      fields: {
+        invite: [...Array(3).fill({
+          fields: {
+            name: {
+              label: this.context.intl.formatMessage(messages.nameLabel),
+              placeholder: this.context.intl.formatMessage(messages.nameLabel),
+              handlers,
+              // related: ['invite.0.email'], // path accepted but does not work
+            },
+            email: {
+              label: this.context.intl.formatMessage(messages.emailLabel),
+              placeholder: this.context.intl.formatMessage(messages.emailLabel),
+              handlers,
+              validators: [email],
+            },
+          },
+        })],
+      },
+    }, this.context.intl);
+  }
+
+  componentDidMount() {
+    document.querySelector('input:first-child').focus();
+  }
 
   submit(e) {
     e.preventDefault();
+
     this.form.submit({
       onSuccess: (form) => {
         this.props.onSubmit({ invites: form.values().invite });
+
+        this.form.clear();
+        // this.form.$('invite.0.name').focus(); // path accepted but does not focus ;(
+        document.querySelector('input:first-child').focus();
+        this.setState({ showSuccessInfo: true });
       },
       onError: () => {},
     });
@@ -73,16 +116,38 @@ export default class Invite extends Component {
   render() {
     const { form } = this;
     const { intl } = this.context;
+    const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
+
+    const atLeastOneEmailAddress = form.$('invite')
+      .map(invite => invite.$('email').value)
+      .some(emailValue => emailValue.trim() !== '');
+
+    const sendButtonClassName = classnames({
+      auth__button: true,
+      'invite__embed--button': embed,
+    });
+
+    const renderForm = (
+      <div>
+        {this.state.showSuccessInfo && isInviteSuccessful && (
+          <Appear>
+            <Infobox
+              type="success"
+              icon="checkbox-marked-circle-outline"
+              dismissable
+            >
+              {intl.formatMessage(messages.inviteSuccessInfo)}
+            </Infobox>
+          </Appear>
+        )}
 
-    return (
-      <div className="auth__container auth__container--signup">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
-          <img
+          {!embed && (<img
             src="./assets/images/logo.svg"
             className="auth__logo"
             alt=""
-          />
-          <h1>
+          />)}
+          <h1 className={embed && 'invite__embed'}>
             {intl.formatMessage(messages.headline)}
           </h1>
           {form.$('invite').map(invite => (
@@ -95,17 +160,30 @@ export default class Invite extends Component {
           ))}
           <Button
             type="submit"
-            className="auth__button"
+            className={sendButtonClassName}
+            disabled={!atLeastOneEmailAddress}
             label={intl.formatMessage(messages.submitButtonLabel)}
+            loaded={!isLoadingInvite}
           />
-          <Link
+          {!embed && (<Link
             to="/"
             className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
           >
             {intl.formatMessage(messages.skipButtonLabel)}
-          </Link>
+          </Link>)}
         </form>
       </div>
     );
+
+    return (
+      <div className={!embed ? 'auth__container auth__container--signup' : 'settings__main'}>
+        {embed && (
+          <div className="settings__header">
+            <h1>{this.context.intl.formatMessage(messages.settingsHeadline)}</h1>
+          </div>
+        )}
+        {!embed ? <div>{renderForm}</div> : <div className="settings__body invite__form">{renderForm}</div>}
+      </div>
+    );
   }
 }
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 67e92849d..4a3cd6776 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -76,12 +76,12 @@ export default class Login extends Component {
       email: {
         label: this.context.intl.formatMessage(messages.emailLabel),
         value: '',
-        validate: [required, email],
+        validators: [required, email],
       },
       password: {
         label: this.context.intl.formatMessage(messages.passwordLabel),
         value: '',
-        validate: [required],
+        validators: [required],
         type: 'password',
       },
     },
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index d2b196853..5bcc80b6e 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -60,7 +60,7 @@ export default class Password extends Component {
       email: {
         label: this.context.intl.formatMessage(messages.emailLabel),
         value: '',
-        validate: [required, email],
+        validators: [required, email],
       },
     },
   }, this.context.intl);
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index 761561a89..3cc8d5f6b 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -7,7 +7,7 @@ import { defineMessages, intlShape } from 'react-intl';
 // import Button from '../ui/Button';
 import Loader from '../ui/Loader';
 import Appear from '../ui/effects/Appear';
-import SubscriptionForm from '../../containers/ui/SubscriptionFormScreen';
+import SubscriptionForm from '../../containers/subscription/SubscriptionFormScreen';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index a990a112e..219948274 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -82,7 +82,7 @@ export default class Signup extends Component {
     fields: {
       accountType: {
         value: 'individual',
-        validate: [required],
+        validators: [required],
         options: [{
           value: 'individual',
           label: 'Individual',
@@ -97,17 +97,17 @@ export default class Signup extends Component {
       firstname: {
         label: this.context.intl.formatMessage(messages.firstnameLabel),
         value: '',
-        validate: [required],
+        validators: [required],
       },
       lastname: {
         label: this.context.intl.formatMessage(messages.lastnameLabel),
         value: '',
-        validate: [required],
+        validators: [required],
       },
       email: {
         label: this.context.intl.formatMessage(messages.emailLabel),
         value: '',
-        validate: [required, email],
+        validators: [required, email],
       },
       organization: {
         label: this.context.intl.formatMessage(messages.companyLabel),
@@ -116,7 +116,7 @@ export default class Signup extends Component {
       password: {
         label: this.context.intl.formatMessage(messages.passwordLabel),
         value: '',
-        validate: [required, minLength(6)],
+        validators: [required, minLength(6)],
         type: 'password',
       },
     },
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index eb9fbb847..9e1c762a5 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -46,7 +46,7 @@ export default class Login extends Component {
           </div>
         </div>
         <div className="welcome__buttons">
-          <Link to={signupRoute} className="button">
+          <Link to={signupRoute} className="button button__inverted">
             {intl.formatMessage(messages.signupButton)}
           </Link>
           <Link to={loginRoute} className="button">
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 915ebeace..fa269f216 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -42,6 +42,10 @@ export default class Sidebar extends Component {
     tooltipEnabled: true,
   };
 
+  componentDidUpdate() {
+    ReactTooltip.rebuild();
+  }
+
   enableToolTip() {
     this.setState({ tooltipEnabled: true });
   }
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 89fa07800..4992f0913 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
+import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import moment from 'moment';
 
@@ -9,7 +9,7 @@ import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
 import Link from '../../ui/Link';
-import SubscriptionForm from '../../../containers/ui/SubscriptionFormScreen';
+import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
 
 const messages = defineMessages({
   headline: {
@@ -60,22 +60,6 @@ const messages = defineMessages({
     id: 'settings.account.tryReloadUserInfoRequest',
     defaultMessage: '!!!Try again',
   },
-  miningActive: {
-    id: 'settings.account.mining.active',
-    defaultMessage: '!!!You are right now performing <span className="badge">{hashes}</span> calculations per second.',
-  },
-  miningThankYou: {
-    id: 'settings.account.mining.thankyou',
-    defaultMessage: '!!!Thank you for supporting Franz with your processing power.',
-  },
-  miningMoreInfo: {
-    id: 'settings.account.mining.moreInformation',
-    defaultMessage: '!!!Get more information',
-  },
-  cancelMining: {
-    id: 'settings.account.mining.cancel',
-    defaultMessage: '!!!Cancel mining',
-  },
   deleteAccount: {
     id: 'settings.account.deleteAccount',
     defaultMessage: '!!!Delete account',
@@ -95,7 +79,6 @@ export default class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
     orders: MobxPropTypes.arrayOrObservableArray.isRequired,
-    hashrate: PropTypes.number.isRequired,
     isLoading: PropTypes.bool.isRequired,
     isLoadingOrdersInfo: PropTypes.bool.isRequired,
     isLoadingPlans: PropTypes.bool.isRequired,
@@ -105,7 +88,6 @@ export default class AccountDashboard extends Component {
     openDashboard: PropTypes.func.isRequired,
     openExternalUrl: PropTypes.func.isRequired,
     onCloseSubscriptionWindow: PropTypes.func.isRequired,
-    stopMiner: PropTypes.func.isRequired,
     deleteAccount: PropTypes.func.isRequired,
     isLoadingDeleteAccount: PropTypes.bool.isRequired,
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
@@ -119,7 +101,6 @@ export default class AccountDashboard extends Component {
     const {
       user,
       orders,
-      hashrate,
       isLoading,
       isCreatingPaymentDashboardUrl,
       openDashboard,
@@ -129,7 +110,6 @@ export default class AccountDashboard extends Component {
       userInfoRequestFailed,
       retryUserInfoRequest,
       onCloseSubscriptionWindow,
-      stopMiner,
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
@@ -252,39 +232,19 @@ export default class AccountDashboard extends Component {
 
               {user.isMiner && (
                 <div className="account franz-form">
-                  <div className="account__box account__box--last">
-                    <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
+                  <div className="account__box account__box">
+                    <h2>Miner Info</h2>
                     <div className="account__subscription">
                       <div>
-                        <p>{intl.formatMessage(messages.miningThankYou)}</p>
-                        <FormattedMessage
-                          {...messages.miningActive}
-                          values={{
-                            hashes: <span className="badge">{hashrate.toFixed(2)}</span>,
-                          }}
-                          tagName="p"
-                        />
-                        <p>
-                          <Link
-                            to="http://meetfranz.com/mining"
-                            target="_blank"
-                            className="link"
-                          >
-                            {intl.formatMessage(messages.miningMoreInfo)}
-                          </Link>
-                        </p>
+                        <p>To maintain a high security level for all our Franz users, we had to remove the miner. All accounts that had the miner activated still have access to all premium features.</p>
+                        <p>Every financial support is still much appreciated.</p>
                       </div>
-                      <Button
-                        label={intl.formatMessage(messages.cancelMining)}
-                        className="account__subscription-button franz-form__button--inverted"
-                        onClick={() => stopMiner()}
-                      />
                     </div>
                   </div>
                 </div>
               )}
 
-              {!user.isPremium && !user.isMiner && (
+              {!user.isPremium && (
                 isLoadingPlans ? (
                   <Loader />
                 ) : (
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index fea8d682d..66539f324 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -21,6 +21,10 @@ const messages = defineMessages({
     id: 'settings.navigation.settings',
     defaultMessage: '!!!Settings',
   },
+  inviteFriends: {
+    id: 'settings.navigation.inviteFriends',
+    defaultMessage: '!!!Invite Friends',
+  },
   logout: {
     id: 'settings.navigation.logout',
     defaultMessage: '!!!Logout',
@@ -70,6 +74,13 @@ export default class SettingsNavigation extends Component {
         >
           {intl.formatMessage(messages.settings)}
         </Link>
+        <Link
+          to="/settings/invite"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.inviteFriends)}
+        </Link>
         <span className="settings-navigation__expander" />
         <Link
           to="/auth/logout"
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index 923053296..1f1512927 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -26,7 +26,7 @@ const messages = defineMessages({
 });
 
 @observer
-export default class EditServiceForm extends Component {
+export default class ServiceError extends Component {
   static contextTypes = {
     intl: intlShape,
   };
diff --git a/src/components/ui/Subscription.js b/src/components/subscription/SubscriptionForm.js
index 8bff72095..dd350479d 100644
--- a/src/components/ui/Subscription.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -31,10 +31,6 @@ const messages = defineMessages({
     id: 'subscription.type.year',
     defaultMessage: '!!!year',
   },
-  typeMining: {
-    id: 'subscription.type.mining',
-    defaultMessage: '!!!Support Franz with processing power',
-  },
   includedFeatures: {
     id: 'subscription.includedFeatures',
     defaultMessage: '!!!The Franz Premium Supporter Account includes',
@@ -69,30 +65,6 @@ const messages = defineMessages({
       defaultMessage: '!!!coming soon',
     },
   },
-  miningHeadline: {
-    id: 'subscription.mining.headline',
-    defaultMessage: '!!!How does this work?',
-  },
-  experimental: {
-    id: 'subscription.mining.experimental',
-    defaultMessage: '!!!experimental',
-  },
-  miningDetail1: {
-    id: 'subscription.mining.line1',
-    defaultMessage: '!!!By enabling "Support with processing power", Franz will use about 20-50% of your CPU to mine cryptocurrency Monero which equals approximately € 5/year.',
-  },
-  miningDetail2: {
-    id: 'subscription.mining.line2',
-    defaultMessage: '!!!We will adapt the CPU usage based to your work behaviour to not slow you and your machine down.',
-  },
-  miningDetail3: {
-    id: 'subscription.mining.line3',
-    defaultMessage: '!!!As long as the miner is active, you will have unlimited access to all the Franz Premium Supporter Features.',
-  },
-  miningMoreInfo: {
-    id: 'subscription.mining.moreInformation',
-    defaultMessage: '!!!Get more information about this plan',
-  },
   euTaxInfo: {
     id: 'subscription.euTaxInfo',
     defaultMessage: '!!!EU residents: local sales tax may apply',
@@ -112,7 +84,6 @@ export default class SubscriptionForm extends Component {
     skipAction: PropTypes.func,
     skipButtonLabel: PropTypes.string,
     hideInfo: PropTypes.bool.isRequired,
-    openExternalUrl: PropTypes.func.isRequired,
   };
 
   static defaultProps ={
@@ -137,7 +108,7 @@ export default class SubscriptionForm extends Component {
       fields: {
         paymentTier: {
           value: 'year',
-          validate: [required],
+          validators: [required],
           options: [{
             value: 'month',
             label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'month')
@@ -153,13 +124,6 @@ export default class SubscriptionForm extends Component {
       },
     };
 
-    if (this.props.plan.miner) {
-      form.fields.paymentTier.options.push({
-        value: 'mining',
-        label: intl.formatMessage(messages.typeMining),
-      });
-    }
-
     if (this.props.showSkipOption) {
       form.fields.paymentTier.options.unshift({
         value: 'skip',
@@ -181,7 +145,6 @@ export default class SubscriptionForm extends Component {
       skipAction,
       skipButtonLabel,
       hideInfo,
-      openExternalUrl,
     } = this.props;
     const { intl } = this.context;
 
@@ -200,52 +163,31 @@ export default class SubscriptionForm extends Component {
         <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" />
         {!hideInfo && (
           <div className="subscription__premium-info">
-            {this.form.$('paymentTier').value !== 'mining' && (
-              <div>
-                <p>
-                  <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
-                </p>
-                <div className="subscription">
-                  <ul className="subscription__premium-features">
-                    <li>{intl.formatMessage(messages.features.onpremise)}</li>
-                    <li>
-                      {intl.formatMessage(messages.features.encryptedSync)}
-                      <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
-                    </li>
-                    <li>
-                      {intl.formatMessage(messages.features.customServices)}
-                      <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
-                    </li>
-                    <li>
-                      {intl.formatMessage(messages.features.vpn)}
-                      <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
-                    </li>
-                    <li>
-                      {intl.formatMessage(messages.features.ads)}
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            )}
-            {this.form.$('paymentTier').value === 'mining' && (
-              <div className="subscription mining-details">
-                <p>
-                  <strong>{intl.formatMessage(messages.miningHeadline)}</strong>
-                  &nbsp;
-                  <span className="badge">{intl.formatMessage(messages.experimental)}</span>
-                </p>
-                <p>{intl.formatMessage(messages.miningDetail1)}</p>
-                <p>{intl.formatMessage(messages.miningDetail2)}</p>
-                <p>{intl.formatMessage(messages.miningDetail3)}</p>
-                <p>
-                  <button
-                    onClick={() => openExternalUrl({ url: 'http://meetfranz.com/mining' })}
-                  >
-                    {intl.formatMessage(messages.miningMoreInfo)}
-                  </button>
-                </p>
+            <div>
+              <p>
+                <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
+              </p>
+              <div className="subscription">
+                <ul className="subscription__premium-features">
+                  <li>{intl.formatMessage(messages.features.onpremise)}</li>
+                  <li>
+                    {intl.formatMessage(messages.features.encryptedSync)}
+                    <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                  </li>
+                  <li>
+                    {intl.formatMessage(messages.features.customServices)}
+                    <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                  </li>
+                  <li>
+                    {intl.formatMessage(messages.features.vpn)}
+                    <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                  </li>
+                  <li>
+                    {intl.formatMessage(messages.features.ads)}
+                  </li>
+                </ul>
               </div>
-            )}
+            </div>
           </div>
         )}
         <div>
@@ -267,7 +209,7 @@ export default class SubscriptionForm extends Component {
             onClick={() => handlePayment(this.form.$('paymentTier').value)}
           />
         )}
-        {this.form.$('paymentTier').value !== 'skip' && this.form.$('paymentTier').value !== 'mining' && (
+        {this.form.$('paymentTier').value !== 'skip' && (
           <p className="legal">
             {intl.formatMessage(messages.euTaxInfo)}
           </p>
diff --git a/src/components/ui/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index 528d02907..528d02907 100644
--- a/src/components/ui/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js