diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-10-31 05:20:17 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-10-30 23:50:17 +0000 |
commit | 011e73f24f8ae15091d41781c93c313d0167d887 (patch) | |
tree | 3e012f97a9c3ecf98e348690f82dae0d58ec0155 /src | |
parent | 6.2.1-nightly.33 [skip ci] (diff) | |
download | ferdium-app-011e73f24f8ae15091d41781c93c313d0167d887.tar.gz ferdium-app-011e73f24f8ae15091d41781c93c313d0167d887.tar.zst ferdium-app-011e73f24f8ae15091d41781c93c313d0167d887.zip |
Convert LoginScreen component tree to typescript (#721)
Diffstat (limited to 'src')
-rw-r--r-- | src/@types/mobx-form.types.ts | 20 | ||||
-rw-r--r-- | src/@types/mobx-react-form.d.ts | 1 | ||||
-rw-r--r-- | src/components/auth/Login.tsx (renamed from src/components/auth/Login.jsx) | 87 | ||||
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 34 | ||||
-rw-r--r-- | src/components/ui/Input.tsx (renamed from src/components/ui/Input.js) | 103 | ||||
-rw-r--r-- | src/components/ui/input/index.tsx | 16 | ||||
-rw-r--r-- | src/containers/auth/LoginScreen.tsx | 20 | ||||
-rw-r--r-- | src/features/basicAuth/Form.ts | 1 | ||||
-rw-r--r-- | src/lib/Form.ts | 5 | ||||
-rw-r--r-- | src/routes.tsx | 4 |
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 @@ | |||
1 | import { ChangeEventHandler, FocusEventHandler } from 'react'; | ||
2 | import { GlobalError } from './ferdium-components.types'; | ||
3 | |||
1 | export interface FormFieldOptions { | 4 | export interface FormFieldOptions { |
2 | value?: string; | 5 | value?: string; |
3 | label?: string; | 6 | label?: string; |
@@ -18,3 +21,20 @@ export interface FormFields { | |||
18 | }; | 21 | }; |
19 | }; | 22 | }; |
20 | } | 23 | } |
24 | |||
25 | export interface Field extends Partial<Listeners> { | ||
26 | id?: string; | ||
27 | type?: string; | ||
28 | name?: string; | ||
29 | value: string; | ||
30 | label?: string; | ||
31 | placeholder?: string; | ||
32 | disabled?: boolean; | ||
33 | error?: GlobalError | string; | ||
34 | } | ||
35 | |||
36 | export interface Listeners { | ||
37 | onChange?: ChangeEventHandler<HTMLInputElement>; | ||
38 | onBlur?: FocusEventHandler<HTMLElement>; | ||
39 | onFocus?: FocusEventHandler<HTMLElement>; | ||
40 | } | ||
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 @@ | |||
1 | /* eslint jsx-a11y/anchor-is-valid: 0 */ | 1 | import { Component, FormEvent, ReactElement } from 'react'; |
2 | import { Component } from 'react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { observer, inject } from 'mobx-react'; | 2 | import { observer, inject } from 'mobx-react'; |
5 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | |||
7 | import { mdiArrowLeftCircle } from '@mdi/js'; | 4 | import { mdiArrowLeftCircle } from '@mdi/js'; |
5 | import { noop } from 'lodash'; | ||
8 | import Icon from '../ui/icon'; | 6 | import Icon from '../ui/icon'; |
9 | import { LIVE_FRANZ_API } from '../../config'; | 7 | import { LIVE_FRANZ_API } from '../../config'; |
10 | import { API_VERSION } from '../../environment-remote'; | 8 | import { API_VERSION } from '../../environment-remote'; |
@@ -14,9 +12,11 @@ import { required, email } from '../../helpers/validation-helpers'; | |||
14 | import Input from '../ui/Input'; | 12 | import Input from '../ui/Input'; |
15 | import Button from '../ui/button'; | 13 | import Button from '../ui/button'; |
16 | import Link from '../ui/Link'; | 14 | import Link from '../ui/Link'; |
17 | |||
18 | import { globalError as globalErrorPropType } from '../../prop-types'; | ||
19 | import { H1 } from '../ui/headline'; | 15 | import { H1 } from '../ui/headline'; |
16 | import { | ||
17 | GlobalError, | ||
18 | StoresProps, | ||
19 | } from '../../@types/ferdium-components.types'; | ||
20 | 20 | ||
21 | const messages = defineMessages({ | 21 | const messages = defineMessages({ |
22 | headline: { | 22 | headline: { |
@@ -65,40 +65,43 @@ const messages = defineMessages({ | |||
65 | }, | 65 | }, |
66 | }); | 66 | }); |
67 | 67 | ||
68 | class Login extends Component { | 68 | interface IProps extends Partial<StoresProps>, WrappedComponentProps { |
69 | static propTypes = { | 69 | onSubmit: (...args: any[]) => void; |
70 | onSubmit: PropTypes.func.isRequired, | 70 | isSubmitting: boolean; |
71 | isSubmitting: PropTypes.bool.isRequired, | 71 | isTokenExpired: boolean; |
72 | isTokenExpired: PropTypes.bool.isRequired, | 72 | isServerLogout: boolean; |
73 | isServerLogout: PropTypes.bool.isRequired, | 73 | signupRoute: string; |
74 | signupRoute: PropTypes.string.isRequired, | 74 | // eslint-disable-next-line react/no-unused-prop-types |
75 | // passwordRoute: PropTypes.string.isRequired, // TODO: Uncomment this line after fixing password recovery in-app | 75 | passwordRoute: string; // TODO: Uncomment this line after fixing password recovery in-app |
76 | error: globalErrorPropType.isRequired, | 76 | error: GlobalError; |
77 | }; | 77 | } |
78 | |||
79 | @inject('actions') | ||
80 | @observer | ||
81 | class Login extends Component<IProps> { | ||
82 | form: Form; | ||
78 | 83 | ||
79 | form = (() => { | 84 | constructor(props: IProps) { |
80 | const { intl } = this.props; | 85 | super(props); |
81 | return new Form( | 86 | |
82 | { | 87 | this.form = new Form({ |
83 | fields: { | 88 | fields: { |
84 | email: { | 89 | email: { |
85 | label: intl.formatMessage(messages.emailLabel), | 90 | label: this.props.intl.formatMessage(messages.emailLabel), |
86 | value: '', | 91 | value: '', |
87 | validators: [required, email], | 92 | validators: [required, email], |
88 | }, | 93 | }, |
89 | password: { | 94 | password: { |
90 | label: intl.formatMessage(messages.passwordLabel), | 95 | label: this.props.intl.formatMessage(messages.passwordLabel), |
91 | value: '', | 96 | value: '', |
92 | validators: [required], | 97 | validators: [required], |
93 | type: 'password', | 98 | type: 'password', |
94 | }, | ||
95 | }, | 99 | }, |
96 | }, | 100 | }, |
97 | intl, | 101 | }); |
98 | ); | 102 | } |
99 | })(); | ||
100 | 103 | ||
101 | submit(e) { | 104 | submit(e: FormEvent<HTMLFormElement>): void { |
102 | e.preventDefault(); | 105 | e.preventDefault(); |
103 | this.form.submit({ | 106 | this.form.submit({ |
104 | onSuccess: form => { | 107 | onSuccess: form => { |
@@ -108,16 +111,16 @@ class Login extends Component { | |||
108 | }); | 111 | }); |
109 | } | 112 | } |
110 | 113 | ||
111 | render() { | 114 | render(): ReactElement { |
112 | const { form } = this; | 115 | const { form } = this; |
113 | const { intl } = this.props; | ||
114 | const { | 116 | const { |
115 | isSubmitting, | 117 | isSubmitting, |
116 | isTokenExpired, | 118 | isTokenExpired, |
117 | isServerLogout, | 119 | isServerLogout, |
118 | signupRoute, | 120 | signupRoute, |
119 | // passwordRoute, // TODO: Uncomment this line after fixing password recovery in-app | ||
120 | error, | 121 | error, |
122 | intl, | ||
123 | // passwordRoute, // TODO: Uncomment this line after fixing password recovery in-app | ||
121 | } = this.props; | 124 | } = this.props; |
122 | 125 | ||
123 | return ( | 126 | return ( |
@@ -171,12 +174,14 @@ class Login extends Component { | |||
171 | label={`${intl.formatMessage(messages.submitButtonLabel)} ...`} | 174 | label={`${intl.formatMessage(messages.submitButtonLabel)} ...`} |
172 | loaded={false} | 175 | loaded={false} |
173 | disabled | 176 | disabled |
177 | onClick={noop} | ||
174 | /> | 178 | /> |
175 | ) : ( | 179 | ) : ( |
176 | <Button | 180 | <Button |
177 | type="submit" | 181 | type="submit" |
178 | className="auth__button" | 182 | className="auth__button" |
179 | label={intl.formatMessage(messages.submitButtonLabel)} | 183 | label={intl.formatMessage(messages.submitButtonLabel)} |
184 | onClick={noop} | ||
180 | /> | 185 | /> |
181 | )} | 186 | )} |
182 | </form> | 187 | </form> |
@@ -202,4 +207,4 @@ class Login extends Component { | |||
202 | } | 207 | } |
203 | } | 208 | } |
204 | 209 | ||
205 | export default injectIntl(inject('actions')(observer(Login))); | 210 | 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 @@ | |||
1 | import { ChangeEvent, Component } from 'react'; | 1 | import { ChangeEvent, Component, createRef, RefObject } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import { Field } from 'mobx-react-form'; | ||
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
5 | import { SliderPicker } from 'react-color'; | 4 | import { SliderPicker } from 'react-color'; |
5 | import { Field } from '../../@types/mobx-form.types'; | ||
6 | 6 | ||
7 | interface IProps { | 7 | interface IProps { |
8 | field: Field; | 8 | field: Field; |
@@ -11,27 +11,27 @@ interface IProps { | |||
11 | } | 11 | } |
12 | 12 | ||
13 | class ColorPickerInput extends Component<IProps> { | 13 | class ColorPickerInput extends Component<IProps> { |
14 | static defaultProps = { | 14 | private inputElement: RefObject<HTMLInputElement> = |
15 | className: null, | 15 | createRef<HTMLInputElement>(); |
16 | focus: false, | ||
17 | }; | ||
18 | |||
19 | inputElement: HTMLInputElement | null | undefined; | ||
20 | 16 | ||
21 | componentDidMount() { | 17 | componentDidMount() { |
22 | if (this.props.focus) { | 18 | const { focus = false } = this.props; |
19 | if (focus) { | ||
23 | this.focus(); | 20 | this.focus(); |
24 | } | 21 | } |
25 | } | 22 | } |
26 | 23 | ||
27 | onChange(e: ChangeEvent<HTMLInputElement>) { | 24 | onChange(e: ChangeEvent<HTMLInputElement>) { |
28 | const { field } = this.props; | 25 | const { field } = this.props; |
29 | 26 | if (field.onChange) { | |
30 | field.onChange(e); | 27 | field.onChange(e); |
28 | } | ||
31 | } | 29 | } |
32 | 30 | ||
33 | focus() { | 31 | focus() { |
34 | this.inputElement?.focus(); | 32 | if (this.inputElement && this.inputElement.current) { |
33 | this.inputElement.current.focus(); | ||
34 | } | ||
35 | } | 35 | } |
36 | 36 | ||
37 | handleChangeComplete = (color: { hex: string }) => { | 37 | handleChangeComplete = (color: { hex: string }) => { |
@@ -40,7 +40,7 @@ class ColorPickerInput extends Component<IProps> { | |||
40 | }; | 40 | }; |
41 | 41 | ||
42 | render() { | 42 | render() { |
43 | const { field, className } = this.props; | 43 | const { field, className = null } = this.props; |
44 | 44 | ||
45 | let { type } = field; | 45 | let { type } = field; |
46 | type = 'text'; | 46 | type = 'text'; |
@@ -64,9 +64,7 @@ class ColorPickerInput extends Component<IProps> { | |||
64 | placeholder={field.placeholder} | 64 | placeholder={field.placeholder} |
65 | onBlur={field.onBlur} | 65 | onBlur={field.onBlur} |
66 | onFocus={field.onFocus} | 66 | onFocus={field.onFocus} |
67 | ref={(element: HTMLInputElement | null | undefined) => { | 67 | ref={this.inputElement} |
68 | this.inputElement = element; | ||
69 | }} | ||
70 | disabled={field.disabled} | 68 | disabled={field.disabled} |
71 | /> | 69 | /> |
72 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | 70 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> |
@@ -80,9 +78,7 @@ class ColorPickerInput extends Component<IProps> { | |||
80 | onChange={e => this.onChange(e)} | 78 | onChange={e => this.onChange(e)} |
81 | onBlur={field.onBlur} | 79 | onBlur={field.onBlur} |
82 | onFocus={field.onFocus} | 80 | onFocus={field.onFocus} |
83 | ref={element => { | 81 | ref={this.inputElement} |
84 | this.inputElement = element; | ||
85 | }} | ||
86 | disabled={field.disabled} | 82 | disabled={field.disabled} |
87 | /> | 83 | /> |
88 | </div> | 84 | </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 @@ | |||
1 | import { Component } from 'react'; | 1 | import { ChangeEvent, Component, createRef, RefObject } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { Field } from 'mobx-react-form'; | ||
5 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
6 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
7 | |||
8 | import { mdiEye, mdiEyeOff } from '@mdi/js'; | 5 | import { mdiEye, mdiEyeOff } from '@mdi/js'; |
9 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; | 6 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; |
10 | import Icon from './icon'; | 7 | import Icon from './icon'; |
8 | import { Field } from '../../@types/mobx-form.types'; | ||
11 | 9 | ||
12 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
13 | passwordToggle: { | 11 | passwordToggle: { |
@@ -16,46 +14,50 @@ const messages = defineMessages({ | |||
16 | }, | 14 | }, |
17 | }); | 15 | }); |
18 | 16 | ||
17 | interface IProps extends WrappedComponentProps { | ||
18 | field: Field; | ||
19 | className?: string; | ||
20 | focus?: boolean; | ||
21 | showPasswordToggle?: boolean; | ||
22 | showLabel?: boolean; | ||
23 | scorePassword?: boolean; | ||
24 | prefix?: string; | ||
25 | suffix?: string; | ||
26 | } | ||
27 | |||
28 | interface IState { | ||
29 | showPassword: boolean; | ||
30 | passwordScore: number; | ||
31 | } | ||
32 | |||
19 | // Can this file be merged into the './input/index.tsx' file? | 33 | // Can this file be merged into the './input/index.tsx' file? |
20 | class Input extends Component { | 34 | @observer |
21 | static propTypes = { | 35 | class Input extends Component<IProps, IState> { |
22 | field: PropTypes.instanceOf(Field).isRequired, | 36 | private inputElement: RefObject<HTMLInputElement> = |
23 | className: PropTypes.string, | 37 | createRef<HTMLInputElement>(); |
24 | focus: PropTypes.bool, | 38 | |
25 | showPasswordToggle: PropTypes.bool, | 39 | constructor(props: IProps) { |
26 | showLabel: PropTypes.bool, | 40 | super(props); |
27 | scorePassword: PropTypes.bool, | 41 | |
28 | prefix: PropTypes.string, | 42 | this.state = { |
29 | suffix: PropTypes.string, | 43 | showPassword: false, |
30 | }; | 44 | passwordScore: 0, |
31 | 45 | }; | |
32 | static defaultProps = { | 46 | } |
33 | className: null, | 47 | |
34 | focus: false, | 48 | componentDidMount(): void { |
35 | showPasswordToggle: false, | 49 | const { focus = false } = this.props; |
36 | showLabel: true, | 50 | if (focus) { |
37 | scorePassword: false, | ||
38 | prefix: '', | ||
39 | suffix: '', | ||
40 | }; | ||
41 | |||
42 | state = { | ||
43 | showPassword: false, | ||
44 | passwordScore: 0, | ||
45 | }; | ||
46 | |||
47 | inputElement; | ||
48 | |||
49 | componentDidMount() { | ||
50 | if (this.props.focus) { | ||
51 | this.focus(); | 51 | this.focus(); |
52 | } | 52 | } |
53 | } | 53 | } |
54 | 54 | ||
55 | onChange(e) { | 55 | onChange(e: ChangeEvent<HTMLInputElement>): void { |
56 | const { field, scorePassword } = this.props; | 56 | const { field, scorePassword } = this.props; |
57 | 57 | ||
58 | field.onChange(e); | 58 | if (field.onChange) { |
59 | field.onChange(e); | ||
60 | } | ||
59 | 61 | ||
60 | if (scorePassword) { | 62 | if (scorePassword) { |
61 | this.setState({ passwordScore: scorePasswordFunc(field.value) }); | 63 | this.setState({ passwordScore: scorePasswordFunc(field.value) }); |
@@ -63,24 +65,25 @@ class Input extends Component { | |||
63 | } | 65 | } |
64 | 66 | ||
65 | focus() { | 67 | focus() { |
66 | this.inputElement.focus(); | 68 | if (this.inputElement && this.inputElement.current) { |
69 | this.inputElement.current!.focus(); | ||
70 | } | ||
67 | } | 71 | } |
68 | 72 | ||
69 | render() { | 73 | render() { |
70 | const { | 74 | const { |
71 | field, | 75 | field, |
72 | className, | 76 | className = null, |
73 | showPasswordToggle, | 77 | showPasswordToggle = false, |
74 | showLabel, | 78 | showLabel = true, |
75 | scorePassword, | 79 | scorePassword = false, |
76 | prefix, | 80 | prefix = '', |
77 | suffix, | 81 | suffix = '', |
82 | intl, | ||
78 | } = this.props; | 83 | } = this.props; |
79 | 84 | ||
80 | const { passwordScore } = this.state; | 85 | const { passwordScore } = this.state; |
81 | 86 | ||
82 | const { intl } = this.props; | ||
83 | |||
84 | let { type } = field; | 87 | let { type } = field; |
85 | if (type === 'password' && this.state.showPassword) { | 88 | if (type === 'password' && this.state.showPassword) { |
86 | type = 'text'; | 89 | type = 'text'; |
@@ -106,9 +109,7 @@ class Input extends Component { | |||
106 | onChange={e => this.onChange(e)} | 109 | onChange={e => this.onChange(e)} |
107 | onBlur={field.onBlur} | 110 | onBlur={field.onBlur} |
108 | onFocus={field.onFocus} | 111 | onFocus={field.onFocus} |
109 | ref={element => { | 112 | ref={this.inputElement} |
110 | this.inputElement = element; | ||
111 | }} | ||
112 | disabled={field.disabled} | 113 | disabled={field.disabled} |
113 | /> | 114 | /> |
114 | {suffix && <span className="franz-form__input-suffix">{suffix}</span>} | 115 | {suffix && <span className="franz-form__input-suffix">{suffix}</span>} |
@@ -153,4 +154,4 @@ class Input extends Component { | |||
153 | } | 154 | } |
154 | } | 155 | } |
155 | 156 | ||
156 | export default injectIntl(observer(Input)); | 157 | 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 @@ | |||
1 | import { mdiEye, mdiEyeOff } from '@mdi/js'; | 1 | import { mdiEye, mdiEyeOff } from '@mdi/js'; |
2 | import Icon from '@mdi/react'; | 2 | import Icon from '@mdi/react'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import { Component, createRef, InputHTMLAttributes } from 'react'; | 4 | import { |
5 | Component, | ||
6 | createRef, | ||
7 | InputHTMLAttributes, | ||
8 | ReactElement, | ||
9 | RefObject, | ||
10 | } from 'react'; | ||
5 | import injectSheet, { WithStylesProps } from 'react-jss'; | 11 | import injectSheet, { WithStylesProps } from 'react-jss'; |
6 | import { noop } from 'lodash'; | 12 | import { noop } from 'lodash'; |
7 | import { IFormField } from '../typings/generic'; | 13 | import { IFormField } from '../typings/generic'; |
@@ -26,7 +32,7 @@ interface IProps | |||
26 | showPasswordToggle?: boolean; | 32 | showPasswordToggle?: boolean; |
27 | data?: IData; | 33 | data?: IData; |
28 | inputClassName?: string; | 34 | inputClassName?: string; |
29 | onEnterKey?: Function; | 35 | onEnterKey?: () => {}; |
30 | } | 36 | } |
31 | 37 | ||
32 | interface IState { | 38 | interface IState { |
@@ -35,7 +41,7 @@ interface IState { | |||
35 | } | 41 | } |
36 | 42 | ||
37 | class InputComponent extends Component<IProps, IState> { | 43 | class InputComponent extends Component<IProps, IState> { |
38 | private inputRef = createRef<HTMLInputElement>(); | 44 | private inputRef: RefObject<HTMLInputElement> = createRef<HTMLInputElement>(); |
39 | 45 | ||
40 | constructor(props: IProps) { | 46 | constructor(props: IProps) { |
41 | super(props); | 47 | super(props); |
@@ -73,14 +79,14 @@ class InputComponent extends Component<IProps, IState> { | |||
73 | } | 79 | } |
74 | } | 80 | } |
75 | 81 | ||
76 | onInputKeyPress(e: React.KeyboardEvent) { | 82 | onInputKeyPress(e: React.KeyboardEvent): void { |
77 | if (e.key === 'Enter') { | 83 | if (e.key === 'Enter') { |
78 | const { onEnterKey } = this.props; | 84 | const { onEnterKey } = this.props; |
79 | onEnterKey && onEnterKey(); | 85 | onEnterKey && onEnterKey(); |
80 | } | 86 | } |
81 | } | 87 | } |
82 | 88 | ||
83 | render() { | 89 | render(): ReactElement { |
84 | const { | 90 | const { |
85 | classes, | 91 | classes, |
86 | className, | 92 | 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 { | |||
6 | } from '../../@types/ferdium-components.types'; | 6 | } from '../../@types/ferdium-components.types'; |
7 | import Login from '../../components/auth/Login'; | 7 | import Login from '../../components/auth/Login'; |
8 | 8 | ||
9 | interface LoginScreenProps extends StoresProps { | 9 | interface IProps extends Partial<StoresProps> { |
10 | error: GlobalError; | 10 | error: GlobalError; |
11 | } | 11 | } |
12 | 12 | ||
13 | class LoginScreen extends Component<LoginScreenProps> { | 13 | @inject('stores', 'actions') |
14 | @observer | ||
15 | class LoginScreen extends Component<IProps> { | ||
14 | render(): ReactElement { | 16 | render(): ReactElement { |
15 | const { actions, stores, error } = this.props; | 17 | const { actions, stores, error } = this.props; |
16 | return ( | 18 | return ( |
17 | <Login | 19 | <Login |
18 | onSubmit={actions.user.login} | 20 | onSubmit={actions!.user.login} |
19 | isSubmitting={stores.user.loginRequest.isExecuting} | 21 | isSubmitting={stores!.user.loginRequest.isExecuting} |
20 | isTokenExpired={stores.user.isTokenExpired} | 22 | isTokenExpired={stores!.user.isTokenExpired} |
21 | isServerLogout={ | 23 | isServerLogout={ |
22 | stores.user.logoutReason === stores.user.logoutReasonTypes.SERVER | 24 | stores!.user.logoutReason === stores!.user.logoutReasonTypes.SERVER |
23 | } | 25 | } |
24 | signupRoute={stores.user.signupRoute} | 26 | signupRoute={stores!.user.signupRoute} |
25 | passwordRoute={stores.user.passwordRoute} | 27 | passwordRoute={stores!.user.passwordRoute} |
26 | error={error} | 28 | error={error} |
27 | /> | 29 | /> |
28 | ); | 30 | ); |
29 | } | 31 | } |
30 | } | 32 | } |
31 | 33 | ||
32 | export default inject('stores', 'actions')(observer(LoginScreen)); | 34 | 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 @@ | |||
1 | import Form from '../../lib/Form'; | 1 | import Form from '../../lib/Form'; |
2 | 2 | ||
3 | // @ts-expect-error Expected 0 arguments, but got 1 | ||
4 | export default new Form({ | 3 | export default new Form({ |
5 | fields: { | 4 | fields: { |
6 | user: { | 5 | 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 @@ | |||
1 | import Form from 'mobx-react-form'; | 1 | import Form from 'mobx-react-form'; |
2 | import vjf from 'mobx-react-form/lib/validators/VJF'; | 2 | import vjf from 'mobx-react-form/lib/validators/VJF'; |
3 | import { FormFields } from '../@types/mobx-form.types'; | ||
3 | 4 | ||
4 | export default class DefaultForm extends Form { | 5 | export default class DefaultForm extends Form { |
6 | constructor(fields: FormFields) { | ||
7 | super(fields); | ||
8 | } | ||
9 | |||
5 | bindings() { | 10 | bindings() { |
6 | return { | 11 | return { |
7 | default: { | 12 | 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'; | |||
27 | import ChangeServerScreen from './containers/auth/ChangeServerScreen'; | 27 | import ChangeServerScreen from './containers/auth/ChangeServerScreen'; |
28 | import SignupScreen from './containers/auth/SignupScreen'; | 28 | import SignupScreen from './containers/auth/SignupScreen'; |
29 | import ImportScreen from './containers/auth/ImportScreen'; | 29 | import ImportScreen from './containers/auth/ImportScreen'; |
30 | import SetupAssistentScreen from './containers/auth/SetupAssistantScreen'; | 30 | import SetupAssistantScreen from './containers/auth/SetupAssistantScreen'; |
31 | import InviteScreen from './containers/auth/InviteScreen'; | 31 | import InviteScreen from './containers/auth/InviteScreen'; |
32 | import AuthLayoutContainer from './containers/auth/AuthLayoutContainer'; | 32 | import AuthLayoutContainer from './containers/auth/AuthLayoutContainer'; |
33 | import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen'; | 33 | import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen'; |
@@ -82,7 +82,7 @@ class FerdiumRoutes extends Component<IProps> { | |||
82 | /> | 82 | /> |
83 | <Route | 83 | <Route |
84 | path="/auth/signup/setup" | 84 | path="/auth/signup/setup" |
85 | element={<SetupAssistentScreen {...routeProps} />} | 85 | element={<SetupAssistantScreen {...routeProps} />} |
86 | /> | 86 | /> |
87 | <Route | 87 | <Route |
88 | path="/auth/signup/invite" | 88 | path="/auth/signup/invite" |