diff options
Diffstat (limited to 'src/components/auth')
-rw-r--r-- | src/components/auth/Login.tsx (renamed from src/components/auth/Login.jsx) | 87 |
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 @@ | |||
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); |