diff options
author | 2022-07-12 17:59:43 +0100 | |
---|---|---|
committer | 2022-07-12 16:59:43 +0000 | |
commit | 6415f2746e38ebe5cb328c2af94413a4d4e5da07 (patch) | |
tree | 58cdabbcc7fe9c8ceec58780b73d2528210fdaff /src/components/auth/ChangeServer.js | |
parent | 6.0.0-nightly.98 [skip ci] (diff) | |
download | ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.tar.gz ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.tar.zst ferdium-app-6415f2746e38ebe5cb328c2af94413a4d4e5da07.zip |
Refactor the 'Welcome' screen and the 'SetupAssistant' for better UX (#472)
* Change auth styling and add back button
* Add Skip button on 'SetupAssistant'
Diffstat (limited to 'src/components/auth/ChangeServer.js')
-rw-r--r-- | src/components/auth/ChangeServer.js | 141 |
1 files changed, 0 insertions, 141 deletions
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js deleted file mode 100644 index 8d0960843..000000000 --- a/src/components/auth/ChangeServer.js +++ /dev/null | |||
@@ -1,141 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, injectIntl } from 'react-intl'; | ||
5 | import Form from '../../lib/Form'; | ||
6 | import Input from '../ui/Input'; | ||
7 | import Select from '../ui/Select'; | ||
8 | import Button from '../ui/button'; | ||
9 | import Link from '../ui/Link'; | ||
10 | import Infobox from '../ui/Infobox'; | ||
11 | import { url, required } from '../../helpers/validation-helpers'; | ||
12 | import { LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../config'; | ||
13 | import globalMessages from '../../i18n/globalMessages'; | ||
14 | import { H1 } from '../ui/headline'; | ||
15 | |||
16 | const messages = defineMessages({ | ||
17 | headline: { | ||
18 | id: 'changeserver.headline', | ||
19 | defaultMessage: 'Change server', | ||
20 | }, | ||
21 | label: { | ||
22 | id: 'changeserver.label', | ||
23 | defaultMessage: 'Server', | ||
24 | }, | ||
25 | warning: { | ||
26 | id: 'changeserver.warning', | ||
27 | defaultMessage: 'Extra settings offered by Ferdium will not be saved', | ||
28 | }, | ||
29 | customServerLabel: { | ||
30 | id: 'changeserver.customServerLabel', | ||
31 | defaultMessage: 'Custom server', | ||
32 | }, | ||
33 | urlError: { | ||
34 | id: 'changeserver.urlError', | ||
35 | defaultMessage: 'Enter a valid URL', | ||
36 | }, | ||
37 | }); | ||
38 | |||
39 | class ChangeServer extends Component { | ||
40 | static propTypes = { | ||
41 | onSubmit: PropTypes.func.isRequired, | ||
42 | server: PropTypes.string.isRequired, | ||
43 | }; | ||
44 | |||
45 | ferdiumServer = LIVE_FERDIUM_API; | ||
46 | |||
47 | franzServer = LIVE_FRANZ_API; | ||
48 | |||
49 | defaultServers = [ this.ferdiumServer, this.franzServer ]; | ||
50 | |||
51 | form = (() => { | ||
52 | const { intl } = this.props; | ||
53 | return new Form({ | ||
54 | fields: { | ||
55 | server: { | ||
56 | label: intl.formatMessage(messages.label), | ||
57 | value: this.props.server, | ||
58 | options: [ | ||
59 | { value: this.ferdiumServer, label: 'Ferdium (Default)' }, | ||
60 | { value: this.franzServer, label: 'Franz' }, | ||
61 | { | ||
62 | value: this.defaultServers.includes(this.props.server) | ||
63 | ? '' | ||
64 | : this.props.server, | ||
65 | label: 'Custom', | ||
66 | }, | ||
67 | ], | ||
68 | }, | ||
69 | customServer: { | ||
70 | label: intl.formatMessage(messages.customServerLabel), | ||
71 | value: '', | ||
72 | validators: [url, required], | ||
73 | }, | ||
74 | }, | ||
75 | }, | ||
76 | intl, | ||
77 | ); | ||
78 | })(); | ||
79 | |||
80 | componentDidMount() { | ||
81 | if (this.defaultServers.includes(this.props.server)) { | ||
82 | this.form.$('server').value = this.props.server; | ||
83 | } else { | ||
84 | this.form.$('server').value = ''; | ||
85 | this.form.$('customServer').value = this.props.server; | ||
86 | } | ||
87 | } | ||
88 | |||
89 | submit(e) { | ||
90 | e.preventDefault(); | ||
91 | this.form.submit({ | ||
92 | onSuccess: form => { | ||
93 | if (!this.defaultServers.includes(form.values().server)) { | ||
94 | form.$('server').onChange(form.values().customServer); | ||
95 | } | ||
96 | this.props.onSubmit(form.values()); | ||
97 | }, | ||
98 | onError: form => { | ||
99 | if (this.defaultServers.includes(form.values().server)) { | ||
100 | this.props.onSubmit(form.values()); | ||
101 | } | ||
102 | }, | ||
103 | }); | ||
104 | } | ||
105 | |||
106 | render() { | ||
107 | const { form } = this; | ||
108 | const { intl } = this.props; | ||
109 | return ( | ||
110 | <div className="auth__container"> | ||
111 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | ||
112 | <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link> | ||
113 | <H1>{intl.formatMessage(messages.headline)}</H1> | ||
114 | {(form.$('server').value === this.franzServer) && ( | ||
115 | <Infobox type="warning"> | ||
116 | {intl.formatMessage(messages.warning)} | ||
117 | </Infobox> | ||
118 | )} | ||
119 | <Select field={form.$('server')} /> | ||
120 | {!this.defaultServers.includes(form.$('server').value) && ( | ||
121 | <Input | ||
122 | placeholder="Custom Server" | ||
123 | onChange={e => { | ||
124 | this.form.$('customServer').value = this.form.$('customServer').value.replace(/\/$/, ""); | ||
125 | this.submit(e) | ||
126 | }} | ||
127 | field={form.$('customServer')} | ||
128 | /> | ||
129 | )} | ||
130 | <Button | ||
131 | type="submit" | ||
132 | className="auth__button" | ||
133 | label={intl.formatMessage(globalMessages.submit)} | ||
134 | /> | ||
135 | </form> | ||
136 | </div> | ||
137 | ); | ||
138 | } | ||
139 | } | ||
140 | |||
141 | export default injectIntl(observer(ChangeServer)); | ||