Make sure to respect board acls in the frontend all over the place

Signed-off-by: Julius Härtl <jus@bitgrid.net>

appinfo/routes.php

@@ -38,7 +38,7 @@ return [
 		['name' => 'board#deleteUndo', 'url' => '/boards/{boardId}/deleteUndo', 'verb' => 'POST'],
 		['name' => 'board#getUserPermissions', 'url' => '/boards/{boardId}/permissions', 'verb' => 'GET'],
 		['name' => 'board#addAcl', 'url' => '/boards/{boardId}/acl', 'verb' => 'POST'],
-		['name' => 'board#updateAcl', 'url' => '/boards/{boardId}/acl', 'verb' => 'PUT'],
+		['name' => 'board#updateAcl', 'url' => '/boards/{boardId}/acl/{aclId}', 'verb' => 'PUT'],
 		['name' => 'board#deleteAcl', 'url' => '/boards/{boardId}/acl/{aclId}', 'verb' => 'DELETE'],
 		['name' => 'board#clone', 'url' => '/boards/{boardId}/clone', 'verb' => 'POST'],
 

src/components/Controls.vue

@@ -28,7 +28,7 @@
 			<h2><a href="#">{{ board.title }}</a></h2>
 		</div>
 		<div v-if="board" class="board-actions">
-			<div id="stack-add" v-click-outside="hideAddStack">
+			<div v-if="canManage" id="stack-add" v-click-outside="hideAddStack">
 				<Actions v-if="!isAddStackVisible">
 					<ActionButton icon="icon-add" :title="t('deck', 'Add new stack')" @click.stop="showAddStack" />
 				</Actions>
@@ -77,7 +77,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import { Actions, ActionButton } from '@nextcloud/vue'
 
 export default {
@@ -101,6 +101,10 @@ export default {
 		}
 	},
 	computed: {
+		...mapGetters([
+			'canEdit',
+			'canManage',
+		]),
 		...mapState({
 			compactMode: state => state.compactMode,
 		}),

src/components/board/Board.vue

@@ -29,7 +29,10 @@
 			<p />
 		</div>
 		<div v-else-if="board" class="board">
-			<Container lock-axix="y" orientation="horizontal" @drop="onDropStack">
+			<Container lock-axix="y"
+				orientation="horizontal"
+				:drag-handle-selector="dragHandleSelector"
+				@drop="onDropStack">
 				<Draggable v-for="stack in stacksByBoard" :key="stack.id">
 					<Stack :stack="stack" />
 				</Draggable>
@@ -46,7 +49,7 @@
 <script>
 
 import { Container, Draggable } from 'vue-smooth-dnd'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls'
 import Stack from './Stack'
 
@@ -77,9 +80,15 @@ export default {
 			board: state => state.currentBoard,
 			showArchived: state => state.showArchived,
 		}),
+		...mapGetters([
+			'canEdit',
+		]),
 		stacksByBoard() {
 			return this.$store.getters.stacksByBoard(this.board.id)
 		},
+		dragHandleSelector() {
+			return this.canEdit ? null : '.no-drag'
+		},
 	},
 	watch: {
 		id: 'fetchData',

src/components/board/BoardSidebar.vue

@@ -33,7 +33,10 @@
 			<TagsTabSidebar :board="board" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="2" name="Deleted items" icon="icon-delete">
+		<AppSidebarTab v-if="canEdit"
+			:order="2"
+			name="Deleted items"
+			icon="icon-delete">
 			<DeletedTabSidebar :board="board" />
 		</AppSidebarTab>
 
@@ -44,7 +47,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import SharingTabSidebar from './SharingTabSidebar'
 import TagsTabSidebar from './TagsTabSidebar'
 import DeletedTabSidebar from './DeletedTabSidebar'
@@ -73,6 +76,7 @@ export default {
 			board: state => state.currentBoard,
 			labels: state => state.labels,
 		}),
+		...mapGetters(['canEdit']),
 	},
 	methods: {
 		closeSidebar() {

src/components/board/SharingTabSidebar.vue

@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<Multiselect
+			v-if="canShare"
 			v-model="addAcl"
 			:placeholder="t('deck', 'Share board with a user, group or circle …')"
 			:options="formatedSharees"
@@ -17,6 +18,9 @@
 				<Avatar :user="board.owner.uid" />
 				<span class="has-tooltip username">
 					{{ board.owner.displayname }}
+					<span v-if="!isCurrentUser(board.owner.uid)" class="board-owner-label">
+						{{ t('deck', 'Board owner') }}
+					</span>
 				</span>
 			</li>
 			<li v-for="acl in board.acl" :key="acl.participant.uid">
@@ -29,17 +33,17 @@
 					<span v-if="acl.type===7">{{ t('deck', '(Circle)') }}</span>
 				</span>
 
-				<ActionCheckbox :checked="acl.permissionEdit" @change="clickEditAcl(acl)">
+				<ActionCheckbox v-if="!isCurrentUser(acl.participant.uid) && (canManage || (canEdit && canShare))" :checked="acl.permissionEdit" @change="clickEditAcl(acl)">
 					{{ t('deck', 'Can edit') }}
 				</ActionCheckbox>
-				<Actions>
-					<ActionCheckbox :checked="acl.permissionShare" @change="clickShareAcl(acl)">
+				<Actions v-if="!isCurrentUser(acl.participant.uid)" :force-menu="true">
+					<ActionCheckbox v-if="canManage || canShare" :checked="acl.permissionShare" @change="clickShareAcl(acl)">
 						{{ t('deck', 'Can share') }}
 					</ActionCheckbox>
-					<ActionCheckbox :checked="acl.permissionManage" @change="clickManageAcl(acl)">
+					<ActionCheckbox v-if="canManage" :checked="acl.permissionManage" @change="clickManageAcl(acl)">
 						{{ t('deck', 'Can manage') }}
 					</ActionCheckbox>
-					<ActionButton icon="icon-delete" @click="clickDeleteAcl(acl)">
+					<ActionButton v-if="canManage" icon="icon-delete" @click="clickDeleteAcl(acl)">
 						{{ t('deck', 'Delete') }}
 					</ActionButton>
 				</Actions>
@@ -61,6 +65,7 @@ import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
 import { ActionCheckbox } from '@nextcloud/vue/dist/Components/ActionCheckbox'
 import { CollectionList } from 'nextcloud-vue-collections'
 import { mapGetters } from 'vuex'
+import { getCurrentUser } from '@nextcloud/auth'
 
 export default {
 	name: 'SharingTabSidebar',
@@ -86,9 +91,15 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters({
-			sharees: 'sharees',
-		}),
+		...mapGetters([
+			'sharees',
+			'canEdit',
+			'canManage',
+			'canShare',
+		]),
+		isCurrentUser() {
+			return (uid) => uid === getCurrentUser().uid
+		},
 		formatedSharees() {
 			return this.unallocatedSharees.map(item => {
 
@@ -173,6 +184,9 @@ export default {
 		padding: 12px 9px;
 		flex-grow: 1;
 	}
+	.board-owner-label {
+		opacity: .7;
+	}
 	.avatarLabel {
 		padding: 6px
 	}

src/components/board/Stack.vue

@@ -25,7 +25,10 @@
 	<div class="stack">
 		<div class="stack--header">
 			<transition name="fade" mode="out-in">
-				<h3 v-if="!editing" @click="startEditing(stack)">
+				<h3 v-if="!canManage">
+					{{ stack.title }}
+				</h3>
+				<h3 v-else-if="!editing" @click="startEditing(stack)">
 					{{ stack.title }}
 				</h3>
 				<form v-else @submit.prevent="finishedEdit(stack)">
@@ -36,12 +39,12 @@
 						value="">
 				</form>
 			</transition>
-			<Actions :force-menu="true">
+			<Actions v-if="canManage" :force-menu="true">
 				<ActionButton icon="icon-delete" @click="deleteStack(stack)">
 					{{ t('deck', 'Delete stack') }}
 				</ActionButton>
 			</Actions>
-			<Actions>
+			<Actions v-if="canEdit">
 				<ActionButton icon="icon-add" @click="showAddCard=true">
 					{{ t('deck', 'Add card') }}
 				</ActionButton>
@@ -63,7 +66,11 @@
 				value="">
 		</form>
 
-		<Container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
+		<Container :get-child-payload="payloadForCard(stack.id)"
+			group-name="stack"
+			:drag-handle-selector="dragHandleSelector"
+			@should-accept-drop="canEdit"
+			@drop="($event) => onDropCard(stack.id, $event)">
 			<Draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
 				<CardItem v-if="card" :id="card.id" />
 			</Draggable>
@@ -73,6 +80,7 @@
 
 <script>
 
+import { mapGetters } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 import { Actions } from '@nextcloud/vue/dist/Components/Actions'
 import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
@@ -103,13 +111,19 @@ export default {
 		}
 	},
 	computed: {
+		...mapGetters([
+			'canManage',
+			'canEdit',
+		]),
 		cardsByStack() {
 			return (id) => this.$store.getters.cardsByStack(id)
 		},
+		dragHandleSelector() {
+			return this.canEdit ? null : '.no-drag'
+		},
 	},
 
 	methods: {
-
 		onDropCard(stackId, event) {
 			const { addedIndex, removedIndex, payload } = event
 			const card = Object.assign({}, payload)

src/components/board/TagsTabSidebar.vue

@@ -21,8 +21,14 @@
 					<div :style="{ backgroundColor: `#${label.color}`, color:textColor(label.color) }" class="label-title">
 						<span>{{ label.title }}</span>
 					</div>
-					<button v-tooltip="t('deck', 'Edit')" class="icon-rename" @click="clickEdit(label)" />
-					<button v-tooltip="t('deck', 'Delete')" class="icon-delete" @click="deleteLabel(label.id)" />
+					<button v-if="canManage"
+						v-tooltip="t('deck', 'Edit')"
+						class="icon-rename"
+						@click="clickEdit(label)" />
+					<button v-if="canManage"
+						v-tooltip="t('deck', 'Delete')"
+						class="icon-delete"
+						@click="deleteLabel(label.id)" />
 				</template>
 			</li>
 
@@ -43,7 +49,7 @@
 					<ColorPicker :value="'#' + addLabelObj.color" @input="updateColor" />
 				</template>
 			</li>
-			<button @click="clickShowAddLabel()">
+			<button v-if="canManage" @click="clickShowAddLabel()">
 				<span class="icon-add" />{{ t('deck', 'Add a new label') }}
 			</button>
 		</ul>
@@ -75,6 +81,7 @@ export default {
 	computed: {
 		...mapGetters({
 			labels: 'currentBoardLabels',
+			canManage: 'canManage',
 		}),
 		addLabelObjValidated() {
 			if (this.addLabelObj.title === '') {

src/components/card/CardSidebar.vue

@@ -34,6 +34,7 @@
 				<div class="section-details">
 					<Multiselect v-model="allLabels"
 						:multiple="true"
+						:disabled="!canEdit"
 						:options="currentBoard.labels"
 						:placeholder="t('deck', 'Assign a tag to this card…')"
 						:taggable="true"
@@ -61,6 +62,7 @@
 				</div>
 				<div class="section-details">
 					<Multiselect v-model="assignedUsers"
+						:disabled="!canEdit"
 						:multiple="true"
 						:options="assignableUsers"
 						:placeholder="t('deck', 'Assign a user to this card…')"
@@ -85,10 +87,11 @@
 						:placeholder="t('deck', 'Set a due date')"
 						type="datetime"
 						lang="en"
+						:disabled="!canEdit"
 						format="YYYY-MM-DD HH:mm"
 						confirm
 						@change="setDue()" />
-					<Actions>
+					<Actions v-if="canEdit">
 						<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
 							{{ t('deck', 'Remove due date') }}
 						</ActionButton>
@@ -104,6 +107,7 @@
 			</div>
 
 			<h5>{{ t('deck', 'Description') }}</h5>
+			<!-- FIXME: make sure the editor is disabled when canEdit is false -->
 			<VueEasymde ref="markdownEditor" v-model="copiedCard.description" :configs="mdeConfig" />
 		</AppSidebarTab>
 
@@ -127,7 +131,7 @@ import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
 import { AppSidebar } from '@nextcloud/vue/dist/Components/AppSidebar'
 import { AppSidebarTab } from '@nextcloud/vue/dist/Components/AppSidebarTab'
 import { DatetimePicker } from '@nextcloud/vue/dist/Components/DatetimePicker'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import VueEasymde from 'vue-easymde/dist/VueEasyMDE.common'
 import { Actions } from '@nextcloud/vue/dist/Components/Actions'
 import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
@@ -186,6 +190,7 @@ export default {
 			currentBoard: state => state.currentBoard,
 			assignableUsers: state => state.assignableUsers,
 		}),
+		...mapGetters(['canEdit']),
 		currentCard() {
 			return this.$store.getters.cardById(this.id)
 		},

src/components/cards/CardItem.vue

@@ -30,7 +30,7 @@
 		class="card"
 		@click.self="openCard">
 		<div class="card-upper">
-			<h3 v-if="showArchived">
+			<h3 v-if="showArchived || !canEdit">
 				{{ card.title }}
 			</h3>
 			<h3 v-else-if="!editing" @click.stop="startEditing(card)">
@@ -47,7 +47,7 @@
 				<input type="button" class="icon-confirm" @click="finishedEdit(card)">
 			</form>
 
-			<Actions v-if="!editing" @click.stop.prevent>
+			<Actions v-if="canEdit && !editing" @click.stop.prevent>
 				<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
 					{{ t('deck', 'Assign to me') }}
 				</ActionButton>
@@ -103,7 +103,7 @@ import { Actions } from '@nextcloud/vue/dist/Components/Actions'
 import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
 import { Multiselect } from '@nextcloud/vue/dist/Components/Multiselect'
 import ClickOutside from 'vue-click-outside'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import axios from '@nextcloud/axios'
 
 import CardBadges from './CardBadges'
@@ -139,6 +139,9 @@ export default {
 			showArchived: state => state.showArchived,
 			currentBoard: state => state.currentBoard,
 		}),
+		...mapGetters([
+			'canEdit',
+		]),
 		card() {
 			return this.$store.getters.cardById(this.id)
 		},

src/components/navigation/AppNavigationBoard.vue

@@ -124,17 +124,20 @@ export default {
 
 			// do not show actions while the item is loading
 			if (this.loading === false) {
+				const canManage = this.board.permissions.PERMISSION_MANAGE
 
-				actions.push({
-					action: () => {
-						this.hideMenu()
-						this.editTitle = this.board.title
-						this.editColor = '#' + this.board.color
-						this.editing = true
-					},
-					icon: 'icon-rename',
-					text: t('deck', 'Edit board'),
-				})
+				if (canManage) {
+					actions.push({
+						action: () => {
+							this.hideMenu()
+							this.editTitle = this.board.title
+							this.editColor = '#' + this.board.color
+							this.editing = true
+						},
+						icon: 'icon-rename',
+						text: t('deck', 'Edit board'),
+					})
+				}
 
 				actions.push({
 					action: async() => {
@@ -154,46 +157,47 @@ export default {
 					icon: 'icon-clone',
 					text: t('deck', 'Clone board'),
 				})
+				if (canManage) {
+					if (!this.board.archived) {
+						actions.push({
+							action: () => {
+								this.hideMenu()
+								this.loading = true
+								this.$store.dispatch('archiveBoard', this.board)
+							},
+							icon: 'icon-archive',
+							text: t('deck', 'Archive board'),
+						})
+					} else {
+						actions.push({
+							action: () => {
+								this.hideMenu()
+								this.loading = true
+								this.$store.dispatch('unarchiveBoard', this.board)
+							},
+							icon: 'icon-archive',
+							text: t('deck', 'Unarchive board'),
+						})
+					}
 
-				if (!this.board.archived) {
 					actions.push({
 						action: () => {
 							this.hideMenu()
 							this.loading = true
-							this.$store.dispatch('archiveBoard', this.board)
+							this.boardApi.deleteBoard(this.board)
+								.then(() => {
+									this.loading = false
+									this.deleted = true
+									this.undoTimeoutHandle = setTimeout(() => {
+										this.$store.dispatch('removeBoard', this.board)
+									}, 7000)
+								})
 						},
-						icon: 'icon-archive',
-						text: t('deck', 'Archive board'),
-					})
-				} else {
-					actions.push({
-						action: () => {
-							this.hideMenu()
-							this.loading = true
-							this.$store.dispatch('unarchiveBoard', this.board)
-						},
-						icon: 'icon-archive',
-						text: t('deck', 'Unarchive board'),
+						icon: 'icon-delete',
+						text: t('deck', 'Delete board'),
 					})
 				}
 
-				actions.push({
-					action: () => {
-						this.hideMenu()
-						this.loading = true
-						this.boardApi.deleteBoard(this.board)
-							.then(() => {
-								this.loading = false
-								this.deleted = true
-								this.undoTimeoutHandle = setTimeout(() => {
-									this.$store.dispatch('removeBoard', this.board)
-								}, 7000)
-							})
-					},
-					icon: 'icon-delete',
-					text: t('deck', 'Delete board'),
-				})
-
 				actions.push({
 					action: () => {
 						const route = this.routeTo

src/store/main.js

@@ -96,6 +96,15 @@ export default new Vuex.Store({
 		currentBoardLabels: state => {
 			return state.currentBoard ? state.currentBoard.labels : []
 		},
+		canEdit: state => {
+			return state.currentBoard ? state.currentBoard.permissions.PERMISSION_EDIT : false
+		},
+		canManage: state => {
+			return state.currentBoard ? state.currentBoard.permissions.PERMISSION_MANAGE : false
+		},
+		canShare: state => {
+			return state.currentBoard ? state.currentBoard.permissions.PERMISSION_SHARE : false
+		},
 	},
 	mutations: {
 		toggleShowArchived(state) {
@@ -218,7 +227,7 @@ export default new Vuex.Store({
 		updateAclFromCurrentBoard(state, acl) {
 			for (const acl_ in state.currentBoard.acl) {
 				if (state.currentBoard.acl[acl_].participant.uid === acl.participant.uid) {
-					state.currentBoard.acl[acl_] = acl
+					Vue.set(state.currentBoard.acl, acl_, acl)
 					break
 				}
 			}
@@ -246,6 +255,12 @@ export default new Vuex.Store({
 			commit('setAssignableUsers', board.users)
 		},
 
+		async refreshBoard({ commit }, boardId) {
+			const board = await apiClient.loadById(boardId)
+			commit('setCurrentBoard', board)
+			commit('setAssignableUsers', board.users)
+		},
+
 		toggleShowArchived({ commit }) {
 			commit('toggleShowArchived')
 		},
@@ -392,7 +407,7 @@ export default new Vuex.Store({
 			apiClient.addAcl(newAcl)
 				.then((returnAcl) => {
 					commit('addAclToCurrentBoard', returnAcl)
-					dispatch('loadBoardById', newAcl.boardId)
+					dispatch('refreshBoard', newAcl.boardId)
 				})
 		},
 		updateAclFromCurrentBoard({ commit }, acl) {