Improve user onboarding (#493)

Until now, new users have started on the Ferdi dashboard and not on the Welcome screen like Franz does it. This change was made, as users needed to be ablet to change their server before logging in.
This commit will change this onboarding process to bring users to the welcome screen on first login and it adds a new "Change Server" screen during authentication that allows the user to change the server without going to the full settings screen.
This way, the onboarding experience for new users is a lot easier to go though while also improving the experience for experienced users who want to change their server as they only get the option they are looking for and not the whole settings list.

4 files changed, 91 insertions, 4 deletions

diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
new file mode 100644
index 000000000..433334b6c
--- /dev/null
+++ b/src/components/auth/ChangeServer.js
@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Form from '../../lib/Form';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'changeserver.headline',
+    defaultMessage: '!!!Change server',
+  },
+  label: {
+    id: 'changeserver.label',
+    defaultMessage: '!!!Server',
+  },
+  submit: {
+    id: 'changeserver.submit',
+    defaultMessage: '!!!Submit',
+  },
+});
+
+export default @observer class ChangeServer extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    server: PropTypes.string.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      server: {
+        label: this.context.intl.formatMessage(messages.label),
+        value: '',
+      },
+    },
+  }, this.context.intl);
+
+  componentDidMount() {
+    this.form.$('server').value = this.props.server;
+  }
+
+  submit(e) {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        this.props.onSubmit(form.values());
+      },
+      onError: () => { },
+    });
+  }
+
+  render() {
+    const { form } = this;
+    const { intl } = this.context;
+
+    return (
+      <div className="auth__container">
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+
+          <Input
+            field={form.$('server')}
+            focus
+          />
+          <Button
+            type="submit"
+            className="auth__button"
+            label={intl.formatMessage(messages.submit)}
+          />
+        </form>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index e25121de0..f33d134c8 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -78,6 +78,7 @@ export default @inject('actions') @observer class Login extends Component {
     isServerLogout: PropTypes.bool.isRequired,
     signupRoute: PropTypes.string.isRequired,
     passwordRoute: PropTypes.string.isRequired,
+    changeServerRoute: PropTypes.string.isRequired,
     error: globalErrorPropType.isRequired,
     actions: PropTypes.object.isRequired,
   };
@@ -127,6 +128,7 @@ export default @inject('actions') @observer class Login extends Component {
       isServerLogout,
       signupRoute,
       passwordRoute,
+      changeServerRoute,
       error,
     } = this.props;
 
@@ -194,7 +196,7 @@ export default @inject('actions') @observer class Login extends Component {
           )}
         </form>
         <div className="auth__links">
-          <Link to="/settings/app">{intl.formatMessage(messages.changeServer)}</Link>
+          <Link to={changeServerRoute}>{intl.formatMessage(messages.changeServer)}</Link>
           <a onClick={this.useLocalServer.bind(this)}>{intl.formatMessage(messages.serverless)}</a>
           <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
           <Link to={passwordRoute}>{intl.formatMessage(messages.passwordLink)}</Link>
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index a166155a7..6a7db5cde 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -79,6 +79,7 @@ export default @inject('actions') @observer class Signup extends Component {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
     loginRoute: PropTypes.string.isRequired,
+    changeServerRoute: PropTypes.string.isRequired,
     error: globalErrorPropType.isRequired,
     actions: PropTypes.object.isRequired,
   };
@@ -130,7 +131,9 @@ export default @inject('actions') @observer class Signup extends Component {
   render() {
     const { form } = this;
     const { intl } = this.context;
-    const { isSubmitting, loginRoute, error } = this.props;
+    const {
+      isSubmitting, loginRoute, error, changeServerRoute,
+    } = this.props;
 
     const termsBase = window.ferdi.stores.settings.all.app.server !== 'https://api.franzinfra.com' ? window.ferdi.stores.settings.all.app.server : 'https://meetfranz.com';
 
@@ -198,7 +201,7 @@ export default @inject('actions') @observer class Signup extends Component {
             </p>
           </form>
           <div className="auth__links">
-            <Link to="/settings/app">{intl.formatMessage(messages.changeServer)}</Link>
+            <Link to={changeServerRoute}>{intl.formatMessage(messages.changeServer)}</Link>
             <a onClick={this.useLocalServer.bind(this)}>{intl.formatMessage(messages.serverless)}</a>
             <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
           </div>
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 1453c1d7c..6e742e0c1 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -26,6 +26,7 @@ export default @inject('actions') @observer class Login extends Component {
   static propTypes = {
     loginRoute: PropTypes.string.isRequired,
     signupRoute: PropTypes.string.isRequired,
+    changeServerRoute: PropTypes.string.isRequired,
     recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
     actions: PropTypes.object.isRequired,
   };
@@ -43,6 +44,7 @@ export default @inject('actions') @observer class Login extends Component {
     const {
       loginRoute,
       signupRoute,
+      changeServerRoute,
       recipes,
     } = this.props;
 
@@ -71,7 +73,7 @@ export default @inject('actions') @observer class Login extends Component {
           <br />
 
 
-          <Link to="settings/app">
+          <Link to={changeServerRoute}>
             <span style={{
               textAlign: 'center',
               width: '100%',