SILABMC-236: upd layput for ReadOnly role

35 files changed, 286 insertions, 54 deletions

diff --git a/src/assets/styles/bmc/_sila/_base.scss b/src/assets/styles/bmc/_sila/_base.scss
index cf5ffeb5..cc01b569 100644
--- a/src/assets/styles/bmc/_sila/_base.scss
+++ b/src/assets/styles/bmc/_sila/_base.scss
@@ -150,11 +150,6 @@ h6,
   }
 }
 
-.disabledDiv {
-  pointer-events: none;
-  opacity: 0.3;
-}
-
 .white-space--nowrap {
   white-space: nowrap;
 }
@@ -165,3 +160,22 @@ h6,
 .align-items--center {
   align-items: center;
 }
+
+.disabledDiv {
+  pointer-events: none !important;
+  opacity: 0.5 !important;
+}
+
+.custom-select {
+  opacity: 0.5 !important;
+}
+
+.custom-control {
+  input:disabled ~ label::before {
+    opacity: 0.5 !important;
+  }
+}
+
+button:disabled {
+  opacity: 0.5 !important;
+}
diff --git a/src/components/_sila/Global/FormFile.vue b/src/components/_sila/Global/FormFile.vue
index ee93ba49..686c9a09 100644
--- a/src/components/_sila/Global/FormFile.vue
+++ b/src/components/_sila/Global/FormFile.vue
@@ -28,6 +28,7 @@
           'btn-secondary': isSecondary,
           'btn-primary': !isSecondary,
         }"
+        :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
         @click="$bvModal.show(`modal-${id}`)"
       >
         {{ $t('global.fileUpload.browseText') }}
diff --git a/src/components/_sila/Global/TableToolbar.vue b/src/components/_sila/Global/TableToolbar.vue
index 028b0497..53d004cf 100644
--- a/src/components/_sila/Global/TableToolbar.vue
+++ b/src/components/_sila/Global/TableToolbar.vue
@@ -13,6 +13,7 @@
             :data-test-id="`table-button-${action.value}Selected`"
             variant="primary"
             class="d-block"
+            :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
             @click="$emit('batch-action', action.value)"
           >
             {{ action.label }}
diff --git a/src/store/modules/Authentication/AuthenticanStore.js b/src/store/modules/Authentication/AuthenticanStore.js
index 07d5ee8b..a574331b 100644
--- a/src/store/modules/Authentication/AuthenticanStore.js
+++ b/src/store/modules/Authentication/AuthenticanStore.js
@@ -1,6 +1,7 @@
 import api from '@/store/api';
 import Cookies from 'js-cookie';
 import router from '@/router';
+import { EncryptStorage } from 'encrypt-storage';
 
 const AuthenticationStore = {
   namespaced: true,
@@ -17,6 +18,10 @@ const AuthenticationStore = {
       );
     },
     token: (state) => state.xsrfCookie,
+    role: () => {
+      const encryptStorage = new EncryptStorage('ZAaZi(P,m5+BcM|UTox5');
+      return encryptStorage.getItem('storedUserrole');
+    },
   },
   mutations: {
     authSuccess(state) {
@@ -33,13 +38,30 @@ const AuthenticationStore = {
       state.xsrfCookie = undefined;
       state.isAuthenticatedCookie = undefined;
     },
+    setRole(state, role) {
+      const encryptStorage = new EncryptStorage('ZAaZi(P,m5+BcM|UTox5');
+      encryptStorage.setItem('storedUserrole', role);
+    },
   },
   actions: {
-    login({ commit }, { username, password }) {
+    login({ commit, dispatch }, { username, password }) {
       commit('authError', false);
       return api
         .post('/login', { data: [username, password] })
-        .then(() => commit('authSuccess'))
+        .then(() => {
+          dispatch('getUser', username)
+            .then((response) => {
+              if (response.data?.RoleId) {
+                commit('setRole', response.data.RoleId);
+              }
+            })
+            .catch((error) => {
+              commit('authError');
+              throw new Error(error);
+            });
+
+          commit('authSuccess');
+        })
         .catch((error) => {
           commit('authError');
           throw new Error(error);
@@ -52,9 +74,8 @@ const AuthenticationStore = {
         .then(() => router.go('/login'))
         .catch((error) => console.log(error));
     },
-    checkPasswordChangeRequired(_, username) {
-      api
-        .get(`/redfish/v1/AccountService/Accounts/${username}`)
+    checkPasswordChangeRequired({ dispatch }, username) {
+      dispatch('getUser', username)
         .then(({ data: { PasswordChangeRequired } }) => PasswordChangeRequired)
         .catch((error) => console.log(error));
     },
@@ -63,6 +84,9 @@ const AuthenticationStore = {
       state.xsrfCookie = Cookies.get('XSRF-TOKEN');
       state.isAuthenticatedCookie = Cookies.get('IsAuthenticated');
     },
+    getUser(_, username) {
+      return api.get(`/redfish/v1/AccountService/Accounts/${username}`);
+    },
   },
 };
 
diff --git a/src/views/_sila/Login/Login.vue b/src/views/_sila/Login/Login.vue
index b3bd37c8..db6a6a09 100644
--- a/src/views/_sila/Login/Login.vue
+++ b/src/views/_sila/Login/Login.vue
@@ -129,9 +129,13 @@ export default {
         })
         .then((passwordChangeRequired) => {
           if (passwordChangeRequired) {
-            window.location.href = '/change-password';
+            setTimeout(() => {
+              window.location.href = '/change-password';
+            }, 1000);
           } else {
-            window.location.href = '/';
+            setTimeout(() => {
+              window.location.href = '/';
+            }, 1000);
           }
         })
         .catch((error) => console.log(error))
diff --git a/src/views/_sila/Logs/EventLogs/EventLogs.vue b/src/views/_sila/Logs/EventLogs/EventLogs.vue
index 8cc65bfb..f283fc8b 100644
--- a/src/views/_sila/Logs/EventLogs/EventLogs.vue
+++ b/src/views/_sila/Logs/EventLogs/EventLogs.vue
@@ -32,7 +32,10 @@
         <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
         <b-button
           variant="link"
-          :disabled="allLogs.length === 0"
+          :disabled="
+            allLogs.length === 0 &&
+            $store.getters['authentication/role'] === 'ReadOnly'
+          "
           @click="deleteAllLogs"
         >
           <icon-delete /> {{ $t('global.action.deleteAll') }}
@@ -57,10 +60,18 @@
           @batch-action="onBatchAction"
         >
           <template #toolbar-buttons>
-            <b-button variant="primary" @click="resolveLogs">
+            <b-button
+              variant="primary"
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+              @click="resolveLogs"
+            >
               {{ $t('pageEventLogs.resolve') }}
             </b-button>
-            <b-button variant="primary" @click="unresolveLogs">
+            <b-button
+              variant="primary"
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+              @click="unresolveLogs"
+            >
               {{ $t('pageEventLogs.unresolve') }}
             </b-button>
             <table-toolbar-export
@@ -184,6 +195,7 @@
               v-model="row.item.status"
               name="switch"
               switch
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               @change="changelogStatus(row.item)"
             >
               <span v-if="row.item.status">
@@ -206,6 +218,11 @@
               :row-data="row.item"
               :export-name="exportFileNameByDate('export')"
               :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
+              :class="{
+                disabledDiv:
+                  $store.getters['authentication/role'] === 'ReadOnly' &&
+                  action.value === 'delete',
+              }"
               @click-table-action="onTableRowAction($event, row.item)"
             >
               <template #icon>
diff --git a/src/views/_sila/Operations/FactoryReset/FactoryReset.vue b/src/views/_sila/Operations/FactoryReset/FactoryReset.vue
index 4e315619..b7ae5b8d 100644
--- a/src/views/_sila/Operations/FactoryReset/FactoryReset.vue
+++ b/src/views/_sila/Operations/FactoryReset/FactoryReset.vue
@@ -17,6 +17,7 @@
                 value="resetBios"
                 aria-describedby="reset-bios"
                 data-test-id="factoryReset-radio-resetBios"
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               >
                 {{ $t('pageFactoryReset.form.resetBiosOptionLabel') }}
               </b-form-radio>
@@ -29,6 +30,7 @@
                 value="resetToDefaults"
                 aria-describedby="reset-to-defaults"
                 data-test-id="factoryReset-radio-resetToDefaults"
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               >
                 {{ $t('pageFactoryReset.form.resetToDefaultsOptionLabel') }}
               </b-form-radio>
diff --git a/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue
index 23fe90f2..dcf867ee 100644
--- a/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue
@@ -60,7 +60,10 @@
           data-test-id="firmware-button-startUpdate"
           type="submit"
           variant="primary"
-          :disabled="isPageDisabled"
+          :disabled="
+            isPageDisabled ||
+            $store.getters['authentication/role'] === 'ReadOnly'
+          "
         >
           {{ $t('pageFirmware.form.updateFirmware.startUpdate') }}
         </b-btn>
diff --git a/src/views/_sila/Operations/KeyClear/KeyClear.vue b/src/views/_sila/Operations/KeyClear/KeyClear.vue
index 8955f6cd..b49118d1 100644
--- a/src/views/_sila/Operations/KeyClear/KeyClear.vue
+++ b/src/views/_sila/Operations/KeyClear/KeyClear.vue
@@ -23,19 +23,31 @@
               v-model="keyOption"
               stacked
             >
-              <b-form-radio class="mb-1" value="NONE">
+              <b-form-radio
+                class="mb-1"
+                value="NONE"
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+              >
                 {{ $t('pageKeyClear.form.none') }}
               </b-form-radio>
               <b-form-text id="key-clear-not-requested" class="ml-4 mb-3">
                 {{ $t('pageKeyClear.form.keyClearNotRequested') }}
               </b-form-text>
-              <b-form-radio class="mb-1" value="ALL">
+              <b-form-radio
+                class="mb-1"
+                value="ALL"
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+              >
                 {{ $t('pageKeyClear.form.clearAllLabel') }}
               </b-form-radio>
               <b-form-text id="clear-all" class="ml-4 mb-3">
                 {{ $t('pageKeyClear.form.clearAllHeperText') }}
               </b-form-text>
-              <b-form-radio class="mb-1" value="POWERVM_SYSKEY">
+              <b-form-radio
+                class="mb-1"
+                value="POWERVM_SYSKEY"
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+              >
                 {{ $t('pageKeyClear.form.clearHypervisorSystemKeyLabel') }}
               </b-form-radio>
               <b-form-text id="clear-hypervisor-key" class="ml-4 mb-3">
diff --git a/src/views/_sila/Operations/Kvm/Kvm.vue b/src/views/_sila/Operations/Kvm/Kvm.vue
index ede24608..4db46372 100644
--- a/src/views/_sila/Operations/Kvm/Kvm.vue
+++ b/src/views/_sila/Operations/Kvm/Kvm.vue
@@ -1,7 +1,12 @@
 <template>
   <b-container fluid="xl">
     <page-title />
-    <div class="terminal-container">
+    <div
+      class="terminal-container"
+      :class="{
+        disabledDiv: $store.getters['authentication/role'] === 'ReadOnly',
+      }"
+    >
       <kvm-console :is-full-window="false" />
     </div>
   </b-container>
diff --git a/src/views/_sila/Operations/RebootBmc/RebootBmc.vue b/src/views/_sila/Operations/RebootBmc/RebootBmc.vue
index fa16f55e..f332de88 100644
--- a/src/views/_sila/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/_sila/Operations/RebootBmc/RebootBmc.vue
@@ -23,6 +23,7 @@
             variant="primary"
             class="d-block mt-5"
             data-test-id="rebootBmc-button-reboot"
+            :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
             @click="onClick"
           >
             {{ $t('pageRebootBmc.rebootBmc') }}
diff --git a/src/views/_sila/Operations/SerialOverLan/SerialOverLan.vue b/src/views/_sila/Operations/SerialOverLan/SerialOverLan.vue
index 22824772..e09b43d3 100644
--- a/src/views/_sila/Operations/SerialOverLan/SerialOverLan.vue
+++ b/src/views/_sila/Operations/SerialOverLan/SerialOverLan.vue
@@ -3,7 +3,12 @@
     <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" />
 
     <page-section class="mb-0">
-      <serial-over-lan-console :is-full-window="false" />
+      <serial-over-lan-console
+        :is-full-window="false"
+        :class="{
+          disabledDiv: $store.getters['authentication/role'] === 'ReadOnly',
+        }"
+      />
     </page-section>
   </b-container>
 </template>
diff --git a/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue b/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue
index 8d74e381..1288af0a 100644
--- a/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue
+++ b/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue
@@ -11,7 +11,10 @@
         <b-form-select
           id="boot-option"
           v-model="form.bootOption"
-          :disabled="bootSourceOptions.length === 0"
+          :disabled="
+            bootSourceOptions.length === 0 ||
+            $store.getters['authentication/role'] === 'ReadOnly'
+          "
           :options="bootSourceOptions"
           @change="onChangeSelect"
         >
@@ -20,7 +23,10 @@
       <b-form-checkbox
         v-model="form.oneTimeBoot"
         class="mb-4"
-        :disabled="form.bootOption === 'None'"
+        :disabled="
+          form.bootOption === 'None' ||
+          $store.getters['authentication/role'] === 'ReadOnly'
+        "
         @change="$v.form.oneTimeBoot.$touch()"
       >
         {{ $t('pageServerPowerOperations.bootSettings.enableOneTimeBoot') }}
@@ -37,12 +43,18 @@
           id="tpm-required-policy"
           v-model="form.tpmPolicyOn"
           aria-describedby="tpm-required-policy-help-block"
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           @change="$v.form.tpmPolicyOn.$touch()"
         >
           {{ $t('global.status.enabled') }}
         </b-form-checkbox>
       </b-form-group>
-      <b-button variant="primary" type="submit" class="mb-3">
+      <b-button
+        variant="primary"
+        type="submit"
+        class="mb-3"
+        :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+      >
         {{ $t('global.action.save') }}
       </b-button>
     </b-form>
diff --git a/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue
index e848215f..f8a18a9e 100644
--- a/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -72,6 +72,7 @@
             <b-button
               variant="primary"
               data-test-id="serverPowerOperations-button-powerOn"
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               @click="powerOn"
             >
               {{ $t('pageServerPowerOperations.powerOn') }}
@@ -88,6 +89,9 @@
                   name="reboot-option"
                   data-test-id="serverPowerOperations-radio-rebootOrderly"
                   value="orderly"
+                  :disabled="
+                    $store.getters['authentication/role'] === 'ReadOnly'
+                  "
                 >
                   {{ $t('pageServerPowerOperations.orderlyReboot') }}
                 </b-form-radio>
@@ -96,6 +100,9 @@
                   name="reboot-option"
                   data-test-id="serverPowerOperations-radio-rebootImmediate"
                   value="immediate"
+                  :disabled="
+                    $store.getters['authentication/role'] === 'ReadOnly'
+                  "
                 >
                   {{ $t('pageServerPowerOperations.immediateReboot') }}
                 </b-form-radio>
@@ -104,6 +111,7 @@
                 variant="primary"
                 type="submit"
                 data-test-id="serverPowerOperations-button-reboot"
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               >
                 {{ $t('pageServerPowerOperations.reboot') }}
               </b-button>
@@ -118,6 +126,9 @@
                   name="shutdown-option"
                   data-test-id="serverPowerOperations-radio-shutdownOrderly"
                   value="orderly"
+                  :disabled="
+                    $store.getters['authentication/role'] === 'ReadOnly'
+                  "
                 >
                   {{ $t('pageServerPowerOperations.orderlyShutdown') }}
                 </b-form-radio>
@@ -126,6 +137,9 @@
                   name="shutdown-option"
                   data-test-id="serverPowerOperations-radio-shutdownImmediate"
                   value="immediate"
+                  :disabled="
+                    $store.getters['authentication/role'] === 'ReadOnly'
+                  "
                 >
                   {{ $t('pageServerPowerOperations.immediateShutdown') }}
                 </b-form-radio>
@@ -134,6 +148,7 @@
                 variant="primary"
                 type="submit"
                 data-test-id="serverPowerOperations-button-shutDown"
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               >
                 {{ $t('pageServerPowerOperations.shutDown') }}
               </b-button>
diff --git a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
index 8b396f41..be5e2ee9 100644
--- a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
+++ b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
@@ -17,6 +17,9 @@
                   v-if="!dev.isActive"
                   :id="concatId(dev.id)"
                   v-model="dev.file"
+                  :disabled="
+                    $store.getters['authentication/role'] === 'ReadOnly'
+                  "
                 >
                   <template #invalid>
                     <b-form-invalid-feedback role="alert">
@@ -73,7 +76,10 @@
               >
                 <b-button
                   variant="primary"
-                  :disabled="device.isActive"
+                  :disabled="
+                    device.isActive ||
+                    $store.getters['authentication/role'] === 'ReadOnly'
+                  "
                   @click="configureConnection(device)"
                 >
                   {{ $t('pageVirtualMedia.configureConnection') }}
diff --git a/src/views/_sila/Overview/DateTime/DateTime.vue b/src/views/_sila/Overview/DateTime/DateTime.vue
index 796a57ac..e9de12c5 100644
--- a/src/views/_sila/Overview/DateTime/DateTime.vue
+++ b/src/views/_sila/Overview/DateTime/DateTime.vue
@@ -42,6 +42,7 @@
             v-model="form.configurationSelected"
             value="manual"
             data-test-id="dateTime-radio-configureManual"
+            :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           >
             {{ $t('pageDateTime.form.manual') }}
           </b-form-radio>
@@ -57,7 +58,10 @@
                     id="input-manual-date"
                     v-model="form.manual.date"
                     :state="getValidationState($v.form.manual.date)"
-                    :disabled="ntpOptionSelected"
+                    :disabled="
+                      ntpOptionSelected ||
+                      $store.getters['authentication/role'] === 'ReadOnly'
+                    "
                     data-test-id="dateTime-input-manualDate"
                     class="form-control-with-button"
                     @blur="$v.form.manual.date.$touch()"
@@ -81,7 +85,10 @@
                       $t('global.calendar.useCursorKeysToNavigateCalendarDates')
                     "
                     :title="$t('global.calendar.selectDate')"
-                    :disabled="ntpOptionSelected"
+                    :disabled="
+                      ntpOptionSelected ||
+                      $store.getters['authentication/role'] === 'ReadOnly'
+                    "
                     button-variant="link"
                     aria-controls="input-manual-date"
                   >
@@ -106,7 +113,10 @@
                     id="input-manual-time"
                     v-model="form.manual.time"
                     :state="getValidationState($v.form.manual.time)"
-                    :disabled="ntpOptionSelected"
+                    :disabled="
+                      ntpOptionSelected ||
+                      $store.getters['authentication/role'] === 'ReadOnly'
+                    "
                     data-test-id="dateTime-input-manualTime"
                     @blur="$v.form.manual.time.$touch()"
                   />
@@ -126,6 +136,7 @@
             v-model="form.configurationSelected"
             value="ntp"
             data-test-id="dateTime-radio-configureNTP"
+            :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           >
             NTP
           </b-form-radio>
@@ -140,7 +151,10 @@
                     id="input-ntp-1"
                     v-model="form.ntp.firstAddress"
                     :state="getValidationState($v.form.ntp.firstAddress)"
-                    :disabled="manualOptionSelected"
+                    :disabled="
+                      manualOptionSelected ||
+                      $store.getters['authentication/role'] === 'ReadOnly'
+                    "
                     data-test-id="dateTime-input-ntpServer1"
                     @blur="$v.form.ntp.firstAddress.$touch()"
                   />
@@ -165,7 +179,10 @@
                     id="input-ntp-2"
                     v-model="form.ntp.secondAddress"
                     :state="getValidationState($v.form.ntp.secondAddress)"
-                    :disabled="manualOptionSelected"
+                    :disabled="
+                      manualOptionSelected ||
+                      $store.getters['authentication/role'] === 'ReadOnly'
+                    "
                     data-test-id="dateTime-input-ntpServer2"
                     @blur="$v.form.ntp.secondAddress.$touch()"
                   />
@@ -187,7 +204,10 @@
                     id="input-ntp-3"
                     v-model="form.ntp.thirdAddress"
                     :state="getValidationState($v.form.ntp.thirdAddress)"
-                    :disabled="manualOptionSelected"
+                    :disabled="
+                      manualOptionSelected ||
+                      $store.getters['authentication/role'] === 'ReadOnly'
+                    "
                     data-test-id="dateTime-input-ntpServer3"
                     @blur="$v.form.ntp.thirdAddress.$touch()"
                   />
@@ -204,6 +224,7 @@
             variant="primary"
             type="submit"
             data-test-id="dateTime-button-saveSettings"
+            :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           >
             {{ $t('global.action.saveSettings') }}
           </b-button>
diff --git a/src/views/_sila/Overview/Inventory/InventoryServiceIndicator.vue b/src/views/_sila/Overview/Inventory/InventoryServiceIndicator.vue
index b4531be7..7f0c9030 100644
--- a/src/views/_sila/Overview/Inventory/InventoryServiceIndicator.vue
+++ b/src/views/_sila/Overview/Inventory/InventoryServiceIndicator.vue
@@ -23,6 +23,7 @@
                 v-model="systems.locationIndicatorActive"
                 data-test-id="inventoryService-toggle-identifyLed"
                 switch
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
                 @change="toggleIdentifyLedSwitch"
               >
                 <span v-if="systems.locationIndicatorActive">
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableAssembly.vue b/src/views/_sila/Overview/Inventory/InventoryTableAssembly.vue
index 9c284533..929c172b 100644
--- a/src/views/_sila/Overview/Inventory/InventoryTableAssembly.vue
+++ b/src/views/_sila/Overview/Inventory/InventoryTableAssembly.vue
@@ -32,6 +32,7 @@
           v-model="row.item.identifyLed"
           name="switch"
           switch
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           @change="toggleIdentifyLedValue(row.item)"
         >
           <span v-if="row.item.identifyLed">
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableBmcManager.vue b/src/views/_sila/Overview/Inventory/InventoryTableBmcManager.vue
index e3375d57..5fb23bfd 100644
--- a/src/views/_sila/Overview/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/_sila/Overview/Inventory/InventoryTableBmcManager.vue
@@ -36,6 +36,7 @@
           v-model="row.item.identifyLed"
           name="switch"
           switch
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           @change="toggleIdentifyLedValue(row.item)"
         >
           <span v-if="row.item.identifyLed">
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableChassis.vue b/src/views/_sila/Overview/Inventory/InventoryTableChassis.vue
index a5eb5ae6..d141924f 100644
--- a/src/views/_sila/Overview/Inventory/InventoryTableChassis.vue
+++ b/src/views/_sila/Overview/Inventory/InventoryTableChassis.vue
@@ -35,6 +35,7 @@
           v-model="row.item.identifyLed"
           name="switch"
           switch
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           @change="toggleIdentifyLedValue(row.item)"
         >
           <span v-if="row.item.identifyLed">
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableDimmSlot.vue b/src/views/_sila/Overview/Inventory/InventoryTableDimmSlot.vue
index f1858ae9..40c30d4c 100644
--- a/src/views/_sila/Overview/Inventory/InventoryTableDimmSlot.vue
+++ b/src/views/_sila/Overview/Inventory/InventoryTableDimmSlot.vue
@@ -52,19 +52,18 @@
       </template>
       <!-- Toggle identify LED -->
       <template #cell(identifyLed)="row">
-        <div class="disabledDiv">
-          <b-form-checkbox
-            v-model="row.item.identifyLed"
-            name="switch"
-            switch
-            @change="toggleIdentifyLedValue(row.item)"
-          >
-            <span v-if="row.item.identifyLed">
-              {{ $t('global.status.on') }}
-            </span>
-            <span v-else> {{ $t('global.status.off') }} </span>
-          </b-form-checkbox>
-        </div>
+        <b-form-checkbox
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          disabled
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
       </template>
       <template #row-details="{ item }">
         <b-container fluid>
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableProcessors.vue b/src/views/_sila/Overview/Inventory/InventoryTableProcessors.vue
index 27633495..ed9ca194 100644
--- a/src/views/_sila/Overview/Inventory/InventoryTableProcessors.vue
+++ b/src/views/_sila/Overview/Inventory/InventoryTableProcessors.vue
@@ -59,6 +59,7 @@
           v-model="row.item.identifyLed"
           name="switch"
           switch
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           @change="toggleIdentifyLedValue(row.item)"
         >
           <span v-if="row.item.identifyLed">
diff --git a/src/views/_sila/Overview/Inventory/InventoryTableSystem.vue b/src/views/_sila/Overview/Inventory/InventoryTableSystem.vue
index eacc4a06..286df969 100644
--- a/src/views/_sila/Overview/Inventory/InventoryTableSystem.vue
+++ b/src/views/_sila/Overview/Inventory/InventoryTableSystem.vue
@@ -35,6 +35,7 @@
           v-model="item.locationIndicatorActive"
           data-test-id="inventorySystem-toggle-identifyLed"
           switch
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           @change="toggleIdentifyLedSwitch"
         >
           <span v-if="item.locationIndicatorActive">
diff --git a/src/views/_sila/Overview/Network/NetworkGlobalSettings.vue b/src/views/_sila/Overview/Network/NetworkGlobalSettings.vue
index 44035ae6..6a08c2c2 100644
--- a/src/views/_sila/Overview/Network/NetworkGlobalSettings.vue
+++ b/src/views/_sila/Overview/Network/NetworkGlobalSettings.vue
@@ -8,7 +8,12 @@
         <dl>
           <dt>
             {{ $t('pageNetwork.hostname') }}
-            <b-button variant="link" class="p-1" @click="initSettingsModal()">
+            <b-button
+              variant="link"
+              class="p-1"
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+              @click="initSettingsModal()"
+            >
               <icon-edit :title="$t('pageNetwork.modal.editHostnameTitle')" />
             </b-button>
           </dt>
@@ -24,6 +29,7 @@
               v-model="useDomainNameState"
               data-test-id="networkSettings-switch-useDomainName"
               switch
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               @change="changeDomainNameState"
             >
               <span v-if="useDomainNameState">
@@ -43,6 +49,7 @@
               v-model="useDnsState"
               data-test-id="networkSettings-switch-useDns"
               switch
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               @change="changeDnsState"
             >
               <span v-if="useDnsState">
@@ -62,6 +69,7 @@
               v-model="useNtpState"
               data-test-id="networkSettings-switch-useNtp"
               switch
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               @change="changeNtpState"
             >
               <span v-if="useNtpState">
diff --git a/src/views/_sila/Overview/Network/NetworkInterfaceSettings.vue b/src/views/_sila/Overview/Network/NetworkInterfaceSettings.vue
index 657a2270..6eccb455 100644
--- a/src/views/_sila/Overview/Network/NetworkInterfaceSettings.vue
+++ b/src/views/_sila/Overview/Network/NetworkInterfaceSettings.vue
@@ -39,6 +39,7 @@
               <b-button
                 variant="link"
                 class="p-1"
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
                 @click="initMacAddressModal()"
               >
                 <icon-edit
diff --git a/src/views/_sila/Overview/Network/TableDns.vue b/src/views/_sila/Overview/Network/TableDns.vue
index ee830ee4..e522d69b 100644
--- a/src/views/_sila/Overview/Network/TableDns.vue
+++ b/src/views/_sila/Overview/Network/TableDns.vue
@@ -3,7 +3,11 @@
     <b-row>
       <b-col>
         <div class="text-right">
-          <b-button variant="primary" @click="initDnsModal()">
+          <b-button
+            variant="primary"
+            :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+            @click="initDnsModal()"
+          >
             <icon-add />
             {{ $t('pageNetwork.table.addDnsAddress') }}
           </b-button>
diff --git a/src/views/_sila/Overview/Network/TableIpv4.vue b/src/views/_sila/Overview/Network/TableIpv4.vue
index 2fa3d1f3..4cdc6a92 100644
--- a/src/views/_sila/Overview/Network/TableIpv4.vue
+++ b/src/views/_sila/Overview/Network/TableIpv4.vue
@@ -7,7 +7,11 @@
         </h3>
       </b-col>
       <b-col class="text-right">
-        <b-button variant="primary" @click="initAddIpv4Address()">
+        <b-button
+          variant="primary"
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+          @click="initAddIpv4Address()"
+        >
           <icon-add />
           {{ $t('pageNetwork.table.addIpv4Address') }}
         </b-button>
diff --git a/src/views/_sila/Overview/OverviewInventory.vue b/src/views/_sila/Overview/OverviewInventory.vue
index 575cb7b7..bc0fd69e 100644
--- a/src/views/_sila/Overview/OverviewInventory.vue
+++ b/src/views/_sila/Overview/OverviewInventory.vue
@@ -13,6 +13,7 @@
               v-model="systems.locationIndicatorActive"
               data-test-id="overviewInventory-checkbox-identifyLed"
               switch
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               @change="toggleIdentifyLedSwitch"
             >
               <span v-if="systems.locationIndicatorActive">
diff --git a/src/views/_sila/ResourceManagement/Power.vue b/src/views/_sila/ResourceManagement/Power.vue
index 3c1e6412..db1104e6 100644
--- a/src/views/_sila/ResourceManagement/Power.vue
+++ b/src/views/_sila/ResourceManagement/Power.vue
@@ -26,6 +26,7 @@
                 v-model="isPowerCapFieldEnabled"
                 data-test-id="power-checkbox-togglePowerCapField"
                 name="power-cap-setting"
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               >
                 {{ $t('pagePower.powerCapSettingData') }}
               </b-form-checkbox>
@@ -52,7 +53,10 @@
               <b-form-input
                 id="input-1"
                 v-model.number="powerCapValue"
-                :disabled="!isPowerCapFieldEnabled"
+                :disabled="
+                  !isPowerCapFieldEnabled ||
+                  $store.getters['authentication/role'] === 'ReadOnly'
+                "
                 data-test-id="power-input-powerCapValue"
                 type="number"
                 aria-describedby="power-help-text"
@@ -75,6 +79,7 @@
           variant="primary"
           type="submit"
           data-test-id="power-button-savePowerCapValue"
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
         >
           {{ $t('global.action.save') }}
         </b-button>
diff --git a/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue b/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue
index 27950b76..cdfb1e47 100644
--- a/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue
+++ b/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue
@@ -37,13 +37,17 @@
           v-b-modal.generate-csr
           data-test-id="certificates-button-generateCsr"
           variant="link"
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
         >
           <icon-add />
           {{ $t('pageCertificates.generateCsr') }}
         </b-button>
         <b-button
           variant="primary"
-          :disabled="certificatesForUpload.length === 0"
+          :disabled="
+            certificatesForUpload.length === 0 ||
+            $store.getters['authentication/role'] === 'ReadOnly'
+          "
           @click="initModalUploadCertificate(null)"
         >
           <icon-add />
@@ -81,6 +85,11 @@
               :value="action.value"
               :title="action.title"
               :enabled="action.enabled"
+              :class="{
+                disabledDiv:
+                  $store.getters['authentication/role'] === 'ReadOnly' &&
+                  (action.value === 'delete' || action.value === 'replace'),
+              }"
               @click-table-action="onTableRowAction($event, item)"
             >
               <template #icon>
diff --git a/src/views/_sila/SecurityAndAccess/Ldap/Ldap.vue b/src/views/_sila/SecurityAndAccess/Ldap/Ldap.vue
index 6800ead5..12584fac 100644
--- a/src/views/_sila/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/_sila/SecurityAndAccess/Ldap/Ldap.vue
@@ -13,6 +13,7 @@
               <b-form-checkbox
                 v-model="form.ldapAuthenticationEnabled"
                 data-test-id="ldap-checkbox-ldapAuthenticationEnabled"
+                :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
                 @change="onChangeldapAuthenticationEnabled"
               >
                 {{ $t('global.action.enable') }}
@@ -42,7 +43,9 @@
                     aria-describedby="enable-secure-help-block"
                     data-test-id="ldap-checkbox-secureLdapEnabled"
                     :disabled="
-                      !caCertificateExpiration || !ldapCertificateExpiration
+                      !caCertificateExpiration ||
+                      !ldapCertificateExpiration ||
+                      $store.getters['authentication/role'] === 'ReadOnly'
                     "
                     @change="$v.form.secureLdapEnabled.$touch()"
                   >
@@ -76,6 +79,9 @@
                         v-model="form.activeDirectoryEnabled"
                         data-test-id="ldap-radio-activeDirectoryEnabled"
                         :value="false"
+                        :disabled="
+                          $store.getters['authentication/role'] === 'ReadOnly'
+                        "
                         @change="onChangeServiceType"
                       >
                         OpenLDAP
@@ -84,6 +90,9 @@
                         v-model="form.activeDirectoryEnabled"
                         data-test-id="ldap-radio-activeDirectoryEnabled"
                         :value="true"
+                        :disabled="
+                          $store.getters['authentication/role'] === 'ReadOnly'
+                        "
                         @change="onChangeServiceType"
                       >
                         Active Directory
@@ -106,6 +115,9 @@
                           v-model="form.serverUri"
                           data-test-id="ldap-input-serverUri"
                           :state="getValidationState($v.form.serverUri)"
+                          :disabled="
+                            $store.getters['authentication/role'] === 'ReadOnly'
+                          "
                           @change="$v.form.serverUri.$touch()"
                         />
                         <b-form-invalid-feedback role="alert">
@@ -124,6 +136,9 @@
                         v-model="form.bindDn"
                         data-test-id="ldap-input-bindDn"
                         :state="getValidationState($v.form.bindDn)"
+                        :disabled="
+                          $store.getters['authentication/role'] === 'ReadOnly'
+                        "
                         @change="$v.form.bindDn.$touch()"
                       />
                       <b-form-invalid-feedback role="alert">
@@ -145,6 +160,9 @@
                           type="password"
                           :state="getValidationState($v.form.bindPassword)"
                           class="form-control-with-button"
+                          :disabled="
+                            $store.getters['authentication/role'] === 'ReadOnly'
+                          "
                           @change="$v.form.bindPassword.$touch()"
                         />
                         <b-form-invalid-feedback role="alert">
@@ -163,6 +181,9 @@
                         v-model="form.baseDn"
                         data-test-id="ldap-input-baseDn"
                         :state="getValidationState($v.form.baseDn)"
+                        :disabled="
+                          $store.getters['authentication/role'] === 'ReadOnly'
+                        "
                         @change="$v.form.baseDn.$touch()"
                       />
                       <b-form-invalid-feedback role="alert">
@@ -182,6 +203,9 @@
                         id="user-id-attribute"
                         v-model="form.userIdAttribute"
                         data-test-id="ldap-input-userIdAttribute"
+                        :disabled="
+                          $store.getters['authentication/role'] === 'ReadOnly'
+                        "
                         @change="$v.form.userIdAttribute.$touch()"
                       />
                     </b-form-group>
@@ -198,6 +222,9 @@
                         id="group-id-attribute"
                         v-model="form.groupIdAttribute"
                         data-test-id="ldap-input-groupIdAttribute"
+                        :disabled="
+                          $store.getters['authentication/role'] === 'ReadOnly'
+                        "
                         @change="$v.form.groupIdAttribute.$touch()"
                       />
                     </b-form-group>
@@ -213,7 +240,9 @@
               variant="primary"
               type="submit"
               data-test-id="ldap-button-saveSettings"
-              :disabled="loading"
+              :disabled="
+                loading || $store.getters['authentication/role'] === 'ReadOnly'
+              "
             >
               {{ $t('global.action.saveSettings') }}
             </b-btn>
diff --git a/src/views/_sila/SecurityAndAccess/Ldap/TableRoleGroups.vue b/src/views/_sila/SecurityAndAccess/Ldap/TableRoleGroups.vue
index ca52da13..6168ae63 100644
--- a/src/views/_sila/SecurityAndAccess/Ldap/TableRoleGroups.vue
+++ b/src/views/_sila/SecurityAndAccess/Ldap/TableRoleGroups.vue
@@ -11,7 +11,10 @@
       <b-col class="text-right" md="9">
         <b-btn
           variant="primary"
-          :disabled="!isServiceEnabled"
+          :disabled="
+            !isServiceEnabled ||
+            $store.getters['authentication/role'] === 'ReadOnly'
+          "
           @click="initRoleGroupModal(null)"
         >
           <icon-add />
diff --git a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
index 0de80de2..8e690557 100644
--- a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
+++ b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
@@ -16,6 +16,7 @@
               v-model="sshProtocolState"
               data-test-id="policies-toggle-bmcShell"
               switch
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               @change="changeSshProtocolState"
             >
               <span class="sr-only">
@@ -41,6 +42,7 @@
               v-model="ipmiProtocolState"
               data-test-id="polices-toggle-networkIpmi"
               switch
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               @change="changeIpmiProtocolState"
             >
               <span class="sr-only">
@@ -66,6 +68,7 @@
               v-model="vtpmState"
               data-test-id="policies-toggle-vtpm"
               switch
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               @change="changeVtpmState"
             >
               <span class="sr-only">
@@ -91,6 +94,7 @@
               v-model="rtadState"
               data-test-id="policies-toggle-rtad"
               switch
+              :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
               @change="changeRtadState"
             >
               <span class="sr-only">
diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue
index ae8c5209..e65b00df 100644
--- a/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -3,13 +3,18 @@
     <page-title />
     <b-row>
       <b-col xl="9" class="text-right">
-        <b-button variant="link" @click="initModalSettings">
+        <b-button
+          variant="link"
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+          @click="initModalSettings"
+        >
           <icon-settings />
           {{ $t('pageUserManagement.accountPolicySettings') }}
         </b-button>
         <b-button
           variant="primary"
           data-test-id="userManagement-button-addUser"
+          :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           @click="initModalUser(null)"
         >
           <icon-add />
@@ -68,6 +73,11 @@
               :value="action.value"
               :enabled="action.enabled"
               :title="action.title"
+              :class="{
+                disabledDiv:
+                  $store.getters['authentication/role'] === 'ReadOnly' &&
+                  (action.value === 'delete' || action.value === 'edit'),
+              }"
               @click-table-action="onTableRowAction($event, item)"
             >
               <template #icon>
diff --git a/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
index c357d47a..ec6f332f 100644
--- a/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
+++ b/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
@@ -9,12 +9,18 @@
             v-model="currentPowerRestorePolicy"
             :options="options"
             name="power-restore-policy"
+            :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
           ></b-form-radio-group>
         </b-form-group>
       </b-col>
     </b-row>
 
-    <b-button variant="primary" type="submit" @click="submitForm">
+    <b-button
+      variant="primary"
+      type="submit"
+      :disabled="$store.getters['authentication/role'] === 'ReadOnly'"
+      @click="submitForm"
+    >
       {{ $t('global.action.saveSettings') }}
     </b-button>
   </b-container>