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 @@
+import { Component, FormEvent, ReactElement } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { mdiArrowLeftCircle } from '@mdi/js';
+import { noop } from 'lodash';
+import Form from '../../lib/Form';
+import Input from '../ui/Input';
+import Select from '../ui/Select';
+import Button from '../ui/button';
+import Link from '../ui/Link';
+import Infobox from '../ui/Infobox';
+import { url, required } from '../../helpers/validation-helpers';
+import { LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../config';
+import globalMessages from '../../i18n/globalMessages';
+import { H1 } from '../ui/headline';
+import Icon from '../ui/icon';
+
+const messages = defineMessages({
+  headline: {
+    id: 'changeserver.headline',
+    defaultMessage: 'Change server',
+  },
+  label: {
+    id: 'changeserver.label',
+    defaultMessage: 'Server',
+  },
+  warning: {
+    id: 'changeserver.warning',
+    defaultMessage: 'Extra settings offered by Ferdium will not be saved',
+  },
+  customServerLabel: {
+    id: 'changeserver.customServerLabel',
+    defaultMessage: 'Custom server',
+  },
+  urlError: {
+    id: 'changeserver.urlError',
+    defaultMessage: 'Enter a valid URL',
+  },
+});
+
+interface IProps extends WrappedComponentProps {
+  onSubmit: (...args: any[]) => void;
+  server: string;
+}
+
+@observer
+class ChangeServer extends Component<IProps> {
+  ferdiumServer: string = LIVE_FERDIUM_API;
+
+  franzServer: string = LIVE_FRANZ_API;
+
+  defaultServers: string[] = [LIVE_FERDIUM_API, LIVE_FRANZ_API];
+
+  form: Form;
+
+  constructor(props: IProps) {
+    super(props);
+
+    this.form = new Form({
+      fields: {
+        server: {
+          label: this.props.intl.formatMessage(messages.label),
+          value: this.props.server,
+          options: [
+            { value: this.ferdiumServer, label: 'Ferdium (Default)' },
+            { value: this.franzServer, label: 'Franz' },
+            {
+              value: this.defaultServers.includes(this.props.server)
+                ? ''
+                : this.props.server,
+              label: 'Custom',
+            },
+          ],
+        },
+        customServer: {
+          label: this.props.intl.formatMessage(messages.customServerLabel),
+          placeholder: this.props.intl.formatMessage(
+            messages.customServerLabel,
+          ),
+          value: '',
+          validators: [url, required],
+        },
+      },
+    });
+  }
+
+  componentDidMount(): void {
+    if (this.defaultServers.includes(this.props.server)) {
+      this.form.$('server').value = this.props.server;
+    } else {
+      this.form.$('server').value = '';
+      this.form.$('customServer').value = this.props.server;
+    }
+  }
+
+  submit(e: FormEvent<HTMLElement>): void {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: form => {
+        if (!this.defaultServers.includes(form.values().server)) {
+          form.$('server').onChange(form.values().customServer);
+        }
+        this.props.onSubmit(form.values());
+      },
+      onError: form => {
+        if (this.defaultServers.includes(form.values().server)) {
+          this.props.onSubmit(form.values());
+        }
+      },
+    });
+  }
+
+  render(): ReactElement {
+    const { form } = this;
+    const { intl } = this.props;
+
+    return (
+      <div className="auth__container">
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <Link to="/auth/welcome">
+            <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
+          </Link>
+          <H1>{intl.formatMessage(messages.headline)}</H1>
+          {form.$('server').value === this.franzServer && (
+            <Infobox type="warning">
+              {intl.formatMessage(messages.warning)}
+            </Infobox>
+          )}
+          <Select field={form.$('server')} />
+          {!this.defaultServers.includes(form.$('server').value) && (
+            <Input placeholder="Custom Server" field={form.$('customServer')} />
+          )}
+          <Button
+            type="submit"
+            className="auth__button"
+            label={intl.formatMessage(globalMessages.submit)}
+            onClick={noop}
+          />
+        </form>
+        <div className="auth__help">
+          <Link to="/auth/welcome">
+            <Icon icon={mdiArrowLeftCircle} size={1.5} />
+          </Link>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(ChangeServer);