From 6415f2746e38ebe5cb328c2af94413a4d4e5da07 Mon Sep 17 00:00:00 2001
From: André Oliveira <37463445+SpecialAro@users.noreply.github.com>
Date: Tue, 12 Jul 2022 17:59:43 +0100
Subject: Refactor the 'Welcome' screen and the 'SetupAssistant' for better UX
 (#472)

* Change auth styling and add back button
* Add Skip button on 'SetupAssistant'
---
 src/components/auth/ChangeServer.jsx | 153 +++++++++++++++++++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 src/components/auth/ChangeServer.jsx

(limited to 'src/components/auth/ChangeServer.jsx')

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 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl } from 'react-intl';
+import { mdiArrowLeftCircle } from '@mdi/js';
+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',
+  },
+});
+
+class ChangeServer extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    server: PropTypes.string.isRequired,
+  };
+
+  ferdiumServer = LIVE_FERDIUM_API;
+
+  franzServer = LIVE_FRANZ_API;
+
+  defaultServers = [this.ferdiumServer, this.franzServer];
+
+  form = (() => {
+    const { intl } = this.props;
+    return new Form(
+      {
+        fields: {
+          server: {
+            label: 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: intl.formatMessage(messages.customServerLabel),
+            value: '',
+            validators: [url, required],
+          },
+        },
+      },
+      intl,
+    );
+  })();
+
+  componentDidMount() {
+    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) {
+    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() {
+    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"
+              onChange={e => {
+                this.form.$('customServer').value = this.form
+                  .$('customServer')
+                  .value.replace(/\/$/, '');
+                this.submit(e);
+              }}
+              field={form.$('customServer')}
+            />
+          )}
+          <Button
+            type="submit"
+            className="auth__button"
+            label={intl.formatMessage(globalMessages.submit)}
+          />
+        </form>
+        <div className="auth__help">
+          <Link to="/auth/welcome">
+            <Icon icon={mdiArrowLeftCircle} size={1.5} />
+          </Link>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(observer(ChangeServer));
-- 
cgit v1.2.3-70-g09d2