1 files changed, 100 insertions, 51 deletions

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 918298011..48a83c5a1 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -2,13 +2,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import { defineMessages, intlShape } from 'react-intl';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router';
 
 import Tabbar from '../services/tabs/Tabbar';
 import { ctrlKey } from '../../environment';
-import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../../features/workspaces';
-import { gaEvent } from '../../lib/analytics';
-import { todosStore, GA_CATEGORY_TODOS } from '../../features/todos';
+import { workspaceStore } from '../../features/workspaces';
+import { todosStore } from '../../features/todos';
 import { todoActions } from '../../features/todos/actions';
 
 const messages = defineMessages({
@@ -44,9 +44,13 @@ const messages = defineMessages({
     id: 'sidebar.closeTodosDrawer',
     defaultMessage: '!!!Close Franz Todos',
   },
+  lockFerdi: {
+    id: 'sidebar.lockFerdi',
+    defaultMessage: '!!!Lock Ferdi',
+  },
 });
 
-export default @observer class Sidebar extends Component {
+export default @inject('stores', 'actions') @observer class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
@@ -87,6 +91,8 @@ export default @observer class Sidebar extends Component {
       isAppMuted,
       isWorkspaceDrawerOpen,
       toggleWorkspaceDrawer,
+      stores,
+      actions,
     } = this.props;
     const { intl } = this.context;
     const todosToggleMessage = (
@@ -96,6 +102,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">
@@ -104,53 +111,89 @@ export default @observer class Sidebar extends Component {
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
         />
-        {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (
-          <button
-            type="button"
-            onClick={() => {
-              todoActions.toggleTodosPanel();
-              this.updateToolTip();
-              gaEvent(GA_CATEGORY_TODOS, 'toggleDrawer', 'sidebar');
-            }}
-            className={`sidebar__button sidebar__button--todos  ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
-            data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
-          >
-            <i className="mdi mdi-check-all" />
-          </button>
-        ) : null}
-        {workspaceStore.isFeatureEnabled ? (
-          <button
-            type="button"
-            onClick={() => {
-              toggleWorkspaceDrawer();
-              this.updateToolTip();
-              gaEvent(GA_CATEGORY_WORKSPACES, 'toggleDrawer', 'sidebar');
-            }}
-            className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
-            data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
+        { isLoggedIn ? (
+          <>
+            { stores.settings.all.app.lockingFeatureEnabled ? (
+              <button
+                type="button"
+                className="sidebar__button"
+                onClick={() => {
+                  // Disable lock first - otherwise the application might not update correctly
+                  actions.settings.update({
+                    type: 'app',
+                    data: {
+                      locked: false,
+                    },
+                  });
+                  setTimeout(() => {
+                    actions.settings.update({
+                      type: 'app',
+                      data: {
+                        locked: true,
+                      },
+                    });
+                  }, 0);
+                }}
+                data-tip={`${intl.formatMessage(messages.lockFerdi)} (${ctrlKey}+Shift+L)`}
+              >
+                <i className="mdi mdi-lock" />
+              </button>
+            ) : null}
+            {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (
+              <button
+                type="button"
+                onClick={() => {
+                  todoActions.toggleTodosPanel();
+                  this.updateToolTip();
+                }}
+                className={`sidebar__button sidebar__button--todos  ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
+                data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
+              >
+                <i className="mdi mdi-check-all" />
+              </button>
+            ) : null}
+            {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-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>
+            <i className="mdi mdi-login-variant" />
+          </Link>
+        )}
         <button
           type="button"
           onClick={() => openSettings({ path: 'app' })}
@@ -158,6 +201,12 @@ export default @observer class Sidebar extends Component {
           data-tip={`${intl.formatMessage(messages.settings)} (${ctrlKey}+,)`}
         >
           <i className="mdi mdi-settings" />
+          { (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE
+            || this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED) && (
+            <span className="update-available">
+              •
+            </span>
+          ) }
         </button>
         {this.state.tooltipEnabled && (
           <ReactTooltip place="right" type="dark" effect="solid" />