Convert LoginScreen component tree to typescript (#721)

1 files changed, 46 insertions, 41 deletions

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);