Convert LoginScreen component tree to typescript (#721)

10 files changed, 163 insertions, 128 deletions

diff --git a/src/@types/mobx-form.types.ts b/src/@types/mobx-form.types.ts
index 6bc20f5e1..7caddc9e4 100644
--- a/src/@types/mobx-form.types.ts
+++ b/src/@types/mobx-form.types.ts
@@ -1,3 +1,6 @@
+import { ChangeEventHandler, FocusEventHandler } from 'react';
+import { GlobalError } from './ferdium-components.types';
+
 export interface FormFieldOptions {
   value?: string;
   label?: string;
@@ -18,3 +21,20 @@ export interface FormFields {
     };
   };
 }
+
+export interface Field extends Partial<Listeners> {
+  id?: string;
+  type?: string;
+  name?: string;
+  value: string;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: GlobalError | string;
+}
+
+export interface Listeners {
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLElement>;
+  onFocus?: FocusEventHandler<HTMLElement>;
+}
diff --git a/src/@types/mobx-react-form.d.ts b/src/@types/mobx-react-form.d.ts
new file mode 100644
index 000000000..4e19dc1c2
--- /dev/null
+++ b/src/@types/mobx-react-form.d.ts
@@ -0,0 +1 @@
+declare module 'mobx-react-form';
diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.tsx
index 33b4d3e0d..65381fe04 100644
--- a/src/components/auth/Login.jsx
+++ b/src/components/auth/Login.tsx
@@ -1,10 +1,8 @@
-/* eslint jsx-a11y/anchor-is-valid: 0 */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, FormEvent, ReactElement } from 'react';
 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 Icon from '../ui/icon';
 import { LIVE_FRANZ_API } from '../../config';
 import { API_VERSION } from '../../environment-remote';
@@ -14,9 +12,11 @@ import { required, email } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
 import Button from '../ui/button';
 import Link from '../ui/Link';
-
-import { globalError as globalErrorPropType } from '../../prop-types';
 import { H1 } from '../ui/headline';
+import {
+  GlobalError,
+  StoresProps,
+} from '../../@types/ferdium-components.types';
 
 const messages = defineMessages({
   headline: {
@@ -65,40 +65,43 @@ const messages = defineMessages({
   },
 });
 
-class Login extends Component {
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-    isSubmitting: PropTypes.bool.isRequired,
-    isTokenExpired: PropTypes.bool.isRequired,
-    isServerLogout: PropTypes.bool.isRequired,
-    signupRoute: PropTypes.string.isRequired,
-    // passwordRoute: PropTypes.string.isRequired, // TODO: Uncomment this line after fixing password recovery in-app
-    error: globalErrorPropType.isRequired,
-  };
+interface IProps extends Partial<StoresProps>, WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  isSubmitting: boolean;
+  isTokenExpired: boolean;
+  isServerLogout: boolean;
+  signupRoute: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  passwordRoute: string; // TODO: Uncomment this line after fixing password recovery in-app
+  error: GlobalError;
+}
+
+@inject('actions')
+@observer
+class Login extends Component<IProps> {
+  form: Form;
 
-  form = (() => {
-    const { intl } = this.props;
-    return new Form(
-      {
-        fields: {
-          email: {
-            label: intl.formatMessage(messages.emailLabel),
-            value: '',
-            validators: [required, email],
-          },
-          password: {
-            label: intl.formatMessage(messages.passwordLabel),
-            value: '',
-            validators: [required],
-            type: 'password',
-          },
+  constructor(props: IProps) {
+    super(props);
+
+    this.form = new Form({
+      fields: {
+        email: {
+          label: this.props.intl.formatMessage(messages.emailLabel),
+          value: '',
+          validators: [required, email],
+        },
+        password: {
+          label: this.props.intl.formatMessage(messages.passwordLabel),
+          value: '',
+          validators: [required],
+          type: 'password',
         },
       },
-      intl,
-    );
-  })();
+    });
+  }
 
-  submit(e) {
+  submit(e: FormEvent<HTMLFormElement>): void {
     e.preventDefault();
     this.form.submit({
       onSuccess: form => {
@@ -108,16 +111,16 @@ class Login extends Component {
     });
   }
 
-  render() {
+  render(): ReactElement {
     const { form } = this;
-    const { intl } = this.props;
     const {
       isSubmitting,
       isTokenExpired,
       isServerLogout,
       signupRoute,
-      // passwordRoute, // TODO: Uncomment this line after fixing password recovery in-app
       error,
+      intl,
+      // passwordRoute, // TODO: Uncomment this line after fixing password recovery in-app
     } = this.props;
 
     return (
@@ -171,12 +174,14 @@ class Login 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}
             />
           )}
         </form>
@@ -202,4 +207,4 @@ class Login extends Component {
   }
 }
 
-export default injectIntl(inject('actions')(observer(Login)));
+export default injectIntl(Login);
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx
index 710d05586..7e3965331 100644
--- a/src/components/ui/ColorPickerInput.tsx
+++ b/src/components/ui/ColorPickerInput.tsx
@@ -1,8 +1,8 @@
-import { ChangeEvent, Component } from 'react';
+import { ChangeEvent, Component, createRef, RefObject } from 'react';
 import { observer } from 'mobx-react';
-import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 import { SliderPicker } from 'react-color';
+import { Field } from '../../@types/mobx-form.types';
 
 interface IProps {
   field: Field;
@@ -11,27 +11,27 @@ interface IProps {
 }
 
 class ColorPickerInput extends Component<IProps> {
-  static defaultProps = {
-    className: null,
-    focus: false,
-  };
-
-  inputElement: HTMLInputElement | null | undefined;
+  private inputElement: RefObject<HTMLInputElement> =
+    createRef<HTMLInputElement>();
 
   componentDidMount() {
-    if (this.props.focus) {
+    const { focus = false } = this.props;
+    if (focus) {
       this.focus();
     }
   }
 
   onChange(e: ChangeEvent<HTMLInputElement>) {
     const { field } = this.props;
-
-    field.onChange(e);
+    if (field.onChange) {
+      field.onChange(e);
+    }
   }
 
   focus() {
-    this.inputElement?.focus();
+    if (this.inputElement && this.inputElement.current) {
+      this.inputElement.current.focus();
+    }
   }
 
   handleChangeComplete = (color: { hex: string }) => {
@@ -40,7 +40,7 @@ class ColorPickerInput extends Component<IProps> {
   };
 
   render() {
-    const { field, className } = this.props;
+    const { field, className = null } = this.props;
 
     let { type } = field;
     type = 'text';
@@ -64,9 +64,7 @@ class ColorPickerInput extends Component<IProps> {
           placeholder={field.placeholder}
           onBlur={field.onBlur}
           onFocus={field.onFocus}
-          ref={(element: HTMLInputElement | null | undefined) => {
-            this.inputElement = element;
-          }}
+          ref={this.inputElement}
           disabled={field.disabled}
         />
         <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker">
@@ -80,9 +78,7 @@ class ColorPickerInput extends Component<IProps> {
             onChange={e => this.onChange(e)}
             onBlur={field.onBlur}
             onFocus={field.onFocus}
-            ref={element => {
-              this.inputElement = element;
-            }}
+            ref={this.inputElement}
             disabled={field.disabled}
           />
         </div>
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.tsx
index ae14493ca..78b3a9200 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.tsx
@@ -1,13 +1,11 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { ChangeEvent, Component, createRef, RefObject } from 'react';
 import { observer } from 'mobx-react';
-import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiEye, mdiEyeOff } from '@mdi/js';
 import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
 import Icon from './icon';
+import { Field } from '../../@types/mobx-form.types';
 
 const messages = defineMessages({
   passwordToggle: {
@@ -16,46 +14,50 @@ const messages = defineMessages({
   },
 });
 
+interface IProps extends WrappedComponentProps {
+  field: Field;
+  className?: string;
+  focus?: boolean;
+  showPasswordToggle?: boolean;
+  showLabel?: boolean;
+  scorePassword?: boolean;
+  prefix?: string;
+  suffix?: string;
+}
+
+interface IState {
+  showPassword: boolean;
+  passwordScore: number;
+}
+
 // Can this file be merged into the './input/index.tsx' file?
-class Input extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    focus: PropTypes.bool,
-    showPasswordToggle: PropTypes.bool,
-    showLabel: PropTypes.bool,
-    scorePassword: PropTypes.bool,
-    prefix: PropTypes.string,
-    suffix: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: null,
-    focus: false,
-    showPasswordToggle: false,
-    showLabel: true,
-    scorePassword: false,
-    prefix: '',
-    suffix: '',
-  };
-
-  state = {
-    showPassword: false,
-    passwordScore: 0,
-  };
-
-  inputElement;
-
-  componentDidMount() {
-    if (this.props.focus) {
+@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) {
+  onChange(e: ChangeEvent<HTMLInputElement>): void {
     const { field, scorePassword } = this.props;
 
-    field.onChange(e);
+    if (field.onChange) {
+      field.onChange(e);
+    }
 
     if (scorePassword) {
       this.setState({ passwordScore: scorePasswordFunc(field.value) });
@@ -63,24 +65,25 @@ class Input extends Component {
   }
 
   focus() {
-    this.inputElement.focus();
+    if (this.inputElement && this.inputElement.current) {
+      this.inputElement.current!.focus();
+    }
   }
 
   render() {
     const {
       field,
-      className,
-      showPasswordToggle,
-      showLabel,
-      scorePassword,
-      prefix,
-      suffix,
+      className = null,
+      showPasswordToggle = false,
+      showLabel = true,
+      scorePassword = false,
+      prefix = '',
+      suffix = '',
+      intl,
     } = this.props;
 
     const { passwordScore } = this.state;
 
-    const { intl } = this.props;
-
     let { type } = field;
     if (type === 'password' && this.state.showPassword) {
       type = 'text';
@@ -106,9 +109,7 @@ class Input extends Component {
             onChange={e => this.onChange(e)}
             onBlur={field.onBlur}
             onFocus={field.onFocus}
-            ref={element => {
-              this.inputElement = element;
-            }}
+            ref={this.inputElement}
             disabled={field.disabled}
           />
           {suffix && <span className="franz-form__input-suffix">{suffix}</span>}
@@ -153,4 +154,4 @@ class Input extends Component {
   }
 }
 
-export default injectIntl(observer(Input));
+export default injectIntl(Input);
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index 3bafc93e7..2a36d7aa9 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -1,7 +1,13 @@
 import { mdiEye, mdiEyeOff } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import { Component, createRef, InputHTMLAttributes } from 'react';
+import {
+  Component,
+  createRef,
+  InputHTMLAttributes,
+  ReactElement,
+  RefObject,
+} from 'react';
 import injectSheet, { WithStylesProps } from 'react-jss';
 import { noop } from 'lodash';
 import { IFormField } from '../typings/generic';
@@ -26,7 +32,7 @@ interface IProps
   showPasswordToggle?: boolean;
   data?: IData;
   inputClassName?: string;
-  onEnterKey?: Function;
+  onEnterKey?: () => {};
 }
 
 interface IState {
@@ -35,7 +41,7 @@ interface IState {
 }
 
 class InputComponent extends Component<IProps, IState> {
-  private inputRef = createRef<HTMLInputElement>();
+  private inputRef: RefObject<HTMLInputElement> = createRef<HTMLInputElement>();
 
   constructor(props: IProps) {
     super(props);
@@ -73,14 +79,14 @@ class InputComponent extends Component<IProps, IState> {
     }
   }
 
-  onInputKeyPress(e: React.KeyboardEvent) {
+  onInputKeyPress(e: React.KeyboardEvent): void {
     if (e.key === 'Enter') {
       const { onEnterKey } = this.props;
       onEnterKey && onEnterKey();
     }
   }
 
-  render() {
+  render(): ReactElement {
     const {
       classes,
       className,
diff --git a/src/containers/auth/LoginScreen.tsx b/src/containers/auth/LoginScreen.tsx
index 64e06e59d..c4782d287 100644
--- a/src/containers/auth/LoginScreen.tsx
+++ b/src/containers/auth/LoginScreen.tsx
@@ -6,27 +6,29 @@ import {
 } from '../../@types/ferdium-components.types';
 import Login from '../../components/auth/Login';
 
-interface LoginScreenProps extends StoresProps {
+interface IProps extends Partial<StoresProps> {
   error: GlobalError;
 }
 
-class LoginScreen extends Component<LoginScreenProps> {
+@inject('stores', 'actions')
+@observer
+class LoginScreen extends Component<IProps> {
   render(): ReactElement {
     const { actions, stores, error } = this.props;
     return (
       <Login
-        onSubmit={actions.user.login}
-        isSubmitting={stores.user.loginRequest.isExecuting}
-        isTokenExpired={stores.user.isTokenExpired}
+        onSubmit={actions!.user.login}
+        isSubmitting={stores!.user.loginRequest.isExecuting}
+        isTokenExpired={stores!.user.isTokenExpired}
         isServerLogout={
-          stores.user.logoutReason === stores.user.logoutReasonTypes.SERVER
+          stores!.user.logoutReason === stores!.user.logoutReasonTypes.SERVER
         }
-        signupRoute={stores.user.signupRoute}
-        passwordRoute={stores.user.passwordRoute}
+        signupRoute={stores!.user.signupRoute}
+        passwordRoute={stores!.user.passwordRoute}
         error={error}
       />
     );
   }
 }
 
-export default inject('stores', 'actions')(observer(LoginScreen));
+export default LoginScreen;
diff --git a/src/features/basicAuth/Form.ts b/src/features/basicAuth/Form.ts
index e84156d96..95721d0e9 100644
--- a/src/features/basicAuth/Form.ts
+++ b/src/features/basicAuth/Form.ts
@@ -1,6 +1,5 @@
 import Form from '../../lib/Form';
 
-// @ts-expect-error Expected 0 arguments, but got 1
 export default new Form({
   fields: {
     user: {
diff --git a/src/lib/Form.ts b/src/lib/Form.ts
index 14ea82948..ca96406e7 100644
--- a/src/lib/Form.ts
+++ b/src/lib/Form.ts
@@ -1,7 +1,12 @@
 import Form from 'mobx-react-form';
 import vjf from 'mobx-react-form/lib/validators/VJF';
+import { FormFields } from '../@types/mobx-form.types';
 
 export default class DefaultForm extends Form {
+  constructor(fields: FormFields) {
+    super(fields);
+  }
+
   bindings() {
     return {
       default: {
diff --git a/src/routes.tsx b/src/routes.tsx
index 8150d135e..e757de72b 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -27,7 +27,7 @@ import PasswordScreen from './containers/auth/PasswordScreen';
 import ChangeServerScreen from './containers/auth/ChangeServerScreen';
 import SignupScreen from './containers/auth/SignupScreen';
 import ImportScreen from './containers/auth/ImportScreen';
-import SetupAssistentScreen from './containers/auth/SetupAssistantScreen';
+import SetupAssistantScreen from './containers/auth/SetupAssistantScreen';
 import InviteScreen from './containers/auth/InviteScreen';
 import AuthLayoutContainer from './containers/auth/AuthLayoutContainer';
 import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen';
@@ -82,7 +82,7 @@ class FerdiumRoutes extends Component<IProps> {
               />
               <Route
                 path="/auth/signup/setup"
-                element={<SetupAssistentScreen {...routeProps} />}
+                element={<SetupAssistantScreen {...routeProps} />}
               />
               <Route
                 path="/auth/signup/invite"