Replace change server input with a dropdown menu (#717)

2 files changed, 58 insertions, 10 deletions

diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index 433334b6c..68c2303a4 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -2,10 +2,12 @@ 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 Select from '../ui/Select';
 import Button from '../ui/Button';
+import Infobox from '../ui/Infobox';
+import { url, required } from '../../helpers/validation-helpers';
 
 const messages = defineMessages({
   headline: {
@@ -16,10 +18,23 @@ const messages = defineMessages({
     id: 'changeserver.label',
     defaultMessage: '!!!Server',
   },
+  warning: {
+    id: 'changeserver.warning',
+    defaultMessage: '!!!Extra settings offered by Ferdi will not be saved',
+  },
+  customServerLabel: {
+    id: 'changeserver.customServerLabel',
+    defaultMessage: '!!!Custom server',
+  },
+  urlError: {
+    id: 'changeserver.urlError',
+    defaultMessage: '!!!Enter a valid URL',
+  },
   submit: {
     id: 'changeserver.submit',
     defaultMessage: '!!!Submit',
   },
+
 });
 
 export default @observer class ChangeServer extends Component {
@@ -32,42 +47,75 @@ export default @observer class ChangeServer extends Component {
     intl: intlShape,
   };
 
+  ferdiServer='https://api.getferdi.com';
+
+  franzServer='https://api.franzinfra.com';
+
+  defaultServers=[this.franzServer, this.ferdiServer];
+
   form = new Form({
     fields: {
       server: {
         label: this.context.intl.formatMessage(messages.label),
+        value: this.props.server,
+        options: [{ value: this.ferdiServer, label: 'Ferdi' }, { value: this.franzServer, label: 'Franz' }, { value: this.defaultServers.includes(this.props.server) ? '' : this.props.server, label: 'Custom' }],
+      },
+      customServer: {
+        label: this.context.intl.formatMessage(messages.customServerLabel),
         value: '',
+        validators: [url, required],
       },
     },
   }, this.context.intl);
 
   componentDidMount() {
-    this.form.$('server').value = this.props.server;
+    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: () => { },
+      onError: (form) => {
+        if (this.defaultServers.includes(form.values().server)) {
+          this.props.onSubmit(form.values());
+        }
+      },
     });
   }
 
   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
-          />
+          {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.submit(e)}
+              field={form.$('customServer')}
+            />
+          )}
           <Button
             type="submit"
             className="auth__button"
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 4e3eb4ab8..387086eb9 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -72,7 +72,7 @@ export default @observer class Input extends Component {
     if (type === 'password' && this.state.showPassword) {
       type = 'text';
     }
-
+    
     return (
       <div
         className={classnames({