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%',