1 files changed, 49 insertions, 6 deletions

diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index b6291666b..80f17d8f2 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,16 +9,29 @@ 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: {
     id: 'services.welcome',
-    defaultMessage: '!!!Welcome to Franz',
+    defaultMessage: '!!!Welcome to Ferdi',
   },
   getStarted: {
     id: 'services.getStarted',
     defaultMessage: '!!!Get started',
   },
+  login: {
+    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.',
+  },
 });
 
 
@@ -31,7 +44,7 @@ const styles = {
   },
 };
 
-export default @observer @injectSheet(styles) class Services extends Component {
+export default @injectSheet(styles) @inject('actions') @observer class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -44,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 = {
@@ -60,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({
@@ -74,6 +94,10 @@ export default @observer @injectSheet(styles) class Services extends Component {
     }
   }
 
+  useLocalServer() {
+    serverlessLogin(this.props.actions);
+  }
+
   render() {
     const {
       services,
@@ -94,6 +118,7 @@ export default @observer @injectSheet(styles) class Services extends Component {
     } = this.state;
 
     const { intl } = this.context;
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="services">
@@ -112,15 +137,33 @@ export default @observer @injectSheet(styles) class Services extends Component {
             transitionName="slideUp"
           >
             <div className="services__no-service">
-              <img src="./assets/images/logo.svg" alt="" />
+              <img src="./assets/images/logo.svg" alt="Logo" style={{ maxHeight: '50vh' }} />
               <h1>{intl.formatMessage(messages.welcome)}</h1>
+              { !isLoggedIn && (
+                <>
+                  <p>{intl.formatMessage(messages.login)}</p>
+                  <p>{intl.formatMessage(messages.serverInfo)}</p>
+                </>
+              ) }
               <Appear
                 timeout={300}
                 transitionName="slideUp"
               >
-                <Link to="/settings/recipes" className="button">
-                  {intl.formatMessage(messages.getStarted)}
+                <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>