Improve onboarding experience

4 files changed, 79 insertions, 47 deletions

diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 6e0345e32..2b689db3b 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -51,6 +51,17 @@ export default @observer class Login extends Component {
           <Link to={loginRoute} className="button">
             {intl.formatMessage(messages.loginButton)}
           </Link>
+          <br /><br />
+
+          <Link to="settings/app">
+            <span style={{
+              textAlign: 'center',
+              width: '100%',
+              cursor: 'pointer'
+            }}>
+              Change server
+            </span>
+          </Link>
         </div>
         <div className="welcome__featured-services">
           {recipes.map(recipe => (
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index f43bc0b58..3d8bcddb0 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import { defineMessages, intlShape } from 'react-intl';
 import { observer } from 'mobx-react';
+import { Link } from 'react-router';
 
 import Tabbar from '../services/tabs/Tabbar';
 import { ctrlKey } from '../../environment';
@@ -81,6 +82,7 @@ export default @observer class Sidebar extends Component {
     const workspaceToggleMessage = (
       isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer
     );
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="sidebar">
@@ -89,38 +91,53 @@ export default @observer class Sidebar extends Component {
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
         />
-        {workspaceStore.isFeatureEnabled ? (
-          <button
-            type="button"
-            onClick={() => {
-              toggleWorkspaceDrawer();
-              this.updateToolTip();
-            }}
-            className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
-            data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
-          >
-            <i className="mdi mdi-view-grid" />
-          </button>
-        ) : null}
-        <button
-          type="button"
-          onClick={() => {
-            toggleMuteApp();
-            this.updateToolTip();
-          }}
-          className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
-          data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
-        >
-          <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
-        </button>
-        <button
-          type="button"
-          onClick={() => openSettings({ path: 'recipes' })}
-          className="sidebar__button sidebar__button--new-service"
-          data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
-        >
-          <i className="mdi mdi-plus-box" />
-        </button>
+        {
+          isLoggedIn ? (
+            <>
+              {workspaceStore.isFeatureEnabled ? (
+                <button
+                  type="button"
+                  onClick={() => {
+                    toggleWorkspaceDrawer();
+                    this.updateToolTip();
+                  }}
+                  className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
+                  data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
+                >
+                  <i className="mdi mdi-view-grid" />
+                </button>
+              ) : null}
+          
+                <button
+                type="button"
+                onClick={() => {
+                  toggleMuteApp();
+                  this.updateToolTip();
+                }}
+                className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
+                data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
+              >
+                <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
+              </button>
+              <button
+                type="button"
+                onClick={() => openSettings({ path: 'recipes' })}
+                className="sidebar__button sidebar__button--new-service"
+                data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
+              >
+                <i className="mdi mdi-plus-box" />
+              </button>
+            </>
+          ) : (
+            <Link 
+              to="/auth/welcome" 
+              className="sidebar__button sidebar__button--new-service"
+              data-tip="Login">
+                <i className="mdi mdi-login-variant" />
+            </Link>
+          )
+        }
+        
         <button
           type="button"
           onClick={() => openSettings({ path: 'app' })}
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 22ebde1d3..5d21262af 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -50,6 +50,7 @@ export default @observer class Services extends Component {
       update,
     } = this.props;
     const { intl } = this.context;
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="services">
@@ -59,14 +60,17 @@ export default @observer 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>Please open settings, choose a Ferdi server and click "Login" in the bottom left corner.</p>
+              ) }
               <Appear
                 timeout={300}
                 transitionName="slideUp"
               >
-                <Link to="/settings/recipes" className="button">
-                  {intl.formatMessage(messages.getStarted)}
+                <Link to={ isLoggedIn ? '/settings/services' : '/settings/app' } className="button">
+                  { isLoggedIn ? intl.formatMessage(messages.getStarted) : 'Open settings' }
                 </Link>
               </Appear>
             </div>
diff --git a/src/i18n/messages/src/components/layout/Sidebar.json b/src/i18n/messages/src/components/layout/Sidebar.json
index 8fc508f71..d67adc96e 100644
--- a/src/i18n/messages/src/components/layout/Sidebar.json
+++ b/src/i18n/messages/src/components/layout/Sidebar.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 12,
+      "line": 13,
       "column": 12
     },
     "end": {
-      "line": 15,
+      "line": 16,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Add new service",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 16,
+      "line": 17,
       "column": 17
     },
     "end": {
-      "line": 19,
+      "line": 20,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Disable notifications & audio",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 20,
+      "line": 21,
       "column": 8
     },
     "end": {
-      "line": 23,
+      "line": 24,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Enable notifications & audio",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 24,
+      "line": 25,
       "column": 10
     },
     "end": {
-      "line": 27,
+      "line": 28,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Open workspace drawer",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 28,
+      "line": 29,
       "column": 23
     },
     "end": {
-      "line": 31,
+      "line": 32,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Close workspace drawer",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 32,
+      "line": 33,
       "column": 24
     },
     "end": {
-      "line": 35,
+      "line": 36,
       "column": 3
     }
   }