web/satellite: prevent unauthorized access to project settings page

This change further restricts projects members from accessing the
projects settings page by navigating to (all) projects dashboard when
/edit-project-details is visited or project is switched.
It also applies a white background to the project ownership tag to
improve contrast and visibility.

Change-Id: Ib855c4e3aa4be7ec9ec1e9b312041118442358ad
This commit is contained in:
Wilfred Asomani 2023-06-23 15:39:44 +00:00 committed by Storj Robot
parent 9d4787f5e7
commit 361f9fdba5
2 changed files with 17 additions and 0 deletions

View File

@ -215,6 +215,7 @@ import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore'; import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectsStore } from '@/store/modules/projectsStore'; import { useProjectsStore } from '@/store/modules/projectsStore';
import { useConfigStore } from '@/store/modules/configStore'; import { useConfigStore } from '@/store/modules/configStore';
import { RouteConfig } from '@/types/router';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
@ -636,6 +637,21 @@ onMounted(async (): Promise<void> => {
const projectID = projectsStore.state.selectedProject.id; const projectID = projectsStore.state.selectedProject.id;
if (!projectID) return; if (!projectID) return;
if (projectsStore.state.selectedProject.ownerId !== usersStore.state.user.id) {
await router.replace(configStore.state.config.allProjectsDashboard ? RouteConfig.AllProjectsDashboard : RouteConfig.ProjectDashboard.path);
return;
}
projectsStore.$onAction(({ name, after }) => {
if (name === 'selectProject') {
after((_) => {
if (projectsStore.state.selectedProject.ownerId !== usersStore.state.user.id) {
router.replace(RouteConfig.ProjectDashboard.path);
}
});
}
});
if (usersStore.state.user.paidTier) { if (usersStore.state.user.paidTier) {
isPaidTier.value = true; isPaidTier.value = true;
} }

View File

@ -48,6 +48,7 @@ const icon = computed((): string => {
border: 1px solid var(--c-yellow-2); border: 1px solid var(--c-yellow-2);
border-radius: 24px; border-radius: 24px;
color: var(--c-yellow-5); color: var(--c-yellow-5);
background: var(--c-white);
:deep(path) { :deep(path) {
fill: var(--c-yellow-5); fill: var(--c-yellow-5);