17 files changed, 108 insertions, 25 deletions

diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index a420f98a2..1fe594d73 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -30,6 +30,10 @@ const messages = defineMessages({
     id: 'invite.skip.label',
     defaultMessage: '!!!I want to do this later',
   },
+  noEmailAddresses: {
+    id: 'invite.error.noEmails',
+    defaultMessage: '!!!At least one email address is required',
+  }
 });
 
 @observer
@@ -45,17 +49,17 @@ export default class Invite extends Component {
   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: '',
-          validators: [email],
-          placeholder: this.context.intl.formatMessage(messages.emailLabel),
-        },
+        fields: {
+          name: {
+            label: this.context.intl.formatMessage(messages.nameLabel),
+            placeholder: this.context.intl.formatMessage(messages.nameLabel),
+          },
+          email: {
+            label: this.context.intl.formatMessage(messages.emailLabel),
+            placeholder: this.context.intl.formatMessage(messages.emailLabel),
+            validators: [email],
+          }
+        }
       })],
     },
   }, this.context.intl);
@@ -64,6 +68,21 @@ export default class Invite extends Component {
     e.preventDefault();
     this.form.submit({
       onSuccess: (form) => {
+
+        this.props.onSubmit({ 
+          invites: form.values().invite,
+          from: this.props.from
+        });
+
+        const atLeastOneEmailAddress = form.$('invite')
+          .map(invite => {return invite.$('email').value})
+          .some(email => email.trim() !== '')
+        
+        if (!atLeastOneEmailAddress) {
+          form.invalidate('no-email-addresses')
+          return
+        }
+  
         this.props.onSubmit({ invites: form.values().invite });
       },
       onError: () => {},
@@ -73,6 +92,11 @@ export default class Invite extends Component {
   render() {
     const { form } = this;
     const { intl } = this.context;
+    const { from } = this.props;
+
+    const atLeastOneEmailAddress = form.$('invite')
+      .map(invite => {return invite.$('email').value})
+      .some(email => email.trim() !== '')
 
     return (
       <div className="auth__container auth__container--signup">
@@ -93,13 +117,19 @@ export default class Invite extends Component {
               </div>
             </div>
           ))}
+          {form.error === 'no-email-addresses' && (
+            <p className="franz-form__error invite-form__error">
+              {intl.formatMessage(messages.noEmailAddresses)}
+            </p>
+          )}
           <Button
             type="submit"
             className="auth__button"
+            disabled={!atLeastOneEmailAddress}
             label={intl.formatMessage(messages.submitButtonLabel)}
           />
           <Link
-            to="/"
+            to={ !!from ? from : '/'}
             className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
           >
             {intl.formatMessage(messages.skipButtonLabel)}
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 43272fe96..d5f2e238c 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -48,6 +48,11 @@ const messages = defineMessages({
     id: 'settings.account.account.editButton',
     defaultMessage: '!!!Edit Account',
   },
+  accountInviteButton: {
+    id: "settings.account.account.inviteButton",
+    defaultMessage: '!!!Invite Friends',
+  },
+
   invoiceDownload: {
     id: 'settings.account.invoiceDownload',
     defaultMessage: '!!!Download',
@@ -113,6 +118,7 @@ export default class AccountDashboard extends Component {
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
+      pathname,
     } = this.props;
     const { intl } = this.context;
 
@@ -174,10 +180,25 @@ export default class AccountDashboard extends Component {
                         <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
                       )}
                     </div>
-                    <Link to="/settings/user/edit" className="button">
-                      {intl.formatMessage(messages.accountEditButton)}
-                    </Link>
-
+                    <div className="grid">
+                      <div className="grid__row">
+                        <Link to="/settings/user/edit" className="button account__edit-button">
+                          {intl.formatMessage(messages.accountEditButton)}
+                        </Link>
+                      </div>
+                      <div className="grid__row">
+                        <Link
+                          to={{
+                            pathname: '/auth/signup/invite',
+                            query: { from: pathname },
+                            // state: { "from": 'hi' } // is not being passed to route
+                          }}
+                          className="button account__invite-button">
+                          {intl.formatMessage(messages.accountInviteButton)}
+                        </Link>  
+                      </div>
+                    </div>
+                    
                     {user.emailValidated}
                   </div>
                 </div>
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index f5da921fa..bc3c2d8aa 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -62,7 +62,10 @@ Link.wrappedComponent.propTypes = {
     oneOrManyChildElements,
     PropTypes.string,
   ]).isRequired,
-  to: PropTypes.string.isRequired,
+  to: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]).isRequired,
   className: PropTypes.string,
   activeClassName: PropTypes.string,
   strictFilter: PropTypes.bool,
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
index 51971f436..a624e2245 100644
--- a/src/containers/auth/InviteScreen.js
+++ b/src/containers/auth/InviteScreen.js
@@ -11,10 +11,15 @@ export default class InviteScreen extends Component {
   }
 
   render() {
-    const { actions } = this.props;
+    const { 
+      actions,
+      location
+    } = this.props;
+
     return (
       <Invite
         onSubmit={actions.user.invite}
+        from={location.query.from}
       />
     );
   }
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index c5c2982b0..b57530884 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -83,6 +83,7 @@ export default class AccountScreen extends Component {
         deleteAccount={userActions.delete}
         isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting}
         isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError}
+        pathname={this.props.location.pathname}
       />
     );
   }
diff --git a/src/helpers/validation-helpers.js b/src/helpers/validation-helpers.js
index eeb12cab7..a8a242d54 100644
--- a/src/helpers/validation-helpers.js
+++ b/src/helpers/validation-helpers.js
@@ -13,7 +13,7 @@ export function email({ field }) {
     isValid = true;
   }
 
-  return [isValid, `${field.label} is not a valid email address`];
+  return [isValid, `${field.label} not valid`];
 }
 
 export function url({ field }) {
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 1ea0554ba..180db3018 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -45,6 +45,7 @@
    "services.getStarted" : "Loslegen",
    "services.welcome" : "Willkommen bei Franz.",
    "settings.account.account.editButton" : "Konto bearbeiten",
+   "settings.account.account.inviteButton" : "Freunde einladen",
    "settings.account.accountType.basic" : "Basis Konto",
    "settings.account.accountType.premium" : "Premium-Supporter Konto",
    "settings.account.buttonSave" : "Profil aktualisieren",
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 63d7ce60b..c9e9b860b 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -45,6 +45,7 @@
   "invite.name.label": "Name",
   "invite.email.label": "Email address",
   "invite.skip.label": "I want to do this later",
+  "invite.error.noEmails": "At least one email address is required",
   "subscription.submit.label": "I want to support the development of Franz",
   "subscription.paymentSessionError": "Could not initialize payment form",
   "subscription.includedFeatures": "Paid Franz Premium Supporter Account includes",
@@ -76,6 +77,7 @@
   "settings.account.accountType.basic": "Basic Account",
   "settings.account.accountType.premium": "Premium Supporter Account",
   "settings.account.account.editButton": "Edit account",
+  "settings.account.account.inviteButton" : "Invite friends",
   "settings.account.invoiceDownload": "Download",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.tryReloadUserInfoRequest": "Try again",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index c4f598bd1..dddd1bf1f 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -45,6 +45,7 @@
    "services.getStarted" : "Primeros pasos",
    "services.welcome" : "Bienvenido a Franz",
    "settings.account.account.editButton" : "Editar cuenta",
+   "settings.account.account.inviteButton" : "Invitar amigos",
    "settings.account.accountType.basic" : "Cuenta Básica",
    "settings.account.accountType.premium" : "Cuenta Colaborador Premium",
    "settings.account.buttonSave" : "Actualizar perfil",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 4a06975bb..a717577be 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -45,6 +45,7 @@
    "services.getStarted" : "Commencer",
    "services.welcome" : "Bienvenue dans Franz",
    "settings.account.account.editButton" : "Modifier le compte",
+   "settings.account.account.inviteButton" : "Inviter des amis",   
    "settings.account.accountType.basic" : "Compte de base",
    "settings.account.accountType.premium" : "Compte supporteur premium",
    "settings.account.buttonSave" : "Mettre à jour le profil",
diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
index 1d2485b19..5b89b3a12 100644
--- a/src/i18n/locales/it.json
+++ b/src/i18n/locales/it.json
@@ -45,6 +45,7 @@
    "services.getStarted" : "Iniziamo",
    "services.welcome" : "Benvenuto in Franz",
    "settings.account.account.editButton" : "Modifica account",
+   "settings.account.account.inviteButton" : "Invitare amicos",
    "settings.account.accountType.basic" : "Account Basic",
    "settings.account.accountType.premium" : "Premium Supporter Account",
    "settings.account.buttonSave" : "Aggiorna profilo",
diff --git a/src/lib/Form.js b/src/lib/Form.js
index a22699b45..9b8321948 100644
--- a/src/lib/Form.js
+++ b/src/lib/Form.js
@@ -21,8 +21,9 @@ export default class DefaultForm extends Form {
 
   options() {
     return {
-      validateOnInit: false,
-      // validateOnBlur: true,
+      validateOnInit: false, // default: true
+      // validateOnBlur: true, // default: true
+      // validateOnChange: true // default: false
       // // validationDebounceWait: {
       // //   trailing: true,
       // // },
diff --git a/src/models/User.js b/src/models/User.js
index 2e5df4795..d2a455e20 100644
--- a/src/models/User.js
+++ b/src/models/User.js
@@ -10,7 +10,7 @@ export default class User {
   @observable emailIsConfirmed = true; // better assume it's confirmed to avoid noise
   @observable subscription = {};
   @observable isSubscriptionOwner = false;
-  @observable isPremium = false;
+  @observable isPremium = true;
   @observable beta = false;
   @observable donor = {};
   @observable isDonor = false;
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 09000dcdb..476c1f040 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -160,13 +160,13 @@ export default class UserStore extends Store {
     gaEvent('User', 'retrievePassword');
   }
 
-  @action _invite({ invites }) {
+  @action _invite({ invites, from }) {
     const data = invites.filter(invite => invite.email !== '');
 
     this.inviteRequest.execute(data);
 
     // we do not wait for a server response before redirecting the user
-    this.stores.router.push('/');
+    this.stores.router.push(!!from ? from : '/');
 
     gaEvent('User', 'inviteUsers');
   }
@@ -237,7 +237,9 @@ export default class UserStore extends Store {
       && currentRoute.includes(this.BASE_ROUTE)
       && (this.hasCompletedSignup
         || this.hasCompletedSignup === null)) {
-      this.stores.router.push('/');
+      if (!isDevMode) {
+        this.stores.router.push('/');
+      }
     }
   };
 
diff --git a/src/styles/invite.scss b/src/styles/invite.scss
new file mode 100644
index 000000000..345095da8
--- /dev/null
+++ b/src/styles/invite.scss
@@ -0,0 +1,4 @@
+.invite-form__error {
+  text-align: center;
+  margin-bottom: 20px !important; /* otherwise overridden by rule: p:last-of-type */
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 261396f6f..20f1803e4 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -18,6 +18,7 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './type.scss';
 @import './welcome.scss';
 @import './auth.scss';
+@import './invite.scss';
 @import './tooltip.scss';
 @import './info-bar.scss';
 @import './status-bar-target-url.scss';
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 2182c9b5f..f436b1eda 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -282,6 +282,15 @@
       }
     }
 
+    .account__edit-button {
+      width: 170px;
+      margin-bottom: 10px;
+    }
+
+    .account__invite-button {
+      width: 170px;
+    }
+
     .account__subscription {
       display: flex;
       align-items: center;