💄 Show no-access cursor when rebuild is disallowed by admin

src/components/Configuration/ConfigContainer.vue

@@ -39,7 +39,7 @@
         <p class="app-version">Dashy version {{ appVersion }}</p>
         <div class="config-note">
           <span>
-            It is recommend to make a backup of your conf.yml file, before making any  changes.
+            It is recommend to make a backup of your conf.yml file before making changes.
           </span>
         </div>
       </div>
@@ -129,7 +129,7 @@ export default {
       this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
     },
     goToCustomCss() {
-      const itemToSelect = this.$refs.tabView.navItems[4];
+      const itemToSelect = this.$refs.tabView.navItems[3];
       this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
     },
     openRebuildAppModal() {

src/components/Configuration/RebuildApp.vue

@@ -8,10 +8,13 @@
         This should happen automatically, but if it hasn't, you can manually trigger it here.<br>
         This is not required for modifications stored locally.
       </p>
-      <Button :click="startBuild" :disabled="loading">
+      <Button :click="startBuild" :disabled="loading || !allowRebuild" :disallow="!allowRebuild">
         <template v-slot:text>{{ loading ? 'Building...' : 'Start Build' }}</template>
         <template v-slot:icon><RebuildIcon /></template>
       </Button>
+      <div v-if="!allowRebuild">
+        <p class="disallow-rebuild-msg">You do no have permission to trigger this action</p>
+      </div>
       <!-- Loading animation and text (shown while build is happening) -->
       <div v-if="loading" class="loader-info">
         <LoadingAnimation class="loader" />
@@ -45,6 +48,7 @@ import LoadingAnimation from '@/assets/interface-icons/loader.svg';
 
 export default {
   name: 'RebuildApp',
+  inject: ['config'],
   components: {
     Button,
     RebuildIcon,
@@ -58,6 +62,7 @@ export default {
     error: '',
     output: '',
     message: '',
+    allowRebuild: true,
   }),
   methods: {
     startBuild() {
@@ -92,6 +97,15 @@ export default {
       location.reload(); // eslint-disable-line no-restricted-globals
     },
   },
+  mounted() {
+    if (this.config) {
+      if (this.config.appConfig) {
+        if (this.config.appConfig.allowConfigEdit === false) {
+          this.allowRebuild = false;
+        }
+      }
+    }
+  },
 };
 </script>
 
@@ -110,6 +124,13 @@ export default {
     color: var(--config-settings-color);
   }
 
+  p.disallow-rebuild-msg {
+    color: var(--danger);
+    font-size: 1.2rem;
+    margin: 0.2rem auto;
+    text-align: center;
+  }
+
   h3.rebuild-app-title {
     text-align: center;
     font-size: 2rem;

src/components/FormElements/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="click()" :disabled="disabled">
+  <button @click="click()" :disabled="disabled" :class="disallow ? 'disallowed': ''">
     <slot></slot>
     <slot name="text"></slot>
     <slot name="icon"></slot>
@@ -14,6 +14,7 @@ export default {
     text: String,
     click: Function,
     disabled: Boolean,
+    disallow: Boolean,
   },
 };
 </script>
@@ -38,6 +39,9 @@ button {
       fill: currentColor;
     }
   }
+  &.disallowed {
+    cursor: not-allowed !important;
+  }
 }
 
 /* Default visual settings, can be overridden when needed */