From 69f709001f2b59cb733ba111b0d032de73934851 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 15:18:20 +0000
Subject: [PATCH] :passport_control: Disables conf features based on
 permissions

---
 .../Configuration/ConfigContainer.vue         | 148 +++++++++++-------
 1 file changed, 91 insertions(+), 57 deletions(-)

diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index f145a773..a610ebe0 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -1,49 +1,61 @@
 <template>
-  <Tabs :navAuto="true" name="Add Item" ref="tabView">
+  <Tabs :navAuto="true" name="Add Item" ref="tabView" v-bind:class="{ hideTabs: !enableConfig }">
+    <!-- Main tab -->
     <TabItem :name="$t('config.main-tab')" class="main-tab">
       <div class="main-options-container">
         <div class="config-buttons">
           <h2>{{ $t('config.heading') }}</h2>
-          <a class="hyperlink-wrapper"  @click="openExportConfigModal()">
-            <button class="config-button center">
-              <DownloadIcon class="button-icon"/>
-              {{ $t('config.download-config-button') }}
-            </button>
-          </a>
-          <button class="config-button center" @click="() => navigateToTab(1)">
-            <EditIcon class="button-icon"/>
+          <!-- Export config button -->
+          <Button class="config-button" :disallow="!enableConfig" :click="openExportConfigModal">
+            {{ $t('config.download-config-button') }}
+            <DownloadIcon class="button-icon"/>
+          </Button>
+          <!-- Edit config button -->
+          <Button class="config-button" :disallow="!enableConfig" :click="openEditConfigTab">
             {{ $t('config.edit-config-button') }}
-          </button>
-          <button class="config-button center" @click="openLanguageSwitchModal()">
-            <LanguageIcon class="button-icon"/>
+            <EditIcon class="button-icon"/>
+          </Button>
+          <!-- Language switcher button -->
+          <Button class="config-button" :click="openLanguageSwitchModal">
             {{ $t('config.change-language-button') }}
-          </button>
-          <button class="config-button center" @click="() => navigateToTab(3)">
-            <CustomCssIcon class="button-icon"/>
+            <LanguageIcon class="button-icon"/>
+          </Button>
+          <!-- CSS / Styling button -->
+          <Button class="config-button" :disallow="!enableConfig" :click="openEditCssTab">
             {{ $t('config.edit-css-button') }}
-          </button>
-          <button class="config-button center" @click="() => navigateToTab(2)">
-            <CloudIcon class="button-icon"/>
+            <CustomCssIcon class="button-icon"/>
+          </Button>
+          <!-- Cloud sync button -->
+          <Button class="config-button" :disallow="!enableConfig" :click="openCloudSyncTab">
             {{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
-          </button>
-          <button class="config-button center" @click="openRebuildAppModal()">
-            <RebuildIcon class="button-icon"/>
+            <CloudIcon class="button-icon"/>
+          </Button>
+          <!-- Rebuild app button -->
+          <Button class="config-button" :disallow="!enableConfig" :click="openRebuildAppModal">
             {{ $t('config.rebuild-app-button') }}
-          </button>
-          <button class="config-button center" @click="resetLocalSettings()">
-            <DeleteIcon class="button-icon"/>
+            <RebuildIcon class="button-icon"/>
+          </Button>
+          <!-- Reset local changes button -->
+          <Button class="config-button" :click="resetLocalSettings">
             {{ $t('config.reset-settings-button') }}
-          </button>
-          <button class="config-button center" @click="openAboutModal()">
-            <IconAbout class="button-icon" />
+            <DeleteIcon class="button-icon"/>
+          </Button>
+          <!-- About modal button -->
+          <Button class="config-button" :click="openAboutModal">
             {{ $t('config.app-info-button') }}
-          </button>
-          <p class="small-screen-note" style="display: none;">
-              You are using a very small screen, and some screens in this menu may not be optimal
-          </p>
+            <IconAbout class="button-icon" />
+          </Button>
+          <!-- Display app version and language -->
           <p class="language">{{ getLanguage() }}</p>
           <AppVersion />
         </div>
+        <!-- Display note if Config disabled, or if on mobile -->
+        <p v-if="!enableConfig" class="config-disabled-note">
+              Some configuration features have been disabled by your administrator
+          </p>
+          <p class="small-screen-note" style="display: none;">
+              You are using a very small screen, and some screens in this menu may not be optimal
+          </p>
         <div class="config-note">
           <span>{{ $t('config.backup-note') }}</span>
         </div>
@@ -51,13 +63,13 @@
       <!-- Rebuild App Modal -->
       <RebuildApp />
     </TabItem>
-    <TabItem :name="$t('config.edit-config-tab')">
+    <TabItem :name="$t('config.edit-config-tab')" v-if="enableConfig">
       <JsonEditor />
     </TabItem>
-    <TabItem :name="$t('cloud-sync.title')">
+    <TabItem :name="$t('cloud-sync.title')" v-if="enableConfig">
       <CloudBackupRestore />
     </TabItem>
-    <TabItem :name="$t('config.custom-css-tab')">
+    <TabItem :name="$t('config.custom-css-tab')" v-if="enableConfig">
       <CustomCssEditor />
     </TabItem>
   </Tabs>
@@ -67,12 +79,14 @@
 
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 import { getUsersLanguage } from '@/utils/ConfigHelpers';
+import ErrorHandler from '@/utils/ErrorHandler';
 import StoreKeys from '@/utils/StoreMutations';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import CustomCssEditor from '@/components/Configuration/CustomCss';
 import CloudBackupRestore from '@/components/Configuration/CloudBackupRestore';
 import RebuildApp from '@/components/Configuration/RebuildApp';
 import AppVersion from '@/components/Configuration/AppVersion';
+import Button from '@/components/FormElements/Button';
 
 import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
 import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
@@ -99,8 +113,12 @@ export default {
     sections: function getSections() {
       return this.config.sections;
     },
+    enableConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   components: {
+    Button,
     JsonEditor,
     CustomCssEditor,
     CloudBackupRestore,
@@ -122,7 +140,11 @@ export default {
       this.$refs.tabView.activeTabItem(itemToSelect);
     },
     openRebuildAppModal() {
-      this.$modal.show(modalNames.REBUILD_APP);
+      if (this.enableConfig) {
+        this.$modal.show(modalNames.REBUILD_APP);
+      } else {
+        this.unauthorized();
+      }
     },
     openAboutModal() {
       this.$modal.show(modalNames.ABOUT_APP);
@@ -131,7 +153,20 @@ export default {
       this.$modal.show(modalNames.LANG_SWITCHER);
     },
     openExportConfigModal() {
-      this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
+      if (this.enableConfig) {
+        this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
+      } else {
+        this.unauthorized();
+      }
+    },
+    openEditConfigTab() {
+      this.navigateToTab(1);
+    },
+    openCloudSyncTab() {
+      this.navigateToTab(2);
+    },
+    openEditCssTab() {
+      this.navigateToTab(3);
     },
     /* Checks that the user is sure, then resets site-wide local storage, and reloads page */
     resetLocalSettings() {
@@ -155,6 +190,9 @@ export default {
       if (navToTab && isValidTabIndex(navToTab)) this.navigateToTab(navToTab);
       this.$store.commit(StoreKeys.CONF_MENU_INDEX, undefined);
     },
+    unauthorized() {
+      ErrorHandler('Unauthorized Operation - Config Disabled');
+    },
   },
   mounted() {
     this.navigateToStartingTab();
@@ -175,17 +213,13 @@ pre {
 a.config-button, button.config-button {
   display: flex;
   align-items: center;
-  padding:  0.5rem 1rem;
-  margin: 0.25rem auto;
+  justify-content: flex-end;
   font-size: 1.2rem;
   background: var(--config-settings-background);
   color: var(--config-settings-color);
   border: 1px solid var(--config-settings-color);
-  border-radius: var(--curve-factor);
-  text-decoration: none;
-  cursor: pointer;
   margin: 0.5rem auto;
-  min-width: 18rem;
+  min-width: 15rem;
   width: 100%;
   svg.button-icon {
     path {
@@ -194,9 +228,8 @@ a.config-button, button.config-button {
     width: 1rem;
     height: 1rem;
     padding: 0.2rem;
-    margin-right: 0.5rem;
   }
-  &:hover {
+  &:hover:not(.disallowed) {
     background: var(--config-settings-color);
     color: var(--config-settings-background);
     svg path {
@@ -221,12 +254,6 @@ p.app-version, p.language {
 
 div.code-container {
   background: var(--config-code-background);
-  #conf-yaml span {
-    font-family: var(--font-monospace), monospace !important;
-    &.hljs-attr {
-      font-weight: bold !important;
-    }
-  }
   .yaml-action-buttons {
     position: absolute;
     top: 1.5rem;
@@ -315,6 +342,13 @@ div.code-container {
   display: none;
   @include tablet-up { display: block; }
 }
+p.config-disabled-note {
+  margin: 0.5rem auto;
+  padding: 0 0.5rem;
+  font-weight: bold;
+  color: var(--warning);
+  opacity: var(--dimming-factor);
+}
 p.small-screen-note {
     @include phone {
       display: block !important;
@@ -330,6 +364,10 @@ p.small-screen-note {
 
 <style lang="scss">
 
+.hideTabs .tab__pagination {
+  display: none !important;
+}
+
 .tabs__content {
   height: -webkit-fill-available;
   height: -moz-available;
@@ -359,6 +397,9 @@ p.small-screen-note {
         font-weight: bold !important;
         color: var(--config-settings-color) !important;
       }
+      &:hover span {
+        color: var(--config-settings-background) !important;
+      }
     }
   }
   .tab__nav__items .tab__nav__item.active {
@@ -369,11 +410,4 @@ p.small-screen-note {
   }
 }
 
-#conf-yaml {
-  background: var(--white);
-  .hljs-attr {
-    color: #9c03f5;
-  }
-}
-
 </style>