diff options
Diffstat (limited to 'src/components/auth/ChangeServer.tsx')
-rw-r--r-- | src/components/auth/ChangeServer.tsx | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/src/components/auth/ChangeServer.tsx b/src/components/auth/ChangeServer.tsx new file mode 100644 index 000000000..d8509f599 --- /dev/null +++ b/src/components/auth/ChangeServer.tsx | |||
@@ -0,0 +1,150 @@ | |||
1 | import { Component, FormEvent, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
4 | import { mdiArrowLeftCircle } from '@mdi/js'; | ||
5 | import { noop } from 'lodash'; | ||
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 | interface IProps extends WrappedComponentProps { | ||
42 | onSubmit: (...args: any[]) => void; | ||
43 | server: string; | ||
44 | } | ||
45 | |||
46 | @observer | ||
47 | class ChangeServer extends Component<IProps> { | ||
48 | ferdiumServer: string = LIVE_FERDIUM_API; | ||
49 | |||
50 | franzServer: string = LIVE_FRANZ_API; | ||
51 | |||
52 | defaultServers: string[] = [LIVE_FERDIUM_API, LIVE_FRANZ_API]; | ||
53 | |||
54 | form: Form; | ||
55 | |||
56 | constructor(props: IProps) { | ||
57 | super(props); | ||
58 | |||
59 | this.form = new Form({ | ||
60 | fields: { | ||
61 | server: { | ||
62 | label: this.props.intl.formatMessage(messages.label), | ||
63 | value: this.props.server, | ||
64 | options: [ | ||
65 | { value: this.ferdiumServer, label: 'Ferdium (Default)' }, | ||
66 | { value: this.franzServer, label: 'Franz' }, | ||
67 | { | ||
68 | value: this.defaultServers.includes(this.props.server) | ||
69 | ? '' | ||
70 | : this.props.server, | ||
71 | label: 'Custom', | ||
72 | }, | ||
73 | ], | ||
74 | }, | ||
75 | customServer: { | ||
76 | label: this.props.intl.formatMessage(messages.customServerLabel), | ||
77 | placeholder: this.props.intl.formatMessage( | ||
78 | messages.customServerLabel, | ||
79 | ), | ||
80 | value: '', | ||
81 | validators: [url, required], | ||
82 | }, | ||
83 | }, | ||
84 | }); | ||
85 | } | ||
86 | |||
87 | componentDidMount(): void { | ||
88 | if (this.defaultServers.includes(this.props.server)) { | ||
89 | this.form.$('server').value = this.props.server; | ||
90 | } else { | ||
91 | this.form.$('server').value = ''; | ||
92 | this.form.$('customServer').value = this.props.server; | ||
93 | } | ||
94 | } | ||
95 | |||
96 | submit(e: FormEvent<HTMLElement>): void { | ||
97 | e.preventDefault(); | ||
98 | this.form.submit({ | ||
99 | onSuccess: form => { | ||
100 | if (!this.defaultServers.includes(form.values().server)) { | ||
101 | form.$('server').onChange(form.values().customServer); | ||
102 | } | ||
103 | this.props.onSubmit(form.values()); | ||
104 | }, | ||
105 | onError: form => { | ||
106 | if (this.defaultServers.includes(form.values().server)) { | ||
107 | this.props.onSubmit(form.values()); | ||
108 | } | ||
109 | }, | ||
110 | }); | ||
111 | } | ||
112 | |||
113 | render(): ReactElement { | ||
114 | const { form } = this; | ||
115 | const { intl } = this.props; | ||
116 | |||
117 | return ( | ||
118 | <div className="auth__container"> | ||
119 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | ||
120 | <Link to="/auth/welcome"> | ||
121 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> | ||
122 | </Link> | ||
123 | <H1>{intl.formatMessage(messages.headline)}</H1> | ||
124 | {form.$('server').value === this.franzServer && ( | ||
125 | <Infobox type="warning"> | ||
126 | {intl.formatMessage(messages.warning)} | ||
127 | </Infobox> | ||
128 | )} | ||
129 | <Select field={form.$('server')} /> | ||
130 | {!this.defaultServers.includes(form.$('server').value) && ( | ||
131 | <Input placeholder="Custom Server" field={form.$('customServer')} /> | ||
132 | )} | ||
133 | <Button | ||
134 | type="submit" | ||
135 | className="auth__button" | ||
136 | label={intl.formatMessage(globalMessages.submit)} | ||
137 | onClick={noop} | ||
138 | /> | ||
139 | </form> | ||
140 | <div className="auth__help"> | ||
141 | <Link to="/auth/welcome"> | ||
142 | <Icon icon={mdiArrowLeftCircle} size={1.5} /> | ||
143 | </Link> | ||
144 | </div> | ||
145 | </div> | ||
146 | ); | ||
147 | } | ||
148 | } | ||
149 | |||
150 | export default injectIntl(ChangeServer); | ||