diff options
Diffstat (limited to 'src/components/auth/ChangeServer.js')
-rw-r--r-- | src/components/auth/ChangeServer.js | 79 |
1 files changed, 44 insertions, 35 deletions
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js index 8e8a7af32..b98fb50f7 100644 --- a/src/components/auth/ChangeServer.js +++ b/src/components/auth/ChangeServer.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import Form from '../../lib/Form'; | 5 | import Form from '../../lib/Form'; |
6 | import Input from '../ui/Input'; | 6 | import Input from '../ui/Input'; |
7 | import Select from '../ui/Select'; | 7 | import Select from '../ui/Select'; |
@@ -14,56 +14,65 @@ import globalMessages from '../../i18n/globalMessages'; | |||
14 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
15 | headline: { | 15 | headline: { |
16 | id: 'changeserver.headline', | 16 | id: 'changeserver.headline', |
17 | defaultMessage: '!!!Change server', | 17 | defaultMessage: 'Change server', |
18 | }, | 18 | }, |
19 | label: { | 19 | label: { |
20 | id: 'changeserver.label', | 20 | id: 'changeserver.label', |
21 | defaultMessage: '!!!Server', | 21 | defaultMessage: 'Server', |
22 | }, | 22 | }, |
23 | warning: { | 23 | warning: { |
24 | id: 'changeserver.warning', | 24 | id: 'changeserver.warning', |
25 | defaultMessage: '!!!Extra settings offered by Ferdi will not be saved', | 25 | defaultMessage: 'Extra settings offered by Ferdi will not be saved', |
26 | }, | 26 | }, |
27 | customServerLabel: { | 27 | customServerLabel: { |
28 | id: 'changeserver.customServerLabel', | 28 | id: 'changeserver.customServerLabel', |
29 | defaultMessage: '!!!Custom server', | 29 | defaultMessage: 'Custom server', |
30 | }, | 30 | }, |
31 | urlError: { | 31 | urlError: { |
32 | id: 'changeserver.urlError', | 32 | id: 'changeserver.urlError', |
33 | defaultMessage: '!!!Enter a valid URL', | 33 | defaultMessage: 'Enter a valid URL', |
34 | }, | 34 | }, |
35 | }); | 35 | }); |
36 | 36 | ||
37 | export default @observer class ChangeServer extends Component { | 37 | @observer |
38 | class ChangeServer extends Component { | ||
38 | static propTypes = { | 39 | static propTypes = { |
39 | onSubmit: PropTypes.func.isRequired, | 40 | onSubmit: PropTypes.func.isRequired, |
40 | server: PropTypes.string.isRequired, | 41 | server: PropTypes.string.isRequired, |
41 | }; | 42 | }; |
42 | 43 | ||
43 | static contextTypes = { | 44 | ferdiServer = LIVE_FERDI_API; |
44 | intl: intlShape, | ||
45 | }; | ||
46 | |||
47 | ferdiServer=LIVE_FERDI_API; | ||
48 | 45 | ||
49 | franzServer=LIVE_FRANZ_API; | 46 | franzServer = LIVE_FRANZ_API; |
50 | 47 | ||
51 | defaultServers=[this.franzServer, this.ferdiServer]; | 48 | defaultServers = [this.franzServer, this.ferdiServer]; |
52 | 49 | ||
53 | form = new Form({ | 50 | form = new Form( |
54 | fields: { | 51 | { |
55 | server: { | 52 | fields: { |
56 | label: this.context.intl.formatMessage(messages.label), | 53 | server: { |
57 | value: this.props.server, | 54 | label: this.props.intl.formatMessage(messages.label), |
58 | options: [{ value: this.ferdiServer, label: 'Ferdi' }, { value: this.franzServer, label: 'Franz' }, { value: this.defaultServers.includes(this.props.server) ? '' : this.props.server, label: 'Custom' }], | 55 | value: this.props.server, |
59 | }, | 56 | options: [ |
60 | customServer: { | 57 | { value: this.ferdiServer, label: 'Ferdi' }, |
61 | label: this.context.intl.formatMessage(messages.customServerLabel), | 58 | { value: this.franzServer, label: 'Franz' }, |
62 | value: '', | 59 | { |
63 | validators: [url, required], | 60 | value: this.defaultServers.includes(this.props.server) |
61 | ? '' | ||
62 | : this.props.server, | ||
63 | label: 'Custom', | ||
64 | }, | ||
65 | ], | ||
66 | }, | ||
67 | customServer: { | ||
68 | label: this.props.intl.formatMessage(messages.customServerLabel), | ||
69 | value: '', | ||
70 | validators: [url, required], | ||
71 | }, | ||
64 | }, | 72 | }, |
65 | }, | 73 | }, |
66 | }, this.context.intl); | 74 | this.props.intl, |
75 | ); | ||
67 | 76 | ||
68 | componentDidMount() { | 77 | componentDidMount() { |
69 | if (this.defaultServers.includes(this.props.server)) { | 78 | if (this.defaultServers.includes(this.props.server)) { |
@@ -77,13 +86,13 @@ export default @observer class ChangeServer extends Component { | |||
77 | submit(e) { | 86 | submit(e) { |
78 | e.preventDefault(); | 87 | e.preventDefault(); |
79 | this.form.submit({ | 88 | this.form.submit({ |
80 | onSuccess: (form) => { | 89 | onSuccess: form => { |
81 | if (!this.defaultServers.includes(form.values().server)) { | 90 | if (!this.defaultServers.includes(form.values().server)) { |
82 | form.$('server').onChange(form.values().customServer); | 91 | form.$('server').onChange(form.values().customServer); |
83 | } | 92 | } |
84 | this.props.onSubmit(form.values()); | 93 | this.props.onSubmit(form.values()); |
85 | }, | 94 | }, |
86 | onError: (form) => { | 95 | onError: form => { |
87 | if (this.defaultServers.includes(form.values().server)) { | 96 | if (this.defaultServers.includes(form.values().server)) { |
88 | this.props.onSubmit(form.values()); | 97 | this.props.onSubmit(form.values()); |
89 | } | 98 | } |
@@ -93,23 +102,21 @@ export default @observer class ChangeServer extends Component { | |||
93 | 102 | ||
94 | render() { | 103 | render() { |
95 | const { form } = this; | 104 | const { form } = this; |
96 | const { intl } = this.context; | 105 | const { intl } = this.props; |
97 | return ( | 106 | return ( |
98 | <div className="auth__container"> | 107 | <div className="auth__container"> |
99 | <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}> | 108 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
100 | <h1>{intl.formatMessage(messages.headline)}</h1> | 109 | <h1>{intl.formatMessage(messages.headline)}</h1> |
101 | {form.$('server').value === this.franzServer | 110 | {form.$('server').value === this.franzServer && ( |
102 | && ( | ||
103 | <Infobox type="warning"> | 111 | <Infobox type="warning"> |
104 | {intl.formatMessage(messages.warning)} | 112 | {intl.formatMessage(messages.warning)} |
105 | </Infobox> | 113 | </Infobox> |
106 | )} | 114 | )} |
107 | <Select field={form.$('server')} /> | 115 | <Select field={form.$('server')} /> |
108 | {!this.defaultServers.includes(form.$('server').value) | 116 | {!this.defaultServers.includes(form.$('server').value) && ( |
109 | && ( | ||
110 | <Input | 117 | <Input |
111 | placeholder="Custom Server" | 118 | placeholder="Custom Server" |
112 | onChange={(e) => this.submit(e)} | 119 | onChange={e => this.submit(e)} |
113 | field={form.$('customServer')} | 120 | field={form.$('customServer')} |
114 | /> | 121 | /> |
115 | )} | 122 | )} |
@@ -123,3 +130,5 @@ export default @observer class ChangeServer extends Component { | |||
123 | ); | 130 | ); |
124 | } | 131 | } |
125 | } | 132 | } |
133 | |||
134 | export default injectIntl(ChangeServer); | ||