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

5 files changed, 158 insertions, 29 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({
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 6b3f3066c..619269a64 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -49,39 +49,78 @@
         "defaultMessage": "!!!Change server",
         "end": {
           "column": 3,
-          "line": 14
+          "line": 16
         },
         "file": "src/components/auth/ChangeServer.js",
         "id": "changeserver.headline",
         "start": {
           "column": 12,
-          "line": 11
+          "line": 13
         }
       },
       {
         "defaultMessage": "!!!Server",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 20
         },
         "file": "src/components/auth/ChangeServer.js",
         "id": "changeserver.label",
         "start": {
           "column": 9,
-          "line": 15
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Extra settings offered by Ferdi will not be saved",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/components/auth/ChangeServer.js",
+        "id": "changeserver.warning",
+        "start": {
+          "column": 11,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Custom server",
+        "end": {
+          "column": 3,
+          "line": 28
+        },
+        "file": "src/components/auth/ChangeServer.js",
+        "id": "changeserver.customServerLabel",
+        "start": {
+          "column": 21,
+          "line": 25
+        }
+      },
+      {
+        "defaultMessage": "!!!Enter a valid URL",
+        "end": {
+          "column": 3,
+          "line": 32
+        },
+        "file": "src/components/auth/ChangeServer.js",
+        "id": "changeserver.urlError",
+        "start": {
+          "column": 12,
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Submit",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 36
         },
         "file": "src/components/auth/ChangeServer.js",
         "id": "changeserver.submit",
         "start": {
           "column": 10,
-          "line": 19
+          "line": 33
         }
       }
     ],
@@ -5916,39 +5955,39 @@
         "defaultMessage": "!!!Franz Todos are available to premium users now!",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 34
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.info",
         "start": {
           "column": 15,
-          "line": 27
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Upgrade Account",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 38
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.upgrade",
         "start": {
           "column": 14,
-          "line": 31
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Everyone else will have to wait a little longer.",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 42
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.rollout",
         "start": {
           "column": 15,
-          "line": 35
+          "line": 39
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 5c33daf86..8e4277fb8 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -1,9 +1,12 @@
 {
   "app.errorHandler.action": "Reload",
   "app.errorHandler.headline": "Something went wrong",
+  "changeserver.customServerLabel": "Custom server",
   "changeserver.headline": "Change server",
   "changeserver.label": "Server",
   "changeserver.submit": "Submit",
+  "changeserver.urlError": "Enter a valid URL",
+  "changeserver.warning": "Extra settings offered by Ferdi will not be saved",
   "connectionLostBanner.cta": "Reload Service",
   "connectionLostBanner.informationLink": "What happened?",
   "connectionLostBanner.message": "Oh no! Ferdi lost the connection to {name}.",
@@ -525,4 +528,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
+}
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/auth/ChangeServer.json b/src/i18n/messages/src/components/auth/ChangeServer.json
index 3a122d50c..8cdfc6623 100644
--- a/src/i18n/messages/src/components/auth/ChangeServer.json
+++ b/src/i18n/messages/src/components/auth/ChangeServer.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Change server",
     "file": "src/components/auth/ChangeServer.js",
     "start": {
-      "line": 11,
+      "line": 13,
       "column": 12
     },
     "end": {
-      "line": 14,
+      "line": 16,
       "column": 3
     }
   },
@@ -17,11 +17,50 @@
     "defaultMessage": "!!!Server",
     "file": "src/components/auth/ChangeServer.js",
     "start": {
-      "line": 15,
+      "line": 17,
       "column": 9
     },
     "end": {
-      "line": 18,
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "changeserver.warning",
+    "defaultMessage": "!!!Extra settings offered by Ferdi will not be saved",
+    "file": "src/components/auth/ChangeServer.js",
+    "start": {
+      "line": 21,
+      "column": 11
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "changeserver.customServerLabel",
+    "defaultMessage": "!!!Custom server",
+    "file": "src/components/auth/ChangeServer.js",
+    "start": {
+      "line": 25,
+      "column": 21
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "id": "changeserver.urlError",
+    "defaultMessage": "!!!Enter a valid URL",
+    "file": "src/components/auth/ChangeServer.js",
+    "start": {
+      "line": 29,
+      "column": 12
+    },
+    "end": {
+      "line": 32,
       "column": 3
     }
   },
@@ -30,11 +69,11 @@
     "defaultMessage": "!!!Submit",
     "file": "src/components/auth/ChangeServer.js",
     "start": {
-      "line": 19,
+      "line": 33,
       "column": 10
     },
     "end": {
-      "line": 22,
+      "line": 36,
       "column": 3
     }
   }