summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorChristian Hofmaier2019-02-25 04:25:08 +0100
committerChristian Hofmaier2019-02-25 04:25:08 +0100
commit7b098c8b969a1d283a94391d9d8050ad0c5a4d13 (patch)
tree82d9f6edbc4503d3419a41626a986c4797478c8d /webapp
parent[webapp/datatable] improved slim mode (diff)
downloadbas-7b098c8b969a1d283a94391d9d8050ad0c5a4d13.tar.gz
bas-7b098c8b969a1d283a94391d9d8050ad0c5a4d13.tar.xz
bas-7b098c8b969a1d283a94391d9d8050ad0c5a4d13.zip
[permissionmanager] rework for blacklist system
- integrate PM into PM itself - wildcard function for hasPermission()
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/NoPermissionError.vue34
-rw-r--r--webapp/src/components/PermissionModule.vue56
-rw-r--r--webapp/src/components/PermissionModuleEdit.vue129
-rw-r--r--webapp/src/components/PermissionModuleGrantRevoke.vue14
-rw-r--r--webapp/src/components/PermissionModuleRoleList.vue11
-rw-r--r--webapp/src/components/PermissionModuleUserList.vue9
-rw-r--r--webapp/src/store/permissions.js22
7 files changed, 190 insertions, 85 deletions
diff --git a/webapp/src/components/NoPermissionError.vue b/webapp/src/components/NoPermissionError.vue
new file mode 100644
index 0000000..031ab78
--- /dev/null
+++ b/webapp/src/components/NoPermissionError.vue
@@ -0,0 +1,34 @@
+<i18n>
+{
+ "en": {
+ "noPermission": "You don't have permission for this."
+ },
+ "de": {
+ "noPermission": "Sie haben keine Berechtigung hierfür."
+ }
+}
+</i18n>
+
+<template>
+ <div>
+ {{ $t('noPermission') }}
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: 'NoPermissionError',
+ data () {
+ return {
+ }
+ },
+ methods: {
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>
diff --git a/webapp/src/components/PermissionModule.vue b/webapp/src/components/PermissionModule.vue
index 26d4792..b80dbaa 100644
--- a/webapp/src/components/PermissionModule.vue
+++ b/webapp/src/components/PermissionModule.vue
@@ -21,25 +21,28 @@
<v-container fill-height>
<v-layout>
<v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
- <v-card>
- <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
- centered
- v-model="tab"
- >
- <v-tab>{{ $t('roles') }}</v-tab>
- <v-tab>{{ $t('users') }}</v-tab>
- </v-tabs>
- </v-card>
- <v-tabs-items v-model="tab">
- <v-tab-item>
- <v-subheader>{{ $t('roles') }}</v-subheader>
- <permission-module-role-list/>
- </v-tab-item>
- <v-tab-item>
- <v-subheader>{{ $t('users') }}</v-subheader>
- <permission-module-user-list/>
- </v-tab-item>
- </v-tabs-items>
+ <v-card>
+ <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
+ centered
+ v-model="tab"
+ >
+ <v-tab>{{ $t('roles') }}</v-tab>
+ <v-tab>{{ $t('users') }}</v-tab>
+ </v-tabs>
+ </v-card>
+ <v-tabs-items v-model="tab" v-if="canView">
+ <v-tab-item>
+ <v-subheader>{{ $t('roles') }}</v-subheader>
+ <permission-module-role-list/>
+ </v-tab-item>
+ <v-tab-item>
+ <v-subheader>{{ $t('users') }}</v-subheader>
+ <permission-module-user-list/>
+ </v-tab-item>
+ </v-tabs-items>
+ <v-tabs-items v-model="tab" v-else>
+ <no-permission-error/>
+ </v-tabs-items>
</v-flex>
</v-layout>
@@ -82,6 +85,7 @@ import PermissionModuleRoleList from '@/components/PermissionModuleRoleList'
import PermissionModuleUserList from '@/components/PermissionModuleUserList'
import PermissionModuleGrantRevoke from '@/components/PermissionModuleGrantRevoke'
import PermissionModuleEdit from '@/components/PermissionModuleEdit'
+import NoPermissionError from '@/components/NoPermissionError'
import { mapState, mapGetters } from 'vuex'
export default {
@@ -90,12 +94,14 @@ export default {
PermissionModuleRoleList,
PermissionModuleUserList,
PermissionModuleGrantRevoke,
- PermissionModuleEdit
+ PermissionModuleEdit,
+ NoPermissionError
},
data () {
return {
- components: ['PermissionModuleRoleList', 'PermissionModuleUserList'],
- tab: 0
+ components: ['PermissionModuleRoleList', 'PermissionModuleUserList', 'NoPermissionError'],
+ tab: 0,
+ canView: false
}
},
computed: {
@@ -103,6 +109,12 @@ export default {
...mapState('permissions', ['selectedRoles', 'selectedUsers'])
},
methods: {
+ },
+ created () {
+ this.$http.get('/api/permissions/permissions.*').then(response => {
+ this.canView = response.data
+ })
+ this.$store.dispatch('permissions/loadData')
}
}
</script>
diff --git a/webapp/src/components/PermissionModuleEdit.vue b/webapp/src/components/PermissionModuleEdit.vue
index fc66e62..4f78c14 100644
--- a/webapp/src/components/PermissionModuleEdit.vue
+++ b/webapp/src/components/PermissionModuleEdit.vue
@@ -1,13 +1,13 @@
<i18n>
{
"en": {
+ "blacklist": "Blacklist",
"description": "Description",
"groupdependent": "Groupdependent",
"groups": "Groups",
"id": "ID",
"name": "Name",
"permissions": "Permissions",
- "recursiveMode": "Select Groups recursive",
"role": "Role",
"roleName": "Role Name",
"roleNameEmptyError": "Role Name can't be empty.",
@@ -17,13 +17,13 @@
"summary": "Summary"
},
"de": {
+ "blacklist": "Blacklist",
"description": "Beschreibung",
"groupdependent": "Gruppengebunden",
"groups": "Gruppen",
"id": "ID",
"name": "Name",
"permissions": "Rechte",
- "recursiveMode": "Gruppen rekursiv auswählen",
"role": "Rolle",
"roleName": "Rollenname",
"roleNameEmptyError": "Rollenname kann nicht leer sein.",
@@ -80,6 +80,15 @@
:editable="stepCompleted >= 3"
edit-icon="check"
>
+ {{ $t('blacklist') }}
+ </v-stepper-step>
+ <v-divider></v-divider>
+ <v-stepper-step
+ :complete="stepCompleted >= 5"
+ step="5"
+ :editable="stepCompleted >= 4"
+ edit-icon="check"
+ >
{{ $t('summary') }}
</v-stepper-step>
</v-stepper-header>
@@ -117,17 +126,14 @@
</v-stepper-content>
<v-stepper-content step="3" class="stepper-padding-0">
- <data-table v-model="groupsSelected" :headers="groupHeaders" :items="groups">
- <div slot="actions" slot-scope="row" style="text-align: right">
- <v-tooltip top :key="row.item" open-delay="800">
- <v-btn slot="activator" :loading="row.item.loadingSubgroups" icon @click.stop @mousedown="loadChilds(row.item)" style="margin: 0"><v-icon>device_hub</v-icon></v-btn>
- <span>{{ $t('selectChildGroups') }}</span>
- </v-tooltip>
- </div>
- </data-table>
+ <data-table v-model="whitelist" :headers="groupHeaders" :items="groups" logging/>
+ </v-stepper-content>
+
+ <v-stepper-content step="4" class="stepper-padding-0">
+ <data-table v-model="blacklist" :headers="groupHeaders" :items="blacklistGroups"/>
</v-stepper-content>
- <v-stepper-content step="4">
+ <v-stepper-content step="5">
<v-text-field
v-model="roleName"
:label="$t('roleName')"
@@ -171,7 +177,23 @@
<v-subheader inset>{{ $t('groups') }}</v-subheader>
<v-divider class="list-header-margin"></v-divider>
<RecycleScroller
- :items="groupsSelected"
+ :items="whitelist"
+ :item-height="48"
+ page-mode
+ >
+ <div slot-scope="{ item }" class="list-item">
+ <div class="list-item-header">{{ item.id }} {{ item.name }}</div>
+ <div class="list-item-subheader">{{ item.description }}</div>
+ </div>
+ </RecycleScroller>
+ </div>
+ </v-flex>
+ <v-flex xs12 sm6>
+ <div>
+ <v-subheader inset>{{ $t('blacklist') }}</v-subheader>
+ <v-divider class="list-header-margin"></v-divider>
+ <RecycleScroller
+ :items="blacklist"
:item-height="48"
page-mode
>
@@ -196,7 +218,8 @@
<v-btn color="primary" v-show="step == 1" @click.native="completeStepOne()">{{ $t('continue') }}</v-btn>
<v-btn color="primary" v-show="step == 2" @click.native="completeStepTwo()">{{ $t('continue') }}</v-btn>
<v-btn color="primary" v-show="step == 3" @click.native="completeStepThree()">{{ $t('continue') }}</v-btn>
- <v-btn class="success" v-show="step == 4" @click="submit" type="submit">{{ $t('submit') }}</v-btn>
+ <v-btn color="primary" v-show="step == 4" @click.native="completeStepFour()">{{ $t('continue') }}</v-btn>
+ <v-btn class="success" v-show="step == 5" @click="submit" type="submit">{{ $t('submit') }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
@@ -204,6 +227,7 @@
<script>
import DataTable from '@/components/DataTable'
+import { mapState } from 'vuex'
export default {
name: 'PermissionModuleEdit',
@@ -216,12 +240,10 @@ export default {
valid: true,
step: 1,
stepCompleted: 0,
- permissions: [],
- groups: [],
+ blacklistGroups: [],
permissionsSelected: [],
- groupsSelected: [],
- groupsSummary: [],
- recursiveSwitch: false,
+ whitelist: [],
+ blacklist: [],
permissionHeaders: [
{ text: this.$t('name'), key: 'name' },
{ text: this.$t('description'), key: 'descr' },
@@ -230,8 +252,7 @@ export default {
groupHeaders: [
{ text: this.$t('id'), key: 'id' },
{ text: this.$t('name'), key: 'name' },
- { text: this.$t('description'), key: 'description' },
- { key: 'actions', width: '60px' }
+ { text: this.$t('description'), key: 'description' }
],
roleName: '',
roleDescr: ''
@@ -241,16 +262,17 @@ export default {
submit (event) {
if (this.$refs.form.validate()) {
const filteredPermissions = this.permissionsSelected.map(x => x.id)
- const filteredGroups = this.groupsSelected.map(x => x.id)
+ const filteredGroups = this.whitelist.map(x => x.id)
+ const filteredBlacklist = this.blacklist.map(x => x.id)
this.$http.post('/api/roles' + (this.roleId === 0 ? '' : '/' + this.roleId), {
id: this.roleId,
name: this.roleName,
descr: this.roleDescr,
permissions: filteredPermissions,
groups: filteredGroups,
- recursiveMode: this.recursiveSwitch
+ blacklist: filteredBlacklist
}).then(response => {
- this.$store.commit('newSnackbar', this.$t('roleSavedSuccess'))
+ this.$snackbar({ color: 'success', text: this.$t('roleSavedSuccess'), timeout: 15000 })
this.$store.dispatch('permissions/loadRoleData')
this.$store.commit('permissions/setEdit', false)
}).catch(error => {
@@ -258,13 +280,23 @@ export default {
})
}
},
- loadRole (roleId) {
- this.$http('/api/roles/' + this.roleId).then(response => {
- this.roleName = response.data.name
- this.roleDescr = response.data.descr
- this.permissionsSelected = response.data.permissions
- this.groupsSelected = response.data.groups
- this.recursiveSwitch = response.data.recursiveGroups
+ async loadRole (roleId) {
+ const response = await this.$http('/api/roles/' + this.roleId)
+ this.roleName = response.data.name
+ this.roleDescr = response.data.descr
+ this.permissionsSelected = response.data.permissions
+
+ var blacklistPush = []
+ for (let i = 0; i < response.data.groups.length; i++) {
+ if (response.data.groups[i].role_x_group.blacklist) {
+ blacklistPush.push(response.data.groups[i])
+ } else {
+ this.whitelist.push(response.data.groups[i])
+ }
+ }
+
+ this.loadChilds().then(() => {
+ this.blacklist = this.blacklist.concat(blacklistPush)
})
},
completeStepOne () {
@@ -282,27 +314,26 @@ export default {
completeStepThree () {
this.step = 4
this.stepCompleted = Math.max(3, this.stepCompleted)
+ this.loadChilds()
},
- loadGroups () {
- this.$http('/api/groups').then(response => {
- this.groups = response.data
- })
- },
- loadPermissions () {
- this.$http('/api/permissions').then(response => {
- this.permissions = response.data
- })
+ completeStepFour () {
+ this.step = 5
+ this.stepCompleted = Math.max(4, this.stepCompleted)
},
- loadChilds (group) {
- group.loadingSubgroups = true
- this.groupsSelected.push(group)
- this.$http('/api/groups/' + group.id + '?all').then(response => {
- this.groupsSelected = this.groupsSelected.concat(response.data.subgroups)
- group.loadingSubgroups = false
+ async loadChilds () {
+ this.blacklistGroups = []
+ var promises = []
+ this.whitelist.forEach(group => {
+ promises.push(
+ this.$http('/api/groups/' + group.id + '?all').then(response => {
+ this.blacklistGroups = this.blacklistGroups.concat(response.data.subgroups)
+ }))
})
+ await Promise.all(promises)
}
},
computed: {
+ ...mapState('permissions', ['permissions', 'groups']),
edit: function () {
return this.$store.state.permissions.edit
}
@@ -310,17 +341,15 @@ export default {
watch: {
edit: function (value) {
if (value) {
- this.loadGroups()
- this.loadPermissions()
this.$refs.form.resetValidation()
this.permissionsSelected = []
- this.groupsSelected = []
+ this.whitelist = []
+ this.blacklist = []
this.step = 1
if (this.roleId !== 0) {
this.loadRole(this.roleId)
- this.stepCompleted = 4
+ this.stepCompleted = 5
} else {
- this.recursiveSwitch = true
this.roleName = ''
this.roleDescr = ''
this.stepCompleted = 0
diff --git a/webapp/src/components/PermissionModuleGrantRevoke.vue b/webapp/src/components/PermissionModuleGrantRevoke.vue
index 559fdfc..81afece 100644
--- a/webapp/src/components/PermissionModuleGrantRevoke.vue
+++ b/webapp/src/components/PermissionModuleGrantRevoke.vue
@@ -143,11 +143,15 @@ export default {
methods: {
async submit (event) {
const roleIds = this.selectedRoles.map(x => x.id)
- this.selectedUsers.forEach(user => {
- this.$http.post('/api/users/' + user.id + '/roles' + (this.grant ? '' : '/?delete'), { ids: roleIds })
- })
- this.$store.commit('newSnackbar', this.$t(this.grant ? 'roleGrantedSuccess' : 'roleRevokedSuccess'))
- this.$store.dispatch('permissions/loadData')
+ for (let i = 0; i < this.selectedUsers.length; i++) {
+ await this.$http.post('/api/users/' + this.selectedUsers[i].id + '/roles' + (this.grant ? '' : '/?delete'), { ids: roleIds })
+ }
+ if (this.grant) {
+ this.$snackbar({ color: 'success', text: this.$t('roleGrantedSuccess'), timeout: 15000 })
+ } else {
+ this.$snackbar({ color: 'success', text: this.$t('roleRevokedSuccess'), timeout: 15000 })
+ }
+ this.$store.dispatch('permissions/loadUserData')
this.$store.commit('permissions/setGrantRevoke', false)
this.$store.commit('permissions/setSelectedUsers', [])
},
diff --git a/webapp/src/components/PermissionModuleRoleList.vue b/webapp/src/components/PermissionModuleRoleList.vue
index 5478060..15f0525 100644
--- a/webapp/src/components/PermissionModuleRoleList.vue
+++ b/webapp/src/components/PermissionModuleRoleList.vue
@@ -21,12 +21,12 @@
<div>
<v-card>
<data-table :value="selectedRoles" @input="$store.commit('permissions/setSelectedRoles', $event)" :headers="headers" :items="roles">
- <div slot="action" slot-scope="row">
+ <div slot="action" slot-scope="row" v-if="canEdit">
<v-btn flat icon color="primary" @click.stop="$store.commit('permissions/editRole', row.item.id)"><v-icon>edit</v-icon></v-btn>
</div>
</data-table>
</v-card>
- <div class="text-xs-right">
+ <div class="text-xs-right" v-if="canEdit">
<v-btn color="error" flat @click="$store.commit('permissions/setDialog', true )" :disabled="selectedRoles.length === 0">
<v-icon left>remove_circle_outline</v-icon>{{ $tc('delete-role', selectedRoles.length, [selectedRoles.length]) }}
</v-btn>
@@ -53,7 +53,8 @@ export default {
{ text: this.$t('name'), key: 'name' },
{ text: this.$t('description'), key: 'descr' },
{ sortable: false, key: 'action' }
- ]
+ ],
+ canEdit: false
}
},
computed: {
@@ -62,7 +63,9 @@ export default {
methods: {
},
created () {
- this.$store.dispatch('permissions/loadRoleData')
+ this.$http.get('/api/permissions/permissions.editrole').then(response => {
+ this.canEdit = response.data
+ })
}
}
</script>
diff --git a/webapp/src/components/PermissionModuleUserList.vue b/webapp/src/components/PermissionModuleUserList.vue
index 15f003b..609ab37 100644
--- a/webapp/src/components/PermissionModuleUserList.vue
+++ b/webapp/src/components/PermissionModuleUserList.vue
@@ -31,7 +31,7 @@
</div>
</data-table>
</v-card>
- <div class="text-xs-right">
+ <div class="text-xs-right" v-if="canGrant">
<v-btn color="error" flat @click="$store.commit('permissions/grantRevoke', { show: true, grant: false } )" :disabled="selectedUsers.length === 0">
<v-icon left>remove_circle_outline</v-icon>{{ $t('revoke-role') }}
</v-btn>
@@ -57,7 +57,8 @@ export default {
{ text: this.$t('username'), key: 'username' },
{ text: this.$t('name'), key: 'name' },
{ text: this.$t('roles'), key: 'roles' }
- ]
+ ],
+ canGrant: false
}
},
computed: {
@@ -66,7 +67,9 @@ export default {
methods: {
},
created () {
- this.$store.dispatch('permissions/loadUserData')
+ this.$http.get('/api/permissions/permissions.grantrevoke').then(response => {
+ this.canGrant = response.data
+ })
}
}
</script>
diff --git a/webapp/src/store/permissions.js b/webapp/src/store/permissions.js
index b15b0d1..7ec454c 100644
--- a/webapp/src/store/permissions.js
+++ b/webapp/src/store/permissions.js
@@ -5,6 +5,8 @@ export default {
state: {
roles: [],
users: [],
+ groups: [],
+ permissions: [],
selectedRoles: [],
selectedUsers: [],
roleId: '',
@@ -23,6 +25,12 @@ export default {
setUsers (state, value) {
state.users = value
},
+ setGroups (state, value) {
+ state.groups = value
+ },
+ setPermissions (state, value) {
+ state.permissions = value
+ },
setSelectedRoles (state, value) {
state.selectedRoles = value
},
@@ -48,7 +56,7 @@ export default {
deleteSelectedRoles (context) {
// Filter selected array to get a list of ids.
const filteredArray = context.state.selectedRoles.map(x => x.id)
- axios.post('/api/roles?delete', { id: filteredArray }).then(response => {
+ axios.post('/api/roles?delete', { ids: filteredArray }).then(response => {
context.dispatch('loadData')
context.commit('setSelectedRoles', [])
})
@@ -63,9 +71,21 @@ export default {
context.commit('setUsers', response.data)
})
},
+ loadGroupData (context) {
+ axios.get('/api/groups').then(response => {
+ context.commit('setGroups', response.data)
+ })
+ },
+ loadPermissionData (context) {
+ axios.get('/api/permissions').then(response => {
+ context.commit('setPermissions', response.data)
+ })
+ },
loadData (context) {
context.dispatch('loadRoleData')
context.dispatch('loadUserData')
+ context.dispatch('loadGroupData')
+ context.dispatch('loadPermissionData')
}
}
}