Transform to TS and refactored components w.r.t deletion if duplicated Input component (#729)

20 files changed, 450 insertions, 561 deletions

diff --git a/src/@types/mobx-form.types.ts b/src/@types/mobx-form.types.ts
index c9932c053..2a984d3a6 100644
--- a/src/@types/mobx-form.types.ts
+++ b/src/@types/mobx-form.types.ts
@@ -9,29 +9,22 @@ export interface FormFieldOptions {
 
 export interface FormFields {
   fields: {
-    [key: string]: {
-      label?: string;
-      placeholder?: string;
-      options?: FormFieldOptions[];
-      value?: string | boolean | number | null;
-      default?: string | boolean | number | null;
-      type?: string; // todo specifiy probably
-      disabled?: boolean;
-      validators?: any; // Not sure yet.
-    };
+    [key: string]: Field;
   };
 }
 
-export interface Field extends Partial<Listeners> {
+export interface Field extends Listeners {
   id?: string;
-  type?: string;
+  type?: string; // todo specifiy probably
   name?: string;
-  value: string | string[];
+  value?: any;
   label?: string;
   placeholder?: string;
   disabled?: boolean;
   error?: GlobalError | string;
   options?: SelectOptions[];
+  default?: string | boolean | number | null;
+  validators?: any; // Not sure yet.
 }
 
 export interface SelectOptions {
diff --git a/src/components/auth/ChangeServer.tsx b/src/components/auth/ChangeServer.tsx
index d8509f599..c49e52673 100644
--- a/src/components/auth/ChangeServer.tsx
+++ b/src/components/auth/ChangeServer.tsx
@@ -4,7 +4,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiArrowLeftCircle } from '@mdi/js';
 import { noop } from 'lodash';
 import Form from '../../lib/Form';
-import Input from '../ui/Input';
+import Input from '../ui/input/index';
 import Select from '../ui/Select';
 import Button from '../ui/button';
 import Link from '../ui/Link';
@@ -128,7 +128,10 @@ class ChangeServer extends Component<IProps> {
           )}
           <Select field={form.$('server')} />
           {!this.defaultServers.includes(form.$('server').value) && (
-            <Input placeholder="Custom Server" field={form.$('customServer')} />
+            <Input
+              placeholder="Custom Server"
+              {...form.$('customServer').bind()}
+            />
           )}
           <Button
             type="submit"
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.tsx
index 6b0e0e40b..7723ea1ac 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.tsx
@@ -1,15 +1,14 @@
-import { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Link } from 'react-router-dom';
 import classnames from 'classnames';
-
+import { noop } from 'lodash';
 import Infobox from '../ui/Infobox';
 import Appear from '../ui/effects/Appear';
 import Form from '../../lib/Form';
-import { email } from '../../helpers/validation-helpers';
-import Input from '../ui/Input';
+import { email, required } from '../../helpers/validation-helpers';
+import Input from '../ui/input/index';
 import Button from '../ui/button';
 import { H1 } from '../ui/headline';
 
@@ -44,55 +43,61 @@ const messages = defineMessages({
   },
 });
 
-class Invite extends Component {
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    embed: PropTypes.bool,
-    isInviteSuccessful: PropTypes.bool,
-    isLoadingInvite: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    embed: false,
-    isInviteSuccessful: false,
-    isLoadingInvite: false,
-  };
+interface IProps extends WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  embed?: boolean;
+  isInviteSuccessful?: boolean;
+  isLoadingInvite?: boolean;
+}
 
-  state = { showSuccessInfo: false };
+interface IState {
+  showSuccessInfo: boolean;
+}
 
-  componentDidMount() {
-    const { intl } = this.props;
-    this.form = new Form(
-      {
-        fields: {
-          invite: [
-            ...Array.from({ length: 3 }).fill({
-              fields: {
-                name: {
-                  label: intl.formatMessage(messages.nameLabel),
-                  placeholder: intl.formatMessage(messages.nameLabel),
-                  onChange: () => {
-                    this.setState({ showSuccessInfo: false });
-                  },
-                  // related: ['invite.0.email'], // path accepted but does not work
+@observer
+class Invite extends Component<IProps, IState> {
+  form: Form;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.state = { showSuccessInfo: false };
+    this.form = new Form({
+      fields: {
+        invite: [
+          ...Array.from({ length: 3 }).fill({
+            fields: {
+              name: {
+                label: this.props.intl.formatMessage(messages.nameLabel),
+                placeholder: this.props.intl.formatMessage(messages.nameLabel),
+                onChange: () => {
+                  this.setState({ showSuccessInfo: false });
                 },
-                email: {
-                  label: intl.formatMessage(messages.emailLabel),
-                  placeholder: intl.formatMessage(messages.emailLabel),
-                  onChange: () => {
-                    this.setState({ showSuccessInfo: false });
-                  },
-                  validators: [email],
+                validators: [required],
+                // related: ['invite.0.email'], // path accepted but does not work
+              },
+              email: {
+                label: this.props.intl.formatMessage(messages.emailLabel),
+                placeholder: this.props.intl.formatMessage(messages.emailLabel),
+                onChange: () => {
+                  this.setState({ showSuccessInfo: false });
                 },
+                validators: [email],
               },
-            }),
-          ],
-        },
+            },
+          }),
+          // TODO - [TS DEBT] need to fix this type once mobx-react-form is updated to next version
+        ] as any,
       },
-      intl,
-    );
+    });
+  }
 
-    document.querySelector('input:first-child')?.focus();
+  componentDidMount() {
+    const selector: HTMLElement | null =
+      document.querySelector('input:first-child');
+    if (selector) {
+      selector.focus();
+    }
   }
 
   submit(e) {
@@ -101,10 +106,15 @@ class Invite extends Component {
     this.form?.submit({
       onSuccess: form => {
         this.props.onSubmit({ invites: form.values().invite });
-
         this.form?.clear();
         // this.form.$('invite.0.name').focus(); // path accepted but does not focus ;(
-        document.querySelector('input:first-child')?.focus();
+
+        const selector: HTMLElement | null =
+          document.querySelector('input:first-child');
+        if (selector) {
+          selector.focus();
+        }
+
         this.setState({ showSuccessInfo: true });
       },
       onError: () => {},
@@ -114,7 +124,11 @@ class Invite extends Component {
   render() {
     const { form } = this;
     const { intl } = this.props;
-    const { embed, isInviteSuccessful, isLoadingInvite } = this.props;
+    const {
+      embed = false,
+      isInviteSuccessful = false,
+      isLoadingInvite = false,
+    } = this.props;
 
     const atLeastOneEmailAddress = form
       .$('invite')
@@ -133,7 +147,7 @@ class Invite extends Component {
             <Infobox
               type="success"
               icon="checkbox-marked-circle-outline"
-              dismissable
+              dismissible
             >
               {intl.formatMessage(messages.inviteSuccessInfo)}
             </Infobox>
@@ -144,14 +158,14 @@ class Invite extends Component {
           {!embed && (
             <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
           )}
-          <H1 className={embed && 'invite__embed'}>
+          <H1 className={embed ? 'invite__embed' : ''}>
             {intl.formatMessage(messages.headline)}
           </H1>
           {form.$('invite').map(invite => (
             <div className="grid" key={invite.key}>
               <div className="grid__row">
-                <Input field={invite.$('name')} showLabel={false} />
-                <Input field={invite.$('email')} showLabel={false} />
+                <Input {...invite.$('name').bind()} showLabel={false} />
+                <Input {...invite.$('email').bind()} showLabel={false} />
               </div>
             </div>
           ))}
@@ -161,6 +175,7 @@ class Invite extends Component {
             disabled={!atLeastOneEmailAddress}
             label={intl.formatMessage(messages.submitButtonLabel)}
             loaded={!isLoadingInvite}
+            onClick={noop}
           />
           {!embed && (
             <Link
@@ -195,4 +210,4 @@ class Invite extends Component {
   }
 }
 
-export default injectIntl(observer(Invite));
+export default injectIntl(Invite);
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.tsx
index 6e32dd980..8b4e26878 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.tsx
@@ -1,17 +1,14 @@
 import { systemPreferences } from '@electron/remote';
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { noop } from 'lodash';
 import Form from '../../lib/Form';
-import Input from '../ui/Input';
+import Input from '../ui/input/index';
 import Button from '../ui/button';
 import { H1 } from '../ui/headline';
 import { isMac } from '../../environment';
 
-import { globalError as globalErrorPropType } from '../../prop-types';
-
 const messages = defineMessages({
   headline: {
     id: 'locked.headline',
@@ -23,7 +20,7 @@ const messages = defineMessages({
   },
   touchIdPrompt: {
     id: 'locked.touchIdPrompt',
-    defaultMessage: 'unlock via Touch ID',
+    defaultMessage: 'Unlock with Touch ID',
   },
   passwordLabel: {
     id: 'locked.password.label',
@@ -43,30 +40,31 @@ const messages = defineMessages({
   },
 });
 
-class Locked extends Component {
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    unlock: PropTypes.func.isRequired,
-    isSubmitting: PropTypes.bool.isRequired,
-    useTouchIdToUnlock: PropTypes.bool.isRequired,
-    error: globalErrorPropType.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  unlock: () => void;
+  isSubmitting: boolean;
+  useTouchIdToUnlock: boolean;
+  error: boolean;
+}
 
-  form = (() => {
-    const { intl } = this.props;
-    return new Form(
-      {
-        fields: {
-          password: {
-            label: intl.formatMessage(messages.passwordLabel),
-            value: '',
-            type: 'password',
-          },
+@observer
+class Locked extends Component<IProps> {
+  form: Form;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.form = new Form({
+      fields: {
+        password: {
+          label: this.props.intl.formatMessage(messages.passwordLabel),
+          value: '',
+          type: 'password',
         },
       },
-      intl,
-    );
-  })();
+    });
+  }
 
   submit(e) {
     e.preventDefault();
@@ -90,8 +88,7 @@ class Locked extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.props;
-    const { isSubmitting, error, useTouchIdToUnlock } = this.props;
+    const { isSubmitting, error, useTouchIdToUnlock, intl } = this.props;
 
     const touchIdEnabled = isMac
       ? useTouchIdToUnlock && systemPreferences.canPromptTouchID()
@@ -118,8 +115,8 @@ class Locked extends Component {
             </>
           )}
 
-          <Input field={form.$('password')} showPasswordToggle focus />
-          {error.code === 'invalid-credentials' && (
+          <Input {...form.$('password').bind()} showPasswordToggle focus />
+          {error && (
             <p className="error-message center">
               {intl.formatMessage(messages.invalidCredentials)}
             </p>
@@ -130,6 +127,7 @@ class Locked extends Component {
               buttonType="secondary"
               label={`${submitButtonLabel} ...`}
               loaded={false}
+              onClick={noop}
               disabled
             />
           ) : (
@@ -137,6 +135,7 @@ class Locked extends Component {
               type="submit"
               className="auth__button"
               label={submitButtonLabel}
+              onClick={noop}
             />
           )}
         </form>
@@ -145,4 +144,4 @@ class Locked extends Component {
   }
 }
 
-export default injectIntl(observer(Locked));
+export default injectIntl(Locked);
diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx
index 66a567fe4..185a6ad48 100644
--- a/src/components/auth/Login.tsx
+++ b/src/components/auth/Login.tsx
@@ -9,7 +9,7 @@ import { API_VERSION } from '../../environment-remote';
 import { serverBase } from '../../api/apiBase'; // TODO: Remove this line after fixing password recovery in-app
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
-import Input from '../ui/Input';
+import Input from '../ui/input/index';
 import Button from '../ui/button';
 import Link from '../ui/Link';
 import { H1 } from '../ui/headline';
@@ -136,8 +136,8 @@ class Login extends Component<IProps> {
               {intl.formatMessage(messages.serverLogout)}
             </p>
           )}
-          <Input field={form.$('email')} focus />
-          <Input field={form.$('password')} showPasswordToggle />
+          <Input {...form.$('email').bind()} focus />
+          <Input {...form.$('password').bind()} showPasswordToggle />
           {error.code === 'invalid-credentials' && (
             <>
               <p className="error-message center">
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.tsx
index 5086b0bbd..53fdbf842 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.tsx
@@ -1,11 +1,11 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { Component, FormEvent } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 
+import { noop } from 'lodash';
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
-import Input from '../ui/Input';
+import Input from '../ui/input/index';
 import Button from '../ui/button';
 import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
@@ -39,32 +39,33 @@ const messages = defineMessages({
   },
 });
 
-class Password extends Component {
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    isSubmitting: PropTypes.bool.isRequired,
-    signupRoute: PropTypes.string.isRequired,
-    loginRoute: PropTypes.string.isRequired,
-    status: MobxPropTypes.arrayOrObservableArray.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  isSubmitting: boolean;
+  signupRoute: string;
+  loginRoute: string;
+  status: string[];
+}
+
+@observer
+class Password extends Component<IProps> {
+  form: Form;
+
+  constructor(props: IProps) {
+    super(props);
 
-  form = (() => {
-    const { intl } = this.props;
-    return new Form(
-      {
-        fields: {
-          email: {
-            label: intl.formatMessage(messages.emailLabel),
-            value: '',
-            validators: [required, email],
-          },
+    this.form = new Form({
+      fields: {
+        email: {
+          label: this.props.intl.formatMessage(messages.emailLabel),
+          value: '',
+          validators: [required, email],
         },
       },
-      intl,
-    );
-  })();
+    });
+  }
 
-  submit(e) {
+  submit(e: FormEvent<HTMLFormElement>): void {
     e.preventDefault();
     this.form.submit({
       onSuccess: form => {
@@ -76,8 +77,7 @@ class Password extends Component {
 
   render() {
     const { form } = this;
-    const { intl } = this.props;
-    const { isSubmitting, signupRoute, loginRoute, status } = this.props;
+    const { isSubmitting, signupRoute, loginRoute, status, intl } = this.props;
 
     return (
       <div className="auth__container">
@@ -91,7 +91,7 @@ class Password extends Component {
               {intl.formatMessage(messages.successInfo)}
             </Infobox>
           )}
-          <Input field={form.$('email')} focus />
+          <Input {...form.$('email').bind()} focus />
           {status.length > 0 && status.includes('no-user') && (
             <p className="error-message center">
               {intl.formatMessage(messages.noUser)}
@@ -103,6 +103,7 @@ class Password extends Component {
               buttonType="secondary"
               label={`${intl.formatMessage(globalMessages.submit)} ...`}
               loaded={false}
+              onClick={noop}
               disabled
             />
           ) : (
@@ -110,6 +111,7 @@ class Password extends Component {
               type="submit"
               className="auth__button"
               label={intl.formatMessage(globalMessages.submit)}
+              onClick={noop}
             />
           )}
         </form>
@@ -124,4 +126,4 @@ class Password extends Component {
   }
 }
 
-export default injectIntl(observer(Password));
+export default injectIntl(Password);
diff --git a/src/components/auth/Signup.jsx b/src/components/auth/Signup.tsx
index e0337656c..af14430aa 100644
--- a/src/components/auth/Signup.jsx
+++ b/src/components/auth/Signup.tsx
@@ -1,20 +1,18 @@
-/* eslint jsx-a11y/anchor-is-valid: 0 */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiArrowLeftCircle } from '@mdi/js';
+import { noop } from 'lodash';
 import Form from '../../lib/Form';
 import { required, email, minLength } from '../../helpers/validation-helpers';
-import Input from '../ui/Input';
+import Input from '../ui/input/index';
 import Button from '../ui/button';
 import Link from '../ui/Link';
 import Icon from '../ui/icon';
-
-import { globalError as globalErrorPropType } from '../../prop-types';
 import { serverBase } from '../../api/apiBase';
 import { H1 } from '../ui/headline';
+import { GlobalError } from '../../@types/ferdium-components.types';
+import { Actions } from '../../actions/lib/actions';
 
 const messages = defineMessages({
   headline: {
@@ -33,10 +31,10 @@ const messages = defineMessages({
     id: 'signup.email.label',
     defaultMessage: 'Email address',
   },
-  // companyLabel: {
-  //   id: 'signup.company.label',
-  //   defaultMessage: 'Company',
-  // },
+  companyLabel: {
+    id: 'signup.company.label',
+    defaultMessage: 'Company',
+  },
   passwordLabel: {
     id: 'signup.password.label',
     defaultMessage: 'Password',
@@ -67,45 +65,48 @@ const messages = defineMessages({
   },
 });
 
-class Signup extends Component {
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    isSubmitting: PropTypes.bool.isRequired,
-    loginRoute: PropTypes.string.isRequired,
-    error: globalErrorPropType.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  isSubmitting: boolean;
+  loginRoute: string;
+  error: GlobalError;
+  actions?: Actions;
+}
 
-  form = (() => {
-    const { intl } = this.props;
-    return new Form(
-      {
-        fields: {
-          firstname: {
-            label: intl.formatMessage(messages.firstnameLabel),
-            value: '',
-            validators: [required],
-          },
-          lastname: {
-            label: intl.formatMessage(messages.lastnameLabel),
-            value: '',
-            validators: [required],
-          },
-          email: {
-            label: intl.formatMessage(messages.emailLabel),
-            value: '',
-            validators: [required, email],
-          },
-          password: {
-            label: intl.formatMessage(messages.passwordLabel),
-            value: '',
-            validators: [required, minLength(6)],
-            type: 'password',
-          },
+@inject('actions')
+@observer
+class Signup extends Component<IProps> {
+  form: Form;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.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',
         },
       },
-      intl,
-    );
-  })();
+    });
+  }
 
   submit(e) {
     e.preventDefault();
@@ -138,12 +139,12 @@ class Signup extends Component {
             </Link>
             <H1>{intl.formatMessage(messages.headline)}</H1>
             <div className="grid__row">
-              <Input field={form.$('firstname')} focus />
-              <Input field={form.$('lastname')} />
+              <Input {...form.$('firstname').bind()} focus />
+              <Input {...form.$('lastname').bind()} />
             </div>
-            <Input field={form.$('email')} />
+            <Input {...form.$('email').bind()} />
             <Input
-              field={form.$('password')}
+              {...form.$('password').bind()}
               showPasswordToggle
               scorePassword
             />
@@ -158,12 +159,14 @@ class Signup extends Component {
                 label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
                 loaded={false}
                 disabled
+                onClick={noop}
               />
             ) : (
               <Button
                 type="submit"
                 className="auth__button"
                 label={intl.formatMessage(messages.submitButtonLabel)}
+                onClick={noop}
               />
             )}
             <p className="legal">
@@ -203,4 +206,4 @@ class Signup extends Component {
   }
 }
 
-export default injectIntl(inject('actions')(observer(Signup)));
+export default injectIntl(Signup);
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 069b6643c..eeb9ef54d 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -11,7 +11,7 @@ import Recipe from '../../../models/Recipe';
 import Service from '../../../models/Service';
 import Tabs from '../../ui/Tabs/Tabs';
 import TabItem from '../../ui/Tabs/TabItem';
-import Input from '../../ui/Input';
+import Input from '../../ui/input/index';
 import Toggle from '../../ui/Toggle';
 import Slider from '../../ui/Slider';
 import Button from '../../ui/button';
@@ -292,7 +292,7 @@ class EditServiceForm extends Component {
         <div className="settings__body">
           <form onSubmit={e => this.submit(e)} id="form">
             <div className="service-name">
-              <Input field={form.$('name')} focus />
+              <Input {...form.$('name').bind()} focus />
             </div>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs active={activeTabIndex}>
@@ -314,7 +314,7 @@ class EditServiceForm extends Component {
                 )}
                 {recipe.hasCustomUrl && (
                   <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
-                    <Input field={form.$('customUrl')} />
+                    <Input {...form.$('customUrl').bind()} />
                     {form.error === 'url-validation-error' && (
                       <p className="franz-form__error">
                         {intl.formatMessage(messages.customUrlValidationError, {
@@ -435,17 +435,17 @@ class EditServiceForm extends Component {
                     <div className="grid">
                       <div className="grid__row">
                         <Input
-                          field={form.$('proxy.host')}
+                          {...form.$('proxy.host').bind()}
                           className="proxyHost"
                         />
-                        <Input field={form.$('proxy.port')} />
+                        <Input {...form.$('proxy.port').bind()} />
                       </div>
                     </div>
                     <div className="grid">
                       <div className="grid__row">
-                        <Input field={form.$('proxy.user')} />
+                        <Input {...form.$('proxy.user').bind()} />
                         <Input
-                          field={form.$('proxy.password')}
+                          {...form.$('proxy.password').bind()}
                           showPasswordToggle
                         />
                       </div>
@@ -464,7 +464,7 @@ class EditServiceForm extends Component {
             )}
 
             <div className="user-agent">
-              <Input field={form.$('userAgentPref')} />
+              <Input {...form.$('userAgentPref').bind()} />
               <p className="settings__help">
                 {intl.formatMessage(globalMessages.userAgentHelp)}
               </p>
diff --git a/src/components/settings/settings/EditSettingsForm.jsx b/src/components/settings/settings/EditSettingsForm.tsx
index a327dccac..5c422b977 100644
--- a/src/components/settings/settings/EditSettingsForm.jsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -1,17 +1,14 @@
 import { systemPreferences } from '@electron/remote';
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import prettyBytes from 'pretty-bytes';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js';
-
 import Form from '../../../lib/Form';
 import Button from '../../ui/button';
-import Toggle from '../../ui/Toggle';
+import Toggle from '../../ui/Toggle.js';
 import Select from '../../ui/Select';
-import Input from '../../ui/Input';
+import Input from '../../ui/input/index';
 import ColorPickerInput from '../../ui/ColorPickerInput';
 import Infobox from '../../ui/Infobox';
 import { H1, H2, H3, H5 } from '../../ui/headline';
@@ -20,9 +17,7 @@ import {
   userDataPath,
   userDataRecipesPath,
 } from '../../../environment-remote';
-
 import { updateVersionParse } from '../../../helpers/update-helpers';
-
 import {
   DEFAULT_ACCENT_COLOR,
   DEFAULT_APP_SETTINGS,
@@ -264,6 +259,7 @@ const Hr = () => (
     style={{ marginBottom: 20, borderStyle: 'dashed' }}
   />
 );
+
 const HrSections = () => (
   <hr
     className="settings__hr-sections"
@@ -271,32 +267,41 @@ const HrSections = () => (
   />
 );
 
-class EditSettingsForm extends Component {
-  static propTypes = {
-    checkForUpdates: PropTypes.func.isRequired,
-    installUpdate: PropTypes.func.isRequired,
-    form: PropTypes.instanceOf(Form).isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    isCheckingForUpdates: PropTypes.bool.isRequired,
-    isUpdateAvailable: PropTypes.bool.isRequired,
-    noUpdateAvailable: PropTypes.bool.isRequired,
-    updateIsReadyToInstall: PropTypes.bool.isRequired,
-    updateFailed: PropTypes.bool.isRequired,
-    isClearingAllCache: PropTypes.bool.isRequired,
-    onClearAllCache: PropTypes.func.isRequired,
-    getCacheSize: PropTypes.func.isRequired,
-    isTodosActivated: PropTypes.bool.isRequired,
-    automaticUpdates: PropTypes.bool.isRequired,
-    isDarkmodeEnabled: PropTypes.bool.isRequired,
-    isAdaptableDarkModeEnabled: PropTypes.bool.isRequired,
-    isUseGrayscaleServicesEnabled: PropTypes.bool.isRequired,
-    openProcessManager: PropTypes.func.isRequired,
-    isSplitModeEnabled: PropTypes.bool.isRequired,
-    isOnline: PropTypes.bool.isRequired,
-    serverURL: PropTypes.string.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  form: Form;
+  isCheckingForUpdates: boolean;
+  isUpdateAvailable: boolean;
+  noUpdateAvailable: boolean;
+  updateIsReadyToInstall: boolean;
+  updateFailed: boolean;
+  isClearingAllCache: boolean;
+  isTodosActivated: boolean;
+  automaticUpdates: boolean;
+  isDarkmodeEnabled: boolean;
+  isAdaptableDarkModeEnabled: boolean;
+  isUseGrayscaleServicesEnabled: boolean;
+  lockingFeatureEnabled: boolean;
+  isSplitModeEnabled: boolean;
+  isOnline: boolean;
+  showServicesUpdatedInfoBar: boolean;
+  updateVersion: string;
+  serverURL: string;
+  onClearAllCache: () => void;
+  getCacheSize: () => void;
+  checkForUpdates: () => void;
+  installUpdate: () => void;
+  openProcessManager: () => void;
+  onSubmit: (...args: any[]) => void;
+}
+
+interface IState {
+  activeSetttingsTab: string;
+  clearCacheButtonClicked: boolean;
+}
 
-  constructor(props) {
+@observer
+class EditSettingsForm extends Component<IProps, IState> {
+  constructor(props: IProps) {
     super(props);
 
     this.state = {
@@ -358,8 +363,8 @@ class EditSettingsForm extends Component {
       isTodosActivated,
       isOnline,
       serverURL,
+      intl,
     } = this.props;
-    const { intl } = this.props;
 
     let updateButtonLabelMessage = messages.buttonSearchForUpdate;
     if (isCheckingForUpdates) {
@@ -520,7 +525,7 @@ class EditSettingsForm extends Component {
                 <Toggle field={form.$('reloadAfterResume')} />
                 {reloadAfterResume && (
                   <div>
-                    <Input field={form.$('reloadAfterResumeTime')} />
+                    <Input {...form.$('reloadAfterResumeTime').bind()} />
                     <Hr />
                   </div>
                 )}
@@ -541,7 +546,7 @@ class EditSettingsForm extends Component {
                         <Input
                           placeholder="Todo Server"
                           onChange={e => this.submit(e)}
-                          field={form.$('customTodoServer')}
+                          {...form.$('customTodoServer').bind()}
                         />
                         <p
                           className="settings__message"
@@ -580,7 +585,7 @@ class EditSettingsForm extends Component {
                         <Input
                           placeholder="17:00"
                           onChange={e => this.submit(e)}
-                          field={form.$('scheduledDNDStart')}
+                          {...form.$('scheduledDNDStart').bind()}
                           type="time"
                         />
                       </div>
@@ -593,7 +598,7 @@ class EditSettingsForm extends Component {
                         <Input
                           placeholder="09:00"
                           onChange={e => this.submit(e)}
-                          field={form.$('scheduledDNDEnd')}
+                          {...form.$('scheduledDNDEnd').bind()}
                           type="time"
                         />
                       </div>
@@ -711,7 +716,7 @@ class EditSettingsForm extends Component {
                     max={SPLIT_COLUMNS_MAX}
                     placeholder={`${SPLIT_COLUMNS_MIN}-${SPLIT_COLUMNS_MAX}`}
                     onChange={e => this.submit(e)}
-                    field={form.$('splitColumns')}
+                    {...form.$('splitColumns').bind()}
                   />
                 )}
 
@@ -825,7 +830,7 @@ class EditSettingsForm extends Component {
                     <Input
                       placeholder={intl.formatMessage(messages.lockedPassword)}
                       onChange={e => this.submit(e)}
-                      field={form.$('lockedPassword')}
+                      {...form.$('lockedPassword')}
                       type="password"
                       scorePassword
                       showPasswordToggle
@@ -835,7 +840,7 @@ class EditSettingsForm extends Component {
                     <Input
                       placeholder="Lock after inactivity"
                       onChange={e => this.submit(e)}
-                      field={form.$('inactivityLock')}
+                      {...form.$('inactivityLock')}
                       autoFocus
                     />
                     <p>{intl.formatMessage(messages.inactivityLockInfo)}</p>
@@ -927,7 +932,7 @@ class EditSettingsForm extends Component {
                 <Input
                   placeholder="User Agent"
                   onChange={e => this.submit(e)}
-                  field={form.$('userAgentPref')}
+                  {...form.$('userAgentPref').bind()}
                 />
                 <p className="settings__help">
                   {intl.formatMessage(globalMessages.userAgentHelp)}
@@ -1128,4 +1133,4 @@ class EditSettingsForm extends Component {
   }
 }
 
-export default injectIntl(observer(EditSettingsForm));
+export default injectIntl(EditSettingsForm);
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.tsx
index c2773a47d..3b604a79f 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.tsx
@@ -1,9 +1,8 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { Component, FormEvent, FormEventHandler, ReactElement } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { Link } from 'react-router-dom';
-
+import { noop } from 'lodash';
 import Input from '../../ui/input/index';
 import Form from '../../../lib/Form';
 import Button from '../../ui/button';
@@ -38,15 +37,16 @@ const messages = defineMessages({
   },
 });
 
-class EditUserForm extends Component {
-  static propTypes = {
-    status: MobxPropTypes.observableArray.isRequired,
-    form: PropTypes.instanceOf(Form).isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    isSaving: PropTypes.bool.isRequired,
-  };
+interface IProps extends WrappedComponentProps {
+  status: string[];
+  form: Form;
+  onSubmit: FormEventHandler<HTMLFormElement>;
+  isSaving: boolean;
+}
 
-  submit(e) {
+@observer
+class EditUserForm extends Component<IProps> {
+  submit(e: FormEvent<HTMLFormElement>): void {
     e.preventDefault();
     this.props.form.submit({
       onSuccess: form => {
@@ -57,14 +57,14 @@ class EditUserForm extends Component {
     });
   }
 
-  render() {
+  render(): ReactElement {
     const {
       // user,
       status,
       form,
       isSaving,
+      intl,
     } = this.props;
-    const { intl } = this.props;
 
     return (
       <div className="settings__main">
@@ -92,9 +92,9 @@ class EditUserForm extends Component {
               <Input {...form.$('lastname').bind()} />
             </div>
             <Input {...form.$('email').bind()} />
-            <Radio field={form.$('accountType')} />
+            <Radio field={form.$('accountType')} className="" />
             {form.$('accountType').value === 'company' && (
-              <Input field={form.$('organization')} />
+              <Input {...form.$('organization').bind()} />
             )}
             <H2>{intl.formatMessage(messages.headlinePassword)}</H2>
             <Input {...form.$('oldPassword').bind()} showPasswordToggle />
@@ -114,12 +114,14 @@ class EditUserForm extends Component {
               loaded={!isSaving}
               buttonType="secondary"
               disabled
+              onClick={noop}
             />
           ) : (
             <Button
               type="submit"
               label={intl.formatMessage(messages.buttonSave)}
               htmlForm="form"
+              onClick={noop}
             />
           )}
         </div>
@@ -128,4 +130,4 @@ class EditUserForm extends Component {
   }
 }
 
-export default injectIntl(observer(EditUserForm));
+export default injectIntl(EditUserForm);
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx
index 7e3965331..da1fffb71 100644
--- a/src/components/ui/ColorPickerInput.tsx
+++ b/src/components/ui/ColorPickerInput.tsx
@@ -1,15 +1,25 @@
-import { ChangeEvent, Component, createRef, RefObject } from 'react';
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  Component,
+  createRef,
+  RefObject,
+} from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { SliderPicker } from 'react-color';
+import { noop } from 'lodash';
 import { Field } from '../../@types/mobx-form.types';
 
 interface IProps {
   field: Field;
   className?: string;
   focus?: boolean;
+  onChange: ChangeEventHandler<HTMLInputElement>;
 }
 
+// TODO - [TS DEBT] check if field can be spread instead of having it single field attribute in interface
+@observer
 class ColorPickerInput extends Component<IProps> {
   private inputElement: RefObject<HTMLInputElement> =
     createRef<HTMLInputElement>();
@@ -22,7 +32,9 @@ class ColorPickerInput extends Component<IProps> {
   }
 
   onChange(e: ChangeEvent<HTMLInputElement>) {
-    const { field } = this.props;
+    const { field, onChange = noop } = this.props;
+
+    onChange(e);
     if (field.onChange) {
       field.onChange(e);
     }
@@ -87,4 +99,4 @@ class ColorPickerInput extends Component<IProps> {
   }
 }
 
-export default observer(ColorPickerInput);
+export default ColorPickerInput;
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
deleted file mode 100644
index c22dc5838..000000000
--- a/src/components/ui/Input.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import {
-  ChangeEvent,
-  ChangeEventHandler,
-  Component,
-  createRef,
-  ReactElement,
-  RefObject,
-} from 'react';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { mdiEye, mdiEyeOff } from '@mdi/js';
-import { noop } from 'lodash';
-import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
-import Icon from './icon';
-import { Field } from '../../@types/mobx-form.types';
-
-const messages = defineMessages({
-  passwordToggle: {
-    id: 'settings.app.form.passwordToggle',
-    defaultMessage: 'Password toggle',
-  },
-});
-
-interface IProps extends WrappedComponentProps {
-  field: Field;
-  className?: string;
-  focus?: boolean;
-  showPasswordToggle?: boolean;
-  showLabel?: boolean;
-  scorePassword?: boolean;
-  prefix?: string;
-  suffix?: string;
-  placeholder?: string;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-}
-
-interface IState {
-  showPassword: boolean;
-  passwordScore: number;
-}
-
-// Can this file be merged into the './input/index.tsx' file?
-@observer
-class Input extends Component<IProps, IState> {
-  private inputElement: RefObject<HTMLInputElement> =
-    createRef<HTMLInputElement>();
-
-  constructor(props: IProps) {
-    super(props);
-
-    this.state = {
-      showPassword: false,
-      passwordScore: 0,
-    };
-  }
-
-  componentDidMount(): void {
-    const { focus = false } = this.props;
-    if (focus) {
-      this.focus();
-    }
-  }
-
-  onChange(e: ChangeEvent<HTMLInputElement>): void {
-    const { field, scorePassword, onChange = noop } = this.props;
-
-    if (field.onChange) {
-      onChange(e);
-      field.onChange(e);
-    }
-
-    if (scorePassword) {
-      this.setState({
-        passwordScore: scorePasswordFunc(field.value as string),
-      });
-    }
-  }
-
-  focus() {
-    if (this.inputElement && this.inputElement.current) {
-      this.inputElement.current!.focus();
-    }
-  }
-
-  render(): ReactElement {
-    const {
-      field,
-      className = null,
-      showPasswordToggle = false,
-      showLabel = true,
-      scorePassword = false,
-      prefix = '',
-      suffix = '',
-      intl,
-    } = this.props;
-
-    const { passwordScore } = this.state;
-
-    let { type } = field;
-    if (type === 'password' && this.state.showPassword) {
-      type = 'text';
-    }
-
-    return (
-      <div
-        className={classnames({
-          'franz-form__field': true,
-          'has-error': field.error,
-          [`${className}`]: className,
-        })}
-      >
-        <div className="franz-form__input-wrapper">
-          {prefix && <span className="franz-form__input-prefix">{prefix}</span>}
-          <input
-            id={field.id}
-            type={type}
-            className="franz-form__input"
-            name={field.name}
-            value={field.value}
-            placeholder={field.placeholder}
-            onChange={e => this.onChange(e)}
-            onBlur={field.onBlur}
-            onFocus={field.onFocus}
-            ref={this.inputElement}
-            disabled={field.disabled}
-          />
-          {suffix && <span className="franz-form__input-suffix">{suffix}</span>}
-          {showPasswordToggle && (
-            <button
-              type="button"
-              className={classnames({
-                'franz-form__input-modifier': true,
-              })}
-              onClick={() =>
-                this.setState(prevState => ({
-                  showPassword: !prevState.showPassword,
-                }))
-              }
-              tabIndex={-1}
-              aria-label={intl.formatMessage(messages.passwordToggle)}
-            >
-              <Icon icon={this.state.showPassword ? mdiEye : mdiEyeOff} />
-            </button>
-          )}
-          {scorePassword && (
-            <div className="franz-form__password-score">
-              {/* <progress value={this.state.passwordScore} max="100" /> */}
-              <meter
-                value={passwordScore < 5 ? 5 : passwordScore}
-                low={30}
-                high={75}
-                optimum={100}
-                max={100}
-              />
-            </div>
-          )}
-        </div>
-        {field.label && showLabel && (
-          <label className="franz-form__label" htmlFor={field.name}>
-            {field.label}
-          </label>
-        )}
-        {field.error && <div className="franz-form__error">{field.error}</div>}
-      </div>
-    );
-  }
-}
-
-export default injectIntl(Input);
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index 2a36d7aa9..cb26c0ea4 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -1,5 +1,4 @@
 import { mdiEye, mdiEyeOff } from '@mdi/js';
-import Icon from '@mdi/react';
 import classnames from 'classnames';
 import {
   Component,
@@ -7,9 +6,13 @@ import {
   InputHTMLAttributes,
   ReactElement,
   RefObject,
+  KeyboardEvent,
 } from 'react';
-import injectSheet, { WithStylesProps } from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
 import { noop } from 'lodash';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import Icon from '../icon';
 import { IFormField } from '../typings/generic';
 import Error from '../error';
 import Label from '../label';
@@ -17,6 +20,12 @@ import Wrapper from '../wrapper';
 import { scorePasswordFunc } from './scorePassword';
 import styles from './styles';
 
+const messages = defineMessages({
+  passwordToggle: {
+    id: 'settings.app.form.passwordToggle',
+    defaultMessage: 'Password toggle',
+  },
+});
 interface IData {
   [index: string]: string;
 }
@@ -24,7 +33,8 @@ interface IData {
 interface IProps
   extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
-    WithStylesProps<typeof styles> {
+    WithStylesProps<typeof styles>,
+    WrappedComponentProps {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
@@ -40,8 +50,10 @@ interface IState {
   passwordScore: number;
 }
 
-class InputComponent extends Component<IProps, IState> {
-  private inputRef: RefObject<HTMLInputElement> = createRef<HTMLInputElement>();
+@observer
+class Input extends Component<IProps, IState> {
+  private inputElement: RefObject<HTMLInputElement> =
+    createRef<HTMLInputElement>();
 
   constructor(props: IProps) {
     super(props);
@@ -53,36 +65,40 @@ class InputComponent extends Component<IProps, IState> {
   }
 
   componentDidMount(): void {
-    const { focus, data = {} } = this.props;
+    const { focus = false, data = {} } = this.props;
 
-    if (this.inputRef && this.inputRef.current) {
+    if (this.inputElement && this.inputElement.current) {
       if (focus) {
-        this.inputRef.current.focus();
+        this.inputElement.current.focus();
       }
 
-      for (const key of Object.keys(data))
-        this.inputRef.current!.dataset[key] = data[key];
+      for (const key of Object.keys(data)) {
+        this.inputElement.current.dataset[key] = data[key];
+      }
     }
   }
 
   onChange(e: React.ChangeEvent<HTMLInputElement>): void {
-    const { scorePassword, onChange } = this.props;
+    const { scorePassword, onChange = noop } = this.props;
 
-    if (onChange) {
-      onChange(e);
-    }
+    onChange(e);
 
-    if (this.inputRef && this.inputRef.current && scorePassword) {
+    if (scorePassword) {
+      console.log(
+        '--->',
+        e.target.value,
+        scorePasswordFunc(e.target.value as string),
+      );
       this.setState({
-        passwordScore: scorePasswordFunc(this.inputRef.current.value),
+        passwordScore: scorePasswordFunc(e.target.value),
       });
     }
   }
 
-  onInputKeyPress(e: React.KeyboardEvent): void {
+  onInputKeyPress(e: KeyboardEvent<HTMLInputElement>): void {
     if (e.key === 'Enter') {
-      const { onEnterKey } = this.props;
-      onEnterKey && onEnterKey();
+      const { onEnterKey = noop } = this.props;
+      onEnterKey();
     }
   }
 
@@ -113,10 +129,9 @@ class InputComponent extends Component<IProps, IState> {
       type = 'text',
       disabled = false,
       readOnly,
+      intl,
     } = this.props;
-
     const { showPassword, passwordScore } = this.state;
-
     const inputType = type === 'password' && showPassword ? 'text' : type;
 
     return (
@@ -125,79 +140,85 @@ class InputComponent extends Component<IProps, IState> {
         identifier="franz-input"
         noMargin={noMargin}
       >
-        <Label
-          title={label}
-          showLabel={showLabel}
-          htmlFor={id}
-          className={classes.label}
-          isRequired={required}
+        {label && showLabel && (
+          <Label
+            title={label}
+            showLabel={showLabel}
+            htmlFor={id}
+            className={classes.label}
+            isRequired={required}
+          />
+        )}
+        <div
+          className={classnames({
+            [`${inputClassName}`]: inputClassName,
+            // [`${classes.hasPasswordScore}`]: scorePassword,
+            [`${classes.wrapper}`]: true,
+            [`${classes.disabled}`]: disabled,
+            [`${classes.hasError}`]: error,
+          })}
         >
+          {prefix && <span className={classes.prefix}>{prefix}</span>}
+          <input
+            id={id}
+            type={inputType}
+            name={name}
+            value={value as string}
+            placeholder={placeholder}
+            spellCheck={spellCheck}
+            className={classes.input}
+            ref={this.inputElement}
+            onChange={this.onChange.bind(this)}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            disabled={disabled}
+            onKeyPress={this.onInputKeyPress.bind(this)}
+            min={min}
+            max={max}
+            step={step}
+            readOnly={readOnly}
+          />
+
+          {suffix && <span className={classes.suffix}>{suffix}</span>}
+
+          {showPasswordToggle && (
+            <button
+              type="button"
+              className={classnames({
+                'franz-form__input-modifier': true,
+              })}
+              onClick={() =>
+                this.setState(prevState => ({
+                  showPassword: !prevState.showPassword,
+                }))
+              }
+              tabIndex={-1}
+              aria-label={intl.formatMessage(messages.passwordToggle)}
+            >
+              <Icon icon={this.state.showPassword ? mdiEye : mdiEyeOff} />
+            </button>
+          )}
+        </div>
+        {scorePassword && (
           <div
             className={classnames({
-              [`${inputClassName}`]: inputClassName,
-              [`${classes.hasPasswordScore}`]: scorePassword,
-              [`${classes.wrapper}`]: true,
-              [`${classes.disabled}`]: disabled,
+              [`${classes.passwordScore}`]: true,
               [`${classes.hasError}`]: error,
             })}
           >
-            {prefix && <span className={classes.prefix}>{prefix}</span>}
-            <input
-              id={id}
-              type={inputType}
-              name={name}
-              value={value as string}
-              placeholder={placeholder}
-              spellCheck={spellCheck}
-              className={classes.input}
-              ref={this.inputRef}
-              onChange={this.onChange.bind(this)}
-              onFocus={onFocus}
-              onBlur={onBlur}
-              disabled={disabled}
-              onKeyPress={this.onInputKeyPress.bind(this)}
-              min={min}
-              max={max}
-              step={step}
-              readOnly={readOnly}
+            <meter
+              value={passwordScore < 5 ? 5 : passwordScore}
+              low={30}
+              high={75}
+              optimum={100}
+              max={100}
             />
-            {suffix && <span className={classes.suffix}>{suffix}</span>}
-            {showPasswordToggle && (
-              <button
-                type="button"
-                className={classes.formModifier}
-                onClick={() =>
-                  this.setState(prevState => ({
-                    showPassword: !prevState.showPassword,
-                  }))
-                }
-                tabIndex={-1}
-              >
-                <Icon path={!showPassword ? mdiEye : mdiEyeOff} />
-              </button>
-            )}
           </div>
-          {scorePassword && (
-            <div
-              className={classnames({
-                [`${classes.passwordScore}`]: true,
-                [`${classes.hasError}`]: error,
-              })}
-            >
-              <meter
-                value={passwordScore < 5 ? 5 : passwordScore}
-                low={30}
-                high={75}
-                optimum={100}
-                max={100}
-              />
-            </div>
-          )}
-        </Label>
+        )}
         {error && <Error message={error} />}
       </Wrapper>
     );
   }
 }
 
-export default injectSheet(styles, { injectTheme: true })(InputComponent);
+export default injectIntl(withStyles(styles, { injectTheme: true })(Input));
diff --git a/src/components/ui/input/styles.ts b/src/components/ui/input/styles.ts
index 04c1b3991..ebae0e40d 100644
--- a/src/components/ui/input/styles.ts
+++ b/src/components/ui/input/styles.ts
@@ -49,7 +49,6 @@ export default (theme: Theme) => ({
   },
   passwordScore: {
     background: theme.inputScorePasswordBackground,
-    border: theme.inputBorder,
     borderTopWidth: 0,
     borderBottomLeftRadius: theme.borderRadiusSmall,
     borderBottomRightRadius: theme.borderRadiusSmall,
diff --git a/src/containers/auth/LockedScreen.tsx b/src/containers/auth/LockedScreen.tsx
index 611a0757c..a4cb43f73 100644
--- a/src/containers/auth/LockedScreen.tsx
+++ b/src/containers/auth/LockedScreen.tsx
@@ -12,16 +12,19 @@ interface IProps {
   stores?: RealStores;
 }
 
+interface IState {
+  error: boolean;
+}
+
 @inject('stores', 'actions')
 @observer
-class LockedScreen extends Component<IProps> {
-  state = {
-    error: false,
-  };
-
+class LockedScreen extends Component<IProps, IState> {
   constructor(props: StoresProps) {
     super(props);
 
+    this.state = {
+      error: false,
+    };
     this.onSubmit = this.onSubmit.bind(this);
     this.unlock = this.unlock.bind(this);
   }
@@ -43,9 +46,7 @@ class LockedScreen extends Component<IProps> {
       });
     } else {
       this.setState({
-        error: {
-          code: 'invalid-credentials',
-        },
+        error: true,
       });
     }
   }
@@ -71,7 +72,7 @@ class LockedScreen extends Component<IProps> {
             unlock={this.unlock}
             useTouchIdToUnlock={useTouchIdToUnlock}
             isSubmitting={stores!.user.loginRequest.isExecuting}
-            error={this.state.error || {}}
+            error={this.state.error}
           />
         </div>
       </div>
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx
index 162d422ce..0d8a0a758 100644
--- a/src/containers/settings/EditSettingsScreen.tsx
+++ b/src/containers/settings/EditSettingsScreen.tsx
@@ -1,7 +1,7 @@
 import { ipcRenderer } from 'electron';
 import { Component, ReactElement } from 'react';
 import { inject, observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { FormFields } from '../../@types/mobx-form.types';
 import { StoresProps } from '../../@types/ferdium-components.types';
@@ -314,10 +314,10 @@ const messages = defineMessages({
   },
 });
 
-interface EditSettingsScreenProps extends StoresProps {
-  intl: any;
-}
+interface EditSettingsScreenProps extends StoresProps, WrappedComponentProps {}
 
+@inject('stores', 'actions')
+@observer
 class EditSettingsScreen extends Component<EditSettingsScreenProps> {
   state = {
     lockedPassword: '',
@@ -962,9 +962,6 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           }
           isSplitModeEnabled={this.props.stores.settings.app.splitMode}
           isTodosActivated={this.props.stores.todos.isFeatureEnabledByUser}
-          isUsingCustomTodoService={
-            this.props.stores.todos.isUsingCustomTodoService
-          }
           openProcessManager={() => this.openProcessManager()}
           isOnline={app.isOnline}
           serverURL={importExportURL()}
@@ -974,6 +971,4 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
   }
 }
 
-export default injectIntl(
-  inject('stores', 'actions')(observer(EditSettingsScreen)),
-);
+export default injectIntl(EditSettingsScreen);
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.tsx
index acba5a90d..e20f7641b 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.tsx
@@ -1,17 +1,14 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import injectSheet from 'react-jss';
+import { Component, FormEvent, ReactElement } from 'react';
+import injectSheet, { WithStylesProps } from 'react-jss';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import classnames from 'classnames';
-
+import { noop } from 'lodash';
 import Modal from '../../components/ui/Modal';
-import Input from '../../components/ui/Input';
+import Input from '../../components/ui/input/index';
 import Button from '../../components/ui/button';
-
 import { state, resetState, sendCredentials, cancelLogin } from './store';
 import Form from './Form';
-
 import styles from './styles';
 import globalMessages from '../../i18n/globalMessages';
 import { H1 } from '../../components/ui/headline';
@@ -23,33 +20,31 @@ const messages = defineMessages({
   },
 });
 
-class BasicAuthModal extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
+interface IProps
+  extends WithStylesProps<typeof styles>,
+    WrappedComponentProps {}
 
-  submit(e) {
+@observer
+class BasicAuthModal extends Component<IProps> {
+  submit(e: FormEvent<HTMLFormElement>): void {
     e.preventDefault();
-
     const values = Form.values();
-
     sendCredentials(values.user, values.password);
     resetState();
   }
 
-  cancel() {
+  cancel(): void {
     cancelLogin();
     this.close();
   }
 
-  close() {
+  close(): void {
     resetState();
     state.isModalVisible = false;
   }
 
-  render() {
+  render(): ReactElement | null {
     const { classes } = this.props;
-
     const { isModalVisible, authInfo } = state;
 
     if (!authInfo) {
@@ -76,9 +71,9 @@ class BasicAuthModal extends Component {
           onSubmit={this.submit.bind(this)}
           className={classnames('franz-form', classes.form)}
         >
-          <Input field={Form.$('user')} showLabel={false} />
+          <Input {...Form.$('user').bind()} showLabel={false} />
           <Input
-            field={Form.$('password')}
+            {...Form.$('password').bind()}
             showLabel={false}
             showPasswordToggle
           />
@@ -89,7 +84,11 @@ class BasicAuthModal extends Component {
               buttonType="secondary"
               onClick={this.cancel.bind(this)}
             />
-            <Button type="submit" label={intl.formatMessage(messages.signIn)} />
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.signIn)}
+              onClick={noop}
+            />
           </div>
         </form>
       </Modal>
@@ -97,5 +96,5 @@ class BasicAuthModal extends Component {
   }
 }
 export default injectIntl(
-  injectSheet(styles, { injectTheme: true })(observer(BasicAuthModal)),
+  injectSheet(styles, { injectTheme: true })(BasicAuthModal),
 );
diff --git a/src/features/basicAuth/store.ts b/src/features/basicAuth/store.ts
index e0ae8ba17..0fc289916 100644
--- a/src/features/basicAuth/store.ts
+++ b/src/features/basicAuth/store.ts
@@ -3,7 +3,17 @@ import { ipcRenderer } from 'electron';
 
 const debug = require('../../preload-safe-debug')('Ferdium:feature:basicAuth');
 
-const defaultState = {
+interface IAuthInfo {
+  host: string;
+  port: number;
+}
+interface IDefaultState {
+  isModalVisible: boolean;
+  service: null;
+  authInfo: IAuthInfo | null;
+}
+
+const defaultState: IDefaultState = {
   isModalVisible: true,
   service: null,
   authInfo: null,
diff --git a/src/features/publishDebugInfo/Component.tsx b/src/features/publishDebugInfo/Component.tsx
index e265902dd..3c6729ba0 100644
--- a/src/features/publishDebugInfo/Component.tsx
+++ b/src/features/publishDebugInfo/Component.tsx
@@ -163,7 +163,6 @@ class PublishDebugLogModal extends Component<IProps, IState> {
             <p className={classes.info}>
               {intl.formatMessage(messages.published)}
             </p>
-            {/* TODO - [TS DEBT] need to check if <Input/> take readOnly and use it  */}
             <Input showLabel={false} value={`${DEBUG_API}/${log}`} readOnly />
           </>
         )}
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 63face219..c34106044 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -62,7 +62,7 @@
   "locked.password.label": "Password",
   "locked.submit.label": "Unlock",
   "locked.touchId": "Unlock with Touch ID",
-  "locked.touchIdPrompt": "unlock via Touch ID",
+  "locked.touchIdPrompt": "Unlock with Touch ID",
   "locked.unlockWithPassword": "Unlock with Password",
   "login.changeServer": "Change here!",
   "login.changeServerMessage": "You are using {serverNameParse} Server, do you want to switch?",
@@ -448,6 +448,7 @@
   "sidebar.openWorkspaceDrawer": "Open workspace drawer",
   "sidebar.splitModeToggle": "Split Mode Toggle",
   "sidebar.unmuteApp": "Enable notifications & audio",
+  "signup.company.label": "Company",
   "signup.email.label": "Email address",
   "signup.emailDuplicate": "A user with that email address already exists",
   "signup.firstname.label": "First Name",