Add local server to allow serverlesss usage

4 files changed, 87 insertions, 10 deletions

diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index eea5a09bf..e58016e25 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';
@@ -54,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 @observer @inject('actions') class Login extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
@@ -69,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 = {
@@ -103,6 +114,10 @@ export default @observer class Login extends Component {
     });
   }
 
+  useLocalServer() {
+    serverlessLogin(this.props.actions);
+  }
+
   render() {
     const { form } = this;
     const { intl } = this.context;
@@ -179,7 +194,8 @@ export default @observer class Login extends Component {
           )}
         </form>
         <div className="auth__links">
-          <Link to="/settings/app">Change server</Link>
+          <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>
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index b36e71ce1..47e9daf18 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.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, minLength } 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';
@@ -58,18 +60,27 @@ const messages = defineMessages({
     id: 'signup.link.login',
     defaultMessage: '!!!Already have an account, sign in?',
   },
+  changeServer: {
+    id: 'login.changeServer',
+    defaultMessage: '!!!Change server',
+  },
+  serverless: {
+    id: 'services.serverless',
+    defaultMessage: '!!!Use Ferdi without an Account',
+  },
   emailDuplicate: {
     id: 'signup.emailDuplicate',
     defaultMessage: '!!!A user with that email address already exists',
   },
 });
 
-export default @observer class Signup extends Component {
+export default @observer @inject('actions') class Signup extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
     loginRoute: PropTypes.string.isRequired,
     error: globalErrorPropType.isRequired,
+    actions: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
@@ -112,6 +123,10 @@ export default @observer class Signup extends Component {
     });
   }
 
+  useLocalServer() {
+    serverlessLogin(this.props.actions);
+  }
+
   render() {
     const { form } = this;
     const { intl } = this.context;
@@ -183,7 +198,8 @@ export default @observer class Signup extends Component {
             </p>
           </form>
           <div className="auth__links">
-            <Link to="/settings/app">Change server</Link>
+            <Link to="/settings/app">{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>
         </div>
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index ef917e336..2ca8b430f 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -1,7 +1,9 @@
+/* eslint jsx-a11y/anchor-is-valid: 0 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
+import serverlessLogin from '../../helpers/serverless-helpers';
 
 import Link from '../ui/Link';
 
@@ -14,19 +16,28 @@ const messages = defineMessages({
     id: 'welcome.loginButton',
     defaultMessage: '!!!Login to your account',
   },
+  serverless: {
+    id: 'services.serverless',
+    defaultMessage: '!!!Use Ferdi without an Account',
+  },
 });
 
-export default @observer class Login extends Component {
+export default @observer @inject('actions') class Login extends Component {
   static propTypes = {
     loginRoute: PropTypes.string.isRequired,
     signupRoute: PropTypes.string.isRequired,
     recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
+    actions: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
     intl: intlShape,
   };
 
+  useLocalServer() {
+    serverlessLogin(this.props.actions);
+  }
+
   render() {
     const { intl } = this.context;
     const {
@@ -53,6 +64,12 @@ export default @observer class Login extends Component {
           </Link>
           <br />
           <br />
+          <a className="button" onClick={this.useLocalServer.bind(this)}>
+            {intl.formatMessage(messages.serverless)}
+          </a>
+          <br />
+          <br />
+
 
           <Link to="settings/app">
             <span style={{
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index edff29ae8..6d7909362 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, intlShape } from 'react-intl';
 import Confetti from 'react-confetti';
@@ -9,6 +9,7 @@ import injectSheet from 'react-jss';
 
 import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
+import serverlessLogin from '../../../helpers/serverless-helpers';
 
 const messages = defineMessages({
   welcome: {
@@ -23,6 +24,10 @@ const messages = defineMessages({
     id: 'services.login',
     defaultMessage: '!!!Please login to use Ferdi.',
   },
+  serverless: {
+    id: 'services.serverless',
+    defaultMessage: '!!!Use Ferdi without an Account',
+  },
   serverInfo: {
     id: 'services.serverInfo',
     defaultMessage: '!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.',
@@ -39,7 +44,7 @@ const styles = {
   },
 };
 
-export default @observer @injectSheet(styles) class Services extends Component {
+export default @observer @inject('actions') @injectSheet(styles) class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -52,6 +57,7 @@ export default @observer @injectSheet(styles) class Services extends Component {
     userHasCompletedSignup: PropTypes.bool.isRequired,
     hasActivatedTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -68,6 +74,12 @@ export default @observer @injectSheet(styles) class Services extends Component {
 
   _confettiTimeout = null;
 
+  constructor(props) {
+    super(props);
+
+    this.useLocalServer = this.useLocalServer.bind(this);
+  }
+
   componentDidMount() {
     this._confettiTimeout = window.setTimeout(() => {
       this.setState({
@@ -82,6 +94,10 @@ export default @observer @injectSheet(styles) class Services extends Component {
     }
   }
 
+  useLocalServer() {
+    serverlessLogin(this.props.actions);
+  }
+
   render() {
     const {
       services,
@@ -136,6 +152,18 @@ export default @observer @injectSheet(styles) class Services extends Component {
                 <Link to={isLoggedIn ? '/settings/services' : '/auth/welcome'} className="button">
                   { isLoggedIn ? intl.formatMessage(messages.getStarted) : 'Login' }
                 </Link>
+                {!isLoggedIn && (
+                  <button
+                    type="button"
+                    className="button"
+                    style={{
+                      marginLeft: 10,
+                    }}
+                    onClick={this.useLocalServer}
+                  >
+                    {intl.formatMessage(messages.serverless)}
+                  </button>
+                )}
               </Appear>
             </div>
           </Appear>