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.jsx | |
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.jsx')
-rw-r--r-- | src/components/auth/ChangeServer.jsx | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/src/components/auth/ChangeServer.jsx b/src/components/auth/ChangeServer.jsx new file mode 100644 index 000000000..8f4b85fbb --- /dev/null +++ b/src/components/auth/ChangeServer.jsx | |||
@@ -0,0 +1,153 @@ | |||
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 { mdiArrowLeftCircle } from '@mdi/js'; | ||
6 | import Form from '../../lib/Form'; | ||
7 | import Input from '../ui/Input'; | ||
8 | import Select from '../ui/Select'; | ||
9 | import Button from '../ui/button'; | ||
10 | import Link from '../ui/Link'; | ||
11 | import Infobox from '../ui/Infobox'; | ||
12 | import { url, required } from '../../helpers/validation-helpers'; | ||
13 | import { LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../config'; | ||
14 | import globalMessages from '../../i18n/globalMessages'; | ||
15 | import { H1 } from '../ui/headline'; | ||
16 | import Icon from '../ui/icon'; | ||
17 | |||
18 | const messages = defineMessages({ | ||
19 | headline: { | ||
20 | id: 'changeserver.headline', | ||
21 | defaultMessage: 'Change server', | ||
22 | }, | ||
23 | label: { | ||
24 | id: 'changeserver.label', | ||
25 | defaultMessage: 'Server', | ||
26 | }, | ||
27 | warning: { | ||
28 | id: 'changeserver.warning', | ||
29 | defaultMessage: 'Extra settings offered by Ferdium will not be saved', | ||
30 | }, | ||
31 | customServerLabel: { | ||
32 | id: 'changeserver.customServerLabel', | ||
33 | defaultMessage: 'Custom server', | ||
34 | }, | ||
35 | urlError: { | ||
36 | id: 'changeserver.urlError', | ||
37 | defaultMessage: 'Enter a valid URL', | ||
38 | }, | ||
39 | }); | ||
40 | |||
41 | class ChangeServer extends Component { | ||
42 | static propTypes = { | ||
43 | onSubmit: PropTypes.func.isRequired, | ||
44 | server: PropTypes.string.isRequired, | ||
45 | }; | ||
46 | |||
47 | ferdiumServer = LIVE_FERDIUM_API; | ||
48 | |||
49 | franzServer = LIVE_FRANZ_API; | ||
50 | |||
51 | defaultServers = [this.ferdiumServer, this.franzServer]; | ||
52 | |||
53 | form = (() => { | ||
54 | const { intl } = this.props; | ||
55 | return new Form( | ||
56 | { | ||
57 | fields: { | ||
58 | server: { | ||
59 | label: intl.formatMessage(messages.label), | ||
60 | value: this.props.server, | ||
61 | options: [ | ||
62 | { value: this.ferdiumServer, label: 'Ferdium (Default)' }, | ||
63 | { value: this.franzServer, label: 'Franz' }, | ||
64 | { | ||
65 | value: this.defaultServers.includes(this.props.server) | ||
66 | ? '' | ||
67 | : this.props.server, | ||
68 | label: 'Custom', | ||
69 | }, | ||
70 | ], | ||
71 | }, | ||
72 | customServer: { | ||
73 | label: intl.formatMessage(messages.customServerLabel), | ||
74 | value: '', | ||
75 | validators: [url, required], | ||
76 | }, | ||
77 | }, | ||
78 | }, | ||
79 | intl, | ||
80 | ); | ||
81 | })(); | ||
82 | |||
83 | componentDidMount() { | ||
84 | if (this.defaultServers.includes(this.props.server)) { | ||
85 | this.form.$('server').value = this.props.server; | ||
86 | } else { | ||
87 | this.form.$('server').value = ''; | ||
88 | this.form.$('customServer').value = this.props.server; | ||
89 | } | ||
90 | } | ||
91 | |||
92 | submit(e) { | ||
93 | e.preventDefault(); | ||
94 | this.form.submit({ | ||
95 | onSuccess: form => { | ||
96 | if (!this.defaultServers.includes(form.values().server)) { | ||
97 | form.$('server').onChange(form.values().customServer); | ||
98 | } | ||
99 | this.props.onSubmit(form.values()); | ||
100 | }, | ||
101 | onError: form => { | ||
102 | if (this.defaultServers.includes(form.values().server)) { | ||
103 | this.props.onSubmit(form.values()); | ||
104 | } | ||
105 | }, | ||
106 | }); | ||
107 | } | ||
108 | |||
109 | render() { | ||
110 | const { form } = this; | ||
111 | const { intl } = this.props; | ||
112 | return ( | ||
113 | <div className="auth__container"> | ||
114 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | ||
115 | <Link to="/auth/welcome"> | ||
116 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> | ||
117 | </Link> | ||
118 | <H1>{intl.formatMessage(messages.headline)}</H1> | ||
119 | {form.$('server').value === this.franzServer && ( | ||
120 | <Infobox type="warning"> | ||
121 | {intl.formatMessage(messages.warning)} | ||
122 | </Infobox> | ||
123 | )} | ||
124 | <Select field={form.$('server')} /> | ||
125 | {!this.defaultServers.includes(form.$('server').value) && ( | ||
126 | <Input | ||
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 | )} | ||
137 | <Button | ||
138 | type="submit" | ||
139 | className="auth__button" | ||
140 | label={intl.formatMessage(globalMessages.submit)} | ||
141 | /> | ||
142 | </form> | ||
143 | <div className="auth__help"> | ||
144 | <Link to="/auth/welcome"> | ||
145 | <Icon icon={mdiArrowLeftCircle} size={1.5} /> | ||
146 | </Link> | ||
147 | </div> | ||
148 | </div> | ||
149 | ); | ||
150 | } | ||
151 | } | ||
152 | |||
153 | export default injectIntl(observer(ChangeServer)); | ||