26 files changed, 431 insertions, 135 deletions

diff --git a/src/components/AppUpdateInfoBar.js b/src/components/AppUpdateInfoBar.js
index 4fb3a8b71..4108fdf12 100644
--- a/src/components/AppUpdateInfoBar.js
+++ b/src/components/AppUpdateInfoBar.js
@@ -8,7 +8,7 @@ import InfoBar from './ui/InfoBar';
 const messages = defineMessages({
   updateAvailable: {
     id: 'infobar.updateAvailable',
-    defaultMessage: '!!!A new update for Franz is available.',
+    defaultMessage: '!!!A new update for Ferdi is available.',
   },
   changelog: {
     id: 'infobar.buttonChangelog',
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 75a8cfc61..641b754ed 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -52,7 +52,7 @@ export default @observer class AuthLayout extends Component {
 
     return (
       <>
-        {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+        {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />}
         <div className="auth">
           {!isOnline && (
             <InfoBar
@@ -87,7 +87,7 @@ export default @observer class AuthLayout extends Component {
             })}
           </div>
           {/* </div> */}
-          <Link to="https://adlk.io" className="auth__adlk" target="_blank">
+          <Link to="https://github.com/kytwb/ferdi" className="auth__adlk" target="_blank">
             <img src="./assets/images/adlk.svg" alt="" />
           </Link>
         </div>
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 0d5feb274..3e34c3162 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -12,11 +12,11 @@ import Button from '../ui/Button';
 const messages = defineMessages({
   headline: {
     id: 'import.headline',
-    defaultMessage: '!!!Import your Franz 4 services',
+    defaultMessage: '!!!Import your Ferdi 4 services',
   },
   notSupportedHeadline: {
     id: 'import.notSupportedHeadline',
-    defaultMessage: '!!!Services not yet supported in Franz 5',
+    defaultMessage: '!!!Services not yet supported in Ferdi 5',
   },
   submitButtonLabel: {
     id: 'import.submit.label',
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
new file mode 100644
index 000000000..045621d0a
--- /dev/null
+++ b/src/components/auth/Locked.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Form from '../../lib/Form';
+import { required } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+import Infobox from '../ui/Infobox';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+const messages = defineMessages({
+  headline: {
+    id: 'locked.headline',
+    defaultMessage: '!!!Locked',
+  },
+  info: {
+    id: 'locked.info',
+    defaultMessage: '!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.',
+  },
+  passwordLabel: {
+    id: 'locked.password.label',
+    defaultMessage: '!!!Password',
+  },
+  submitButtonLabel: {
+    id: 'locked.submit.label',
+    defaultMessage: '!!!Unlock',
+  },
+  invalidCredentials: {
+    id: 'locked.invalidCredentials',
+    defaultMessage: '!!!Password invalid',
+  },
+});
+
+export default @observer class Locked extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    error: globalErrorPropType.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      password: {
+        label: this.context.intl.formatMessage(messages.passwordLabel),
+        value: '',
+        validators: [required],
+        type: 'password',
+      },
+    },
+  }, this.context.intl);
+
+  submit(e) {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        this.props.onSubmit(form.values());
+      },
+      onError: () => { },
+    });
+  }
+
+  render() {
+    const { form } = this;
+    const { intl } = this.context;
+    const {
+      isSubmitting,
+      error,
+    } = this.props;
+
+    return (
+      <div className="auth__container">
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <img
+            src="./assets/images/logo.svg"
+            className="auth__logo"
+            alt=""
+          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+          <Infobox type="warning">
+            {intl.formatMessage(messages.info)}
+          </Infobox>
+          <Input
+            field={form.$('password')}
+            showPasswordToggle
+          />
+          {error.code === 'invalid-credentials' && (
+            <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+          )}
+          {isSubmitting ? (
+            <Button
+              className="auth__button is-loading"
+              buttonType="secondary"
+              label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
+              loaded={false}
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              className="auth__button"
+              label={intl.formatMessage(messages.submitButtonLabel)}
+            />
+          )}
+        </form>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 5d21f8b60..270dff30b 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -34,6 +34,14 @@ const messages = defineMessages({
     id: 'login.invalidCredentials',
     defaultMessage: '!!!Email or password not valid',
   },
+  customServerQuestion: {
+    id: 'login.customServerQuestion',
+    defaultMessage: '!!!Using a custom Ferdi server?',
+  },
+  customServerSuggestion: {
+    id: 'login.customServerSuggestion',
+    defaultMessage: '!!!Try importing your Franz account',
+  },
   tokenExpired: {
     id: 'login.tokenExpired',
     defaultMessage: '!!!Your session expired, please login again.',
@@ -137,7 +145,22 @@ export default @observer class Login extends Component {
             showPasswordToggle
           />
           {error.code === 'invalid-credentials' && (
-            <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+            <>
+              <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+              { window.ferdi.stores.settings.all.app.server !== 'https://api.franzinfra.com' && (
+                <p className="error-message center">
+                    {intl.formatMessage(messages.customServerQuestion)}
+                  {' '}
+                  <Link
+                    to={`${window.ferdi.stores.settings.all.app.server.replace('v1', '')}/import`}
+                    target="_blank"
+                    style={{ cursor: 'pointer', textDecoration: 'underline' }}
+                  >
+                    {intl.formatMessage(messages.customServerSuggestion)}
+                  </Link>
+                </p>
+              )}
+            </>
           )}
           {isSubmitting ? (
             <Button
@@ -156,6 +179,7 @@ export default @observer class Login extends Component {
           )}
         </form>
         <div className="auth__links">
+          <Link to="/settings/app">Change server</Link>
           <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
           <Link to={passwordRoute}>{intl.formatMessage(messages.passwordLink)}</Link>
         </div>
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index cbeaaa5d9..a77ad7742 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -42,7 +42,7 @@ const messages = defineMessages({
   },
   ctaSkip: {
     id: 'pricing.trial.cta.skip',
-    defaultMessage: '!!!Continue to Franz',
+    defaultMessage: '!!!Continue to Ferdi',
   },
   featuresHeadline: {
     id: 'pricing.trial.features.headline',
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 0499d764b..b36e71ce1 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -40,7 +40,7 @@ const messages = defineMessages({
   },
   legalInfo: {
     id: 'signup.legal.info',
-    defaultMessage: '!!!By creating a Franz account you accept the',
+    defaultMessage: '!!!By creating a Ferdi account you accept the',
   },
   terms: {
     id: 'signup.legal.terms',
@@ -117,6 +117,8 @@ export default @observer class Signup extends Component {
     const { intl } = this.context;
     const { isSubmitting, loginRoute, error } = this.props;
 
+    const termsBase = window.ferdi.stores.settings.all.app.server !== 'https://api.franzinfra.com' ? window.ferdi.stores.settings.all.app.server : 'https://meetfranz.com';
+
     return (
       <div className="auth__scroll-container">
         <div className="auth__container auth__container--signup">
@@ -163,7 +165,7 @@ export default @observer class Signup extends Component {
               {intl.formatMessage(messages.legalInfo)}
               <br />
               <Link
-                to="https://meetfranz.com/terms"
+                to={`${termsBase}/terms`}
                 target="_blank"
                 className="link"
               >
@@ -171,7 +173,7 @@ export default @observer class Signup extends Component {
               </Link>
               &nbsp;&amp;&nbsp;
               <Link
-                to="https://meetfranz.com/privacy"
+                to={`${termsBase}/privacy`}
                 target="_blank"
                 className="link"
               >
@@ -181,6 +183,7 @@ export default @observer class Signup extends Component {
             </p>
           </form>
           <div className="auth__links">
+            <Link to="/settings/app">Change server</Link>
             <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
           </div>
         </div>
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index f6d77f70f..ef917e336 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -41,7 +41,7 @@ export default @observer class Login extends Component {
           <img src="./assets/images/logo.svg" className="welcome__logo" alt="" />
           {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */}
           <div className="welcome__text">
-            <h1>Franz</h1>
+            <h1>Ferdi</h1>
           </div>
         </div>
         <div className="welcome__buttons">
@@ -51,6 +51,19 @@ export default @observer class Login extends Component {
           <Link to={loginRoute} className="button">
             {intl.formatMessage(messages.loginButton)}
           </Link>
+          <br />
+          <br />
+
+          <Link to="settings/app">
+            <span style={{
+              textAlign: 'center',
+              width: '100%',
+              cursor: 'pointer',
+            }}
+            >
+              Change server
+            </span>
+          </Link>
         </div>
         <div className="welcome__featured-services">
           {recipes.map(recipe => (
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 200777ae6..e82275b9f 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -6,7 +6,6 @@ import { TitleBar } from 'electron-react-titlebar';
 import injectSheet from 'react-jss';
 
 import InfoBar from '../ui/InfoBar';
-import { Component as DelayApp } from '../../features/delayApp';
 import { Component as BasicAuth } from '../../features/basicAuth';
 import { Component as ShareFranz } from '../../features/shareFranz';
 import ErrorBoundary from '../util/ErrorBoundary';
@@ -37,6 +36,10 @@ const messages = defineMessages({
     id: 'infobar.requiredRequestsFailed',
     defaultMessage: '!!!Could not load services and user information',
   },
+  authRequestFailed: {
+    id: 'infobar.authRequestFailed',
+    defaultMessage: '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.',
+  },
 });
 
 const styles = theme => ({
@@ -63,6 +66,7 @@ class AppLayout extends Component {
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     nextAppReleaseVersion: PropTypes.string,
+    authRequestFailed: PropTypes.bool.isRequired,
     removeNewsItem: PropTypes.func.isRequired,
     reloadServicesAfterUpdate: PropTypes.func.isRequired,
     installAppUpdate: PropTypes.func.isRequired,
@@ -70,7 +74,6 @@ class AppLayout extends Component {
     areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
-    isDelayAppScreenVisible: PropTypes.bool.isRequired,
     hasActivatedTrial: PropTypes.bool.isRequired,
   };
 
@@ -95,6 +98,7 @@ class AppLayout extends Component {
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
       nextAppReleaseVersion,
+      authRequestFailed,
       removeNewsItem,
       reloadServicesAfterUpdate,
       installAppUpdate,
@@ -102,7 +106,6 @@ class AppLayout extends Component {
       areRequiredRequestsSuccessful,
       retryRequiredRequests,
       areRequiredRequestsLoading,
-      isDelayAppScreenVisible,
       hasActivatedTrial,
     } = this.props;
 
@@ -111,7 +114,7 @@ class AppLayout extends Component {
     return (
       <ErrorBoundary>
         <div className="app">
-          {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+          {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />}
           <div className={`app__content ${classes.appContent}`}>
             {workspacesDrawer}
             {sidebar}
@@ -151,6 +154,18 @@ class AppLayout extends Component {
                 {intl.formatMessage(messages.requiredRequestsFailed)}
               </InfoBar>
               )}
+              {authRequestFailed && (
+                <InfoBar
+                  type="danger"
+                  ctaLabel="Try again"
+                  ctaLoading={areRequiredRequestsLoading}
+                  sticky
+                  onClick={retryRequiredRequests}
+                >
+                  <span className="mdi mdi-flash" />
+                  {intl.formatMessage(messages.authRequestFailed)}
+                </InfoBar>
+              )}
               {showServicesUpdatedInfoBar && (
                 <InfoBar
                   type="primary"
@@ -168,7 +183,6 @@ class AppLayout extends Component {
                   onInstallUpdate={installAppUpdate}
                 />
               )}
-              {isDelayAppScreenVisible && (<DelayApp />)}
               <BasicAuth />
               <ShareFranz />
               {services}
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 918298011..52de16508 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -2,13 +2,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import { defineMessages, intlShape } from 'react-intl';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router';
 
 import Tabbar from '../services/tabs/Tabbar';
 import { ctrlKey } from '../../environment';
-import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../../features/workspaces';
-import { gaEvent } from '../../lib/analytics';
-import { todosStore, GA_CATEGORY_TODOS } from '../../features/todos';
+import { workspaceStore } from '../../features/workspaces';
+import { todosStore } from '../../features/todos';
 import { todoActions } from '../../features/todos/actions';
 
 const messages = defineMessages({
@@ -44,9 +44,13 @@ const messages = defineMessages({
     id: 'sidebar.closeTodosDrawer',
     defaultMessage: '!!!Close Franz Todos',
   },
+  lockFerdi: {
+    id: 'sidebar.lockFerdi',
+    defaultMessage: '!!!Lock Ferdi',
+  },
 });
 
-export default @observer class Sidebar extends Component {
+export default @inject('stores', 'actions') @observer class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
@@ -87,6 +91,8 @@ export default @observer class Sidebar extends Component {
       isAppMuted,
       isWorkspaceDrawerOpen,
       toggleWorkspaceDrawer,
+      stores,
+      actions,
     } = this.props;
     const { intl } = this.context;
     const todosToggleMessage = (
@@ -96,6 +102,7 @@ export default @observer class Sidebar extends Component {
     const workspaceToggleMessage = (
       isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer
     );
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="sidebar">
@@ -104,53 +111,81 @@ export default @observer class Sidebar extends Component {
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
         />
-        {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (
-          <button
-            type="button"
-            onClick={() => {
-              todoActions.toggleTodosPanel();
-              this.updateToolTip();
-              gaEvent(GA_CATEGORY_TODOS, 'toggleDrawer', 'sidebar');
-            }}
-            className={`sidebar__button sidebar__button--todos  ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
-            data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
-          >
-            <i className="mdi mdi-check-all" />
-          </button>
-        ) : null}
-        {workspaceStore.isFeatureEnabled ? (
-          <button
-            type="button"
-            onClick={() => {
-              toggleWorkspaceDrawer();
-              this.updateToolTip();
-              gaEvent(GA_CATEGORY_WORKSPACES, 'toggleDrawer', 'sidebar');
-            }}
-            className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
-            data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
+        { isLoggedIn ? (
+          <>
+            { stores.settings.all.app.lockingFeatureEnabled ? (
+              <button
+                type="button"
+                className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
+                onClick={() => {
+                  actions.settings.update({
+                    type: 'app',
+                    data: {
+                      locked: true,
+                    },
+                  });
+                }}
+                data-tip={`${intl.formatMessage(messages.lockFerdi)} (${ctrlKey}+Shift+L)`}
+              >
+                <i className="mdi mdi-lock" />
+              </button>
+            ) : null}
+            {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (
+              <button
+                type="button"
+                onClick={() => {
+                  todoActions.toggleTodosPanel();
+                  this.updateToolTip();
+                  gaEvent(GA_CATEGORY_TODOS, 'toggleDrawer', 'sidebar');
+                }}
+                className={`sidebar__button sidebar__button--todos  ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
+                data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
+              >
+                <i className="mdi mdi-check-all" />
+              </button>
+            ) : null}
+            {workspaceStore.isFeatureEnabled ? (
+              <button
+                type="button"
+                onClick={() => {
+                  toggleWorkspaceDrawer();
+                  this.updateToolTip();
+                }}
+                className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
+                data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
+              >
+                <i className="mdi mdi-view-grid" />
+              </button>
+            ) : null}
+            <button
+              type="button"
+              onClick={() => {
+                toggleMuteApp();
+                this.updateToolTip();
+              }}
+              className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
+              data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
+            >
+              <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
+            </button>
+            <button
+              type="button"
+              onClick={() => openSettings({ path: 'recipes' })}
+              className="sidebar__button sidebar__button--new-service"
+              data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
+            >
+              <i className="mdi mdi-plus-box" />
+            </button>
+          </>
+        ) : (
+          <Link
+            to="/auth/welcome"
+            className="sidebar__button sidebar__button--new-service"
+            data-tip="Login"
           >
-            <i className="mdi mdi-view-grid" />
-          </button>
-        ) : null}
-        <button
-          type="button"
-          onClick={() => {
-            toggleMuteApp();
-            this.updateToolTip();
-          }}
-          className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
-          data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
-        >
-          <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
-        </button>
-        <button
-          type="button"
-          onClick={() => openSettings({ path: 'recipes' })}
-          className="sidebar__button sidebar__button--new-service"
-          data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
-        >
-          <i className="mdi mdi-plus-box" />
-        </button>
+            <i className="mdi mdi-login-variant" />
+          </Link>
+        )}
         <button
           type="button"
           onClick={() => openSettings({ path: 'app' })}
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index f65f51346..59d1c1dc3 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -10,7 +10,6 @@ import WebviewLoader from '../../ui/WebviewLoader';
 import WebviewCrashHandler from './WebviewCrashHandler';
 import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
-import ServiceRestricted from './ServiceRestricted';
 import ServiceWebview from './ServiceWebview';
 
 export default @observer class ServiceView extends Component {
@@ -22,7 +21,6 @@ export default @observer class ServiceView extends Component {
     edit: PropTypes.func.isRequired,
     enable: PropTypes.func.isRequired,
     isActive: PropTypes.bool,
-    upgrade: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -74,7 +72,6 @@ export default @observer class ServiceView extends Component {
       reload,
       edit,
       enable,
-      upgrade,
     } = this.props;
 
     const webviewClasses = classnames({
@@ -130,19 +127,11 @@ export default @observer class ServiceView extends Component {
           </Fragment>
         ) : (
           <>
-            {service.isServiceAccessRestricted ? (
-              <ServiceRestricted
-                name={service.recipe.name}
-                upgrade={upgrade}
-                type={service.restrictionType}
-              />
-            ) : (
-              <ServiceWebview
-                service={service}
-                setWebviewReference={setWebviewReference}
-                detachService={detachService}
-              />
-            )}
+            <ServiceWebview
+              service={service}
+              setWebviewReference={setWebviewReference}
+              detachService={detachService}
+            />
           </>
         )}
         {statusBar}
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 73c27bfb6..1afbaabc4 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -13,12 +13,20 @@ import Appear from '../../ui/effects/Appear';
 const messages = defineMessages({
   welcome: {
     id: 'services.welcome',
-    defaultMessage: '!!!Welcome to Franz',
+    defaultMessage: '!!!Welcome to Ferdi',
   },
   getStarted: {
     id: 'services.getStarted',
     defaultMessage: '!!!Get started',
   },
+  login: {
+    id: 'services.login',
+    defaultMessage: '!!!Please login to use Ferdi.',
+  },
+  serverInfo: {
+    id: 'services.serverInfo',
+    defaultMessage: '!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.',
+  },
 });
 
 
@@ -86,6 +94,7 @@ export default @observer @injectSheet(styles) class Services extends Component {
     } = this.state;
 
     const { intl } = this.context;
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="services">
@@ -104,14 +113,20 @@ export default @observer @injectSheet(styles) class Services extends Component {
             transitionName="slideUp"
           >
             <div className="services__no-service">
-              <img src="./assets/images/logo.svg" alt="" />
+              <img src="./assets/images/logo.svg" alt="Logo" style={{ maxHeight: '50vh' }} />
               <h1>{intl.formatMessage(messages.welcome)}</h1>
+              { !isLoggedIn && (
+                <>
+                  <p>{intl.formatMessage(messages.login)}</p>
+                  <p>{intl.formatMessage(messages.serverInfo)}</p>
+                </>
+              ) }
               <Appear
                 timeout={300}
                 transitionName="slideUp"
               >
-                <Link to="/settings/recipes" className="button">
-                  {intl.formatMessage(messages.getStarted)}
+                <Link to={isLoggedIn ? '/settings/services' : '/auth/welcome'} className="button">
+                  { isLoggedIn ? intl.formatMessage(messages.getStarted) : 'Login' }
                 </Link>
               </Appear>
             </div>
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index ac2594604..f588449f4 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..201819526 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -64,6 +64,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
     const { isDarkThemeActive } = stores.ui;
     const { router, user } = stores;
     const { intl } = this.context;
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="settings-navigation">
@@ -136,10 +137,10 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
         </Link>
         <span className="settings-navigation__expander" />
         <Link
-          to="/auth/logout"
+          to={isLoggedIn ? '/auth/logout' : '/auth/welcome'}
           className="settings-navigation__link"
         >
-          {intl.formatMessage(messages.logout)}
+          { isLoggedIn ? intl.formatMessage(messages.logout) : 'Login'}
         </Link>
       </div>
     );
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 5cde0db8e..5fe00cb8b 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -63,7 +63,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 +103,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.',
   },
 });
 
@@ -155,7 +155,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];
         }
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 0b69f7514..0152857a6 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -9,6 +9,7 @@ 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';
 
@@ -21,6 +22,22 @@ const messages = defineMessages({
     id: 'settings.app.headlineGeneral',
     defaultMessage: '!!!General',
   },
+  serverInfo: {
+    id: 'settings.app.serverInfo',
+    defaultMessage: '!!!We advice you to logout after changing your server as your settings might not be saved otherwise.',
+  },
+  todoServerInfo: {
+    id: 'settings.app.todoServerInfo',
+    defaultMessage: '!!!This server will be used for the "Franz Todo" feature. The default server will only work for premium users. (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.',
+  },
   headlineLanguage: {
     id: 'settings.app.headlineLanguage',
     defaultMessage: '!!!Language',
@@ -39,7 +56,7 @@ const messages = defineMessages({
   },
   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 +64,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 +88,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 +120,7 @@ export default @observer class EditSettingsForm extends Component {
     isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
     isTodosEnabled: PropTypes.bool.isRequired,
     isWorkspaceEnabled: PropTypes.bool.isRequired,
+    server: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -135,6 +153,7 @@ export default @observer class EditSettingsForm extends Component {
       isSpellcheckerIncludedInCurrentPlan,
       isTodosEnabled,
       isWorkspaceEnabled,
+      server,
     } = this.props;
     const { intl } = this.context;
 
@@ -147,6 +166,9 @@ export default @observer class EditSettingsForm extends Component {
       updateButtonLabelMessage = messages.buttonSearchForUpdate;
     }
 
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
+    const lockingFeatureEnabled = window.ferdi.stores.settings.all.app.lockingFeatureEnabled;
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -163,16 +185,92 @@ export default @observer class EditSettingsForm extends Component {
             <Toggle field={form.$('autoLaunchOnStart')} />
             <Toggle field={form.$('runInBackground')} />
             <Toggle field={form.$('enableSystemTray')} />
+            <Toggle field={form.$('privateNotifications')} />
             {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>
+                  You are using the official Franz Server for Ferdi.
+                  <br />
+                  We know that Ferdi allows you to use all its features for free but you are
+                  still using Franz&#x27;s server resources - which Franz&#x27;s creator has to pay for.
+                  <br />
+                  Please still consider
+                  {' '}
+                  <a href="https://www.meetfranz.com/pricing" target="_blank">paying for a Franz account</a>
+                  {' '}
+                  or
+                  {' '}
+                  <a href="https://github.com/vantezzen/ferdi-server" target="_blank">using a self-hosted ferdi-server</a>
+                  {' '}
+                  (if you have the knowledge and resources to do so).
+                  <br />
+                  By using Ferdi, you still profit greatly from Franz&#x27;s recipe store, server resources and its development.
+                </span>
+              </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"
+                />
+                <p>
+                  { intl.formatMessage(messages.lockedPasswordInfo) }
+                </p>
+              </>
+            )}
+            <p
+              className="settings__message"
+              style={{
+                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+              }}
+            >
+              <span>
+                  Ferdi password lock allows you to keep your messages protected.
+                <br />
+                  Using 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
+                {' '}
+                <code>CMD/CTRL+Shift+L</code>
+              </span>
+            </p>
+
+
             {/* Appearance */}
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />
@@ -257,6 +355,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/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 366b0113a..2bf46b48d 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',
diff --git a/src/components/ui/ActivateTrialButton/index.js b/src/components/ui/ActivateTrialButton/index.js
index e0637da90..340123c2f 100644
--- a/src/components/ui/ActivateTrialButton/index.js
+++ b/src/components/ui/ActivateTrialButton/index.js
@@ -5,7 +5,6 @@ import { defineMessages, intlShape } from 'react-intl';
 import classnames from 'classnames';
 
 import { Button } from '@meetfranz/forms';
-import { gaEvent } from '../../../lib/analytics';
 
 import UserStore from '../../../stores/UserStore';
 
@@ -63,25 +62,9 @@ class ActivateTrialButton extends Component {
   };
 
   handleCTAClick() {
-    const { actions, stores, gaEventInfo } = this.props;
-    const { hadSubscription } = stores.user.data;
-    // const { defaultTrialPlan } = stores.features.features;
-
-    let label = '';
-    if (!hadSubscription) {
-      // actions.user.activateTrial({ planId: defaultTrialPlan });
-
-      label = 'Start Trial';
-    } else {
-      label = 'Upgrade Account';
-    }
+    const { actions } = this.props;
 
     actions.ui.openSettings({ path: 'user' });
-
-    if (gaEventInfo) {
-      const { category, event } = gaEventInfo;
-      gaEvent(category, event, label);
-    }
   }
 
   render() {
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index b0c7fed7b..a9a87707b 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -49,7 +49,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
 
     return (
       <FullscreenLoader
-        title="Franz"
+        title="Ferdi"
         className={classes.component}
         spinnerColor={theme.colorAppLoaderSpinner}
       >
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index ffc7f7051..e2d7cea83 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -69,7 +69,7 @@ export default @observer class Button extends Component {
           loaded={loaded}
           lines={10}
           scale={0.4}
-          color={buttonType !== 'secondary' ? '#FFF' : '#373a3c'}
+          color={buttonType !== 'secondary' ? '#FFF' : '#7367F0'}
           component="span"
         />
         {label}
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js
index 64d24e4ce..d516781a8 100644
--- a/src/components/ui/FullscreenLoader/styles.js
+++ b/src/components/ui/FullscreenLoader/styles.js
@@ -4,6 +4,7 @@ export default {
     alignItems: 'center',
     position: 'absolute',
     width: '100%',
+    background: 'linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)',
   },
   component: {
     width: '100%',
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 9b070c4df..4e3eb4ab8 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -68,7 +68,7 @@ export default @observer class Input extends Component {
 
     const { passwordScore } = this.state;
 
-    let type = field.type;
+    let { type } = field;
     if (type === 'password' && this.state.showPassword) {
       type = 'text';
     }
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index b88686d5e..5f729844b 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -25,6 +25,7 @@ export default @inject('stores') @observer class Link extends Component {
       className,
       activeClassName,
       strictFilter,
+      style,
     } = this.props;
     const { router } = stores;
 
@@ -44,6 +45,7 @@ export default @inject('stores') @observer class Link extends Component {
       <a
         href={router.history.createHref(to)}
         className={linkClasses}
+        style={style}
         onClick={e => this.onClick(e)}
       >
         {children}
@@ -65,6 +67,7 @@ Link.wrappedComponent.propTypes = {
   activeClassName: PropTypes.string,
   strictFilter: PropTypes.bool,
   target: PropTypes.string,
+  style: PropTypes.object,
 };
 
 Link.wrappedComponent.defaultProps = {
@@ -72,4 +75,5 @@ Link.wrappedComponent.defaultProps = {
   activeClassName: '',
   strictFilter: false,
   target: '',
+  style: {},
 };
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index f73296bb6..de8769b6c 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -16,7 +16,7 @@ export default class LoaderComponent extends Component {
     children: null,
     loaded: false,
     className: '',
-    color: '#373a3c',
+    color: '#7367F0',
   };
 
   render() {
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 8d2746e22..7ba353be3 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -9,8 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types';
 import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
-import { gaEvent } from '../../../lib/analytics';
-import { FeatureStore } from '../../../features/utils/FeatureStore';
+import FeatureStore from '../../../stores/FeaturesStore';
 
 const messages = defineMessages({
   action: {
@@ -50,7 +49,6 @@ class PremiumFeatureContainer extends Component {
       actions,
       condition,
       stores,
-      gaEventInfo,
     } = this.props;
 
     const { intl } = this.context;
@@ -75,10 +73,6 @@ class PremiumFeatureContainer extends Component {
             type="button"
             onClick={() => {
               actions.ui.openSettings({ path: 'user' });
-              if (gaEventInfo) {
-                const { category, event, label } = gaEventInfo;
-                gaEvent(category, event, label);
-              }
             }}
           >
             {intl.formatMessage(messages.action)}
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js
index 73762f0bf..1b764bd90 100644
--- a/src/components/ui/UpgradeButton/index.js
+++ b/src/components/ui/UpgradeButton/index.js
@@ -4,7 +4,6 @@ import { inject, observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 
 import { Button } from '@meetfranz/forms';
-import { gaEvent } from '../../../lib/analytics';
 
 import UserStore from '../../../stores/UserStore';
 import ActivateTrialButton from '../ActivateTrialButton';
@@ -41,13 +40,9 @@ class UpgradeButton extends Component {
   };
 
   handleCTAClick() {
-    const { actions, gaEventInfo } = this.props;
+    const { actions } = this.props;
 
     actions.ui.openSettings({ path: 'user' });
-    if (gaEventInfo) {
-      const { category, event } = gaEventInfo;
-      gaEvent(category, event, 'Upgrade Account');
-    }
   }
 
   render() {