10 files changed, 346 insertions, 348 deletions

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 8235932c2..3e2b75731 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { intlShape } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar';
 
+import { injectIntl } from 'react-intl';
 import Link from '../ui/Link';
 import InfoBar from '../ui/InfoBar';
 
@@ -17,7 +17,6 @@ import { isWindows } from '../../environment';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import { GITHUB_FERDI_URL } from '../../config';
 
-export default
 @observer
 class AuthLayout extends Component {
   static propTypes = {
@@ -36,10 +35,6 @@ class AuthLayout extends Component {
     shouldShowAppUpdateInfoBar: true,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   render() {
     const {
       children,
@@ -52,7 +47,8 @@ class AuthLayout extends Component {
       installAppUpdate,
       appUpdateIsDownloaded,
     } = this.props;
-    const { intl } = this.context;
+
+    const { intl } = this.props;
 
     return (
       <>
@@ -108,3 +104,5 @@ class AuthLayout extends Component {
     );
   }
 }
+
+export default injectIntl(AuthLayout);
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index 8e8a7af32..b98fb50f7 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import Form from '../../lib/Form';
 import Input from '../ui/Input';
 import Select from '../ui/Select';
@@ -14,56 +14,65 @@ import globalMessages from '../../i18n/globalMessages';
 const messages = defineMessages({
   headline: {
     id: 'changeserver.headline',
-    defaultMessage: '!!!Change server',
+    defaultMessage: 'Change server',
   },
   label: {
     id: 'changeserver.label',
-    defaultMessage: '!!!Server',
+    defaultMessage: 'Server',
   },
   warning: {
     id: 'changeserver.warning',
-    defaultMessage: '!!!Extra settings offered by Ferdi will not be saved',
+    defaultMessage: 'Extra settings offered by Ferdi will not be saved',
   },
   customServerLabel: {
     id: 'changeserver.customServerLabel',
-    defaultMessage: '!!!Custom server',
+    defaultMessage: 'Custom server',
   },
   urlError: {
     id: 'changeserver.urlError',
-    defaultMessage: '!!!Enter a valid URL',
+    defaultMessage: 'Enter a valid URL',
   },
 });
 
-export default @observer class ChangeServer extends Component {
+@observer
+class ChangeServer extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     server: PropTypes.string.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  ferdiServer=LIVE_FERDI_API;
+  ferdiServer = LIVE_FERDI_API;
 
-  franzServer=LIVE_FRANZ_API;
+  franzServer = LIVE_FRANZ_API;
 
-  defaultServers=[this.franzServer, this.ferdiServer];
+  defaultServers = [this.franzServer, this.ferdiServer];
 
-  form = new Form({
-    fields: {
-      server: {
-        label: this.context.intl.formatMessage(messages.label),
-        value: this.props.server,
-        options: [{ value: this.ferdiServer, label: 'Ferdi' }, { value: this.franzServer, label: 'Franz' }, { value: this.defaultServers.includes(this.props.server) ? '' : this.props.server, label: 'Custom' }],
-      },
-      customServer: {
-        label: this.context.intl.formatMessage(messages.customServerLabel),
-        value: '',
-        validators: [url, required],
+  form = new Form(
+    {
+      fields: {
+        server: {
+          label: this.props.intl.formatMessage(messages.label),
+          value: this.props.server,
+          options: [
+            { value: this.ferdiServer, label: 'Ferdi' },
+            { value: this.franzServer, label: 'Franz' },
+            {
+              value: this.defaultServers.includes(this.props.server)
+                ? ''
+                : this.props.server,
+              label: 'Custom',
+            },
+          ],
+        },
+        customServer: {
+          label: this.props.intl.formatMessage(messages.customServerLabel),
+          value: '',
+          validators: [url, required],
+        },
       },
     },
-  }, this.context.intl);
+    this.props.intl,
+  );
 
   componentDidMount() {
     if (this.defaultServers.includes(this.props.server)) {
@@ -77,13 +86,13 @@ export default @observer class ChangeServer extends Component {
   submit(e) {
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         if (!this.defaultServers.includes(form.values().server)) {
           form.$('server').onChange(form.values().customServer);
         }
         this.props.onSubmit(form.values());
       },
-      onError: (form) => {
+      onError: form => {
         if (this.defaultServers.includes(form.values().server)) {
           this.props.onSubmit(form.values());
         }
@@ -93,23 +102,21 @@ export default @observer class ChangeServer extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
+    const { intl } = this.props;
     return (
       <div className="auth__container">
-        <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
           <h1>{intl.formatMessage(messages.headline)}</h1>
-          {form.$('server').value === this.franzServer
-          && (
+          {form.$('server').value === this.franzServer && (
             <Infobox type="warning">
               {intl.formatMessage(messages.warning)}
             </Infobox>
           )}
           <Select field={form.$('server')} />
-          {!this.defaultServers.includes(form.$('server').value)
-          && (
+          {!this.defaultServers.includes(form.$('server').value) && (
             <Input
               placeholder="Custom Server"
-              onChange={(e) => this.submit(e)}
+              onChange={e => this.submit(e)}
               field={form.$('customServer')}
             />
           )}
@@ -123,3 +130,5 @@ export default @observer class ChangeServer extends Component {
     );
   }
 }
+
+export default injectIntl(ChangeServer);
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 3073cad73..44cb7e791 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router';
 import classnames from 'classnames';
 
@@ -12,23 +12,22 @@ import Button from '../ui/Button';
 const messages = defineMessages({
   headline: {
     id: 'import.headline',
-    defaultMessage: '!!!Import your Ferdi 4 services',
+    defaultMessage: 'Import your Ferdi 4 services',
   },
   notSupportedHeadline: {
     id: 'import.notSupportedHeadline',
-    defaultMessage: '!!!Services not yet supported in Ferdi 5',
+    defaultMessage: 'Services not yet supported in Ferdi 5',
   },
   submitButtonLabel: {
     id: 'import.submit.label',
-    defaultMessage: '!!!Import {count} services',
+    defaultMessage: 'Import {count} services',
   },
   skipButtonLabel: {
     id: 'import.skip.label',
-    defaultMessage: '!!!I want to add services manually',
+    defaultMessage: 'I want to add services manually',
   },
 });
 
-export default
 @observer
 class Import extends Component {
   static propTypes = {
@@ -38,17 +37,13 @@ class Import extends Component {
     inviteRoute: PropTypes.string.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   componentDidMount() {
     const config = {
       fields: {
         import: [
           ...this.props.services
-            .filter((s) => s.recipe)
-            .map((s) => ({
+            .filter(s => s.recipe)
+            .map(s => ({
               fields: {
                 add: {
                   default: true,
@@ -60,20 +55,20 @@ class Import extends Component {
       },
     };
 
-    this.form = new Form(config, this.context.intl);
+    this.form = new Form(config, this.props.intl);
   }
 
   submit(e) {
     const { services } = this.props;
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         const servicesImport = form
           .values()
           .import.map(
-            (value, i) => !value.add || services.filter((s) => s.recipe)[i],
+            (value, i) => !value.add || services.filter(s => s.recipe)[i],
           )
-          .filter((s) => typeof s !== 'boolean');
+          .filter(s => typeof s !== 'boolean');
 
         this.props.onSubmit({ services: servicesImport });
       },
@@ -82,18 +77,18 @@ class Import extends Component {
   }
 
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
     const { services, isSubmitting, inviteRoute } = this.props;
 
-    const availableServices = services.filter((s) => s.recipe);
-    const unavailableServices = services.filter((s) => !s.recipe);
+    const availableServices = services.filter(s => s.recipe);
+    const unavailableServices = services.filter(s => !s.recipe);
 
     return (
       <div className="auth__scroll-container">
         <div className="auth__container auth__container--signup">
           <form
             className="franz-form auth__form"
-            onSubmit={(e) => this.submit(e)}
+            onSubmit={e => this.submit(e)}
           >
             <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
             <h1>{intl.formatMessage(messages.headline)}</h1>
@@ -107,8 +102,8 @@ class Import extends Component {
                     <td className="service-table__column-icon">
                       <img
                         src={
-                          availableServices[i].custom_icon
-                          || availableServices[i].recipe.icons.svg
+                          availableServices[i].custom_icon ||
+                          availableServices[i].recipe.icons.svg
                         }
                         className={classnames({
                           'service-table__icon': true,
@@ -133,7 +128,7 @@ class Import extends Component {
                 </strong>
                 <p>
                   {services
-                    .filter((s) => !s.recipe)
+                    .filter(s => !s.recipe)
                     .map((service, i) => (
                       <span key={service.id}>
                         {service.name !== '' ? service.name : service.service}
@@ -170,3 +165,5 @@ class Import extends Component {
     );
   }
 }
+
+export default injectIntl(Import);
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index 4b4d63a6b..519691ede 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router';
 import classnames from 'classnames';
 
@@ -15,35 +15,34 @@ import Button from '../ui/Button';
 const messages = defineMessages({
   settingsHeadline: {
     id: 'settings.invite.headline',
-    defaultMessage: '!!!Invite Friends',
+    defaultMessage: 'Invite Friends',
   },
   headline: {
     id: 'invite.headline.friends',
-    defaultMessage: '!!!Invite 3 of your friends or colleagues',
+    defaultMessage: 'Invite 3 of your friends or colleagues',
   },
   nameLabel: {
     id: 'invite.name.label',
-    defaultMessage: '!!!Name',
+    defaultMessage: 'Name',
   },
   emailLabel: {
     id: 'invite.email.label',
-    defaultMessage: '!!!Email address',
+    defaultMessage: 'Email address',
   },
   submitButtonLabel: {
     id: 'invite.submit.label',
-    defaultMessage: '!!!Send invites',
+    defaultMessage: 'Send invites',
   },
   skipButtonLabel: {
     id: 'invite.skip.label',
-    defaultMessage: '!!!I want to do this later',
+    defaultMessage: 'I want to do this later',
   },
   inviteSuccessInfo: {
     id: 'invite.successInfo',
-    defaultMessage: '!!!Invitations sent successfully',
+    defaultMessage: 'Invitations sent successfully',
   },
 });
 
-export default
 @observer
 class Invite extends Component {
   static propTypes = {
@@ -59,10 +58,6 @@ class Invite extends Component {
     isLoadingInvite: false,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = { showSuccessInfo: false };
 
   componentDidMount() {
@@ -73,8 +68,8 @@ class Invite extends Component {
             ...Array(3).fill({
               fields: {
                 name: {
-                  label: this.context.intl.formatMessage(messages.nameLabel),
-                  placeholder: this.context.intl.formatMessage(
+                  label: this.props.intl.formatMessage(messages.nameLabel),
+                  placeholder: this.props.intl.formatMessage(
                     messages.nameLabel,
                   ),
                   onChange: () => {
@@ -83,8 +78,8 @@ class Invite extends Component {
                   // related: ['invite.0.email'], // path accepted but does not work
                 },
                 email: {
-                  label: this.context.intl.formatMessage(messages.emailLabel),
-                  placeholder: this.context.intl.formatMessage(
+                  label: this.props.intl.formatMessage(messages.emailLabel),
+                  placeholder: this.props.intl.formatMessage(
                     messages.emailLabel,
                   ),
                   onChange: () => {
@@ -97,7 +92,7 @@ class Invite extends Component {
           ],
         },
       },
-      this.context.intl,
+      this.props.intl,
     );
 
     document.querySelector('input:first-child').focus();
@@ -107,7 +102,7 @@ class Invite extends Component {
     e.preventDefault();
 
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         this.props.onSubmit({ invites: form.values().invite });
 
         this.form.clear();
@@ -121,13 +116,13 @@ class Invite extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
+    const { intl } = this.props;
     const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
 
     const atLeastOneEmailAddress = form
       .$('invite')
-      .map((invite) => invite.$('email').value)
-      .some((emailValue) => emailValue.trim() !== '');
+      .map(invite => invite.$('email').value)
+      .some(emailValue => emailValue.trim() !== '');
 
     const sendButtonClassName = classnames({
       auth__button: true,
@@ -148,17 +143,14 @@ class Invite extends Component {
           </Appear>
         )}
 
-        <form
-          className="franz-form auth__form"
-          onSubmit={(e) => this.submit(e)}
-        >
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
           {!embed && (
             <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
           )}
           <h1 className={embed && 'invite__embed'}>
             {intl.formatMessage(messages.headline)}
           </h1>
-          {form.$('invite').map((invite) => (
+          {form.$('invite').map(invite => (
             <div className="grid" key={invite.key}>
               <div className="grid__row">
                 <Input field={invite.$('name')} showLabel={false} />
@@ -193,9 +185,7 @@ class Invite extends Component {
       >
         {embed && (
           <div className="settings__header">
-            <h1>
-              {this.context.intl.formatMessage(messages.settingsHeadline)}
-            </h1>
+            <h1>{this.props.intl.formatMessage(messages.settingsHeadline)}</h1>
           </div>
         )}
         {!embed ? (
@@ -207,3 +197,5 @@ class Invite extends Component {
     );
   }
 }
+
+export default injectIntl(Invite);
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index 2ad8a2409..a507ba140 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -2,7 +2,7 @@ import { systemPreferences } from '@electron/remote';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Form from '../../lib/Form';
 import Input from '../ui/Input';
@@ -15,39 +15,41 @@ import { globalError as globalErrorPropType } from '../../prop-types';
 const messages = defineMessages({
   headline: {
     id: 'locked.headline',
-    defaultMessage: '!!!Locked',
+    defaultMessage: 'Locked',
   },
   info: {
     id: 'locked.info',
-    defaultMessage: '!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.',
+    defaultMessage:
+      'Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.',
   },
   touchId: {
     id: 'locked.touchId',
-    defaultMessage: '!!!Unlock with Touch ID',
+    defaultMessage: 'Unlock with Touch ID',
   },
   touchIdPrompt: {
     id: 'locked.touchIdPrompt',
-    defaultMessage: '!!!unlock via Touch ID',
+    defaultMessage: 'unlock via Touch ID',
   },
   passwordLabel: {
     id: 'locked.password.label',
-    defaultMessage: '!!!Password',
+    defaultMessage: 'Password',
   },
   submitButtonLabel: {
     id: 'locked.submit.label',
-    defaultMessage: '!!!Unlock',
+    defaultMessage: 'Unlock',
   },
   unlockWithPassword: {
     id: 'locked.unlockWithPassword',
-    defaultMessage: '!!!Unlock with Password',
+    defaultMessage: 'Unlock with Password',
   },
   invalidCredentials: {
     id: 'locked.invalidCredentials',
-    defaultMessage: '!!!Password invalid',
+    defaultMessage: 'Password invalid',
   },
 });
 
-export default @observer class Locked extends Component {
+@observer
+class Locked extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     unlock: PropTypes.func.isRequired,
@@ -56,62 +58,57 @@ export default @observer class Locked extends Component {
     error: globalErrorPropType.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  form = new Form({
-    fields: {
-      password: {
-        label: this.context.intl.formatMessage(messages.passwordLabel),
-        value: '',
-        type: 'password',
+  form = new Form(
+    {
+      fields: {
+        password: {
+          label: this.props.intl.formatMessage(messages.passwordLabel),
+          value: '',
+          type: 'password',
+        },
       },
     },
-  }, this.context.intl);
+    this.props.intl,
+  );
 
   submit(e) {
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         this.props.onSubmit(form.values());
       },
-      onError: () => { },
+      onError: () => {},
     });
   }
 
   touchIdUnlock() {
-    const { intl } = this.context;
+    const { intl } = this.props;
 
-    systemPreferences.promptTouchID(intl.formatMessage(messages.touchIdPrompt)).then(() => {
-      this.props.unlock();
-    });
+    systemPreferences
+      .promptTouchID(intl.formatMessage(messages.touchIdPrompt))
+      .then(() => {
+        this.props.unlock();
+      });
   }
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
-    const {
-      isSubmitting,
-      error,
-      useTouchIdToUnlock,
-    } = this.props;
+    const { intl } = this.props;
+    const { isSubmitting, error, useTouchIdToUnlock } = this.props;
 
-    const touchIdEnabled = isMac ? (useTouchIdToUnlock && systemPreferences.canPromptTouchID()) : false;
-    const submitButtonLabel = touchIdEnabled ? intl.formatMessage(messages.unlockWithPassword) : intl.formatMessage(messages.submitButtonLabel);
+    const touchIdEnabled = isMac
+      ? useTouchIdToUnlock && systemPreferences.canPromptTouchID()
+      : false;
+    const submitButtonLabel = touchIdEnabled
+      ? intl.formatMessage(messages.unlockWithPassword)
+      : intl.formatMessage(messages.submitButtonLabel);
 
     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=""
-          />
+        <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>
+          <Infobox type="warning">{intl.formatMessage(messages.info)}</Infobox>
 
           {touchIdEnabled && (
             <>
@@ -125,13 +122,11 @@ export default @observer class Locked extends Component {
             </>
           )}
 
-          <Input
-            field={form.$('password')}
-            showPasswordToggle
-            focus
-          />
+          <Input field={form.$('password')} showPasswordToggle focus />
           {error.code === 'invalid-credentials' && (
-            <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+            <p className="error-message center">
+              {intl.formatMessage(messages.invalidCredentials)}
+            </p>
           )}
           {isSubmitting ? (
             <Button
@@ -153,3 +148,5 @@ export default @observer class Locked extends Component {
     );
   }
 }
+
+export default injectIntl(Locked);
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 9e6a8d046..a47834e19 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { LIVE_FRANZ_API } from '../../config';
 import { API_VERSION, isDevMode, useLiveAPI } from '../../environment';
@@ -19,59 +19,61 @@ import { globalError as globalErrorPropType } from '../../prop-types';
 const messages = defineMessages({
   headline: {
     id: 'login.headline',
-    defaultMessage: '!!!Sign in',
+    defaultMessage: 'Sign in',
   },
   emailLabel: {
     id: 'login.email.label',
-    defaultMessage: '!!!Email address',
+    defaultMessage: 'Email address',
   },
   passwordLabel: {
     id: 'login.password.label',
-    defaultMessage: '!!!Password',
+    defaultMessage: 'Password',
   },
   submitButtonLabel: {
     id: 'login.submit.label',
-    defaultMessage: '!!!Sign in',
+    defaultMessage: 'Sign in',
   },
   invalidCredentials: {
     id: 'login.invalidCredentials',
-    defaultMessage: '!!!Email or password not valid',
+    defaultMessage: 'Email or password not valid',
   },
   customServerQuestion: {
     id: 'login.customServerQuestion',
-    defaultMessage: '!!!Using a Franz account to log in?',
+    defaultMessage: 'Using a Franz account to log in?',
   },
   customServerSuggestion: {
     id: 'login.customServerSuggestion',
-    defaultMessage: '!!!Try importing your Franz account into Ferdi',
+    defaultMessage: 'Try importing your Franz account into Ferdi',
   },
   tokenExpired: {
     id: 'login.tokenExpired',
-    defaultMessage: '!!!Your session expired, please login again.',
+    defaultMessage: 'Your session expired, please login again.',
   },
   serverLogout: {
     id: 'login.serverLogout',
-    defaultMessage: '!!!Your session expired, please login again.',
+    defaultMessage: 'Your session expired, please login again.',
   },
   signupLink: {
     id: 'login.link.signup',
-    defaultMessage: '!!!Create a free account',
+    defaultMessage: 'Create a free account',
   },
   changeServer: {
     id: 'login.changeServer',
-    defaultMessage: '!!!Change server',
+    defaultMessage: 'Change server',
   },
   serverless: {
     id: 'services.serverless',
-    defaultMessage: '!!!Use Ferdi without an Account',
+    defaultMessage: 'Use Ferdi without an Account',
   },
   passwordLink: {
     id: 'login.link.password',
-    defaultMessage: '!!!Forgot password',
+    defaultMessage: 'Forgot password',
   },
 });
 
-export default @inject('actions') @observer class Login extends Component {
+@inject('actions')
+@observer
+class Login extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
@@ -84,35 +86,34 @@ export default @inject('actions') @observer class Login extends Component {
     actions: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  form = new Form({
-    fields: {
-      email: {
-        label: this.context.intl.formatMessage(messages.emailLabel),
-        value: '',
-        validators: [required, email],
-      },
-      password: {
-        label: this.context.intl.formatMessage(messages.passwordLabel),
-        value: '',
-        validators: [required],
-        type: 'password',
+  form = new Form(
+    {
+      fields: {
+        email: {
+          label: this.props.intl.formatMessage(messages.emailLabel),
+          value: '',
+          validators: [required, email],
+        },
+        password: {
+          label: this.props.intl.formatMessage(messages.passwordLabel),
+          value: '',
+          validators: [required],
+          type: 'password',
+        },
       },
     },
-  }, this.context.intl);
+    this.props.intl,
+  );
 
   emailField = null;
 
   submit(e) {
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         this.props.onSubmit(form.values());
       },
-      onError: () => { },
+      onError: () => {},
     });
   }
 
@@ -122,7 +123,7 @@ export default @inject('actions') @observer class Login extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
+    const { intl } = this.props;
     const {
       isSubmitting,
       isTokenExpired,
@@ -135,42 +136,47 @@ export default @inject('actions') @observer class Login extends Component {
 
     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=""
-          />
+        <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>
           {isDevMode && !useLiveAPI && (
             <Infobox type="warning">
-              In Dev Mode your data is not persistent. Please use the live app for accessing the production API.
+              In Dev Mode your data is not persistent. Please use the live app
+              for accessing the production API.
             </Infobox>
           )}
           {isTokenExpired && (
-            <p className="error-message center">{intl.formatMessage(messages.tokenExpired)}</p>
+            <p className="error-message center">
+              {intl.formatMessage(messages.tokenExpired)}
+            </p>
           )}
           {isServerLogout && (
-            <p className="error-message center">{intl.formatMessage(messages.serverLogout)}</p>
+            <p className="error-message center">
+              {intl.formatMessage(messages.serverLogout)}
+            </p>
           )}
           <Input
             field={form.$('email')}
-            ref={(element) => { this.emailField = element; }}
+            ref={element => {
+              this.emailField = element;
+            }}
             focus
           />
-          <Input
-            field={form.$('password')}
-            showPasswordToggle
-          />
+          <Input field={form.$('password')} showPasswordToggle />
           {error.code === 'invalid-credentials' && (
             <>
-              <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
-              { window.ferdi.stores.settings.all.app.server !== LIVE_FRANZ_API && (
+              <p className="error-message center">
+                {intl.formatMessage(messages.invalidCredentials)}
+              </p>
+              {window.ferdi.stores.settings.all.app.server !==
+                LIVE_FRANZ_API && (
                 <p className="error-message center">
-                    {intl.formatMessage(messages.customServerQuestion)}
-                  {' '}
+                  {intl.formatMessage(messages.customServerQuestion)}{' '}
                   <Link
-                    to={`${window.ferdi.stores.settings.all.app.server.replace(API_VERSION, '')}/import`}
+                    to={`${window.ferdi.stores.settings.all.app.server.replace(
+                      API_VERSION,
+                      '',
+                    )}/import`}
                     target="_blank"
                     style={{ cursor: 'pointer', textDecoration: 'underline' }}
                   >
@@ -197,12 +203,22 @@ export default @inject('actions') @observer class Login extends Component {
           )}
         </form>
         <div className="auth__links">
-          <Link to={changeServerRoute}>{intl.formatMessage(messages.changeServer)}</Link>
-          <a onClick={this.useLocalServer.bind(this)}>{intl.formatMessage(messages.serverless)}</a>
-          <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
-          <Link to={passwordRoute}>{intl.formatMessage(messages.passwordLink)}</Link>
+          <Link to={changeServerRoute}>
+            {intl.formatMessage(messages.changeServer)}
+          </Link>
+          <a onClick={this.useLocalServer.bind(this)}>
+            {intl.formatMessage(messages.serverless)}
+          </a>
+          <Link to={signupRoute}>
+            {intl.formatMessage(messages.signupLink)}
+          </Link>
+          <Link to={passwordRoute}>
+            {intl.formatMessage(messages.passwordLink)}
+          </Link>
         </div>
       </div>
     );
   }
 }
+
+export default injectIntl(Login);
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index 1be2097bd..74346b382 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
@@ -14,31 +14,32 @@ import globalMessages from '../../i18n/globalMessages';
 const messages = defineMessages({
   headline: {
     id: 'password.headline',
-    defaultMessage: '!!!Forgot password',
+    defaultMessage: 'Forgot password',
   },
   emailLabel: {
     id: 'password.email.label',
-    defaultMessage: '!!!Email address',
+    defaultMessage: 'Email address',
   },
   successInfo: {
     id: 'password.successInfo',
-    defaultMessage: '!!!Your new password was sent to your email address',
+    defaultMessage: 'Your new password was sent to your email address',
   },
   noUser: {
     id: 'password.noUser',
-    defaultMessage: '!!!No user affiliated with that email address',
+    defaultMessage: 'No user affiliated with that email address',
   },
   signupLink: {
     id: 'password.link.signup',
-    defaultMessage: '!!!Create a free account',
+    defaultMessage: 'Create a free account',
   },
   loginLink: {
     id: 'password.link.login',
-    defaultMessage: '!!!Sign in to your account',
+    defaultMessage: 'Sign in to your account',
   },
 });
 
-export default @observer class Password extends Component {
+@observer
+class Password extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
@@ -47,24 +48,23 @@ export default @observer class Password extends Component {
     status: MobxPropTypes.arrayOrObservableArray.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  form = new Form({
-    fields: {
-      email: {
-        label: this.context.intl.formatMessage(messages.emailLabel),
-        value: '',
-        validators: [required, email],
+  form = new Form(
+    {
+      fields: {
+        email: {
+          label: this.props.intl.formatMessage(messages.emailLabel),
+          value: '',
+          validators: [required, email],
+        },
       },
     },
-  }, this.context.intl);
+    this.props.intl,
+  );
 
   submit(e) {
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         this.props.onSubmit(form.values());
       },
       onError: () => {},
@@ -73,37 +73,24 @@ export default @observer class Password extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
-    const {
-      isSubmitting,
-      signupRoute,
-      loginRoute,
-      status,
-    } = this.props;
+    const { intl } = this.props;
+    const { isSubmitting, signupRoute, loginRoute, status } = 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=""
-          />
+        <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>
           {status.length > 0 && status.includes('sent') && (
-            <Infobox
-              type="success"
-              icon="checkbox-marked-circle-outline"
-            >
+            <Infobox type="success" icon="checkbox-marked-circle-outline">
               {intl.formatMessage(messages.successInfo)}
             </Infobox>
           )}
-          <Input
-            field={form.$('email')}
-            focus
-          />
+          <Input field={form.$('email')} focus />
           {status.length > 0 && status.includes('no-user') && (
-            <p className="error-message center">{intl.formatMessage(messages.noUser)}</p>
+            <p className="error-message center">
+              {intl.formatMessage(messages.noUser)}
+            </p>
           )}
           {isSubmitting ? (
             <Button
@@ -123,9 +110,13 @@ export default @observer class Password extends Component {
         </form>
         <div className="auth__links">
           <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
-          <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
+          <Link to={signupRoute}>
+            {intl.formatMessage(messages.signupLink)}
+          </Link>
         </div>
       </div>
     );
   }
 }
+
+export default injectIntl(Password);
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index ded36bbe7..299c40c63 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 
@@ -19,20 +19,20 @@ const SLACK_ID = 'slack';
 const messages = defineMessages({
   headline: {
     id: 'setupAssistant.headline',
-    defaultMessage: "!!!Let's get started",
+    defaultMessage: "Let's get started",
   },
   subHeadline: {
     id: 'setupAssistant.subheadline',
     defaultMessage:
-      '!!!Choose from our most used services and get back on top of your messaging now.',
+      'Choose from our most used services and get back on top of your messaging now.',
   },
   submitButtonLabel: {
     id: 'setupAssistant.submit.label',
-    defaultMessage: "!!!Let's go",
+    defaultMessage: "Let's go",
   },
   inviteSuccessInfo: {
     id: 'invite.successInfo',
-    defaultMessage: '!!!Invitations sent successfully',
+    defaultMessage: 'Invitations sent successfully',
   },
 });
 
@@ -145,10 +145,6 @@ class SetupAssistant extends Component {
     isInviteSuccessful: false,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   state = {
     services: [
       {
@@ -189,7 +185,7 @@ class SetupAssistant extends Component {
   }
 
   render() {
-    const { intl } = this.context;
+    const { intl } = this.props;
     const {
       classes,
       isInviteSuccessful,
@@ -330,4 +326,4 @@ class SetupAssistant extends Component {
   }
 }
 
-export default SetupAssistant;
+export default injectIntl(SetupAssistant);
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 6fb41a164..4d39835a2 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import { isDevMode, useLiveAPI } from '../../environment';
 import Form from '../../lib/Form';
@@ -19,63 +19,65 @@ import { termsBase } from '../../api/apiBase';
 const messages = defineMessages({
   headline: {
     id: 'signup.headline',
-    defaultMessage: '!!!Sign up',
+    defaultMessage: 'Sign up',
   },
   firstnameLabel: {
     id: 'signup.firstname.label',
-    defaultMessage: '!!!Firstname',
+    defaultMessage: 'Firstname',
   },
   lastnameLabel: {
     id: 'signup.lastname.label',
-    defaultMessage: '!!!Lastname',
+    defaultMessage: 'Lastname',
   },
   emailLabel: {
     id: 'signup.email.label',
-    defaultMessage: '!!!Email address',
+    defaultMessage: 'Email address',
   },
   // companyLabel: {
   //   id: 'signup.company.label',
-  //   defaultMessage: '!!!Company',
+  //   defaultMessage: 'Company',
   // },
   passwordLabel: {
     id: 'signup.password.label',
-    defaultMessage: '!!!Password',
+    defaultMessage: 'Password',
   },
   legalInfo: {
     id: 'signup.legal.info',
-    defaultMessage: '!!!By creating a Ferdi account you accept the',
+    defaultMessage: 'By creating a Ferdi account you accept the',
   },
   terms: {
     id: 'signup.legal.terms',
-    defaultMessage: '!!!Terms of service',
+    defaultMessage: 'Terms of service',
   },
   privacy: {
     id: 'signup.legal.privacy',
-    defaultMessage: '!!!Privacy Statement',
+    defaultMessage: 'Privacy Statement',
   },
   submitButtonLabel: {
     id: 'signup.submit.label',
-    defaultMessage: '!!!Create account',
+    defaultMessage: 'Create account',
   },
   loginLink: {
     id: 'signup.link.login',
-    defaultMessage: '!!!Already have an account, sign in?',
+    defaultMessage: 'Already have an account, sign in?',
   },
   changeServer: {
     id: 'login.changeServer',
-    defaultMessage: '!!!Change server',
+    defaultMessage: 'Change server',
   },
   serverless: {
     id: 'services.serverless',
-    defaultMessage: '!!!Use Ferdi without an Account',
+    defaultMessage: 'Use Ferdi without an Account',
   },
   emailDuplicate: {
     id: 'signup.emailDuplicate',
-    defaultMessage: '!!!A user with that email address already exists',
+    defaultMessage: 'A user with that email address already exists',
   },
 });
 
-export default @inject('actions') @observer class Signup extends Component {
+@inject('actions')
+@observer
+class Signup extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
@@ -85,40 +87,39 @@ export default @inject('actions') @observer class Signup extends Component {
     actions: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  form = new Form({
-    fields: {
-      firstname: {
-        label: this.context.intl.formatMessage(messages.firstnameLabel),
-        value: '',
-        validators: [required],
-      },
-      lastname: {
-        label: this.context.intl.formatMessage(messages.lastnameLabel),
-        value: '',
-        validators: [required],
-      },
-      email: {
-        label: this.context.intl.formatMessage(messages.emailLabel),
-        value: '',
-        validators: [required, email],
-      },
-      password: {
-        label: this.context.intl.formatMessage(messages.passwordLabel),
-        value: '',
-        validators: [required, minLength(6)],
-        type: 'password',
+  form = new Form(
+    {
+      fields: {
+        firstname: {
+          label: this.props.intl.formatMessage(messages.firstnameLabel),
+          value: '',
+          validators: [required],
+        },
+        lastname: {
+          label: this.props.intl.formatMessage(messages.lastnameLabel),
+          value: '',
+          validators: [required],
+        },
+        email: {
+          label: this.props.intl.formatMessage(messages.emailLabel),
+          value: '',
+          validators: [required, email],
+        },
+        password: {
+          label: this.props.intl.formatMessage(messages.passwordLabel),
+          value: '',
+          validators: [required, minLength(6)],
+          type: 'password',
+        },
       },
     },
-  }, this.context.intl);
+    this.props.intl,
+  );
 
   submit(e) {
     e.preventDefault();
     this.form.submit({
-      onSuccess: (form) => {
+      onSuccess: form => {
         this.props.onSubmit(form.values());
       },
       onError: () => {},
@@ -131,24 +132,22 @@ export default @inject('actions') @observer class Signup extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.context;
-    const {
-      isSubmitting, loginRoute, error, changeServerRoute,
-    } = this.props;
+    const { intl } = this.props;
+    const { isSubmitting, loginRoute, error, changeServerRoute } = this.props;
 
     return (
       <div className="auth__scroll-container">
         <div className="auth__container auth__container--signup">
-          <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}>
-            <img
-              src="./assets/images/logo.svg"
-              className="auth__logo"
-              alt=""
-            />
+          <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>
             {isDevMode && !useLiveAPI && (
               <Infobox type="warning">
-                In Dev Mode your data is not persistent. Please use the live app for accesing the production API.
+                In Dev Mode your data is not persistent. Please use the live app
+                for accesing the production API.
               </Infobox>
             )}
             <div className="grid__row">
@@ -162,7 +161,9 @@ export default @inject('actions') @observer class Signup extends Component {
               scorePassword
             />
             {error.code === 'email-duplicate' && (
-              <p className="error-message center">{intl.formatMessage(messages.emailDuplicate)}</p>
+              <p className="error-message center">
+                {intl.formatMessage(messages.emailDuplicate)}
+              </p>
             )}
             {isSubmitting ? (
               <Button
@@ -200,12 +201,20 @@ export default @inject('actions') @observer class Signup extends Component {
             </p>
           </form>
           <div className="auth__links">
-            <Link to={changeServerRoute}>{intl.formatMessage(messages.changeServer)}</Link>
-            <a onClick={this.useLocalServer.bind(this)}>{intl.formatMessage(messages.serverless)}</a>
-            <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
+            <Link to={changeServerRoute}>
+              {intl.formatMessage(messages.changeServer)}
+            </Link>
+            <a onClick={this.useLocalServer.bind(this)}>
+              {intl.formatMessage(messages.serverless)}
+            </a>
+            <Link to={loginRoute}>
+              {intl.formatMessage(messages.loginLink)}
+            </Link>
           </div>
         </div>
       </div>
     );
   }
 }
+
+export default injectIntl(Signup);
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index cb522e26e..2d2e2ab28 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import serverlessLogin from '../../helpers/serverless-helpers';
 
 import Link from '../ui/Link';
@@ -10,19 +10,21 @@ import Link from '../ui/Link';
 const messages = defineMessages({
   signupButton: {
     id: 'welcome.signupButton',
-    defaultMessage: '!!!Create a free account',
+    defaultMessage: 'Create a free account',
   },
   loginButton: {
     id: 'welcome.loginButton',
-    defaultMessage: '!!!Login to your account',
+    defaultMessage: 'Login to your account',
   },
   serverless: {
     id: 'services.serverless',
-    defaultMessage: '!!!Use Ferdi without an Account',
+    defaultMessage: 'Use Ferdi without an Account',
   },
 });
 
-export default @inject('actions') @observer class Login extends Component {
+@inject('actions')
+@observer
+class Login extends Component {
   static propTypes = {
     loginRoute: PropTypes.string.isRequired,
     signupRoute: PropTypes.string.isRequired,
@@ -31,27 +33,22 @@ export default @inject('actions') @observer class Login extends Component {
     actions: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   useLocalServer() {
     serverlessLogin(this.props.actions);
   }
 
   render() {
-    const { intl } = this.context;
-    const {
-      loginRoute,
-      signupRoute,
-      changeServerRoute,
-      recipes,
-    } = this.props;
+    const { intl } = this.props;
+    const { loginRoute, signupRoute, changeServerRoute, recipes } = this.props;
 
     return (
       <div className="welcome">
         <div className="welcome__content">
-          <img src="./assets/images/logo.svg" className="welcome__logo" alt="" />
+          <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>Ferdi</h1>
@@ -73,27 +70,21 @@ export default @inject('actions') @observer class Login extends Component {
           <br />
 
           <Link to={changeServerRoute}>
-            <span style={{
-              textAlign: 'center',
-              width: '100%',
-              cursor: 'pointer',
-            }}
+            <span
+              style={{
+                textAlign: 'center',
+                width: '100%',
+                cursor: 'pointer',
+              }}
             >
               Change server
             </span>
           </Link>
         </div>
         <div className="welcome__featured-services">
-          {recipes.map((recipe) => (
-            <div
-              key={recipe.id}
-              className="welcome__featured-service"
-            >
-              <img
-                key={recipe.id}
-                src={recipe.icons.svg}
-                alt=""
-              />
+          {recipes.map(recipe => (
+            <div key={recipe.id} className="welcome__featured-service">
+              <img key={recipe.id} src={recipe.icons.svg} alt="" />
             </div>
           ))}
         </div>
@@ -101,3 +92,5 @@ export default @inject('actions') @observer class Login extends Component {
     );
   }
 }
+
+export default injectIntl(Login);