1 files changed, 43 insertions, 3 deletions

diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 5d21f8b60..e25121de0 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -1,11 +1,13 @@
+/* eslint jsx-a11y/anchor-is-valid: 0 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 
 import { isDevMode, useLiveAPI } from '../../environment';
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
+import serverlessLogin from '../../helpers/serverless-helpers';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
 import Link from '../ui/Link';
@@ -34,6 +36,14 @@ const messages = defineMessages({
     id: 'login.invalidCredentials',
     defaultMessage: '!!!Email or password not valid',
   },
+  customServerQuestion: {
+    id: 'login.customServerQuestion',
+    defaultMessage: '!!!Using a Franz account to log in?',
+  },
+  customServerSuggestion: {
+    id: 'login.customServerSuggestion',
+    defaultMessage: '!!!Try importing your Franz account into Ferdi',
+  },
   tokenExpired: {
     id: 'login.tokenExpired',
     defaultMessage: '!!!Your session expired, please login again.',
@@ -46,13 +56,21 @@ const messages = defineMessages({
     id: 'login.link.signup',
     defaultMessage: '!!!Create a free account',
   },
+  changeServer: {
+    id: 'login.changeServer',
+    defaultMessage: '!!!Change server',
+  },
+  serverless: {
+    id: 'services.serverless',
+    defaultMessage: '!!!Use Ferdi without an Account',
+  },
   passwordLink: {
     id: 'login.link.password',
     defaultMessage: '!!!Forgot password',
   },
 });
 
-export default @observer class Login extends Component {
+export default @inject('actions') @observer class Login extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
@@ -61,6 +79,7 @@ export default @observer class Login extends Component {
     signupRoute: PropTypes.string.isRequired,
     passwordRoute: PropTypes.string.isRequired,
     error: globalErrorPropType.isRequired,
+    actions: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
@@ -95,6 +114,10 @@ export default @observer class Login extends Component {
     });
   }
 
+  useLocalServer() {
+    serverlessLogin(this.props.actions);
+  }
+
   render() {
     const { form } = this;
     const { intl } = this.context;
@@ -137,7 +160,22 @@ export default @observer class Login extends Component {
             showPasswordToggle
           />
           {error.code === 'invalid-credentials' && (
-            <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+            <>
+              <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+              { window.ferdi.stores.settings.all.app.server !== 'https://api.franzinfra.com' && (
+                <p className="error-message center">
+                    {intl.formatMessage(messages.customServerQuestion)}
+                  {' '}
+                  <Link
+                    to={`${window.ferdi.stores.settings.all.app.server.replace('v1', '')}/import`}
+                    target="_blank"
+                    style={{ cursor: 'pointer', textDecoration: 'underline' }}
+                  >
+                    {intl.formatMessage(messages.customServerSuggestion)}
+                  </Link>
+                </p>
+              )}
+            </>
           )}
           {isSubmitting ? (
             <Button
@@ -156,6 +194,8 @@ export default @observer class Login extends Component {
           )}
         </form>
         <div className="auth__links">
+          <Link to="/settings/app">{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>
         </div>