feat(ban): implement forbidden view for banned usersfeat/12259/ban-endpoints

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

5 files changed, 53 insertions, 0 deletions

diff --git a/src/App.vue b/src/App.vue
index b8457d26d..d8d3dc669 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -378,6 +378,10 @@ export default {
 			}
 		})
 
+		EventBus.on('forbidden-route', (params) => {
+			this.$router.push({ name: 'forbidden' })
+		})
+
 		/**
 		 * Listens to the conversationsReceived globalevent, emitted by the conversationsList
 		 * component each time a new batch of conversations is received and processed in
diff --git a/src/__mocks__/router.js b/src/__mocks__/router.js
index 613e74aa4..f62163e43 100644
--- a/src/__mocks__/router.js
+++ b/src/__mocks__/router.js
@@ -25,6 +25,12 @@ export default new VueRouter({
 			props: true,
 		},
 		{
+			path: '/apps/spreed/forbidden',
+			name: 'forbidden',
+			component: Stub,
+			props: true,
+		},
+		{
 			path: '/apps/spreed/duplicate-session',
 			name: 'duplicatesession',
 			component: Stub,
diff --git a/src/router/router.js b/src/router/router.js
index 42c458abf..6104a32e6 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -9,6 +9,7 @@ import Router from 'vue-router'
 import { getRootUrl, generateUrl } from '@nextcloud/router'
 
 import CallView from '../components/CallView/CallView.vue'
+import ForbiddenView from '../views/ForbiddenView.vue'
 import MainView from '../views/MainView.vue'
 import NotFoundView from '../views/NotFoundView.vue'
 import SessionConflictView from '../views/SessionConflictView.vue'
@@ -52,6 +53,12 @@ export default new Router({
 			props: true,
 		},
 		{
+			path: '/apps/spreed/forbidden',
+			name: 'forbidden',
+			component: ForbiddenView,
+			props: true,
+		},
+		{
 			path: '/apps/spreed/duplicate-session',
 			name: 'duplicatesession',
 			component: SessionConflictView,
diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index aed541c75..c8ecffd2d 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -890,6 +890,8 @@ const actions = {
 				} else {
 					await context.dispatch('confirmForceJoinConversation', { token })
 				}
+			} else if (error?.response?.status === 403 && error?.response?.data?.ocs?.data?.error === 'ban') {
+				EventBus.emit('forbidden-route', error.response.data.ocs.data)
 			} else {
 				console.error(error)
 				showError(t('spreed', 'Failed to join the conversation. Try to reload the page.'))
diff --git a/src/views/ForbiddenView.vue b/src/views/ForbiddenView.vue
new file mode 100644
index 000000000..d44e077d2
--- /dev/null
+++ b/src/views/ForbiddenView.vue
@@ -0,0 +1,34 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<EmptyView :name="t('spreed', 'You do not have permissions to access this conversation.')"
+		:description="t('spreed', 'Join a conversation or start a new one!')">
+		<template #icon>
+			<Octagon />
+		</template>
+	</EmptyView>
+</template>
+
+<script>
+import Octagon from 'vue-material-design-icons/Octagon.vue'
+
+import { t } from '@nextcloud/l10n'
+
+import EmptyView from '../components/EmptyView.vue'
+
+export default {
+	name: 'ForbiddenView',
+
+	components: {
+		EmptyView,
+		Octagon,
+	},
+
+	methods: {
+		t,
+	},
+}
+</script>