Convert LoginScreen component tree to typescript (#721)

3 files changed, 78 insertions, 75 deletions

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,