tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🛂 Disables conf features based on permissions

This commit is contained in:
Alicia Sykes 2022-02-12 15:18:20 +00:00
parent af3343e15a
commit 69f709001f
1 changed files with 91 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
src/components/Configuration/ConfigContainer.vue
View File

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