feat: restrict access to courses

apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/index.svelte

@@ -31,11 +31,11 @@
   import { snackbar } from '$lib/components/Snackbar/store';
   import Analytics from './Submissions/index.svelte';
   import { t } from '$lib/utils/functions/translations';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let exerciseId = '';
   export let path = '';
   export let goBack = () => {};
-  export let isStudent = true;
   export let isFetching = false;
 
   let preview: boolean = false;
@@ -44,7 +44,7 @@
   let selectedIndex = 0;
 
   async function handleSave() {
-    if (isStudent) return;
+    if ($globalStore.isStudent) return;
 
     const errors = validateQuestionnaire($questionnaire.questions);
     if (Object.values(errors).length > 0) {
@@ -81,7 +81,7 @@
   $: $questionnaire?.questions?.length < 1 && handleAddQuestion();
 </script>
 
-<PageBody bind:isPageNavHidden={isStudent} padding="px-4 overflow-x-hidden">
+<PageBody bind:isPageNavHidden={$globalStore.isStudent} padding="px-4 overflow-x-hidden">
   <div class="bg-gray-100 dark:bg-neutral-800 top-0 z-10 sticky p-2 mb-3">
     <Breadcrumb noTrailingSlash>
       <BreadcrumbItem href={path}
@@ -154,7 +154,7 @@
     <RoleBasedSecurity allowedRoles={[1, 2]}>
       <UpdateDescription {preview} />
     </RoleBasedSecurity>
-    {#if !isStudent && !preview}
+    {#if !$globalStore.isStudent && !preview}
       <EditMode bind:shouldDeleteExercise {exerciseId} {goBack} />
     {:else}
       <ViewMode {preview} {exerciseId} isFetchingExercise={isFetching} />

apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/index.svelte

@@ -18,11 +18,11 @@
   import type { ExerciseTemplate } from '$lib/utils/types';
   import { formatDate } from '$lib/utils/functions/routes/dashboard';
   import { t } from '$lib/utils/functions/translations';
+  import { globalStore } from '$lib/utils/store/app';
 
   export let path = '';
   export let exerciseId = '';
   export let lessonId = '';
-  export let isStudent = true;
 
   let open = false;
   let isFetching = false;
@@ -151,7 +151,7 @@
 {/if}
 
 {#if exerciseId}
-  <Exercise {exerciseId} {goBack} bind:path bind:isStudent {isFetching} />
+  <Exercise {exerciseId} {goBack} bind:path {isFetching} />
 {:else}
   <NewExerciseModal
     bind:open
@@ -161,7 +161,7 @@
     bind:title={newExercise.title}
   />
 
-  <PageBody bind:isPageNavHidden={isStudent}>
+  <PageBody bind:isPageNavHidden={$globalStore.isStudent}>
     <slot:fragment slot="header">
       <Breadcrumb class="my-2">
         <BreadcrumbItem href={path}>{$t('course.navItem.lessons.exercises.heading')}</BreadcrumbItem
@@ -193,7 +193,7 @@
               {$t('course.navItem.lessons.exercises.no_exercises')}
             </h2>
             <p class="text-sm text-center text-slate-500">
-              {#if isStudent}
+              {#if $globalStore.isStudent}
                 {$t('course.navItem.lessons.exercises.no_assigned_exercises')}
                 <strong> {$t('course.navItem.lessons.exercises.chill')} :)</strong>
               {:else}

apps/dashboard/src/lib/components/CourseContainer/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import { Moon } from 'svelte-loading-spinners';
   import { browser } from '$app/environment';
   import Navigation from '../Course/components/Navigation/index.svelte';
@@ -10,6 +11,9 @@
   import { fetchCourse } from '$lib/utils/services/courses';
   import { globalStore } from '$lib/utils/store/app';
   import { lessons } from '../Course/components/Lesson/store/lessons';
+  import Modal from '$lib/components/Modal/index.svelte';
+  import { t } from '$lib/utils/functions/translations';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
 
   export let courseId = '';
   export let path = '';
@@ -19,6 +23,7 @@
   export let containerClass = '';
 
   let prevCourseId = '';
+  let isPermitted = true;
 
   async function onCourseIdChange(courseId = '') {
     if (!courseId || prevCourseId === courseId || !browser || $course.id === courseId) return;
@@ -54,6 +59,9 @@
       $globalStore.isStudent = isStudent;
 
       filterPollsByStatus(isStudent);
+    } else if ($profile.id && $group.people.length) {
+      // Current User doesn't have permission to view
+      isPermitted = false;
     }
   } else {
     isStudent = $globalStore.isStudent;
@@ -70,13 +78,35 @@
   </Backdrop>
 {/if}
 
+<Modal open={!isPermitted} width="w-96" modalHeading={$t('course.not_permitted.header')}>
+  <div>
+    <p class="dark:text-white text-md text-center">
+      {$t('course.not_permitted.body')}
+    </p>
+
+    <div class="mt-5 flex justify-center">
+      <PrimaryButton
+        className="px-6 py-3"
+        label={$t('course.not_permitted.button')}
+        onClick={() => {
+          goto('/org/*');
+        }}
+      />
+    </div>
+  </div>
+</Modal>
+
 <div class="root">
   <Navigation {path} {isStudent} />
   <div class="rightBar {containerClass}" class:isMobile={$isMobile}>
     {#if isExercisePage}
       <Confetti />
     {/if}
-    <slot />
+
+    <!-- Show only if permitted -->
+    {#if isPermitted}
+      <slot />
+    {/if}
   </div>
 </div>
 

apps/dashboard/src/lib/components/RoleBasedSecurity/store.js

@@ -1 +0,0 @@
-import { writable } from 'svelte/store';