4 files changed, 191 insertions, 139 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 83dc34a52..7d6bad883 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -3,9 +3,7 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import {
-  ProBadge, H1, H2,
-} from '@meetfranz/ui';
+import { ProBadge, H1, H2 } from '@meetfranz/ui';
 import moment from 'moment';
 
 import Loader from '../../ui/Loader';
@@ -13,6 +11,7 @@ import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
 import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
 import { i18nPlanName } from '../../../helpers/plan-helpers';
+import { LOCAL_SERVER } from '../../../config';
 
 const messages = defineMessages({
   headline: {
@@ -69,11 +68,13 @@ const messages = defineMessages({
   },
   deleteInfo: {
     id: 'settings.account.deleteInfo',
-    defaultMessage: '!!!If you don\'t need your Ferdi account any longer, you can delete your account and all related data here.',
+    defaultMessage:
+      "!!!If you don't need your Ferdi account any longer, you can delete your account and all related data here.",
   },
   deleteEmailSent: {
     id: 'settings.account.deleteEmailSent',
-    defaultMessage: '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
+    defaultMessage:
+      '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
   },
   trial: {
     id: 'settings.account.trial',
@@ -89,7 +90,16 @@ const messages = defineMessages({
   },
   trialUpdateBillingInformation: {
     id: 'settings.account.trialUpdateBillingInfo',
-    defaultMessage: '!!!Please update your billing info to continue using {license} after your trial period.',
+    defaultMessage:
+      '!!!Please update your billing info to continue using {license} after your trial period.',
+  },
+  accountUnavailable: {
+    id: 'settings.account.accountUnavailable',
+    defaultMessage: 'Account is unavailable',
+  },
+  accountUnavailableInfo: {
+    id: 'settings.account.accountUnavailableInfo',
+    defaultMessage: 'You are using Ferdi without an account. If you want to use Ferdi with an account and keep your services synchronized across installations, please select a server in the Settings tab then login.',
   },
 });
 
@@ -110,6 +120,7 @@ class AccountDashboard extends Component {
     upgradeToPro: PropTypes.func.isRequired,
     openInvoices: PropTypes.func.isRequired,
     onCloseSubscriptionWindow: PropTypes.func.isRequired,
+    server: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -132,6 +143,7 @@ class AccountDashboard extends Component {
       upgradeToPro,
       openInvoices,
       onCloseSubscriptionWindow,
+      server,
     } = this.props;
     const { intl } = this.context;
 
@@ -141,6 +153,8 @@ class AccountDashboard extends Component {
       planName = i18nPlanName(user.team.plan, intl);
     }
 
+    const isUsingWithoutAccount = server === LOCAL_SERVER;
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -149,154 +163,186 @@ class AccountDashboard extends Component {
           </span>
         </div>
         <div className="settings__body">
-          {isLoading && (
-            <Loader />
+          {isUsingWithoutAccount && (
+            <>
+              <h1 style={{ marginBottom: 0 }}>
+                {intl.formatMessage(messages.accountUnavailable)}
+              </h1>
+              <p
+                className="settings__message"
+                style={{
+                  borderTop: 0,
+                  marginTop: 0,
+                }}
+              >
+                {intl.formatMessage(messages.accountUnavailableInfo)}
+              </p>
+            </>
           )}
+          {!isUsingWithoutAccount && (
+            <>
+              {isLoading && <Loader />}
 
-          {!isLoading && userInfoRequestFailed && (
-            <Infobox
-              icon="alert"
-              type="danger"
-              ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
-              ctaLoading={isLoading}
-              ctaOnClick={retryUserInfoRequest}
-            >
-              {intl.formatMessage(messages.userInfoRequestFailed)}
-            </Infobox>
-          )}
+              {!isLoading && userInfoRequestFailed && (
+                <Infobox
+                  icon="alert"
+                  type="danger"
+                  ctaLabel={intl.formatMessage(
+                    messages.tryReloadUserInfoRequest,
+                  )}
+                  ctaLoading={isLoading}
+                  ctaOnClick={retryUserInfoRequest}
+                >
+                  {intl.formatMessage(messages.userInfoRequestFailed)}
+                </Infobox>
+              )}
 
-          {!userInfoRequestFailed && (
-            <>
-              {!isLoading && (
+              {!userInfoRequestFailed && (
                 <>
-                  <div className="account">
-                    <div className="account__box account__box--flex">
-                      <div className="account__avatar">
-                        <img
-                          src="./assets/images/logo.svg"
-                          alt=""
-                        />
-                      </div>
-                      <div className="account__info">
-                        <H1>
-                          <span className="username">{`${user.firstname} ${user.lastname}`}</span>
-                          {user.isPremium && (
-                            <>
-                              {' '}
-                              <ProBadge />
-                            </>
-                          )}
-                        </H1>
-                        <p>
-                          {user.organization && `${user.organization}, `}
-                          {user.email}
-                        </p>
-                        {user.isPremium && (
-                          <div className="manage-user-links">
+                  {!isLoading && (
+                    <>
+                      <div className="account">
+                        <div className="account__box account__box--flex">
+                          <div className="account__avatar">
+                            <img src="./assets/images/logo.svg" alt="" />
+                          </div>
+                          <div className="account__info">
+                            <H1>
+                              <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                              {user.isPremium && (
+                                <>
+                                  {' '}
+                                  <ProBadge />
+                                </>
+                              )}
+                            </H1>
+                            <p>
+                              {user.organization && `${user.organization}, `}
+                              {user.email}
+                            </p>
+                            {user.isPremium && (
+                              <div className="manage-user-links">
+                                <Button
+                                  label={intl.formatMessage(
+                                    messages.accountEditButton,
+                                  )}
+                                  className="franz-form__button--inverted"
+                                  onClick={openEditAccount}
+                                />
+                              </div>
+                            )}
+                          </div>
+                          {!user.isPremium && (
                             <Button
-                              label={intl.formatMessage(messages.accountEditButton)}
+                              label={intl.formatMessage(
+                                messages.accountEditButton,
+                              )}
                               className="franz-form__button--inverted"
                               onClick={openEditAccount}
                             />
-                          </div>
-                        )}
-                      </div>
-                      {!user.isPremium && (
-                        <Button
-                          label={intl.formatMessage(messages.accountEditButton)}
-                          className="franz-form__button--inverted"
-                          onClick={openEditAccount}
-                        />
-                      )}
-                    </div>
-                  </div>
-                  {user.isPremium && user.isSubscriptionOwner && (
-                    <div className="account">
-                      <div className="account__box">
-                        <H2>
-                          {intl.formatMessage(messages.yourLicense)}
-                        </H2>
-                        <p>
-                          Franz
-                          {' '}
-                          {isPremiumOverrideUser ? 'Premium' : planName}
-                          {user.team.isTrial && (
-                            <>
-                              {' – '}
-                              {intl.formatMessage(messages.trial)}
-                            </>
                           )}
-                        </p>
-                        {user.team.isTrial && (
-                          <>
-                            <br />
-                            <p>
-                              {intl.formatMessage(messages.trialEndsIn, {
-                                duration: moment.duration(moment().diff(user.team.trialEnd)).humanize(),
-                              })}
-                            </p>
+                        </div>
+                      </div>
+                      {user.isPremium && user.isSubscriptionOwner && (
+                        <div className="account">
+                          <div className="account__box">
+                            <H2>{intl.formatMessage(messages.yourLicense)}</H2>
                             <p>
-                              {intl.formatMessage(messages.trialUpdateBillingInformation, {
-                                license: planName,
-                              })}
+                              Franz
+                              {' '}
+                              {isPremiumOverrideUser ? 'Premium' : planName}
+                              {user.team.isTrial && (
+                                <>
+                                  {' – '}
+                                  {intl.formatMessage(messages.trial)}
+                                </>
+                              )}
                             </p>
-                          </>
-                        )}
-                        {!isProUser && (
-                          <div className="manage-user-links">
-                            <Button
-                              label={intl.formatMessage(messages.upgradeAccountToPro)}
-                              className="franz-form__button--primary"
-                              onClick={upgradeToPro}
+                            {user.team.isTrial && (
+                              <>
+                                <br />
+                                <p>
+                                  {intl.formatMessage(messages.trialEndsIn, {
+                                    duration: moment
+                                      .duration(
+                                        moment().diff(user.team.trialEnd),
+                                      )
+                                      .humanize(),
+                                  })}
+                                </p>
+                                <p>
+                                  {intl.formatMessage(
+                                    messages.trialUpdateBillingInformation,
+                                    {
+                                      license: planName,
+                                    },
+                                  )}
+                                </p>
+                              </>
+                            )}
+                            {!isProUser && (
+                              <div className="manage-user-links">
+                                <Button
+                                  label={intl.formatMessage(
+                                    messages.upgradeAccountToPro,
+                                  )}
+                                  className="franz-form__button--primary"
+                                  onClick={upgradeToPro}
+                                />
+                              </div>
+                            )}
+                            <div className="manage-user-links">
+                              <Button
+                                label={intl.formatMessage(
+                                  messages.manageSubscriptionButtonLabel,
+                                )}
+                                className="franz-form__button--inverted"
+                                onClick={openBilling}
+                              />
+                              <Button
+                                label={intl.formatMessage(
+                                  messages.invoicesButton,
+                                )}
+                                className="franz-form__button--inverted"
+                                onClick={openInvoices}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                      {!user.isPremium && (
+                        <div className="account franz-form">
+                          <div className="account__box">
+                            <SubscriptionForm
+                              onCloseWindow={onCloseSubscriptionWindow}
                             />
                           </div>
-                        )}
-                        <div className="manage-user-links">
-                          <Button
-                            label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
-                            className="franz-form__button--inverted"
-                            onClick={openBilling}
-                          />
+                        </div>
+                      )}
+                    </>
+                  )}
+
+                  <div className="account franz-form">
+                    <div className="account__box">
+                      <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2>
+                      {!isDeleteAccountSuccessful && (
+                        <div className="account__subscription">
+                          <p>{intl.formatMessage(messages.deleteInfo)}</p>
                           <Button
-                            label={intl.formatMessage(messages.invoicesButton)}
-                            className="franz-form__button--inverted"
-                            onClick={openInvoices}
+                            label={intl.formatMessage(messages.deleteAccount)}
+                            buttonType="danger"
+                            onClick={() => deleteAccount()}
+                            loaded={!isLoadingDeleteAccount}
                           />
                         </div>
-                      </div>
-                    </div>
-                  )}
-                  {!user.isPremium && (
-                    <div className="account franz-form">
-                      <div className="account__box">
-                        <SubscriptionForm
-                          onCloseWindow={onCloseSubscriptionWindow}
-                        />
-                      </div>
+                      )}
+                      {isDeleteAccountSuccessful && (
+                        <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
+                      )}
                     </div>
-                  )}
+                  </div>
                 </>
               )}
-
-              <div className="account franz-form">
-                <div className="account__box">
-                  <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2>
-                  {!isDeleteAccountSuccessful && (
-                  <div className="account__subscription">
-                    <p>{intl.formatMessage(messages.deleteInfo)}</p>
-                    <Button
-                      label={intl.formatMessage(messages.deleteAccount)}
-                      buttonType="danger"
-                      onClick={() => deleteAccount()}
-                      loaded={!isLoadingDeleteAccount}
-                    />
-                  </div>
-                  )}
-                  {isDeleteAccountSuccessful && (
-                  <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
-                  )}
-                </div>
-              </div>
             </>
           )}
         </div>
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 192cfde7a..eb3249fa0 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -119,6 +119,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
           to="/settings/services"
           className="settings-navigation__link"
           activeClassName="is-active"
+          disabled={!isLoggedIn}
         >
           {intl.formatMessage(messages.yourServices)}
           {' '}
@@ -134,6 +135,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
             to="/settings/workspaces"
             className="settings-navigation__link"
             activeClassName="is-active"
+            disabled={!isLoggedIn}
           >
             {intl.formatMessage(messages.yourWorkspaces)}
             {' '}
@@ -148,6 +150,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
           to="/settings/user"
           className="settings-navigation__link"
           activeClassName="is-active"
+          disabled={!isLoggedIn}
         >
           {intl.formatMessage(messages.account)}
         </Link>
@@ -155,6 +158,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
           to="/settings/team"
           className="settings-navigation__link"
           activeClassName="is-active"
+          disabled={!isLoggedIn}
         >
           {intl.formatMessage(messages.team)}
           {!user.data.isPremium && (
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 877cbc588..d08e6cbc2 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -153,6 +153,8 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
     const communityRecipes = recipes.filter(r => !r.isDevRecipe);
     const devRecipes = recipes.filter(r => r.isDevRecipe);
 
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -265,7 +267,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                     <RecipeItem
                       key={recipe.id}
                       recipe={recipe}
-                      onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                      onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: recipe.id })}
                     />
                   ))}
                 </div>
@@ -278,7 +280,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                       <RecipeItem
                         key={recipe.id}
                         recipe={recipe}
-                        onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                        onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: recipe.id })}
                       />
                     ))}
                   </div>
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 3d0213f81..74f5924ea 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -50,7 +50,7 @@ const messages = defineMessages({
   },
   lockedPassword: {
     id: 'settings.app.lockedPassword',
-    defaultMessage: '!!!Ferdi Lock Password',
+    defaultMessage: '!!!Password',
   },
   lockedPasswordInfo: {
     id: 'settings.app.lockedPasswordInfo',
@@ -58,7 +58,7 @@ const messages = defineMessages({
   },
   lockInfo: {
     id: 'settings.app.lockInfo',
-    defaultMessage: '!!!Ferdi password lock allows you to keep your messages protected.\nUsing Ferdi password lock, you will be prompted to enter your password everytime you start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut CMD/CTRL+Shift+L.',
+    defaultMessage: '!!!Password Lock allows you to keep your messages protected.\nUsing Password Lock, you will be prompted to enter your password everytime you start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut CMD/CTRL+Shift+L.',
   },
   scheduledDNDTimeInfo: {
     id: 'settings.app.scheduledDNDTimeInfo',