diff options
author | 2020-05-17 08:51:58 +0000 | |
---|---|---|
committer | 2020-05-17 08:51:58 +0000 | |
commit | 820094bea7f19f987c545515243337a83c6cbb86 (patch) | |
tree | effc5be058034ab714a5cb41754d12e9146ac58e /src/components/auth/ChangeServer.js | |
parent | docs: add kris7t as a contributor (#749) (diff) | |
download | ferdium-app-820094bea7f19f987c545515243337a83c6cbb86.tar.gz ferdium-app-820094bea7f19f987c545515243337a83c6cbb86.tar.zst ferdium-app-820094bea7f19f987c545515243337a83c6cbb86.zip |
Replace change server input with a dropdown menu (#717)
Diffstat (limited to 'src/components/auth/ChangeServer.js')
-rw-r--r-- | src/components/auth/ChangeServer.js | 66 |
1 files changed, 57 insertions, 9 deletions
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js index 433334b6c..68c2303a4 100644 --- a/src/components/auth/ChangeServer.js +++ b/src/components/auth/ChangeServer.js | |||
@@ -2,10 +2,12 @@ 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, intlShape } from 'react-intl'; |
5 | |||
6 | import Form from '../../lib/Form'; | 5 | import Form from '../../lib/Form'; |
7 | import Input from '../ui/Input'; | 6 | import Input from '../ui/Input'; |
7 | import Select from '../ui/Select'; | ||
8 | import Button from '../ui/Button'; | 8 | import Button from '../ui/Button'; |
9 | import Infobox from '../ui/Infobox'; | ||
10 | import { url, required } from '../../helpers/validation-helpers'; | ||
9 | 11 | ||
10 | const messages = defineMessages({ | 12 | const messages = defineMessages({ |
11 | headline: { | 13 | headline: { |
@@ -16,10 +18,23 @@ const messages = defineMessages({ | |||
16 | id: 'changeserver.label', | 18 | id: 'changeserver.label', |
17 | defaultMessage: '!!!Server', | 19 | defaultMessage: '!!!Server', |
18 | }, | 20 | }, |
21 | warning: { | ||
22 | id: 'changeserver.warning', | ||
23 | defaultMessage: '!!!Extra settings offered by Ferdi will not be saved', | ||
24 | }, | ||
25 | customServerLabel: { | ||
26 | id: 'changeserver.customServerLabel', | ||
27 | defaultMessage: '!!!Custom server', | ||
28 | }, | ||
29 | urlError: { | ||
30 | id: 'changeserver.urlError', | ||
31 | defaultMessage: '!!!Enter a valid URL', | ||
32 | }, | ||
19 | submit: { | 33 | submit: { |
20 | id: 'changeserver.submit', | 34 | id: 'changeserver.submit', |
21 | defaultMessage: '!!!Submit', | 35 | defaultMessage: '!!!Submit', |
22 | }, | 36 | }, |
37 | |||
23 | }); | 38 | }); |
24 | 39 | ||
25 | export default @observer class ChangeServer extends Component { | 40 | export default @observer class ChangeServer extends Component { |
@@ -32,42 +47,75 @@ export default @observer class ChangeServer extends Component { | |||
32 | intl: intlShape, | 47 | intl: intlShape, |
33 | }; | 48 | }; |
34 | 49 | ||
50 | ferdiServer='https://api.getferdi.com'; | ||
51 | |||
52 | franzServer='https://api.franzinfra.com'; | ||
53 | |||
54 | defaultServers=[this.franzServer, this.ferdiServer]; | ||
55 | |||
35 | form = new Form({ | 56 | form = new Form({ |
36 | fields: { | 57 | fields: { |
37 | server: { | 58 | server: { |
38 | label: this.context.intl.formatMessage(messages.label), | 59 | label: this.context.intl.formatMessage(messages.label), |
60 | value: this.props.server, | ||
61 | options: [{ value: this.ferdiServer, label: 'Ferdi' }, { value: this.franzServer, label: 'Franz' }, { value: this.defaultServers.includes(this.props.server) ? '' : this.props.server, label: 'Custom' }], | ||
62 | }, | ||
63 | customServer: { | ||
64 | label: this.context.intl.formatMessage(messages.customServerLabel), | ||
39 | value: '', | 65 | value: '', |
66 | validators: [url, required], | ||
40 | }, | 67 | }, |
41 | }, | 68 | }, |
42 | }, this.context.intl); | 69 | }, this.context.intl); |
43 | 70 | ||
44 | componentDidMount() { | 71 | componentDidMount() { |
45 | this.form.$('server').value = this.props.server; | 72 | if (this.defaultServers.includes(this.props.server)) { |
73 | this.form.$('server').value = this.props.server; | ||
74 | } else { | ||
75 | this.form.$('server').value = ''; | ||
76 | this.form.$('customServer').value = this.props.server; | ||
77 | } | ||
46 | } | 78 | } |
47 | 79 | ||
48 | submit(e) { | 80 | submit(e) { |
49 | e.preventDefault(); | 81 | e.preventDefault(); |
50 | this.form.submit({ | 82 | this.form.submit({ |
51 | onSuccess: (form) => { | 83 | onSuccess: (form) => { |
84 | if (!this.defaultServers.includes(form.values().server)) { | ||
85 | form.$('server').onChange(form.values().customServer); | ||
86 | } | ||
52 | this.props.onSubmit(form.values()); | 87 | this.props.onSubmit(form.values()); |
53 | }, | 88 | }, |
54 | onError: () => { }, | 89 | onError: (form) => { |
90 | if (this.defaultServers.includes(form.values().server)) { | ||
91 | this.props.onSubmit(form.values()); | ||
92 | } | ||
93 | }, | ||
55 | }); | 94 | }); |
56 | } | 95 | } |
57 | 96 | ||
58 | render() { | 97 | render() { |
59 | const { form } = this; | 98 | const { form } = this; |
60 | const { intl } = this.context; | 99 | const { intl } = this.context; |
61 | |||
62 | return ( | 100 | return ( |
63 | <div className="auth__container"> | 101 | <div className="auth__container"> |
64 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 102 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
65 | <h1>{intl.formatMessage(messages.headline)}</h1> | 103 | <h1>{intl.formatMessage(messages.headline)}</h1> |
66 | 104 | {form.$('server').value === this.franzServer | |
67 | <Input | 105 | && ( |
68 | field={form.$('server')} | 106 | <Infobox type="warning"> |
69 | focus | 107 | {intl.formatMessage(messages.warning)} |
70 | /> | 108 | </Infobox> |
109 | )} | ||
110 | <Select field={form.$('server')} /> | ||
111 | {!this.defaultServers.includes(form.$('server').value) | ||
112 | && ( | ||
113 | <Input | ||
114 | placeholder="Custom Server" | ||
115 | onChange={e => this.submit(e)} | ||
116 | field={form.$('customServer')} | ||
117 | /> | ||
118 | )} | ||
71 | <Button | 119 | <Button |
72 | type="submit" | 120 | type="submit" |
73 | className="auth__button" | 121 | className="auth__button" |