diff options
Diffstat (limited to 'src/components/auth')
-rw-r--r-- | src/components/auth/ChangeServer.tsx (renamed from src/components/auth/ChangeServer.jsx) | 101 | ||||
-rw-r--r-- | src/components/auth/Login.tsx | 10 |
2 files changed, 52 insertions, 59 deletions
diff --git a/src/components/auth/ChangeServer.jsx b/src/components/auth/ChangeServer.tsx index 8f4b85fbb..d8509f599 100644 --- a/src/components/auth/ChangeServer.jsx +++ b/src/components/auth/ChangeServer.tsx | |||
@@ -1,8 +1,8 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, FormEvent, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | import { mdiArrowLeftCircle } from '@mdi/js'; | 4 | import { mdiArrowLeftCircle } from '@mdi/js'; |
5 | import { noop } from 'lodash'; | ||
6 | import Form from '../../lib/Form'; | 6 | import Form from '../../lib/Form'; |
7 | import Input from '../ui/Input'; | 7 | import Input from '../ui/Input'; |
8 | import Select from '../ui/Select'; | 8 | import Select from '../ui/Select'; |
@@ -38,49 +38,53 @@ const messages = defineMessages({ | |||
38 | }, | 38 | }, |
39 | }); | 39 | }); |
40 | 40 | ||
41 | class ChangeServer extends Component { | 41 | interface IProps extends WrappedComponentProps { |
42 | static propTypes = { | 42 | onSubmit: (...args: any[]) => void; |
43 | onSubmit: PropTypes.func.isRequired, | 43 | server: string; |
44 | server: PropTypes.string.isRequired, | 44 | } |
45 | }; | ||
46 | 45 | ||
47 | ferdiumServer = LIVE_FERDIUM_API; | 46 | @observer |
47 | class ChangeServer extends Component<IProps> { | ||
48 | ferdiumServer: string = LIVE_FERDIUM_API; | ||
48 | 49 | ||
49 | franzServer = LIVE_FRANZ_API; | 50 | franzServer: string = LIVE_FRANZ_API; |
50 | 51 | ||
51 | defaultServers = [this.ferdiumServer, this.franzServer]; | 52 | defaultServers: string[] = [LIVE_FERDIUM_API, LIVE_FRANZ_API]; |
52 | 53 | ||
53 | form = (() => { | 54 | form: Form; |
54 | const { intl } = this.props; | 55 | |
55 | return new Form( | 56 | constructor(props: IProps) { |
56 | { | 57 | super(props); |
57 | fields: { | 58 | |
58 | server: { | 59 | this.form = new Form({ |
59 | label: intl.formatMessage(messages.label), | 60 | fields: { |
60 | value: this.props.server, | 61 | server: { |
61 | options: [ | 62 | label: this.props.intl.formatMessage(messages.label), |
62 | { value: this.ferdiumServer, label: 'Ferdium (Default)' }, | 63 | value: this.props.server, |
63 | { value: this.franzServer, label: 'Franz' }, | 64 | options: [ |
64 | { | 65 | { value: this.ferdiumServer, label: 'Ferdium (Default)' }, |
65 | value: this.defaultServers.includes(this.props.server) | 66 | { value: this.franzServer, label: 'Franz' }, |
66 | ? '' | 67 | { |
67 | : this.props.server, | 68 | value: this.defaultServers.includes(this.props.server) |
68 | label: 'Custom', | 69 | ? '' |
69 | }, | 70 | : this.props.server, |
70 | ], | 71 | label: 'Custom', |
71 | }, | 72 | }, |
72 | customServer: { | 73 | ], |
73 | label: intl.formatMessage(messages.customServerLabel), | 74 | }, |
74 | value: '', | 75 | customServer: { |
75 | validators: [url, required], | 76 | label: this.props.intl.formatMessage(messages.customServerLabel), |
76 | }, | 77 | placeholder: this.props.intl.formatMessage( |
78 | messages.customServerLabel, | ||
79 | ), | ||
80 | value: '', | ||
81 | validators: [url, required], | ||
77 | }, | 82 | }, |
78 | }, | 83 | }, |
79 | intl, | 84 | }); |
80 | ); | 85 | } |
81 | })(); | ||
82 | 86 | ||
83 | componentDidMount() { | 87 | componentDidMount(): void { |
84 | if (this.defaultServers.includes(this.props.server)) { | 88 | if (this.defaultServers.includes(this.props.server)) { |
85 | this.form.$('server').value = this.props.server; | 89 | this.form.$('server').value = this.props.server; |
86 | } else { | 90 | } else { |
@@ -89,7 +93,7 @@ class ChangeServer extends Component { | |||
89 | } | 93 | } |
90 | } | 94 | } |
91 | 95 | ||
92 | submit(e) { | 96 | submit(e: FormEvent<HTMLElement>): void { |
93 | e.preventDefault(); | 97 | e.preventDefault(); |
94 | this.form.submit({ | 98 | this.form.submit({ |
95 | onSuccess: form => { | 99 | onSuccess: form => { |
@@ -106,9 +110,10 @@ class ChangeServer extends Component { | |||
106 | }); | 110 | }); |
107 | } | 111 | } |
108 | 112 | ||
109 | render() { | 113 | render(): ReactElement { |
110 | const { form } = this; | 114 | const { form } = this; |
111 | const { intl } = this.props; | 115 | const { intl } = this.props; |
116 | |||
112 | return ( | 117 | return ( |
113 | <div className="auth__container"> | 118 | <div className="auth__container"> |
114 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 119 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
@@ -123,21 +128,13 @@ class ChangeServer extends Component { | |||
123 | )} | 128 | )} |
124 | <Select field={form.$('server')} /> | 129 | <Select field={form.$('server')} /> |
125 | {!this.defaultServers.includes(form.$('server').value) && ( | 130 | {!this.defaultServers.includes(form.$('server').value) && ( |
126 | <Input | 131 | <Input placeholder="Custom Server" field={form.$('customServer')} /> |
127 | placeholder="Custom Server" | ||
128 | onChange={e => { | ||
129 | this.form.$('customServer').value = this.form | ||
130 | .$('customServer') | ||
131 | .value.replace(/\/$/, ''); | ||
132 | this.submit(e); | ||
133 | }} | ||
134 | field={form.$('customServer')} | ||
135 | /> | ||
136 | )} | 132 | )} |
137 | <Button | 133 | <Button |
138 | type="submit" | 134 | type="submit" |
139 | className="auth__button" | 135 | className="auth__button" |
140 | label={intl.formatMessage(globalMessages.submit)} | 136 | label={intl.formatMessage(globalMessages.submit)} |
137 | onClick={noop} | ||
141 | /> | 138 | /> |
142 | </form> | 139 | </form> |
143 | <div className="auth__help"> | 140 | <div className="auth__help"> |
@@ -150,4 +147,4 @@ class ChangeServer extends Component { | |||
150 | } | 147 | } |
151 | } | 148 | } |
152 | 149 | ||
153 | export default injectIntl(observer(ChangeServer)); | 150 | export default injectIntl(ChangeServer); |
diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx index 65381fe04..66a567fe4 100644 --- a/src/components/auth/Login.tsx +++ b/src/components/auth/Login.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Component, FormEvent, ReactElement } from 'react'; | 1 | import { Component, FormEvent, ReactElement } from 'react'; |
2 | import { observer, inject } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
4 | import { mdiArrowLeftCircle } from '@mdi/js'; | 4 | import { mdiArrowLeftCircle } from '@mdi/js'; |
5 | import { noop } from 'lodash'; | 5 | import { noop } from 'lodash'; |
@@ -13,10 +13,7 @@ import Input from '../ui/Input'; | |||
13 | import Button from '../ui/button'; | 13 | import Button from '../ui/button'; |
14 | import Link from '../ui/Link'; | 14 | import Link from '../ui/Link'; |
15 | import { H1 } from '../ui/headline'; | 15 | import { H1 } from '../ui/headline'; |
16 | import { | 16 | import { GlobalError } from '../../@types/ferdium-components.types'; |
17 | GlobalError, | ||
18 | StoresProps, | ||
19 | } from '../../@types/ferdium-components.types'; | ||
20 | 17 | ||
21 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
22 | headline: { | 19 | headline: { |
@@ -65,7 +62,7 @@ const messages = defineMessages({ | |||
65 | }, | 62 | }, |
66 | }); | 63 | }); |
67 | 64 | ||
68 | interface IProps extends Partial<StoresProps>, WrappedComponentProps { | 65 | interface IProps extends WrappedComponentProps { |
69 | onSubmit: (...args: any[]) => void; | 66 | onSubmit: (...args: any[]) => void; |
70 | isSubmitting: boolean; | 67 | isSubmitting: boolean; |
71 | isTokenExpired: boolean; | 68 | isTokenExpired: boolean; |
@@ -76,7 +73,6 @@ interface IProps extends Partial<StoresProps>, WrappedComponentProps { | |||
76 | error: GlobalError; | 73 | error: GlobalError; |
77 | } | 74 | } |
78 | 75 | ||
79 | @inject('actions') | ||
80 | @observer | 76 | @observer |
81 | class Login extends Component<IProps> { | 77 | class Login extends Component<IProps> { |
82 | form: Form; | 78 | form: Form; |