From 90736a11ffa547ba252acccae3fc9f28c5f471fd Mon Sep 17 00:00:00 2001
From: Amine Mouafik <amine@mouafik.fr>
Date: Fri, 29 Nov 2019 19:38:23 +0700
Subject: Disable/prevent access to some settings for non-logged users

---
 src/components/settings/navigation/SettingsNavigation.js | 4 ++++
 src/components/settings/recipes/RecipesDashboard.js      | 6 ++++--
 src/components/ui/Link.js                                | 6 +++++-
 src/styles/settings.scss                                 | 4 ++++
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 192cfde7a..eb3249fa0 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -119,6 +119,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
           to="/settings/services"
           className="settings-navigation__link"
           activeClassName="is-active"
+          disabled={!isLoggedIn}
         >
           {intl.formatMessage(messages.yourServices)}
           {' '}
@@ -134,6 +135,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
             to="/settings/workspaces"
             className="settings-navigation__link"
             activeClassName="is-active"
+            disabled={!isLoggedIn}
           >
             {intl.formatMessage(messages.yourWorkspaces)}
             {' '}
@@ -148,6 +150,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
           to="/settings/user"
           className="settings-navigation__link"
           activeClassName="is-active"
+          disabled={!isLoggedIn}
         >
           {intl.formatMessage(messages.account)}
         </Link>
@@ -155,6 +158,7 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
           to="/settings/team"
           className="settings-navigation__link"
           activeClassName="is-active"
+          disabled={!isLoggedIn}
         >
           {intl.formatMessage(messages.team)}
           {!user.data.isPremium && (
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 877cbc588..d08e6cbc2 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -153,6 +153,8 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
     const communityRecipes = recipes.filter(r => !r.isDevRecipe);
     const devRecipes = recipes.filter(r => r.isDevRecipe);
 
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -265,7 +267,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                     <RecipeItem
                       key={recipe.id}
                       recipe={recipe}
-                      onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                      onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: recipe.id })}
                     />
                   ))}
                 </div>
@@ -278,7 +280,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                       <RecipeItem
                         key={recipe.id}
                         recipe={recipe}
-                        onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                        onClick={() => isLoggedIn && showAddServiceInterface({ recipeId: recipe.id })}
                       />
                     ))}
                   </div>
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 5f729844b..7930d98b4 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -11,7 +11,8 @@ import { matchRoute } from '../../helpers/routing-helpers';
 // TODO: create container component for this component
 export default @inject('stores') @observer class Link extends Component {
   onClick(e) {
-    if (this.props.target === '_blank') {
+    if (this.props.disabled) e.preventDefault();
+    else if (this.props.target === '_blank') {
       e.preventDefault();
       shell.openExternal(this.props.to);
     }
@@ -39,6 +40,7 @@ export default @inject('stores') @observer class Link extends Component {
     const linkClasses = classnames({
       [`${className}`]: true,
       [`${activeClassName}`]: match,
+      'is-disabled': this.props.disabled,
     });
 
     return (
@@ -68,12 +70,14 @@ Link.wrappedComponent.propTypes = {
   strictFilter: PropTypes.bool,
   target: PropTypes.string,
   style: PropTypes.object,
+  disabled: PropTypes.bool,
 };
 
 Link.wrappedComponent.defaultProps = {
   className: '',
   activeClassName: '',
   strictFilter: false,
+  disabled: false,
   target: '',
   style: {},
 };
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 324175d0b..305450fd2 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -92,6 +92,10 @@
         }
       }
 
+      &.is-disabled {
+        filter: grayscale(100%) opacity(.2);
+      }
+
       &.is-active {
         background: $dark-theme-gray;
         color: $dark-theme-gray-smoke;
-- 
cgit v1.2.3-70-g09d2