6 files changed, 515 insertions, 93 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index b4ff072ab..83dc34a52 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -69,7 +69,7 @@ const messages = defineMessages({
   },
   deleteInfo: {
     id: 'settings.account.deleteInfo',
-    defaultMessage: '!!!If you don\'t need your Franz 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',
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 4696b82eb..192cfde7a 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -3,10 +3,13 @@ import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 import { inject, observer } from 'mobx-react';
 import { ProBadge } from '@meetfranz/ui';
+import { RouterStore } from 'mobx-react-router';
 
+import { LOCAL_SERVER, LIVE_API } from '../../../config';
 import Link from '../../ui/Link';
 import { workspaceStore } from '../../../features/workspaces';
 import UIStore from '../../../stores/UIStore';
+import SettingsStore from '../../../stores/SettingsStore';
 import UserStore from '../../../stores/UserStore';
 import { serviceLimitStore } from '../../../features/serviceLimit';
 
@@ -35,9 +38,9 @@ const messages = defineMessages({
     id: 'settings.navigation.settings',
     defaultMessage: '!!!Settings',
   },
-  inviteFriends: {
-    id: 'settings.navigation.inviteFriends',
-    defaultMessage: '!!!Invite Friends',
+  supportFerdi: {
+    id: 'settings.navigation.supportFerdi',
+    defaultMessage: '!!!Support Ferdi',
   },
   logout: {
     id: 'settings.navigation.logout',
@@ -45,11 +48,18 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('stores') @observer class SettingsNavigation extends Component {
+export default @inject('stores', 'actions') @observer class SettingsNavigation extends Component {
   static propTypes = {
     stores: PropTypes.shape({
       ui: PropTypes.instanceOf(UIStore).isRequired,
       user: PropTypes.instanceOf(UserStore).isRequired,
+      settings: PropTypes.instanceOf(SettingsStore).isRequired,
+      router: PropTypes.instanceOf(RouterStore).isRequired,
+    }).isRequired,
+    actions: PropTypes.shape({
+      settings: PropTypes.shape({
+        update: PropTypes.func.isRequired,
+      }).isRequired,
     }).isRequired,
     serviceCount: PropTypes.number.isRequired,
     workspaceCount: PropTypes.number.isRequired,
@@ -59,11 +69,42 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
     intl: intlShape,
   };
 
+  handleLoginLogout() {
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
+    const isUsingWithoutAccount = this.props.stores.settings.app.server === LOCAL_SERVER;
+
+    if (isLoggedIn) {
+      // Remove current auth token
+      localStorage.removeItem('authToken');
+
+      if (isUsingWithoutAccount) {
+        // Reset server back to Ferdi API
+        this.props.actions.settings.update({
+          type: 'app',
+          data: {
+            server: LIVE_API,
+          },
+        });
+      }
+      this.props.stores.user.isLoggingOut = true;
+    }
+
+    this.props.stores.router.push(isLoggedIn ? '/auth/logout' : '/auth/welcome');
+
+    if (isLoggedIn) {
+      // Reload Ferdi, otherwise many settings won't sync correctly with the server
+      // after logging into another account
+      window.location.reload();
+    }
+  }
+
   render() {
     const { serviceCount, workspaceCount, stores } = this.props;
     const { isDarkThemeActive } = stores.ui;
     const { router, user } = stores;
     const { intl } = this.context;
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
+    const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER;
 
     return (
       <div className="settings-navigation">
@@ -128,19 +169,21 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {intl.formatMessage(messages.settings)}
         </Link>
         <Link
-          to="/settings/invite"
+          to="/settings/support"
           className="settings-navigation__link"
           activeClassName="is-active"
         >
-          {intl.formatMessage(messages.inviteFriends)}
+          {intl.formatMessage(messages.supportFerdi)}
         </Link>
         <span className="settings-navigation__expander" />
-        <Link
-          to="/auth/logout"
+        <button
+          type="button"
+          to={isLoggedIn ? '/auth/logout' : '/auth/welcome'}
           className="settings-navigation__link"
+          onClick={this.handleLoginLogout.bind(this)}
         >
-          {intl.formatMessage(messages.logout)}
-        </Link>
+          { isLoggedIn && !isUsingWithoutAccount ? intl.formatMessage(messages.logout) : 'Login'}
+        </button>
       </div>
     );
   }
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 5cde0db8e..fa34ac60b 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -29,6 +29,10 @@ const messages = defineMessages({
     id: 'settings.service.form.deleteButton',
     defaultMessage: '!!!Delete Service',
   },
+  openDarkmodeCss: {
+    id: 'settings.service.form.openDarkmodeCss',
+    defaultMessage: '!!!Open darkmode.css',
+  },
   availableServices: {
     id: 'settings.service.form.availableServices',
     defaultMessage: '!!!Available services',
@@ -63,7 +67,7 @@ const messages = defineMessages({
   },
   customUrlPremiumInfo: {
     id: 'settings.service.form.customUrlPremiumInfo',
-    defaultMessage: '!!!To add self hosted services, you need a Franz Premium Supporter Account.',
+    defaultMessage: '!!!To add self hosted services, you need a Ferdi Premium Supporter Account.',
   },
   customUrlUpgradeAccount: {
     id: 'settings.service.form.customUrlUpgradeAccount',
@@ -103,11 +107,11 @@ const messages = defineMessages({
   },
   proxyRestartInfo: {
     id: 'settings.service.form.proxy.restartInfo',
-    defaultMessage: '!!!Please restart Franz after changing proxy Settings.',
+    defaultMessage: '!!!Please restart Ferdi after changing proxy Settings.',
   },
   proxyInfo: {
     id: 'settings.service.form.proxy.info',
-    defaultMessage: '!!!Proxy settings will not be synchronized with the Franz servers.',
+    defaultMessage: '!!!Proxy settings will not be synchronized with the Ferdi servers.',
   },
 });
 
@@ -127,6 +131,8 @@ export default @observer class EditServiceForm extends Component {
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
+    openDarkmodeCss: PropTypes.func.isRequired,
+    isOpeningDarkModeCss: PropTypes.bool.isRequired,
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
@@ -155,7 +161,7 @@ export default @observer class EditServiceForm extends Component {
         const values = form.values();
         let isValid = true;
 
-        const files = form.$('customIcon').files;
+        const { files } = form.$('customIcon');
         if (files) {
           values.iconFile = files[0];
         }
@@ -193,6 +199,8 @@ export default @observer class EditServiceForm extends Component {
       isSaving,
       isDeleting,
       onDelete,
+      openDarkmodeCss,
+      isOpeningDarkModeCss,
       isProxyFeatureEnabled,
       isServiceProxyIncludedInCurrentPlan,
       isSpellcheckerIncludedInCurrentPlan,
@@ -218,6 +226,23 @@ export default @observer class EditServiceForm extends Component {
       />
     );
 
+    const openDarkmodeCssButton = isOpeningDarkModeCss ? (
+      <Button
+        label={intl.formatMessage(messages.openDarkmodeCss)}
+        loaded={false}
+        buttonType="secondary"
+        className="settings__open-dark-mode-button"
+        disabled
+      />
+    ) : (
+      <Button
+        buttonType="secondary"
+        label={intl.formatMessage(messages.openDarkmodeCss)}
+        className="settings__open-dark-mode-button"
+        onClick={openDarkmodeCss}
+      />
+    );
+
     let activeTabIndex = 0;
     if (recipe.hasHostedOption && service.team) {
       activeTabIndex = 1;
@@ -303,6 +328,18 @@ export default @observer class EditServiceForm extends Component {
                 )}
               </Tabs>
             )}
+
+            {recipe.message && (
+              <p
+                className="settings__message"
+                style={{
+                  marginTop: 0,
+                }}
+              >
+                <span className="mdi mdi-information" />
+                {recipe.message}
+              </p>
+            )}
             <div className="service-flex-grid">
               <div className="settings__options">
                 <div className="settings__settings-group">
@@ -329,9 +366,7 @@ export default @observer class EditServiceForm extends Component {
 
                 <div className="settings__settings-group">
                   <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
-                  {recipe.hasDarkMode && (
-                    <Toggle field={form.$('isDarkModeEnabled')} />
-                  )}
+                  <Toggle field={form.$('isDarkModeEnabled')} />
                   <Toggle field={form.$('isEnabled')} />
                 </div>
               </div>
@@ -394,18 +429,12 @@ export default @observer class EditServiceForm extends Component {
                 </div>
               </PremiumFeatureContainer>
             )}
-
-            {recipe.message && (
-              <p className="settings__message">
-                <span className="mdi mdi-information" />
-                {recipe.message}
-              </p>
-            )}
           </form>
         </div>
         <div className="settings__controls">
           {/* Delete Button */}
           {action === 'edit' && deleteButton}
+          {action === 'edit' && openDarkmodeCssButton}
 
           {/* Save Button */}
           {isSaving || isValidatingCustomUrl ? (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 0b69f7514..2be5c4ed7 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -9,9 +9,19 @@ import Button from '../../ui/Button';
 import Toggle from '../../ui/Toggle';
 import Select from '../../ui/Select';
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+import Input from '../../ui/Input';
 
 import { FRANZ_TRANSLATION } from '../../../config';
 
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
 const messages = defineMessages({
   headline: {
     id: 'settings.app.headline',
@@ -21,6 +31,42 @@ const messages = defineMessages({
     id: 'settings.app.headlineGeneral',
     defaultMessage: '!!!General',
   },
+  hibernateInfo: {
+    id: 'settings.app.hibernateInfo',
+    defaultMessage: '!!!By default, Ferdi will keep all your services open and loaded in the background so they are ready when you want to use them. Service Hibernation will unload your services after a specified amount. This is useful to save RAM or keeping services from slowing down your computer.',
+  },
+  serverInfo: {
+    id: 'settings.app.serverInfo',
+    defaultMessage: '!!!We advice you to logout after changing your server as your settings might not be saved otherwise.',
+  },
+  serverMoneyInfo: {
+    id: 'settings.app.serverMoneyInfo',
+    defaultMessage: '!!!You are using the official Franz Server for Ferdi.\nWe know that Ferdi allows you to use all its features for free but you are still using Franz\'s server resources - which Franz\'s creator has to pay for.\nPlease still consider [Link 1]paying for a Franz account[/Link] or [Link 2]using a self-hosted ferdi-server[/Link] (if you have the knowledge and resources to do so). \nBy using Ferdi, you still profit greatly from Franz\'s recipe store, server resources and its development.',
+  },
+  todoServerInfo: {
+    id: 'settings.app.todoServerInfo',
+    defaultMessage: '!!!This server will be used for the "Franz Todo" feature. (default: https://app.franztodos.com)',
+  },
+  lockedPassword: {
+    id: 'settings.app.lockedPassword',
+    defaultMessage: '!!!Ferdi Lock Password',
+  },
+  lockedPasswordInfo: {
+    id: 'settings.app.lockedPasswordInfo',
+    defaultMessage: '!!!Please make sure to set a password you\'ll remember.\nIf you loose this password, you will have to reinstall Ferdi.',
+  },
+  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.',
+  },
+  scheduledDNDTimeInfo: {
+    id: 'settings.app.scheduledDNDTimeInfo',
+    defaultMessage: '!!!Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.',
+  },
+  scheduledDNDInfo: {
+    id: 'settings.app.scheduledDNDInfo',
+    defaultMessage: '!!!Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdi.',
+  },
   headlineLanguage: {
     id: 'settings.app.headlineLanguage',
     defaultMessage: '!!!Language',
@@ -33,13 +79,21 @@ const messages = defineMessages({
     id: 'settings.app.headlineAppearance',
     defaultMessage: '!!!Appearance',
   },
+  universalDarkModeInfo: {
+    id: 'settings.app.universalDarkModeInfo',
+    defaultMessage: '!!!Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.',
+  },
+  accentColorInfo: {
+    id: 'settings.app.accentColorInfo',
+    defaultMessage: '!!!Write your accent color in a CSS-compatible format. (Default: #7367f0)',
+  },
   headlineAdvanced: {
     id: 'settings.app.headlineAdvanced',
     defaultMessage: '!!!Advanced',
   },
   translationHelp: {
     id: 'settings.app.translationHelp',
-    defaultMessage: '!!!Help us to translate Franz into your language.',
+    defaultMessage: '!!!Help us to translate Ferdi into your language.',
   },
   subheadlineCache: {
     id: 'settings.app.subheadlineCache',
@@ -47,7 +101,7 @@ const messages = defineMessages({
   },
   cacheInfo: {
     id: 'settings.app.cacheInfo',
-    defaultMessage: '!!!Franz cache is currently using {size} of disk space.',
+    defaultMessage: '!!!Ferdi cache is currently using {size} of disk space.',
   },
   buttonClearAllCache: {
     id: 'settings.app.buttonClearAllCache',
@@ -71,7 +125,7 @@ const messages = defineMessages({
   },
   updateStatusUpToDate: {
     id: 'settings.app.updateStatusUpToDate',
-    defaultMessage: '!!!You are using the latest version of Franz',
+    defaultMessage: '!!!You are using the latest version of Ferdi',
   },
   currentVersion: {
     id: 'settings.app.currentVersion',
@@ -103,6 +157,11 @@ export default @observer class EditSettingsForm extends Component {
     isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
     isTodosEnabled: PropTypes.bool.isRequired,
     isWorkspaceEnabled: PropTypes.bool.isRequired,
+    server: PropTypes.string.isRequired,
+    noUpdates: PropTypes.bool.isRequired,
+    hibernationEnabled: PropTypes.bool.isRequired,
+    isDarkmodeEnabled: PropTypes.bool.isRequired,
+    openProcessManager: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -135,6 +194,11 @@ export default @observer class EditSettingsForm extends Component {
       isSpellcheckerIncludedInCurrentPlan,
       isTodosEnabled,
       isWorkspaceEnabled,
+      server,
+      noUpdates,
+      hibernationEnabled,
+      isDarkmodeEnabled,
+      openProcessManager,
     } = this.props;
     const { intl } = this.context;
 
@@ -147,6 +211,13 @@ export default @observer class EditSettingsForm extends Component {
       updateButtonLabelMessage = messages.buttonSearchForUpdate;
     }
 
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
+
+    const {
+      lockingFeatureEnabled,
+      scheduledDNDEnabled,
+    } = window.ferdi.stores.settings.all.app;
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -163,21 +234,177 @@ export default @observer class EditSettingsForm extends Component {
             <Toggle field={form.$('autoLaunchOnStart')} />
             <Toggle field={form.$('runInBackground')} />
             <Toggle field={form.$('enableSystemTray')} />
+            <Toggle field={form.$('privateNotifications')} />
+            <Toggle field={form.$('showServiceNavigationBar')} />
+            <Toggle field={form.$('hibernate')} />
+            {hibernationEnabled && (
+              <Select field={form.$('hibernationStrategy')} />
+            )}
+            <p
+              className="settings__message"
+              style={{
+                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+              }}
+            >
+              <span>
+                { intl.formatMessage(messages.hibernateInfo) }
+              </span>
+            </p>
             {process.platform === 'win32' && (
               <Toggle field={form.$('minimizeToSystemTray')} />
             )}
+            <Input
+              placeholder="Server"
+              onChange={e => this.submit(e)}
+              field={form.$('server')}
+              autoFocus
+            />
+            {isLoggedIn && (
+              <p>{ intl.formatMessage(messages.serverInfo) }</p>
+            )}
+            {server === 'https://api.franzinfra.com' && (
+              <p
+                className="settings__message"
+                style={{
+                  borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                }}
+              >
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html:
+                  // Needed to make links work
+                  escapeHtml(
+                    intl.formatMessage(messages.serverMoneyInfo),
+                  ).replace('[Link 1]', '<a href="https://www.meetfranz.com/pricing" target="_blank">')
+                    .replace('[Link 2]', '<a href="https://github.com/getferdi/server" target="_blank">')
+                    .replace(/\[\/Link]/g, '</a>'),
+                  }}
+                  style={{
+                    whiteSpace: 'pre-wrap',
+                  }}
+                />
+              </p>
+            )}
             {isWorkspaceEnabled && (
               <Toggle field={form.$('keepAllWorkspacesLoaded')} />
             )}
             {isTodosEnabled && (
-              <Toggle field={form.$('enableTodos')} />
+              <>
+                <Toggle field={form.$('enableTodos')} />
+                <Input
+                  placeholder="Todo Server"
+                  onChange={e => this.submit(e)}
+                  field={form.$('todoServer')}
+                />
+                <p>{ intl.formatMessage(messages.todoServerInfo) }</p>
+              </>
             )}
 
+            <Toggle field={form.$('lockingFeatureEnabled')} />
+            {lockingFeatureEnabled && (
+              <>
+                <Input
+                  placeholder={intl.formatMessage(messages.lockedPassword)}
+                  onChange={e => this.submit(e)}
+                  field={form.$('lockedPassword')}
+                  type="password"
+                  scorePassword
+                  showPasswordToggle
+                />
+                <p>
+                  { intl.formatMessage(messages.lockedPasswordInfo) }
+                </p>
+              </>
+            )}
+            <p
+              className="settings__message"
+              style={{
+                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+              }}
+            >
+              <span>
+                { intl.formatMessage(messages.lockInfo) }
+              </span>
+            </p>
+
+
+            <Toggle field={form.$('scheduledDNDEnabled')} />
+            {scheduledDNDEnabled && (
+              <>
+                <div style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+                >
+                  <div style={{
+                    padding: '0 1rem',
+                    width: '100%',
+                  }}
+                  >
+                    <Input
+                      placeholder="17:00"
+                      onChange={e => this.submit(e)}
+                      field={form.$('scheduledDNDStart')}
+                      type="time"
+                    />
+                  </div>
+                  <div style={{
+                    padding: '0 1rem',
+                    width: '100%',
+                  }}
+                  >
+                    <Input
+                      placeholder="09:00"
+                      onChange={e => this.submit(e)}
+                      field={form.$('scheduledDNDEnd')}
+                      type="time"
+                    />
+                  </div>
+                </div>
+                <p>
+                  { intl.formatMessage(messages.scheduledDNDTimeInfo) }
+                </p>
+              </>
+            )}
+            <p
+              className="settings__message"
+              style={{
+                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+              }}
+            >
+              <span>
+                { intl.formatMessage(messages.scheduledDNDInfo) }
+              </span>
+            </p>
+
+
             {/* Appearance */}
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />
             <Toggle field={form.$('showMessageBadgeWhenMuted')} />
             <Toggle field={form.$('darkMode')} />
+            {isDarkmodeEnabled && (
+              <>
+                <Toggle field={form.$('universalDarkMode')} />
+                <p
+                  className="settings__message"
+                  style={{
+                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                  }}
+                >
+                  <span>
+                    { intl.formatMessage(messages.universalDarkModeInfo) }
+                  </span>
+                </p>
+              </>
+            )}
+
+            <Input
+              placeholder="Accent Color"
+              onChange={e => this.submit(e)}
+              field={form.$('accentColor')}
+            />
+            <p>{intl.formatMessage(messages.accentColorInfo)}</p>
 
             {/* Language */}
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
@@ -227,6 +454,16 @@ export default @observer class EditSettingsForm extends Component {
                   loaded={!isClearingAllCache}
                 />
               </p>
+              <div style={{
+                marginTop: 20,
+              }}
+              >
+                <Button
+                  buttonType="secondary"
+                  label="Open Process Manager"
+                  onClick={openProcessManager}
+                />
+              </div>
             </div>
 
             {/* Updates */}
@@ -241,7 +478,7 @@ export default @observer class EditSettingsForm extends Component {
                 buttonType="secondary"
                 label={intl.formatMessage(updateButtonLabelMessage)}
                 onClick={checkForUpdates}
-                disabled={isCheckingForUpdates || isUpdateAvailable}
+                disabled={noUpdates || isCheckingForUpdates || isUpdateAvailable}
                 loaded={!isCheckingForUpdates || !isUpdateAvailable}
               />
             )}
@@ -250,6 +487,7 @@ export default @observer class EditSettingsForm extends Component {
             )}
             <br />
             <Toggle field={form.$('beta')} />
+            <Toggle field={form.$('noUpdates')} />
             {intl.formatMessage(messages.currentVersion)}
             {' '}
             {remote.app.getVersion()}
@@ -257,6 +495,18 @@ export default @observer class EditSettingsForm extends Component {
               <span className="mdi mdi-information" />
               {intl.formatMessage(messages.languageDisclaimer)}
             </p>
+            <p className="settings__message">
+              <span className="mdi mdi-github-face" />
+              <span>
+                Ferdi is based on
+                {' '}
+                <a href="https://github.com/meetfranz/franz" target="_blank">Franz</a>
+                , a project published
+                under the
+                {' '}
+                <a href="https://github.com/meetfranz/franz/blob/master/LICENSE" target="_blank">Apache-2.0 License</a>
+              </span>
+            </p>
           </form>
         </div>
       </div>
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
new file mode 100644
index 000000000..57920a4a2
--- /dev/null
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.supportFerdi.headline',
+    defaultMessage: '!!!Support Ferdi',
+  },
+  title: {
+    id: 'settings.supportFerdi.title',
+    defaultMessage: '!!!Do you like Ferdi? Spread the love!',
+  },
+  github: {
+    id: 'settings.supportFerdi.github',
+    defaultMessage: '!!!Star on GitHub',
+  },
+  share: {
+    id: 'settings.supportFerdi.share',
+    defaultMessage: '!!!Tell your Friends',
+  },
+  openCollective: {
+    id: 'settings.supportFerdi.openCollective',
+    defaultMessage: '!!!Support our Open Collective',
+  },
+});
+
+class SupportFerdiDashboard extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    openLink: PropTypes.func.isRequired,
+  };
+
+  render() {
+    const { openLink } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          <h1>{intl.formatMessage(messages.title)}</h1>
+          <Button
+            label={intl.formatMessage(messages.github)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://github.com/getferdi/ferdi')}
+          />
+          <Button
+            label={intl.formatMessage(messages.share)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://twitter.com/intent/tweet?text=Ferdi%3A%20A%20messaging%20browser%20that%20allows%20you%20to%20combine%20your%20favourite%20messaging%20services%20into%20one%20application.%0A%0ACheck%20out%20Ferdi%20at%20https%3A//getferdi.com')}
+          />
+          <Button
+            label={intl.formatMessage(messages.openCollective)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://opencollective.com/getferdi')}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SupportFerdiDashboard;
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 366b0113a..7e6d93997 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -20,7 +20,7 @@ const messages = defineMessages({
   },
   contentHeadline: {
     id: 'settings.team.contentHeadline',
-    defaultMessage: '!!!Franz for Teams',
+    defaultMessage: '!!!Ferdi for Teams',
   },
   intro: {
     id: 'settings.team.intro',
@@ -28,7 +28,7 @@ const messages = defineMessages({
   },
   copy: {
     id: 'settings.team.copy',
-    defaultMessage: '!!!Franz for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!',
+    defaultMessage: '!!!Ferdi for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!',
   },
   manageButton: {
     id: 'settings.team.manageAction',
@@ -38,6 +38,14 @@ const messages = defineMessages({
     id: 'settings.team.upgradeAction',
     defaultMessage: '!!!Upgrade your Account',
   },
+  teamsUnavailable: {
+    id: 'settings.team.teamsUnavailable',
+    defaultMessage: '!!!Teams are unavailable',
+  },
+  teamsUnavailableInfo: {
+    id: 'settings.team.teamsUnavailableInfo',
+    defaultMessage: '!!!Teams are currently only available when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.',
+  },
 });
 
 const styles = {
@@ -98,6 +106,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
     openTeamManagement: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired,
     isProUser: PropTypes.bool.isRequired,
+    server: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -112,9 +121,84 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
       openTeamManagement,
       isProUser,
       classes,
+      server,
     } = this.props;
     const { intl } = this.context;
 
+    if (server === 'https://api.franzinfra.com') {
+      return (
+        <div className="settings__main">
+          <div className="settings__header">
+            <span className="settings__header-item">
+              {intl.formatMessage(messages.headline)}
+            </span>
+          </div>
+          <div className="settings__body">
+            {isLoading && (
+              <Loader />
+            )}
+
+            {!isLoading && userInfoRequestFailed && (
+              <Infobox
+                icon="alert"
+                type="danger"
+                ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
+                ctaLoading={isLoading}
+                ctaOnClick={retryUserInfoRequest}
+              >
+                {intl.formatMessage(messages.userInfoRequestFailed)}
+              </Infobox>
+            )}
+
+            {!userInfoRequestFailed && (
+              <>
+                {!isLoading && (
+                  <>
+                    <>
+                      <h1 className={classnames({
+                        [classes.headline]: true,
+                        [classes.headlineWithSpacing]: isProUser,
+                      })}
+                      >
+                        {intl.formatMessage(messages.contentHeadline)}
+
+                      </h1>
+                      {!isProUser && (
+                        <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+                      )}
+                      <div className={classes.container}>
+                        <div className={classes.content}>
+                          <p>{intl.formatMessage(messages.intro)}</p>
+                          <p>{intl.formatMessage(messages.copy)}</p>
+                        </div>
+                        <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                      </div>
+                      <div className={classes.buttonContainer}>
+                        {!isProUser ? (
+                          <UpgradeButton
+                            className={classes.cta}
+                            gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                            requiresPro
+                            short
+                          />
+                        ) : (
+                          <Button
+                            label={intl.formatMessage(messages.manageButton)}
+                            onClick={openTeamManagement}
+                            className={classes.cta}
+                          />
+                        )}
+                      </div>
+                    </>
+                  </>
+                )}
+              </>
+            )}
+          </div>
+          <ReactTooltip place="right" type="dark" effect="solid" />
+        </div>
+      );
+    }
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -123,68 +207,11 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
           </span>
         </div>
         <div className="settings__body">
-          {isLoading && (
-            <Loader />
-          )}
-
-          {!isLoading && userInfoRequestFailed && (
-            <Infobox
-              icon="alert"
-              type="danger"
-              ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
-              ctaLoading={isLoading}
-              ctaOnClick={retryUserInfoRequest}
-            >
-              {intl.formatMessage(messages.userInfoRequestFailed)}
-            </Infobox>
-          )}
-
-          {!userInfoRequestFailed && (
-            <>
-              {!isLoading && (
-                <>
-                  <>
-                    <h1 className={classnames({
-                      [classes.headline]: true,
-                      [classes.headlineWithSpacing]: isProUser,
-                    })}
-                    >
-                      {intl.formatMessage(messages.contentHeadline)}
-
-                    </h1>
-                    {!isProUser && (
-                      <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
-                    )}
-                    <div className={classes.container}>
-                      <div className={classes.content}>
-                        <p>{intl.formatMessage(messages.intro)}</p>
-                        <p>{intl.formatMessage(messages.copy)}</p>
-                      </div>
-                      <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
-                    </div>
-                    <div className={classes.buttonContainer}>
-                      {!isProUser ? (
-                        <UpgradeButton
-                          className={classes.cta}
-                          gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
-                          requiresPro
-                          short
-                        />
-                      ) : (
-                        <Button
-                          label={intl.formatMessage(messages.manageButton)}
-                          onClick={openTeamManagement}
-                          className={classes.cta}
-                        />
-                      )}
-                    </div>
-                  </>
-                </>
-              )}
-            </>
-          )}
+          <h1 className={classes.headline}>
+            {intl.formatMessage(messages.teamsUnavailable)}
+          </h1>
+          {intl.formatMessage(messages.teamsUnavailableInfo)}
         </div>
-        <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
     );
   }