17 files changed, 229 insertions, 163 deletions

diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 3e34c3162..3073cad73 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -28,7 +28,9 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Import extends Component {
+export default
+@observer
+class Import extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
     onSubmit: PropTypes.func.isRequired,
@@ -40,17 +42,21 @@ export default @observer class Import extends Component {
     intl: intlShape,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     const config = {
       fields: {
-        import: [...this.props.services.filter(s => s.recipe).map(s => ({
-          fields: {
-            add: {
-              default: true,
-              options: s,
-            },
-          },
-        }))],
+        import: [
+          ...this.props.services
+            .filter((s) => s.recipe)
+            .map((s) => ({
+              fields: {
+                add: {
+                  default: true,
+                  options: s,
+                },
+              },
+            })),
+        ],
       },
     };
 
@@ -62,9 +68,12 @@ export default @observer class Import extends Component {
     e.preventDefault();
     this.form.submit({
       onSuccess: (form) => {
-        const servicesImport = form.values().import
-          .map((value, i) => !value.add || services.filter(s => s.recipe)[i])
-          .filter(s => typeof s !== 'boolean');
+        const servicesImport = form
+          .values()
+          .import.map(
+            (value, i) => !value.add || services.filter((s) => s.recipe)[i],
+          )
+          .filter((s) => typeof s !== 'boolean');
 
         this.props.onSubmit({ services: servicesImport });
       },
@@ -76,37 +85,31 @@ export default @observer class Import extends Component {
     const { intl } = this.context;
     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)}>
-            <img
-              src="./assets/images/logo.svg"
-              className="auth__logo"
-              alt=""
-            />
-            <h1>
-              {intl.formatMessage(messages.headline)}
-            </h1>
+          <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>
             <table className="service-table available-services">
               <tbody>
                 {this.form.$('import').map((service, i) => (
-                  <tr
-                    key={service.id}
-                    className="service-table__row"
-                  >
+                  <tr key={service.id} className="service-table__row">
                     <td className="service-table__toggle">
-                      <Toggle
-                        field={service.$('add')}
-                        showLabel={false}
-                      />
+                      <Toggle field={service.$('add')} showLabel={false} />
                     </td>
                     <td className="service-table__column-icon">
                       <img
-                        src={availableServices[i].custom_icon || availableServices[i].recipe.icons.svg}
+                        src={
+                          availableServices[i].custom_icon
+                          || availableServices[i].recipe.icons.svg
+                        }
                         className={classnames({
                           'service-table__icon': true,
                           'has-custom-icon': availableServices[i].custom_icon,
@@ -125,14 +128,18 @@ export default @observer class Import extends Component {
             </table>
             {unavailableServices.length > 0 && (
               <div className="unavailable-services">
-                <strong>{intl.formatMessage(messages.notSupportedHeadline)}</strong>
+                <strong>
+                  {intl.formatMessage(messages.notSupportedHeadline)}
+                </strong>
                 <p>
-                  {services.filter(s => !s.recipe).map((service, i) => (
-                    <span key={service.id}>
-                      {service.name !== '' ? service.name : service.service}
-                      {unavailableServices.length > i + 1 ? ', ' : ''}
-                    </span>
-                  ))}
+                  {services
+                    .filter((s) => !s.recipe)
+                    .map((service, i) => (
+                      <span key={service.id}>
+                        {service.name !== '' ? service.name : service.service}
+                        {unavailableServices.length > i + 1 ? ', ' : ''}
+                      </span>
+                    ))}
                 </p>
               </div>
             )}
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index fd957ee73..4b4d63a6b 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -43,7 +43,9 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Invite extends Component {
+export default
+@observer
+class Invite extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     embed: PropTypes.bool,
@@ -63,36 +65,41 @@ export default @observer class Invite extends Component {
 
   state = { showSuccessInfo: false };
 
-  componentWillMount() {
-    const handlers = {
-      onChange: () => {
-        this.setState({ showSuccessInfo: false });
-      },
-    };
-
-    this.form = new Form({
-      fields: {
-        invite: [...Array(3).fill({
-          fields: {
-            name: {
-              label: this.context.intl.formatMessage(messages.nameLabel),
-              placeholder: this.context.intl.formatMessage(messages.nameLabel),
-              handlers,
-              // related: ['invite.0.email'], // path accepted but does not work
-            },
-            email: {
-              label: this.context.intl.formatMessage(messages.emailLabel),
-              placeholder: this.context.intl.formatMessage(messages.emailLabel),
-              handlers,
-              validators: [email],
-            },
-          },
-        })],
+  componentDidMount() {
+    this.form = new Form(
+      {
+        fields: {
+          invite: [
+            ...Array(3).fill({
+              fields: {
+                name: {
+                  label: this.context.intl.formatMessage(messages.nameLabel),
+                  placeholder: this.context.intl.formatMessage(
+                    messages.nameLabel,
+                  ),
+                  onChange: () => {
+                    this.setState({ showSuccessInfo: false });
+                  },
+                  // related: ['invite.0.email'], // path accepted but does not work
+                },
+                email: {
+                  label: this.context.intl.formatMessage(messages.emailLabel),
+                  placeholder: this.context.intl.formatMessage(
+                    messages.emailLabel,
+                  ),
+                  onChange: () => {
+                    this.setState({ showSuccessInfo: false });
+                  },
+                  validators: [email],
+                },
+              },
+            }),
+          ],
+        },
       },
-    }, this.context.intl);
-  }
+      this.context.intl,
+    );
 
-  componentDidMount() {
     document.querySelector('input:first-child').focus();
   }
 
@@ -117,9 +124,10 @@ export default @observer class Invite extends Component {
     const { intl } = this.context;
     const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
 
-    const atLeastOneEmailAddress = form.$('invite')
-      .map(invite => invite.$('email').value)
-      .some(emailValue => emailValue.trim() !== '');
+    const atLeastOneEmailAddress = form
+      .$('invite')
+      .map((invite) => invite.$('email').value)
+      .some((emailValue) => emailValue.trim() !== '');
 
     const sendButtonClassName = classnames({
       auth__button: true,
@@ -127,7 +135,7 @@ export default @observer class Invite extends Component {
     });
 
     const renderForm = (
-      <Fragment>
+      <>
         {this.state.showSuccessInfo && isInviteSuccessful && (
           <Appear>
             <Infobox
@@ -140,18 +148,17 @@ export default @observer 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=""
-            />
+            <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} />
@@ -175,17 +182,27 @@ export default @observer class Invite extends Component {
             </Link>
           )}
         </form>
-      </Fragment>
+      </>
     );
 
     return (
-      <div className={!embed ? 'auth__container auth__container--signup' : 'settings__main'}>
+      <div
+        className={
+          !embed ? 'auth__container auth__container--signup' : 'settings__main'
+        }
+      >
         {embed && (
           <div className="settings__header">
-            <h1>{this.context.intl.formatMessage(messages.settingsHeadline)}</h1>
+            <h1>
+              {this.context.intl.formatMessage(messages.settingsHeadline)}
+            </h1>
           </div>
         )}
-        {!embed ? <div>{renderForm}</div> : <div className="settings__body invite__form">{renderForm}</div>}
+        {!embed ? (
+          <div>{renderForm}</div>
+        ) : (
+          <div className="settings__body invite__form">{renderForm}</div>
+        )}
       </div>
     );
   }
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index fecc6ba56..2fcabe54d 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -10,7 +10,6 @@ import { Button } from '@meetfranz/forms';
 import { FeatureItem } from '../ui/FeatureItem';
 import { FeatureList } from '../ui/FeatureList';
 
-
 const messages = defineMessages({
   headline: {
     id: 'pricing.trial.headline.pro',
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 6e742e0c1..5f2fac64b 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -72,7 +72,6 @@ export default @inject('actions') @observer class Login extends Component {
           <br />
           <br />
 
-
           <Link to={changeServerRoute}>
             <span style={{
               textAlign: 'center',
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 444d5fea4..3c0fed32b 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -109,7 +109,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     return (
       <div className={webviewClasses}>
         {service.isActive && service.isEnabled && (
-          <Fragment>
+          <>
             {service.hasCrashed && (
               <WebviewCrashHandler
                 name={service.recipe.name}
@@ -131,10 +131,10 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
                 edit={edit}
               />
             )}
-          </Fragment>
+          </>
         )}
         {!service.isEnabled ? (
-          <Fragment>
+          <>
             {service.isActive && (
               <ServiceDisabled
                 name={service.recipe.name}
@@ -142,7 +142,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
                 enable={enable}
               />
             )}
-          </Fragment>
+          </>
         ) : (
           <>
             {(!service.isHibernating || service.isHibernationEnabled) ? (
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 7cf02c237..caa3cf9aa 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -34,7 +34,6 @@ const messages = defineMessages({
   },
 });
 
-
 const styles = {
   confettiContainer: {
     position: 'absolute',
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 7a69dba87..b62940c06 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -43,7 +43,6 @@ export default @observer class WebviewCrashHandler extends Component {
 
   countdownIntervalTimeout = ms('1s');
 
-
   componentDidMount() {
     const { reload } = this.props;
 
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index 72ba7b2e3..5b3b754fa 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -1,38 +1,55 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
 
 import ErrorBoundary from '../util/ErrorBoundary';
 import { oneOrManyChildElements } from '../../prop-types';
 import Appear from '../ui/effects/Appear';
 
-export default @observer class SettingsLayout extends Component {
+const messages = defineMessages({
+  closeSettings: {
+    id: 'settings.app.closeSettings',
+    defaultMessage: '!!!Close settings',
+  },
+});
+
+export default
+@observer
+class SettingsLayout extends Component {
   static propTypes = {
     navigation: PropTypes.element.isRequired,
     children: oneOrManyChildElements.isRequired,
     closeSettings: PropTypes.func.isRequired,
   };
 
-  componentWillMount() {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown.bind(this), false);
+    document.removeEventListener(
+      'keydown',
+      this.handleKeyDown.bind(this),
+      false,
+    );
   }
 
   handleKeyDown(e) {
-    if (e.keyCode === 27) { // escape key
+    if (e.keyCode === 27) {
+      // escape key
       this.props.closeSettings();
     }
   }
 
   render() {
-    const {
-      navigation,
-      children,
-      closeSettings,
-    } = this.props;
+    const { navigation, children, closeSettings } = this.props;
+
+    const { intl } = this.context;
 
     return (
       <Appear transitionName="fadeIn-fast">
@@ -42,6 +59,7 @@ export default @observer class SettingsLayout extends Component {
               type="button"
               className="settings-wrapper__action"
               onClick={closeSettings}
+              aria-label={intl.formatMessage(messages.closeSettings)}
             />
             <div className="settings franz-form">
               {navigation}
@@ -50,6 +68,7 @@ export default @observer class SettingsLayout extends Component {
                 type="button"
                 className="settings__close mdi mdi-close"
                 onClick={closeSettings}
+                aria-label={intl.formatMessage(messages.closeSettings)}
               />
             </div>
           </ErrorBoundary>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 1bbc1f1d4..a8501670b 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -311,14 +311,14 @@ export default @observer class EditServiceForm extends Component {
                 {recipe.hasCustomUrl && (
                   <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
                     {user.isPremium || recipe.author.find(a => a.email === user.email) ? (
-                      <Fragment>
+                      <>
                         <Input field={form.$('customUrl')} />
                         {form.error === 'url-validation-error' && (
                           <p className="franz-form__error">
                             {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })}
                           </p>
                         )}
-                      </Fragment>
+                      </>
                     ) : (
                       <div className="center premium-info">
                         <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p>
@@ -360,12 +360,12 @@ export default @observer class EditServiceForm extends Component {
                   <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
                   <Toggle field={form.$('isBadgeEnabled')} />
                   {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
-                    <Fragment>
+                    <>
                       <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
                       <p className="settings__help">
                         {intl.formatMessage(messages.indirectMessageInfo)}
                       </p>
-                    </Fragment>
+                    </>
                   )}
                 </div>
 
@@ -389,8 +389,7 @@ export default @observer class EditServiceForm extends Component {
                         <Slider field={form.$('darkReaderContrast')} />
                         <Slider field={form.$('darkReaderSepia')} />
                       </>
-                    )
-                  }
+                    )}
                 </div>
               </div>
               <div className="service-icon">
@@ -425,7 +424,7 @@ export default @observer class EditServiceForm extends Component {
                   </h3>
                   <Toggle field={form.$('proxy.isEnabled')} />
                   {form.$('proxy.isEnabled').value && (
-                    <Fragment>
+                    <>
                       <div className="grid">
                         <div className="grid__row">
                           <Input field={form.$('proxy.host')} className="proxyHost" />
@@ -449,7 +448,7 @@ export default @observer class EditServiceForm extends Component {
                         <span className="mdi mdi-information" />
                         {intl.formatMessage(messages.proxyInfo)}
                       </p>
-                    </Fragment>
+                    </>
                   )}
                 </div>
               </PremiumFeatureContainer>
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 4ba7dc720..98a119bfa 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -567,7 +567,7 @@ export default @observer class EditSettingsForm extends Component {
                   condition={!isSpellcheckerIncludedInCurrentPlan}
                   gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
                 >
-                  <Fragment>
+                  <>
                     <Toggle
                       field={form.$('enableSpellchecking')}
                     />
@@ -577,7 +577,7 @@ export default @observer class EditSettingsForm extends Component {
                     {isMac && form.$('enableSpellchecking').value && (
                       <p>{intl.formatMessage(messages.spellCheckerLanguageInfo)}</p>
                     )}
-                  </Fragment>
+                  </>
                 </PremiumFeatureContainer>
                 <a
                   href={FRANZ_TRANSLATION}
@@ -679,18 +679,15 @@ export default @observer class EditSettingsForm extends Component {
                 <br />
                 {intl.formatMessage(messages.updateStatusUpToDate)}
               </>
-              )
-              }
+              )}
               <p className="settings__message">
                 <span className="mdi mdi-github-face" />
                 <span>
 
-
                   Ferdi is based on
                   {' '}
                   <a href={`${GITHUB_FRANZ_URL}/franz`} target="_blank">Franz</a>
 
-
                   , a project published
                   under the
                   {' '}
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index f26f4cc0c..602d6e490 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -98,7 +98,6 @@ const styles = {
   },
 };
 
-
 export default @injectSheet(styles) @observer class TeamDashboard extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index e831eb47b..6a8c7645f 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -55,7 +55,7 @@ export default @observer class ImageUpload extends Component {
         </label>
         <div className="image-upload">
           {(field.value && field.value !== 'delete') || this.state.path ? (
-            <Fragment>
+            <>
               <div
                 className="image-upload__preview"
                 style={{
@@ -80,7 +80,7 @@ export default @observer class ImageUpload extends Component {
                 </button>
                 <div className="image-upload__action-background" />
               </div>
-            </Fragment>
+            </>
           ) : (
             <Dropzone
               ref={(node) => {
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index 612399e9f..bd2af2296 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -3,11 +3,21 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
+import { defineMessages, intlShape } from 'react-intl';
 
 // import { oneOrManyChildElements } from '../../prop-types';
 import Appear from './effects/Appear';
 
-export default @observer class InfoBar extends Component {
+const messages = defineMessages({
+  hide: {
+    id: 'infobar.hide',
+    defaultMessage: '!!!Hide',
+  },
+});
+
+export default
+@observer
+class InfoBar extends Component {
   static propTypes = {
     // eslint-disable-next-line
     children: PropTypes.any.isRequired,
@@ -32,6 +42,10 @@ export default @observer class InfoBar extends Component {
     onHide: () => null,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   render() {
     const {
       children,
@@ -45,6 +59,8 @@ export default @observer class InfoBar extends Component {
       onHide,
     } = this.props;
 
+    const { intl } = this.context;
+
     let transitionName = 'slideUp';
     if (position === 'top') {
       transitionName = 'slideDown';
@@ -63,11 +79,7 @@ export default @observer class InfoBar extends Component {
         <div className="info-bar__content">
           {children}
           {ctaLabel && (
-            <button
-              type="button"
-              className="info-bar__cta"
-              onClick={onClick}
-            >
+            <button type="button" className="info-bar__cta" onClick={onClick}>
               <Loader
                 loaded={!ctaLoading}
                 lines={10}
@@ -84,6 +96,7 @@ export default @observer class InfoBar extends Component {
             type="button"
             className="info-bar__close mdi mdi-close"
             onClick={onHide}
+            aria-label={intl.formatMessage(messages.hide)}
           />
         )}
       </Appear>
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index 0917ee9f0..73b48b957 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -3,8 +3,18 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import Loader from 'react-loader';
+import { defineMessages, intlShape } from 'react-intl';
 
-export default @observer class Infobox extends Component {
+const messages = defineMessages({
+  dismiss: {
+    id: 'infobox.dismiss',
+    defaultMessage: '!!!Dismiss',
+  },
+});
+
+export default
+@observer
+class Infobox extends Component {
   static propTypes = {
     children: PropTypes.any.isRequired, // eslint-disable-line
     icon: PropTypes.string,
@@ -28,6 +38,10 @@ export default @observer class Infobox extends Component {
     onSeen: () => null,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   state = {
     dismissed: false,
   };
@@ -49,6 +63,8 @@ export default @observer class Infobox extends Component {
       onDismiss,
     } = this.props;
 
+    const { intl } = this.context;
+
     if (this.state.dismissed) {
       return null;
     }
@@ -61,18 +77,10 @@ export default @observer class Infobox extends Component {
           'infobox--default': !type,
         })}
       >
-        {icon && (
-          <i className={`mdi mdi-${icon}`} />
-        )}
-        <div className="infobox__content">
-          {children}
-        </div>
+        {icon && <i className={`mdi mdi-${icon}`} />}
+        <div className="infobox__content">{children}</div>
         {ctaLabel && (
-          <button
-            className="infobox__cta"
-            onClick={ctaOnClick}
-            type="button"
-          >
+          <button className="infobox__cta" onClick={ctaOnClick} type="button">
             <Loader
               loaded={!ctaLoading}
               lines={10}
@@ -91,6 +99,7 @@ export default @observer class Infobox extends Component {
               if (onDismiss) onDismiss();
             }}
             className="infobox__delete mdi mdi-close"
+            aria-label={intl.formatMessage(messages.dismiss)}
           />
         )}
       </div>
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 4e3eb4ab8..7417fef1c 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -3,10 +3,20 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
+import { defineMessages, intlShape } from 'react-intl';
 
 import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
 
-export default @observer class Input extends Component {
+const messages = defineMessages({
+  passwordToggle: {
+    id: 'settings.app.form.passwordToggle',
+    defaultMessage: '!!!Password toggle',
+  },
+});
+
+export default
+@observer
+class Input extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
@@ -28,10 +38,14 @@ export default @observer class Input extends Component {
     suffix: '',
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   state = {
     showPassword: false,
     passwordScore: 0,
-  }
+  };
 
   inputElement = null;
 
@@ -68,6 +82,8 @@ export default @observer class Input extends Component {
 
     const { passwordScore } = this.state;
 
+    const { intl } = this.context;
+
     let { type } = field;
     if (type === 'password' && this.state.showPassword) {
       type = 'text';
@@ -82,9 +98,7 @@ export default @observer class Input extends Component {
         })}
       >
         <div className="franz-form__input-wrapper">
-          {prefix && (
-            <span className="franz-form__input-prefix">{prefix}</span>
-          )}
+          {prefix && <span className="franz-form__input-prefix">{prefix}</span>}
           <input
             id={field.id}
             type={type}
@@ -92,15 +106,15 @@ export default @observer class Input extends Component {
             name={field.name}
             value={field.value}
             placeholder={field.placeholder}
-            onChange={e => this.onChange(e)}
+            onChange={(e) => this.onChange(e)}
             onBlur={field.onBlur}
             onFocus={field.onFocus}
-            ref={(element) => { this.inputElement = element; }}
+            ref={(element) => {
+              this.inputElement = element;
+            }}
             disabled={field.disabled}
           />
-          {suffix && (
-            <span className="franz-form__input-suffix">{suffix}</span>
-          )}
+          {suffix && <span className="franz-form__input-suffix">{suffix}</span>}
           {showPasswordToggle && (
             <button
               type="button"
@@ -110,8 +124,11 @@ export default @observer class Input extends Component {
                 'mdi-eye': !this.state.showPassword,
                 'mdi-eye-off': this.state.showPassword,
               })}
-              onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
-              tabIndex="-1"
+              onClick={() => this.setState((prevState) => ({
+                showPassword: !prevState.showPassword,
+              }))}
+              tabIndex={-1}
+              aria-label={intl.formatMessage(messages.passwordToggle)}
             />
           )}
           {scorePassword && (
@@ -128,20 +145,11 @@ export default @observer class Input extends Component {
           )}
         </div>
         {field.label && showLabel && (
-          <label
-            className="franz-form__label"
-            htmlFor={field.name}
-          >
+          <label className="franz-form__label" htmlFor={field.name}>
             {field.label}
           </label>
         )}
-        {field.error && (
-          <div
-            className="franz-form__error"
-          >
-            {field.error}
-          </div>
-        )}
+        {field.error && <div className="franz-form__error">{field.error}</div>}
       </div>
     );
   }
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
index 16881a7f7..546b05a4e 100644
--- a/src/components/ui/Tabs/TabItem.js
+++ b/src/components/ui/Tabs/TabItem.js
@@ -11,7 +11,7 @@ export default class TabItem extends Component {
     const { children } = this.props;
 
     return (
-      <Fragment>{children}</Fragment>
+      <>{children}</>
     );
   }
 }
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index 196cddc66..7ece29fbe 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -5,7 +5,9 @@ import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
-export default @observer class Tab extends Component {
+export default
+@observer
+class Tab extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
     active: PropTypes.number,
@@ -15,7 +17,7 @@ export default @observer class Tab extends Component {
     active: 0,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     this.setState({ active: this.props.active });
   }
 
@@ -25,7 +27,7 @@ export default @observer class Tab extends Component {
 
   render() {
     const { children: childElements } = this.props;
-    const children = childElements.filter(c => !!c);
+    const children = childElements.filter((c) => !!c);
 
     if (children.length === 1) {
       return <div>{children}</div>;